{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "flag",
  "title": "Flag",
  "description": "A persistent message card with an icon, title, description, up to two actions and a dismiss button, for things that need attention but not a decision.",
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/tealmac/flag.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  AlertTriangle,\n  CheckCircle2,\n  Info,\n  OctagonAlert,\n  X,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\nexport type FlagAppearance = \"normal\" | \"info\" | \"success\" | \"warning\" | \"error\"\n\nexport interface FlagAction {\n  content: string\n  onClick?: () => void\n  href?: string\n}\n\nexport interface FlagProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  \"title\"\n> {\n  appearance?: FlagAppearance\n  title: React.ReactNode\n  description?: React.ReactNode\n  actions?: FlagAction[]\n  /** Shows a dismiss button that calls this. */\n  onDismiss?: () => void\n  icon?: React.ReactNode\n}\n\nconst ICON = {\n  normal: Info,\n  info: Info,\n  success: CheckCircle2,\n  warning: AlertTriangle,\n  error: OctagonAlert,\n}\n\nconst ACCENT = {\n  normal: \"text-foreground\",\n  info: \"text-blue-700 dark:text-blue-400\",\n  success: \"text-emerald-700 dark:text-emerald-400\",\n  warning: \"text-amber-700 dark:text-amber-400\",\n  error: \"text-red-700 dark:text-red-400\",\n}\n\n/**\n * A persistent message card for something that needs attention but not a\n * decision: it stays until dismissed, carries up to two actions and, unlike\n * a toast, is never removed by a timer unless a FlagGroup says so. Warnings\n * and errors use `role=\"alert\"`; the others use `role=\"status\"`.\n */\nexport function Flag({\n  appearance = \"normal\",\n  title,\n  description,\n  actions = [],\n  onDismiss,\n  icon,\n  className,\n  ...props\n}: FlagProps) {\n  const Icon = ICON[appearance]\n  return (\n    <div\n      role={\n        appearance === \"error\" || appearance === \"warning\" ? \"alert\" : \"status\"\n      }\n      data-appearance={appearance}\n      className={cn(\n        \"bg-card text-card-foreground flex w-full max-w-sm gap-3 rounded-lg border p-4 shadow-lg\",\n        className\n      )}\n      {...props}\n    >\n      <span className={cn(\"mt-0.5 shrink-0\", ACCENT[appearance])} aria-hidden>\n        {icon ?? <Icon className=\"size-5\" />}\n      </span>\n      <div className=\"min-w-0 flex-1 space-y-1\">\n        <p className=\"text-sm leading-snug font-semibold\">{title}</p>\n        {description ? (\n          <p className=\"text-muted-foreground text-sm\">{description}</p>\n        ) : null}\n        {actions.length ? (\n          <div className=\"flex flex-wrap gap-x-4 gap-y-1 pt-1 text-sm\">\n            {actions.slice(0, 2).map((a) =>\n              a.href ? (\n                <a\n                  key={a.content}\n                  href={a.href}\n                  className=\"font-medium underline underline-offset-2\"\n                >\n                  {a.content}\n                </a>\n              ) : (\n                <button\n                  key={a.content}\n                  type=\"button\"\n                  onClick={a.onClick}\n                  className=\"font-medium underline underline-offset-2\"\n                >\n                  {a.content}\n                </button>\n              )\n            )}\n          </div>\n        ) : null}\n      </div>\n      {onDismiss ? (\n        <Button\n          type=\"button\"\n          size=\"icon-sm\"\n          variant=\"ghost\"\n          className=\"-me-2 -mt-1 shrink-0\"\n          aria-label=\"Dismiss\"\n          onClick={onDismiss}\n        >\n          <X className=\"size-4\" aria-hidden />\n        </Button>\n      ) : null}\n    </div>\n  )\n}\n\nexport default Flag\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}