{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "flag-alert-glass",
  "type": "registry:component",
  "title": "Flag Alert Glass",
  "description": "Flag Alert Glass component with glass effects",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "components/glass/specialized/flag-alert-glass.tsx",
      "type": "registry:component",
      "content": "// ========================================\n// FLAG ALERT GLASS COMPONENT\n// Individual warning/danger flag alert\n// ========================================\n\nimport { forwardRef, useState, type CSSProperties } from 'react';\nimport { cn } from '@/lib/utils';\nimport { StatusIndicatorGlass, type StatusType } from './status-indicator-glass';\nimport '@/glass-theme.css';\n\nexport type FlagType = 'warning' | 'danger';\n\nexport interface FlagAlertGlassProps extends React.HTMLAttributes<HTMLDivElement> {\n  readonly type?: FlagType;\n  readonly title: string;\n  readonly description?: string;\n}\n\n// CSS variable maps for flag types\nconst flagVarMap: Record<\n  FlagType,\n  { bg: string; border: string; text: string; statusType: StatusType }\n> = {\n  danger: {\n    bg: 'var(--alert-danger-bg)',\n    border: 'var(--alert-danger-border)',\n    text: 'var(--alert-danger-text)',\n    statusType: 'red',\n  },\n  warning: {\n    bg: 'var(--alert-warning-bg)',\n    border: 'var(--alert-warning-border)',\n    text: 'var(--alert-warning-text)',\n    statusType: 'yellow',\n  },\n};\n\nexport const FlagAlertGlass = forwardRef<HTMLDivElement, FlagAlertGlassProps>(\n  ({ type = 'warning', title, description, className, ...props }, ref) => {\n    const [isHovered, setIsHovered] = useState(false);\n    const config = flagVarMap[type];\n\n    const alertStyles: CSSProperties = {\n      background: config.bg,\n      borderColor: config.border,\n      transform: isHovered ? 'translateX(4px)' : 'translateX(0)',\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'p-2.5 md:p-3 rounded-xl border transition-all duration-300 max-w-md',\n          className\n        )}\n        style={alertStyles}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        role=\"alert\"\n        {...props}\n      >\n        <div\n          className=\"flex items-center gap-1.5 md:gap-2 font-medium text-xs md:text-sm\"\n          style={{ color: config.text }}\n        >\n          <StatusIndicatorGlass type={config.statusType} />\n          {title}\n        </div>\n        {description && (\n          <p className=\"text-(length:--font-size-2xs) md:text-xs mt-0.5 md:mt-1 ml-4 md:ml-5 text-(--text-muted)\">\n            {description}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\n\nFlagAlertGlass.displayName = 'FlagAlertGlass';\n"
    }
  ],
  "categories": [
    "specialized"
  ]
}