50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T2795,"use client"; import { Menu } from "@base-ui/react/menu"; import { AnimatePresence, LayoutGroup, motion, useReducedMotion, } from "motion/react"; import { createContext, type ReactNode, useContext, useId, useState, } from "react"; import { motionTransition } from "@/lib/sona-motion"; import { cn } from "@/lib/sona-utils"; // ─── Context ───────────────────────────────────────────────────────────────── interface DropdownContextValue { /** Unique layoutId prefix for the hover highlight — scoped per Root instance. */ layoutId: string; /** Currently highlighted item id (for keyboard + mouse parity). */ activeId: string | null; setActiveId: (id: string | null) => void; } const DropdownContext = createContext(null); function useDropdownContext() { const ctx = useContext(DropdownContext); if (!ctx) throw new Error( "AnimatedDropdown subcomponents must be used within ", ); return ctx; } // ─── Types ──────────────────────────────────────────────────────────────────── export interface AnimatedDropdownProps { children: ReactNode; /** Controlled open state. */ open?: boolean; /** Initial open state for uncontrolled usage. @default false */ defaultOpen?: boolean; /** Callback when open state changes. */ onOpenChange?: (open: boolean) => void; /** Whether the menu ignores user interaction. @default false */ disabled?: boolean; /** Whether the open menu limits interaction to the menu. @default true */ modal?: boolean; } export interface AnimatedDropdownContentProps { children: ReactNode; className?: string; /** * Side the menu opens on. * @default "bottom" */ side?: "bottom" | "top" | "left" | "right"; /** * Alignment along the side. * @default "center" */ align?: "start" | "center" | "end"; /** * Gap between trigger and popup in px. * @default 6 */ sideOffset?: number; } export interface AnimatedDropdownItemProps { children: ReactNode; /** Icon to display before the label (any ReactNode — no HugeIcons dependency). */ icon?: ReactNode; /** * Visual variant. * @default "default" */ variant?: "default" | "danger"; disabled?: boolean; onClick?: () => void; className?: string; } export interface AnimatedDropdownTriggerProps { children: ReactNode; className?: string; /** Associates the trigger with an external visible label. */ "aria-labelledby"?: string; } export interface AnimatedDropdownTriggerIndicatorProps { className?: string; } // ─── Root ───────────────────────────────────────────────────────────────────── /** * Root dropdown — owns open state and the hover-highlight layout group. * Wrap all other AnimatedDropdown subcomponents inside this. */ export function AnimatedDropdown({ children, open, defaultOpen = false, onOpenChange, disabled = false, modal = true, }: AnimatedDropdownProps) { const layoutId = useId(); const [activeId, setActiveId] = useState(null); const handleOpenChange = (nextOpen: boolean) => { if (!nextOpen) setActiveId(null); onOpenChange?.(nextOpen); }; return ( {children} ); } // ─── Trigger ────────────────────────────────────────────────────────────────── /** * The element that opens the dropdown when clicked. * Renders as a `

Animated Dropdown

Installation

Files

components

Styles