{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "badge-glass",
  "type": "registry:ui",
  "title": "Badge Glass",
  "description": "Glass-themed badge with:",
  "dependencies": [
    "class-variance-authority",
    "react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn",
    "variants"
  ],
  "files": [
    {
      "path": "components/glass/ui/badge-glass.tsx",
      "type": "registry:component",
      "content": "/**\n * BadgeGlass Component\n *\n * Glass-themed badge with:\n * - Theme-aware styling via CSS variables (glass/light/aurora)\n * - shadcn/ui compatible variants (default, secondary, destructive, outline)\n * - Extended Glass UI variants (success, warning, info)\n * - Size options\n * - Optional animated dot\n */\n\nimport { forwardRef, type ReactNode, type CSSProperties } from 'react';\nimport { type VariantProps } from 'class-variance-authority';\nimport { cn } from '@/lib/utils';\nimport { badgeVariants, type BadgeVariant } from '@/lib/variants/badge-glass-variants';\nimport '@/glass-theme.css';\n\n// ========================================\n// CSS VARIABLE HELPERS\n// ========================================\n\ntype BadgeStyleVars = { bg: string; text: string; border: string };\n\nconst variantStyles: Record<BadgeVariant, BadgeStyleVars> = {\n  // shadcn/ui compatible variants\n  default: {\n    bg: 'var(--badge-default-bg)',\n    text: 'var(--badge-default-text)',\n    border: 'var(--badge-default-border)',\n  },\n  secondary: {\n    bg: 'var(--badge-secondary-bg)',\n    text: 'var(--badge-secondary-text)',\n    border: 'var(--badge-secondary-border)',\n  },\n  destructive: {\n    bg: 'var(--badge-destructive-bg)',\n    text: 'var(--badge-destructive-text)',\n    border: 'var(--badge-destructive-border)',\n  },\n  outline: {\n    bg: 'var(--badge-outline-bg)',\n    text: 'var(--badge-outline-text)',\n    border: 'var(--badge-outline-border)',\n  },\n  // Glass UI extended variants\n  success: {\n    bg: 'var(--badge-success-bg)',\n    text: 'var(--badge-success-text)',\n    border: 'var(--badge-success-border)',\n  },\n  warning: {\n    bg: 'var(--badge-warning-bg)',\n    text: 'var(--badge-warning-text)',\n    border: 'var(--badge-warning-border)',\n  },\n  info: {\n    bg: 'var(--badge-info-bg)',\n    text: 'var(--badge-info-text)',\n    border: 'var(--badge-info-border)',\n  },\n};\n\nconst getBadgeStyles = (variant: BadgeVariant): CSSProperties => {\n  const v = variantStyles[variant] || variantStyles.default;\n  return {\n    background: v.bg,\n    color: v.text,\n    border: `1px solid ${v.border}`,\n  };\n};\n\n// ========================================\n// PROPS INTERFACE\n// ========================================\n\n/**\n * Props for the BadgeGlass component\n *\n * A glass-themed badge with semantic variants and optional animated status dot.\n * Features shadcn/ui compatible variants plus extended Glass UI variants.\n *\n * @accessibility\n * - **Keyboard Navigation:** Badges are non-interactive by default (display-only)\n * - **Focus Management:** N/A - badges do not receive focus unless wrapped in interactive elements\n * - **Screen Readers:** Semantic `<span>` element, content announced naturally\n * - **Status Indicators:** Use `aria-label` to provide context for status badges (e.g., \"Status: Active\")\n * - **Animated Dot:** Pulse animation respects `prefers-reduced-motion` settings\n * - **Touch Targets:** N/A for display badges, ensure 44x44px if wrapping in button/link (WCAG 2.5.5)\n * - **Color Contrast:** All variant text meets WCAG AA contrast ratio 4.5:1 against badge background\n * - **Motion:** Dot pulse animation can be disabled for users with motion sensitivity\n *\n * @example\n * ```tsx\n * // Basic badge with variant\n * <BadgeGlass variant=\"default\">New</BadgeGlass>\n *\n * // Status badge with aria-label for screen readers\n * <BadgeGlass variant=\"success\" aria-label=\"Status: Active\">\n *   Active\n * </BadgeGlass>\n *\n * // Different variants (shadcn/ui compatible)\n * <BadgeGlass variant=\"default\">Default</BadgeGlass>\n * <BadgeGlass variant=\"secondary\">Secondary</BadgeGlass>\n * <BadgeGlass variant=\"destructive\">Error</BadgeGlass>\n * <BadgeGlass variant=\"outline\">Outline</BadgeGlass>\n *\n * // Extended Glass UI variants\n * <BadgeGlass variant=\"success\">Success</BadgeGlass>\n * <BadgeGlass variant=\"warning\">Warning</BadgeGlass>\n * <BadgeGlass variant=\"info\">Info</BadgeGlass>\n *\n * // With animated status dot\n * <BadgeGlass variant=\"success\" dot aria-label=\"Status: Online\">\n *   Online\n * </BadgeGlass>\n * <BadgeGlass variant=\"destructive\" dot aria-label=\"Status: Offline\">\n *   Offline\n * </BadgeGlass>\n *\n * // Size variants\n * <BadgeGlass size=\"sm\">Small</BadgeGlass>\n * <BadgeGlass size=\"default\">Medium</BadgeGlass>\n * <BadgeGlass size=\"lg\">Large</BadgeGlass>\n *\n * // Inside interactive elements (ensure accessible labels)\n * <button aria-label=\"Filter by active status\">\n *   Filter: <BadgeGlass variant=\"success\">Active</BadgeGlass>\n * </button>\n *\n * // Count badge with semantic meaning\n * <div>\n *   <span>Notifications</span>\n *   <BadgeGlass variant=\"destructive\" aria-label=\"3 unread notifications\">\n *     3\n *   </BadgeGlass>\n * </div>\n * ```\n */\nexport interface BadgeGlassProps\n  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'style'>, VariantProps<typeof badgeVariants> {\n  readonly children: ReactNode;\n  readonly variant?: BadgeVariant;\n  readonly dot?: boolean;\n}\n\n// ========================================\n// COMPONENT\n// ========================================\n\nexport const BadgeGlass = forwardRef<HTMLSpanElement, BadgeGlassProps>(\n  ({ children, className, variant = 'default', size = 'md', dot, ...props }, ref) => {\n    const v = variantStyles[variant];\n\n    return (\n      <span\n        ref={ref}\n        data-slot=\"badge\"\n        className={cn(badgeVariants({ size }), className)}\n        style={getBadgeStyles(variant)}\n        {...props}\n      >\n        {dot && (\n          <span\n            className=\"w-1 h-1 md:w-1.5 md:h-1.5 rounded-full animate-pulse\"\n            style={{ background: v.text }}\n          />\n        )}\n        {children}\n      </span>\n    );\n  }\n);\n\nBadgeGlass.displayName = 'BadgeGlass';\n\n/**\n * Badge - shadcn/ui compatible alias for BadgeGlass\n *\n * @example\n * ```tsx\n * import { Badge } from 'shadcn-glass-ui'\n *\n * <Badge variant=\"default\">Default</Badge>\n * <Badge variant=\"destructive\">Error</Badge>\n * <Badge variant=\"success\">Success</Badge>\n * ```\n *\n * @since v2.6.0\n */\nexport const Badge = BadgeGlass;\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"
    }
  }
}