{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-glass",
  "type": "registry:ui",
  "title": "Alert Glass",
  "description": "Glass-themed alert with:",
  "dependencies": [
    "class-variance-authority",
    "lucide-react",
    "react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn",
    "primitives",
    "variants"
  ],
  "files": [
    {
      "path": "components/glass/ui/alert-glass.tsx",
      "type": "registry:component",
      "content": "/**\n * AlertGlass Component\n *\n * Glass-themed alert with:\n * - Theme-aware styling via CSS variables (glass/light/aurora)\n * - shadcn/ui compatible variants (default, destructive)\n * - Extended Glass UI variants (success, warning)\n * - Compound component API for flexible composition\n * - Dismissible option\n * - Backdrop blur effect\n *\n * @example Compound API (recommended)\n * ```tsx\n * <AlertGlass variant=\"default\">\n *   <AlertGlassTitle>Heads up!</AlertGlassTitle>\n *   <AlertGlassDescription>\n *     You can add components to your app using the cli.\n *   </AlertGlassDescription>\n * </AlertGlass>\n * ```\n *\n * @example With dismiss button\n * ```tsx\n * <AlertGlass variant=\"destructive\" dismissible onDismiss={() => setShow(false)}>\n *   <AlertGlassTitle>Error</AlertGlassTitle>\n *   <AlertGlassDescription>\n *     Your session has expired.\n *   </AlertGlassDescription>\n * </AlertGlass>\n * ```\n */\n\n'use client';\n\nimport { forwardRef, type CSSProperties } from 'react';\nimport { type VariantProps } from 'class-variance-authority';\nimport { Info, CheckCircle, AlertTriangle, AlertCircle, X } from 'lucide-react';\nimport { cn } from '@/lib/utils';\nimport { alertVariants } from '@/lib/variants/alert-glass-variants';\nimport { ICON_SIZES } from '@/components/glass/primitives';\nimport '@/glass-theme.css';\n\nimport type { AlertVariant } from '@/lib/variants/alert-glass-variants';\n\n// ========================================\n// ICON MAP\n// ========================================\n\nconst iconMap: Record<AlertVariant, typeof Info> = {\n  default: Info,\n  destructive: AlertCircle,\n  success: CheckCircle,\n  warning: AlertTriangle,\n  // Aliases\n  info: Info,\n  error: AlertCircle,\n};\n\n// ========================================\n// CSS VARIABLE HELPERS\n// ========================================\n\ntype AlertStyleVars = { bg: string; border: string; text: string };\n\nconst variantStyles: Record<AlertVariant, AlertStyleVars> = {\n  // shadcn/ui compatible variants\n  default: {\n    bg: 'var(--alert-default-bg)',\n    border: 'var(--alert-default-border)',\n    text: 'var(--alert-default-text)',\n  },\n  destructive: {\n    bg: 'var(--alert-destructive-bg)',\n    border: 'var(--alert-destructive-border)',\n    text: 'var(--alert-destructive-text)',\n  },\n  // Glass UI extended variants\n  success: {\n    bg: 'var(--alert-success-bg)',\n    border: 'var(--alert-success-border)',\n    text: 'var(--alert-success-text)',\n  },\n  warning: {\n    bg: 'var(--alert-warning-bg)',\n    border: 'var(--alert-warning-border)',\n    text: 'var(--alert-warning-text)',\n  },\n  // Backward compatibility aliases\n  info: {\n    bg: 'var(--alert-default-bg)',\n    border: 'var(--alert-default-border)',\n    text: 'var(--alert-default-text)',\n  },\n  error: {\n    bg: 'var(--alert-destructive-bg)',\n    border: 'var(--alert-destructive-border)',\n    text: 'var(--alert-destructive-text)',\n  },\n};\n\nconst getAlertStyles = (variant: AlertVariant): CSSProperties => {\n  const config = variantStyles[variant];\n  return {\n    background: config.bg,\n    border: `1px solid ${config.border}`,\n    color: config.text,\n  };\n};\n\n// ========================================\n// COMPOUND COMPONENT: ROOT\n// ========================================\n\nexport interface AlertGlassProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'>, VariantProps<typeof alertVariants> {\n  dismissible?: boolean;\n  onDismiss?: () => void;\n}\n\nconst AlertGlassRoot = forwardRef<HTMLDivElement, AlertGlassProps>(\n  ({ className, variant = 'default', dismissible, onDismiss, children, ...props }, ref) => {\n    const effectiveVariant: AlertVariant = variant ?? 'default';\n    const Icon = iconMap[effectiveVariant];\n    const config = variantStyles[effectiveVariant];\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"alert\"\n        className={cn(alertVariants({ variant: effectiveVariant }), className)}\n        style={getAlertStyles(effectiveVariant)}\n        role=\"alert\"\n        {...props}\n      >\n        <Icon\n          className=\"w-4 h-4 md:w-5 md:h-5 shrink-0 mt-0.5\"\n          style={{ color: config.text }}\n          aria-hidden=\"true\"\n        />\n        <div className=\"flex-1\">{children}</div>\n        {dismissible && (\n          <button\n            onClick={onDismiss}\n            className=\"p-0.5 md:p-1 rounded transition-colors duration-200 hover:bg-black/5 shrink-0\"\n            aria-label=\"Dismiss alert\"\n          >\n            <X className={ICON_SIZES.md} style={{ color: config.text }} />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n\nAlertGlassRoot.displayName = 'AlertGlass';\n\n// ========================================\n// COMPOUND COMPONENT: TITLE\n// ========================================\n\nexport type AlertGlassTitleProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst AlertGlassTitle = forwardRef<HTMLDivElement, AlertGlassTitleProps>(\n  ({ className, style, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"alert-title\"\n        className={cn('font-medium text-xs md:text-sm mb-0.5 md:mb-1', className)}\n        style={{ color: 'inherit', ...style }}\n        {...props}\n      />\n    );\n  }\n);\n\nAlertGlassTitle.displayName = 'AlertGlassTitle';\n\n// ========================================\n// COMPOUND COMPONENT: DESCRIPTION\n// ========================================\n\nexport type AlertGlassDescriptionProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst AlertGlassDescription = forwardRef<HTMLDivElement, AlertGlassDescriptionProps>(\n  ({ className, style, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"alert-description\"\n        className={cn('text-xs md:text-sm opacity-80', className)}\n        style={{ color: 'inherit', ...style }}\n        {...props}\n      />\n    );\n  }\n);\n\nAlertGlassDescription.displayName = 'AlertGlassDescription';\n\n// ========================================\n// EXPORTS\n// ========================================\n\n// Compound API (shadcn/ui pattern)\nexport const AlertGlass = AlertGlassRoot;\nexport { AlertGlassTitle, AlertGlassDescription };\n\n// ========================================\n// SHADCN/UI COMPATIBLE ALIASES\n// ========================================\n\n/**\n * Alert - shadcn/ui compatible alias for AlertGlass\n *\n * @example\n * ```tsx\n * import { Alert, AlertTitle, AlertDescription } from 'shadcn-glass-ui'\n *\n * <Alert variant=\"destructive\">\n *   <AlertTitle>Error</AlertTitle>\n *   <AlertDescription>Something went wrong.</AlertDescription>\n * </Alert>\n * ```\n *\n * @since v2.6.0\n */\nexport const Alert = AlertGlass;\nexport const AlertTitle = AlertGlassTitle;\nexport const AlertDescription = AlertGlassDescription;\n"
    }
  ],
  "categories": [
    "ui"
  ],
  "cssVars": {
    "light": {
      "--glass-bg": "rgba(255, 255, 255, 0.1)",
      "--glass-border": "rgba(255, 255, 255, 0.2)",
      "--blur-sm": "8px",
      "--blur-md": "16px",
      "--blur-lg": "24px"
    },
    "dark": {
      "--glass-bg": "rgba(255, 255, 255, 0.05)",
      "--glass-border": "rgba(255, 255, 255, 0.1)",
      "--blur-sm": "8px",
      "--blur-md": "16px",
      "--blur-lg": "24px"
    }
  }
}