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:T140d,import { useEffect, useRef, type ComponentProps, type KeyboardEvent } from "react" import { cn } from "@/lib/utils" import { Separator } from "./separator" /** @deprecated Use `variant` (`floating` | `docked`) — the kit has no 96dp toolbar. */ type ToolbarPresentation = "standard" | "expressive" type ToolbarVariant = "floating" | "docked" type ToolbarColor = "standard" | "vibrant" /** * Kit geometry (Toolbars page): every toolbar is 64dp. `floating` has 32dp * corners, 12×8dp padding, a 4dp gap and elevation level 3; `docked` is flat, * square and full-width with 12×16dp padding and an 8dp gap. `standard` * colour is Surface Container, `vibrant` is Primary Container. */ type ToolbarProps = ComponentProps<"div"> & { color?: ToolbarColor /** @deprecated Use `variant`. `standard` maps to `floating`. */ presentation?: ToolbarPresentation variant?: ToolbarVariant } function Toolbar({ "aria-label": ariaLabel = "Tools", className, color = "standard", onKeyDown, presentation, ref, variant = "floating", ...props }: ToolbarProps) { void presentation const rootRef = useRef(null) const getControls = (root: HTMLElement) => Array.from( root.querySelectorAll('button:not(:disabled), a[href], [role="button"]:not([aria-disabled="true"])'), ) const setTabStop = (controls: HTMLElement[], active: HTMLElement) => { controls.forEach((control) => { control.tabIndex = control === active ? 0 : -1 }) } const ensureTabStop = () => { const controls = rootRef.current ? getControls(rootRef.current) : [] if (!controls.length) return const focused = controls.find((control) => control === document.activeElement) const active = focused ?? controls.find((control) => control.tabIndex === 0) ?? controls[0] setTabStop(controls, active) } useEffect(() => { if (!rootRef.current) return ensureTabStop() const observer = new MutationObserver(ensureTabStop) observer.observe(rootRef.current, { attributeFilter: ["aria-disabled", "disabled"], attributes: true, childList: true, subtree: true, }) return () => observer.disconnect() }, []) const handleKeyDown = (event: KeyboardEvent) => { onKeyDown?.(event) if (event.defaultPrevented || !["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return const controls = getControls(event.currentTarget) if (!controls.length) return const index = controls.indexOf(document.activeElement as HTMLElement) const next = event.key === "Home" ? 0 : event.key === "End" ? controls.length - 1 : event.key === "ArrowRight" ? (index + 1) % controls.length : (index - 1 + controls.length) % controls.length event.preventDefault() if (controls[next]) setTabStop(controls, controls[next]) controls[next]?.focus() } return (

{ rootRef.current = node if (typeof ref === "function") ref(node) else if (ref) ref.current = node }} role="toolbar" aria-label={ariaLabel} data-slot="toolbar" data-variant={variant} data-color={color} className={cn( "flex min-h-16 max-w-full items-center overflow-x-auto text-foreground", variant === "floating" ? "w-fit gap-1 rounded-m3-xl-increased px-2 py-3 shadow-m3-3" : "w-full gap-2 px-4 py-3", color === "vibrant" ? "bg-m3-primary-container text-m3-on-primary-container" : "bg-m3-surface-container", className, )} onKeyDown={handleKeyDown} onFocusCapture={(event) => { const controls = getControls(event.currentTarget) const focused = controls.find((control) => control === event.target) if (focused) setTabStop(controls, focused) }} /> ) } function ToolbarGroup({ className, ...props }: ComponentProps<"div">) { return

} function ToolbarLabel({ className, ...props }: ComponentProps<"span">) { return } function ToolbarDivider({ className, ...props }: ComponentProps) { return } function ToolbarOverflow({ className, ...props }: ComponentProps<"div">) { return

} function ToolbarFAB({ className, ...props }: ComponentProps<"div">) { return

} export { Toolbar, ToolbarDivider, ToolbarFAB, ToolbarGroup, ToolbarLabel, ToolbarOverflow, type ToolbarColor, type ToolbarPresentation, type ToolbarProps, type ToolbarVariant, } 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/materialcn-theme.json","https://guillermo-rebolledo.github.io/materialcn/r/separator.json","https://guillermo-rebolledo.github.io/materialcn/r/utils.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/components/ui/toolbar.tsx","content":"$4e","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]