{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert",
  "type": "registry:ui",
  "title": "Alert",
  "description": "Inline status banner (info/success/warning/danger) with icon, title, and description for non-blocking messages.",
  "dependencies": [
    "@saasflare/ui"
  ],
  "files": [
    {
      "path": "components/ui/alert.tsx",
      "type": "registry:ui",
      "content": "// @toreview\n\"use client\"\n\n/**\n * @fileoverview Saasflare Alert — contextual feedback with intent support.\n * @module packages/ui/components/ui/alert\n * @layer core\n *\n * Fully owned Saasflare implementation. Does NOT import from ui/.\n * Always renders with a \"soft\" visual treatment — no variant axis needed.\n * Intent controls the color: neutral (default), info, success, warning, danger.\n *\n * @example\n * import { Alert, AlertTitle, AlertDescription } from \"@saasflare/ui\";\n * import { InfoIcon } from \"@saasflare/ui\";\n *\n * <Alert intent=\"info\">\n *   <InfoIcon />\n *   <AlertTitle>Heads up!</AlertTitle>\n *   <AlertDescription>This is an informational alert.</AlertDescription>\n * </Alert>\n */\n\nimport * as React from \"react\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\nimport type { Intent } from \"@saasflare/ui\"\n\n/**\n * Soft treatment for the neutral intent — uses card tokens, no `--intent`.\n * (Neutral renders without a `data-intent` attribute, so `var(--intent)` is\n * not in scope; card tokens give a stable, themed surface.)\n */\nconst NEUTRAL_STYLE =\n  \"bg-card text-card-foreground border-border\"\n\n/**\n * Soft treatment for every colored intent. Identical for all of\n * primary/info/success/warning/danger because the color is sourced entirely\n * from `--intent`, which the `[data-intent]` selector in theme.css resolves\n * per intent on this element.\n */\nconst COLORED_STYLE =\n  \"bg-[var(--intent)]/10 text-[var(--intent)] border-[var(--intent)]/20 *:data-[slot=alert-description]:text-[var(--intent)]/80\"\n\n/** Props for the Saasflare Alert component */\ninterface AlertProps extends Omit<React.ComponentProps<\"div\">, keyof SaasflareComponentProps>, SaasflareComponentProps {\n  /** Semantic color intent */\n  intent?: Intent | \"neutral\"\n  /**\n   * Legacy variant prop for backward compatibility.\n   * @deprecated Use `intent` instead. \"destructive\" maps to intent=\"danger\".\n   */\n  variant?: \"default\" | \"destructive\"\n}\n\n/**\n * Contextual alert banner with intent-based coloring.\n *\n * @component\n * @layer core\n *\n * @param {string} intent - Color intent: \"neutral\" | \"primary\" | \"info\" | \"success\" | \"warning\" | \"danger\"\n *\n * @example\n * <Alert intent=\"success\">\n *   <CheckIcon />\n *   <AlertTitle>Saved!</AlertTitle>\n *   <AlertDescription>Your changes have been saved.</AlertDescription>\n * </Alert>\n *\n * @example\n * // Legacy API (deprecated but supported)\n * <Alert variant=\"destructive\">\n *   <AlertTitle>Error</AlertTitle>\n *   <AlertDescription>Something went wrong.</AlertDescription>\n * </Alert>\n */\nfunction Alert({\n  className,\n  intent: intentProp,\n  variant,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n  ...props\n}: AlertProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n\n  /* ── Backward compat: map legacy variant to intent ── */\n  let resolvedIntent: Intent | \"neutral\" = intentProp ?? \"neutral\"\n  if (!intentProp && variant === \"destructive\") {\n    resolvedIntent = \"danger\"\n  }\n\n  const intentStyle =\n    resolvedIntent === \"neutral\" ? NEUTRAL_STYLE : COLORED_STYLE\n\n  return (\n    <div\n      {...props}\n      data-slot=\"alert\"\n      data-intent={resolvedIntent !== \"neutral\" ? resolvedIntent : undefined}\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n      role=\"alert\"\n      className={cn(\n        \"relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current\",\n        intentStyle,\n        className\n      )}\n    />\n  )\n}\n\n/**\n * Alert title text.\n *\n * @component\n * @layer core\n */\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * Alert description text.\n *\n * @component\n * @layer core\n */\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, type AlertProps }\n",
      "target": "components/ui/alert.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/alert.json"
  }
}