{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert",
  "type": "registry:ui",
  "title": "Alert",
  "description": "Inline status panel for callouts, errors, and notices.",
  "dependencies": [],
  "registryDependencies": [
    "https://control-ui.dev/r/core.json"
  ],
  "files": [
    {
      "path": "src/registry/knob-contracts/alert-knobs.ts",
      "target": "@components/control-ui/knob-contracts/alert-knobs.ts",
      "type": "registry:component",
      "content": "// Generated from src/registry/sources/control-ui/recipes/alert.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const alertKnobs = [\"--cui-alert-radius\", \"--cui-alert-background\", \"--cui-alert-border-color\", \"--cui-alert-shadow\"] as const;\nexport type AlertKnobStyle = Partial<Record<(typeof alertKnobs)[number], string>>;\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/alert.css",
      "target": "@components/control-ui/styles/recipes/alert.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"alert\"][data-slot=\"root\"]) {\n    --cui-alert-radius: var(--radius-lg);\n    --cui-alert-background: var(--card);\n    --cui-alert-border-color: var(--border);\n    --cui-alert-shadow: none;\n    --_alert-foreground: var(--card-foreground);\n    --_alert-description-color: var(--muted-foreground);\n    border: 1px solid var(--cui-alert-border-color);\n    border-radius: var(--cui-alert-radius);\n    background: var(--cui-alert-background);\n    box-shadow: var(--cui-alert-shadow);\n    color: var(--_alert-foreground);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  :where([data-control-family=\"alert\"][data-slot=\"root\"][data-variant=\"destructive\"]) {\n    --_alert-foreground: var(--destructive-text);\n    --cui-alert-border-color: oklch(from var(--destructive) l c h / 0.5);\n    --_alert-description-color: oklch(from var(--destructive-text) l c h / 0.9);\n  }\n\n  :where([data-control-family=\"alert\"][data-slot=\"description\"]) {\n    color: var(--_alert-description-color);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm--line-height);\n  }\n\n  :where([data-control-family=\"alert\"][data-slot=\"description\"] p) {\n    line-height: var(--leading-relaxed);\n  }\n\n  :where([data-control-family=\"alert\"][data-slot=\"title\"]) {\n    font-weight: var(--font-weight-medium);\n    letter-spacing: var(--tracking-tight);\n  }\n\n  :where([data-control-family=\"alert\"][data-slot=\"root\"] > svg) {\n    color: currentcolor;\n    translate: 0 calc(var(--spacing) * 0.5);\n  }\n}\n\n@property --cui-alert-radius {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-alert-background {\n  syntax: \"*\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-alert-border-color {\n  syntax: \"<color>\";\n  inherits: true;\n  initial-value: transparent;\n}\n\n@property --cui-alert-shadow {\n  syntax: \"*\";\n  inherits: true;\n  initial-value: none;\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/ui/alert.tsx",
      "target": "@components/control-ui/ui/alert.tsx",
      "type": "registry:ui",
      "content": "import type { ComponentProps, CSSProperties } from \"react\";\nimport type { AlertKnobStyle } from \"@/components/control-ui/knob-contracts/alert-knobs\";\nimport { cn } from \"@/components/control-ui/lib/cn\";\n\nexport const alertVariants = [\"default\", \"destructive\"] as const;\n\nexport type AlertVariant = (typeof alertVariants)[number];\n\nexport type AlertProps = Omit<ComponentProps<\"div\">, \"style\"> & { style?: CSSProperties & AlertKnobStyle } & { variant?: AlertVariant };\n\nexport type AlertTitleProps = Omit<ComponentProps<\"div\">, \"style\"> & { style?: CSSProperties & AlertKnobStyle };\n\nexport type AlertDescriptionProps = Omit<ComponentProps<\"div\">, \"style\"> & { style?: CSSProperties & AlertKnobStyle };\n\nexport function Alert({ variant = \"default\", className, ...props }: AlertProps) {\n  return (\n    <div\n      role=\"alert\"\n      data-control-ui=\"alert\"\n      data-control-family=\"alert\"\n      data-slot=\"root\"\n      data-surface=\"panel\"\n      data-variant={variant}\n      className={cn(\n        \"relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 px-4 py-3 has-[>svg]:grid-cols-[1rem_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function AlertTitle({ className, ...props }: AlertTitleProps) {\n  return (\n    <div\n      data-control-ui=\"alert\"\n      data-control-family=\"alert\"\n      data-slot=\"title\"\n      className={cn(\"col-start-2 line-clamp-1 min-h-4\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertDescription({ className, ...props }: AlertDescriptionProps) {\n  return (\n    <div\n      data-control-ui=\"alert\"\n      data-control-family=\"alert\"\n      data-slot=\"description\"\n      className={cn(\"col-start-2 grid justify-items-start gap-1\", className)}\n      {...props}\n    />\n  );\n}\n"
    }
  ],
  "css": {
    "@import \"../components/control-ui/styles/recipes/alert.css\"": {}
  },
  "meta": {}
}