{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "title": "Checkbox",
  "description": "A native checkbox with its label.",
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json"
  ],
  "files": [
    {
      "path": "checkbox/Checkbox.css",
      "content": "/* Native checks, radios and switches: forms, keyboard and screen readers work without script. */\n.cr-check {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--cr-space-3);\n  color: var(--cr-color-text-default);\n  font-family: var(--cr-font-family-sans);\n  font-size: var(--cr-font-size-md);\n  line-height: var(--cr-font-line-height-normal);\n  cursor: pointer;\n}\n\n.cr-check:has(input:disabled) {\n  color: var(--cr-color-text-muted);\n  cursor: not-allowed;\n}\n\n.cr-check__input {\n  flex: none;\n  width: 20px;\n  height: 20px;\n  margin: 1px 0 0;\n  accent-color: var(--cr-color-ink-bg);\n  cursor: inherit;\n}\n\n.cr-check__input:focus-visible {\n  outline: var(--cr-focus-width) solid var(--cr-color-focus);\n  outline-offset: var(--cr-focus-offset);\n}\n\n.cr-check__text {\n  display: grid;\n  gap: 2px;\n}\n\n.cr-check__description {\n  color: var(--cr-color-text-muted);\n  font-size: var(--cr-font-size-sm);\n}\n\n/* Switch: a checkbox drawn as a capsule. Ink when on. */\n.cr-switch__input {\n  position: relative;\n  flex: none;\n  width: 52px;\n  height: 32px;\n  margin: 0;\n  border-radius: var(--cr-radius-full);\n  background: var(--cr-color-border-strong);\n  appearance: none;\n  cursor: inherit;\n  transition: background-color var(--cr-motion-duration-base) var(--cr-motion-easing-standard);\n}\n\n.cr-switch__input::before {\n  content: '';\n  position: absolute;\n  top: 3px;\n  left: 3px;\n  width: 26px;\n  height: 26px;\n  border-radius: var(--cr-radius-full);\n  /* White on ink in light; graphite on off-white in dark, so the knob always shows. */\n  background: var(--cr-color-bg-raised);\n  box-shadow: var(--cr-shadow-sm);\n  transition: transform var(--cr-motion-duration-base) var(--cr-motion-easing-spring),\n    width var(--cr-motion-duration-fast) var(--cr-motion-easing-standard);\n}\n\n.cr-switch__input:checked {\n  background: var(--cr-color-ink-bg);\n}\n\n.cr-switch__input:checked::before {\n  transform: translateX(20px);\n}\n\n/* While pressed, the knob stretches toward where it will go. */\n.cr-switch__input:active:not(:disabled)::before {\n  width: 32px;\n}\n\n.cr-switch__input:checked:active:not(:disabled)::before {\n  transform: translateX(14px);\n}\n\n.cr-switch__input:focus-visible {\n  outline: var(--cr-focus-width) solid var(--cr-color-focus);\n  outline-offset: var(--cr-focus-offset);\n}\n\n.cr-switch__input:disabled {\n  opacity: 0.5;\n}\n\n.cr-switch {\n  align-items: center;\n  justify-content: space-between;\n}\n",
      "type": "registry:file",
      "target": "@components/creance/checkbox/Checkbox.css"
    },
    {
      "path": "checkbox/Checkbox.tsx",
      "content": "import { forwardRef, type InputHTMLAttributes, type ReactNode } from 'react';\nimport { cx } from '@/lib/creance/cx';\nimport './Checkbox.css';\n\nexport interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  label: ReactNode;\n  description?: ReactNode;\n}\n\n/** A native checkbox with its label. The whole row is the click target. */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(\n  { label, description, className, ...props },\n  ref,\n) {\n  return (\n    <label className={cx('cr-check', className)}>\n      <input ref={ref} type=\"checkbox\" className=\"cr-check__input\" {...props} />\n      <span className=\"cr-check__text\">\n        {label}\n        {description && <span className=\"cr-check__description\">{description}</span>}\n      </span>\n    </label>\n  );\n});\n",
      "type": "registry:ui",
      "target": "@components/creance/checkbox/Checkbox.tsx"
    }
  ],
  "categories": [
    "atom",
    "forms"
  ],
  "type": "registry:ui"
}