@catalystsoftware/ui 1.0.5 → 1.0.7

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

@@ -1,428 +0,0 @@
-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>
-    )
-}