{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox-glass",
  "type": "registry:ui",
  "title": "Checkbox Glass",
  "description": "Glass-themed checkbox built on Radix UI primitives with:",
  "dependencies": [
    "@radix-ui/react-checkbox",
    "lucide-react",
    "react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "components/glass/ui/checkbox-glass.tsx",
      "type": "registry:component",
      "content": "/**\n * CheckboxGlass Component\n *\n * Glass-themed checkbox built on Radix UI primitives with:\n * - 100% shadcn/ui type compatibility\n * - Theme-aware styling (glass/light/aurora)\n * - Glow effect on hover/focus\n * - Optional label\n *\n * @since v2.2.6 - Migrated to Radix UI primitives for full type compatibility\n */\n\nimport * as React from 'react';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Check, Minus } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport '@/glass-theme.css';\n\n// ========================================\n// TYPES\n// ========================================\n\n/**\n * Checked state type compatible with shadcn/ui (Radix UI)\n */\nexport type CheckedState = boolean | 'indeterminate';\n\n/**\n * Props for the CheckboxGlass component\n *\n * Extends Radix UI Checkbox.Root props for 100% shadcn/ui compatibility.\n * All Radix props are supported including: checked, defaultChecked, onCheckedChange,\n * disabled, required, name, value, etc.\n *\n * **Type Compatibility (v2.3.1+):**\n * - Extends `React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>`\n * - No more `as unknown as` type assertions needed\n * - Full IntelliSense for all Radix props\n *\n * @accessibility\n * - **Keyboard Navigation:** Space to toggle (WCAG 2.1.1)\n * - **Focus Management:** Visible focus ring using `--focus-glow` CSS variable (WCAG 2.4.7)\n * - **Screen Readers:** Radix UI handles ARIA attributes automatically\n * - **Touch Targets:** 44x44px minimum touch area per Apple HIG (WCAG 2.5.5)\n * - **Color Contrast:** Check mark and backgrounds meet WCAG AA contrast ratio 4.5:1\n *\n * @example\n * ```tsx\n * // shadcn/ui compatible API\n * <CheckboxGlass\n *   checked={isChecked}\n *   onCheckedChange={(checked) => setIsChecked(checked === true)}\n * />\n *\n * // Indeterminate state (tri-state checkbox)\n * <CheckboxGlass\n *   checked={allSelected ? true : someSelected ? 'indeterminate' : false}\n *   onCheckedChange={(checked) => {\n *     if (checked === true) selectAll();\n *     else deselectAll();\n *   }}\n *   label=\"Select all\"\n * />\n *\n * // Legacy API (still supported)\n * <CheckboxGlass checked={agreed} onChange={setAgreed} label=\"I agree to terms\" />\n * ```\n *\n * @since v2.3.0 - Added shadcn/ui compatible `onCheckedChange` and `indeterminate` support\n * @since v2.2.6 - Migrated to Radix UI primitives for full type compatibility\n */\nexport interface CheckboxGlassProps extends Omit<\n  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,\n  'onChange'\n> {\n  /**\n   * @deprecated Use `onCheckedChange` instead. Will be removed in v4.0.\n   * Legacy callback for backwards compatibility.\n   */\n  readonly onChange?: (checked: boolean) => void;\n  /** Optional label text (Glass UI extension) */\n  readonly label?: string;\n  /**\n   * className for the wrapper label element.\n   * Use this for spacing, layout, or wrapper-specific styling.\n   * Note: `className` applies to the checkbox root element (shadcn/ui pattern).\n   * @since v2.6.0\n   */\n  readonly wrapperClassName?: string;\n}\n\n// ========================================\n// COMPONENT\n// ========================================\n\nexport const CheckboxGlass = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  CheckboxGlassProps\n>(\n  (\n    { className, label, wrapperClassName, onChange, onCheckedChange, disabled, checked, ...props },\n    ref\n  ) => {\n    // Wrapper for legacy onChange callback\n    const handleCheckedChange = React.useCallback(\n      (newChecked: CheckedState) => {\n        onCheckedChange?.(newChecked);\n        // Legacy support (deprecated)\n        if (onChange && typeof newChecked === 'boolean') {\n          onChange(newChecked);\n        }\n      },\n      [onCheckedChange, onChange]\n    );\n\n    // Determine visual states\n    const isIndeterminate = checked === 'indeterminate';\n    const isChecked = checked === true;\n    const showIndicator = isChecked || isIndeterminate;\n\n    // Inline styles for CSS variables (matches original implementation)\n    const checkboxStyles: React.CSSProperties = {\n      background: showIndicator ? 'var(--checkbox-checked-bg)' : 'var(--checkbox-bg)',\n      borderColor: showIndicator ? 'var(--checkbox-checked-bg)' : 'var(--checkbox-border)',\n    };\n\n    return (\n      <label\n        className={cn(\n          'inline-flex items-center gap-2 md:gap-2.5',\n          disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',\n          wrapperClassName\n        )}\n      >\n        {/* Touch area wrapper - 44px minimum for Apple HIG compliance */}\n        <span className=\"inline-flex items-center justify-center min-w-11 min-h-11\">\n          <CheckboxPrimitive.Root\n            ref={ref}\n            data-slot=\"checkbox\"\n            checked={checked}\n            onCheckedChange={handleCheckedChange}\n            disabled={disabled}\n            className={cn(\n              'peer relative w-6 h-6 md:w-5 md:h-5 shrink-0',\n              'rounded-md border-2 transition-all duration-300',\n              'flex items-center justify-center',\n              // Focus state\n              'focus-visible:outline-none focus-visible:shadow-(--focus-glow)',\n              // Hover state\n              'hover:shadow-(--checkbox-glow)',\n              // Disabled state\n              'disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:shadow-none',\n              className\n            )}\n            style={checkboxStyles}\n            {...props}\n          >\n            <CheckboxPrimitive.Indicator\n              data-slot=\"checkbox-indicator\"\n              className=\"flex items-center justify-center text-current\"\n            >\n              {isIndeterminate ? (\n                <Minus\n                  className=\"w-3.5 h-3.5 md:w-3 md:h-3\"\n                  style={{ color: 'var(--text-inverse)' }}\n                />\n              ) : (\n                <Check\n                  className=\"w-3.5 h-3.5 md:w-3 md:h-3\"\n                  style={{ color: 'var(--text-inverse)' }}\n                />\n              )}\n            </CheckboxPrimitive.Indicator>\n          </CheckboxPrimitive.Root>\n        </span>\n        {label && (\n          <span className=\"text-xs md:text-sm\" style={{ color: 'var(--text-secondary)' }}>\n            {label}\n          </span>\n        )}\n      </label>\n    );\n  }\n);\n\nCheckboxGlass.displayName = 'CheckboxGlass';\n\n/**\n * Checkbox - shadcn/ui compatible alias for CheckboxGlass\n *\n * @example\n * ```tsx\n * import { Checkbox } from 'shadcn-glass-ui'\n *\n * <Checkbox\n *   checked={isChecked}\n *   onCheckedChange={(checked) => setIsChecked(checked === true)}\n * />\n * ```\n *\n * @since v2.3.0\n */\nexport const Checkbox = CheckboxGlass;\n"
    }
  ],
  "categories": [
    "ui"
  ],
  "cssVars": {
    "light": {
      "--glass-bg": "rgba(255, 255, 255, 0.1)",
      "--glass-border": "rgba(255, 255, 255, 0.2)",
      "--blur-sm": "8px",
      "--blur-md": "16px",
      "--blur-lg": "24px"
    },
    "dark": {
      "--glass-bg": "rgba(255, 255, 255, 0.05)",
      "--glass-border": "rgba(255, 255, 255, 0.1)",
      "--blur-sm": "8px",
      "--blur-md": "16px",
      "--blur-lg": "24px"
    }
  }
}