{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "masai-checkbox-group",
  "title": "Masai Checkbox Group",
  "description": "Composed checkbox group built with Radix; includes standalone Masai checkbox component on install.",
  "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"
    },
    {
      "path": "registry/components/masai-checkbox-group.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { MasaiCheckbox } from \"@/registry/components/masai-checkbox\";\n\ntype MasaiCheckboxGroupSize = \"regular\" | \"large\";\n\nexport type MasaiCheckboxOption = {\n  value: string;\n  label?: string;\n  description?: string;\n  disabled?: boolean;\n};\n\nexport type MasaiCheckboxGroupOrientation = \"vertical\" | \"horizontal\";\n\nexport type MasaiCheckboxGroupProps = {\n  size?: MasaiCheckboxGroupSize;\n  values: string[];\n  onValueChange: (values: string[]) => void;\n  options: MasaiCheckboxOption[];\n  /** Default stacking; overridden by `className` when using `grid`/other display (tailwind-merge). */\n  orientation?: MasaiCheckboxGroupOrientation;\n} & Omit<React.ComponentPropsWithoutRef<\"div\">, \"children\">;\n\nconst orientationLayoutClasses: Record<MasaiCheckboxGroupOrientation, string> = {\n  vertical: \"flex flex-col gap-3\",\n  horizontal: \"flex flex-row flex-wrap items-start gap-x-6 gap-y-3\",\n};\n\nexport function MasaiCheckboxGroup({\n  size = \"regular\",\n  values,\n  onValueChange,\n  options,\n  orientation = \"vertical\",\n  className,\n  ...divProps\n}: MasaiCheckboxGroupProps) {\n  return (\n    <div className={cn(orientationLayoutClasses[orientation], className)} {...divProps}>\n      {options.map((option) => {\n        const checked = values.includes(option.value);\n        return (\n          <MasaiCheckbox\n            key={option.value}\n            size={size}\n            isSelected={checked}\n            disabled={option.disabled}\n            label={option.label ?? option.value}\n            description={option.description}\n            onSelect={(shouldCheck) => {\n              if (shouldCheck) {\n                onValueChange(Array.from(new Set([...values, option.value])));\n              } else {\n                onValueChange(values.filter((v) => v !== option.value));\n              }\n            }}\n          />\n        );\n      })}\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}