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] 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"
             }
         ]
     },