aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
63 lines (60 loc) • 2.42 kB
JavaScript
'use client';
import { jsx, jsxs } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { cn } from '../../lib/utilsComprehensive.js';
import { GlassButton } from '../button/GlassButton.js';
import '../../primitives/GlassCore.js';
import '../../primitives/glass/GlassAdvanced.js';
import { OptimizedGlassCore } from '../../primitives/OptimizedGlassCore.js';
import '../../primitives/glass/OptimizedGlassAdvanced.js';
import '../../primitives/MotionNative.js';
import '../../primitives/motion/MotionFramer.js';
import { useA11yId } from '../../utils/a11y.js';
import { useReducedMotion } from '../../hooks/useReducedMotion.js';
const GlassSegmentedControl = /*#__PURE__*/forwardRef(({
items,
value,
onChange,
size = 'md',
condensed = false,
respectMotionPreference = true,
className
}, ref) => {
// Accessibility and motion preferences
const segmentedId = useA11yId('segmented-control');
const prefersReducedMotion = useReducedMotion();
const shouldReduceMotion = respectMotionPreference && prefersReducedMotion;
const sizes = {
sm: 'h-8 glass-text-xs',
md: 'h-9 glass-text-sm',
lg: 'h-10 glass-text-base'
};
return jsx(OptimizedGlassCore, {
ref: ref,
elevation: 'level1',
animation: shouldReduceMotion ? 'none' : 'gentle',
role: "group",
"aria-label": "Segmented control",
id: segmentedId,
className: cn(
// Avoid clipping child button content (icons/text) against glass-radius-md corners
'inline-flex items-center glass-radius-xl glass-p-1 glass-gap-1 overflow-visible', className),
children: items.map(it => jsxs(GlassButton, {
variant: it.id === value ? 'primary' : 'secondary',
size: size,
disabled: it.disabled,
className: cn(
// Prevent glyphs from being visually cropped on some GPUs/Safari when glass effects are active
'glass-radius-md overflow-visible whitespace-nowrap leading-normal', sizes[size], condensed && 'glass-px-2'),
onClick: e => !it.disabled && onChange(it.id),
"aria-pressed": it.id === value,
children: [it.icon && jsx("span", {
className: "glass-mr-2 glass-inline-flex",
children: it.icon
}), !condensed && it.label]
}, it.id))
});
});
GlassSegmentedControl.displayName = 'GlassSegmentedControl';
export { GlassSegmentedControl, GlassSegmentedControl as default };
//# sourceMappingURL=GlassSegmentedControl.js.map