@catalystsoftware/ui 1.0.5 → 1.0.6

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

@@ -1,656 +0,0 @@
-import {Field, Checkbox, FieldLabel, FieldDescription, Badge,MotionCheckbox,    } from "~/components/catalyst-ui"
-import { useId } from 'react'
-import { HeartIcon, CircleCheckIcon, } from 'lucide-react'
-
-
-/**
-* ★ ━━━━ ☆ ━━━━ CheckboxX ━━━━ ☆ ━━━━ ★
-* type CheckboxXType = 
-*   | 'default' | 'Indeterminate' | 'TodoList' | 'Badge' | 'CustomIcons'  // Basic & Interactive
-*   | 'FilledIcon' | 'Card' | 'Tree' | 'Form'                           // Visual & Layout
-*   | 'Animated' | 'AnimatedTodoList' | 'Confetti'                      // Animated
-* 
-* ★ ━━━━ ☆ ━━━━ USAGE ━━━━ ☆ ━━━━ ★
-* 
-* ★ ━━━━━━━━━ Default Checkbox ━━━━━━━━━ ★
-* ```jsx
-* <CheckboxX 
-*   checked={checked}
-*   setChecked={setChecked}
-*   label="Accept terms"
-*   description="Click to agree"
-* />
-* ```
-* 
-* ★ ━━━━━━━━━ Indeterminate Checkbox ━━━━━━━━━ ★
-* ```jsx
-* <CheckboxX 
-*   checkbox="Indeterminate"
-*   checked={checked}
-*   setChecked={setChecked}
-*   label="Select all"
-*   description="Check/uncheck all items"
-* />
-* ```
-* 
-* ★ ━━━━━━━━━ Todo List Checkbox ━━━━━━━━━ ★
-* ```jsx
-* <CheckboxX 
-*   checkbox="TodoList"
-*   items={todoItems}
-*   setItems={setTodoItems}
-* />
-* 
-* // Todo items array structure:
-* const [todoItems, setTodoItems] = useState([
-*   { label: 'Buy groceries', description: 'Milk, eggs, bread', checked: false },
-*   { label: 'Call mom', description: 'Wish happy birthday', checked: false },
-*   { label: 'Finish report', description: 'Due by Friday', checked: true }
-* ]);
-* ```
-* 
-* ★ ━━━━━━━━━ Badge Checkbox Group ━━━━━━━━━ ★
-* ```jsx
-* <CheckboxX 
-*   checkbox="Badge"
-*   orientation="horizontal"
-*   items={badgeItems}
-* />
-* 
-* // Badge items array structure:
-* const badgeItems = [
-*   { label: 'React', checked: false },
-*   { label: 'TypeScript', checked: true },
-*   { label: 'Tailwind', checked: false }
-* ];
-* ```
-* 
-* ★ ━━━━━━━━━ Custom Icons Checkbox ━━━━━━━━━ ★
-* ```jsx
-* import { HeartIcon, StarIcon } from 'lucide-react';
-* 
-* <CheckboxX 
-*   checkbox="CustomIcons"
-*   checked={checked}
-*   setChecked={setChecked}
-*   uncheckedIcon={HeartIcon}
-*   checkedIcon={StarIcon}
-*   label="Favorite"
-*   description="Add to favorites"
-*   ciCN="stroke-1 text-gray-400"
-*   uiCN="fill-yellow-400 stroke-yellow-400 stroke-1"
-* />
-* ```
-* 
-* ★ ━━━━━━━━━ Filled Icon Checkbox ━━━━━━━━━ ★
-* ```jsx
-* <CheckboxX 
-*   checkbox="FilledIcon"
-*   checked={checked}
-*   setChecked={setChecked}
-*   color="bg-blue-500 data-[state=checked]:bg-blue-500"
-*   label="Confirm"
-*   description="Circle check icon"
-* />
-* ```
-* 
-* ★ ━━━━━━━━━ Card Style Checkbox ━━━━━━━━━ ★
-* ```jsx
-* <CheckboxX 
-*   checkbox="Card"
-*   checked={checked}
-*   setChecked={setChecked}
-*   label="Premium Plan"
-*   description="Includes advanced features"
-* />
-* ```
-* 
-* ★ ━━━━━━━━━ Tree Structure Checkbox ━━━━━━━━━ ★
-* ```jsx
-* <CheckboxX 
-*   checkbox="Tree"
-*   checked={checked}
-*   setChecked={setChecked}
-*   selected={selectedItems}
-*   setSelected={setSelectedItems}
-*   items={['Child 1', 'Child 2', 'Child 3']}
-* />
-* ```
-* 
-* ★ ━━━━━━━━━ Form Checkbox ━━━━━━━━━ ★
-* ```jsx
-* <CheckboxX 
-*   checkbox="Form"
-*   label="Accept terms and conditions"
-*   description="By clicking this checkbox, you agree to the terms and conditions."
-* />
-* ```
-* 
-* ★ ━━━━━━━━━ Animated Checkbox ━━━━━━━━━ ★
-* ```jsx
-* <CheckboxX 
-*   checkbox="Animated"
-*   checked={checked}
-*   setChecked={setChecked}
-*   label="Animated toggle"
-*   description="Smooth animation on change"
-* />
-* ```
-* 
-* ★ ━━━━━━━━━ Animated Todo List ━━━━━━━━━ ★
-* ```jsx
-* <CheckboxX 
-*   checkbox="AnimatedTodoList"
-*   items={todoItems}
-*   setItems={setTodoItems}
-* />
-* ```
-* 
-* ★ ━━━━━━━━━ Confetti Checkbox ━━━━━━━━━ ★
-* ```jsx
-* <CheckboxX 
-*   checkbox="Confetti"
-*   checked={checked}
-*   setChecked={setChecked}
-*   label="Celebration!"
-*   description="Check to celebrate"
-* />
-* ```
-* 
-* ★ ━━━━━━━━━ Props ━━━━━━━━━ ★
-* 
-* Common Props (available for most variants):
-* - `checkbox`: CheckboxXType - Specifies which variant to use
-* - `checked`: boolean | 'indeterminate' - Checked state
-* - `setChecked`: (checked: boolean | 'indeterminate') => void - State change callback
-* - `label`: string - Label text
-* - `description`: string - Description text
-* - `side`: 'left' | 'right' - Label position relative to checkbox
-* - `className`: string - Additional CSS classes
-* 
-* Variant-Specific Props:
-* 
-* TodoList:
-* - `items`: Array<{ label?: string, description?: string, checked: boolean, className?: string }>
-* - `setItems`: (items: TodoItem[]) => void
-* 
-* Badge:
-* - `orientation`: string - Layout orientation
-* - `items`: Array<{ label?: string, description?: string, checked: boolean, className?: string }>
-* 
-* CustomIcons:
-* - `uncheckedIcon`: IconComponent - Icon to show when unchecked
-* - `checkedIcon`: IconComponent - Icon to show when checked
-* - `ciCN`: string - CSS classes for checked icon
-* - `uiCN`: string - CSS classes for unchecked icon
-* 
-* FilledIcon:
-* - `color`: string - CSS classes for background color
-* 
-* Tree:
-* - `selected`: string[] - Array of selected child labels
-* - `setSelected`: (selected: string[]) => void
-* - `items`: string[] - Array of child item labels
-* 
-* AnimatedTodoList:
-* - `items`: Array<{ label?: string, description?: string, checked: boolean, className?: string }>
-* - `setItems`: (items: TodoItem[]) => void
-* 
-* Confetti:
-* - Uses same props as DefaultCheckbox with confetti animation
-* 
-* ★ ━━━━━━━━━ Import ━━━━━━━━━ ★
-* ```javascript
-* import { CheckboxX } from "./CheckboxX";
-* 
-* // Lucide icons (for CustomIcons variant)
-* import { HeartIcon, StarIcon, CircleCheckIcon } from 'lucide-react';
-* ```
-* 
-* ★ ━━━━━━━━━ State Management Examples ━━━━━━━━━ ★
-* ```typescript
-* // Single checkbox state
-* const [checked, setChecked] = useState(false);
-* 
-* // Todo list state
-* const [todoItems, setTodoItems] = useState([
-*   { label: 'Task 1', description: 'Description', checked: false },
-*   { label: 'Task 2', description: 'Description', checked: true }
-* ]);
-* 
-* // Tree selection state
-* const [checked, setChecked] = useState<'indeterminate' | boolean>(false);
-* const [selected, setSelected] = useState<string[]>(['Child 1', 'Child 2']);
-* const items = ['Child 1', 'Child 2', 'Child 3'];
-* ```
-* 
-*/
-
-export function CheckboxX({ checkbox = 'default', children, ...props }: any) {
-  switch (checkbox) {
-    case 'Indeterminate':
-      return <Indeterminate {...props} />
-    case 'TodoList':
-      return <TodoList {...props} />
-    case 'Badge':
-      return <BadgeCheckbox {...props} />
-    case 'CustomIcons':
-      return <CustomIcons {...props} />
-    case 'FilledIcon':
-      return <FilledIcon {...props} />
-    case 'Card':
-      return <Card {...props} />
-    case 'Tree':
-      return <Tree {...props} />
-    case 'Form':
-      return <Form {...props} />
-    case 'Animated':
-      return <Animated {...props} />
-    case 'AnimatedTodoList':
-      return <AnimatedTodoList {...props} />
-    case 'Confetti':
-      return <Confetti {...props} />
-    default:
-      return <DefaultCheckbox {...props} />;
-  }
-}
-
-const DefaultCheckbox = ({ checked, setChecked, label, description, className, side = "right", ...props }) => {
-  const id = useId()
-
-  return (
-    <Field className="flex items-start gap-2">
-      {side === 'left' && (
-        <div className="flex-1">
-          {label && (<FieldLabel>{label}</FieldLabel>)}
-          {description && (<FieldDescription>{description}</FieldDescription>)}
-        </div>
-      )}
-      <Checkbox
-        id={id}
-        checked={checked}
-        onCheckedChange={setChecked}
-        {...props}
-        className={className}
-      />
-      {side === 'right' && (
-        <div className="flex-1">
-          {label && (<FieldLabel>{label}</FieldLabel>)}
-          {description && (<FieldDescription>{description}</FieldDescription>)}
-        </div>
-      )}
-    </Field>
-  )
-}
-const Indeterminate = ({ checked = 'indeterminate', setChecked, label, description, className, side = "right", ...props }) => {
-  const id = useId()
-  return (
-    <Field className="flex items-start gap-2">
-      {side === 'left' && (
-        <div className="flex-1">
-          {label && (<FieldLabel>{label}</FieldLabel>)}
-          {description && (<FieldDescription>{description}</FieldDescription>)}
-        </div>
-      )}
-      <Checkbox
-        id={id}
-        checked={checked}
-        onCheckedChange={setChecked}
-        {...props}
-        className={className}
-      />
-      {side === 'right' && (
-        <div className="flex-1">
-          {label && (<FieldLabel>{label}</FieldLabel>)}
-          {description && (<FieldDescription>{description}</FieldDescription>)}
-        </div>
-      )}
-    </Field>
-  )
-}
-const items = [
-  { label: '', description: '', checked: false }
-]
-const TodoList = ({ items, setItems }) => {
-  const handleCheckedChange = (index: number, checked: boolean) => {
-    const newItems = [...items]
-    newItems[index].checked = checked
-    setItems(newItems)
-  }
-  const id = useId()
-
-  return (
-    <div className='flex flex-col gap-2'>
-      {items.map((i, index) => {
-        return (
-          <Field className="flex items-start gap-2" key={index}>
-            <Checkbox
-             id={id}
-              checked={i.checked}
-              onCheckedChange={(checked) => handleCheckedChange(index, checked)}
-              className={i.className}
-            />
-            <div className="flex-1">
-              {i.label && (<FieldLabel htmlFor={id} className='after:bg-primary peer-data-[state=checked]:text-primary relative after:absolute after:top-1/2 after:left-0 after:h-px after:w-full after:origin-bottom after:scale-x-0 after:transition-transform after:duration-500 after:ease-in-out peer-data-[state=checked]:after:origin-bottom peer-data-[state=checked]:after:scale-x-100'>{i.label}</FieldLabel>)}
-              {i.description && (<FieldDescription htmlFor={id} className='after:bg-primary peer-data-[state=checked]:text-primary relative after:absolute after:top-1/2 after:left-0 after:h-px after:w-full after:origin-bottom after:scale-x-0 after:transition-transform after:duration-500 after:ease-in-out peer-data-[state=checked]:after:origin-bottom peer-data-[state=checked]:after:scale-x-100'>{i.description}</FieldDescription>)}
-            </div>
-          </Field>
-        )
-      })}
-    </div>
-  )
-}
-const BadgeCheckbox = ({ orientation, items }) => {
-  const handleCheckedChange = (index: number, checked: boolean) => {
-    const newItems = [...items]
-    newItems[index].checked = checked
-    setItems(newItems)
-  }
-  return (
-    <CheckboxGroup varian={orientation}>
-      {items.map((i, index) => {
-        return (
-          <Badge key={label} variant='secondary' className='relative gap-2 rounded-sm px-3 py-1.5'>
-            <Field className="flex items-start gap-2" key={index}>
-              <Checkbox
-                checked={i.checked}
-                onCheckedChange={(checked) => handleCheckedChange(index, checked)}
-                className={i.className}
-              />
-              <div className="flex-1">
-                {i.label && (<FieldLabel>{i.label}</FieldLabel>)}
-                {i.description && (<FieldDescription>{i.description}</FieldDescription>)}
-              </div>
-            </Field>
-          </Badge>
-        )
-      })}
-    </CheckboxGroup>
-  )
-}
-const CustomIcons = ({ checkedIcon, ciCN = 'stroke-1', uncheckedIcon, uiCN = 'fill-destructive stroke-destructive stroke-1', checked, setChecked, label, description, className, side = "right", ...props }) => {
-  const Icon1 = uncheckedIcon ? uncheckedIcon : HeartIcon
-  const Icon2 = checkedIcon ? checkedIcon : HeartIcon
-  return (
-    <Field className="flex items-start gap-2">
-      {side === 'left' && (
-        <div className="flex-1">
-          {label && (<FieldLabel>{label}</FieldLabel>)}
-          {description && (<FieldDescription>{description}</FieldDescription>)}
-        </div>
-      )}
-      <Checkbox
-        id={id}
-        checked={checked}
-        onCheckedChange={setChecked}
-        {...props}
-        className={className}
-      >
-        <CheckboxIndicator>
-          <span className='group-data-[state=checked]:hidden'>
-            <Icon1 className={ciCN} />
-          </span>
-          <span className='group-data-[state=unchecked]:hidden'>
-            <Icon2 className={uiCN} />
-          </span>
-        </CheckboxIndicator>
-      </Checkbox>
-      {side === 'right' && (
-        <div className="flex-1">
-          {label && (<FieldLabel>{label}</FieldLabel>)}
-          {description && (<FieldDescription>{description}</FieldDescription>)}
-        </div>
-      )}
-    </Field>
-
-  )
-}
-const FilledIcon = ({ color, checked, setChecked, label, description, className, side = "right", ...props }) => {
-  return (
-    <Field className="flex items-start gap-2">
-      {side === 'left' && (
-        <div className="flex-1">
-          {label && (<FieldLabel>{label}</FieldLabel>)}
-          {description && (<FieldDescription>{description}</FieldDescription>)}
-        </div>
-      )}
-      <CheckboxPrimitive.Root
-        data-slot='checkbox'
-        checked={checked}
-        onCheckedChange={setChecked}
-        {...props}
-        className={cn('peer bg-destructive data-[state=checked]:text-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 w-7 h-7 shrink-0 rounded-full shadow-xs transition-shadow outline-none focus-visible:ring-[3px]', color, className)}
-      >
-        <CheckboxPrimitive.Indicator data-slot='checkbox-indicator' className='flex items-center justify-center text-current transition-none' >
-          <CircleCheckIcon className='size-5.5 fill-white stroke-current' />
-        </CheckboxPrimitive.Indicator>
-      </CheckboxPrimitive.Root>
-      {side === 'right' && (
-        <div className="flex-1">
-          {label && (<FieldLabel>{label}</FieldLabel>)}
-          {description && (<FieldDescription>{description}</FieldDescription>)}
-        </div>
-      )}
-    </Field>
-  )
-}
-const Card = ({ checked, setChecked, label, description, className, side = "right", ...props }) => {
-  return (
-    <Field className="flex items-start gap-2 hover:bg-accent/50 flex items-start gap-2 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
-      {side === 'left' && (
-        <div className="flex-1">
-          {label && (<FieldLabel>{label}</FieldLabel>)}
-          {description && (<FieldDescription>{description}</FieldDescription>)}
-        </div>
-      )}
-      <Checkbox
-        id={id}
-        checked={checked}
-        onCheckedChange={setChecked}
-        {...props}
-        className={cn('data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700', className)}
-      />
-      {side === 'right' && (
-        <div className="grid gap-1.5 font-normal">
-          {label && (<FieldLabel className='text-sm leading-none font-medium'>{label}</FieldLabel>)}
-          {description && (<FieldDescription className='text-muted-foreground text-sm'>{description}</FieldDescription>)}
-        </div>
-      )}
-    </Field>
-  )
-}
-const Tree = ({ checked = 'indeterminate', setChecked, selected = ['Child 1', 'Child 2'], setSelected, label, description, className, side = "right", ...props }) => {
-  useEffect(() => {
-    if (selected.length === items.length) {
-      setChecked(true)
-    } else if (selected.length > 0) {
-      setChecked('indeterminate')
-    } else {
-      setChecked(false)
-    }
-  }, [selected])
-
-  const handleCheckedChange = (checked: CheckboxPrimitive.CheckedState) => {
-    setChecked(checked)
-
-    if (checked === true) {
-      setSelected([...items])
-    } else if (checked === false) {
-      setSelected([])
-    }
-  }
-
-  return (
-    <div className='flex flex-col gap-4'>
-      <div className='flex items-center gap-2'>
-        <Checkbox id='parent' checked={checked} onCheckedChange={handleCheckedChange} />
-        <Label htmlFor='parent'>Parent</Label>
-      </div>
-      <div className='flex flex-col gap-2 pl-6'>
-        {items.map(label => (
-          <div key={label} className='flex items-center gap-2'>
-            <Checkbox
-              id={label}
-              checked={selected.includes(label)}
-              onCheckedChange={checked =>
-                setSelected(checked ? [...selected, label] : selected.filter(item => item !== label))
-              }
-            />
-            <Label htmlFor={label}>{label}</Label>
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-const Form = ({ checked, setChecked, label, description, className, side = "right", ...props }) => {
-  const id = useId()
-
-  return (
-    <div className='flex items-start gap-2'>
-      <Checkbox id={id} defaultChecked />
-      <div className='grid gap-2'>
-        <Label htmlFor={id} className='gap-1 leading-4'>
-          Accept terms and conditions
-        </Label>
-        <p className='text-muted-foreground text-xs'>
-          By clicking this checkbox, you agree to the terms and conditions.
-        </p>
-        <div className='flex flex-wrap gap-2'>
-          <Button variant='outline' size='sm'>
-            Reset
-          </Button>
-          <Button size='sm'>Submit</Button>
-        </div>
-      </div>
-    </div>
-  )
-}
-const Animated = ({ checked, setChecked, label, description, className, side = "right", ...props }) => {
-  const id = useId()
-
-  return (
-    <Field className="flex items-start gap-2">
-      {side === 'left' && (
-        <div className="flex-1">
-          {label && (<FieldLabel>{label}</FieldLabel>)}
-          {description && (<FieldDescription>{description}</FieldDescription>)}
-        </div>
-      )}
-      <MotionCheckbox
-        id={id}
-        checked={checked}
-        onCheckedChange={setChecked}
-        {...props}
-        className={className}
-      />
-      {side === 'right' && (
-        <div className="flex-1">
-          {label && (<FieldLabel>{label}</FieldLabel>)}
-          {description && (<FieldDescription>{description}</FieldDescription>)}
-        </div>
-      )}
-    </Field>
-  )
-}
-const AnimatedTodoList = ({ items, setItems  }) => {
-  const id = useId()
-  const handleCheckedChange = (index: number, checked: boolean) => {
-    const newItems = [...items]
-    newItems[index].checked = checked
-    setItems(newItems)
-  }
-  return (
-   <div className='flex flex-col gap-2'>
-      {items.map((i, index) => {
-        return (
-          <Field className="flex items-start gap-2" key={index}>
-            <Checkbox
-             id={id}
-              checked={i.checked}
-              onCheckedChange={(checked) => handleCheckedChange(index, checked)}
-              className={i.className}
-            />
-            <div className="flex-1">
-              {i.label && (<FieldLabel htmlFor={id} className='after:bg-primary peer-data-[state=checked]:text-primary relative after:absolute after:top-1/2 after:left-0 after:h-px after:w-full after:origin-bottom after:scale-x-0 after:transition-transform after:duration-500 after:ease-in-out peer-data-[state=checked]:after:origin-bottom peer-data-[state=checked]:after:scale-x-100'>{i.label}</FieldLabel>)}
-              {i.description && (<FieldDescription htmlFor={id} className='after:bg-primary peer-data-[state=checked]:text-primary relative after:absolute after:top-1/2 after:left-0 after:h-px after:w-full after:origin-bottom after:scale-x-0 after:transition-transform after:duration-500 after:ease-in-out peer-data-[state=checked]:after:origin-bottom peer-data-[state=checked]:after:scale-x-100'>{i.description}</FieldDescription>)}
-            </div>
-          </Field>
-        )
-      })}
-    </div>
-  )
-}
-const particleAnimation = ({ index, checked, setChecked, label, description, className, side = "right", ...props }) => {
-  const angle = Math.random() * Math.PI * 2
-  const distance = 30 + Math.random() * 20
-
-  return {
-    initial: { x: '50%', y: '50%', scale: 0, opacity: 0 },
-    animate: {
-      x: `calc(50% + ${Math.cos(angle) * distance}px)`,
-      y: `calc(50% + ${Math.sin(angle) * distance}px)`,
-      scale: [0, 1, 0],
-      opacity: [0, 1, 0]
-    },
-    transition: { duration: 0.4, delay: index * 0.05, ease: easeOut }
-  }
-}
-const ConfettiPiece = ({ index, checked, setChecked, label, description, className, side = "right", ...props }) => {
-  const colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF']
-  const color = colors[index % colors.length]
-
-  return (
-    <motion.div
-      className='absolute size-1 rounded-full'
-      style={{ backgroundColor: color }}
-      {...particleAnimation(index)}
-    />
-  )
-}
-const Confetti = ({ checked, setChecked, label, description, className, side = "right", ...props }) => {
-  const [showConfetti, setShowConfetti] = useState(false)
-
-  const id = useId()
-
-  const handleCheckedChange = (checked: boolean) => {
-    if (checked) {
-      setShowConfetti(true)
-      setTimeout(() => setShowConfetti(false), 800)
-    }
-    setChecked(checked)
-  }
-
-  return (
-     <Field className="flex items-start gap-2">
-      {side === 'left' && (
-        <div className="flex-1">
-          {label && (<FieldLabel>{label}</FieldLabel>)}
-          {description && (<FieldDescription>{description}</FieldDescription>)}
-        </div>
-      )}
-      <Checkbox
-        id={id}
-        checked={checked}
-        onCheckedChange={handleCheckedChange}
-        {...props}
-        className={className}
-      />
-      {side === 'right' && (
-        <div className="flex-1">
-          {label && (<FieldLabel>{label}</FieldLabel>)}
-          {description && (<FieldDescription>{description}</FieldDescription>)}
-        </div>
-      )}
-       <AnimatePresence>
-        {showConfetti && (
-          <div className='pointer-events-none absolute inset-0'>
-            {[...Array(12)].map((_, i) => (
-              <ConfettiPiece key={i} index={i} />
-            ))}
-          </div>
-        )}
-      </AnimatePresence>
-    </Field>
-  )
-}