{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox-group",
  "title": "Checkbox Group",
  "description": "Group of related checkboxes backed by an array of selected values.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/checkbox-group/checkbox-group.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\nimport { Checkbox } from \"@vllnt/ui\";\nimport { Label } from \"@vllnt/ui\";\n\ntype CheckboxGroupContextValue = {\n  disabled: boolean;\n  name?: string;\n  toggle: (value: string) => void;\n  values: string[];\n};\n\nconst CheckboxGroupContext =\n  React.createContext<CheckboxGroupContextValue | null>(null);\n\nfunction useCheckboxGroupContext(): CheckboxGroupContextValue {\n  const context = React.use(CheckboxGroupContext);\n  if (!context) {\n    throw new Error(\"CheckboxGroupItem must be used within a CheckboxGroup\");\n  }\n  return context;\n}\n\nfunction useCheckboxGroupValue(\n  value: string[] | undefined,\n  defaultValue: string[],\n  onValueChange?: (value: string[]) => void,\n) {\n  const [internalValue, setInternalValue] = React.useState(defaultValue);\n  const values = value ?? internalValue;\n\n  const toggle = React.useCallback(\n    (item: string) => {\n      const nextValues = values.includes(item)\n        ? values.filter((entry) => entry !== item)\n        : [...values, item];\n\n      if (value === undefined) {\n        setInternalValue(nextValues);\n      }\n\n      onValueChange?.(nextValues);\n    },\n    [onValueChange, value, values],\n  );\n\n  return { toggle, values };\n}\n\n/** Group of related checkboxes backed by an array of selected values. */\nexport type CheckboxGroupProps = {\n  children: React.ReactNode;\n  className?: string;\n  defaultValue?: string[];\n  disabled?: boolean;\n  name?: string;\n  onValueChange?: (value: string[]) => void;\n  orientation?: \"horizontal\" | \"vertical\";\n  value?: string[];\n};\n\nconst CheckboxGroup = ({\n  children,\n  className,\n  defaultValue = [],\n  disabled = false,\n  name,\n  onValueChange,\n  orientation = \"vertical\",\n  ref,\n  value,\n}: CheckboxGroupProps & { ref?: React.Ref<HTMLDivElement> }) => {\n  const { toggle, values } = useCheckboxGroupValue(\n    value,\n    defaultValue,\n    onValueChange,\n  );\n  const context = React.useMemo<CheckboxGroupContextValue>(\n    () => ({ disabled, name, toggle, values }),\n    [disabled, name, toggle, values],\n  );\n\n  return (\n    <CheckboxGroupContext.Provider value={context}>\n      <div\n        className={cn(\n          \"flex gap-3\",\n          orientation === \"vertical\" ? \"flex-col\" : \"flex-row flex-wrap\",\n          className,\n        )}\n        ref={ref}\n        role=\"group\"\n      >\n        {children}\n      </div>\n    </CheckboxGroupContext.Provider>\n  );\n};\nCheckboxGroup.displayName = \"CheckboxGroup\";\n\n/** Single checkbox plus label wired into the parent CheckboxGroup. */\nexport type CheckboxGroupItemProps = {\n  children?: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  id?: string;\n  value: string;\n};\n\nconst CheckboxGroupItem = ({\n  children,\n  className,\n  disabled = false,\n  id,\n  ref,\n  value,\n}: CheckboxGroupItemProps & { ref?: React.Ref<HTMLDivElement> }) => {\n  const generatedId = React.useId();\n  const itemId = id ?? generatedId;\n  const group = useCheckboxGroupContext();\n  const checked = group.values.includes(value);\n\n  return (\n    <div className={cn(\"flex items-center gap-2\", className)} ref={ref}>\n      <Checkbox\n        checked={checked}\n        disabled={disabled || group.disabled}\n        id={itemId}\n        name={group.name}\n        onCheckedChange={() => {\n          group.toggle(value);\n        }}\n        value={value}\n      />\n      {children ? <Label htmlFor={itemId}>{children}</Label> : null}\n    </div>\n  );\n};\nCheckboxGroupItem.displayName = \"CheckboxGroupItem\";\n\nexport { CheckboxGroup, CheckboxGroupItem };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}