4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T1e95,import { useCallback, useLayoutEffect, useRef, useState, type ComponentProps } from "react" import { cn } from "@/lib/utils" import { Button } from "./button" import { FAB, type FABProps } from "./fab" import { FABMenuContext, useFABMenu, type FABMenuColor } from "./fab-menu-context" type FABMenuPlacement = "bottom-start" | "bottom-end" | "top-start" | "top-end" /** * Kit geometry (`FAB menu` on the Buttons page): 56dp pill actions with * 24dp horizontal padding, an 8dp icon gap and title-medium labels, stacked * 4dp apart and 8dp away from a 56dp *round* FAB. Actions take the * `-container` roles while the trigger takes the plain role. */ type FABMenuProps = ComponentProps<"div"> & { color?: FABMenuColor defaultOpen?: boolean onOpenChange?: (open: boolean) => void open?: boolean placement?: FABMenuPlacement } function FABMenu({ children, className, color = "primary", defaultOpen = false, onKeyDown, onOpenChange, open: openProp, placement = "bottom-end", ...props }: FABMenuProps) { const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen) const open = openProp ?? uncontrolledOpen const rootRef = useRef(null) const triggerRef = useRef(null) const setTriggerNode = useCallback((node: HTMLButtonElement | null) => { triggerRef.current = node }, []) const focusTrigger = useCallback(() => triggerRef.current?.focus(), []) const setOpen = useCallback((next: boolean) => { if (openProp === undefined) setUncontrolledOpen(next) onOpenChange?.(next) }, [onOpenChange, openProp]) const close = useCallback(() => setOpen(false), [setOpen]) const toggle = useCallback(() => setOpen(!open), [open, setOpen]) useLayoutEffect(() => { if (!open) return rootRef.current?.querySelector('[data-slot="fab-menu-action"]:not(:disabled)')?.focus() }, [open]) return (

{ onKeyDown?.(event) if (event.defaultPrevented || !open) return if (event.key === "Escape") { event.preventDefault() close() requestAnimationFrame(focusTrigger) return } const actions = Array.from( rootRef.current?.querySelectorAll( '[data-slot="fab-menu-action"]:not(:disabled)', ) ?? [], ) if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) { if (!actions.length) return event.preventDefault() const index = actions.indexOf(document.activeElement as HTMLButtonElement) const next = event.key === "Home" ? 0 : event.key === "End" ? actions.length - 1 : event.key === "ArrowDown" ? (index + 1) % actions.length : (index - 1 + actions.length) % actions.length actions[next]?.focus() return } if (event.key !== "Tab") return const focusable = Array.from( rootRef.current?.querySelectorAll( '[data-slot="fab-menu-action"]:not(:disabled), [data-slot="fab"]:not(:disabled)', ) ?? [], ) if (!focusable.length) return const index = focusable.indexOf(document.activeElement as HTMLButtonElement) const next = event.shiftKey ? (index - 1 + focusable.length) % focusable.length : (index + 1) % focusable.length event.preventDefault() focusable[next]?.focus() }} > {children}

) } function FABMenuTrigger({ onClick, ref, ...props }: FABProps) { const context = useFABMenu() return ( { context.setTriggerNode(node) if (typeof ref === "function") ref(node) else if (ref) ref.current = node }} aria-expanded={context.open} aria-haspopup="menu" data-open={context.open || undefined} onClick={(event) => { onClick?.(event) if (!event.defaultPrevented) context.toggle() }} /> ) } function FABMenuContent({ className, ...props }: ComponentProps<"div">) { const context = useFABMenu() return ( <> ) } export { FABMenu, FABMenuAction, FABMenuContent, FABMenuTrigger, type FABMenuActionProps, type FABMenuPlacement, type FABMenuProps, } 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4c",null,{"namespace":"@materialcn","registryDependencies":["https://guillermo-rebolledo.github.io/materialcn/r/button.json","https://guillermo-rebolledo.github.io/materialcn/r/fab.json","https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json","https://guillermo-rebolledo.github.io/materialcn/r/utils.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/components/ui/fab-menu.tsx","content":"$4e","type":"registry:ui"},{"path":"src/components/ui/fab-menu-context.ts","content":"import { createContext, useContext } from \"react\"\n\ntype FABMenuColor = \"primary\" | \"secondary\" | \"tertiary\"\n\ntype FABMenuContextValue = {\n close: () => void\n color: FABMenuColor\n focusTrigger: () => void\n open: boolean\n setTriggerNode: (node: HTMLButtonElement | null) => void\n toggle: () => void\n}\n\nconst FABMenuContext = createContext(null)\n\nfunction useFABMenu() {\n const context = useContext(FABMenuContext)\n if (!context) throw new Error(\"FABMenu components must be used within FABMenu\")\n return context\n}\n\nexport { FABMenuContext, useFABMenu, type FABMenuColor }\n","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]