{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "dropdown-menu-glass", "title": "Menu-glass dropdown", "description": "Styled dropdown: the Menu-glass set. 5 decorative dropdown variations (FrostMenu, TintMenu, SmokeMenu, CrystalMenu, DepthMenu) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.", "dependencies": [ "motion@^12.42.2", "lucide-react@^1.23.0" ], "registryDependencies": [ "@ai2/tokens", "@ai2/glass" ], "files": [ { "path": "registry/ai2/styled/dropdown-menu-glass.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n Bell,\n ChevronDown,\n CreditCard,\n Layers,\n LogOut,\n Settings,\n Sparkles,\n User,\n} from \"lucide-react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { glassDepth } from \"@/registry/ai2/ui/glass\"\n\n/* Glass dropdown family: 5 frosted-glass menus. The shared idea is a translucent\n panel + backdrop-blur; the variants differ in transparency and tint. Each export\n is a complete dropdown: a relative wrapper + a real trigger button + a panel\n absolutely positioned BELOW the trigger. NO radix or portal. It closes on an\n outside click, on Escape (focus returns to the trigger) and on an item selection.\n The arrow keys move between items. Color comes ONLY from tokens, via alpha\n color-mix.\n\n The glass surface derives from the glassDepth scale in @ai2/glass (AGENTS.md 4.5)\n - the blur is never hand-written. The step gives the surface, the variant gives\n the character (tint, edge). Because glassDepth carries a [box-shadow], the\n shadow-lg in panelBase was REMOVED: same tailwind-merge group, and had it stayed\n it would have won over the signature. The ambient shadow is now part of the\n signature itself. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst panelWidth: Record = {\n sm: \"w-48\",\n md: \"w-56\",\n lg: \"w-64\",\n xl: \"w-72\",\n}\n\nconst itemHeight: Record = {\n sm: \"min-h-8 py-1.5\",\n md: \"min-h-9 py-2\",\n lg: \"min-h-10 py-2.5\",\n xl: \"min-h-11 py-3\",\n}\n\nexport interface StyledMenuItem {\n label: React.ReactNode\n icon?: React.ReactNode\n description?: React.ReactNode\n onSelect?: () => void\n}\n\ninterface StyledMenuProps {\n className?: string\n size?: StyledSize\n label?: React.ReactNode\n items?: StyledMenuItem[]\n}\n\nconst triggerBtn =\n \"inline-flex h-9 shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border border-[color-mix(in_oklab,var(--color-border)_70%,transparent)] bg-[color-mix(in_oklab,var(--color-secondary)_60%,transparent)] px-4 text-sm font-medium text-secondary-foreground outline-none transition-colors supports-[backdrop-filter]:backdrop-blur-sm hover:bg-[color-mix(in_oklab,var(--color-foreground)_8%,transparent)] focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>svg]:size-4 [&>svg]:shrink-0 [&>i]:text-base [&>i]:leading-none\"\n\nconst panelBase =\n \"origin-top rounded-xl border p-1.5 text-sm text-popover-foreground outline-none\"\n\nconst itemBase =\n \"flex w-full cursor-default select-none items-center gap-2.5 rounded-md px-3 text-left text-sm text-popover-foreground outline-none transition-colors hover:bg-[color-mix(in_oklab,var(--color-foreground)_8%,transparent)] focus-visible:bg-[color-mix(in_oklab,var(--color-foreground)_10%,transparent)] focus-visible:ring-[3px] focus-visible:ring-ring/50 [&_svg]:size-4 [&_svg]:shrink-0 [&_i]:text-base [&_i]:leading-none\"\n\nconst menuMotion = {\n initial: { opacity: 0, scale: 0.96, y: -6 },\n animate: { opacity: 1, scale: 1, y: 0 },\n exit: { opacity: 0, scale: 0.96, y: -6 },\n transition: { type: \"spring\" as const, stiffness: 340, damping: 26 },\n}\n\nconst fade = { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }\n\n/* Internal open/closed state: closes on an outside click and on Escape; Escape returns focus to the trigger. */\nfunction useMenuState() {\n const [open, setOpen] = React.useState(false)\n const wrapperRef = React.useRef(null)\n const triggerRef = React.useRef(null)\n\n React.useEffect(() => {\n if (!open) return\n const onKey = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n setOpen(false)\n triggerRef.current?.focus()\n }\n }\n const onPointer = (e: PointerEvent) => {\n const node = wrapperRef.current\n if (node && e.target instanceof Node && !node.contains(e.target)) {\n setOpen(false)\n }\n }\n window.addEventListener(\"keydown\", onKey)\n window.addEventListener(\"pointerdown\", onPointer)\n return () => {\n window.removeEventListener(\"keydown\", onKey)\n window.removeEventListener(\"pointerdown\", onPointer)\n }\n }, [open])\n\n return { open, setOpen, wrapperRef, triggerRef }\n}\n\n/* Ok tuslari ile itemlar arasinda gezinme. */\nfunction useArrowNav(panelRef: React.RefObject) {\n return React.useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key !== \"ArrowDown\" && e.key !== \"ArrowUp\") return\n const panel = panelRef.current\n if (!panel) return\n const nodes = Array.from(\n panel.querySelectorAll(\n '[role=\"menuitem\"],[role=\"menuitemcheckbox\"]'\n )\n )\n if (nodes.length === 0) return\n e.preventDefault()\n const current = nodes.indexOf(document.activeElement as HTMLButtonElement)\n const next =\n e.key === \"ArrowDown\"\n ? (current + 1) % nodes.length\n : current <= 0\n ? nodes.length - 1\n : current - 1\n nodes[next]?.focus()\n },\n [panelRef]\n )\n}\n\n/* Shared shell: a relative wrapper plus trigger plus an absolutely positioned glass panel. */\nfunction MenuShell({\n size = \"md\",\n label = \"Options\",\n className,\n panelClassName,\n children,\n}: {\n size?: StyledSize\n label?: React.ReactNode\n className?: string\n panelClassName?: string\n children: (close: () => void) => React.ReactNode\n}) {\n const { open, setOpen, wrapperRef, triggerRef } = useMenuState()\n const panelRef = React.useRef(null)\n const onArrow = useArrowNav(panelRef)\n const reduce = useReducedMotion()\n const id = React.useId()\n const panelId = `${id}-menu`\n\n const active = reduce ? fade : menuMotion\n\n return (\n \n setOpen(!open)}\n >\n {label}\n \n \n\n \n {open ? (\n
\n \n {children(() => setOpen(false))}\n \n
\n ) : null}\n \n \n )\n}\n\n/* The item list renders the same in every variant. */\nfunction MenuList({\n items,\n size,\n close,\n}: {\n items: StyledMenuItem[]\n size: StyledSize\n close: () => void\n}) {\n return (\n
\n {items.map((item, i) => (\n {\n item.onSelect?.()\n close()\n }}\n >\n {item.icon ? (\n \n {item.icon}\n \n ) : null}\n {item.label}\n \n ))}\n
\n )\n}\n\nconst accountItems: StyledMenuItem[] = [\n { label: \"Profile\", icon: },\n { label: \"Billing\", icon: },\n { label: \"Settings\", icon: },\n { label: \"Sign out\", icon: },\n]\n\nconst workspaceItems: StyledMenuItem[] = [\n { label: \"Overview\", icon: },\n { label: \"Members\", icon: },\n { label: \"Notifications\", icon: },\n { label: \"Settings\", icon: },\n]\n\n/* Frost: classic frosted glass. Depth md (8px): a dropdown is the exact example the library cites when describing the md step - the same as glass.overlay. The neutral ground is left to the library; the character is the soft border alone. */\nexport function FrostMenu({ className, size = \"md\", label = \"Frost\", items }: StyledMenuProps) {\n return (\n \n {(close) => }\n \n )\n}\n\n/* Tint: info-toned glass - info is mixed into the transparent popover ground. Depth md (8px): deliberately the same step as Frost - Tint is the coloured version of Frost. The info film takes over the ground, and the supports- variant has to be overridden too. */\nexport function TintMenu({ className, size = \"md\", label = \"Tint\", items }: StyledMenuProps) {\n return (\n \n {(close) => }\n \n )\n}\n\n/* Smoke: smoky glass mixed with foreground. Depth lg (16px): smoke should turn what is behind into texture - the scale step closest to the intent of the old 24px. */\nexport function SmokeMenu({ className, size = \"md\", label = \"Smoke\", items }: StyledMenuProps) {\n return (\n \n {(close) => }\n \n )\n}\n\nconst crystalItems: StyledMenuItem[] = [\n { label: \"New project\", icon: },\n { label: \"Import\", icon: },\n { label: \"Preferences\", icon: },\n { label: \"Sign out\", icon: },\n]\n\n/* Crystal: the most transparent panel, with the glass edge emphasized by a thin\n bright border + ring. Depth sm (4px): crystal means clarity, not diffusion - its\n character is very low opacity (46% popover) and a sharp edge. The old 40px was\n the opposite of that intent.\n The old shadow-none was REMOVED: it existed to cancel panelBase's shadow-lg,\n which is gone now; had it stayed it would have deleted the signature. The old\n ring-1 was REMOVED too: in v4 a ring compiles to a box-shadow, and glassDepth's\n arbitrary [box-shadow] overrides it - so it was drawing nothing at all\n (measured). The crystal edge now comes from the signature's own top inset\n highlight; that was what was wanted anyway. */\nexport function CrystalMenu({ className, size = \"md\", label = \"Crystal\", items }: StyledMenuProps) {\n return (\n \n {(close) => }\n \n )\n}\n\n/* Depth: layered glass - a gradient from top to bottom, the deepest in the family. Depth xl (24px): the highest diffusion, the panel that detaches most from the page. The old shadow-xl was REMOVED: the same merge group as the signature, and keeping it dropped the signature. The depth is now carried by the signature's ambient shadow plus the top-to-bottom gradient layer (a gradient is a background-IMAGE, a separate merge group, so it does not clash with the signature). */\nexport function DepthMenu({ className, size = \"md\", label = \"Depth\", items }: StyledMenuProps) {\n return (\n \n {(close) => }\n \n )\n}\n", "type": "registry:component", "target": "components/ui/dropdown-menu-glass.tsx" } ], "categories": [ "styled", "dropdown" ], "type": "registry:component" }