aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
53 lines (50 loc) • 1.94 kB
JavaScript
'use client';
import { jsxs, jsx } 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 GlassToolbar = /*#__PURE__*/forwardRef(({
left,
center,
right,
sticky = false,
floating = false,
respectMotionPreference = true,
className,
...rest
}, ref) => {
// Accessibility and motion preferences
const toolbarId = useA11yId("toolbar");
const prefersReducedMotion = useReducedMotion();
const shouldReduceMotion = respectMotionPreference && prefersReducedMotion;
return jsxs(OptimizedGlassCore, {
ref: ref,
elevation: floating ? "level2" : "level1",
animation: shouldReduceMotion ? "none" : "gentle",
role: "toolbar",
"aria-label": "Toolbar",
id: toolbarId,
className: cn("w-full flex items-center justify-between glass-gap-3 glass-px-3 glass-py-2 glass-radius-xl", sticky && "sticky top-0 z-30", floating && "shadow-xl", className),
...rest,
children: [jsx("div", {
className: 'min-glass-w-0 glass-flex glass-items-center glass-gap-2',
children: left
}), jsx("div", {
className: 'min-glass-w-0 glass-flex-1 glass-flex glass-items-center glass-justify-center',
children: center
}), jsx("div", {
className: 'min-glass-w-0 glass-flex glass-items-center glass-gap-2',
children: right
})]
});
});
GlassToolbar.displayName = "GlassToolbar";
export { GlassToolbar, GlassToolbar as default };
//# sourceMappingURL=GlassToolbar.js.map