{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox-tone",
  "title": "Tone checkbox",
  "description": "Styled checkbox: the Tone set. 5 decorative checkbox variations (InfoCheckbox, SuccessCheckbox, WarningCheckbox, DangerCheckbox, MutedCheckbox) 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-tone.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/* Tone checkbox family: 5 semantically toned checkboxes (info, success, warning,\n   danger, muted). This is a SEPARATE styled component; the base checkbox's\n   CONTROL tone axis (neutral/brand/success/danger) does not change and is not\n   extended here. Every root carries data-tone. Because the box is under 24px the\n   invisible touch-area extension (after:-inset-1.5) is mandatory in every\n   variant. The label is visible and bound with aria-labelledby; the ids are\n   produced by React.useId(). Color comes ONLY from tokens, via alpha color-mix.\n   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 textSize: Record<StyledSize, string> = {\n  sm: \"text-xs\",\n  md: \"text-sm\",\n  lg: \"text-sm\",\n  xl: \"text-base\",\n}\n\n/* Kutu: kucuk kontrol, dokunma alani uzantisi + focus halkasi + gecerlilik. */\nconst boxBase =\n  \"relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border outline-none transition-colors after:absolute after:-inset-1.5 focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger aria-invalid:ring-danger/20 dark:aria-invalid:ring-danger/40 [&_svg]:shrink-0 [&_i]:leading-none\"\n\nconst rowBase = \"inline-flex items-center gap-2.5\"\n\ntype CheckboxProps = Omit<React.ComponentProps<\"button\">, \"onChange\"> & {\n  size?: StyledSize\n  label?: string\n  checked?: boolean\n  defaultChecked?: boolean\n  onCheckedChange?: (checked: boolean) => void\n}\n\nfunction useCheckbox(props: {\n  checked?: boolean\n  defaultChecked?: boolean\n  onCheckedChange?: (checked: boolean) => void\n}) {\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\" as const, stiffness: 500, damping: 30 }\n  return { on, toggle, spring }\n}\n\n/* Shared shell: box plus a visible label. onClass carries each tone's on appearance. */\nfunction ToneCheckbox({\n  tone,\n  onClass,\n  props,\n}: {\n  tone: string\n  onClass: string\n  props: CheckboxProps\n}) {\n  const {\n    className,\n    size = \"md\",\n    label = \"Tone option\",\n    checked,\n    defaultChecked,\n    onCheckedChange,\n    ...rest\n  } = props\n  const { on, toggle, spring } = useCheckbox({ checked, defaultChecked, onCheckedChange })\n  const labelId = React.useId()\n  return (\n    <span className={rowBase}>\n      <button\n        type=\"button\"\n        role=\"checkbox\"\n        aria-checked={on}\n        aria-labelledby={labelId}\n        data-slot=\"styled-checkbox\"\n        data-tone={tone}\n        onClick={toggle}\n        className={cn(boxBase, boxSize[size], on ? onClass : \"border-field-border text-transparent\", className)}\n        {...rest}\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      <span\n        id={labelId}\n        onClick={toggle}\n        className={cn(textSize[size], \"cursor-pointer select-none font-medium text-foreground\")}\n      >\n        {label}\n      </span>\n    </span>\n  )\n}\n\n/* Info: bilgilendirme tonu. */\nexport function InfoCheckbox(props: CheckboxProps) {\n  return (\n    <ToneCheckbox\n      tone=\"info\"\n      onClass=\"border-info bg-info text-info-foreground\"\n      props={{ label: \"Send me product news\", ...props }}\n    />\n  )\n}\n\n/* Success: onay/olumlu ton. */\nexport function SuccessCheckbox(props: CheckboxProps) {\n  return (\n    <ToneCheckbox\n      tone=\"success\"\n      onClass=\"border-success bg-success text-success-foreground\"\n      props={{ label: \"Task completed\", ...props }}\n    />\n  )\n}\n\n/* Warning: dikkat tonu. */\nexport function WarningCheckbox(props: CheckboxProps) {\n  return (\n    <ToneCheckbox\n      tone=\"warning\"\n      onClass=\"border-warning bg-warning text-warning-foreground\"\n      props={{ label: \"Acknowledge the risk\", ...props }}\n    />\n  )\n}\n\n/* Danger: yikici islem tonu. */\nexport function DangerCheckbox(props: CheckboxProps) {\n  return (\n    <ToneCheckbox\n      tone=\"danger\"\n      onClass=\"border-danger bg-danger text-danger-foreground\"\n      props={{ label: \"Delete on confirm\", ...props }}\n    />\n  )\n}\n\n/* Muted: a quiet/secondary tone, with the marker on a muted surface. */\nexport function MutedCheckbox(props: CheckboxProps) {\n  return (\n    <ToneCheckbox\n      tone=\"muted\"\n      onClass=\"border-muted-foreground bg-muted-foreground text-background\"\n      props={{ label: \"Hide from the list\", ...props }}\n    />\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/checkbox-tone.tsx"
    }
  ],
  "categories": [
    "styled",
    "checkbox"
  ],
  "type": "registry:component"
}