{
  "name": "system-message",
  "type": "registry:ui",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "description": "A banner-style component for surfacing contextual information, warnings, or instructions within AI interfaces.",
  "files": [
    {
      "path": "system-message.tsx",
      "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { AlertCircle, AlertTriangle, Info } from \"lucide-react\"\nimport React from \"react\"\n\nconst systemMessageVariants = cva(\n  \"flex flex-row items-center gap-3 rounded-[12px] border py-2 pr-2 pl-3\",\n  {\n    variants: {\n      variant: {\n        action: \"text-zinc-700 dark:text-zinc-300\",\n        error: \"text-red-700 dark:text-red-800\",\n        warning: \"text-amber-700 dark:text-amber-700\",\n      },\n      fill: {\n        true: \"bg-background\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        variant: \"action\",\n        fill: true,\n        class: \"bg-zinc-100 dark:bg-zinc-900 border-transparent\",\n      },\n      {\n        variant: \"error\",\n        fill: true,\n        class: \"bg-red-100 dark:bg-red-900/20 border-transparent\",\n      },\n      {\n        variant: \"warning\",\n        fill: true,\n        class: \"bg-amber-100 dark:bg-amber-900/20 border-transparent\",\n      },\n      {\n        variant: \"action\",\n        fill: false,\n        class: \"border-zinc-200 dark:border-zinc-800\",\n      },\n      {\n        variant: \"error\",\n        fill: false,\n        class: \"border-red-600 dark:border-red-900\",\n      },\n      {\n        variant: \"warning\",\n        fill: false,\n        class: \"border-amber-600 dark:border-amber-900\",\n      },\n    ],\n    defaultVariants: {\n      variant: \"action\",\n      fill: false,\n    },\n  }\n)\n\nexport type SystemMessageProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof systemMessageVariants> & {\n    icon?: React.ReactNode\n    isIconHidden?: boolean\n    cta?: {\n      label: string\n      onClick?: () => void\n      variant?: \"solid\" | \"outline\" | \"ghost\"\n    }\n  }\n\nexport function SystemMessage({\n  children,\n  variant = \"action\",\n  fill = false,\n  icon,\n  isIconHidden = false,\n  cta,\n  className,\n  ...props\n}: SystemMessageProps) {\n  const getDefaultIcon = () => {\n    if (isIconHidden) return null\n\n    switch (variant) {\n      case \"error\":\n        return <AlertCircle className=\"size-4\" />\n      case \"warning\":\n        return <AlertTriangle className=\"size-4\" />\n      default:\n        return <Info className=\"size-4\" />\n    }\n  }\n\n  const getIconToShow = () => {\n    if (isIconHidden) return null\n    if (icon) return icon\n    return getDefaultIcon()\n  }\n\n  const shouldShowIcon = getIconToShow() !== null\n\n  return (\n    <div\n      className={cn(systemMessageVariants({ variant, fill }), className)}\n      {...props}\n    >\n      <div className=\"flex flex-1 flex-row items-center gap-3 leading-normal\">\n        {shouldShowIcon && (\n          <div className=\"flex h-[1lh] shrink-0 items-center justify-center self-start\">\n            {getIconToShow()}\n          </div>\n        )}\n\n        <div\n          className={cn(\n            \"flex min-w-0 flex-1 items-center\",\n            shouldShowIcon ? \"gap-3\" : \"gap-0\"\n          )}\n        >\n          <div className=\"text-sm\">{children}</div>\n        </div>\n      </div>\n\n      {cta && (\n        <Button variant=\"default\" size=\"sm\" onClick={cta.onClick}>\n          {cta.label}\n        </Button>\n      )}\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}