{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "type": "registry:ui",
  "title": "Card",
  "description": "Content surface for panels, tiles, and settings groups.",
  "dependencies": [],
  "registryDependencies": [
    "https://control-ui.dev/r/core.json"
  ],
  "files": [
    {
      "path": "src/registry/knob-contracts/card-knobs.ts",
      "target": "@components/control-ui/knob-contracts/card-knobs.ts",
      "type": "registry:component",
      "content": "// Generated from src/registry/sources/control-ui/recipes/card.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const cardKnobs = [\n  \"--cui-card-radius\",\n  \"--cui-card-background\",\n  \"--cui-card-border-color\",\n  \"--cui-card-border-width\",\n  \"--cui-card-shadow\",\n  \"--cui-card-backdrop-filter\",\n] as const;\nexport type CardKnobStyle = Partial<Record<(typeof cardKnobs)[number], string>>;\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/card.css",
      "target": "@components/control-ui/styles/recipes/card.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"card\"][data-slot=\"root\"]) {\n    --cui-card-radius: var(--radius-lg);\n    --cui-card-background: var(--card);\n    --cui-card-border-color: var(--border);\n    --cui-card-border-width: 1px;\n    --cui-card-shadow: var(--shadow-sm);\n    --cui-card-backdrop-filter: none;\n    border: var(--cui-card-border-width) solid var(--cui-card-border-color);\n    border-radius: var(--cui-card-radius);\n    background: var(--cui-card-background);\n    color: var(--card-foreground);\n    box-shadow: var(--cui-card-shadow);\n    -webkit-backdrop-filter: var(--cui-card-backdrop-filter);\n    backdrop-filter: var(--cui-card-backdrop-filter);\n  }\n\n  :where([data-control-family=\"card\"][data-slot=\"root\"][data-variant=\"sectioned\"]) {\n    --cui-card-shadow: var(--shadow-pop);\n  }\n\n  :where([data-control-family=\"card\"][data-slot=\"root\"][data-variant=\"sectioned\"] > [data-slot=\"header\"]) {\n    border-block-end: 1px solid oklch(from var(--border) l c h / 0.7);\n  }\n\n  :where([data-control-family=\"card\"][data-slot=\"title\"]) {\n    font-weight: 600;\n    line-height: 1;\n  }\n\n  :where([data-control-family=\"card\"][data-slot=\"description\"]) {\n    color: var(--muted-foreground);\n    font-size: var(--text-body);\n  }\n}\n\n@property --cui-card-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-card-background {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-card-border-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-card-border-width {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-card-shadow {\n  syntax: \"*\";\n  inherits: true;\n  initial-value: none;\n}\n\n@property --cui-card-backdrop-filter {\n  syntax: \"*\";\n  inherits: true;\n  initial-value: none;\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/ui/card.tsx",
      "target": "@components/control-ui/ui/card.tsx",
      "type": "registry:ui",
      "content": "import type { ComponentProps, CSSProperties } from \"react\";\nimport type { CardKnobStyle } from \"@/components/control-ui/knob-contracts/card-knobs\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\n\nexport type CardVariant = \"default\" | \"sectioned\";\n\nexport type CardProps = Omit<ComponentProps<\"div\">, \"style\"> & { style?: CSSProperties & CardKnobStyle } & { variant?: CardVariant };\n\nexport type CardHeaderProps = ComponentProps<\"div\"> & { style?: CSSProperties & CardKnobStyle };\n\nexport type CardTitleProps = Omit<ComponentProps<\"div\">, \"style\"> & { style?: CSSProperties & CardKnobStyle };\n\nexport type CardDescriptionProps = ComponentProps<\"div\"> & { style?: CSSProperties & CardKnobStyle };\n\nexport type CardActionProps = ComponentProps<\"div\"> & { style?: CSSProperties & CardKnobStyle };\n\nexport type CardContentProps = ComponentProps<\"div\"> & { style?: CSSProperties & CardKnobStyle };\n\nexport type CardFooterProps = ComponentProps<\"div\"> & { style?: CSSProperties & CardKnobStyle };\n\nexport function Card({ variant = \"default\", className, ...props }: CardProps) {\n  return (\n    <div\n      data-control-ui=\"card\"\n      data-control-family=\"card\"\n      data-slot=\"root\"\n      data-surface=\"panel\"\n      data-variant={variant}\n      className={cn(\n        \"flex flex-col gap-6 py-6\",\n        variant === \"sectioned\" &&\n          \"gap-0 py-0 [&>[data-slot=header]]:px-6 [&>[data-slot=header]]:py-5 [&>[data-slot=content]]:px-6 [&>[data-slot=content]]:py-6\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function CardHeader({ className, ...props }: CardHeaderProps) {\n  return (\n    <div\n      data-control-ui=\"card\"\n      data-control-family=\"card\"\n      data-slot=\"header\"\n      className={cn(\n        \"grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function CardTitle({ className, ...props }: CardTitleProps) {\n  return <div data-control-ui=\"card\" data-control-family=\"card\" data-slot=\"title\" className={className} {...props} />;\n}\n\nexport function CardDescription({ className, ...props }: CardDescriptionProps) {\n  return <div data-control-ui=\"card\" data-control-family=\"card\" data-slot=\"description\" className={className} {...props} />;\n}\n\nexport function CardAction({ className, ...props }: CardActionProps) {\n  return (\n    <div\n      data-control-ui=\"card\"\n      data-control-family=\"card\"\n      data-slot=\"action\"\n      className={cn(\"col-start-2 row-span-2 row-start-1 self-start justify-self-end\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function CardContent({ className, ...props }: CardContentProps) {\n  return <div data-control-ui=\"card\" data-control-family=\"card\" data-slot=\"content\" className={cn(\"px-6\", className)} {...props} />;\n}\n\nexport function CardFooter({ className, ...props }: CardFooterProps) {\n  return (\n    <div\n      data-control-ui=\"card\"\n      data-control-family=\"card\"\n      data-slot=\"footer\"\n      className={cn(\"flex items-center px-6 [.border-t]:pt-6\", className)}\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "css": {
    "@import \"../components/control-ui/styles/recipes/card.css\"": {}
  },
  "meta": {}
}