aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
36 lines (33 loc) • 1.52 kB
JavaScript
'use client';
import { jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { cn } from '../../lib/utilsComprehensive.js';
import { useA11yId } from '../../utils/a11y.js';
const GlassBadgeLine = /*#__PURE__*/forwardRef(({
// TODO: Integrate ContrastGuard for table cells, list items, badges, card titles, and other text content for WCAG AA compliance
items: incomingItems = [],
'aria-label': ariaLabel,
className,
...props
}, ref) => {
const badgeLineId = useA11yId('badge-line');
const items = Array.isArray(incomingItems) ? incomingItems : [];
return jsx("div", {
"data-glass-component": true,
ref: ref,
id: badgeLineId,
className: cn('flex flex-wrap glass-gap-1', className),
role: "list",
"aria-label": ariaLabel || 'Badge list',
...props,
children: items.map((it, i) => jsx("span", {
className: cn('glass-px-2 glass-py-0.5 glass-text-xs glass-radius-full border', it.intent === 'success' ? 'bg-emerald-500/15 text-emerald-300 border-emerald-400/30' : it.intent === 'warning' ? 'bg-amber-500/15 text-amber-300 border-amber-400/30' : it.intent === 'danger' ? 'bg-red-500/15 text-red-300 border-red-400/30' : 'bg-white/10 glass-text-primary/80 border-white/20'),
role: "listitem",
"aria-label": `${it.intent || 'default'} badge: ${it.label}`,
children: it.label
}, i))
});
});
GlassBadgeLine.displayName = 'GlassBadgeLine';
export { GlassBadgeLine, GlassBadgeLine as default };
//# sourceMappingURL=GlassBadgeLine.js.map