4e: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"] 4f: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"] 50: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"] 51:T1738,'use client'; import { cn } from '@/lib/utils'; import { cva, VariantProps } from 'class-variance-authority'; import { AnimatePresence, HTMLMotionProps, motion, MotionConfig, Variants, } from 'motion/react'; import React from 'react'; const menuListVariants = { open: { width: 320, height: 420, transition: { duration: 0.75, ease: [0.76, 0, 0.24, 1] }, }, close: { width: 80, height: 32, transition: { duration: 0.75, delay: 0.2, ease: [0.76, 0, 0.24, 1] }, }, } as Variants; const itemVariants = { initial: { opacity: 0, }, enter: (i: number) => ({ opacity: 1, transition: { delay: 0.55 + i * 0.1, duration: 0.75, }, }), exit: (i: number) => ({ opacity: 0, transition: { delay: 0.25 + -i * 0.1, }, }), } as Variants; interface AnimatedMenuContextValue { isOpen: boolean; setIsOpen: React.Dispatch>; } interface AnimatedMenuListProps extends HTMLMotionProps<'div'> { menuListVariants?: Variants; } interface AnimatedMenuItemProps extends HTMLMotionProps<'div'> { order?: number; variants?: Variants; } interface AnimatedMenuButtonLabelProps extends React.HTMLAttributes { closeLabel?: string; openLabel?: string; } const AnimatedMenuContext = React.createContext< AnimatedMenuContextValue | undefined >(undefined); function useAnimatedMenuContext() { const context = React.useContext(AnimatedMenuContext); if (context === undefined) { throw new Error( 'useAnimatedMenuContext must be used within an AnimatedMenuProvider', ); } return context; } export function AnimatedMenu({ className, ...props }: React.ComponentProps<'div'>) { const [isOpen, setIsOpen] = React.useState(false); return (

); } const buttonIconVariants = cva( 'flex flex-col gap-1.5 justify-center items-center p-1 relative *:bg-current', { variants: { size: { sm: '*:w-4 *:h-[1.5px] *:origin-[17%]', md: '*:w-6 *:h-0.5 *:origin-[25%]', lg: '*:w-8 *:h-0.5 *:origin-[33%]', xl: '*:w-10 *:h-1 *:origin-[31%]', }, }, defaultVariants: { size: 'sm', }, }, ); export function AnimatedMenuButtonToggleIcon({ className, size = 'sm', ...props }: React.HTMLAttributes & VariantProps) { const { isOpen } = useAnimatedMenuContext(); return (

); } export function AnimatedMenuButtonLabel({ closeLabel = 'Menu', openLabel = 'Close', className, ...props }: AnimatedMenuButtonLabelProps) { const { isOpen } = useAnimatedMenuContext(); return (

{closeLabel} {openLabel}

); } export function AnimatedMenuButton({ className, children, ...props }: React.HTMLAttributes) { const { setIsOpen } = useAnimatedMenuContext(); const toggleMenu = () => setIsOpen((prevState) => !prevState); return ( ); } export function AnimatedMenuList({ variants = menuListVariants, className, children, ...props }: AnimatedMenuListProps) { const { isOpen } = useAnimatedMenuContext(); return ( {isOpen && (children as React.ReactNode)} ); } export function AnimatedMenuItem({ order = 0, variants = itemVariants, ...props }: AnimatedMenuItemProps) { return ( ); } export function CloseAnimatedMenu({ className, ...props }: React.HTMLAttributes) { const { setIsOpen } = useAnimatedMenuContext(); const closeMenu = () => setIsOpen(false); return (

Animated Menu

Installation

Files

components

Styles