{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "masai-checkbox",
  "title": "Masai Checkbox",
  "description": "Standalone checkbox with default and default-with-label variants in regular/large sizes.",
  "dependencies": [
    "@radix-ui/react-checkbox",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/components/masai-checkbox.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { Check } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\ntype MasaiCheckboxSize = \"regular\" | \"large\";\n\nexport type MasaiCheckboxProps = {\n  size?: MasaiCheckboxSize;\n  isSelected?: boolean;\n  disabled?: boolean;\n  label?: string;\n  description?: string;\n  onSelect?: (selected: boolean) => void;\n  className?: string;\n};\n\nconst checkboxSizeClasses: Record<MasaiCheckboxSize, { root: string; icon: string }> = {\n  regular: { root: \"h-[18px] w-[18px] rounded-[2px]\", icon: \"h-3 w-3\" },\n  large: { root: \"h-[18px] w-[18px] rounded-[2px]\", icon: \"h-3.5 w-3.5\" },\n};\n\nexport function MasaiCheckbox({\n  size = \"regular\",\n  isSelected = false,\n  disabled = false,\n  label,\n  description,\n  onSelect,\n  className,\n}: MasaiCheckboxProps) {\n  const { root, icon } = checkboxSizeClasses[size];\n  const labelClassName = size === \"large\" ? \"type-b1-regular text-gray-900\" : \"type-b2-regular text-gray-900\";\n\n  return (\n    <label\n      className={cn(\n        \"inline-flex items-start gap-2\",\n        disabled ? \"cursor-not-allowed opacity-60\" : \"cursor-pointer\",\n        className,\n      )}\n    >\n      <CheckboxPrimitive.Root\n        checked={isSelected}\n        onCheckedChange={(next) => onSelect?.(next === true)}\n        disabled={disabled}\n        className={cn(\n          \"flex items-center justify-center border border-gray-500 bg-white text-white outline-none transition-colors focus-visible:ring-2 focus-visible:ring-primary-400 data-[state=checked]:bg-primary-500 data-[state=checked]:border-gray-500 disabled:data-[state=checked]:bg-primary-300\",\n          root,\n        )}\n      >\n        <CheckboxPrimitive.Indicator>\n          <Check className={icon} />\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n      {label || description ? (\n        <span className=\"flex flex-col\">\n          {label ? <span className={labelClassName}>{label}</span> : null}\n          {description ? <span className=\"type-caption text-gray-700\">{description}</span> : null}\n        </span>\n      ) : null}\n    </label>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}