{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox-styled",
  "title": "Checkbox essentials",
  "description": "Styled checkbox: the essentials set. 5 decorative checkbox variations (FillCheckbox, BounceCheckbox, DrawCheckbox, GlowCheckbox, RoundedCheckbox) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.",
  "dependencies": [
    "motion@^12.42.2",
    "lucide-react@^1.23.0"
  ],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/checkbox-styled.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check } from \"lucide-react\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Checkbox family: 5 decorative selection boxes. role=\"checkbox\", keyboard accessible. Colour comes ONLY from tokens. Size = the box scale. Used uncontrolled (defaultChecked) or controlled. framer-motion switches instantly under reduced-motion. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst boxSize: Record<StyledSize, string> = {\n  sm: \"size-4\",\n  md: \"size-5\",\n  lg: \"size-6\",\n  xl: \"size-7\",\n}\n\nconst iconSize: Record<StyledSize, string> = {\n  sm: \"size-3\",\n  md: \"size-3.5\",\n  lg: \"size-4\",\n  xl: \"size-5\",\n}\n\nconst boxBase =\n  \"relative inline-flex shrink-0 cursor-pointer items-center justify-center outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 after:absolute after:-inset-1.5\"\n\ntype CheckboxProps = Omit<React.ComponentProps<\"button\">, \"onChange\"> & {\n  size?: StyledSize\n  checked?: boolean\n  defaultChecked?: boolean\n  onCheckedChange?: (checked: boolean) => void\n}\n\nfunction useCheckbox(props: CheckboxProps) {\n  const { checked, defaultChecked, onCheckedChange } = props\n  const reduce = useReducedMotion()\n  const [internal, setInternal] = React.useState(defaultChecked ?? false)\n  const on = checked ?? internal\n  const toggle = () => {\n    if (checked === undefined) setInternal((v) => !v)\n    onCheckedChange?.(!on)\n  }\n  const spring = reduce\n    ? { duration: 0 }\n    : ({ type: \"spring\", stiffness: 500, damping: 30 } as const)\n  return { on, toggle, spring, reduce }\n}\n\n/* Fill: kutu merkezden yay ile dolar, isaret olceklenerek girer. */\nexport function FillCheckbox({\n  className,\n  size = \"md\",\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  ...props\n}: CheckboxProps) {\n  const { on, toggle, spring } = useCheckbox({ checked, defaultChecked, onCheckedChange })\n  return (\n    <button\n      type=\"button\"\n      role=\"checkbox\"\n      aria-checked={on}\n      data-slot=\"styled-checkbox\"\n      onClick={toggle}\n      className={cn(\n        boxBase,\n        boxSize[size],\n        \"overflow-hidden rounded-md border transition-colors\",\n        on ? \"border-primary text-primary-foreground\" : \"border-field-border text-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <motion.span\n        initial={false}\n        animate={{ scale: on ? 1 : 0 }}\n        transition={spring}\n        className=\"absolute inset-0 origin-center bg-primary\"\n      />\n      <motion.span\n        initial={false}\n        animate={{ scale: on ? 1 : 0.4, opacity: on ? 1 : 0 }}\n        transition={spring}\n        className=\"relative flex items-center justify-center\"\n      >\n        <Check className={cn(iconSize[size], \"stroke-[3]\")} />\n      </motion.span>\n    </button>\n  )\n}\n\n/* Bounce: isaret yay ile ziplayarak girer. */\nexport function BounceCheckbox({\n  className,\n  size = \"md\",\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  ...props\n}: CheckboxProps) {\n  const { on, toggle, reduce } = useCheckbox({ checked, defaultChecked, onCheckedChange })\n  const bounce = reduce\n    ? { duration: 0 }\n    : ({ type: \"spring\", stiffness: 700, damping: 12 } as const)\n  return (\n    <button\n      type=\"button\"\n      role=\"checkbox\"\n      aria-checked={on}\n      data-slot=\"styled-checkbox\"\n      onClick={toggle}\n      className={cn(\n        boxBase,\n        boxSize[size],\n        \"rounded-md border transition-colors\",\n        on ? \"border-primary bg-primary text-primary-foreground\" : \"border-field-border text-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <motion.span\n        initial={false}\n        animate={{ scale: on ? 1 : 0, opacity: on ? 1 : 0 }}\n        transition={bounce}\n        className=\"flex items-center justify-center\"\n      >\n        <Check className={cn(iconSize[size], \"stroke-[3]\")} />\n      </motion.span>\n    </button>\n  )\n}\n\n/* Draw: isaret yolu cizilir (pathLength). */\nexport function DrawCheckbox({\n  className,\n  size = \"md\",\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  ...props\n}: CheckboxProps) {\n  const { on, toggle, reduce } = useCheckbox({ checked, defaultChecked, onCheckedChange })\n  return (\n    <button\n      type=\"button\"\n      role=\"checkbox\"\n      aria-checked={on}\n      data-slot=\"styled-checkbox\"\n      onClick={toggle}\n      className={cn(\n        boxBase,\n        boxSize[size],\n        \"rounded-md border transition-colors\",\n        on ? \"border-primary bg-primary text-primary-foreground\" : \"border-field-border text-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        strokeWidth={3}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className={cn(iconSize[size])}\n        aria-hidden=\"true\"\n      >\n        <motion.path\n          d=\"M5 12.5l4.5 4.5L19 7\"\n          initial={false}\n          animate={{ pathLength: on ? 1 : 0, opacity: on ? 1 : 0 }}\n          transition={reduce ? { duration: 0 } : { duration: 0.28, ease: \"easeInOut\" }}\n          style={{ pathLength: 0 }}\n        />\n      </svg>\n    </button>\n  )\n}\n\n/* Glow: acikken kutu token isima yayar. */\nexport function GlowCheckbox({\n  className,\n  size = \"md\",\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  ...props\n}: CheckboxProps) {\n  const { on, toggle, spring } = useCheckbox({ checked, defaultChecked, onCheckedChange })\n  return (\n    <button\n      type=\"button\"\n      role=\"checkbox\"\n      aria-checked={on}\n      data-slot=\"styled-checkbox\"\n      onClick={toggle}\n      className={cn(\n        boxBase,\n        boxSize[size],\n        \"rounded-md border transition-all\",\n        on\n          ? \"border-primary bg-primary text-primary-foreground shadow-[0_0_12px_2px_var(--primary)]\"\n          : \"border-field-border text-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <motion.span\n        initial={false}\n        animate={{ scale: on ? 1 : 0, opacity: on ? 1 : 0 }}\n        transition={spring}\n        className=\"flex items-center justify-center\"\n      >\n        <Check className={cn(iconSize[size], \"stroke-[3]\")} />\n      </motion.span>\n    </button>\n  )\n}\n\n/* Rounded: tam yuvarlak kutu, yumusak token dolgusu. */\nexport function RoundedCheckbox({\n  className,\n  size = \"md\",\n  checked,\n  defaultChecked,\n  onCheckedChange,\n  ...props\n}: CheckboxProps) {\n  const { on, toggle, spring } = useCheckbox({ checked, defaultChecked, onCheckedChange })\n  return (\n    <button\n      type=\"button\"\n      role=\"checkbox\"\n      aria-checked={on}\n      data-slot=\"styled-checkbox\"\n      onClick={toggle}\n      className={cn(\n        boxBase,\n        boxSize[size],\n        \"rounded-full border transition-colors\",\n        on ? \"border-success bg-success text-success-foreground\" : \"border-field-border text-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <motion.span\n        initial={false}\n        animate={{ scale: on ? 1 : 0, opacity: on ? 1 : 0 }}\n        transition={spring}\n        className=\"flex items-center justify-center\"\n      >\n        <Check className={cn(iconSize[size], \"stroke-[3]\")} />\n      </motion.span>\n    </button>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/checkbox-styled.tsx"
    }
  ],
  "categories": [
    "styled",
    "checkbox"
  ],
  "type": "registry:component"
}