@catalystsoftware/ui 1.0.0

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

@@ -0,0 +1,428 @@
+import React from 'react'
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown, Plus } from "lucide-react"
+import { cn } from "~/components/catalyst-ui"
+import { Accordion, AccordionItem,  accordionTriggerVariants, TsxSection } from "~/components/catalyst-ui"
+import { Avatar, AvatarImage, AvatarFallback } from "~/components/catalyst-ui"
+
+/**
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ AccordionX ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ★ ━━━━ ☆ ━━━━  ━━━━ ☆ ━━━━ ★
+* type AccordionXType = 'default' | 'plusMinus' | 'avatar' | 'iconSubtitle' | 'media'
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Default ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* <AccordionX type="single" collapsible defaultValue="item-1">
+*     {items.map((item, index) => (
+*         <AccordionXItem key={index} value={`item-${index + 1}`}>
+*             <AccordionXTrigger>{item.title}</AccordionXTrigger>
+*             <AccordionXContent>{item.content}</AccordionXContent>
+*         </AccordionXItem>
+*     ))}
+* </AccordionX>
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Plus/Minus Icon ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* <AccordionX accordionType="plusMinus" type="single" collapsible defaultValue="item-1">
+*     {items.map((item, index) => (
+*         <AccordionXItem key={index} value={`item-${index + 1}`}>
+*             <AccordionXTrigger>{item.title}</AccordionXTrigger>
+*             <AccordionXContent>{item.content}</AccordionXContent>
+*         </AccordionXItem>
+*     ))}
+* </AccordionX>
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Avatar ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* <AccordionX accordionType="avatar" type="single" collapsible defaultValue="item-1">
+*     {items.map((item, index) => (
+*         <AccordionXItem key={index} value={`item-${index + 1}`}>
+*             <AccordionXTrigger 
+*                 name={item.name} 
+*                 email={item.email} 
+*                 avatarImage={item.avatarImage} 
+*             />
+*             <AccordionXContent>{item.content}</AccordionXContent>
+*         </AccordionXItem>
+*     ))}
+* </AccordionX>
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Icon with Subtitle ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```jsx
+* <AccordionX accordionType="iconSubtitle" type="single" collapsible defaultValue="item-1">
+*     {items.map((item, index) => (
+*         <AccordionXItem key={index} value={`item-${index + 1}`}>
+*             <AccordionXTrigger subtitle={item.subtitle}>
+*                 {item.title}
+*             </AccordionXTrigger>
+*             <AccordionXContent>{item.content}</AccordionXContent>
+*         </AccordionXItem>
+*     ))}
+* </AccordionX>
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Props ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* - AccordionX Props:
+* - `accordionType`: 'default' | 'plusMinus' | 'avatar' | 'iconSubtitle' | 'media'
+* - `type`: 'single' | 'multiple' - Accordion behavior
+* - `collapsible`: boolean - Allow all items to be closed
+* - `defaultValue`: string - Default open item(s)
+* - `value`: string - Controlled open item(s)
+* - `onValueChange`: (value: string) => void - Callback when value changes
+* 
+* - AccordionXItem Props:
+* - `value`: string - Unique value for the item
+* - `disabled`: boolean - Whether the item is disabled
+* 
+* - AccordionXTrigger Props:
+* - `children`: ReactNode - Trigger content
+* - `subtitle`: string - Subtitle text (for iconSubtitle type)
+* - `name`: string - User name (for avatar type)
+* - `email`: string - User email (for avatar type)
+* - `avatarImage`: string - Avatar image URL (for avatar type)
+* 
+* - AccordionXContent Props:
+* - `children`: ReactNode - Content to display when expanded
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Data Structure ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```typescript
+* interface AccordionItem {
+*     title: string;
+*     content: string;
+*     name?: string;
+*     email?: string;
+*     subtitle?: string;
+*     avatarImage?: string;
+*     media?: string;
+* }
+* ```
+* 
+* ★ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━ Example Items Array ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ☆ ━━━━━━━━━━━━━━ ★                  
+* ```javascript
+* const items = [
+*     {
+*         title: 'How do I track my order?',
+*         content: 'You can track your order by logging into your account.',
+*         name: 'John Doe',
+*         email: 'john@example.com',
+*         subtitle: 'Basic Plan',
+*         avatarImage: 'https://github.com/shadcn.png',
+*         media: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800&auto=format&fit=crop'
+*     },
+*     // ... more items
+* ]
+* ```
+* 
+*/
+
+type AccordionContextType = {
+  variant?: VariantProps<typeof accordionVariants>["variant"]
+}
+
+const AccordionContext = React.createContext<AccordionContextType>({
+  variant: "default",
+})
+
+const useAccordionContext = () => {
+  const context = React.useContext(AccordionContext)
+  if (!context) {
+    throw new Error("Accordion components must be used within Accordion")
+  }
+  return context
+}
+
+type AccordionType = 'default' | 'leftIcon' | 'plusMinus' | 'expandIcon' | 'avatar' | 'iconSubtitle'
+
+const AccordionXContext = React.createContext<AccordionType>('default')
+
+export function AccordionX({ accordion = 'default', variant, ...props }: any) {
+  const contextValue: AlertContextValue = { variant, accordion }
+    return (
+        <AccordionXContext.Provider value={contextValue}>
+            <Accordion {...props} />
+        </AccordionXContext.Provider>
+    )
+}
+
+export function AccordionXItem({ ...props }: any) {
+    const { variant, accordion } = useAccordionContext()
+    switch (accordion) {
+        default:
+            return <AccordionItem {...props} />
+    }
+}
+
+export function AccordionXTrigger({children,  ...props }: any) {
+    const { variant, accordion } = useAccordionContext()
+    const Icon = props.icon
+    switch (accordion) {
+        case 'leftIcon':
+            return (
+                <AccordionPrimitive.Header className="flex">
+                    <AccordionPrimitive.Trigger
+                        className={cn(accordionTriggerVariants({ variant }), "justify-start [&>svg]:order-first", props.className)}
+                        {...props}
+                    >
+                        <span className='flex items-center gap-4'>
+                            {Icon && <Icon className='text-muted-foreground size-4 shrink-0' />}
+                            <span>{children}</span>
+                        </span>
+                        <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+                    </AccordionPrimitive.Trigger>
+                </AccordionPrimitive.Header>
+            )
+
+        case 'plusMinus':
+            return (
+                <AccordionPrimitive.Header className="flex">
+                    <AccordionPrimitive.Trigger
+                        className={cn(
+                            accordionTriggerVariants({
+
+                            }),
+                            "focus-visible:border-ring focus-visible:ring-ring/50 rounded-md outline-none focus-visible:ring-[3px] [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg]:rotate-180 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0",
+                            props.className
+                        )}
+                        {...props}
+                    >
+                        {children}
+                        <Plus className="text-muted-foreground pointer-events-none size-4 shrink-0 transition-transform duration-200" />
+                    </AccordionPrimitive.Trigger>
+                </AccordionPrimitive.Header>
+            )
+
+        case 'expandIcon':
+            return (
+                <AccordionPrimitive.Header className="flex">
+                    <AccordionPrimitive.Trigger
+                        className={cn(
+                            accordionTriggerVariants({ variant }),
+                            "focus-visible:border-ring focus-visible:ring-ring/50 items-start rounded-md outline-none focus-visible:ring-[3px] [&[data-state=open]>svg]:rotate-45",
+                            props.className
+                        )}
+                        {...props}
+                    >
+                        <span className="flex items-center gap-4">
+                            {Icon && <Icon className="size-4 shrink-0" />}
+                            <span>{children}</span>
+                        </span>
+                        <Plus className="text-muted-foreground pointer-events-none size-4 shrink-0 transition-transform duration-200" />
+                    </AccordionPrimitive.Trigger>
+                </AccordionPrimitive.Header>
+            )
+
+        case 'avatar':
+            return (
+                <AccordionPrimitive.Header className="flex">
+                    <AccordionPrimitive.Trigger
+                        className={cn(accordionTriggerVariants({ variant }), "items-center hover:no-underline", props.className)}
+                        {...props}
+                    >
+                        <span className='flex items-center gap-4'>
+                            <Avatar className='size-10.5 rounded-sm'>
+                                <AvatarImage src={props.avatar} alt={props.name} className='rounded-sm' />
+                                <AvatarFallback className='rounded-sm text-xs'>
+                                    {props.name?.split(/\s/).reduce((response: string, word: string) => (response += word.slice(0, 1)), '')}
+                                </AvatarFallback>
+                            </Avatar>
+                            <span className='flex flex-col space-y-0.5'>
+                                <span>{props.name}</span>
+                                <span className='text-muted-foreground font-normal'>{props.email}</span>
+                            </span>
+                        </span>
+                        <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+                    </AccordionPrimitive.Trigger>
+                </AccordionPrimitive.Header>
+            )
+
+        case 'iconSubtitle':
+            return (
+                <AccordionPrimitive.Header className="flex">
+                    <AccordionPrimitive.Trigger
+                        className={cn(
+                            accordionTriggerVariants({ variant }),
+                            "focus-visible:border-ring focus-visible:ring-ring/50 rounded-md outline-none focus-visible:ring-[3px] [&>svg>path:last-child]:origin-center [&>svg>path:last-child]:transition-all [&>svg>path:last-child]:duration-200 [&[data-state=open]>svg]:rotate-180 [&[data-state=open]>svg>path:last-child]:rotate-90 [&[data-state=open]>svg>path:last-child]:opacity-0",
+                            props.className
+                        )}
+                        {...props}
+                    >
+                        <span className='flex items-center gap-4'>
+                            <span
+                                className='flex size-10 shrink-0 items-center justify-center rounded-full border'
+                                aria-hidden='true'
+                            >
+                                {Icon && <Icon className='size-4' />}
+                            </span>
+                            <span className='flex flex-col space-y-0.5'>
+                                {children}
+                                <span className='text-muted-foreground font-normal'>{props.subtitle}</span>
+                            </span>
+                        </span>
+                        <Plus className='text-muted-foreground pointer-events-none size-4 shrink-0 transition-transform duration-200' />
+                    </AccordionPrimitive.Trigger>
+                </AccordionPrimitive.Header>
+            )
+
+        default:
+            return (
+                <AccordionPrimitive.Header className="flex">
+                    <AccordionPrimitive.Trigger
+                        className={cn(accordionTriggerVariants({ variant }), props.className)}
+                        {...props}
+                    >
+                        {children}
+                        <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+                    </AccordionPrimitive.Trigger>
+                </AccordionPrimitive.Header>
+            )
+    }
+}
+
+export function AccordionXContent({ ...props }: any) {
+    const accordionType = React.useContext(AccordionXContext)
+
+    switch (accordionType) {
+        case 'media':
+            return (
+                <AccordionContent {...props}>
+                    <div className="space-y-4">
+                        <p className='text-muted-foreground'>{props.children}</p>
+                        <img src={media} alt="" className='w-full rounded-md' />
+                    </div>
+                </AccordionContent>
+            )
+        default:
+            return <AccordionContent {...props} />
+    }
+}
+
+export function AccordionXDemo() {
+    const items = [
+        {
+            title: 'How do I track my order?',
+            content: 'You can track your order by logging into your account.',
+            name: 'John Doe',
+            email: 'john@example.com',
+            subtitle: 'Basic Plan',
+            avatarImage: 'https://github.com/shadcn.png',
+            media: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=800&auto=format&fit=crop'
+        },
+        {
+            title: 'What is your return policy?',
+            content: 'We offer a 30-day return policy for most items.',
+            name: 'Jane Smith',
+            email: 'jane@example.com',
+            subtitle: 'Pro Plan',
+            avatarImage: 'https://github.com/vercel.png',
+            media: 'https://images.unsplash.com/photo-1618556450994-a6a128ef0d9d?w=800&auto=format&fit=crop'
+        },
+        {
+            title: 'How can I contact customer support?',
+            content: 'Our customer support team is available 24/7.',
+            name: 'Bob Johnson',
+            email: 'bob@example.com',
+            subtitle: 'Enterprise Plan',
+            avatarImage: 'https://github.com/nextjs.png',
+            media: 'https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?w=800&auto=format&fit=crop'
+        }
+    ]
+
+    return (
+        <div className="space-y-12 p-6 max-w-3xl mx-auto">
+            <div>
+                <h3 className="text-lg font-semibold mb-4">Default</h3>
+                <AccordionX type="single" collapsible defaultValue="item-1">
+                    {items.map((item, index) => (
+                        <AccordionXItem key={index} value={`item-${index + 1}`}>
+                            <AccordionXTrigger>{item.title}</AccordionXTrigger>
+                            <AccordionXContent>{item.content}</AccordionXContent>
+                        </AccordionXItem>
+                    ))}
+                </AccordionX>
+                <TsxSection
+                    title="AccordionX"
+                    code={`<AccordionX type="single" collapsible defaultValue="item-1">
+    {items.map((item, index) => (
+        <AccordionXItem key={index} value={\`item-\${index + 1}\`}>
+            <AccordionXTrigger>{item.title}</AccordionXTrigger>
+            <AccordionXContent>{item.content}</AccordionXContent>
+        </AccordionXItem>
+    ))}
+</AccordionX>`}
+                />
+            </div>
+
+            <div>
+                <h3 className="text-lg font-semibold mb-4">Plus/Minus Icon</h3>
+                <AccordionX accordionType="plusMinus" type="single" collapsible defaultValue="item-1">
+                    {items.map((item, index) => (
+                        <AccordionXItem key={index} value={`item-${index + 1}`}>
+                            <AccordionXTrigger>{item.title}</AccordionXTrigger>
+                            <AccordionXContent>{item.content}</AccordionXContent>
+                        </AccordionXItem>
+                    ))}
+                </AccordionX>
+                <TsxSection
+                    title="AccordionX"
+                    code={` <AccordionX accordionType="plusMinus" type="single" collapsible defaultValue="item-1">
+    {items.map((item, index) => (
+        <AccordionXItem key={index} value={\`item-\${index + 1}\`}>
+            <AccordionXTrigger>{item.title}</AccordionXTrigger>
+            <AccordionXContent>{item.content}</AccordionXContent>
+        </AccordionXItem>
+    ))}
+</AccordionX>`}
+                />
+            </div>
+
+            <div>
+                <h3 className="text-lg font-semibold mb-4">Avatar</h3>
+                <AccordionX accordionType="avatar" type="single" collapsible defaultValue="item-1">
+                    {items.map((item, index) => (
+                        <AccordionXItem key={index} value={`item-${index + 1}`}>
+                            <AccordionXTrigger name={item.name} email={item.email} avatarImage={item.avatarImage} />
+                            <AccordionXContent>{item.content}</AccordionXContent>
+                        </AccordionXItem>
+                    ))}
+                </AccordionX>
+                <TsxSection
+                    title="AccordionX"
+                    code={`<AccordionX accordionType="avatar" type="single" collapsible defaultValue="item-1">
+    {items.map((item, index) => (
+        <AccordionXItem key={index} value={\`item-\${index + 1}\`}>
+            <AccordionXTrigger name={item.name} email={item.email} avatarImage={item.avatarImage} />
+            <AccordionXContent>{item.content}</AccordionXContent>
+        </AccordionXItem>
+    ))}
+</AccordionX>`}
+                />
+            </div>
+
+            <div>
+                <h3 className="text-lg font-semibold mb-4">Icon with Subtitle</h3>
+                <AccordionX accordionType="iconSubtitle" type="single" collapsible defaultValue="item-1">
+                    {items.map((item, index) => (
+                        <AccordionXItem key={index} value={`item-${index + 1}`}>
+                            <AccordionXTrigger subtitle={item.subtitle}>{item.title}</AccordionXTrigger>
+                            <AccordionXContent>{item.content}</AccordionXContent>
+                        </AccordionXItem>
+                    ))}
+                </AccordionX>
+                <TsxSection
+                    title="AccordionX"
+                    code={`<AccordionX accordionType="iconSubtitle" type="single" collapsible defaultValue="item-1">
+    {items.map((item, index) => (
+        <AccordionXItem key={index} value={\`item-\${index + 1}\`}>
+            <AccordionXTrigger subtitle={item.subtitle}>{item.title}</AccordionXTrigger>
+            <AccordionXContent>{item.content}</AccordionXContent>
+        </AccordionXItem>
+    ))}
+</AccordionX>`}
+                />
+            </div>
+        </div>
+    )
+}