{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "latch-checkbox",
  "title": "Latch checkbox",
  "description": "A checkbox as a latching push-key. Press it and it sinks and stays down with its mark lit amber; press again and it springs back up. Mixed holds it half-down with a dash. Small enough for lists and table rows.",
  "dependencies": [
    "@base-ui/react",
    "cn"
  ],
  "registryDependencies": [
    "https://bevel-ui.vercel.app/r/bevel.json",
    "https://bevel-ui.vercel.app/r/feedback.json"
  ],
  "files": [
    {
      "path": "registry/bevel/ui/latch-checkbox.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\nimport { CheckboxGroup } from \"@base-ui/react/checkbox-group\"\nimport { Field } from \"@base-ui/react/field\"\nimport { cn } from \"cn\"\nimport { useBevelFeedback } from \"@/lib/feedback\"\n\n/**\n * A checkbox as a latching push-key. Press it and it sinks and stays down\n * with its mark lit; press again and it springs back up. Mixed sits the key\n * half-down with a dash. A Base UI Checkbox: Space toggles it.\n */\nfunction LatchCheckbox({ className, onCheckedChange, ...props }: CheckboxPrimitive.Root.Props) {\n  const feedback = useBevelFeedback()\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"latch-checkbox\"\n      onCheckedChange={(checked, details) => {\n        feedback.click()\n        onCheckedChange?.(checked, details)\n      }}\n      className={cn(\n        \"group/latch bevel-recessed inline-flex size-(--latch-checkbox-size) shrink-0 cursor-pointer items-start justify-center rounded-(--bevel-radius-xs) pt-px\",\n        \"outline-none focus-visible:ring-2 focus-visible:ring-(--latch-checkbox-focus) focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n        \"data-disabled:cursor-not-allowed data-disabled:opacity-60\",\n        \"in-data-[slot=latch-checkbox-field]:row-span-2 in-data-[slot=latch-checkbox-field]:mt-px\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        aria-hidden\n        data-slot=\"latch-checkbox-cap\"\n        className={cn(\n          \"bevel-raised grid size-(--latch-checkbox-cap) place-items-center rounded-(--latch-checkbox-cap-radius)\",\n          // Released: springs back up. Pressed: goes down fast and latches.\n          \"transition-[translate] duration-(--bevel-duration-move) ease-(--bevel-ease-spring) motion-reduce:transition-none\",\n          \"group-data-checked/latch:bevel-pressed group-data-checked/latch:translate-y-(--latch-checkbox-travel) group-data-checked/latch:duration-(--bevel-duration-press) group-data-checked/latch:ease-(--bevel-ease-out)\",\n          \"group-data-indeterminate/latch:translate-y-(--latch-checkbox-half) group-data-indeterminate/latch:duration-(--bevel-duration-press) group-data-indeterminate/latch:ease-(--bevel-ease-out)\"\n        )}\n      >\n        <CheckboxPrimitive.Indicator\n          keepMounted\n          data-slot=\"latch-checkbox-mark\"\n          className=\"latch-checkbox-mark grid size-full place-items-center opacity-0 transition-opacity duration-(--bevel-duration-small) ease-(--bevel-ease-out) data-checked:opacity-100 data-indeterminate:opacity-100 motion-reduce:transition-none\"\n        >\n          <svg viewBox=\"0 0 12 12\" fill=\"none\" className=\"size-(--latch-checkbox-glyph) group-data-indeterminate/latch:hidden\">\n            <path d=\"M2.5 6.25 5 8.75l4.5-5.5\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          </svg>\n          <svg viewBox=\"0 0 12 12\" fill=\"none\" className=\"hidden size-(--latch-checkbox-glyph) group-data-indeterminate/latch:block\">\n            <path d=\"M3 6h6\" stroke=\"currentColor\" strokeWidth=\"1.75\" strokeLinecap=\"round\" />\n          </svg>\n        </CheckboxPrimitive.Indicator>\n      </span>\n    </CheckboxPrimitive.Root>\n  )\n}\n\n/**\n * One checkbox with its label and an optional description: the key on the\n * left, the words beside it. Base UI Field, so clicking the label presses\n * the key and the description is announced with it.\n */\nfunction LatchCheckboxField({ className, ...props }: Field.Root.Props) {\n  return (\n    <Field.Root\n      data-slot=\"latch-checkbox-field\"\n      className={cn(\"grid grid-cols-[auto_minmax(0,1fr)] items-start gap-x-2.5 gap-y-0.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction LatchCheckboxLabel({ className, ...props }: Field.Label.Props) {\n  return (\n    <Field.Label\n      data-slot=\"latch-checkbox-label\"\n      className={cn(\"col-start-2 text-sm leading-(--latch-checkbox-size) font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction LatchCheckboxDescription({ className, ...props }: Field.Description.Props) {\n  return (\n    <Field.Description\n      data-slot=\"latch-checkbox-description\"\n      className={cn(\"col-start-2 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * A set of checkboxes sharing one value: the values that are down. Name it\n * with aria-labelledby. A LatchCheckbox with parent toggles them all and\n * shows mixed when some are down (pass allValues).\n */\nfunction LatchCheckboxGroup({ className, ...props }: CheckboxGroup.Props) {\n  return <CheckboxGroup data-slot=\"latch-checkbox-group\" className={cn(\"flex flex-col gap-2.5\", className)} {...props} />\n}\n\nexport { LatchCheckbox, LatchCheckboxField, LatchCheckboxLabel, LatchCheckboxDescription, LatchCheckboxGroup }\n",
      "type": "registry:ui"
    }
  ],
  "css": {
    ":root": {
      "--latch-checkbox-collar": "oklch(0.86 0.004 260)",
      "--latch-checkbox-cap-face": "oklch(0.985 0.004 90)",
      "--latch-checkbox-cap-edge": "oklch(0.74 0.008 90)",
      "--latch-checkbox-lit": "oklch(0.7 0.16 62)",
      "--latch-checkbox-glow": "drop-shadow(0 0 2px oklch(0.78 0.16 68 / 0.75))",
      "--latch-checkbox-focus": "oklch(0.76 0.15 68)",
      "--latch-checkbox-shade": "oklch(0 0 0 / 0.28)",
      "--latch-checkbox-size": "1.25rem",
      "--latch-checkbox-cap": "1rem",
      "--latch-checkbox-cap-radius": "0.125rem",
      "--latch-checkbox-glyph": "0.75rem",
      "--latch-checkbox-travel": "0.125rem",
      "--latch-checkbox-half": "0.0625rem"
    },
    ".dark": {
      "--latch-checkbox-collar": "oklch(0.15 0.005 260)",
      "--latch-checkbox-cap-face": "oklch(0.36 0.006 260)",
      "--latch-checkbox-cap-edge": "oklch(0.22 0.006 260)",
      "--latch-checkbox-lit": "oklch(0.8 0.16 72)",
      "--latch-checkbox-shade": "oklch(0 0 0 / 0.7)"
    },
    "[data-slot=\"latch-checkbox\"]": {
      "--bevel-material-recess": "var(--latch-checkbox-collar)",
      "--bevel-shade-strong": "var(--latch-checkbox-shade)"
    },
    "[data-slot=\"latch-checkbox-cap\"]": {
      "--bevel-material": "var(--latch-checkbox-cap-face)",
      "--bevel-material-edge": "var(--latch-checkbox-cap-edge)"
    },
    "@utility latch-checkbox-mark": {
      "color": "var(--latch-checkbox-lit)",
      "filter": "var(--latch-checkbox-glow)"
    },
    "@media (forced-colors: active)": {
      "[data-slot=\"latch-checkbox\"]": {
        "border": "1px solid CanvasText"
      },
      "[data-slot=\"latch-checkbox-mark\"]": {
        "color": "Highlight",
        "filter": "none"
      }
    }
  },
  "categories": [
    "essentials"
  ],
  "type": "registry:ui"
}