diff --git a/docs/app/docs/components/card/page.js b/docs/app/docs/components/card/page.js index 92d65eb0..14229c61 100644 --- a/docs/app/docs/components/card/page.js +++ b/docs/app/docs/components/card/page.js @@ -16,13 +16,13 @@ const CardDocs = () => { `}> - +
- Peter Kowalsky + Peter Parker
- Content Engineer + Biochemist
diff --git a/docs/app/docs/components/heading/page.js b/docs/app/docs/components/heading/page.js index 2ed18775..9d8df98c 100644 --- a/docs/app/docs/components/heading/page.js +++ b/docs/app/docs/components/heading/page.js @@ -14,7 +14,7 @@ const AvatarDocs = () => { Headings are used to display titles and subtitles. `}> -
+
Heading 1 Heading 2 Heading 3 diff --git a/docs/app/docs/components/separator/page.js b/docs/app/docs/components/separator/page.js index 775f0f14..484865a9 100644 --- a/docs/app/docs/components/separator/page.js +++ b/docs/app/docs/components/separator/page.js @@ -15,12 +15,12 @@ const AvatarDocs = () => { Separator is used to separate content. `}> -
+
Welcome to Rad UI
-
+
Modern Accessible diff --git a/docs/app/docs/components/text/page.js b/docs/app/docs/components/text/page.js index bd32a67d..02ec72f9 100644 --- a/docs/app/docs/components/text/page.js +++ b/docs/app/docs/components/text/page.js @@ -13,7 +13,7 @@ const TextDocs = () => { Text is used to display customizable text content. `}> -
+
This is an example of the Text component
diff --git a/docs/app/docs/components/tooltip/page.js b/docs/app/docs/components/tooltip/page.js index 5834a3e6..ca453316 100644 --- a/docs/app/docs/components/tooltip/page.js +++ b/docs/app/docs/components/tooltip/page.js @@ -22,7 +22,7 @@ const AvatarDocs = () => { - + Hello Tooltip. Hover Me! diff --git a/docs/app/docs/first-steps/installation/page.js b/docs/app/docs/first-steps/installation/page.js index 4e39a4a9..e070fab7 100644 --- a/docs/app/docs/first-steps/installation/page.js +++ b/docs/app/docs/first-steps/installation/page.js @@ -19,17 +19,27 @@ import Documentation from "@/components/layout/Documentation/Documentation" const Introduction = () => { return - + It's super easy to get started with Rad UI. You can install it using npm or yarn. - Using Yarn - - yarn add @radui/ui + Using Yarn + + + + yarn add @radui/ui + + + Using npm - npm install @radui/ui --save + + + npm install @radui/ui --save + + + diff --git a/docs/app/globals.scss b/docs/app/globals.scss index ce4e6584..065292fd 100644 --- a/docs/app/globals.scss +++ b/docs/app/globals.scss @@ -9,11 +9,10 @@ code { padding: 16px; border-radius: 4px; - background-color: var(--rad-ui-color-plum-800); - color: var(--rad-ui-color-gray-1000); background-color: var(--rad-ui-color-accent-100); + color: var(--rad-ui-color-gray-1000); display: block; - border: 1px solid var(--rad-ui-color-indigo-500); + border: 1px solid var(--rad-ui-color-accent-500); font-size: 12px; } diff --git a/docs/app/landingComponents/HeroSection.js b/docs/app/landingComponents/HeroSection.js index 4c927303..e3aa5124 100644 --- a/docs/app/landingComponents/HeroSection.js +++ b/docs/app/landingComponents/HeroSection.js @@ -1,19 +1,13 @@ "use client" - - import Button from "@radui/ui/Button" import Heading from "@radui/ui/Heading" - - - const HeroSection = () => { return
-
- + Build
Effortless,

No
Compromise UI
Fast. diff --git a/docs/app/layout.js b/docs/app/layout.js index 722971a9..6bdd56a7 100644 --- a/docs/app/layout.js +++ b/docs/app/layout.js @@ -16,9 +16,9 @@ export const metadata = { description: 'Rad UI is a modern React UI Library for accessible and fast web applications', } -export default function RootLayout({ children, ...props }) { +export default async function RootLayout({ children, ...props }) { - const cookieStore = cookies() + const cookieStore = await cookies() const darkModeSsrValue = cookieStore.get('darkMode')?.value || false return ( diff --git a/docs/components/Copy.js b/docs/components/Copy.js index f8adb8ee..b9c4436a 100644 --- a/docs/components/Copy.js +++ b/docs/components/Copy.js @@ -1,11 +1,11 @@ 'use client'; import { useState, useEffect } from 'react'; -function Copy({ children }) { +function Copy({ content }) { const [isCopied, setIsCopied] = useState(false); const handleCopy = () => { - navigator.clipboard.writeText(children); + navigator.clipboard.writeText(content); setIsCopied(true); }; @@ -29,10 +29,9 @@ function Copy({ children }) { return ( - {children} diff --git a/docs/components/Main/Main.js b/docs/components/Main/Main.js index 7d5a2436..5cdc56d9 100644 --- a/docs/components/Main/Main.js +++ b/docs/components/Main/Main.js @@ -1,85 +1,26 @@ 'use client'; import Theme from '@/components/layout/Theme'; import { useCallback, useState } from 'react'; -import { parseCookies, setCookie } from 'nookies'; import Button from '@radui/ui/Button'; +import { parseCookies, setCookie } from 'nookies'; -const DiscordLogo = () => { - return ; -}; - -const GithubLogo = () => { - return ; -}; - -const RadUILogo = () => { - return - - - - - ; -}; +import NavBar from './NavBar'; -const SunIcon = () => { - return ; -}; -const MoonIcon = () => { - return ; -}; const MainLayout = ({ darkModeSsrValue, children }) => { const cookies = parseCookies(); const [darkMode, setDarkMode] = useState(darkModeSsrValue === 'true'); - const toggleDarkMode = () => { - const toggledState = !darkMode; - setDarkMode(toggledState); - setCookie(cookies, 'darkMode', toggledState, { - maxAge: 30 * 24 * 60 * 60, - path: '/' - }); - }; - const openLink = useCallback((url) => () => { - window.open(url, '_blank'); - }, []); + return (
{/* Navbar start */} -
- -
- - - - -
-
- - + - - -
- -
{/* Navbar end */}
{children} diff --git a/docs/components/Main/NavBar.js b/docs/components/Main/NavBar.js new file mode 100644 index 00000000..63cd1807 --- /dev/null +++ b/docs/components/Main/NavBar.js @@ -0,0 +1,83 @@ + + +import Button from '@radui/ui/Button'; +import { useCallback, useState } from 'react'; + + +const DiscordLogo = () => { + return ; +}; + +const GithubLogo = () => { + return ; +}; + +const RadUILogo = () => { + return + + + + + ; +}; + +const SunIcon = () => { + return ; +}; + +const MoonIcon = () => { + return ; +}; + + +const NavBar = ({darkMode,setDarkMode, cookies,setCookie}) => { + + + const openLink = useCallback((url) => () => { + window.open(url, '_blank'); + }, []); + + const toggleDarkMode = () => { + const toggledState = !darkMode; + setDarkMode(toggledState); + + setCookie(cookies, 'darkMode', toggledState, { + maxAge: 30 * 24 * 60 * 60, + path: '/' + }); + }; + + + return
+ +
+ + + + +
+
+ + + + + +
+ +
+} + +export default NavBar \ No newline at end of file diff --git a/docs/components/layout/Documentation/Documentation.js b/docs/components/layout/Documentation/Documentation.js index 5f248c5c..a724e373 100644 --- a/docs/components/layout/Documentation/Documentation.js +++ b/docs/components/layout/Documentation/Documentation.js @@ -34,7 +34,7 @@ const Documentation = ({ title = '', description = '', currentPage = undefined, {children}
-
+
{previous && {previous?.basic_title}}
diff --git a/docs/components/layout/Documentation/helpers/CodeBlock.js b/docs/components/layout/Documentation/helpers/CodeBlock.js index 670913a1..1d674a90 100644 --- a/docs/components/layout/Documentation/helpers/CodeBlock.js +++ b/docs/components/layout/Documentation/helpers/CodeBlock.js @@ -2,9 +2,12 @@ import React from 'react'; import { refractor } from 'refractor'; import js from 'refractor/lang/javascript'; import jsx from 'refractor/lang/jsx'; +import scss from 'refractor/lang/scss'; // Add SCSS import +import Copy from '@/components/Copy'; refractor.register(js); refractor.register(jsx); +refractor.register(scss); const renderElement = (element, index) => { if (element.type === 'element') { @@ -27,11 +30,22 @@ const CodeBlock = ({ children, language = 'jsx' }) => { let code = refractor.highlight(children, language); code = code.children.map((child, index) => renderElement(child, index)); + // Format the code for copying by removing extra newlines and trimming + const copyContent = children + .replace(/\n{2,}/g, '\n') // Replace multiple newlines with single newline + .trim(); // Remove leading/trailing whitespace + return ( - 
+        
             {code}
+           
+           
+           
         

     );
 };
 
 export default CodeBlock;
+
+
+
diff --git a/docs/components/layout/Documentation/helpers/ComponentHero/ComponentHero.js b/docs/components/layout/Documentation/helpers/ComponentHero/ComponentHero.js
index 132844e6..b8d0869e 100644
--- a/docs/components/layout/Documentation/helpers/ComponentHero/ComponentHero.js
+++ b/docs/components/layout/Documentation/helpers/ComponentHero/ComponentHero.js
@@ -1,14 +1,8 @@
 "use client"
 import CodeBlock from '../CodeBlock';
-
 import { useState } from 'react'
-
-
-
 import Tabs from "@radui/ui/Tabs"
 
-
-
 const TabContainer = ({ children }) => {
     return 

         {children}
@@ -17,15 +11,12 @@ const TabContainer = ({ children }) => {
 
 const initializeTabs = (codeUsage) => {
     const tabs = []
-
     for (const key in codeUsage) {
         if (Object.hasOwnProperty.call(codeUsage, key)) {
-            
             let language = key
             if(key === 'javascript') {
                 language = 'jsx'
             }
-
             const element = codeUsage[key];
             tabs.push({
                 label: key,
@@ -34,11 +25,7 @@ const initializeTabs = (codeUsage) => {
             })
         }
     }
-
     return tabs
-
-
-
 }
 
 
@@ -47,10 +34,9 @@ const ComponentHero = ({ children, codeUsage = {} }) => {
     const data = initializeTabs(codeUsage)
 
     return 

-        

+        

             {children}
         

-
         

             
         

diff --git a/docs/components/layout/Documentation/utils.js b/docs/components/layout/Documentation/utils.js
index ab2086bd..a9632080 100644
--- a/docs/components/layout/Documentation/utils.js
+++ b/docs/components/layout/Documentation/utils.js
@@ -1,12 +1,38 @@
+"use client"
+
+const LinkIcon =()=>{
+    return 
+}
+
 export const BookMarkLink = ({ children, id }) => {
     const sanitizedId = id.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+
+    const scrollToElement = (e) => {
+        e.preventDefault();
+        const element = document.getElementById(sanitizedId);
+        const offset = 80; // Adjust this value based on your header height
+        const elementPosition = element.getBoundingClientRect().top;
+        const offsetPosition = elementPosition + window.pageYOffset - offset;
+
+        window.scrollTo({
+            top: offsetPosition,
+            behavior: 'smooth'
+        });
+
+        // Update URL without triggering another scroll
+        window.history.pushState({}, '', `#${sanitizedId}`);
+    };
+
     return (
         
     );
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 3af1ba9c..f1768ed7 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -8,7 +8,7 @@
       "name": "my-app",
       "version": "0.1.0",
       "dependencies": {
-        "@radui/ui": "^0.0.25",
+        "@radui/ui": "^0.0.26",
         "@types/node": "20.5.9",
         "@types/react": "19.0.2",
         "@types/react-dom": "19.0.2",
@@ -823,11 +823,12 @@
       }
     },
     "node_modules/@radui/ui": {
-      "version": "0.0.25",
-      "resolved": "https://registry.npmjs.org/@radui/ui/-/ui-0.0.25.tgz",
-      "integrity": "sha512-muGD+D7XoCMq4K1PBsFIm4sNFajoR/p+OSx7/sXIXsU5laQPiKisf01beNOe57JsRYtugjfu1EwxvKLdyHo3Bw==",
+      "version": "0.0.26",
+      "resolved": "https://registry.npmjs.org/@radui/ui/-/ui-0.0.26.tgz",
+      "integrity": "sha512-fmwv3sWBt+PnX1ZtIPNnnnWvtA3hf87FnWIVcPjJ+U5tLWdy88ZcxSACN4WP8wEiIc2IqTD6UosamBY7XAkMDg==",
       "dependencies": {
         "@floating-ui/react": "^0.26.20",
+        "clsx": "^2.1.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
       },
@@ -1486,6 +1487,14 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
diff --git a/docs/package.json b/docs/package.json
index f8c019c4..41998538 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -7,10 +7,10 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "update-rad": "npm update @radui/ui"
+    "update-rad": "npm i @radui/ui@latest"
   },
   "dependencies": {
-    "@radui/ui": "^0.0.25",
+    "@radui/ui": "^0.0.26",
     "@types/node": "20.5.9",
     "@types/react": "19.0.2",
     "@types/react-dom": "19.0.2",