Updated: Keep react update v1.4.0.

app/components/Blog.tsx

@@ -1,19 +1,18 @@
 'use client'
 import Link from 'next/link'
 import { FC } from 'react'
-import { Badge, Card } from '../src'
+import { Badge, Card, CardContent, CardTitle } from '../src'
 
 export interface BlogProps {
   [key: string]: any
 }
 
-const Blog: FC<BlogProps> = ({ title, description, date, keyFeatures, slug }) => {
+const Blog: FC<BlogProps> = ({ title, date, keyFeatures, slug }) => {
   return (
     <Card className="max-w-full lg:col-span-1">
-      <Card.Content className="space-y-3 text-left">
+      <CardContent className="flex flex-col justify-between gap-y-3 text-left">
         <Badge>{date}</Badge>
-        <Card.Title>{title}</Card.Title>
-        <Card.Description>{description}</Card.Description>
+        <CardTitle>{title}</CardTitle>
         <ul className="!mt-4 ml-5 list-disc space-y-1 text-body-4 font-normal text-metal-600">
           {keyFeatures?.map((item: string) => <li key={item}>{item}</li>)}
         </ul>
@@ -23,7 +22,7 @@ const Blog: FC<BlogProps> = ({ title, description, date, keyFeatures, slug }) =>
           className="flex w-full items-center justify-center rounded-lg bg-metal-900 px-5 py-2.5 text-body-4 font-medium text-white transition-all duration-150 hover:bg-metal-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-metal-200 focus-visible:ring-offset-2 active:focus:scale-95 disabled:cursor-not-allowed disabled:bg-metal-200">
           Read More
         </Link>
-      </Card.Content>
+      </CardContent>
     </Card>
   )
 }

app/components/Community.tsx

@@ -2,7 +2,7 @@
 import Link from 'next/link'
 import { ArrowLineUpRight } from 'phosphor-react'
 import { useEffect, useState } from 'react'
-import { Avatar } from '../src'
+import { Avatar, AvatarGroup } from '../src'
 
 interface Contributor {
   login: string
@@ -47,7 +47,7 @@ const Community = () => {
               <div className="my-20">
                 <div>
                   {contributors?.length ? (
-                    <Avatar.Group>
+                    <AvatarGroup>
                       {contributors?.map((user) => (
                         <Avatar
                           key={user?.id}
@@ -57,7 +57,7 @@ const Community = () => {
                           className="border-2 border-[#9686E5] p-0"
                         />
                       ))}
-                    </Avatar.Group>
+                    </AvatarGroup>
                   ) : null}
                 </div>
                 <div className="mt-3">

app/components/CopyCode.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { coldarkDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import useCopy from '../../hooks/useCopy'
-import { Skeleton } from '../src'
+import { Skeleton, SkeletonLine } from '../src'
 
 const CopyCode = ({ code }: { code: string }) => {
   const { copy, copyToClipboard } = useCopy()
@@ -33,7 +33,7 @@ const CopyCode = ({ code }: { code: string }) => {
         </SyntaxHighlighter>
       ) : (
         <Skeleton animation={true}>
-          <Skeleton.Line className="h-[60px]" />
+          <SkeletonLine className="h-[60px]" />
         </Skeleton>
       )}
       <button onClick={() => copyToClipboard(code)} className="absolute right-5 top-5 cursor-pointer">

app/components/Faq.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { Accordion } from '../src'
+import { Accordion, AccordionContainer, AccordionContent, AccordionIcon, AccordionPanel, AccordionTitle } from '../src'
 
 const Faq = () => {
   const faqs = [
@@ -50,26 +50,26 @@ const Faq = () => {
           <div className="w-full lg:col-span-1">
             <Accordion className="space-y-3">
               {faqs.slice(0, 3).map((faq) => (
-                <Accordion.Panel key={faq.id}>
-                  <Accordion.Container>
-                    <Accordion.Title className="text-body-4 md:text-body-3">{faq.question}</Accordion.Title>
-                    <Accordion.Icon />
-                  </Accordion.Container>
-                  <Accordion.Content>{faq.answer}</Accordion.Content>
-                </Accordion.Panel>
+                <AccordionPanel key={faq.id}>
+                  <AccordionContainer>
+                    <AccordionTitle className="text-body-4 md:text-body-3">{faq.question}</AccordionTitle>
+                    <AccordionIcon />
+                  </AccordionContainer>
+                  <AccordionContent>{faq.answer}</AccordionContent>
+                </AccordionPanel>
               ))}
             </Accordion>
           </div>
           <div className="w-full lg:col-span-1">
             <Accordion className="space-y-3">
               {faqs.slice(3).map((faq) => (
-                <Accordion.Panel key={faq.id}>
-                  <Accordion.Container>
-                    <Accordion.Title className="text-body-4 md:text-body-3">{faq.question}</Accordion.Title>
-                    <Accordion.Icon />
-                  </Accordion.Container>
-                  <Accordion.Content>{faq.answer}</Accordion.Content>
-                </Accordion.Panel>
+                <AccordionPanel key={faq.id}>
+                  <AccordionContainer>
+                    <AccordionTitle className="text-body-4 md:text-body-3">{faq.question}</AccordionTitle>
+                    <AccordionIcon />
+                  </AccordionContainer>
+                  <AccordionContent>{faq.answer}</AccordionContent>
+                </AccordionPanel>
               ))}
             </Accordion>
           </div>

app/components/Navbar.tsx

@@ -5,7 +5,7 @@ import { usePathname } from 'next/navigation'
 import { Command, List, MagnifyingGlass, X } from 'phosphor-react'
 import { useEffect, useState } from 'react'
 import { gettingStartedRoutes, navbarRoutes, routes } from '../../routes/routes'
-import { Accordion } from '../src'
+import { Accordion, AccordionContainer, AccordionContent, AccordionPanel, AccordionTitle } from '../src'
 import Search from './Search'
 
 const Navbar = () => {
@@ -133,13 +133,13 @@ const Navbar = () => {
             }`}>
             <div className="mt-5 space-y-3 pr-4">
               <Accordion flush>
-                <Accordion.Panel className="!border-b-0">
-                  <Accordion.Container className="p-0">
-                    <Accordion.Title className="text-body-4 font-semibold text-metal-900 first-letter:!mr-0 first-letter:!text-metal-900">
+                <AccordionPanel className="!border-b-0">
+                  <AccordionContainer className="p-0">
+                    <AccordionTitle className="text-body-4 font-semibold text-metal-900 first-letter:!mr-0 first-letter:!text-metal-900">
                       Quick Link
-                    </Accordion.Title>
-                  </Accordion.Container>
-                  <Accordion.Content className="p-0">
+                    </AccordionTitle>
+                  </AccordionContainer>
+                  <AccordionContent className="p-0">
                     <ul className="-ml-px mt-3 space-y-2 border-l border-l-metal-100">
                       {navbarRoutes.map((route) => (
                         <li key={route.id}>
@@ -153,17 +153,17 @@ const Navbar = () => {
                         </li>
                       ))}
                     </ul>
-                  </Accordion.Content>
-                </Accordion.Panel>
+                  </AccordionContent>
+                </AccordionPanel>
               </Accordion>
               <Accordion flush>
-                <Accordion.Panel className="!border-b-0">
-                  <Accordion.Container className="p-0">
-                    <Accordion.Title className="text-body-4 font-semibold text-metal-900 first-letter:!mr-0 first-letter:!text-metal-900">
+                <AccordionPanel className="!border-b-0">
+                  <AccordionContainer className="p-0">
+                    <AccordionTitle className="text-body-4 font-semibold text-metal-900 first-letter:!mr-0 first-letter:!text-metal-900">
                       Getting Started
-                    </Accordion.Title>
-                  </Accordion.Container>
-                  <Accordion.Content className="p-0">
+                    </AccordionTitle>
+                  </AccordionContainer>
+                  <AccordionContent className="p-0">
                     <ul className="-ml-px mt-3 space-y-2 border-l border-l-metal-100">
                       {gettingStartedRoutes.map((route) => (
                         <li key={route.id}>
@@ -177,17 +177,17 @@ const Navbar = () => {
                         </li>
                       ))}
                     </ul>
-                  </Accordion.Content>
-                </Accordion.Panel>
+                  </AccordionContent>
+                </AccordionPanel>
               </Accordion>
               <Accordion flush>
-                <Accordion.Panel className="!border-b-0">
-                  <Accordion.Container className="p-0">
-                    <Accordion.Title className="text-body-4 font-semibold text-metal-900 first-letter:!mr-0 first-letter:!text-metal-900">
+                <AccordionPanel className="!border-b-0">
+                  <AccordionContainer className="p-0">
+                    <AccordionTitle className="text-body-4 font-semibold text-metal-900 first-letter:!mr-0 first-letter:!text-metal-900">
                       Components
-                    </Accordion.Title>
-                  </Accordion.Container>
-                  <Accordion.Content className="p-0">
+                    </AccordionTitle>
+                  </AccordionContainer>
+                  <AccordionContent className="p-0">
                     <ul className="mt-3 space-y-2 border-l border-l-metal-100 pb-24">
                       {routes.map((route) => (
                         <li key={route.id}>
@@ -201,8 +201,8 @@ const Navbar = () => {
                         </li>
                       ))}
                     </ul>
-                  </Accordion.Content>
-                </Accordion.Panel>
+                  </AccordionContent>
+                </AccordionPanel>
               </Accordion>
             </div>
           </div>

app/components/Search.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link'
 import { File, MagnifyingGlass, RadioButton } from 'phosphor-react'
 import { ChangeEvent, Dispatch, FC, SetStateAction, useCallback, useEffect, useState, useTransition } from 'react'
 import { quickAccessRoute, routerPath, routes } from '~/routes/routes'
-import { Icon, Input, Modal } from '../src'
+import { Input, InputIcon, Modal, ModalBody, ModalContent } from '../src'
 
 interface ModalProps {
   isOpen: boolean
@@ -61,7 +61,7 @@ const Search: FC<ModalProps> = ({ closeModal, isOpen, setIsOpen }) => {
 
   return (
     <Modal isOpen={isOpen} onClose={closeModal}>
-      <Modal.Body className="block bg-white p-8 lg:w-[35rem]">
+      <ModalBody className="block bg-white p-8 lg:w-[35rem]">
         <fieldset className="relative">
           <Input
             value={query}
@@ -70,11 +70,11 @@ const Search: FC<ModalProps> = ({ closeModal, isOpen, setIsOpen }) => {
             placeholder="Search Component"
             className="ps-11"
           />
-          <Icon>
+          <InputIcon>
             <MagnifyingGlass size={19} color="#AFBACA" />
-          </Icon>
+          </InputIcon>
         </fieldset>
-        <Modal.Content id="search" className="mt-2 max-h-[300px] overflow-y-auto">
+        <ModalContent id="search" className="mt-2 max-h-[300px] overflow-y-auto">
           <div className={query.length ? 'hidden' : 'block'}>
             <p className="my-2 text-body-4 font-normal text-metal-400">Quick Access</p>
             <ul>
@@ -112,8 +112,8 @@ const Search: FC<ModalProps> = ({ closeModal, isOpen, setIsOpen }) => {
               <p className="text-left text-body-4 font-normal text-metal-600">No results found.</p>
             )}
           </div>
-        </Modal.Content>
-      </Modal.Body>
+        </ModalContent>
+      </ModalBody>
     </Modal>
   )
 }

app/components/ThemeSwitcher.tsx

@@ -1,33 +1,34 @@
 'use client'
 import { useTheme } from 'next-themes'
 import { MoonStars, SunDim } from 'phosphor-react'
-import { Dropdown } from '../src'
+import { Dropdown, DropdownAction, DropdownContent, DropdownList } from '../src'
 
 const ThemeSwitcher = () => {
   const { setTheme, theme } = useTheme()
   return (
-    <Dropdown
-      placement="bottom-end"
-      actionClassName="transition-all duration-300 bg-primary-25 border-0"
-      className="max-w-[150px]"
-      action={theme === 'dark' ? <MoonStars size={20} color="#fff" /> : <SunDim size={20} color="#444" />}>
-      <Dropdown.List className="flex flex-col items-start">
-        <button
-          className="block w-full rounded-lg p-2 text-body-4 font-medium hover:bg-metal-100"
-          onClick={() => setTheme('light')}>
-          Light
-        </button>
-        <button
-          className="block w-full rounded-lg p-2 text-body-4 font-medium hover:bg-metal-100"
-          onClick={() => setTheme('dark')}>
-          Dark
-        </button>
-        <button
-          className="block w-full rounded-lg p-2 text-body-4 font-medium hover:bg-metal-100"
-          onClick={() => setTheme('system')}>
-          System
-        </button>
-      </Dropdown.List>
+    <Dropdown placement="bottom-end" className="max-w-[150px]">
+      <DropdownAction>
+        {theme === 'dark' ? <MoonStars size={20} color="#fff" /> : <SunDim size={20} color="#444" />}
+      </DropdownAction>
+      <DropdownContent>
+        <DropdownList className="flex flex-col items-start">
+          <button
+            className="block w-full rounded-lg p-2 text-body-4 font-medium hover:bg-metal-100"
+            onClick={() => setTheme('light')}>
+            Light
+          </button>
+          <button
+            className="block w-full rounded-lg p-2 text-body-4 font-medium hover:bg-metal-100"
+            onClick={() => setTheme('dark')}>
+            Dark
+          </button>
+          <button
+            className="block w-full rounded-lg p-2 text-body-4 font-medium hover:bg-metal-100"
+            onClick={() => setTheme('system')}>
+            System
+          </button>
+        </DropdownList>
+      </DropdownContent>
     </Dropdown>
   )
 }

app/docs.css

@@ -106,7 +106,12 @@ body::-webkit-scrollbar-thumb {
 .post p {
   @apply mb-2 text-body-3 font-normal text-metal-600;
 }
-
+.post ul {
+  @apply space-y-2;
+}
 .post ul li {
-  @apply ml-6 list-disc text-body-3 font-normal text-metal-600;
+  @apply ml-6 list-disc text-body-4 font-normal text-metal-600;
+}
+.post ul li code {
+  @apply rounded  bg-primary-50 px-2 py-1 text-primary-500;
 }

app/docs/components/accordion/accordion.mdx

@@ -3,6 +3,7 @@ import { AccordionFlush, AccordionFlushCode } from './variant/AccordionFlush'
 import { AccordionOpenPanel, AccordionOpenPanelCode } from './variant/AccordionOpenPanel'
 import { DisabledAccordionCode, DisabledAccordion } from './variant/DisabledAccordion'
 import { AccordionWithIcon, AccordionWithIconCode } from './variant/AccordionWithIcon'
+
 import CodePreview from '../../../components/CodePreview'
 import ComponentApi from '../../../components/ComponentApi'
 import { accordionApiData } from './accordionApi'