{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"checkbox","title":"Checkbox","description":"Base UI-backed Boolean form choice.","dependencies":["@base-ui/react@1.7.0","class-variance-authority@0.7.1"],"registryDependencies":["@siteplane/base"],"files":[{"path":"packages/ui/src/components/checkbox/checkbox.tsx","content":"\"use client\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { cva } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nimport {\n  type SiteplaneControlSize,\n  useResolvedControlSize,\n} from \"../../system/provider/siteplane-ui-provider\";\nimport {\n  ChoiceMenuItemCheck,\n  choiceMenuItemCheckGridClassName,\n  choiceMenuItemClassName,\n  choiceMenuItemLabelClassName,\n} from \"../../system/styles/choice-menu-item\";\nimport { CheckboxGlyph } from \"../../system/styles/checkbox-glyph\";\nimport { cn, type WithStringClassName } from \"../../system/utils/cn\";\nimport { baseClass, slotClass } from \"../../system/utils/slot-class\";\nimport type { KitCheckboxProps } from \"./checkbox-internal\";\n\nimport \"./checkbox.css\";\n\n// The look and the size come from checkbox.css through the attributes the\n// Checkbox renders (data-size), so the helper takes no size.\nexport const checkboxVariants = cva(\n  \"sp-checkbox-motion relative inline-flex shrink-0 cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] data-disabled:cursor-not-allowed\",\n);\n\nexport const CheckboxSizeContext =\n  React.createContext<SiteplaneControlSize | null>(null);\n\nexport interface CheckboxProps extends Omit<\n  WithStringClassName<CheckboxPrimitive.Root.Props>,\n  \"size\"\n> {\n  size?: SiteplaneControlSize;\n}\n\nexport function Checkbox(checkboxProps: CheckboxProps): React.ReactElement {\n  // Menu and drawer rows pass the internal menu-item profile through\n  // KitCheckbox (checkbox-internal.ts), the same function.\n  const {\n    children,\n    className,\n    profile = \"control\",\n    size,\n    ...props\n  } = checkboxProps as KitCheckboxProps;\n  const groupSize = React.useContext(CheckboxSizeContext);\n  const resolvedSize = useResolvedControlSize(size ?? groupSize);\n\n  return (\n    <CheckboxPrimitive.Root\n      className={cn(\n        slotClass(\"checkbox\", props),\n        baseClass(\"checkbox\", props),\n        profile === \"menu-item\"\n          ? cn(choiceMenuItemClassName, choiceMenuItemCheckGridClassName)\n          : checkboxVariants(),\n        className,\n      )}\n      data-foundation=\"checkbox\"\n      data-profile={profile}\n      data-size={resolvedSize}\n      data-slot=\"checkbox\"\n      {...props}\n    >\n      {profile === \"menu-item\" ? (\n        <>\n          <CheckboxPrimitive.Indicator\n            className=\"sp-checkbox-indicator col-start-1\"\n            data-slot=\"checkbox-indicator\"\n            keepMounted\n          >\n            <ChoiceMenuItemCheck />\n          </CheckboxPrimitive.Indicator>\n          <span className={choiceMenuItemLabelClassName}>{children}</span>\n        </>\n      ) : (\n        <CheckboxPrimitive.Indicator\n          className=\"sp-checkbox-indicator pointer-events-none absolute flex items-center justify-center\"\n          data-slot=\"checkbox-indicator\"\n          render={(props: React.ComponentProps<\"span\">) => (\n            <span {...props}>\n              <CheckboxGlyph size={resolvedSize} />\n            </span>\n          )}\n        />\n      )}\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { CheckboxPrimitive };\n","type":"registry:ui","target":"~/src/siteplane/components/checkbox/checkbox.tsx"},{"path":"packages/ui/src/components/checkbox/checkbox-internal.ts","content":"import type * as React from \"react\";\n\nimport { Checkbox, type CheckboxProps } from \"./checkbox\";\n\n/*\n * Kit-internal Checkbox. Not public API: the checkbox index does not export\n * this module, and its names and profiles may change in any release. Menu and\n * Drawer checkbox rows render a Checkbox with the menu-item profile.\n */\nexport type CheckboxProfile = \"control\" | \"menu-item\";\n\nexport type KitCheckboxProps = CheckboxProps & { profile?: CheckboxProfile };\n\n/** Checkbox with the kit's composition profile; the same component. */\nexport const KitCheckbox = Checkbox as (\n  props: KitCheckboxProps,\n) => React.ReactElement;\n","type":"registry:ui","target":"~/src/siteplane/components/checkbox/checkbox-internal.ts"},{"path":"packages/ui/src/components/checkbox/checkbox.css","content":"@layer theme, base, components, siteplane, utilities;\n\n@layer components {\n  .sp-checkbox-motion {\n    color: var(--color-neutral-800);\n  }\n\n  .dark .sp-checkbox-motion,\n  [data-theme=\"dark\"] .sp-checkbox-motion {\n    color: rgb(242 242 243);\n  }\n\n  .sp-checkbox-motion .sp-checkbox-indicator {\n    background-color: transparent;\n    opacity: 0;\n    transform: scale(var(--motion-check-pop-scale));\n    transform-origin: center;\n    transition-duration: var(--motion-duration-slow);\n    transition-property: background-color, opacity, transform;\n    transition-timing-function: var(--motion-ease-standard);\n  }\n\n  .sp-checkbox-motion .sp-checkbox-indicator[data-checked],\n  .sp-checkbox-motion .sp-checkbox-indicator[data-indeterminate] {\n    background-color: var(--sp-semantic-color-primary);\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  .sp-checkbox-motion .sp-checkbox-indicator[data-starting-style],\n  .sp-checkbox-motion .sp-checkbox-indicator[data-ending-style] {\n    background-color: transparent;\n    opacity: 0;\n    transform: scale(var(--motion-check-pop-scale));\n  }\n\n  /* A checked indicator lingers on its way out, as the Radio's does. */\n  .sp-checkbox-motion .sp-checkbox-indicator[data-ending-style] {\n    transition-duration: var(--motion-duration-linger);\n  }\n\n  /* Rulebook I5: a checkbox before text centres on the first text line, also\n   * when the text wraps. That is a checkbox that leads a label or a row in a\n   * label, or that stands before a label, as in a row with a description. A\n   * checkbox taller than the line starts at the line's top, so a one-line label\n   * keeps its height. A component rule, so a margin utility on the checkbox\n   * still replaces it. */\n  :where(label, .sp-label, .sp-field-label)\n    > .sp-base-checkbox[data-profile=\"control\"]:first-child,\n  :where(label, .sp-label, .sp-field-label)\n    > :where(span, div)\n    > .sp-base-checkbox[data-profile=\"control\"]:first-child,\n  .sp-base-checkbox[data-profile=\"control\"]:first-child:has(\n      ~ :is(.sp-label, .sp-field-label),\n      ~ * :is(.sp-label, .sp-field-label)\n    ) {\n    align-self: flex-start;\n    margin-block: max(0px, calc((1lh - var(--sp-rw-choice-size)) / 2));\n  }\n\n  /* Beside its label, the checkbox does not inherit the label's line but its\n   * container's. It takes the 21 px line of a label next to a choice control\n   * (S13), so the 1lh above measures the label's first line. */\n  .sp-base-checkbox[data-profile=\"control\"]:first-child:has(\n      ~ :is(.sp-label, .sp-field-label),\n      ~ * :is(.sp-label, .sp-field-label)\n    ) {\n    line-height: var(--sp-rw-line-21);\n  }\n\n  /* The check and the indeterminate dash draw through the shared check motion\n   * in motion.css, which the check of a menu row uses too. */\n\n  /* Reduced motion is instant in the three channels the kit has: the forced\n   * document mode, the provider preset and the system setting. The system rule\n   * leads with :root so the state rules above, which are as specific as the\n   * indicator selector plus one attribute, do not outrank it. */\n  html[data-motion-reduce=\"true\"] .sp-checkbox-motion .sp-checkbox-indicator,\n  [data-sp-motion=\"reduced\"] .sp-checkbox-motion .sp-checkbox-indicator {\n    animation: none;\n    transform: none;\n    transition-duration: 1ms;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    :root .sp-checkbox-motion .sp-checkbox-indicator {\n      animation: none;\n      transform: none;\n      transition-duration: 1ms;\n    }\n  }\n}\n","type":"registry:ui","target":"~/src/siteplane/components/checkbox/checkbox.css"},{"path":"packages/ui/src/components/checkbox/index.ts","content":"export * from \"./checkbox\";\n","type":"registry:ui","target":"~/src/siteplane/components/checkbox/index.ts"}],"type":"registry:ui","docs":"https://ui.siteplane.io/docs-markdown/components/checkbox.md","categories":["Forms & selection"],"meta":{"avoidWhen":["Avoid for several related choices; use Checkbox Group.","Avoid for exactly one choice from a set; use Radio Group.","Avoid for a setting that applies at once; use Switch."],"description":"Base UI-backed Boolean form choice.","knownLimitations":[],"providerNotes":[],"releaseStatus":"stable","searchTerms":["checkbox"],"useWhen":["Use for an independent yes-or-no choice, such as accepting terms or selecting a row."]}}