Merge branch 'select-primitive-t1' of https://github.com/GoldGroove06/radui-fork into select-primitive-t1

Author: GoldGroove06

docs/app/docs/contributing/contributing-to-rad-ui/StarUs.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import Button from "@radui/ui/Button"
+
+const StarUs = () => {
+    return <Button onClick={() => window.open("https://github.com/rad-ui/ui", "_blank")}>Star us on GitHub</Button>
+}
+
+export default StarUs;

docs/app/docs/contributing/contributing-to-rad-ui/page.mdx

@@ -1,7 +1,8 @@
-import Button from "@radui/ui/Button"
+
 import contributingToRadUiMetadata from "./seo"
 
 export const metadata = contributingToRadUiMetadata
+import StarUs from "./StarUs"
 
 # Contributing to Rad UI
 
@@ -11,7 +12,7 @@ If you're unsure about what to contribute on, feel free to take your time explor
 
 You can also support us by starring the repository on GitHub.
 
-<Button >Star us on GitHub</Button>
+<StarUs />
 
 ## Join the Discord
 

docs/app/docs/contributing/setting-up-dev-environment/page.mdx

@@ -51,6 +51,12 @@ First, navigate to the docs directory:
 cd docs
 ```
 
+Then install the dependencies: 
+
+```bash
+npm install
+```
+
 Then start the Next.js development server: 
 
 ```bash

docs/app/docs/layout.tsx

@@ -3,28 +3,35 @@
 import PageDetails from "@/components/seo/PageDetails";
 import Navigation from '@/components/navigation/Navigation';
 import EditPageOnGithub from "@/components/docsHelpers/EditPageOnGithub";
-
+import ScrollArea from "@radui/ui/ScrollArea"
 
 type Doc = {
-	children: React.ReactNode;
+    children: React.ReactNode;
 };
 
 
 const Layout = ({ children }: Doc) => {
     return (
-        <div className= "md:flex max-h-screen overflow-y-auto">
-             <div className='md:flex hidden overflow-y-auto'>
-                <Navigation />
+        <div className="md:flex md:flex-row md:items-stretch" style={{ height: "calc(100vh - 57px)" }}>
+            <div className="flex-none flex-col items-stretch h-full md:flex hidden">
+                            <Navigation />
             </div>
-            <div className='text-gray-1000 flex flex-col overflow-y-auto flex-1' id="docs-content">
-                <div className=' p-4 md:mx-auto md:max-w-[1440px] w-full'>
-                    <div className="w-full max-w-screen-lg mx-auto">
-                    <PageDetails />
-                    {children}
-                    <EditPageOnGithub />
-                    </div>
 
-                </div>
+            <div className='text-gray-1000 flex flex-col flex-1 overflow-hidden' id="docs-content">
+                <ScrollArea.Root style={{ width: "100%", height: "100%" }}>
+                    <ScrollArea.Viewport style={{ height: "100%" }}>
+                        <div className=' p-4 md:mx-auto md:max-w-[1440px] w-full'>
+                            <div className="w-full max-w-screen-lg mx-auto">
+                                <PageDetails />
+                                {children}
+                                <EditPageOnGithub />
+                            </div>
+                        </div>
+                    </ScrollArea.Viewport>
+                    <ScrollArea.Scrollbar orientation='vertical' >
+                        <ScrollArea.Thumb />
+                    </ScrollArea.Scrollbar>
+                </ScrollArea.Root>
             </div>
         </div>
     )

docs/app/page.tsx

@@ -71,7 +71,7 @@ const JoinCommunity = () => {
 }
 
 const DesignedBy = () => {
-  return <div className="my-10 text-gray-1000 text-right px-4">
+  return <div className="my-10 text-gray-700 text-right px-4">
    <div>
     <Text>Website designed by <Link href="https://carmenw.design/" target="_blank" rel="noopener noreferrer">Carmen</Link> and <Link href="https://maryandesign.net/" target="_blank" rel="noopener noreferrer">Maryan</Link>.</Text>
    </div>

docs/components/Main/NavBar/NavBarContext.tsx

@@ -1,3 +1,4 @@
+'use client'
 import { createContext } from "react";
 
 type NavBarContextType = {

docs/components/Main/NavBar/index.js

@@ -1,4 +1,4 @@
-"use client"
+
 
 import NavRoot from "./helpers/NavRoot"
 import Navigation from "@/components/navigation/Navigation"

docs/components/layout/ScrollContainers/FullHeightScroll.tsx

@@ -1,13 +1,20 @@
+'use client'
+import ScrollArea from '@radui/ui/ScrollArea';
+
 const FullHeightScroll = ({ children, scrollable = true, className='', ...props }) => {
     // An important layout component that allows for full height scrolling
-    return <div
-className={` ${className}  ${scrollable?' overflow-y-auto overflow-x-hidden':''}`} {...props} style={{
-
-    }}>
-        <div className="max-w-[1440px] mx-auto">
-            {children}
-        </div>
-    </div>
+    return <ScrollArea.Root style={{ height: "100%", width: "100%" }}>
+        <ScrollArea.Viewport style={{ height: "100%" }}>
+            <div className={` ${className}  ${scrollable?'':''}`} {...props}>
+                <div className="max-w-[1440px] mx-auto">
+                    {children}
+                </div>
+            </div>
+        </ScrollArea.Viewport>
+        <ScrollArea.Scrollbar orientation='vertical'>
+            <ScrollArea.Thumb />
+        </ScrollArea.Scrollbar>
+    </ScrollArea.Root>
 }
 
 export default FullHeightScroll;

docs/components/navigation/Category.tsx

@@ -0,0 +1,17 @@
+import NavItem from './NavItem'
+
+const Category = ({ categoryItem, pathname, setIsDocsNavOpen }) => {
+    return <div className="px-2">
+        <div className='px-2 py-2 font-medium text-xs text-gray-1000'>{categoryItem.title}</div>
+        <ul>
+            {categoryItem.items.map((item, itemKey) => {
+                return <li key={itemKey} onClick={() => setIsDocsNavOpen(false)}>
+                    <NavItem item={item} path={pathname} setIsDocsNavOpen={setIsDocsNavOpen} />
+                </li>
+            })}
+        </ul>
+    </div>
+}
+
+
+export default Category;

docs/components/navigation/NavItem.js

@@ -1,4 +1,4 @@
-"use client"
+
 
 import Link from 'next/link'