{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "notification-glass",
  "type": "registry:ui",
  "title": "Notification Glass",
  "description": "Glass-themed toast notification with variant-based styling, icons, and dismiss functionality.\n * Provides visual feedback for user actions and system events.\n *\n * ## Features",
  "dependencies": [
    "class-variance-authority",
    "lucide-react",
    "react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn",
    "primitives",
    "use-hover",
    "variants"
  ],
  "files": [
    {
      "path": "components/glass/ui/notification-glass.tsx",
      "type": "registry:component",
      "content": "/**\n * NotificationGlass Component\n *\n * Glass-themed toast notification with variant-based styling, icons, and dismiss functionality.\n * Provides visual feedback for user actions and system events.\n *\n * ## Features\n * - **shadcn/ui Compatible** - Variant API (default, destructive, success, warning)\n * - **Theme-aware styling** - Works with all 3 themes (glass, light, aurora) via CSS variables\n * - **Variant-specific icons** - Info (default), CheckCircle (success), AlertTriangle (warning), AlertCircle (error)\n * - **Glow effects on hover** - Variant-specific glow colors (blue, green, yellow, red)\n * - **Dismissible** - Close button with X icon\n * - **Responsive sizing** - Different text/icon sizes for mobile and desktop\n * - **ARIA support** - role=\"alert\", aria-live=\"polite\" for screen reader announcements\n *\n * ## CSS Variables\n * Customize styling via theme CSS variables:\n * - `--notification-bg` - Notification background color\n * - `--notification-border` - Notification border color\n * - `--notification-shadow` - Default box shadow\n * - `--notification-info-color` - Info icon color (blue)\n * - `--notification-info-icon-bg` - Info icon background\n * - `--notification-info-glow` - Info hover glow\n * - `--notification-success-color` - Success icon color (green)\n * - `--notification-success-icon-bg` - Success icon background\n * - `--notification-success-glow` - Success hover glow\n * - `--notification-warning-color` - Warning icon color (yellow)\n * - `--notification-warning-icon-bg` - Warning icon background\n * - `--notification-warning-glow` - Warning hover glow\n * - `--notification-error-color` - Error icon color (red)\n * - `--notification-error-icon-bg` - Error icon background\n * - `--notification-error-glow` - Error hover glow\n * - `--text-primary`, `--text-secondary`, `--text-muted` - Text colors\n *\n * @example Basic usage (default variant)\n * ```tsx\n * import { NotificationGlass } from 'shadcn-glass-ui'\n *\n * function MyComponent() {\n *   const [showNotif, setShowNotif] = useState(true)\n *\n *   return showNotif ? (\n *     <NotificationGlass\n *       variant=\"default\"\n *       title=\"New update available\"\n *       message=\"Version 2.0 is ready to install with new features.\"\n *       onClose={() => setShowNotif(false)}\n *     />\n *   ) : null\n * }\n * ```\n *\n * @example Success notification\n * ```tsx\n * <NotificationGlass\n *   variant=\"success\"\n *   title=\"Payment successful\"\n *   message=\"Your payment has been processed successfully.\"\n *   onClose={() => console.log('Closed')}\n * />\n * ```\n *\n * @example Warning notification\n * ```tsx\n * <NotificationGlass\n *   variant=\"warning\"\n *   title=\"Storage almost full\"\n *   message=\"You're using 90% of your available storage.\"\n *   onClose={() => console.log('Closed')}\n * />\n * ```\n *\n * @example Destructive (error) notification\n * ```tsx\n * <NotificationGlass\n *   variant=\"destructive\"\n *   title=\"Connection failed\"\n *   message=\"Unable to connect to the server. Please try again.\"\n *   onClose={() => console.log('Closed')}\n * />\n * ```\n *\n * @accessibility\n * - **Screen Readers:** role=\"alert\" and aria-live=\"polite\" announce notifications to screen readers\n * - **Keyboard Navigation:** Close button is keyboard accessible (Tab to focus, Enter/Space to activate)\n * - **Focus Management:** Close button receives focus outline on keyboard navigation\n * - **ARIA Labels:** Close button has aria-label=\"Close notification\" for screen readers\n * - **Touch Targets:** Close button meets minimum 44x44px touch target (WCAG 2.5.5)\n * - **Color Contrast:** All text and icons meet WCAG AA contrast ratio 4.5:1 minimum\n * - **Motion:** Hover transform animation respects `prefers-reduced-motion` settings\n *\n * @since v1.0.0\n */\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 { useHover } from '@/lib/hooks/use-hover';\nimport { notificationVariants } from '@/lib/variants/notification-glass-variants';\nimport { ICON_SIZES } from '@/components/glass/primitives';\nimport '@/glass-theme.css';\n\nimport type { NotificationType } from '@/lib/variants/notification-glass-variants';\n\n// ========================================\n// CONSTANTS\n// ========================================\n\nconst NOTIFICATION_ICONS = {\n  info: Info,\n  success: CheckCircle,\n  warning: AlertTriangle,\n  error: AlertCircle,\n} as const;\n\n// ========================================\n// PROPS INTERFACE\n// ========================================\n\n/**\n * Props for the NotificationGlass component.\n *\n * Toast notification with variant-based styling, icons, and dismiss functionality.\n *\n * @example\n * ```tsx\n * const props: NotificationGlassProps = {\n *   variant: 'success',\n *   title: 'Success',\n *   message: 'Operation completed successfully',\n *   onClose: () => console.log('Closed'),\n * };\n * ```\n */\nexport interface NotificationGlassProps\n  extends\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'style'>,\n    VariantProps<typeof notificationVariants> {\n  /**\n   * Notification title displayed in bold.\n   */\n  readonly title: string;\n\n  /**\n   * Notification message displayed below the title.\n   */\n  readonly message: string;\n\n  /**\n   * Notification variant (shadcn/ui compatible).\n   * - `default` - Info notification (blue)\n   * - `destructive` - Error notification (red)\n   * - `success` - Success notification (green)\n   * - `warning` - Warning notification (yellow)\n   *\n   * @default \"default\"\n   */\n  readonly variant?: 'default' | 'destructive' | 'success' | 'warning';\n\n  /**\n   * @deprecated Use variant prop instead. Will be removed in next major version.\n   */\n  readonly type?: NotificationType;\n\n  /**\n   * Callback function when the close button is clicked.\n   */\n  readonly onClose: () => void;\n}\n\n// ========================================\n// COMPONENT\n// ========================================\n\n// Type-specific CSS variable mapping\nconst getTypeVars = (\n  notifType: NotificationType\n): { color: string; glow: string; iconBg: string } => {\n  const configs: Record<NotificationType, { color: string; glow: string; iconBg: string }> = {\n    info: {\n      color: 'var(--notification-info-color)',\n      glow: 'var(--notification-info-glow)',\n      iconBg: 'var(--notification-info-icon-bg)',\n    },\n    success: {\n      color: 'var(--notification-success-color)',\n      glow: 'var(--notification-success-glow)',\n      iconBg: 'var(--notification-success-icon-bg)',\n    },\n    warning: {\n      color: 'var(--notification-warning-color)',\n      glow: 'var(--notification-warning-glow)',\n      iconBg: 'var(--notification-warning-icon-bg)',\n    },\n    error: {\n      color: 'var(--notification-error-color)',\n      glow: 'var(--notification-error-glow)',\n      iconBg: 'var(--notification-error-icon-bg)',\n    },\n  };\n  return configs[notifType];\n};\n\nexport const NotificationGlass = forwardRef<HTMLDivElement, NotificationGlassProps>(\n  ({ variant: variantProp, type: typeProp, title, message, onClose, className, ...props }, ref) => {\n    // Backward compatibility: support deprecated 'type' prop\n    const variant = variantProp ?? typeProp ?? 'default';\n\n    // Show deprecation warning in development\n    if (process.env.NODE_ENV === 'development' && typeProp) {\n      console.warn(\n        'NotificationGlass: The \"type\" prop is deprecated. Use \"variant\" instead. Example: <NotificationGlass variant=\"destructive\" />'\n      );\n    }\n\n    // Map variant to internal notification type\n    const variantToType: Record<string, NotificationType> = {\n      default: 'info',\n      destructive: 'error',\n      success: 'success',\n      warning: 'warning',\n      // Backward compatibility aliases\n      info: 'info',\n      error: 'error',\n    };\n\n    const effectiveType: NotificationType = variantToType[variant] || 'info';\n\n    const { isHovered, hoverProps } = useHover();\n    const Icon = NOTIFICATION_ICONS[effectiveType];\n    const config = getTypeVars(effectiveType);\n\n    const containerStyles: CSSProperties = {\n      background: 'var(--notification-bg)',\n      border: '1px solid var(--notification-border)',\n      boxShadow: isHovered ? config.glow : 'var(--notification-shadow)',\n      transform: isHovered ? 'translateY(-2px)' : 'translateY(0)',\n    };\n\n    const iconContainerStyles: CSSProperties = {\n      background: config.iconBg,\n      boxShadow: isHovered ? config.glow : 'none',\n    };\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"notification\"\n        className={cn(notificationVariants({ type: effectiveType }), className)}\n        style={containerStyles}\n        role=\"alert\"\n        aria-live=\"polite\"\n        onMouseEnter={hoverProps.onMouseEnter}\n        onMouseLeave={hoverProps.onMouseLeave}\n        {...props}\n      >\n        {/* Icon with glow */}\n        <div\n          className=\"w-8 h-8 md:w-10 md:h-10 rounded-xl flex items-center justify-center shrink-0\"\n          style={iconContainerStyles}\n        >\n          <Icon className=\"w-4 h-4 md:w-5 md:h-5\" style={{ color: config.color }} />\n        </div>\n\n        {/* Content */}\n        <div className=\"flex-1 min-w-0\">\n          <p\n            className=\"font-semibold text-xs md:text-sm mb-0.5 md:mb-1\"\n            style={{ color: 'var(--text-primary)' }}\n          >\n            {title}\n          </p>\n          <p className=\"text-xs md:text-sm\" style={{ color: 'var(--text-secondary)' }}>\n            {message}\n          </p>\n        </div>\n\n        {/* Close button */}\n        <button\n          onClick={onClose}\n          className=\"p-1 md:p-1.5 rounded-lg shrink-0\"\n          style={{ color: 'var(--text-muted)' }}\n          type=\"button\"\n          aria-label=\"Close notification\"\n        >\n          <X className={ICON_SIZES.md} />\n        </button>\n      </div>\n    );\n  }\n);\n\nNotificationGlass.displayName = 'NotificationGlass';\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"
    }
  }
}