fix: visually hidden is complete style based now - no css

Author: kotAPI

src/components/ui/VisuallyHidden/VisuallyHidden.tsx

@@ -1,22 +1,55 @@
 'use client';
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import Primitive from '~/core/primitives/Primitive';
 import { customClassSwitcher } from '~/core';
 import { clsx } from 'clsx';
+
 const COMPONENT_NAME = 'VisuallyHidden';
 
 export type VisuallyHiddenProps = {
     children: React.ReactNode;
     customRootClass?: string;
     className?: string;
     asChild?: boolean;
-    props: Record<string, any>[];
-}
+    style?: CSSProperties;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+const VISUALLY_HIDDEN_STYLES: CSSProperties = {
+    position: 'absolute',
+    width: '1px',
+    height: '1px',
+    margin: '-1px',
+    border: '0',
+    padding: '0',
+    whiteSpace: 'nowrap',
+    clip: 'rect(0 0 0 0)',
+    clipPath: 'inset(50%)',
+    overflow: 'hidden',
+    pointerEvents: 'none',
+    userSelect: 'none',
+    visibility: 'hidden'
+} as const;
 
-const VisuallyHidden = ({ children, customRootClass, className, ...props }: VisuallyHiddenProps) => {
+const VisuallyHidden = ({
+    children,
+    customRootClass,
+    className,
+    style = {},
+    ...props
+}: VisuallyHiddenProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-    return <Primitive.div className={clsx(rootClass, className)} {...props}>{children}</Primitive.div>;
+
+    return (
+        <Primitive.div
+            className={clsx(rootClass, className)}
+            style={{ ...VISUALLY_HIDDEN_STYLES, ...style }} // overriding possible
+            {...props}
+        >
+            {children}
+        </Primitive.div>
+    );
 };
+
 VisuallyHidden.displayName = COMPONENT_NAME;
 
 export default VisuallyHidden;

styles/themes/components/visuallyhidden.scss

@@ -31,7 +31,6 @@
 @use "components/scroll-area";
 @use "components/switch";
 @use "components/skeleton";
-@use "components/visuallyhidden";
 @use "components/collapsible";
 @use "components/tab-nav";
 @use "components/select";