{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "alert",
  "title": "Alert",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/alert/Alert.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface AlertProps extends HTMLAttributes<HTMLDivElement> {\n    variant?: 'default' | 'destructive'\n    icon?: 'info' | 'warning' | 'error' | 'success'\n    title?: string\n    text?: string\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { CircleAlert, CircleCheck, Info, TriangleAlert } from '@lucide/svelte'\n  import { cn } from '$lib/utils'\n  import { alertVariants } from './alert.variants'\n\n  let {\n    class: className,\n    variant = 'default',\n    icon,\n    title,\n    text,\n    children,\n    ref = $bindable(null),\n    ...restProps\n  }: AlertProps = $props()\n</script>\n\n<div bind:this={ref} role=\"alert\" data-uipkge=\"\" data-slot=\"alert\" class={cn(alertVariants({ variant }), className)} {...restProps}>\n  <!--\n    Icons and composition children must be direct root descendants so the\n    `[&>svg]` absolute layout in alertVariants can position and pad correctly.\n  -->\n  {#if icon === 'error'}\n    <CircleAlert class=\"size-4\" aria-hidden=\"true\" />\n  {:else if icon === 'success'}\n    <CircleCheck class=\"size-4\" aria-hidden=\"true\" />\n  {:else if icon === 'warning'}\n    <TriangleAlert class=\"size-4\" aria-hidden=\"true\" />\n  {:else if icon === 'info'}\n    <Info class=\"size-4\" aria-hidden=\"true\" />\n  {/if}\n\n  {#if title}\n    <p data-uipkge=\"\" data-slot=\"alert-title\" class=\"mb-1 text-sm leading-none font-medium tracking-tight\">\n      {title}\n    </p>\n  {/if}\n  {#if text}\n    <div\n      data-uipkge=\"\"\n      data-slot=\"alert-description\"\n      class=\"text-muted-foreground text-sm leading-relaxed [&_p]:leading-relaxed\"\n    >\n      {text}\n    </div>\n  {/if}\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/alert/Alert.svelte"
    },
    {
      "path": "packages/registry-svelte/components/alert/AlertDescription.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface AlertDescriptionProps extends HTMLAttributes<HTMLDivElement> {\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: AlertDescriptionProps = $props()\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"alert-description\"\n  class={cn('text-muted-foreground text-sm leading-relaxed [&_p]:leading-relaxed', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/alert/AlertDescription.svelte"
    },
    {
      "path": "packages/registry-svelte/components/alert/AlertTitle.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface AlertTitleProps extends HTMLAttributes<HTMLElement> {\n    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { as = 'h5', class: className, children, ...restProps }: AlertTitleProps = $props()\n</script>\n\n<svelte:element\n  this={as}\n  data-uipkge=\"\"\n  data-slot=\"alert-title\"\n  class={cn('mb-1 text-sm leading-none font-medium tracking-tight', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</svelte:element>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/alert/AlertTitle.svelte"
    },
    {
      "path": "packages/registry-svelte/components/alert/alert.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\n/**\n * Variant definitions live in their own file (rather than the package\n * `index.ts`) so `Alert.vue` can `import { alertVariants } from\n * './alert.variants'` without creating a circular dependency through the\n * index. See card.variants.ts for the same pattern + the SSR symptom that\n * motivated the split.\n *\n * Layout: composition children (svg + AlertTitle + AlertDescription) are\n * direct descendants of the root so `[&>svg]` absolute positioning works.\n */\nexport const alertVariants = cva(\n  'relative w-full rounded-lg border p-4 text-sm [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:size-4 [&>svg]:text-foreground [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px]',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background text-foreground border-border',\n        destructive: 'border-destructive/20 text-destructive bg-destructive/5 [&>svg]:text-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nexport type AlertVariants = VariantProps<typeof alertVariants>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/alert/alert.variants.ts"
    },
    {
      "path": "packages/registry-svelte/components/alert/index.ts",
      "content": "export { default as Alert, type AlertProps } from './Alert.svelte'\nexport { default as AlertDescription, type AlertDescriptionProps } from './AlertDescription.svelte'\nexport { default as AlertTitle, type AlertTitleProps } from './AlertTitle.svelte'\n\n// Re-export variant API from the sibling file (kept separate to avoid the\n// Alert.svelte <-> index.ts circular import that broke dev SSR for Card).\nexport { alertVariants, type AlertVariants } from './alert.variants'\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/alert/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority",
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Static, in-flow notice block with a leading icon, title, and description. Use for inline page-level messages — info banners, success confirmations, warning callouts. Two tones: `default` and `destructive`.",
  "categories": [
    "feedback"
  ]
}