Badge Glass

1/**
2 * BadgeGlass Component
3 *
4 * Glass-themed badge with:
5 * - Theme-aware styling via CSS variables (glass/light/aurora)
6 * - shadcn/ui compatible variants (default, secondary, destructive, outline)
7 * - Extended Glass UI variants (success, warning, info)
8 * - Size options
9 * - Optional animated dot
10 */
11 
12import { forwardRef, type ReactNode, type CSSProperties } from 'react';
13import { type VariantProps } from 'class-variance-authority';
14import { cn } from '@/lib/utils';
15import { badgeVariants, type BadgeVariant } from '@/lib/variants/badge-glass-variants';
16import '@/glass-theme.css';
17 
18// ========================================
19// CSS VARIABLE HELPERS
20// ========================================
21 
22type BadgeStyleVars = { bg: string; text: string; border: string };
23 
24const variantStyles: Record<BadgeVariant, BadgeStyleVars> = {
25  // shadcn/ui compatible variants
26  default: {
27    bg: 'var(--badge-default-bg)',
28    text: 'var(--badge-default-text)',
29    border: 'var(--badge-default-border)',
30  },
31  secondary: {
32    bg: 'var(--badge-secondary-bg)',
33    text: 'var(--badge-secondary-text)',
34    border: 'var(--badge-secondary-border)',
35  },
36  destructive: {
37    bg: 'var(--badge-destructive-bg)',
38    text: 'var(--badge-destructive-text)',
39    border: 'var(--badge-destructive-border)',
40  },
41  outline: {
42    bg: 'var(--badge-outline-bg)',
43    text: 'var(--badge-outline-text)',
44    border: 'var(--badge-outline-border)',
45  },
46  // Glass UI extended variants
47  success: {
48    bg: 'var(--badge-success-bg)',
49    text: 'var(--badge-success-text)',
50    border: 'var(--badge-success-border)',
51  },
52  warning: {
53    bg: 'var(--badge-warning-bg)',
54    text: 'var(--badge-warning-text)',
55    border: 'var(--badge-warning-border)',
56  },
57  info: {
58    bg: 'var(--badge-info-bg)',
59    text: 'var(--badge-info-text)',
60    border: 'var(--badge-info-border)',
61  },
62};
63 
64const getBadgeStyles = (variant: BadgeVariant): CSSProperties => {
65  const v = variantStyles[variant] || variantStyles.default;
66  return {
67    background: v.bg,
68    color: v.text,
69    border: `1px solid ${v.border}`,
70  };
71};
72 
73// ========================================
74// PROPS INTERFACE
75// ========================================
76 
77/**
78 * Props for the BadgeGlass component
79 *
80 * A glass-themed badge with semantic variants and optional animated status dot.
81 * Features shadcn/ui compatible variants plus extended Glass UI variants.
82 *
83 * @accessibility
84// … truncated