{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-outline",
  "title": "Outline alert",
  "description": "Styled alert: the Outline set. 5 decorative alert variations (RingAlert, DashedAlert, DoubleAlert, ThickAlert, CornerAlert) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.",
  "dependencies": [
    "lucide-react@^1.23.0"
  ],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/alert-outline.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { CircleAlert, CircleCheck, Info, TriangleAlert } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Outline alert family: 5 decorative alert surfaces. The shared idea is being\n   EDGE-driven - the surface stays transparent or close to it, and all the\n   character comes from the frame (inner ring, dashed edge, double edge, thick\n   edge, corner accents). Color comes ONLY from semantic tokens, via alpha\n   color-mix or the tailwind opacity modifier. Anatomy (Berkay's decision): the\n   icon marks ONLY the title line - the icon and the title share line 1, and the\n   description starts BELOW the icon and takes the full width. No motion, this\n   family is entirely static. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nexport type StyledTone = \"info\" | \"success\" | \"warning\" | \"danger\"\n\nconst pad: Record<StyledSize, string> = {\n  sm: \"p-3 text-sm\",\n  md: \"p-4 text-sm\",\n  lg: \"p-4 text-base\",\n  xl: \"p-5 text-base\",\n}\n\n/* Grid: icon column plus content. The icon is a direct child, so the\n   [&>svg] / [&>i] pair (lucide <svg> and remixicon <i> compatibility) lives\n   here. */\nconst base =\n  \"relative grid w-full grid-cols-[calc(var(--spacing)*4)_1fr] items-start gap-x-2 gap-y-0.5 rounded-lg [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:translate-y-0.5 [&>i]:block [&>i]:size-4 [&>i]:shrink-0 [&>i]:translate-y-0.5 [&>i]:text-base [&>i]:leading-none\"\n\n/* Tone -> varsayilan lucide ikon. */\nconst toneIcon: Record<StyledTone, React.ReactNode> = {\n  info: <Info />,\n  success: <CircleCheck />,\n  warning: <TriangleAlert />,\n  danger: <CircleAlert />,\n}\n\n/* Icon colour comes from the root; the [&>i] pair is required for remixicon\n   compatibility. */\nconst iconTone: Record<StyledTone, string> = {\n  info: \"[&>svg]:text-info [&>i]:text-info\",\n  success: \"[&>svg]:text-success [&>i]:text-success\",\n  warning: \"[&>svg]:text-warning-soft-foreground [&>i]:text-warning-soft-foreground\",\n  danger: \"[&>svg]:text-danger [&>i]:text-danger\",\n}\n\ntype AlertProps = Omit<React.ComponentProps<\"div\">, \"title\"> & {\n  size?: StyledSize\n  tone?: StyledTone\n  title?: React.ReactNode\n  icon?: React.ReactNode\n}\n\n/* Shared shell: only the surface class changes. */\nfunction Frame({\n  size,\n  tone,\n  title,\n  icon,\n  children,\n  className,\n  surface,\n  ...props\n}: Omit<AlertProps, \"size\" | \"tone\"> & {\n  size: StyledSize\n  tone: StyledTone\n  surface: string\n}) {\n  return (\n    <div\n      data-slot=\"styled-alert\"\n      data-tone={tone}\n      role=\"alert\"\n      className={cn(base, pad[size], iconTone[tone], surface, className)}\n      {...props}\n    >\n      {icon ?? toneIcon[tone]}\n      <div\n        data-slot=\"styled-alert-title\"\n        className=\"col-start-2 min-h-4 font-medium tracking-tight\"\n      >\n        {title}\n      </div>\n      <div\n        data-slot=\"styled-alert-description\"\n        className=\"col-span-2 col-start-1 text-sm opacity-90 [&_p]:leading-relaxed\"\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\n/* Ring: an inner ring instead of a border. The surface is fully transparent, the line thin and crisp. */\nconst ringTone: Record<StyledTone, string> = {\n  info: \"ring-1 ring-inset ring-info/50\",\n  success: \"ring-1 ring-inset ring-success/50\",\n  warning: \"ring-1 ring-inset ring-warning/60\",\n  danger: \"ring-1 ring-inset ring-danger/50\",\n}\n\nexport function RingAlert({\n  className,\n  size = \"md\",\n  tone = \"info\",\n  title = \"Heads up\",\n  children = \"A borderless surface with a crisp inset ring.\",\n  icon,\n  ...props\n}: AlertProps) {\n  return (\n    <Frame\n      size={size}\n      tone={tone}\n      title={title}\n      icon={icon}\n      surface={cn(\"bg-transparent text-foreground\", ringTone[tone])}\n      className={className}\n      {...props}\n    >\n      {children}\n    </Frame>\n  )\n}\n\n/* Dashed: kesik tone kenar. Gecici/taslak durum hissi. */\nconst dashedTone: Record<StyledTone, string> = {\n  info: \"border-info/55\",\n  success: \"border-success/55\",\n  warning: \"border-warning/65\",\n  danger: \"border-danger/55\",\n}\n\nexport function DashedAlert({\n  className,\n  size = \"md\",\n  tone = \"info\",\n  title = \"Heads up\",\n  children = \"A dashed tone border on a transparent surface.\",\n  icon,\n  ...props\n}: AlertProps) {\n  return (\n    <Frame\n      size={size}\n      tone={tone}\n      title={title}\n      icon={icon}\n      surface={cn(\"border-2 border-dashed bg-transparent text-foreground\", dashedTone[tone])}\n      className={className}\n      {...props}\n    >\n      {children}\n    </Frame>\n  )\n}\n\n/* Double: CSS border-double - two thin lines with a gap between them. Below 3px it does not render, so the width is a fixed [3px]. */\nconst doubleTone: Record<StyledTone, string> = {\n  info: \"border-info/70\",\n  success: \"border-success/70\",\n  warning: \"border-warning/80\",\n  danger: \"border-danger/70\",\n}\n\nexport function DoubleAlert({\n  className,\n  size = \"md\",\n  tone = \"info\",\n  title = \"Heads up\",\n  children = \"Two hairlines with a gap, drawn by a single double border.\",\n  icon,\n  ...props\n}: AlertProps) {\n  return (\n    <Frame\n      size={size}\n      tone={tone}\n      title={title}\n      icon={icon}\n      surface={cn(\"border-[3px] border-double bg-transparent text-foreground\", doubleTone[tone])}\n      className={className}\n      {...props}\n    >\n      {children}\n    </Frame>\n  )\n}\n\n/* Thick: tam opak kalin tone kenar + cok hafif tone yikama. En yuksek sesli\n   outline varyanti. */\nconst thickTone: Record<StyledTone, string> = {\n  info: \"border-info bg-[color-mix(in_oklab,var(--color-info)_6%,transparent)]\",\n  success: \"border-success bg-[color-mix(in_oklab,var(--color-success)_6%,transparent)]\",\n  warning: \"border-warning bg-[color-mix(in_oklab,var(--color-warning)_8%,transparent)]\",\n  danger: \"border-danger bg-[color-mix(in_oklab,var(--color-danger)_6%,transparent)]\",\n}\n\nexport function ThickAlert({\n  className,\n  size = \"md\",\n  tone = \"info\",\n  title = \"Heads up\",\n  children = \"A solid, heavy tone border with a faint tone wash.\",\n  icon,\n  ...props\n}: AlertProps) {\n  return (\n    <Frame\n      size={size}\n      tone={tone}\n      title={title}\n      icon={icon}\n      surface={cn(\"border-2 text-foreground\", thickTone[tone])}\n      className={className}\n      {...props}\n    >\n      {children}\n    </Frame>\n  )\n}\n\n/* Corner: a neutral thin frame + a tone accent on only two opposite corners\n   (before = top left, after = bottom right). */\nconst cornerTone: Record<StyledTone, string> = {\n  info: \"before:border-info after:border-info\",\n  success: \"before:border-success after:border-success\",\n  warning: \"before:border-warning after:border-warning\",\n  danger: \"before:border-danger after:border-danger\",\n}\n\nexport function CornerAlert({\n  className,\n  size = \"md\",\n  tone = \"info\",\n  title = \"Heads up\",\n  children = \"A neutral hairline frame with tone accents on two corners.\",\n  icon,\n  ...props\n}: AlertProps) {\n  return (\n    <Frame\n      size={size}\n      tone={tone}\n      title={title}\n      icon={icon}\n      surface={cn(\n        \"border border-border bg-transparent text-foreground\",\n        \"before:absolute before:left-[-1px] before:top-[-1px] before:size-3.5 before:rounded-tl-lg before:border-l-2 before:border-t-2 before:content-['']\",\n        \"after:absolute after:bottom-[-1px] after:right-[-1px] after:size-3.5 after:rounded-br-lg after:border-b-2 after:border-r-2 after:content-['']\",\n        cornerTone[tone]\n      )}\n      className={className}\n      {...props}\n    >\n      {children}\n    </Frame>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/alert-outline.tsx"
    }
  ],
  "categories": [
    "styled",
    "alert"
  ],
  "type": "registry:component"
}