{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "type": "registry:ui",
  "title": "Checkbox",
  "description": "The dimple checkbox: a recessed well that turns into a dark pressed key with a drawn tick; doing (half green) and ghost (an inferred task's hollow ring) states.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/checkbox/checkbox.tsx",
      "type": "registry:ui",
      "target": "components/metalui/checkbox/checkbox.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';\n\n/* ─────────────────────────────────────────────────────────\n * CHECKBOX, the dimple (the reference design's .dimple) on Base UI Checkbox\n *\n *   rest     a recessed well in the margin\n *   hover    the well darkens a step\n *   on       a dark pressed key; the white tick draws on (ease-out, 220 ms after a 40 ms beat)\n *   doing    a half-filled green square (announced as mixed)\n *   ghost    a hollow ring: a task that was inferred, not written; green ring on hover\n *   row      size=\"row\": 14 with radius 5 and a smaller tick, in a list row (in flow, not the margin)\n * Styled with the theme's utilities (the checkbox recipe, its tick and doing drawings).\n * ───────────────────────────────────────────────────────── */\n\nexport interface CheckboxProps extends Omit<BaseCheckbox.Root.Props, 'className' | 'indeterminate'> {\n  /** The task is in progress: a half-filled green square (announced as mixed). */\n  doing?: boolean;\n  /** A task the recognizer inferred and nobody wrote: the hollow ghost dimple, hanging in the margin. */\n  ghost?: boolean;\n  /** margin (16, the default) beside a block; row (14) at the start of a list row. */\n  size?: 'margin' | 'row';\n  className?: string;\n}\n\nconst SLOT = 'mu-dimple-slot inline-flex w-max h-max leading-none';\nconst WELL = 'mu-dimple relative box-border inline-block p-0 border-0 cursor-pointer tap-highlight-none transition-checkbox focus-visible:focus-ring data-disabled:opacity-checkbox-disabled data-disabled:cursor-default data-indeterminate:checkbox-doing';\nconst LOOKS = {\n  margin: 'size-checkbox-size rounded-checkbox-radius recipe-checkbox hover:not-data-checked:recipe-checkbox-hover data-checked:recipe-checkbox-on',\n  row: 'size-checkbox-row-size rounded-checkbox-row-radius recipe-checkbox hover:not-data-checked:recipe-checkbox-hover data-checked:recipe-checkbox-on',\n  ghost: 'size-checkbox-ghost-size rounded-checkbox-ghost-radius recipe-checkbox-ghost hover:recipe-checkbox-ghost-hover',\n};\nconst TICK = {\n  margin: 'mu-dimple-tick checkbox-tick reduced-motion:animate-none',\n  row: 'mu-dimple-tick checkbox-tick checkbox-tick-row reduced-motion:animate-none',\n};\n\n/**\n * A task's checkbox: a 16 pt well in the margin. Checked, it turns dark and the tick draws on.\n * Ticking it is a person's action: the host writes `[x]` into the text, with Undo.\n */\nexport const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(function Checkbox({ doing, ghost, size, className, ...props }, ref) {\n  // The slot carries placement (the margin at −25): Base UI renders a hidden form input beside the\n  // checkbox, and the slot keeps both out of the line's flow.\n  const look = ghost ? LOOKS.ghost : LOOKS[size === 'row' ? 'row' : 'margin'];\n  const tick = TICK[size === 'row' ? 'row' : 'margin'];\n  return (\n    <span className={className ? `${SLOT} ${className}` : SLOT}>\n      <BaseCheckbox.Root ref={ref} indeterminate={doing && !props.checked ? true : undefined} data-ghost={ghost ? '' : undefined} data-size={size === 'row' ? 'row' : undefined} className={`${WELL} ${look}`} {...props}>\n        <BaseCheckbox.Indicator render={(p, state) => (state.checked ? <span {...p} className={tick} /> : <span {...p} hidden />)} />\n      </BaseCheckbox.Root>\n    </span>\n  );\n});\n\n/** The earlier name (kept for existing hosts). */\nexport const Dimple = Checkbox;\nexport type DimpleProps = CheckboxProps;\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/checkbox.md. SwiftUI: MetalCheckbox in the MetalUI Swift package."
}