{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert",
  "type": "registry:ui",
  "dependencies": [
    "class-variance-authority",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.getlyse.com/r/lyse-tokens.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/alert/alert.tsx",
      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport {\n  Info,\n  CheckCircle2,\n  AlertTriangle,\n  XCircle,\n  X,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport \"./alert.css\"\n\n/* ------------------------------------------------------------------ */\n/*  Variant icons                                                      */\n/* ------------------------------------------------------------------ */\n\nconst variantIcons = {\n  brand: Info,\n  success: CheckCircle2,\n  warning: AlertTriangle,\n  danger: XCircle,\n} as const\n\n/* ------------------------------------------------------------------ */\n/*  CVA                                                                */\n/* ------------------------------------------------------------------ */\n\nconst alertVariants = cva(\n  \"flex items-start gap-[var(--layout-gap-md)] rounded-[var(--layout-radius-lg)] p-[var(--layout-padding-lg)] [&_svg]:shrink-0 [&_svg]:size-4\",\n  {\n    variants: {\n      variant: {\n        brand: \"alert-brand\",\n        success: \"alert-success\",\n        warning: \"alert-warning\",\n        danger: \"alert-danger\",\n      },\n    },\n    defaultVariants: {\n      variant: \"brand\",\n    },\n  }\n)\n\n/* ------------------------------------------------------------------ */\n/*  Alert                                                              */\n/* ------------------------------------------------------------------ */\n\nfunction Alert({\n  className,\n  variant = \"brand\",\n  icon,\n  action,\n  actionPlacement = \"bottom\",\n  onDismiss,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof alertVariants> & {\n    icon?: React.ReactNode | null\n    action?: React.ReactNode\n    actionPlacement?: \"bottom\" | \"right\"\n    onDismiss?: () => void\n  }) {\n  const showIcon = icon !== null\n  const IconComponent = variant ? variantIcons[variant] : variantIcons.brand\n\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      aria-live=\"polite\"\n      className={cn(alertVariants({ variant, className }))}\n      {...props}\n    >\n      {showIcon && (\n        <span className=\"alert-icon mt-0.5 shrink-0\" aria-hidden=\"true\">\n          {icon !== undefined ? icon : <IconComponent />}\n        </span>\n      )}\n\n      <div className=\"flex min-w-0 flex-1 flex-col gap-[var(--layout-gap-xs)]\">\n        {children}\n        {action && actionPlacement === \"bottom\" && (\n          <div className=\"mt-[var(--layout-gap-sm)]\">{action}</div>\n        )}\n      </div>\n\n      {action && actionPlacement === \"right\" && (\n        <div className=\"shrink-0 self-center\">{action}</div>\n      )}\n\n      {onDismiss && (\n        <button\n          type=\"button\"\n          className=\"alert-dismiss shrink-0\"\n          aria-label=\"Dismiss\"\n          onClick={onDismiss}\n        >\n          <X aria-hidden=\"true\" />\n        </button>\n      )}\n    </div>\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  AlertTitle                                                         */\n/* ------------------------------------------------------------------ */\n\nfunction AlertTitle({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"alert-title\"\n      className={cn(\"text-content-note font-accent [color:var(--text-base-strong)]\", className)}\n      {...props}\n    />\n  )\n}\n\n/* ------------------------------------------------------------------ */\n/*  AlertDescription                                                   */\n/* ------------------------------------------------------------------ */\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"alert-description\"\n      className={cn(\"text-content-note [color:var(--text-base-bolder)]\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, alertVariants }\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/new-york/ui/alert/alert.css",
      "content": "/* ================================================================\n * ALERT — Variant Styles\n * Structure (flex, padding, gap, radius) lives in alert.tsx via cva.\n * Theming (colors, borders, accent) lives here via tokens.\n * ================================================================ */\n\n/* --------------------------------\n * Variant tokens\n * Each variant sets scoped custom properties.\n * -------------------------------- */\n\n.alert-brand {\n  --alert-bg: var(--background-brand-lighter-default);\n  --alert-accent: var(--border-brand-strong);\n  --alert-icon: var(--icon-brand-bolder);\n}\n\n.alert-success {\n  --alert-bg: var(--background-success-lighter-default);\n  --alert-accent: var(--border-success-strong);\n  --alert-icon: var(--icon-success-bolder);\n}\n\n.alert-warning {\n  --alert-bg: var(--background-warning-lighter-default);\n  --alert-accent: var(--border-warning-strong);\n  --alert-icon: var(--icon-warning-bolder);\n}\n\n.alert-danger {\n  --alert-bg: var(--background-danger-lighter-default);\n  --alert-accent: var(--border-danger-strong);\n  --alert-icon: var(--icon-danger-bolder);\n}\n\n/* --------------------------------\n * Base — applied to all variants\n * -------------------------------- */\n\n.alert-brand,\n.alert-success,\n.alert-warning,\n.alert-danger {\n  background: var(--alert-bg);\n  border-left: 4px solid var(--alert-accent);\n}\n\n/* --------------------------------\n * Icon color — separate from text\n * -------------------------------- */\n\n.alert-icon {\n  color: var(--alert-icon);\n}\n\n/* --------------------------------\n * Dismiss button\n * -------------------------------- */\n\n.alert-dismiss {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--layout-size-md);\n  height: var(--layout-size-md);\n  color: var(--text-base-moderate);\n  background: transparent;\n  border: none;\n  cursor: pointer;\n}\n\n.alert-dismiss:hover {\n  color: var(--text-base-strong);\n}\n\n.alert-dismiss:focus-visible {\n  outline: 2px solid var(--border-selected);\n  outline-offset: 2px;\n}\n",
      "type": "registry:ui"
    }
  ]
}