{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "openlmis-callout",
  "title": "Callout",
  "description": "Message box in a warning, info or success tone, tinted border and background with an icon of its own and text in the foreground colours, for the states the stock Alert has no variant for.",
  "dependencies": [
    "lucide-react@^1",
    "@base-ui/react@^1"
  ],
  "registryDependencies": [
    "button",
    "utils"
  ],
  "files": [
    {
      "path": "registry/components/openlmis/callout/callout.tsx",
      "content": "import {\n  CircleCheckIcon,\n  InfoIcon,\n  type LucideIcon,\n  TriangleAlertIcon,\n} from \"lucide-react\"\nimport type { ReactNode } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type CalloutTone = \"info\" | \"warning\" | \"success\"\n\n// Tinted by tone while the text keeps the foreground colours, which read on every tint.\nconst TONES = {\n  info: {\n    className: \"border-info/30 bg-info/10\",\n    iconClass: \"text-info\",\n    icon: InfoIcon,\n  },\n  warning: {\n    className: \"border-warning/30 bg-warning/10\",\n    iconClass: \"text-warning\",\n    icon: TriangleAlertIcon,\n  },\n  success: {\n    className: \"border-success/30 bg-success/10\",\n    iconClass: \"text-success\",\n    icon: CircleCheckIcon,\n  },\n} as const satisfies Record<\n  CalloutTone,\n  { className: string; iconClass: string; icon: LucideIcon }\n>\n\ntype CalloutProps = {\n  tone: CalloutTone\n  title: ReactNode\n  children?: ReactNode\n  /** A button at the end, such as Undo. */\n  action?: ReactNode\n}\n\n/** A message in a state's colour, with its own icon so it reads without relying on colour; its own element, as stock Alert has no warning, info or success tone. */\nexport function Callout({ tone, title, children, action }: CalloutProps) {\n  const { className, iconClass, icon: Icon } = TONES[tone]\n\n  return (\n    <div\n      className={cn(\n        \"flex w-full items-start gap-2 rounded-lg border px-2.5 py-2 text-sm\",\n        className\n      )}\n      // Like the stock Alert, so a callout that appears after an action is announced.\n      role=\"alert\"\n    >\n      <Icon\n        aria-hidden=\"true\"\n        className={cn(\"mt-0.5 size-4 shrink-0\", iconClass)}\n      />\n      <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <p className=\"font-medium text-foreground\">{title}</p>\n        {children && (\n          <div className=\"text-balance text-muted-foreground\">{children}</div>\n        )}\n      </div>\n      {action && <div className=\"shrink-0\">{action}</div>}\n    </div>\n  )\n}",
      "type": "registry:component",
      "target": "components/openlmis/callout.tsx"
    }
  ],
  "cssVars": {
    "light": {
      "destructive": "oklch(0.577 0.245 27.325)",
      "destructive-foreground": "oklch(0.985 0 0)",
      "success": "oklch(0.596 0.145 163.225)",
      "success-foreground": "oklch(0.985 0 0)",
      "warning": "oklch(0.666 0.179 58.318)",
      "warning-foreground": "oklch(0.985 0 0)",
      "info": "oklch(0.55 0.13 237)",
      "info-foreground": "oklch(0.985 0 0)"
    },
    "dark": {
      "destructive": "oklch(0.704 0.191 22.216)",
      "destructive-foreground": "oklch(0.21 0.04 25)",
      "success": "oklch(0.696 0.17 162.48)",
      "success-foreground": "oklch(0.21 0.04 163)",
      "warning": "oklch(0.769 0.188 70.08)",
      "warning-foreground": "oklch(0.22 0.04 60)",
      "info": "oklch(0.7 0.14 237)",
      "info-foreground": "oklch(0.2 0.04 240)"
    }
  },
  "meta": {
    "project": "openlmis",
    "height": "308px"
  },
  "categories": [
    "feedback"
  ],
  "type": "registry:component"
}