{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "title": "checkbox",
  "description": "A square on/off box, such as one optional purpose in a list. The edge has the input's 3:1 contrast; checked, it fills with the primary colour; checked=\"indeterminate\" shows a minus for a mixed state. md is 16px, lg 20px for a settings row.",
  "dependencies": [
    "@radix-ui/react-checkbox",
    "class-variance-authority@^0.7"
  ],
  "registryDependencies": [
    "@dwellir/dwellir-theme",
    "@dwellir/utils",
    "@dwellir/rune-icons"
  ],
  "files": [
    {
      "path": "components/ui/checkbox.tsx",
      "content": "'use client';\n\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { ComponentProps } from 'react';\nimport { RuneCheck, RuneMinus } from '@/components/brand/rune-icons';\nimport { cn } from '@/lib/utils';\n\n/*\n * An on/off choice, such as one optional purpose in a list. Its edge is its\n * only cue, so it takes the strong 3:1 edge (WCAG 1.4.11), not the calm field\n * edge. checked=\"indeterminate\" shows the mixed state, such as a select-all\n * box with some rows picked. A finger gets a 44px tap: beside its label it\n * covers part of the label, which toggles it too.\n */\nconst checkboxVariants = cva(\n  'peer checkbox-touch grid shrink-0 cursor-pointer place-content-center rounded-sm border border-input-strong bg-transparent text-primary-foreground transition-[border-color,background-color] duration-200 outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:outline-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=unchecked]:hover:border-muted-foreground',\n  {\n    variants: {\n      size: {\n        md: 'size-4 [&_svg]:size-3.5',\n        /* A settings row with a line of explanation, such as the cookie preferences. */\n        lg: 'size-5 [&_svg]:size-4',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n);\n\nfunction Checkbox({\n  className,\n  size,\n  ...props\n}: ComponentProps<typeof CheckboxPrimitive.Root> & VariantProps<typeof checkboxVariants>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(checkboxVariants({ size }), className)}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none\"\n      >\n        <RuneCheck size={24} aria-hidden=\"true\" className=\"in-data-[state=indeterminate]:hidden\" />\n        <RuneMinus\n          size={24}\n          aria-hidden=\"true\"\n          className=\"hidden in-data-[state=indeterminate]:block\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox, checkboxVariants };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}