@catalystsoftware/ui 1.0.0

package/components/catalyst-ui/x/collapsible-x.tsx

@@ -0,0 +1,1360 @@
+import React, { useId } from 'react'
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+import {
+  ChevronRightIcon,
+  ChevronsUpDownIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  FileIcon,
+  FolderIcon,
+  FolderOpenIcon,
+  UserIcon,
+  PanelsTopLeftIcon,
+  PlusIcon,
+  StarIcon,
+  CircleSmallIcon,
+  SettingsIcon,
+  UsersIcon,
+  LogOutIcon
+} from "lucide-react"
+import { cn } from "~/components/catalyst-ui"
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  collapsibleTriggerVariants,
+  collapsibleContentVariants,
+  collapsibleHeaderVariants
+} from "~/components/catalyst-ui"
+import { Button } from "~/components/catalyst-ui"
+import { Avatar, AvatarImage, AvatarFallback } from "~/components/catalyst-ui"
+import { Card, CardTitle, CardAction, CardContent } from "~/components/catalyst-ui"
+import { Checkbox } from "~/components/catalyst-ui"
+import { Label } from "~/components/catalyst-ui"
+import { Input } from "~/components/catalyst-ui"
+import { Separator } from "~/components/catalyst-ui"
+import { Textarea } from "~/components/catalyst-ui"
+import { RadioGroup, RadioGroupItem } from "~/components/catalyst-ui"
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuGroup } from "~/components/catalyst-ui"
+
+/**
+* ★ ━━━━ ☆ ━━━━ CollapsibleX ━━━━ ☆ ━━━━ ★
+* type CollapsibleType = 
+*   | 'default' | 'list' | 'profile' | 'filter' | 'faq'      // Basic & Interactive
+*   | 'card' | 'dropdown' | 'form' | 'animated'               // Specialized
+* 
+* ★ ━━━━ ☆ ━━━━ USAGE ━━━━ ☆ ━━━━ ★
+* 
+* ★ ━━━━━━━━━ Default Collapsible ━━━━━━━━━ ★
+* ```jsx
+* <CollapsibleX className='flex w-full max-w-[350px] flex-col gap-2'>
+*   <CollapsibleXHeader>@peduarte starred 3 repositories</CollapsibleXHeader>
+*   <div className='rounded-md border px-4 py-2 font-mono text-sm'>@radix-ui/primitives</div>
+*   <CollapsibleXContent>
+*     <div className='rounded-md border px-4 py-2 font-mono text-sm'>@radix-ui/colors</div>
+*     <div className='rounded-md border px-4 py-2 font-mono text-sm'>@stitches/react</div>
+*   </CollapsibleXContent>
+* </CollapsibleX>
+* ```
+* 
+* ★ ━━━━━━━━━ List Collapsible ━━━━━━━━━ ★
+* ```jsx
+* <CollapsibleX collapsible='list' className='flex w-full max-w-[350px] flex-col items-start gap-4'>
+*   <div className='font-medium'>Today&apos;s task completion</div>
+*   <ul className='flex w-full flex-col gap-2'>
+*     {tasks.slice(0, 2).map(task => (
+*       <li key={task.name} className='flex items-start gap-4'>
+*         <Avatar>
+*           <AvatarImage src={task.image} alt={task.name} />
+*           <AvatarFallback>{task.fallback}</AvatarFallback>
+*         </Avatar>
+*         <div className='flex flex-1 flex-col'>
+*           <div className='text-sm font-medium'>{task.name}</div>
+*           <p className='text-muted-foreground text-xs'>{task.designation}</p>
+*         </div>
+*         <span className='text-muted-foreground text-sm'>{`${task.percentage}%`}</span>
+*       </li>
+*     ))}
+*     <CollapsibleXContent>
+*       {tasks.slice(2).map(task => (
+*         <li key={task.name} className='flex items-start gap-4'>
+*           <Avatar>
+*             <AvatarImage src={task.image} alt={task.name} />
+*             <AvatarFallback>{task.fallback}</AvatarFallback>
+*           </Avatar>
+*           <div className='flex flex-1 flex-col'>
+*             <div className='text-sm font-medium'>{task.name}</div>
+*             <p className='text-muted-foreground text-xs'>{task.designation}</p>
+*           </div>
+*           <span className='text-muted-foreground text-sm'>{`${task.percentage}%`}</span>
+*         </li>
+*       ))}
+*     </CollapsibleXContent>
+*   </ul>
+*   <CollapsibleXTrigger />
+* </CollapsibleX>
+* ```
+* 
+* ★ ━━━━━━━━━ Profile Collapsible ━━━━━━━━━ ★
+* ```jsx
+* <ul className='flex w-full max-w-[350px] flex-col gap-4'>
+*   {users.map(user => (
+*     <CollapsibleX collapsible='profile' key={user.name} asChild>
+*       <li className='flex flex-col gap-2'>
+*         <CollapsibleXTrigger 
+*           name={user.name} 
+*           avatar={user.image} 
+*           fallback={user.fallback} 
+*         />
+*         <CollapsibleXContent 
+*           bio={user.bio} 
+*           followers={user.followers} 
+*           projects={user.projects} 
+*           followed={user.followed} 
+*         />
+*       </li>
+*     </CollapsibleX>
+*   ))}
+* </ul>
+* ```
+* 
+* ★ ━━━━━━━━━ Filter Collapsible ━━━━━━━━━ ★
+* ```jsx
+* <div className='w-full max-w-[350px] space-y-3'>
+*   <CollapsibleX collapsible='filter' className='flex flex-col gap-2'>
+*     <CollapsibleXHeader>Price Range</CollapsibleXHeader>
+*     <CollapsibleXContent>
+*       <div className='flex items-center justify-between gap-4 px-4'>
+*         <Label htmlFor='min-price' className='shrink-0 text-sm font-medium'>Min Price</Label>
+*         <Input id='min-price' type='number' placeholder='0' className='max-w-58' />
+*       </div>
+*       <div className='flex items-center justify-between gap-4 px-4'>
+*         <Label htmlFor='max-price' className='shrink-0 text-sm font-medium'>Max Price</Label>
+*         <Input id='max-price' type='number' placeholder='1000' className='max-w-58' />
+*       </div>
+*     </CollapsibleXContent>
+*   </CollapsibleX>
+* </div>
+* ```
+* 
+* ★ ━━━━━━━━━ FAQ Collapsible ━━━━━━━━━ ★
+* ```jsx
+* <div className='space-y-2'>
+*   <p className='font-medium'>How can I track my order?</p>
+*   <CollapsibleX collapsible='faq' open={isOpen1} onOpenChange={setIsOpen1} className='space-y-2'>
+*     <CollapsibleXContent>
+*       To track your order, simply log in to your account and navigate to the order history section.
+*     </CollapsibleXContent>
+*     <CollapsibleXTrigger isOpen={isOpen1} />
+*   </CollapsibleX>
+* </div>
+* ```
+* 
+* ★ ━━━━━━━━━ Card Collapsible ━━━━━━━━━ ★
+* ```jsx
+* <Card className='w-full max-w-md pb-0'>
+*   <CollapsibleX collapsible='card'>
+*     <div className='flex items-center justify-between px-6 pb-6'>
+*       <CardTitle>How do I track my order?</CardTitle>
+*       <CardAction>
+*         <CollapsibleXTrigger />
+*       </CardAction>
+*     </div>
+*     <CollapsibleXContent>
+*       <p className='px-6'>You&apos;ll receive tracking information via email once your order ships.</p>
+*       <img
+*         src='https://example.com/image.jpg'
+*         alt='Banner'
+*         className='aspect-video h-70 rounded-b-xl object-cover'
+*       />
+*     </CollapsibleXContent>
+*   </CollapsibleX>
+* </Card>
+* ```
+* 
+* ★ ━━━━━━━━━ Animated Collapsible ━━━━━━━━━ ★
+* ```jsx
+* <CollapsibleX collapsible='animated' className='flex w-full max-w-[350px] flex-col gap-2'>
+*   <CollapsibleXHeader>@peduarte starred 3 repositories</CollapsibleXHeader>
+*   <div className='rounded-md border px-4 py-2 font-mono text-sm'>@radix-ui/primitives</div>
+*   <CollapsibleXContent>
+*     <div className='rounded-md border px-4 py-2 font-mono text-sm'>@radix-ui/colors</div>
+*     <div className='rounded-md border px-4 py-2 font-mono text-sm'>@stitches/react</div>
+*   </CollapsibleXContent>
+* </CollapsibleX>
+* ```
+* 
+* ★ ━━━━━━━━━ Props ━━━━━━━━━ ★
+* 
+* CollapsibleX Props:
+* - `collapsible`: CollapsibleType - Specifies which variant to use
+* - `variant`: string - Catalyst UI variant
+* - `spacing`: string - Spacing between items
+* - `layout`: string - Layout direction
+* - `padding`: string - Padding size
+* - `animated`: boolean - Enable animations
+* - `size`: string - Component size
+* - `align`: string - Content alignment
+* - `indent`: string - Indentation level
+* - `className`: string - Additional CSS classes
+* - `open`: boolean - Controlled open state
+* - `onOpenChange`: (open: boolean) => void - Open state change callback
+* 
+* CollapsibleXTrigger Props:
+* - `name`: string - Display name (for profile variant)
+* - `avatar`: string - Avatar image URL (for profile variant)
+* - `fallback`: string - Avatar fallback text (for profile variant)
+* - `isOpen`: boolean - Current open state (for faq variant)
+* - `icon`: IconComponent - Icon component (for dropdown variant)
+* - `children`: ReactNode - Trigger content
+* - `className`: string - Additional CSS classes
+* 
+* CollapsibleXContent Props:
+* - `bio`: string - Biography text (for profile variant)
+* - `followers`: string - Number of followers (for profile variant)
+* - `projects`: number - Number of projects (for profile variant)
+* - `followed`: boolean - Follow status (for profile variant)
+* - `children`: ReactNode - Content to show when expanded
+* - `className`: string - Additional CSS classes
+* 
+* CollapsibleXHeader Props:
+* - `children`: ReactNode - Header content
+* - `className`: string - Additional CSS classes
+* 
+* ★ ━━━━━━━━━ Import ━━━━━━━━━ ★
+* ```javascript
+* import { CollapsibleX, CollapsibleXTrigger, CollapsibleXContent, CollapsibleXHeader } from "./CollapsibleX";
+* 
+* // Required dependencies
+* import { Avatar, AvatarImage, AvatarFallback } from "~/components/catalyst-ui";
+* import { Button } from "~/components/catalyst-ui";
+* import { Card, CardTitle, CardAction, CardContent } from "~/components/catalyst-ui";
+* import { Input } from "~/components/catalyst-ui";
+* import { Label } from "~/components/catalyst-ui";
+* ```
+* 
+* ★ ━━━━━━━━━ Data Structure Examples ━━━━━━━━━ ★
+* ```typescript
+* // List items structure
+* const tasks = [
+*   { 
+*     name: 'John Doe', 
+*     designation: 'Designer', 
+*     percentage: 85, 
+*     image: 'https://example.com/avatar.jpg', 
+*     fallback: 'JD' 
+*   }
+* ];
+* 
+* // Profile items structure
+* const users = [
+*   { 
+*     name: 'Alice Johnson', 
+*     bio: 'Frontend developer passionate about React', 
+*     followers: '1.2k', 
+*     projects: 24, 
+*     image: 'https://example.com/avatar.jpg', 
+*     fallback: 'AJ', 
+*     followed: false 
+*   }
+* ];
+* 
+* // State management
+* const [isOpen, setIsOpen] = useState(false);
+* ```
+* 
+*/
+
+type CollapsibleType =
+  | 'default'
+  | 'fileTree'
+  | 'list'
+  | 'profile'
+  | 'filter'
+  | 'faq'
+  | 'card'
+  | 'dropdown'
+  | 'form'
+  | 'animated'
+
+const CollapsibleXContext = React.createContext<CollapsibleType>('default')
+const CollapsibleContext = React.createContext<CollapsibleContextValue>({});
+
+export function CollapsibleX({ collapsible = 'default', variant, spacing, layout, padding, animated, size, align, indent, children, ...props }: any) {
+  const contextValue: CollapsibleContextValue = { variant, spacing, layout, padding, animated, size, align, indent, }
+  return (
+    <CollapsibleXContext.Provider value={collapsible}>
+      <CollapsibleContext.Provider value={contextValue}>
+        <Collapsible {...props} >
+          {children}
+        </Collapsible>
+      </CollapsibleContext.Provider>
+    </CollapsibleXContext.Provider>
+  )
+}
+
+export function CollapsibleXTrigger({ children, ...props }: any) {
+  const collapsibleType = React.useContext(CollapsibleXContext)
+  const {variant, size, align} = useCollapsibleContext()
+  switch (collapsibleType) {
+    case 'fileTree':
+      return (
+        <CollapsibleTrigger className={cn('focus-visible:ring-ring/50 flex items-center gap-2 rounded-md p-1 outline-none focus-visible:ring-[3px]', collapsibleTriggerVariants({ variant, size, align }), props.className)} {...props}>
+          <ChevronRightIcon className='size-4 shrink-0 transition-transform [[data-state="open"]>&]:rotate-90' />
+          <FolderIcon className='size-4 shrink-0 [[data-state=open]>&]:hidden' />
+          <FolderOpenIcon className='size-4 shrink-0 [[data-state=closed]>&]:hidden' />
+          <span className='text-sm'>{children}</span>
+        </CollapsibleTrigger>
+      )
+
+    case 'list':
+      return (
+        <CollapsibleTrigger className={cn(collapsibleTriggerVariants({ variant, size, align }), props.className)} asChild {...props}>
+          <Button variant='outline' size='sm'>
+            <span className='[[data-state=open]>&]:hidden'>Show more</span>
+            <span className='[[data-state=closed]>&]:hidden'>Show less</span>
+            <ChevronUpIcon className='[[data-state=closed]>&]:rotate-180' />
+          </Button>
+        </CollapsibleTrigger>
+      )
+
+    case 'profile':
+      return (
+        <CollapsibleTrigger className={cn(collapsibleTriggerVariants({ variant, size, align }), 'flex w-full items-center justify-between gap-4', props.className)} {...props}>
+          <div className='flex items-center gap-2'>
+            <Avatar>
+              <AvatarImage src={props.avatar} alt={props.name} />
+              <AvatarFallback>{props.fallback}</AvatarFallback>
+            </Avatar>
+            <span className='font-medium'>{props.name}</span>
+          </div>
+          <ChevronRightIcon className='size-4 transition-transform [[data-state=open]_&]:rotate-90' />
+        </CollapsibleTrigger>
+      )
+
+    case 'filter':
+      return (
+        <CollapsibleTrigger asChild className={cn(collapsibleTriggerVariants({ variant, size, align }), 'group', props.className)} {...props}>
+          <Button variant='ghost' size='icon-sm'>
+            <ChevronDownIcon className='text-muted-foreground transition-transform group-data-[state=open]:rotate-180' />
+            <span className='sr-only'>Toggle</span>
+          </Button>
+        </CollapsibleTrigger>
+      )
+
+    case 'faq':
+      return (
+        <CollapsibleTrigger className={cn(collapsibleTriggerVariants({ variant, size, align }), '', props.className)} {...props}>
+          <span className='text-muted-foreground text-sm underline'>
+            {props.isOpen ? 'Hide answer' : 'Show answer'}
+          </span>
+        </CollapsibleTrigger>
+      )
+
+    case 'card':
+      return (
+        <CollapsibleTrigger className={cn(collapsibleTriggerVariants({ variant, size, align }), '', props.className)} asChild {...props}>
+          <Button variant='outline' size='sm'>
+            <span className='[[data-state=open]>&]:hidden'>Show</span>
+            <span className='[[data-state=closed]>&]:hidden'>Hide</span>
+            <ChevronUpIcon className='[[data-state=closed]>&]:rotate-180' />
+          </Button>
+        </CollapsibleTrigger>
+      )
+
+    case 'dropdown':
+      return (
+        <CollapsibleTrigger className={cn(collapsibleTriggerVariants({ variant, size, align }), '', props.className)} asChild {...props}>
+          <DropdownMenuItem onSelect={event => event.preventDefault()} className='justify-between'>
+            <div className='flex items-center gap-2'>
+              {props.icon && <props.icon />}
+              <span>{props.children}</span>
+            </div>
+            <ChevronRightIcon className='shrink-0 transition-transform [[data-state="open"]>&]:rotate-90' />
+          </DropdownMenuItem>
+        </CollapsibleTrigger>
+      )
+
+    case 'form':
+      return (
+        <CollapsibleTrigger className={cn(collapsibleTriggerVariants({ variant, size, align }), 'group', props.className)} asChild  {...props}>
+          <Button variant='ghost' size='icon-sm'>
+            <ChevronDownIcon className='text-muted-foreground transition-transform group-data-[state=open]:rotate-180' />
+            <span className='sr-only'>Toggle</span>
+          </Button>
+        </CollapsibleTrigger>
+      )
+
+    case 'animated':
+      return (
+        <CollapsibleTrigger className={cn(collapsibleTriggerVariants({ variant, size, align }), '', props.className)}  asChild {...props}>
+          <Button variant='ghost' size='icon-sm'>
+            <ChevronsUpDownIcon />
+            <span className='sr-only'>Toggle</span>
+          </Button>
+        </CollapsibleTrigger>
+      )
+
+    default:
+      return (
+        <CollapsibleTrigger className={cn(collapsibleTriggerVariants({ variant, size, align }), 'flex items-center justify-between', props.className)}  asChild {...props}>
+          <span>{children}</span>
+          <Button variant='ghost' size='icon-sm'>
+            <ChevronsUpDownIcon />
+            <span className='sr-only'>Toggle</span>
+          </Button>
+        </CollapsibleTrigger>
+      )
+  }
+}
+
+export function CollapsibleXContent({children, ...props }: any) {
+  const collapsibleType = React.useContext(CollapsibleXContext)
+  const {spacing, layout, padding, animated, indent} = React.useContext(CollapsibleContext);
+  switch (collapsibleType) {
+    case 'fileTree':
+      return (
+        <CollapsibleContent 
+         className={cn( collapsibleContentVariants({ spacing, layout, padding, animated, indent }), 'flex flex-col gap-1.5',props.className )}
+         {...props} />
+      )
+
+    case 'list':
+      return (
+        <CollapsibleContent 
+             className={cn( collapsibleContentVariants({ spacing, layout, padding, animated, indent }), 'flex flex-col gap-2',props.className )}
+         {...props} />
+      )
+
+    case 'profile':
+      return (
+        <CollapsibleContent 
+          className={cn( collapsibleContentVariants({ spacing, layout, padding, animated, indent }), '',props.className )}
+        {...props}>
+          <div className='flex flex-col gap-2'>
+            <p className='text-muted-foreground text-sm'>{props.bio}</p>
+            <div className='flex items-center justify-between gap-2'>
+              <div className='flex items-center gap-4'>
+                <span className='flex items-center gap-2'>
+                  <UserIcon className='size-4' />
+                  <span className='text-sm'>{props.followers}</span>
+                </span>
+                <span className='flex items-center gap-2'>
+                  <PanelsTopLeftIcon className='size-4' />
+                  <span className='text-sm'>{props.projects}</span>
+                </span>
+              </div>
+              {props.followed ? (
+                <Button variant='outline' className='h-7 rounded-full px-3 py-1 text-xs'>
+                  Following
+                </Button>
+              ) : (
+                <Button className='h-7 rounded-full px-3 py-1 text-xs'>
+                  Follow
+                  <PlusIcon />
+                </Button>
+              )}
+            </div>
+            {children && children}
+          </div>
+        </CollapsibleContent>
+      )
+
+    case 'filter':
+      return (
+        <CollapsibleContent 
+         className={cn( collapsibleContentVariants({ spacing, layout, padding, animated, indent }), 'flex flex-col gap-2',props.className )}
+         {...props} />
+      )
+
+    case 'faq':
+      return (
+        <CollapsibleContent   className={cn( collapsibleContentVariants({ spacing, layout, padding, animated, indent }), '',props.className )} {...props}>
+          <p className='text-sm'>{children}</p>
+        </CollapsibleContent>
+      )
+
+    case 'card':
+      return (
+        <CollapsibleContent className={cn( collapsibleContentVariants({ spacing, layout, padding, animated, indent }), '',props.className )} {...props}>
+          <CardContent className='space-y-2 px-0'>
+            {children}
+          </CardContent>
+        </CollapsibleContent>
+      )
+
+    case 'dropdown':
+      return (
+        <CollapsibleContent 
+        className={cn( collapsibleContentVariants({ spacing, layout, padding, animated, indent }), 'pl-4',props.className )}
+       {...props} />
+      )
+
+    case 'form':
+      return (
+        <CollapsibleContent 
+        className={cn( collapsibleContentVariants({ spacing, layout, padding, animated, indent }), 'flex flex-col gap-3 px-4 pt-3',props.className )}
+      {...props} />
+      )
+
+    case 'animated':
+      return (
+        <CollapsibleContent 
+        className={cn( collapsibleContentVariants({ spacing, layout, padding, animated, indent }), 'data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down flex flex-col gap-2 overflow-hidden transition-all duration-300',props.className )}
+     {...props} />
+      )
+
+    default:
+      return (
+        <CollapsibleContent 
+        className={cn( collapsibleContentVariants({ spacing, layout, padding, animated, indent }), 'flex flex-col gap-2',props.className )}
+        {...props} />
+      )
+  }
+}
+
+export function CollapsibleXHeader({ children,...props }: any) {
+  const collapsibleType = React.useContext(CollapsibleXContext)
+  const {spacing, align, padding,} = React.useContext(CollapsibleContext);
+  switch (collapsibleType) {
+    case 'filter':
+      return (
+        <div 
+        className={cn(collapsibleHeaderVariants({  spacing,   padding,   align,  }), 'flex items-center justify-between gap-4 px-4', className)}    {...props}>
+          <div className='text-sm font-semibold'>{children}</div>
+          <CollapsibleXTrigger />
+        </div>
+      )
+
+    case 'form':
+      return (
+        <div className={cn(collapsibleHeaderVariants({  spacing,   padding,   align,  }),'flex items-center justify-between gap-4 px-4', className)}  {...props}>
+          <div className='text-sm font-semibold'>{children}</div>
+          <CollapsibleXTrigger />
+        </div>
+      )
+
+    default:
+      return (
+        <div className={cn(collapsibleHeaderVariants({  spacing,   padding,   align,  }),'flex items-center justify-between gap-4 px-4', className)} {...props}>
+          <div className='text-sm font-semibold'>{children}</div>
+          <CollapsibleXTrigger />
+        </div>
+      )
+  }
+}
+
+export function CollapsibleXDemo() {
+  const [isOpen1, setIsOpen1] = React.useState(true)
+  const [isOpen2, setIsOpen2] = React.useState(false)
+
+  const fileTree = [
+    {
+      name: 'src', type: 'folder', children: [
+        {
+          name: 'components', type: 'folder', children: [
+            { name: 'Button.tsx', type: 'file' },
+            { name: 'Card.tsx', type: 'file' }
+          ]
+        },
+        {
+          name: 'utils', type: 'folder', children: [
+            { name: 'helpers.ts', type: 'file' }
+          ]
+        }
+      ]
+    },
+    { name: 'package.json', type: 'file' }
+  ]
+
+  const tasks = [
+    { name: 'John Doe', designation: 'Designer', percentage: 85, image: 'https://api.dicebear.com/7.x/avataaars/svg?seed=John', fallback: 'JD' },
+    { name: 'Jane Smith', designation: 'Developer', percentage: 92, image: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Jane', fallback: 'JS' },
+    { name: 'Bob Wilson', designation: 'Manager', percentage: 78, image: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Bob', fallback: 'BW' }
+  ]
+
+  const users = [
+    { name: 'Alice Johnson', bio: 'Frontend developer passionate about React', followers: '1.2k', projects: 24, image: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Alice', fallback: 'AJ', followed: false },
+    { name: 'Charlie Brown', bio: 'Full-stack engineer and open source contributor', followers: '856', projects: 18, image: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Charlie', fallback: 'CB', followed: true }
+  ]
+
+  return (
+    <div className="space-y-12 p-6 max-w-3xl mx-auto">
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Default</h3>
+        <CollapsibleX className='flex w-full max-w-[350px] flex-col gap-2'>
+          <CollapsibleXHeader>@peduarte starred 3 repositories</CollapsibleXHeader>
+          <div className='rounded-md border px-4 py-2 font-mono text-sm'>@radix-ui/primitives</div>
+          <CollapsibleXContent>
+            <div className='rounded-md border px-4 py-2 font-mono text-sm'>@radix-ui/colors</div>
+            <div className='rounded-md border px-4 py-2 font-mono text-sm'>@stitches/react</div>
+          </CollapsibleXContent>
+        </CollapsibleX>
+      </div>
+
+      <div>
+        <h3 className="text-lg font-semibold mb-4">List</h3>
+        <CollapsibleX collapsible='list' className='flex w-full max-w-[350px] flex-col items-start gap-4'>
+          <div className='font-medium'>Today&apos;s task completion</div>
+          <ul className='flex w-full flex-col gap-2'>
+            {tasks.slice(0, 2).map(task => (
+              <li key={task.name} className='flex items-start gap-4'>
+                <Avatar>
+                  <AvatarImage src={task.image} alt={task.name} />
+                  <AvatarFallback>{task.fallback}</AvatarFallback>
+                </Avatar>
+                <div className='flex flex-1 flex-col'>
+                  <div className='text-sm font-medium'>{task.name}</div>
+                  <p className='text-muted-foreground text-xs'>{task.designation}</p>
+                </div>
+                <span className='text-muted-foreground text-sm'>{`${task.percentage}%`}</span>
+              </li>
+            ))}
+            <CollapsibleXContent>
+              {tasks.slice(2).map(task => (
+                <li key={task.name} className='flex items-start gap-4'>
+                  <Avatar>
+                    <AvatarImage src={task.image} alt={task.name} />
+                    <AvatarFallback>{task.fallback}</AvatarFallback>
+                  </Avatar>
+                  <div className='flex flex-1 flex-col'>
+                    <div className='text-sm font-medium'>{task.name}</div>
+                    <p className='text-muted-foreground text-xs'>{task.designation}</p>
+                  </div>
+                  <span className='text-muted-foreground text-sm'>{`${task.percentage}%`}</span>
+                </li>
+              ))}
+            </CollapsibleXContent>
+          </ul>
+          <CollapsibleXTrigger />
+        </CollapsibleX>
+      </div>
+
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Profile</h3>
+        <ul className='flex w-full max-w-[350px] flex-col gap-4'>
+          {users.map(user => (
+            <CollapsibleX collapsible='profile' key={user.name} asChild>
+              <li className='flex flex-col gap-2'>
+                <CollapsibleXTrigger name={user.name} avatar={user.image} fallback={user.fallback} />
+                <CollapsibleXContent bio={user.bio} followers={user.followers} projects={user.projects} followed={user.followed} />
+              </li>
+            </CollapsibleX>
+          ))}
+        </ul>
+      </div>
+
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Filter</h3>
+        <div className='w-full max-w-[350px] space-y-3'>
+          <CollapsibleX collapsible='filter' className='flex flex-col gap-2'>
+            <CollapsibleXHeader>Price Range</CollapsibleXHeader>
+            <CollapsibleXContent>
+              <div className='flex items-center justify-between gap-4 px-4'>
+                <Label htmlFor='min-price' className='shrink-0 text-sm font-medium'>Min Price</Label>
+                <Input id='min-price' type='number' placeholder='0' className='max-w-58' />
+              </div>
+              <div className='flex items-center justify-between gap-4 px-4'>
+                <Label htmlFor='max-price' className='shrink-0 text-sm font-medium'>Max Price</Label>
+                <Input id='max-price' type='number' placeholder='1000' className='max-w-58' />
+              </div>
+            </CollapsibleXContent>
+          </CollapsibleX>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-lg font-semibold mb-4">FAQ</h3>
+        <div className='w-full space-y-4'>
+          <div className='space-y-2'>
+            <p className='font-medium'>How can I track my order?</p>
+            <CollapsibleX collapsible='faq' open={isOpen1} onOpenChange={setIsOpen1} className='space-y-2'>
+              <CollapsibleXContent>
+                To track your order, simply log in to your account and navigate to the order history section.
+              </CollapsibleXContent>
+              <CollapsibleXTrigger isOpen={isOpen1} />
+            </CollapsibleX>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Card</h3>
+        <Card className='w-full max-w-md pb-0'>
+          <CollapsibleX collapsible='card'>
+            <div className='flex items-center justify-between px-6 pb-6'>
+              <CardTitle>How do I track my order?</CardTitle>
+              <CardAction>
+                <CollapsibleXTrigger />
+              </CardAction>
+            </div>
+            <CollapsibleXContent>
+              <p className='px-6'>You&apos;ll receive tracking information via email once your order ships.</p>
+              <img
+                src='https://cdn.shadcnstudio.com/ss-assets/components/accordion/image-1.jpg?width=446&format=auto'
+                alt='Banner'
+                className='aspect-video h-70 rounded-b-xl object-cover'
+              />
+            </CollapsibleXContent>
+          </CollapsibleX>
+        </Card>
+      </div>
+
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Animated</h3>
+        <CollapsibleX collapsible='animated' className='flex w-full max-w-[350px] flex-col gap-2'>
+          <CollapsibleXHeader>@peduarte starred 3 repositories</CollapsibleXHeader>
+          <div className='rounded-md border px-4 py-2 font-mono text-sm'>@radix-ui/primitives</div>
+          <CollapsibleXContent>
+            <div className='rounded-md border px-4 py-2 font-mono text-sm'>@radix-ui/colors</div>
+            <div className='rounded-md border px-4 py-2 font-mono text-sm'>@stitches/react</div>
+          </CollapsibleXContent>
+        </CollapsibleX>
+      </div>
+    </div>
+  )
+}
+
+const FileTree = ({ item, level }: { level: number; item: FileTreeItem }) => {
+  if (item.type === 'file') {
+    return (
+      <div
+        className='focus-visible:ring-ring/50 flex items-center gap-2 rounded-md p-1 outline-none focus-visible:ring-[3px]'
+        style={{ paddingLeft: `${level === 0 ? 1.75 : 3.25}rem` }}
+      >
+        <FileIcon className='size-4 shrink-0' />
+        <span className='text-muted-foreground text-sm'>{item.name}</span>
+      </div>
+    )
+  }
+
+  return (
+    <Collapsible className='flex flex-col gap-1.5' style={{ paddingLeft: `${level === 0 ? 0 : 1.5}rem` }}>
+      <CollapsibleTrigger className='focus-visible:ring-ring/50 flex items-center gap-2 rounded-md p-1 outline-none focus-visible:ring-[3px]'>
+        <ChevronRightIcon className='size-4 shrink-0 transition-transform [[data-state="open"]>&]:rotate-90' />
+        <FolderIcon className='size-4 shrink-0 [[data-state=open]>&]:hidden' />
+        <FolderOpenIcon className='size-4 shrink-0 [[data-state=closed]>&]:hidden' />
+        <span className='text-sm'>{item.name}</span>
+      </CollapsibleTrigger>
+      <CollapsibleContent className='flex flex-col gap-1.5'>
+        {item.children.map(item => (
+          <FileTree key={item.name} item={item} level={level + 1} />
+        ))}
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
+
+const CollapsibleTreeDemo = () => {
+  return (
+    <div className='flex w-full max-w-48 flex-col gap-2'>
+      {fileTree.map(item => (
+        <FileTree key={item.name} item={item} level={0} />
+      ))}
+    </div>
+  )
+}
+
+const CollapsibleListDemo = () => {
+  return (
+    <Collapsible className='flex w-full max-w-[350px] flex-col items-start gap-4'>
+      <div className='font-medium'>Today&apos;s task completion</div>
+      <ul className='flex w-full flex-col gap-2'>
+        {tasks.slice(0, 2).map(task => (
+          <li key={task.name} className='flex items-start gap-4'>
+            <Avatar>
+              <AvatarImage src={task.image} alt={task.name} />
+              <AvatarFallback>{task.fallback}</AvatarFallback>
+            </Avatar>
+            <div className='flex flex-1 flex-col'>
+              <div className='text-sm font-medium'>{task.name}</div>
+              <p className='text-muted-foreground text-xs'>{task.designation}</p>
+            </div>
+            <span className='text-muted-foreground text-sm'>{`${task.percentage}%`}</span>
+          </li>
+        ))}
+        <CollapsibleContent className='flex flex-col gap-2'>
+          {tasks.slice(2).map(task => (
+            <li key={task.name} className='flex items-start gap-4'>
+              <Avatar>
+                <AvatarImage src={task.image} alt={task.name} />
+                <AvatarFallback>{task.fallback}</AvatarFallback>
+              </Avatar>
+              <div className='flex flex-1 flex-col'>
+                <div className='text-sm font-medium'>{task.name}</div>
+                <p className='text-muted-foreground text-xs'>{task.designation}</p>
+              </div>
+              <span className='text-muted-foreground text-sm'>{`${task.percentage}%`}</span>
+            </li>
+          ))}
+        </CollapsibleContent>
+      </ul>
+      <CollapsibleTrigger asChild>
+        <Button variant='outline' size='sm'>
+          <span className='[[data-state=open]>&]:hidden'>Show more</span>
+          <span className='[[data-state=closed]>&]:hidden'>Show less</span>
+          <ChevronUpIcon className='[[data-state=closed]>&]:rotate-180' />
+        </Button>
+      </CollapsibleTrigger>
+    </Collapsible>
+  )
+}
+
+const CollapsibleProfileDemo = () => {
+  return (
+    <ul className='flex w-full max-w-[350px] flex-col gap-4'>
+      {users.map(user => (
+        <Collapsible key={user.name} asChild>
+          <li className='flex flex-col gap-2'>
+            <CollapsibleTrigger className='flex w-full items-center justify-between gap-4'>
+              <div className='flex items-center gap-2'>
+                <Avatar>
+                  <AvatarImage src={user.image} alt={user.fallback} />
+                  <AvatarFallback>{user.fallback}</AvatarFallback>
+                </Avatar>
+                <span className='font-medium'>{user.name}</span>
+              </div>
+              <ChevronRightIcon className='size-4 transition-transform [[data-state=open]_&]:rotate-90' />
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div className='flex flex-col gap-2'>
+                <p className='text-muted-foreground text-sm'>{user.bio}</p>
+                <div className='flex items-center justify-between gap-2'>
+                  <div className='flex items-center gap-4'>
+                    <span className='flex items-center gap-2'>
+                      <UserIcon className='size-4' />
+                      <span className='text-sm'>{user.followers}</span>
+                    </span>
+                    <span className='flex items-center gap-2'>
+                      <PanelsTopLeftIcon className='size-4' />
+                      <span className='text-sm'>{user.projects}</span>
+                    </span>
+                  </div>
+                  {user.followed ? (
+                    <Button variant='outline' className='h-7 rounded-full px-3 py-1 text-xs'>
+                      Following
+                    </Button>
+                  ) : (
+                    <Button className='h-7 rounded-full px-3 py-1 text-xs'>
+                      Follow
+                      <PlusIcon />
+                    </Button>
+                  )}
+                </div>
+              </div>
+            </CollapsibleContent>
+          </li>
+        </Collapsible>
+      ))}
+    </ul>
+  )
+}
+
+const CollapsibleFilterDemo = () => {
+  return (
+    <div className='w-full max-w-[350px] space-y-3'>
+      <Collapsible className='flex flex-col gap-2'>
+        <div className='flex items-center justify-between gap-4 px-4'>
+          <div className='text-sm font-semibold'>Price Range</div>
+          <CollapsibleTrigger asChild className='group'>
+            <Button variant='ghost' size='icon-sm'>
+              <ChevronDownIcon className='text-muted-foreground transition-transform group-data-[state=open]:rotate-180' />
+              <span className='sr-only'>Toggle</span>
+            </Button>
+          </CollapsibleTrigger>
+        </div>
+        <CollapsibleContent className='flex flex-col gap-2'>
+          <div className='flex items-center justify-between gap-4 px-4'>
+            <Label htmlFor='min-price' className='shrink-0 text-sm font-medium'>
+              Min Price
+            </Label>
+            <Input id='min-price' type='number' placeholder='0' className='max-w-58' />
+          </div>
+          <div className='flex items-center justify-between gap-4 px-4'>
+            <Label htmlFor='max-price' className='shrink-0 text-sm font-medium'>
+              Max Price
+            </Label>
+            <Input id='max-price' type='number' placeholder='1000' className='max-w-58' />
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+      <Separator />
+      <Collapsible className='flex w-full max-w-[350px] flex-col gap-2'>
+        <div className='flex items-center justify-between gap-4 px-4'>
+          <div className='text-sm font-semibold'>Customer Ratings</div>
+          <CollapsibleTrigger asChild className='group'>
+            <Button variant='ghost' size='icon-sm'>
+              <ChevronDownIcon className='text-muted-foreground transition-transform group-data-[state=open]:rotate-180' />
+              <span className='sr-only'>Toggle</span>
+            </Button>
+          </CollapsibleTrigger>
+        </div>
+        <CollapsibleContent className='flex flex-col gap-2'>
+          <div className='flex items-center gap-2 px-4'>
+            <Checkbox id='rating-4' />
+            <Label htmlFor='rating-4' className='flex shrink-0 items-center gap-1 text-sm font-medium'>
+              <span className='flex items-center gap-1'>
+                4
+                <StarIcon className='size-4 fill-amber-500 stroke-amber-500 dark:fill-amber-400 dark:stroke-amber-400' />
+              </span>
+              & Up
+            </Label>
+          </div>
+          <div className='flex items-center gap-2 px-4'>
+            <Checkbox id='rating-3' />
+            <Label htmlFor='rating-3' className='flex shrink-0 items-center gap-1 text-sm font-medium'>
+              <span className='flex items-center gap-1'>
+                3
+                <StarIcon className='size-4 fill-amber-500 stroke-amber-500 dark:fill-amber-400 dark:stroke-amber-400' />
+              </span>
+              & Up
+            </Label>
+          </div>
+          <div className='flex items-center gap-2 px-4'>
+            <Checkbox id='rating-2' />
+            <Label htmlFor='rating-2' className='flex shrink-0 items-center gap-1 text-sm font-medium'>
+              <span className='flex items-center gap-1'>
+                2
+                <StarIcon className='size-4 fill-amber-500 stroke-amber-500 dark:fill-amber-400 dark:stroke-amber-400' />
+              </span>
+              & Up
+            </Label>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+      <Separator />
+      <Collapsible className='flex w-full max-w-[350px] flex-col gap-2'>
+        <div className='flex items-center justify-between gap-4 px-4'>
+          <div className='text-sm font-semibold'>Brand</div>
+          <CollapsibleTrigger asChild className='group'>
+            <Button variant='ghost' size='icon-sm'>
+              <ChevronDownIcon className='text-muted-foreground transition-transform group-data-[state=open]:rotate-180' />
+              <span className='sr-only'>Toggle</span>
+            </Button>
+          </CollapsibleTrigger>
+        </div>
+        <CollapsibleContent className='flex flex-col gap-2'>
+          <div className='flex items-center gap-2 px-4'>
+            <Checkbox id='brand-apple' />
+            <Label htmlFor='brand-apple' className='shrink-0 text-sm font-medium'>
+              Apple
+            </Label>
+          </div>
+          <div className='flex items-center gap-2 px-4'>
+            <Checkbox id='brand-samsung' />
+            <Label htmlFor='brand-samsung' className='shrink-0 text-sm font-medium'>
+              Samsung
+            </Label>
+          </div>
+          <div className='flex items-center gap-2 px-4'>
+            <Checkbox id='brand-google' />
+            <Label htmlFor='brand-google' className='shrink-0 text-sm font-medium'>
+              Google
+            </Label>
+          </div>
+          <div className='flex items-center gap-2 px-4'>
+            <Checkbox id='brand-oneplus' />
+            <Label htmlFor='brand-oneplus' className='shrink-0 text-sm font-medium'>
+              OnePlus
+            </Label>
+          </div>
+          <div className='flex items-center gap-2 px-4'>
+            <Checkbox id='brand-xiaomi' />
+            <Label htmlFor='brand-xiaomi' className='shrink-0 text-sm font-medium'>
+              Xiaomi
+            </Label>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+      <Separator />
+      <Collapsible className='flex w-full max-w-[350px] flex-col gap-2'>
+        <div className='flex items-center justify-between gap-4 px-4'>
+          <div className='text-sm font-semibold'>Battery</div>
+          <CollapsibleTrigger asChild className='group'>
+            <Button variant='ghost' size='icon-sm'>
+              <ChevronDownIcon className='text-muted-foreground transition-transform group-data-[state=open]:rotate-180' />
+              <span className='sr-only'>Toggle</span>
+            </Button>
+          </CollapsibleTrigger>
+        </div>
+        <CollapsibleContent className='flex flex-col gap-2'>
+          <div className='flex items-center gap-2 px-4'>
+            <Checkbox id='battery-3500' />
+            <Label htmlFor='battery-3500' className='shrink-0 text-sm font-medium'>
+              3500mAh
+            </Label>
+          </div>
+          <div className='flex items-center gap-2 px-4'>
+            <Checkbox id='battery-4000' />
+            <Label htmlFor='battery-4000' className='shrink-0 text-sm font-medium'>
+              4000mAh
+            </Label>
+          </div>
+          <div className='flex items-center gap-2 px-4'>
+            <Checkbox id='battery-5000' />
+            <Label htmlFor='battery-5000' className='shrink-0 text-sm font-medium'>
+              5000mAh
+            </Label>
+          </div>
+          <div className='flex items-center gap-2 px-4'>
+            <Checkbox id='battery-6000' />
+            <Label htmlFor='battery-6000' className='shrink-0 text-sm font-medium'>
+              6000mAh
+            </Label>
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  )
+}
+
+const CollapsibleShowMoreDemo = () => {
+  const [isTrackOrderOpen, setIsTrackOrderOpen] = useState(true)
+  const [isCancelOrderOpen, setIsCancelOrderOpen] = useState(false)
+
+  return (
+    <div className='w-full space-y-4'>
+      <div className='space-y-2'>
+        <p className='font-medium'>How can I track my order?</p>
+        <Collapsible open={isTrackOrderOpen} onOpenChange={setIsTrackOrderOpen} className='space-y-2'>
+          <CollapsibleContent>
+            <p className='text-sm'>
+              To track your order, simply log in to your account and navigate to the order history section. You&apos;ll
+              find detailed information about your order status and tracking number there.
+            </p>
+          </CollapsibleContent>
+          <CollapsibleTrigger>
+            <span className='text-muted-foreground text-sm underline'>
+              {isTrackOrderOpen ? 'Hide answer' : 'Show answer'}
+            </span>
+          </CollapsibleTrigger>
+        </Collapsible>
+      </div>
+      <div className='space-y-2'>
+        <p className='font-medium'>Can I cancel my order?</p>
+        <Collapsible open={isCancelOrderOpen} onOpenChange={setIsCancelOrderOpen} className='space-y-2'>
+          <CollapsibleContent>
+            <p className='text-sm'>
+              Scheduled delivery orders can be cancelled 72 hours prior to your selected delivery date for full refund.
+            </p>
+          </CollapsibleContent>
+          <CollapsibleTrigger>
+            <span className='text-muted-foreground text-sm underline'>
+              {isCancelOrderOpen ? 'Hide answer' : 'Show answer'}
+            </span>
+          </CollapsibleTrigger>
+        </Collapsible>
+      </div>
+    </div>
+  )
+}
+
+const CollapsibleCardDemo = () => {
+  return (
+    <Card className='w-full max-w-md pb-0'>
+      <Collapsible>
+        <div className='flex items-center justify-between px-6 pb-6'>
+          <CardTitle>How do I track my order?</CardTitle>
+          <CardAction>
+            <CollapsibleTrigger asChild>
+              <Button variant='outline' size='sm'>
+                <span className='[[data-state=open]>&]:hidden'>Show</span>
+                <span className='[[data-state=closed]>&]:hidden'>Hide</span>
+                <ChevronUpIcon className='[[data-state=closed]>&]:rotate-180' />
+              </Button>
+            </CollapsibleTrigger>
+          </CardAction>
+        </div>
+        <CollapsibleContent>
+          <CardContent className='space-y-2 px-0'>
+            <p className='px-6'>You&apos;ll receive tracking information via email once your order ships.</p>
+            <img
+              src='https://cdn.shadcnstudio.com/ss-assets/components/accordion/image-1.jpg?width=446&format=auto'
+              alt='Banner'
+              className='aspect-video h-70 rounded-b-xl object-cover'
+            />
+          </CardContent>
+        </CollapsibleContent>
+      </Collapsible>
+    </Card>
+  )
+}
+
+const CollapsibleDropdownMenuDemo = () => {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant='outline'>Dropdown with collapsible</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className='w-56'>
+        <DropdownMenuItem>
+          <UserIcon />
+          <span>Profile</span>
+        </DropdownMenuItem>
+        <Collapsible asChild>
+          <DropdownMenuGroup>
+            <CollapsibleTrigger asChild>
+              <DropdownMenuItem onSelect={event => event.preventDefault()} className='justify-between'>
+                <div className='flex items-center gap-2'>
+                  <SettingsIcon />
+                  <span>Settings</span>
+                </div>
+                <ChevronRightIcon className='shrink-0 transition-transform [[data-state="open"]>&]:rotate-90' />
+              </DropdownMenuItem>
+            </CollapsibleTrigger>
+            <CollapsibleContent className='pl-4'>
+              <DropdownMenuItem>
+                <CircleSmallIcon />
+                <span>Account</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CircleSmallIcon />
+                <span>Security</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CircleSmallIcon />
+                <span>Billing & plans</span>
+              </DropdownMenuItem>
+            </CollapsibleContent>
+          </DropdownMenuGroup>
+        </Collapsible>
+        <Collapsible asChild>
+          <DropdownMenuGroup>
+            <CollapsibleTrigger asChild>
+              <DropdownMenuItem onSelect={event => event.preventDefault()} className='justify-between'>
+                <div className='flex items-center gap-2'>
+                  <UsersIcon />
+                  <span>Users</span>
+                </div>
+                <ChevronRightIcon className='shrink-0 transition-transform [[data-state="open"]>&]:rotate-90' />
+              </DropdownMenuItem>
+            </CollapsibleTrigger>
+            <CollapsibleContent className='pl-4'>
+              <DropdownMenuItem>
+                <CircleSmallIcon />
+                <span>Teams</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CircleSmallIcon />
+                <span>Projects</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CircleSmallIcon />
+                <span>Connections</span>
+              </DropdownMenuItem>
+            </CollapsibleContent>
+          </DropdownMenuGroup>
+        </Collapsible>
+        <DropdownMenuItem>
+          <LogOutIcon />
+          <span>Log out</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+const CollapsibleFormDemo = () => {
+  const id = useId()
+  const { meta, getCardNumberProps, getExpiryDateProps, getCVCProps, getCardImageProps } = usePaymentInputs()
+
+  const items = [
+    { value: '1', label: 'Standard 3-5 Days', description: 'Friday, 15 June - Tuesday, 19 June', price: 'Free' },
+    { value: '2', label: 'Express', description: 'Friday, 15 June - Sunday, 17 June', price: '$5.00' },
+    { value: '3', label: 'Overnight', description: 'Tomorrow', price: '$10.00' }
+  ]
+
+  return (
+    <div className='w-full space-y-3'>
+      <div className='w-full max-w-md space-y-3 rounded-md border py-4'>
+        <Collapsible className='flex flex-col gap-2'>
+          <div className='flex items-center justify-between gap-4 px-4'>
+            <div className='text-sm font-semibold'>Delivery Address</div>
+            <CollapsibleTrigger asChild className='group'>
+              <Button variant='ghost' size='icon-sm'>
+                <ChevronDownIcon className='text-muted-foreground transition-transform group-data-[state=open]:rotate-180' />
+                <span className='sr-only'>Toggle</span>
+              </Button>
+            </CollapsibleTrigger>
+          </div>
+          <CollapsibleContent className='flex flex-col gap-3 px-4 pt-3'>
+            <div className='group relative w-full'>
+              <label
+                htmlFor='full-name'
+                className='origin-start text-muted-foreground group-focus-within:text-foreground has-[+input:not(:placeholder-shown)]:text-foreground absolute top-1/2 block -translate-y-1/2 cursor-text px-2 text-sm transition-all group-focus-within:pointer-events-none group-focus-within:top-0 group-focus-within:cursor-default group-focus-within:text-xs group-focus-within:font-medium has-[+input:not(:placeholder-shown)]:pointer-events-none has-[+input:not(:placeholder-shown)]:top-0 has-[+input:not(:placeholder-shown)]:cursor-default has-[+input:not(:placeholder-shown)]:text-xs has-[+input:not(:placeholder-shown)]:font-medium'
+              >
+                <span className='bg-background inline-flex px-1'>Full Name</span>
+              </label>
+              <Input id='full-name' type='text' placeholder=' ' className='dark:bg-background' />
+            </div>
+            <div className='group relative w-full space-y-2'>
+              <label
+                htmlFor='address'
+                className='origin-start text-muted-foreground group-focus-within:text-foreground has-[+textarea:not(:placeholder-shown)]:text-foreground has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive absolute top-0 block translate-y-2 cursor-text px-2 text-sm transition-all group-focus-within:pointer-events-none group-focus-within:-translate-y-1/2 group-focus-within:cursor-default group-focus-within:text-xs group-focus-within:font-medium has-[+textarea:not(:placeholder-shown)]:pointer-events-none has-[+textarea:not(:placeholder-shown)]:-translate-y-1/2 has-[+textarea:not(:placeholder-shown)]:cursor-default has-[+textarea:not(:placeholder-shown)]:text-xs has-[+textarea:not(:placeholder-shown)]:font-medium'
+              >
+                <span className='bg-background inline-flex px-1'>Address</span>
+              </label>
+              <Textarea id='address' placeholder=' ' className='!bg-background' />
+            </div>
+            <div className='group relative w-full'>
+              <label
+                htmlFor='pin-code'
+                className='origin-start text-muted-foreground group-focus-within:text-foreground has-[+input:not(:placeholder-shown)]:text-foreground absolute top-1/2 block -translate-y-1/2 cursor-text px-2 text-sm transition-all group-focus-within:pointer-events-none group-focus-within:top-0 group-focus-within:cursor-default group-focus-within:text-xs group-focus-within:font-medium has-[+input:not(:placeholder-shown)]:pointer-events-none has-[+input:not(:placeholder-shown)]:top-0 has-[+input:not(:placeholder-shown)]:cursor-default has-[+input:not(:placeholder-shown)]:text-xs has-[+input:not(:placeholder-shown)]:font-medium'
+              >
+                <span className='bg-background inline-flex px-1'>Pin Code</span>
+              </label>
+              <Input id='pin-code' type='number' placeholder=' ' className='dark:bg-background' />
+            </div>
+            <div className='group relative w-full'>
+              <label
+                htmlFor='city-name'
+                className='origin-start text-muted-foreground group-focus-within:text-foreground has-[+input:not(:placeholder-shown)]:text-foreground absolute top-1/2 block -translate-y-1/2 cursor-text px-2 text-sm transition-all group-focus-within:pointer-events-none group-focus-within:top-0 group-focus-within:cursor-default group-focus-within:text-xs group-focus-within:font-medium has-[+input:not(:placeholder-shown)]:pointer-events-none has-[+input:not(:placeholder-shown)]:top-0 has-[+input:not(:placeholder-shown)]:cursor-default has-[+input:not(:placeholder-shown)]:text-xs has-[+input:not(:placeholder-shown)]:font-medium'
+              >
+                <span className='bg-background inline-flex px-1'>City</span>
+              </label>
+              <Input id='city-name' type='text' placeholder=' ' className='dark:bg-background' />
+            </div>
+            <div className='group relative w-full'>
+              <label
+                htmlFor='landmark'
+                className='origin-start text-muted-foreground group-focus-within:text-foreground has-[+input:not(:placeholder-shown)]:text-foreground absolute top-1/2 block -translate-y-1/2 cursor-text px-2 text-sm transition-all group-focus-within:pointer-events-none group-focus-within:top-0 group-focus-within:cursor-default group-focus-within:text-xs group-focus-within:font-medium has-[+input:not(:placeholder-shown)]:pointer-events-none has-[+input:not(:placeholder-shown)]:top-0 has-[+input:not(:placeholder-shown)]:cursor-default has-[+input:not(:placeholder-shown)]:text-xs has-[+input:not(:placeholder-shown)]:font-medium'
+              >
+                <span className='bg-background inline-flex px-1'>Landmark</span>
+              </label>
+              <Input id='landmark' type='text' placeholder=' ' className='dark:bg-background' />
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+        <Separator />
+        <Collapsible className='flex flex-col gap-2'>
+          <div className='flex items-center justify-between gap-4 px-4'>
+            <div className='text-sm font-semibold'>Delivery Options</div>
+            <CollapsibleTrigger asChild className='group'>
+              <Button variant='ghost' size='icon-sm'>
+                <ChevronDownIcon className='text-muted-foreground transition-transform group-data-[state=open]:rotate-180' />
+                <span className='sr-only'>Toggle</span>
+              </Button>
+            </CollapsibleTrigger>
+          </div>
+          <CollapsibleContent className='flex flex-col gap-2 px-4'>
+            <RadioGroup className='w-full gap-0 -space-y-px rounded-md pt-3 shadow-xs' defaultValue='2'>
+              {items.map(item => (
+                <div
+                  key={`${id}-${item.value}`}
+                  className='border-input has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-accent relative flex flex-col gap-4 border p-4 outline-none first:rounded-t-md last:rounded-b-md has-data-[state=checked]:z-10'
+                >
+                  <div className='flex items-center justify-between gap-1.5'>
+                    <div className='flex items-center gap-2'>
+                      <RadioGroupItem
+                        id={`${id}-${item.value}`}
+                        value={item.value}
+                        className='after:absolute after:inset-0'
+                        aria-label={`plan-radio-${item.value}`}
+                        aria-describedby={`${`${id}-${item.value}`}-price`}
+                      />
+                      <div className='space-y-1'>
+                        <Label className='inline-flex items-center' htmlFor={`${id}-${item.value}`}>
+                          {item.label}
+                        </Label>
+                        <p className='text-muted-foreground text-sm'>{item.description}</p>
+                      </div>
+                    </div>
+                    <div
+                      id={`${`${id}-${item.value}`}-price`}
+                      className='text-muted-foreground text-xs leading-[inherit]'
+                    >
+                      {item.price}
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </RadioGroup>
+          </CollapsibleContent>
+        </Collapsible>
+        <Separator />
+        <Collapsible className='flex flex-col gap-2'>
+          <div className='flex items-center justify-between gap-4 px-4'>
+            <div className='text-sm font-semibold'>Payment</div>
+            <CollapsibleTrigger asChild className='group'>
+              <Button variant='ghost' size='icon-sm'>
+                <ChevronDownIcon className='text-muted-foreground transition-transform group-data-[state=open]:rotate-180' />
+                <span className='sr-only'>Toggle</span>
+              </Button>
+            </CollapsibleTrigger>
+          </div>
+          <CollapsibleContent className='flex flex-col gap-2'>
+            <div className='w-full space-y-2 px-4 pt-2'>
+              <Label>Card details</Label>
+              <div>
+                <div className='relative focus-within:z-1'>
+                  <Input
+                    {...getCardNumberProps()}
+                    id={`number-${id}`}
+                    className='peer rounded-b-none pr-9 shadow-none'
+                  />
+                  <div className='text-muted-foreground pointer-events-none absolute inset-y-0 right-0 flex items-center justify-center pr-3 peer-disabled:opacity-50'>
+                    {meta.cardType ? (
+                      <svg
+                        className='w-6 overflow-hidden'
+                        {...getCardImageProps({
+                          images: images as unknown as CardImages
+                        })}
+                      />
+                    ) : (
+                      <CreditCardIcon className='size-4' />
+                    )}
+                    <span className='sr-only'>Card Provider</span>
+                  </div>
+                </div>
+                <div className='-mt-px flex'>
+                  <div className='min-w-0 flex-1 focus-within:z-1'>
+                    <Input
+                      {...getExpiryDateProps()}
+                      id={`expiry-${id}`}
+                      className='rounded-t-none rounded-r-none shadow-none'
+                    />
+                  </div>
+                  <div className='-ms-px min-w-0 flex-1 focus-within:z-1'>
+                    <Input {...getCVCProps()} id={`cvc-${id}`} className='rounded-t-none rounded-l-none shadow-none' />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      </div>
+      <p className='text-muted-foreground text-xs'>
+        Built with{' '}
+        <a
+          className='hover:text-foreground underline'
+          href='https://github.com/medipass/react-payment-inputs'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          React Payment Inputs
+        </a>
+      </p>
+    </div>
+  )
+}
+
+const CollapsibleAnimatedDemo = () => {
+  return (
+    <Collapsible className='flex w-full max-w-[350px] flex-col gap-2'>
+      <div className='flex items-center justify-between gap-4 px-4'>
+        <div className='text-sm font-semibold'>@peduarte starred 3 repositories</div>
+        <CollapsibleTrigger asChild>
+          <Button variant='ghost' size='icon-sm'>
+            <ChevronsUpDownIcon />
+            <span className='sr-only'>Toggle</span>
+          </Button>
+        </CollapsibleTrigger>
+      </div>
+      <div className='rounded-md border px-4 py-2 font-mono text-sm'>@radix-ui/primitives</div>
+      <CollapsibleContent className='data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down flex flex-col gap-2 overflow-hidden transition-all duration-300'>
+        <div className='rounded-md border px-4 py-2 font-mono text-sm'>@radix-ui/colors</div>
+        <div className='rounded-md border px-4 py-2 font-mono text-sm'>@stitches/react</div>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}