@catalystsoftware/ui 1.0.0

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

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