{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-solid",
  "title": "Solid alert",
  "description": "Styled alert: the Solid set. 5 decorative alert variations (FlatAlert, DeepAlert, GradientAlert, SplitAlert, ContrastAlert) 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-solid.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/* Solid alert family: 5 decorative alert surfaces. The shared idea is a FILLED\n   tone background - not the soft token but the tone itself as the background;\n   text and icon use the matching -foreground token, so contrast passes in both\n   themes. The variants change how the fill is treated (flat, deep shadow,\n   gradient, two bands, contrast ring). Color comes ONLY from semantic tokens,\n   via alpha color-mix or the tailwind opacity modifier. Anatomy (Berkay's\n   decision): the icon marks ONLY the title line - the icon and the title share\n   line 1, and the description starts BELOW the icon and takes the full width.\n   No motion, this family is entirely static.\n\n   Note: the gradient/split depth is produced by mixing with\n   var(--color-foreground). That direction is SAFE in both themes: in the light\n   theme foreground is dark, so the fill darkens and the light -foreground text\n   becomes even more readable; in the dark theme foreground is light, so the fill\n   lightens and the dark -foreground text becomes even more readable. */\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/* In Split the description band reaches the very edge: a negative margin equal to pad plus its own inner padding. */\nconst splitDesc: Record<StyledSize, string> = {\n  sm: \"-mx-3 -mb-3 mt-2 px-3 py-2\",\n  md: \"-mx-4 -mb-4 mt-2 px-4 py-3\",\n  lg: \"-mx-4 -mb-4 mt-2 px-4 py-3\",\n  xl: \"-mx-5 -mb-5 mt-3 px-5 py-4\",\n}\n\n/* Grid: icon column plus content. The icon is a direct child, so the [&>svg] / [&>i] pair (lucide <svg> and remixicon <i> compatibility) lives here. On a solid ground the icon colour comes from currentColor, that is from tone -foreground. */\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\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  descClassName,\n  ...props\n}: Omit<AlertProps, \"size\" | \"tone\"> & {\n  size: StyledSize\n  tone: StyledTone\n  surface: string\n  descClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"styled-alert\"\n      data-tone={tone}\n      role=\"alert\"\n      className={cn(base, pad[size], 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-semibold tracking-tight\"\n      >\n        {title}\n      </div>\n      <div\n        data-slot=\"styled-alert-description\"\n        className={cn(\"col-span-2 col-start-1 text-sm [&_p]:leading-relaxed\", descClassName)}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\n/* Dolu zemin + eslesen -foreground. Tum varyantlarin ortak temeli. */\nconst solidTone: Record<StyledTone, string> = {\n  info: \"bg-info text-info-foreground\",\n  success: \"bg-success text-success-foreground\",\n  warning: \"bg-warning text-warning-foreground\",\n  danger: \"bg-danger text-danger-foreground\",\n}\n\n/* Flat: sade dolu zemin, efekt yok. Ailenin temel hali. */\nexport function FlatAlert({\n  className,\n  size = \"md\",\n  tone = \"info\",\n  title = \"Heads up\",\n  children = \"A flat solid tone fill with matching foreground text.\",\n  icon,\n  ...props\n}: AlertProps) {\n  return (\n    <Frame\n      size={size}\n      tone={tone}\n      title={title}\n      icon={icon}\n      surface={solidTone[tone]}\n      className={className}\n      {...props}\n    >\n      {children}\n    </Frame>\n  )\n}\n\n/* Deep: dolu zemin + tone renkli dis golge ve ustte ince ic isik cizgisi.\n   Yuzeyi sayfadan kaldirir. */\nconst deepTone: Record<StyledTone, string> = {\n  info: \"shadow-[0_10px_24px_-8px_color-mix(in_oklab,var(--color-info)_65%,transparent),inset_0_1px_0_color-mix(in_oklab,var(--color-info-foreground)_28%,transparent)]\",\n  success:\n    \"shadow-[0_10px_24px_-8px_color-mix(in_oklab,var(--color-success)_65%,transparent),inset_0_1px_0_color-mix(in_oklab,var(--color-success-foreground)_28%,transparent)]\",\n  warning:\n    \"shadow-[0_10px_24px_-8px_color-mix(in_oklab,var(--color-warning)_65%,transparent),inset_0_1px_0_color-mix(in_oklab,var(--color-warning-foreground)_28%,transparent)]\",\n  danger:\n    \"shadow-[0_10px_24px_-8px_color-mix(in_oklab,var(--color-danger)_65%,transparent),inset_0_1px_0_color-mix(in_oklab,var(--color-danger-foreground)_28%,transparent)]\",\n}\n\nexport function DeepAlert({\n  className,\n  size = \"md\",\n  tone = \"info\",\n  title = \"Heads up\",\n  children = \"A solid fill lifted by a tone-colored drop shadow.\",\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(solidTone[tone], deepTone[tone])}\n      className={className}\n      {...props}\n    >\n      {children}\n    </Frame>\n  )\n}\n\n/* Gradient: a diagonal transition from tone towards foreground. The direction INCREASES contrast in both themes (see the note at the top of the file). */\nconst gradientTone: Record<StyledTone, string> = {\n  info: \"bg-gradient-to-br from-info to-[color-mix(in_oklab,var(--color-info)_76%,var(--color-foreground))]\",\n  success:\n    \"bg-gradient-to-br from-success to-[color-mix(in_oklab,var(--color-success)_76%,var(--color-foreground))]\",\n  warning:\n    \"bg-gradient-to-br from-warning to-[color-mix(in_oklab,var(--color-warning)_76%,var(--color-foreground))]\",\n  danger:\n    \"bg-gradient-to-br from-danger to-[color-mix(in_oklab,var(--color-danger)_76%,var(--color-foreground))]\",\n}\n\nexport function GradientAlert({\n  className,\n  size = \"md\",\n  tone = \"info\",\n  title = \"Heads up\",\n  children = \"A diagonal gradient across two steps of the same tone.\",\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(solidTone[tone], gradientTone[tone])}\n      className={className}\n      {...props}\n    >\n      {children}\n    </Frame>\n  )\n}\n\n/* Split: two bands of the same fill - the title row is the light band, the description a full-width darker band. The description reaches the edge, hence overflow-hidden on the root. */\nexport function SplitAlert({\n  className,\n  size = \"md\",\n  tone = \"info\",\n  title = \"Heads up\",\n  children = \"The description sits on a second, deeper band of the same tone.\",\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(\"overflow-hidden\", solidTone[tone])}\n      descClassName={cn(\n        \"bg-[color-mix(in_oklab,var(--color-foreground)_14%,transparent)]\",\n        splitDesc[size]\n      )}\n      className={className}\n      {...props}\n    >\n      {children}\n    </Frame>\n  )\n}\n\n/* Contrast: a filled background + a tone ring leaving a gap from the background.\n   It separates the surface sharply from the page. */\nconst contrastTone: Record<StyledTone, string> = {\n  info: \"ring-2 ring-info ring-offset-2 ring-offset-background\",\n  success: \"ring-2 ring-success ring-offset-2 ring-offset-background\",\n  warning: \"ring-2 ring-warning ring-offset-2 ring-offset-background\",\n  danger: \"ring-2 ring-danger ring-offset-2 ring-offset-background\",\n}\n\nexport function ContrastAlert({\n  className,\n  size = \"md\",\n  tone = \"info\",\n  title = \"Heads up\",\n  children = \"A solid fill ringed with an offset gap against the page.\",\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(solidTone[tone], contrastTone[tone])}\n      className={className}\n      {...props}\n    >\n      {children}\n    </Frame>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/alert-solid.tsx"
    }
  ],
  "categories": [
    "styled",
    "alert"
  ],
  "type": "registry:component"
}