From f12b246abae300ae2581d140cd14d4aabdcfc9cd Mon Sep 17 00:00:00 2001
From: Arshpreet Singh <73437174+GoldGroove06@users.noreply.github.com.>
Date: Sat, 28 Dec 2024 13:42:24 +0530
Subject: [PATCH 1/3] Visually hidden docs

---
 .../visually-hidden/docs/codeUsage.js         | 18 ++++++++
 .../docs/components/visually-hidden/page.js   | 44 +++++++++++++++++++
 docs/components/navigation/Navigation.js      |  4 ++
 3 files changed, 66 insertions(+)
 create mode 100644 docs/app/docs/components/visually-hidden/docs/codeUsage.js
 create mode 100644 docs/app/docs/components/visually-hidden/page.js

diff --git a/docs/app/docs/components/visually-hidden/docs/codeUsage.js b/docs/app/docs/components/visually-hidden/docs/codeUsage.js
new file mode 100644
index 00000000..52d325ac
--- /dev/null
+++ b/docs/app/docs/components/visually-hidden/docs/codeUsage.js
@@ -0,0 +1,18 @@
+const code = {
+    javascript: {
+        code: `import VisuallyHidden from "@radui/ui/VisuallyHidden""
+
+const VisualltHiddenExample = () => (
+    <VisuallyHidden asChild>
+            <span>This is a visually hidden text</span>
+    </VisuallyHidden>
+)`
+    },
+    scss: {
+        code: `.rad-ui-visually-hidden {
+    display: none;
+}`
+    },
+}
+
+export default code;
\ No newline at end of file
diff --git a/docs/app/docs/components/visually-hidden/page.js b/docs/app/docs/components/visually-hidden/page.js
new file mode 100644
index 00000000..9ed2fd77
--- /dev/null
+++ b/docs/app/docs/components/visually-hidden/page.js
@@ -0,0 +1,44 @@
+const PAGE_NAME = 'VISUALLY_HIDDEN_DOCS'
+import Documentation from "@/components/layout/Documentation/Documentation"
+
+
+import VisuallyHidden from "@radui/ui/VisuallyHidden"
+import SEO from "../../docsIndex"
+export const metadata = SEO.getMetadata(PAGE_NAME)
+
+import codeUsage from "./docs/codeUsage"
+
+const VisuallyHiddenDocs = () => {
+
+    const columns = [
+        {name: 'Prop', key: 'prop'},
+        {name: 'Type', key: 'type'},
+        {name: 'Default', key: 'default'},
+        {name: 'Description', key: 'description'},
+    ];
+
+    const data = [
+        {prop: 'asChild', type: 'boolean', default: 'false', description: 'renders the children in desired element'},
+       
+    ];
+
+
+    return <div>
+        <Documentation currentPage={PAGE_NAME} title='Visually Hidden' description={`Use these helpers to visually hide elements but keep them accessible to assistive technologies.`}>
+            <Documentation.ComponentHero codeUsage={codeUsage}>
+                <div>
+                <VisuallyHidden asChild>
+                    <span>This is a visually hidden text</span>
+                </VisuallyHidden>
+                </div>
+            </Documentation.ComponentHero>
+            
+            
+            <div >
+                <Documentation.Table columns={columns} data={data} />
+            </div>
+        </Documentation>
+    </div>
+}
+
+export default VisuallyHiddenDocs;
\ No newline at end of file
diff --git a/docs/components/navigation/Navigation.js b/docs/components/navigation/Navigation.js
index 34cdb9e4..4eee0795 100644
--- a/docs/components/navigation/Navigation.js
+++ b/docs/components/navigation/Navigation.js
@@ -154,6 +154,10 @@ const sections = [
             {
                 title: "Tooltip",
                 path: "/docs/components/tooltip"
+            },
+            {
+                title: "VisuallyHidden",
+                path: "/docs/components/visually-hidden"
             }
         ]
     },

From 6afc57125f95e92243a2da2a8b987ab4cd78e47c Mon Sep 17 00:00:00 2001
From: Arshpreet Singh <73437174+GoldGroove06@users.noreply.github.com.>
Date: Sat, 28 Dec 2024 13:42:24 +0530
Subject: [PATCH 2/3] Visually hidden docs

---
 .../visually-hidden/docs/codeUsage.js         | 18 ++++++++
 .../docs/components/visually-hidden/page.js   | 44 +++++++++++++++++++
 docs/components/navigation/Navigation.js      |  4 ++
 3 files changed, 66 insertions(+)
 create mode 100644 docs/app/docs/components/visually-hidden/docs/codeUsage.js
 create mode 100644 docs/app/docs/components/visually-hidden/page.js

diff --git a/docs/app/docs/components/visually-hidden/docs/codeUsage.js b/docs/app/docs/components/visually-hidden/docs/codeUsage.js
new file mode 100644
index 00000000..52d325ac
--- /dev/null
+++ b/docs/app/docs/components/visually-hidden/docs/codeUsage.js
@@ -0,0 +1,18 @@
+const code = {
+    javascript: {
+        code: `import VisuallyHidden from "@radui/ui/VisuallyHidden""
+
+const VisualltHiddenExample = () => (
+    <VisuallyHidden asChild>
+            <span>This is a visually hidden text</span>
+    </VisuallyHidden>
+)`
+    },
+    scss: {
+        code: `.rad-ui-visually-hidden {
+    display: none;
+}`
+    },
+}
+
+export default code;
\ No newline at end of file
diff --git a/docs/app/docs/components/visually-hidden/page.js b/docs/app/docs/components/visually-hidden/page.js
new file mode 100644
index 00000000..9ed2fd77
--- /dev/null
+++ b/docs/app/docs/components/visually-hidden/page.js
@@ -0,0 +1,44 @@
+const PAGE_NAME = 'VISUALLY_HIDDEN_DOCS'
+import Documentation from "@/components/layout/Documentation/Documentation"
+
+
+import VisuallyHidden from "@radui/ui/VisuallyHidden"
+import SEO from "../../docsIndex"
+export const metadata = SEO.getMetadata(PAGE_NAME)
+
+import codeUsage from "./docs/codeUsage"
+
+const VisuallyHiddenDocs = () => {
+
+    const columns = [
+        {name: 'Prop', key: 'prop'},
+        {name: 'Type', key: 'type'},
+        {name: 'Default', key: 'default'},
+        {name: 'Description', key: 'description'},
+    ];
+
+    const data = [
+        {prop: 'asChild', type: 'boolean', default: 'false', description: 'renders the children in desired element'},
+       
+    ];
+
+
+    return <div>
+        <Documentation currentPage={PAGE_NAME} title='Visually Hidden' description={`Use these helpers to visually hide elements but keep them accessible to assistive technologies.`}>
+            <Documentation.ComponentHero codeUsage={codeUsage}>
+                <div>
+                <VisuallyHidden asChild>
+                    <span>This is a visually hidden text</span>
+                </VisuallyHidden>
+                </div>
+            </Documentation.ComponentHero>
+            
+            
+            <div >
+                <Documentation.Table columns={columns} data={data} />
+            </div>
+        </Documentation>
+    </div>
+}
+
+export default VisuallyHiddenDocs;
\ No newline at end of file
diff --git a/docs/components/navigation/Navigation.js b/docs/components/navigation/Navigation.js
index a3bc1947..d9f8d3d0 100644
--- a/docs/components/navigation/Navigation.js
+++ b/docs/components/navigation/Navigation.js
@@ -158,6 +158,10 @@ const sections = [
             {
                 title: "Tooltip",
                 path: "/docs/components/tooltip"
+            },
+            {
+                title: "VisuallyHidden",
+                path: "/docs/components/visually-hidden"
             }
         ]
     },

From 8acf074ae05c919dbbcd0d487ca0ff90153d5f29 Mon Sep 17 00:00:00 2001
From: Arshpreet Singh <73437174+GoldGroove06@users.noreply.github.com.>
Date: Sat, 28 Dec 2024 19:19:12 +0530
Subject: [PATCH 3/3] Visually hidden docs

---
 .../docs/components/visually-hidden/docs/codeUsage.js    | 9 ++-------
 docs/app/docs/components/visually-hidden/page.js         | 2 +-
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/docs/app/docs/components/visually-hidden/docs/codeUsage.js b/docs/app/docs/components/visually-hidden/docs/codeUsage.js
index 52d325ac..fae2a4a6 100644
--- a/docs/app/docs/components/visually-hidden/docs/codeUsage.js
+++ b/docs/app/docs/components/visually-hidden/docs/codeUsage.js
@@ -3,16 +3,11 @@ const code = {
         code: `import VisuallyHidden from "@radui/ui/VisuallyHidden""
 
 const VisualltHiddenExample = () => (
-    <VisuallyHidden asChild>
+    <VisuallyHidden asChild style={{display: "none"}}>
             <span>This is a visually hidden text</span>
     </VisuallyHidden>
 )`
-    },
-    scss: {
-        code: `.rad-ui-visually-hidden {
-    display: none;
-}`
-    },
+    }
 }
 
 export default code;
\ No newline at end of file
diff --git a/docs/app/docs/components/visually-hidden/page.js b/docs/app/docs/components/visually-hidden/page.js
index 9ed2fd77..0e77a8dd 100644
--- a/docs/app/docs/components/visually-hidden/page.js
+++ b/docs/app/docs/components/visually-hidden/page.js
@@ -27,7 +27,7 @@ const VisuallyHiddenDocs = () => {
         <Documentation currentPage={PAGE_NAME} title='Visually Hidden' description={`Use these helpers to visually hide elements but keep them accessible to assistive technologies.`}>
             <Documentation.ComponentHero codeUsage={codeUsage}>
                 <div>
-                <VisuallyHidden asChild>
+                <VisuallyHidden asChild style={{display: "none"}}>
                     <span>This is a visually hidden text</span>
                 </VisuallyHidden>
                 </div>