@instruments/materia-ui 0.1.0

package/dist/components/menu-parts.js

@@ -0,0 +1,304 @@
+"use client";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import { useRender } from "@base-ui/react/use-render";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Check, ChevronRight } from "lucide-react";
+import { createContext, createElement, use, useMemo } from "react";
+import { MENU_CONTAINER_CLASSES, MENU_CONTENT_WIDTH_CLASSES, MENU_ITEM_HIGHLIGHT, MENU_ITEM_HIGHLIGHT_DESTRUCTIVE, MENU_ITEM_RADIUS, MENU_ITEM_RADIUS_MAP, MENU_LABEL_INSET_CLASSES, MENU_LABEL_SIZE_CLASSES, MENU_OVERFLOW_CLASSES, MENU_POPUP_ANIMATION, MENU_SHORTCUT_SIZE_CLASSES, MENU_SUB_TRIGGER_OPEN, MENU_SURFACE_CLASSES, } from "../tokens/menu-content.js";
+import { POPOVER_SURFACE } from "../tokens/overlay-styles.js";
+import { Icon } from "./icon.js";
+import { MENU_ITEM_ICON_SIZES, MenuItem } from "./menu-item/menu-item-root.js";
+/**
+ * Splits a `*Content`'s props into the Base UI Positioner's props and the
+ * Popup's remaining props, applying the family's positioning defaults.
+ */
+const splitMenuPositionProps = (props, defaults = {}) => {
+    const { align = defaults.align, alignOffset = defaults.alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, side, sideOffset = defaults.sideOffset, sticky, ...popup } = props;
+    return {
+        popup,
+        positioner: {
+            align,
+            alignOffset,
+            anchor,
+            arrowPadding,
+            collisionAvoidance,
+            collisionBoundary,
+            collisionPadding,
+            disableAnchorTracking,
+            side,
+            sideOffset,
+            sticky,
+        },
+    };
+};
+/** `data-component` + `data-slot` for one part, e.g. "dropdown-menu-item". */
+const identityOf = (slot) => ({
+    "data-component": slot,
+    "data-slot": slot,
+});
+/**
+ * Builds a menu SubContent: a Base UI Portal + Positioner + Popup wrapped in
+ * the family's context `Provider` so a nested submenu inherits `itemRadiusClass`
+ * and, unless overridden here via `size`, the parent's item `size`. Positioning
+ * (side defaults to the inline end, aligned to the trigger) is Base UI's own
+ * for nested menus.
+ */
+const makeMenuSubContent = ({ slot, Context, useMenuContext, }) => {
+    const identity = identityOf(`${slot}-sub-content`);
+    const MenuSubContent = ({ className, size, children, ...props }) => {
+        const parentContext = useMenuContext();
+        const effectiveSize = size ?? parentContext.size;
+        const contextValue = useMemo(() => ({
+            itemRadiusClass: parentContext.itemRadiusClass,
+            size: effectiveSize,
+        }), [parentContext.itemRadiusClass, effectiveSize]);
+        const { popup, positioner } = splitMenuPositionProps(props);
+        return createElement(MenuPrimitive.Portal, null, createElement(MenuPrimitive.Positioner, { className: "z-50 outline-none", ...positioner }, createElement(Context.Provider, { value: contextValue }, createElement(MenuPrimitive.Popup, {
+            className: cn(`${MENU_POPUP_ANIMATION} ${POPOVER_SURFACE} z-50 min-w-32 origin-(--transform-origin) border outline-none`, 
+            // Tailwind v4 animate-out uses animation-fill-mode: none by default.
+            // Without forwards, the element snaps back to visible after the exit
+            // animation completes.
+            "data-closed:fill-mode-forwards", MENU_SURFACE_CLASSES.default, className),
+            ...identity,
+            ...popup,
+        }, children))));
+    };
+    return MenuSubContent;
+};
+/**
+ * Marks that a Label is rendered inside a Group / RadioGroup. Base UI's
+ * `GroupLabel` throws outside a group, so the Label falls back to a plain
+ * heading element when this is false.
+ */
+const MenuGroupMarkerContext = createContext(false);
+const MenuPlainLabel = ({ ref, render, ...props }) => useRender({ defaultTagName: "div", props, ref, render });
+/**
+ * Shared Label primitive: Base UI's `GroupLabel` (which labels its parent group
+ * for assistive tech) inside a Group or RadioGroup, a plain non-interactive
+ * `<div>` anywhere else in the menu. Applies the size/inset label classes.
+ */
+const MenuLabelPrimitive = ({ className, inset, size, ...props }) => {
+    const insetAttribute = { "data-inset": inset };
+    return createElement(use(MenuGroupMarkerContext) ? MenuPrimitive.GroupLabel : MenuPlainLabel, {
+        className: cn("text-muted-foreground font-normal", MENU_LABEL_SIZE_CLASSES[size], inset === true && MENU_LABEL_INSET_CLASSES[size], className),
+        ...insetAttribute,
+        ...props,
+    });
+};
+/**
+ * Content: popover surface holding the menu items, portalled to the body and
+ * animated on open/close. Provides item size and radius to descendants via the
+ * family context.
+ */
+const makeContent = ({ slot, Context, content }) => {
+    const identity = identityOf(`${slot}-content`);
+    const MenuContent = ({ className, size = "sm", itemRadius, surface = "default", contentWidth = "auto", overflow = "auto", children, ...props }) => {
+        const itemRadiusClass = (itemRadius === undefined
+            ? undefined
+            : MENU_ITEM_RADIUS_MAP[itemRadius]) ??
+            content.defaultItemRadiusClass ??
+            (surface === "compact"
+                ? MENU_ITEM_RADIUS.compact
+                : MENU_ITEM_RADIUS.default);
+        const contextValue = useMemo(() => ({ itemRadius, itemRadiusClass, size }), [itemRadius, itemRadiusClass, size]);
+        const { popup, positioner } = splitMenuPositionProps(props, content.positioning);
+        return createElement(MenuPrimitive.Portal, null, createElement(MenuPrimitive.Positioner, { className: "z-50 outline-none", ...positioner }, createElement(Context.Provider, { value: contextValue }, createElement(MenuPrimitive.Popup, {
+            className: cn(`${MENU_POPUP_ANIMATION} bg-popover text-popover-foreground max-h-(--available-height) ${content.minWidthClass} origin-(--transform-origin) border outline-none`, itemRadius === "full"
+                ? `${MENU_CONTAINER_CLASSES.default} shadow-md dark:shadow-none`
+                : MENU_SURFACE_CLASSES[surface], MENU_CONTENT_WIDTH_CLASSES[contentWidth], MENU_OVERFLOW_CLASSES[overflow], className),
+            ...identity,
+            ...popup,
+        }, children))));
+    };
+    return MenuContent;
+};
+/** Item: selectable action row composing MenuItem. */
+const makeItem = ({ slot, useMenuContext }) => {
+    const itemSlot = `${slot}-item`;
+    const MenuItemPart = ({ className, inset, tone = "neutral", avatar, dot, icon, suffixIcon, kbd, suffix, active, activeIndicator, children, render, ...props }) => {
+        const { size, itemRadiusClass } = useMenuContext();
+        const dataAttributes = {
+            "data-component": itemSlot,
+            "data-inset": inset,
+            "data-slot": itemSlot,
+            "data-tone": tone,
+        };
+        return createElement(MenuPrimitive.Item, {
+            nativeButton: render === undefined,
+            render: createElement(MenuItem, {
+                activeIndicator,
+                avatar,
+                className: cn(
+                // Concentric radius: sits flush inside container corners
+                itemRadiusClass, MENU_ITEM_HIGHLIGHT, tone === "danger" && MENU_ITEM_HIGHLIGHT_DESTRUCTIVE, className),
+                ...dataAttributes,
+                dot,
+                icon,
+                inset,
+                active,
+                kbd,
+                render,
+                size,
+                suffix,
+                suffixIcon,
+                tone,
+            }, children),
+            ...props,
+        });
+    };
+    return MenuItemPart;
+};
+/** CheckboxItem: menu item with a toggleable checkmark. */
+const makeCheckboxItem = ({ slot, useMenuContext }) => {
+    const identity = identityOf(`${slot}-checkbox-item`);
+    const MenuCheckboxItem = ({ className, children, render, ...props }) => {
+        const { size, itemRadiusClass } = useMenuContext();
+        const iconSize = MENU_ITEM_ICON_SIZES[size];
+        const indicator = useMemo(() => createElement(MenuPrimitive.CheckboxItemIndicator, null, createElement(Icon, { icon: Check, size: iconSize })), [iconSize]);
+        return createElement(MenuPrimitive.CheckboxItem, {
+            nativeButton: render === undefined,
+            render: createElement(MenuItem, {
+                className: cn(
+                // Concentric radius: sits flush inside container corners
+                itemRadiusClass, MENU_ITEM_HIGHLIGHT, className),
+                ...identity,
+                indicator,
+                render,
+                size,
+            }, children),
+            ...props,
+        });
+    };
+    return MenuCheckboxItem;
+};
+/** RadioItem: single-select menu item showing a trailing checkmark when active. */
+const makeRadioItem = ({ slot, useMenuContext }) => {
+    const identity = identityOf(`${slot}-radio-item`);
+    const MenuRadioItem = ({ className, children, render, ...props }) => {
+        const { size, itemRadiusClass } = useMenuContext();
+        const iconSize = MENU_ITEM_ICON_SIZES[size];
+        return createElement(MenuPrimitive.RadioItem, {
+            nativeButton: render === undefined,
+            render: createElement(MenuItem, {
+                className: cn(
+                // Concentric radius: sits flush inside container corners
+                itemRadiusClass, MENU_ITEM_HIGHLIGHT, className),
+                ...identity,
+                render,
+                size,
+                suffix: createElement(MenuPrimitive.RadioItemIndicator, { className: "data-unchecked:invisible", keepMounted: true }, createElement(Icon, { icon: Check, size: iconSize })),
+            }, children),
+            ...props,
+        });
+    };
+    return MenuRadioItem;
+};
+/** SubTrigger: menu item that opens its parent Sub, with a trailing chevron. */
+const makeSubTrigger = ({ slot, useMenuContext }) => {
+    const subTriggerSlot = `${slot}-sub-trigger`;
+    const MenuSubTrigger = ({ className, inset, icon, children, render, ...props }) => {
+        const { size, itemRadiusClass } = useMenuContext();
+        const dataAttributes = {
+            "data-component": subTriggerSlot,
+            "data-inset": inset,
+            "data-slot": subTriggerSlot,
+        };
+        return createElement(MenuPrimitive.SubmenuTrigger, {
+            nativeButton: render === undefined,
+            render: createElement(MenuItem, {
+                className: cn(
+                // Concentric radius: sits flush inside container corners
+                itemRadiusClass, MENU_ITEM_HIGHLIGHT, MENU_SUB_TRIGGER_OPEN, className),
+                ...dataAttributes,
+                icon,
+                inset,
+                render,
+                size,
+                suffixIcon: ChevronRight,
+            }, children),
+            ...props,
+        });
+    };
+    return MenuSubTrigger;
+};
+/** Label: non-interactive heading for a section of menu items. */
+const makeLabel = ({ slot, useMenuContext }) => {
+    const identity = identityOf(`${slot}-label`);
+    const MenuLabel = ({ inset, ...props }) => {
+        const { size } = useMenuContext();
+        return createElement(MenuLabelPrimitive, {
+            ...identity,
+            inset,
+            size,
+            ...props,
+        });
+    };
+    return MenuLabel;
+};
+/** Group / RadioGroup: marks its Labels as group labels for assistive tech. */
+const makeGroup = (Primitive, partSlot) => {
+    const identity = identityOf(partSlot);
+    const MenuGroup = ({ ...props }) => createElement(MenuGroupMarkerContext.Provider, { value: true }, createElement(Primitive, { ...identity, ...props }));
+    return MenuGroup;
+};
+/** Separator: horizontal divider between groups of menu items. */
+const makeSeparator = ({ slot }) => {
+    const identity = identityOf(`${slot}-separator`);
+    const MenuSeparator = ({ className, spacing = "default", ...props }) => createElement(MenuPrimitive.Separator, {
+        className: cn(spacing === "compact"
+            ? "before:bg-border relative -mx-1 my-1 h-2 bg-transparent before:absolute before:inset-x-0 before:top-1/2 before:h-px before:-translate-y-1/2"
+            : "bg-border -mx-1 my-1 h-px", className),
+        ...identity,
+        ...props,
+    });
+    return MenuSeparator;
+};
+/** Shortcut: right-aligned keyboard-hint text for a menu item. */
+const makeShortcut = ({ slot, useMenuContext }) => {
+    const identity = identityOf(`${slot}-shortcut`);
+    const MenuShortcut = ({ className, ...props }) => {
+        const { size } = useMenuContext();
+        return createElement("span", {
+            className: cn("text-muted-foreground ml-auto", MENU_SHORTCUT_SIZE_CLASSES[size], className),
+            ...identity,
+            ...props,
+        });
+    };
+    return MenuShortcut;
+};
+/** Portal / Sub: bare pass-throughs stamped with the slot identity. */
+const makePassThrough = (Primitive, partSlot) => {
+    const identity = identityOf(partSlot);
+    const MenuPassThrough = ({ ...props }) => createElement(Primitive, { ...identity, ...props });
+    return MenuPassThrough;
+};
+/**
+ * Builds every part a menu family shares with the other two, stamped with the
+ * family's `data-slot` identity and reading the family's context: Content,
+ * Item, CheckboxItem, RadioItem, RadioGroup, Group, Label, Separator, Shortcut,
+ * Portal, Sub, SubTrigger and SubContent. Each family calls this once and its
+ * part files re-export the results under the public names.
+ */
+export const makeMenuParts = (family) => {
+    const { name, slot } = family;
+    const parts = {
+        CheckboxItem: makeCheckboxItem(family),
+        Content: makeContent(family),
+        Group: makeGroup(MenuPrimitive.Group, `${slot}-group`),
+        Item: makeItem(family),
+        Label: makeLabel(family),
+        Portal: makePassThrough(MenuPrimitive.Portal, `${slot}-portal`),
+        RadioGroup: makeGroup(MenuPrimitive.RadioGroup, `${slot}-radio-group`),
+        RadioItem: makeRadioItem(family),
+        Separator: makeSeparator(family),
+        Shortcut: makeShortcut(family),
+        Sub: makePassThrough(MenuPrimitive.SubmenuRoot, `${slot}-sub`),
+        SubContent: makeMenuSubContent(family),
+        SubTrigger: makeSubTrigger(family),
+    };
+    // Keep the public component names in DevTools and Storybook's code panel.
+    for (const [part, component] of Object.entries(parts)) {
+        Object.assign(component, { displayName: `${name}${part}` });
+    }
+    return parts;
+};

package/dist/components/menubar/menubar-anatomy.d.ts

@@ -0,0 +1,5 @@
+/**
+ * menubarAnatomy helper for MenubarAnatomy.
+ * Import from "@instruments/materia-ui/components/menubar-anatomy".
+ */
+export declare const menubarAnatomy: import("../../tokens/anatomy.js").ComponentAnatomy;

package/dist/components/menubar/menubar-anatomy.js

@@ -0,0 +1,83 @@
+import { defineAnatomy } from "../../tokens/anatomy.js";
+/**
+ * menubarAnatomy helper for MenubarAnatomy.
+ * Import from "@instruments/materia-ui/components/menubar-anatomy".
+ */
+export const menubarAnatomy = defineAnatomy({
+    children: [
+        {
+            children: [
+                {
+                    description: "Button opening a top-level menu",
+                    label: "MenubarTrigger",
+                    slot: "menubar-trigger",
+                },
+                {
+                    children: [
+                        {
+                            description: "Menu item",
+                            label: "MenubarItem",
+                            slot: "menubar-item",
+                        },
+                        {
+                            description: "Toggleable item",
+                            label: "MenubarCheckboxItem",
+                            slot: "menubar-checkbox-item",
+                        },
+                        {
+                            description: "Exclusive selection group",
+                            label: "MenubarRadioGroup",
+                            slot: "menubar-radio-group",
+                        },
+                        {
+                            description: "Radio option",
+                            label: "MenubarRadioItem",
+                            slot: "menubar-radio-item",
+                        },
+                        {
+                            description: "Section label",
+                            label: "MenubarLabel",
+                            slot: "menubar-label",
+                        },
+                        {
+                            description: "Visual divider",
+                            label: "MenubarSeparator",
+                            slot: "menubar-separator",
+                        },
+                        {
+                            children: [
+                                {
+                                    description: "Opens nested menu",
+                                    label: "MenubarSubTrigger",
+                                    slot: "menubar-sub-trigger",
+                                },
+                                {
+                                    description: "Nested menu container",
+                                    label: "MenubarSubContent",
+                                    slot: "menubar-sub-content",
+                                },
+                            ],
+                            description: "Nested submenu",
+                            label: "MenubarSub",
+                            slot: "menubar-sub",
+                        },
+                        {
+                            description: "Keyboard shortcut",
+                            label: "MenubarShortcut",
+                            slot: "menubar-shortcut",
+                        },
+                    ],
+                    description: "Menu content container",
+                    label: "MenubarContent",
+                    slot: "menubar-content",
+                },
+            ],
+            description: "A single top-level menu",
+            label: "MenubarMenu",
+            slot: "menubar-menu",
+        },
+    ],
+    description: "Horizontal application menu bar (File / Edit / View)",
+    label: "Menubar",
+    slot: "menubar",
+});

package/dist/components/menubar/menubar-checkbox-item.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Menu item with a toggleable checkmark. Controlled via `checked`/`onCheckedChange`;
+ * the menu stays open on select unless you set `closeOnClick`.
+ */
+declare const MenubarCheckboxItem: (props: import("../menu-parts.js").MenuCheckboxItemProps) => React.JSX.Element;
+export { MenubarCheckboxItem };

package/dist/components/menubar/menubar-checkbox-item.js

@@ -0,0 +1,8 @@
+"use client";
+import { menubarParts } from "./menubar-parts.js";
+/**
+ * Menu item with a toggleable checkmark. Controlled via `checked`/`onCheckedChange`;
+ * the menu stays open on select unless you set `closeOnClick`.
+ */
+const MenubarCheckboxItem = menubarParts.CheckboxItem;
+export { MenubarCheckboxItem };

package/dist/components/menubar/menubar-content.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Popover surface holding one menu's items; portalled to the body and animated on
+ * open/close. Provides item size and radius to descendants via context, so
+ * `size`/`itemRadius` set here flow to every item, label, and shortcut inside.
+ */
+declare const MenubarContent: (props: import("../menu-parts.js").MenuContentProps) => React.JSX.Element;
+export { MenubarContent };

package/dist/components/menubar/menubar-content.js

@@ -0,0 +1,9 @@
+"use client";
+import { menubarParts } from "./menubar-parts.js";
+/**
+ * Popover surface holding one menu's items; portalled to the body and animated on
+ * open/close. Provides item size and radius to descendants via context, so
+ * `size`/`itemRadius` set here flow to every item, label, and shortcut inside.
+ */
+const MenubarContent = menubarParts.Content;
+export { MenubarContent };

package/dist/components/menubar/menubar-context.d.ts

@@ -0,0 +1,20 @@
+import type { Radius } from "../../tokens/radius.js";
+import type { ComponentSize } from "../../tokens/size.js";
+interface MenubarContextValue {
+    /** Border radius for menu items. Defaults to "rounded". */
+    itemRadius?: Radius | undefined;
+    /** Computed CSS class for concentric item radius (derived from container radius + padding). */
+    itemRadiusClass: string;
+    size: ComponentSize;
+}
+/**
+ * MenubarContext UI component.
+ * Import from "@instruments/materia-ui/components/menubar".
+ */
+declare const MenubarContext: import("react").Context<MenubarContextValue>;
+/**
+ * useMenubarContext React hook.
+ * Import from "@instruments/materia-ui/components/menubar".
+ */
+declare const useMenubarContext: () => MenubarContextValue;
+export { MenubarContext, useMenubarContext };

package/dist/components/menubar/menubar-context.js

@@ -0,0 +1,16 @@
+"use client";
+import { createContext, use } from "react";
+/**
+ * MenubarContext UI component.
+ * Import from "@instruments/materia-ui/components/menubar".
+ */
+const MenubarContext = createContext({
+    itemRadiusClass: "rounded-xl",
+    size: "sm",
+});
+/**
+ * useMenubarContext React hook.
+ * Import from "@instruments/materia-ui/components/menubar".
+ */
+const useMenubarContext = () => use(MenubarContext);
+export { MenubarContext, useMenubarContext };

package/dist/components/menubar/menubar-group.d.ts

@@ -0,0 +1,3 @@
+/** Groups related menu items for semantics and screen-reader labelling; pair with MenubarLabel. */
+declare const MenubarGroup: (props: Omit<import("@base-ui/react").MenuGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>) => React.JSX.Element;
+export { MenubarGroup };

package/dist/components/menubar/menubar-group.js

@@ -0,0 +1,5 @@
+"use client";
+import { menubarParts } from "./menubar-parts.js";
+/** Groups related menu items for semantics and screen-reader labelling; pair with MenubarLabel. */
+const MenubarGroup = menubarParts.Group;
+export { MenubarGroup };

package/dist/components/menubar/menubar-item.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Selectable action row, composing MenuItem for consistent styling and wiring
+ * Base UI keyboard navigation. Pass label text via `children`; use the `icon` prop
+ * for a leading icon rather than nesting icon elements in `children`. Handle
+ * selection with `onClick`; set `closeOnClick={false}` to keep the menu open.
+ */
+declare const MenubarItem: (props: import("../menu-parts.js").MenuItemPartProps) => React.JSX.Element;
+export { MenubarItem };

package/dist/components/menubar/menubar-item.js

@@ -0,0 +1,10 @@
+"use client";
+import { menubarParts } from "./menubar-parts.js";
+/**
+ * Selectable action row, composing MenuItem for consistent styling and wiring
+ * Base UI keyboard navigation. Pass label text via `children`; use the `icon` prop
+ * for a leading icon rather than nesting icon elements in `children`. Handle
+ * selection with `onClick`; set `closeOnClick={false}` to keep the menu open.
+ */
+const MenubarItem = menubarParts.Item;
+export { MenubarItem };

package/dist/components/menubar/menubar-label.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Non-interactive heading for a section of menu items; sizing follows the
+ * content's `size` context. Set `inset` to align it with items that have icons.
+ * Inside a MenubarGroup or MenubarRadioGroup it also labels that group.
+ */
+declare const MenubarLabel: (props: Omit<import("@base-ui/react").MenuGroupLabelProps, "className"> & {
+    className?: string;
+} & {
+    inset?: boolean;
+}) => React.JSX.Element;
+export { MenubarLabel };

package/dist/components/menubar/menubar-label.js

@@ -0,0 +1,9 @@
+"use client";
+import { menubarParts } from "./menubar-parts.js";
+/**
+ * Non-interactive heading for a section of menu items; sizing follows the
+ * content's `size` context. Set `inset` to align it with items that have icons.
+ * Inside a MenubarGroup or MenubarRadioGroup it also labels that group.
+ */
+const MenubarLabel = menubarParts.Label;
+export { MenubarLabel };

package/dist/components/menubar/menubar-menu.d.ts

@@ -0,0 +1,8 @@
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+import type * as React from "react";
+/**
+ * A single top-level menu within the bar, pairing a MenubarTrigger with a
+ * MenubarContent. Renders no DOM of its own - it only scopes the menu's state.
+ */
+declare const MenubarMenu: ({ ...props }: React.ComponentProps<typeof MenuPrimitive.Root>) => React.JSX.Element;
+export { MenubarMenu };

package/dist/components/menubar/menubar-menu.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+/**
+ * A single top-level menu within the bar, pairing a MenubarTrigger with a
+ * MenubarContent. Renders no DOM of its own - it only scopes the menu's state.
+ */
+const MenubarMenu = ({ ...props }) => (_jsx(MenuPrimitive.Root, { "data-slot": "menubar-menu", ...props }));
+export { MenubarMenu };

package/dist/components/menubar/menubar-parts.d.ts

@@ -0,0 +1,2 @@
+/** Every Menubar part shared with the other menu families, built once. */
+export declare const menubarParts: import("../menu-parts.js").MenuFamilyParts;

package/dist/components/menubar/menubar-parts.js

@@ -0,0 +1,17 @@
+"use client";
+import { makeMenuParts } from "../menu-parts.js";
+import { MenubarContext, useMenubarContext } from "./menubar-context.js";
+/** Every Menubar part shared with the other menu families, built once. */
+export const menubarParts = makeMenuParts({
+    Context: MenubarContext,
+    content: {
+        // Menubar items are squared (rounded-sm) per Figma, unlike the pill items of
+        // Dropdown/Context menus. Explicit itemRadius still overrides via the map.
+        defaultItemRadiusClass: "rounded-sm",
+        minWidthClass: "min-w-48",
+        positioning: { align: "start", alignOffset: -4, sideOffset: 8 },
+    },
+    name: "Menubar",
+    slot: "menubar",
+    useMenuContext: useMenubarContext,
+});

package/dist/components/menubar/menubar-portal.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Portals its children into the document body. MenubarContent already
+ * portals itself, so reach for this only for custom portalling needs.
+ */
+declare const MenubarPortal: (props: Omit<import("@base-ui/react").MenuPortalProps, "ref"> & import("react").RefAttributes<HTMLDivElement>) => React.JSX.Element;
+export { MenubarPortal };

package/dist/components/menubar/menubar-portal.js

@@ -0,0 +1,8 @@
+"use client";
+import { menubarParts } from "./menubar-parts.js";
+/**
+ * Portals its children into the document body. MenubarContent already
+ * portals itself, so reach for this only for custom portalling needs.
+ */
+const MenubarPortal = menubarParts.Portal;
+export { MenubarPortal };

package/dist/components/menubar/menubar-radio-group.d.ts

@@ -0,0 +1,3 @@
+/** Groups MenubarRadioItems into a single-select set; owns the `value`/`onValueChange` state. */
+declare const MenubarRadioGroup: (props: Omit<import("@base-ui/react").MenuRadioGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>) => React.JSX.Element;
+export { MenubarRadioGroup };

package/dist/components/menubar/menubar-radio-group.js

@@ -0,0 +1,5 @@
+"use client";
+import { menubarParts } from "./menubar-parts.js";
+/** Groups MenubarRadioItems into a single-select set; owns the `value`/`onValueChange` state. */
+const MenubarRadioGroup = menubarParts.RadioGroup;
+export { MenubarRadioGroup };

package/dist/components/menubar/menubar-radio-item.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Single-select menu item showing a trailing checkmark when active. Must be
+ * rendered inside a MenubarRadioGroup, which supplies its `value`.
+ */
+declare const MenubarRadioItem: (props: import("../menu-parts.js").MenuRadioItemProps) => React.JSX.Element;
+export { MenubarRadioItem };

package/dist/components/menubar/menubar-radio-item.js

@@ -0,0 +1,8 @@
+"use client";
+import { menubarParts } from "./menubar-parts.js";
+/**
+ * Single-select menu item showing a trailing checkmark when active. Must be
+ * rendered inside a MenubarRadioGroup, which supplies its `value`.
+ */
+const MenubarRadioItem = menubarParts.RadioItem;
+export { MenubarRadioItem };

package/dist/components/menubar/menubar-root.d.ts

@@ -0,0 +1,14 @@
+import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar";
+/**
+ * Horizontal application menu bar (File / Edit / View). Wraps Base UI Menubar;
+ * compose with MenubarMenu for each top-level menu. Open state belongs to each
+ * MenubarMenu (`open`/`onOpenChange`); the bar itself has no open-menu value.
+ *
+ * @bestPractice Reserve `Menubar` for a persistent desktop app menu bar; a single click menu is `DropdownMenu`, a right-click menu is `ContextMenu`.
+ * @bestPractice Give each top-level label its own `MenubarMenu`, and control a menu's open state on that `MenubarMenu` (`open`/`onOpenChange`) rather than on the bar.
+ * @category navigation
+ */
+declare const Menubar: ({ className, ...props }: Omit<MenubarPrimitive.Props, "className"> & {
+    className?: string;
+}) => import("react").JSX.Element;
+export { Menubar };

package/dist/components/menubar/menubar-root.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * Horizontal application menu bar (File / Edit / View). Wraps Base UI Menubar;
+ * compose with MenubarMenu for each top-level menu. Open state belongs to each
+ * MenubarMenu (`open`/`onOpenChange`); the bar itself has no open-menu value.
+ *
+ * @bestPractice Reserve `Menubar` for a persistent desktop app menu bar; a single click menu is `DropdownMenu`, a right-click menu is `ContextMenu`.
+ * @bestPractice Give each top-level label its own `MenubarMenu`, and control a menu's open state on that `MenubarMenu` (`open`/`onOpenChange`) rather than on the bar.
+ * @category navigation
+ */
+const Menubar = ({ className, ...props }) => (_jsx(MenubarPrimitive, { className: cn("bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs", className), "data-component": "menubar", "data-slot": "menubar", ...props }));
+export { Menubar };