aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
63 lines (60 loc) • 2.76 kB
JavaScript
'use client';
import { jsx, jsxs } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { cn } from '../../lib/utilsComprehensive.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 GlassCommandBar = /*#__PURE__*/forwardRef(({
items,
position = "bottom",
respectMotionPreference = true,
className,
...rest
}, ref) => {
// Accessibility and motion preferences
const commandBarId = useA11yId("command-bar");
const prefersReducedMotion = useReducedMotion();
const shouldReduceMotion = respectMotionPreference && prefersReducedMotion;
// Handle undefined or null items gracefully
if (!items || !Array.isArray(items)) {
return null;
}
return jsx("div", {
className: cn("w-full", position === "top" ? "glass-mt-2" : "glass-mb-2"),
children: jsx(OptimizedGlassCore, {
ref: ref,
elevation: "level2",
animation: shouldReduceMotion ? "none" : "gentle",
role: "toolbar",
"aria-label": "Command bar",
id: commandBarId,
className: cn(
// Let child buttons render without being clipped by the glass container rounding
"glass-radius-xl glass-px-2 glass-py-1 flex flex-wrap glass-gap-1 overflow-visible", className),
...rest,
children: items.map(it => jsx("button", {
disabled: it.disabled,
onClick: it.onSelect,
className: cn(
// Avoid text cropping and keep shape consistent
"glass-px-3 glass-py-1 glass-radius-md glass-text-sm glass-text-primary/90 hover:bg-white/10 border border-white/10 whitespace-nowrap leading-normal", "glass-focus glass-touch-target glass-contrast-guard", "focus:outline-none focus:ring-2 focus:ring-white/30", !shouldReduceMotion && "transition-all duration-200 hover:scale-105", it.disabled && "opacity-50 cursor-not-allowed"),
children: jsxs("span", {
className: "glass-inline-flex glass-items-center glass-gap-2",
children: [it.icon, it.label, it.shortcut && jsx("kbd", {
className: "glass-ml-1 glass-text-xs glass-px-1 glass-py-0.5 glass-radius-md glass-surface-subtle/10 glass-border glass-border-white/15",
children: it.shortcut
})]
})
}, it.id))
})
});
});
GlassCommandBar.displayName = "GlassCommandBar";
export { GlassCommandBar, GlassCommandBar as default };
//# sourceMappingURL=GlassCommandBar.js.map