{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert",
  "type": "registry:ui",
  "title": "Alert",
  "description": "Alert banner primitives for Tile UI.",
  "devDependencies": [
    "sass"
  ],
  "registryDependencies": [
    "@tile-ui/core",
    "@tile-ui/styles"
  ],
  "files": [
    {
      "path": "packages/react/src/components/alert/alert.tsx",
      "type": "registry:ui",
      "target": "components/ui/alert/alert.tsx",
      "content": "import React from 'react';\nimport { alertStyleKeys, getAlertStyleKeys } from '../lib/core';\nimport type { AlertBaseProps } from '../lib/core';\nimport styles from './alert.module.scss';\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, AlertBaseProps {}\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(({ className = '', variant = 'default', children, ...props }, ref) => {\n\tconst styleKeys = getAlertStyleKeys(variant);\n\tconst classes = [styles[styleKeys.base], styles[styleKeys.variant], className].filter(Boolean).join(' ');\n\n\treturn (\n\t\t<div ref={ref} role=\"alert\" data-slot=\"alert\" data-variant={variant} className={classes} {...props}>\n\t\t\t{children}\n\t\t</div>\n\t);\n});\nAlert.displayName = 'Alert';\n\nexport interface AlertTitleProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst AlertTitle = React.forwardRef<HTMLDivElement, AlertTitleProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<div ref={ref} data-slot=\"alert-title\" className={`${styles[alertStyleKeys.title]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</div>\n\t);\n});\nAlertTitle.displayName = 'AlertTitle';\n\nexport interface AlertDescriptionProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst AlertDescription = React.forwardRef<HTMLDivElement, AlertDescriptionProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<div ref={ref} data-slot=\"alert-description\" className={`${styles[alertStyleKeys.description]} ${className}`} {...props}>\n\t\t\t{children}\n\t\t</div>\n\t);\n});\nAlertDescription.displayName = 'AlertDescription';\n\nexport { Alert, AlertTitle, AlertDescription };\nexport default Alert;\n"
    },
    {
      "path": "packages/styles/scss/components/alert.module.scss",
      "type": "registry:file",
      "target": "components/ui/alert/alert.module.scss",
      "content": "@use '../../../styles/variables/colors' as *;\n\n// Alert 根容器：网格布局，直接子 svg 图标占据首列\n.alert {\n\tposition: relative;\n\tdisplay: grid;\n\twidth: 100%;\n\tgrid-template-columns: 0 1fr;\n\talign-items: start;\n\tgap: $spacing-1;\n\tborder-radius: var(--tile-alert-radius, $radius);\n\tborder: 1px solid transparent;\n\tpadding: var(--tile-alert-padding, $spacing-3 $spacing-4);\n\tfont-size: var(--tile-alert-font-size, $text-sm);\n\n\t// 存在直接子 SVG 图标时启用图标列\n\t&:has(> svg) {\n\t\tgrid-template-columns: $spacing-4 1fr;\n\t\tgap: $spacing-3;\n\t}\n\n\t> svg {\n\t\twidth: $spacing-4;\n\t\theight: $spacing-4;\n\t\ttransform: translateY(2px);\n\t\tcolor: currentColor;\n\t}\n\n\t// 样式变体\n\t&.variantDefault {\n\t\tbackground-color: var(--tile-alert-background, $card);\n\t\tcolor: var(--tile-alert-color, $card-foreground);\n\t\tborder-color: var(--tile-alert-border, $border);\n\t}\n\n\t&.variantDestructive {\n\t\tbackground-color: var(--tile-alert-error-background, $card);\n\t\tcolor: var(--tile-alert-error-color, $destructive);\n\t\tborder-color: var(--tile-alert-error-border, color-mix(in srgb, $destructive 30%, transparent));\n\n\t\t.description {\n\t\t\tcolor: var(--tile-alert-error-color, $destructive-muted-foreground);\n\t\t}\n\t}\n}\n\n// 标题与描述统一放在第二列\n.title,\n.description {\n\tgrid-column-start: 2;\n}\n\n// 标题\n.title {\n\tmin-height: $spacing-4;\n\tfont-weight: $font-medium;\n\tline-height: var(--tile-alert-title-leading, $leading-tight);\n\tletter-spacing: var(--tile-alert-title-tracking, -0.01em);\n\toverflow-wrap: anywhere;\n}\n\n// 描述\n.description {\n\tdisplay: grid;\n\tjustify-items: start;\n\tgap: $spacing-1;\n\tfont-size: $text-sm;\n\tline-height: var(--tile-alert-description-leading, $leading-relaxed);\n\tcolor: var(--tile-alert-description-color, $muted-foreground);\n\n\tp {\n\t\tline-height: var(--tile-alert-description-leading, $leading-relaxed);\n\t}\n}\n"
    },
    {
      "path": "packages/react/src/components/alert/index.ts",
      "type": "registry:ui",
      "target": "components/ui/alert/index.ts",
      "content": "export { Alert, AlertTitle, AlertDescription, type AlertProps, type AlertTitleProps, type AlertDescriptionProps } from './alert';\n"
    }
  ]
}