{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-notification",
  "title": "Glass Notification",
  "description": "A customizable notification system with glass morphism styling, allowing for different types of messages and actions.",
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/innovative/glass-notification.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { X, CheckCircle, AlertCircle, AlertTriangle, Info } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\n\ntype NotificationType = \"success\" | \"error\" | \"warning\" | \"info\"\ntype NotificationPosition = \"top-right\" | \"top-left\" | \"bottom-right\" | \"bottom-left\" | \"top-center\" | \"bottom-center\"\n\ninterface Notification {\n  id: string\n  type: NotificationType\n  title: string\n  description?: string\n  duration?: number\n}\n\ninterface NotificationContextType {\n  notifications: Notification[]\n  addNotification: (notification: Omit<Notification, \"id\">) => void\n  removeNotification: (id: string) => void\n}\n\nconst NotificationContext = React.createContext<NotificationContextType | null>(null)\n\nexport function useNotification() {\n  const context = React.useContext(NotificationContext)\n  if (!context) {\n    throw new Error(\"useNotification must be used within a GlassNotificationProvider\")\n  }\n  return context\n}\n\nexport function GlassNotificationProvider({\n  children,\n  position = \"bottom-right\",\n}: {\n  children: React.ReactNode\n  position?: NotificationPosition\n}) {\n  const [notifications, setNotifications] = React.useState<Notification[]>([])\n\n  const addNotification = React.useCallback((notification: Omit<Notification, \"id\">) => {\n    const id = Math.random().toString(36).substring(2, 9)\n    setNotifications((prev) => [...prev, { ...notification, id }])\n\n    if (notification.duration !== 0) {\n      setTimeout(() => {\n        setNotifications((prev) => prev.filter((n) => n.id !== id))\n      }, notification.duration || 5000)\n    }\n  }, [])\n\n  const removeNotification = React.useCallback((id: string) => {\n    setNotifications((prev) => prev.filter((n) => n.id !== id))\n  }, [])\n\n  return (\n    <NotificationContext.Provider value={{ notifications, addNotification, removeNotification }}>\n      {children}\n      <GlassNotificationContainer position={position} />\n    </NotificationContext.Provider>\n  )\n}\n\nconst typeConfig = {\n  success: {\n    icon: CheckCircle,\n    gradient: \"from-emerald-500/30 to-green-500/30\",\n    border: \"border-emerald-400/30\",\n    iconColor: \"text-emerald-400\",\n  },\n  error: {\n    icon: AlertCircle,\n    gradient: \"from-red-500/30 to-rose-500/30\",\n    border: \"border-red-400/30\",\n    iconColor: \"text-red-400\",\n  },\n  warning: {\n    icon: AlertTriangle,\n    gradient: \"from-amber-500/30 to-yellow-500/30\",\n    border: \"border-amber-400/30\",\n    iconColor: \"text-amber-400\",\n  },\n  info: {\n    icon: Info,\n    gradient: \"from-cyan-500/30 to-blue-500/30\",\n    border: \"border-cyan-400/30\",\n    iconColor: \"text-cyan-400\",\n  },\n}\n\nconst positionStyles: Record<NotificationPosition, { container: string; animation: string }> = {\n  \"top-right\": {\n    container: \"top-4 right-4\",\n    animation: \"slide-in-from-right-full\",\n  },\n  \"top-left\": {\n    container: \"top-4 left-4\",\n    animation: \"slide-in-from-left-full\",\n  },\n  \"bottom-right\": {\n    container: \"bottom-4 right-4\",\n    animation: \"slide-in-from-right-full\",\n  },\n  \"bottom-left\": {\n    container: \"bottom-4 left-4\",\n    animation: \"slide-in-from-left-full\",\n  },\n  \"top-center\": {\n    container: \"top-4 left-1/2 -translate-x-1/2\",\n    animation: \"slide-in-from-top-full\",\n  },\n  \"bottom-center\": {\n    container: \"bottom-4 left-1/2 -translate-x-1/2\",\n    animation: \"slide-in-from-bottom-full\",\n  },\n}\n\nfunction GlassNotificationContainer({ position = \"bottom-right\" }: { position?: NotificationPosition }) {\n  const { notifications, removeNotification } = useNotification()\n  const positionConfig = positionStyles[position]\n\n  return (\n    <div\n      className={cn(\"fixed z-50 flex flex-col gap-3 max-w-sm w-full pointer-events-none\", positionConfig.container)}\n      role=\"region\"\n      aria-label=\"Notifications\"\n    >\n      {notifications.map((notification, index) => (\n        <GlassNotificationItem\n          key={notification.id}\n          notification={notification}\n          onClose={() => removeNotification(notification.id)}\n          animationClass={positionConfig.animation}\n          style={{\n            transform: `scale(${1 - index * 0.02})`,\n            opacity: 1 - index * 0.1,\n          }}\n        />\n      ))}\n    </div>\n  )\n}\n\ninterface GlassNotificationItemProps {\n  notification: Notification\n  onClose: () => void\n  style?: React.CSSProperties\n  animationClass?: string\n}\n\nfunction GlassNotificationItem({\n  notification,\n  onClose,\n  style,\n  animationClass = \"slide-in-from-right-full\",\n}: GlassNotificationItemProps) {\n  const config = typeConfig[notification.type]\n  const Icon = config.icon\n  const [progress, setProgress] = React.useState(100)\n  const duration = notification.duration || 5000\n\n  React.useEffect(() => {\n    if (duration === 0) return\n\n    const interval = setInterval(() => {\n      setProgress((prev) => {\n        const newProgress = prev - 100 / (duration / 100)\n        return newProgress <= 0 ? 0 : newProgress\n      })\n    }, 100)\n\n    return () => clearInterval(interval)\n  }, [duration])\n\n  return (\n    <div\n      className={cn(\"pointer-events-auto animate-in fade-in duration-300\", animationClass)}\n      style={style}\n      role=\"alert\"\n    >\n      <div className=\"relative\">\n        <div className={cn(\"absolute -inset-1.5 rounded-xl bg-linear-to-r blur-xl opacity-60\", config.gradient)} />\n\n        {/* Main container with enhanced glass */}\n        <div\n          className={cn(\n            \"relative rounded-xl border\",\n            \"bg-white/10 backdrop-blur-2xl\",\n            \"shadow-[0_8px_32px_rgba(0,0,0,0.3),inset_0_1px_1px_rgba(255,255,255,0.15)]\",\n            \"overflow-hidden\",\n            config.border,\n          )}\n        >\n          {/* Glass highlight layers */}\n          <div className=\"absolute inset-0 rounded-xl bg-linear-to-b from-white/15 to-transparent pointer-events-none\" />\n          <div className=\"absolute inset-0 rounded-xl bg-linear-to-tr from-transparent to-white/10 pointer-events-none\" />\n\n          <div className=\"relative p-4 flex items-start gap-3\">\n            <div\n              className={cn(\n                \"flex items-center justify-center w-8 h-8 rounded-lg shrink-0\",\n                \"border border-white/10\",\n                `bg-linear-to-br ${config.gradient}`,\n              )}\n            >\n              <Icon className={cn(\"w-5 h-5\", config.iconColor)} aria-hidden=\"true\" />\n            </div>\n\n            <div className=\"flex-1 min-w-0\">\n              <h4 className=\"font-medium text-white\">{notification.title}</h4>\n              {notification.description && <p className=\"mt-1 text-sm text-white/60\">{notification.description}</p>}\n            </div>\n\n            <button\n              onClick={onClose}\n              aria-label=\"Dismiss notification\"\n              className=\"shrink-0 p-1.5 rounded-lg text-white/40 hover:text-white hover:bg-white/10 transition-colors\"\n            >\n              <X className=\"w-4 h-4\" />\n            </button>\n          </div>\n\n          {/* Progress bar */}\n          {duration !== 0 && (\n            <div className=\"h-1 bg-white/5\">\n              <div\n                className={cn(\"h-full transition-all duration-100 ease-linear\", `bg-linear-to-r ${config.gradient}`)}\n                style={{ width: `${progress}%` }}\n                role=\"progressbar\"\n                aria-valuenow={progress}\n                aria-valuemin={0}\n                aria-valuemax={100}\n              />\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\n// Standalone notification component for demos\nexport function GlassNotification({\n  type = \"info\",\n  title,\n  description,\n  className,\n}: {\n  type?: NotificationType\n  title: string\n  description?: string\n  className?: string\n}) {\n  const config = typeConfig[type]\n  const Icon = config.icon\n\n  return (\n    <div className={cn(\"relative\", className)}>\n      <div className={cn(\"absolute -inset-1.5 rounded-xl bg-linear-to-r blur-xl opacity-60\", config.gradient)} />\n      <div\n        className={cn(\n          \"relative rounded-xl border\",\n          \"bg-white/10 backdrop-blur-2xl\",\n          \"shadow-[0_8px_32px_rgba(0,0,0,0.3),inset_0_1px_1px_rgba(255,255,255,0.15)]\",\n          config.border,\n        )}\n      >\n        <div className=\"absolute inset-0 rounded-xl bg-linear-to-b from-white/15 to-transparent pointer-events-none\" />\n        <div className=\"relative p-4 flex items-start gap-3\">\n          <div\n            className={cn(\n              \"flex items-center justify-center w-8 h-8 rounded-lg shrink-0 border border-white/10\",\n              `bg-linear-to-br ${config.gradient}`,\n            )}\n          >\n            <Icon className={cn(\"w-5 h-5\", config.iconColor)} />\n          </div>\n          <div className=\"flex-1 min-w-0\">\n            <h4 className=\"font-medium text-white\">{title}</h4>\n            {description && <p className=\"mt-1 text-sm text-white/60\">{description}</p>}\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport { GlassNotificationItem }\nexport type { NotificationPosition }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}