{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox",
  "type": "registry:ui",
  "title": "Checkbox",
  "description": "Accessible checkbox with indeterminate state for Tile UI.",
  "devDependencies": [
    "sass"
  ],
  "registryDependencies": [
    "@tile-ui/core",
    "@tile-ui/styles"
  ],
  "files": [
    {
      "path": "packages/react/src/components/checkbox/checkbox.tsx",
      "type": "registry:ui",
      "target": "components/ui/checkbox/checkbox.tsx",
      "content": "import React, { useState } from 'react';\nimport { checkboxStyleKeys, getCheckboxState, getNextCheckboxState } from '../lib/core';\nimport type { CheckboxCheckedState } from '../lib/core';\nimport styles from './checkbox.module.scss';\n\nexport interface CheckboxProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'defaultChecked'> {\n\tchecked?: CheckboxCheckedState;\n\tdefaultChecked?: CheckboxCheckedState;\n\tonCheckedChange?: (checked: CheckboxCheckedState) => void;\n}\n\nconst Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(({ className = '', checked, defaultChecked = false, disabled, onCheckedChange, ...props }, ref) => {\n\tconst [internalChecked, setInternalChecked] = useState<CheckboxCheckedState>(defaultChecked);\n\tconst isChecked = checked !== undefined ? checked : internalChecked;\n\tconst state = getCheckboxState(isChecked);\n\n\tfunction handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n\t\tconst next = getNextCheckboxState(isChecked);\n\n\t\tif (checked === undefined) {\n\t\t\tsetInternalChecked(next);\n\t\t}\n\n\t\tonCheckedChange?.(next);\n\t\tprops.onClick?.(event);\n\t}\n\n\tconst ariaChecked = state === 'checked' ? 'true' : state === 'mixed' ? 'mixed' : 'false';\n\n\treturn (\n\t\t<button\n\t\t\tref={ref}\n\t\t\ttype=\"button\"\n\t\t\trole=\"checkbox\"\n\t\t\taria-checked={ariaChecked}\n\t\t\tdata-state={state}\n\t\t\tdisabled={disabled}\n\t\t\tclassName={`${styles[checkboxStyleKeys.root]} ${className}`}\n\t\t\t{...props}\n\t\t\tonClick={handleClick}>\n\t\t\t<span className={styles[checkboxStyleKeys.indicator]}>\n\t\t\t\t{state === 'checked' && (\n\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n\t\t\t\t\t\t<path d=\"M20 6 9 17l-5-5\" />\n\t\t\t\t\t</svg>\n\t\t\t\t)}\n\t\t\t\t{state === 'mixed' && (\n\t\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\">\n\t\t\t\t\t\t<path d=\"M5 12h14\" />\n\t\t\t\t\t</svg>\n\t\t\t\t)}\n\t\t\t</span>\n\t\t</button>\n\t);\n});\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\nexport default Checkbox;\n"
    },
    {
      "path": "packages/styles/scss/components/checkbox.module.scss",
      "type": "registry:file",
      "target": "components/ui/checkbox/checkbox.module.scss",
      "content": "@use '../../../styles/variables/colors' as *;\n\n.root {\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: var(--tile-checkbox-size, 1rem);\n\theight: var(--tile-checkbox-size, 1rem);\n\tborder-radius: var(--tile-checkbox-radius, #{$radius-sm});\n\tborder: var(--tile-checkbox-border-width, 1px) solid var(--tile-checkbox-border, #{$input});\n\tbackground-color: var(--tile-checkbox-background, initial);\n\tbox-shadow: var(--tile-checkbox-shadow, #{$shadow-sm});\n\ttransition:\n\t\tbackground-color $transition-fast,\n\t\tborder-color $transition-fast,\n\t\tbox-shadow $transition-fast;\n\toutline: none;\n\n\t&:focus-visible {\n\t\tborder-color: var(--tile-checkbox-focus-border, #{$ring});\n\t\tbox-shadow: var(--tile-checkbox-focus-shadow, 0 0 0 1px #{$ring});\n\t\toutline: none;\n\t}\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n\n\t&[aria-invalid='true'] {\n\t\tborder-color: $destructive;\n\t\tbox-shadow: var(--tile-checkbox-error-shadow, #{$shadow-sm});\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: var(--tile-checkbox-error-focus-shadow, 0 0 0 1px #{$destructive});\n\t\t}\n\t}\n\n\t&[data-state='checked'],\n\t&[data-state='mixed'] {\n\t\tborder-color: var(--tile-checkbox-checked-border, #{$primary});\n\t\tbackground-color: var(--tile-checkbox-checked-background, #{$primary});\n\t\tcolor: var(--tile-checkbox-checked-color, #{$primary-foreground});\n\t\tbox-shadow: var(--tile-checkbox-checked-shadow, #{$shadow-sm});\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: var(--tile-checkbox-checked-focus-shadow, 0 0 0 1px #{$ring});\n\t\t\toutline: var(--tile-checkbox-checked-focus-outline, none);\n\t\t\toutline-offset: var(--tile-checkbox-checked-focus-offset, 0px);\n\n\t\t\t&[aria-invalid='true'] {\n\t\t\t\tbox-shadow: var(--tile-checkbox-error-focus-shadow, 0 0 0 1px #{$destructive});\n\t\t\t}\n\t\t}\n\t}\n}\n\n.indicator {\n\tdisplay: grid;\n\tplace-content: center;\n\tcolor: currentColor;\n\n\tsvg {\n\t\twidth: var(--tile-checkbox-indicator-size, 0.875rem);\n\t\theight: var(--tile-checkbox-indicator-size, 0.875rem);\n\t}\n}\n"
    },
    {
      "path": "packages/react/src/components/checkbox/index.ts",
      "type": "registry:ui",
      "target": "components/ui/checkbox/index.ts",
      "content": "export { Checkbox, type CheckboxProps } from './checkbox';\n"
    }
  ]
}