aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
243 lines (240 loc) • 10 kB
JavaScript
'use client';
import { jsx, jsxs } from 'react/jsx-runtime';
import { cn } from '../../lib/utilsComprehensive.js';
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
export { DropdownMenuPrimitive as DropdownMenu };
import { Check, ChevronRight } from 'lucide-react';
import { forwardRef } from 'react';
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 { MotionFramer } from '../../primitives/motion/MotionFramer.js';
const GlassDropdownMenu = DropdownMenuPrimitive.Root;
const GlassDropdownMenuTrigger = /*#__PURE__*/forwardRef(({
className,
variant = "outline",
size = "md",
asChild = false,
children,
...props
}, ref) => {
const sizeStyles = {
sm: "h-8 glass-px-3 glass-text-xs",
md: "h-10 glass-px-4 glass-text-sm",
lg: "h-12 glass-px-6 glass-text-base"
};
const variantStyles = {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
outline: "border border-border bg-background hover:bg-accent hover:text-accent-foreground",
ghost: "hover:bg-accent hover:text-accent-foreground",
minimal: "glass-text-secondary hover:text-foreground"
};
const baseStyles = cn("inline-flex items-center justify-center glass-gap-2", "whitespace-nowrap glass-radius-lg font-medium", "transition-all duration-200", "focus-visible:outline-none focus-visible:ring-2", "focus-visible:ring-primary focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50", sizeStyles?.[size], variantStyles?.[variant], className);
return jsx(DropdownMenuPrimitive.Trigger, {
"data-glass-component": true,
ref: ref,
className: baseStyles,
asChild: asChild,
"aria-haspopup": "menu",
...props,
children: children
});
});
GlassDropdownMenuTrigger.displayName = "GlassDropdownMenuTrigger";
const GlassDropdownMenuContent = /*#__PURE__*/forwardRef(({
className,
align = "end",
sideOffset = 4,
children,
...props
}, ref) => {
return jsx(DropdownMenuPrimitive.Portal, {
children: jsx(MotionFramer, {
preset: "scaleIn",
children: jsx(DropdownMenuPrimitive.Content, {
ref: ref,
align: align,
sideOffset: sideOffset,
className: cn("z-50 min-w-[8rem] overflow-hidden glass-radius-xl glass-p-1", "shadow-lg border border-border/20", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
...props,
children: jsx(OptimizedGlassCore, {
intent: "neutral",
elevation: "level2",
intensity: "medium",
depth: 2,
tint: "neutral",
border: "subtle",
animation: "none",
performanceMode: "medium",
className: "glass-p-0 glass-radial-reveal glass-lift",
children: children
})
})
})
});
});
GlassDropdownMenuContent.displayName = "GlassDropdownMenuContent";
const GlassDropdownMenuItem = /*#__PURE__*/forwardRef(({
className,
variant = "default",
icon,
shortcut,
children,
...props
}, ref) => {
const variantStyles = {
default: "text-foreground focus:bg-accent focus:text-accent-foreground",
destructive: "text-destructive focus:bg-destructive/10 focus:text-destructive"
};
return jsxs(DropdownMenuPrimitive.Item, {
ref: ref,
className: cn("relative flex cursor-default select-none items-center glass-radius-lg glass-px-3 glass-py-2 glass-text-sm outline-none", "transition-all duration-200 hover:-translate-y-0.5", "focus:bg-accent focus:text-accent-foreground ring-0", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", variantStyles?.[variant], className),
...props,
children: [icon && jsx("span", {
className: 'mr-3 glass-flex h-4 w-4 glass-items-center glass-justify-center',
children: icon
}), jsx("span", {
className: "glass-flex-1",
children: children
}), shortcut && jsx("span", {
className: 'ml-auto glass-text-xs glass-text-secondary',
children: shortcut
})]
});
});
GlassDropdownMenuItem.displayName = "GlassDropdownMenuItem";
const GlassDropdownMenuCheckboxItem = /*#__PURE__*/forwardRef(({
className,
checked,
icon,
children,
...props
}, ref) => {
return jsxs(DropdownMenuPrimitive.CheckboxItem, {
ref: ref,
className: cn("relative flex cursor-default select-none items-center", "glass-radius-lg glass-px-3 glass-py-2 glass-text-sm outline-none", "transition-colors duration-200", "focus:bg-accent focus:text-accent-foreground", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
checked: checked,
...props,
children: [jsx(DropdownMenuPrimitive.ItemIndicator, {
className: 'absolute left-2 glass-flex h-3.5 w-3.5 glass-items-center glass-justify-center',
children: jsx(Check, {
className: 'h-3 w-3'
})
}), icon && jsx("span", {
className: 'ml-6 mr-3 glass-flex h-4 w-4 glass-items-center glass-justify-center',
children: icon
}), jsx("span", {
className: "glass-flex-1",
children: children
})]
});
});
GlassDropdownMenuCheckboxItem.displayName = "GlassDropdownMenuCheckboxItem";
const GlassDropdownMenuRadioItem = /*#__PURE__*/forwardRef(({
className,
icon,
children,
...props
}, ref) => {
return jsxs(DropdownMenuPrimitive.RadioItem, {
ref: ref,
className: cn("relative flex cursor-default select-none items-center", "glass-radius-lg glass-px-3 glass-py-2 glass-text-sm outline-none", "transition-colors duration-200", "focus:bg-accent focus:text-accent-foreground", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
...props,
children: [jsx(DropdownMenuPrimitive.ItemIndicator, {
className: 'absolute left-2 glass-flex h-3.5 w-3.5 glass-items-center glass-justify-center',
children: jsx("div", {
className: 'h-2 w-2 glass-radius-full bg-transparent'
})
}), icon && jsx("span", {
className: 'ml-6 mr-3 glass-flex h-4 w-4 glass-items-center glass-justify-center',
children: icon
}), jsx("span", {
className: "glass-flex-1",
children: children
})]
});
});
GlassDropdownMenuRadioItem.displayName = "GlassDropdownMenuRadioItem";
const GlassDropdownMenuLabel = /*#__PURE__*/forwardRef(({
className,
inset = false,
...props
}, ref) => {
return jsx(DropdownMenuPrimitive.Label, {
ref: ref,
className: cn("glass-px-2 glass-py-1.5 glass-text-sm font-semibold", inset && "pl-8", className),
...props
});
});
GlassDropdownMenuLabel.displayName = "GlassDropdownMenuLabel";
const GlassDropdownMenuSeparator = /*#__PURE__*/forwardRef(({
className,
...props
}, ref) => {
return jsx(DropdownMenuPrimitive.Separator, {
ref: ref,
className: cn("-glass-mx-1 glass-my-1 h-px bg-border/20", className),
...props
});
});
GlassDropdownMenuSeparator.displayName = "GlassDropdownMenuSeparator";
const GlassDropdownMenuShortcut = /*#__PURE__*/forwardRef(({
className,
...props
}, ref) => {
return jsx("span", {
ref: ref,
className: cn("ml-auto glass-text-xs tracking-widest glass-text-secondary", className),
...props
});
});
GlassDropdownMenuShortcut.displayName = "GlassDropdownMenuShortcut";
const GlassDropdownMenuSubTrigger = /*#__PURE__*/forwardRef(({
className,
icon,
children,
...props
}, ref) => {
return jsxs(DropdownMenuPrimitive.SubTrigger, {
ref: ref,
className: cn("flex cursor-default select-none items-center glass-radius-lg glass-px-3 glass-py-2 glass-text-sm outline-none", "focus:bg-accent focus:text-accent-foreground", "data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
...props,
children: [icon && jsx("span", {
className: 'mr-3 glass-flex h-4 w-4 glass-items-center glass-justify-center',
children: icon
}), jsx("span", {
className: "glass-flex-1",
children: children
}), jsx(ChevronRight, {
className: 'ml-auto h-4 w-4'
})]
});
});
GlassDropdownMenuSubTrigger.displayName = "GlassDropdownMenuSubTrigger";
const GlassDropdownMenuSubContent = /*#__PURE__*/forwardRef(({
className,
...props
}, ref) => {
return jsx(DropdownMenuPrimitive.SubContent, {
ref: ref,
className: cn("z-50 min-w-[8rem] overflow-hidden glass-radius-xl glass-p-1", "shadow-lg border border-border/20", "data-[state=open]:animate-in data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
...props,
children: jsx(OptimizedGlassCore, {
intent: "neutral",
elevation: "level2",
intensity: "medium",
depth: 2,
tint: "neutral",
border: "subtle",
animation: "none",
performanceMode: "medium",
className: "glass-p-0 glass-radial-reveal glass-lift",
children: props?.children
})
});
});
GlassDropdownMenuSubContent.displayName = "GlassDropdownMenuSubContent";
export { GlassDropdownMenu, GlassDropdownMenuCheckboxItem, GlassDropdownMenuContent, GlassDropdownMenuItem, GlassDropdownMenuLabel, GlassDropdownMenuRadioItem, GlassDropdownMenuSeparator, GlassDropdownMenuShortcut, GlassDropdownMenuSubContent, GlassDropdownMenuSubTrigger, GlassDropdownMenuTrigger };
//# sourceMappingURL=GlassDropdownMenu.js.map