{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox-card",
  "title": "Checkbox Card",
  "description": "A selectable card pairing a checkbox with a title and description — bordered, rounded and brand-tinted when checked, in the Untitled UI checkbox-group idiom.",
  "dependencies": [
    "@base-ui/react@^1.6.0"
  ],
  "registryDependencies": [
    "@nx-ui/utils",
    "@nx-ui/checkbox"
  ],
  "files": [
    {
      "path": "components/ui/checkbox-card.tsx",
      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\n\n/**\n * CheckboxCard — the Untitled UI \"checkbox group\" card: a bordered, rounded\n * card pairing a checkbox with a title and supporting description, tinting and\n * ringing when selected. The whole card is a label, so clicking anywhere\n * toggles the checkbox. Compose titles/descriptions with CheckboxCardTitle and\n * CheckboxCardDescription; group cards (shared value array, select-all\n * parents) with CheckboxGroup from `@/components/ui/checkbox-group`.\n */\nfunction CheckboxCard({\n  className,\n  children,\n  ...props\n}: CheckboxPrimitive.Root.Props & { className?: string }) {\n  return (\n    <label\n      data-slot=\"checkbox-card\"\n      className={cn(\n        \"group/checkbox-card flex w-full cursor-pointer items-start gap-3 rounded-xl border border-border bg-background p-4 text-left shadow-xs transition-colors duration-200\",\n        \"has-data-checked:border-primary/40 has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10\",\n        \"has-focus-visible:border-ring has-focus-visible:ring-4 has-focus-visible:ring-ring/25\",\n        \"has-disabled:cursor-not-allowed has-disabled:border-border has-disabled:bg-bg-secondary/50 has-disabled:opacity-60\",\n        \"has-aria-invalid:border-destructive has-aria-invalid:has-data-checked:bg-destructive/5\",\n        className\n      )}\n    >\n      <Checkbox\n        className=\"mt-0.5 focus-visible:ring-0\"\n        {...props}\n      />\n      <span\n        data-slot=\"checkbox-card-content\"\n        className=\"flex min-w-0 flex-1 flex-col gap-0.5\"\n      >\n        {children}\n      </span>\n    </label>\n  )\n}\n\nfunction CheckboxCardTitle({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"checkbox-card-title\"\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-snug font-medium text-secondary-foreground select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CheckboxCardDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"checkbox-card-description\"\n      className={cn(\n        \"text-sm leading-normal font-normal text-muted-foreground select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { CheckboxCard, CheckboxCardTitle, CheckboxCardDescription }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}