@instruments/materia-ui 0.1.0

package/dist/components/native-select/native-select-root.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { focusInput } from "@instruments/materia-ui/tokens/focus-input";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { ChevronDown } from "lucide-react";
+import { hasErrorInput } from "../../tokens/has-error-input.js";
+import { INPUT_SHELL } from "../../tokens/input-shell.js";
+import { Icon } from "../icon.js";
+/**
+ * Styled wrapper around a real native `<select>`, so it stays controlled and
+ * accessible through standard select props (`value`/`defaultValue`/`onChange`)
+ * and keeps the platform's keyboard and mobile picker behaviour.
+ *
+ * @bestPractice `NativeSelect` wraps a real `<select>` - use standard `value`/`defaultValue`/`onChange` and `NativeSelectOption`/`NativeSelectOptGroup` children, not `Select` parts.
+ * @bestPractice Reach for `NativeSelect` when the native mobile picker and zero-JS behaviour matter; use `Select` when you need custom-rendered option content or styling.
+ * @bestPractice It has no built-in label - associate a `Label` via `htmlFor`/`id` for an accessible name.
+ * @category forms
+ */
+const NativeSelect = ({ className, ...props }) => (_jsxs("div", { className: "group/native-select relative w-fit has-[select:disabled]:opacity-50", "data-component": "native-select-wrapper", "data-slot": "native-select-wrapper", children: [_jsx("select", { className: cn(focusInput(), `h-12 w-full min-w-0 appearance-none ${INPUT_SHELL} selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground transition-color-shadow text-paragraph-sm px-4 py-3 pr-9 shadow-xs disabled:pointer-events-none disabled:cursor-not-allowed`, hasErrorInput, className), "data-component": "native-select", "data-slot": "native-select", ...props }), _jsx(Icon, { "aria-hidden": "true", className: "pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 opacity-50 select-none", "data-component": "native-select-icon", "data-slot": "native-select-icon", icon: ChevronDown, size: "xs" })] }));
+export { NativeSelectOptGroup } from "./native-select-optgroup.js";
+export { NativeSelectOption } from "./native-select-option.js";
+export { NativeSelect };

package/dist/components/native-select.d.ts

@@ -0,0 +1 @@
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption, } from "./native-select/native-select-root.js";

package/dist/components/native-select.js

@@ -0,0 +1 @@
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption, } from "./native-select/native-select-root.js";

package/dist/components/navigation-menu/navigation-menu-anatomy.d.ts

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

package/dist/components/navigation-menu/navigation-menu-anatomy.js

@@ -0,0 +1,58 @@
+import { defineAnatomy } from "../../tokens/anatomy.js";
+/**
+ * navigationMenuAnatomy helper for NavigationMenu.
+ * Import from "@instruments/materia-ui/components/navigation-menu".
+ */
+export const navigationMenuAnatomy = defineAnatomy({
+    children: [
+        {
+            children: [
+                {
+                    children: [
+                        {
+                            description: "Pill button opening a menu panel",
+                            label: "NavigationMenuTrigger",
+                            slot: "navigation-menu-trigger",
+                        },
+                        {
+                            children: [
+                                {
+                                    description: "Link inside a panel",
+                                    label: "NavigationMenuLink",
+                                    slot: "navigation-menu-link",
+                                },
+                            ],
+                            description: "Panel of links / rich content",
+                            label: "NavigationMenuContent",
+                            slot: "navigation-menu-content",
+                        },
+                        {
+                            description: "Top-level link (no panel)",
+                            label: "NavigationMenuLink",
+                            slot: "navigation-menu-link",
+                        },
+                    ],
+                    description: "A single top-level entry",
+                    label: "NavigationMenuItem",
+                    slot: "navigation-menu-item",
+                },
+                {
+                    description: "Arrow pointing at the active trigger",
+                    label: "NavigationMenuIndicator",
+                    slot: "navigation-menu-indicator",
+                },
+            ],
+            description: "Horizontal row of navigation entries",
+            label: "NavigationMenuList",
+            slot: "navigation-menu-list",
+        },
+        {
+            description: "Shared animated surface hosting the open panel",
+            label: "NavigationMenuViewport",
+            slot: "navigation-menu-viewport",
+        },
+    ],
+    description: "Horizontal site navigation with dropdown panels",
+    label: "NavigationMenu",
+    slot: "navigation-menu",
+});

package/dist/components/navigation-menu/navigation-menu-content.d.ts

@@ -0,0 +1,11 @@
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+/**
+ * Panel of links or rich content revealed by a NavigationMenuTrigger. It is
+ * hosted inside the shared NavigationMenuViewport popup, which owns the surface
+ * chrome, and slides horizontally (keyed off `data-activation-direction`) as the
+ * active entry changes.
+ */
+declare const NavigationMenuContent: ({ className, ...props }: Omit<NavigationMenuPrimitive.Content.Props, "className"> & {
+    className?: string;
+}) => import("react").JSX.Element;
+export { NavigationMenuContent };

package/dist/components/navigation-menu/navigation-menu-content.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * Panel of links or rich content revealed by a NavigationMenuTrigger. It is
+ * hosted inside the shared NavigationMenuViewport popup, which owns the surface
+ * chrome, and slides horizontally (keyed off `data-activation-direction`) as the
+ * active entry changes.
+ */
+const NavigationMenuContent = ({ className, ...props }) => (_jsx(NavigationMenuPrimitive.Content, { className: cn("duration-quick h-full w-auto p-2 transition ease-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:data-[activation-direction=left]:translate-x-52 data-starting-style:data-[activation-direction=left]:-translate-x-52 data-ending-style:data-[activation-direction=right]:-translate-x-52 data-starting-style:data-[activation-direction=right]:translate-x-52 motion-reduce:transition-none", className), "data-component": "navigation-menu-content", "data-slot": "navigation-menu-content", ...props }));
+export { NavigationMenuContent };

package/dist/components/navigation-menu/navigation-menu-indicator.d.ts

@@ -0,0 +1,12 @@
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+import type * as React from "react";
+/**
+ * Small arrow that points from the open panel up at the active trigger,
+ * tracking it. Optional - Base UI renders it inside the popup, so place it in a
+ * `NavigationMenuViewport` (set `viewport={false}` on the NavigationMenu and
+ * render your own). The rotated tile matches the popover surface chrome.
+ */
+declare const NavigationMenuIndicator: ({ className, ...props }: Omit<React.ComponentProps<typeof NavigationMenuPrimitive.Arrow>, "className"> & {
+    className?: string;
+}) => React.JSX.Element;
+export { NavigationMenuIndicator };

package/dist/components/navigation-menu/navigation-menu-indicator.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * Small arrow that points from the open panel up at the active trigger,
+ * tracking it. Optional - Base UI renders it inside the popup, so place it in a
+ * `NavigationMenuViewport` (set `viewport={false}` on the NavigationMenu and
+ * render your own). The rotated tile matches the popover surface chrome.
+ */
+const NavigationMenuIndicator = ({ className, ...props }) => (_jsx(NavigationMenuPrimitive.Arrow, { className: cn("z-[1] flex h-1.5 w-3 items-end justify-center overflow-hidden data-[side=bottom]:-top-1.5 data-[side=top]:-bottom-1.5 data-[side=top]:rotate-180", className), "data-component": "navigation-menu-indicator", "data-slot": "navigation-menu-indicator", ...props, children: _jsx("div", { className: "bg-popover relative top-[60%] size-2 rotate-45 rounded-tl-sm border shadow-xs" }) }));
+export { NavigationMenuIndicator };

package/dist/components/navigation-menu/navigation-menu-item.d.ts

@@ -0,0 +1,11 @@
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+import type * as React from "react";
+/**
+ * A single top-level navigation entry, pairing a NavigationMenuTrigger with a
+ * NavigationMenuContent panel - or holding one NavigationMenuLink for a plain
+ * top-level link. The relative host anchors the panel.
+ */
+declare const NavigationMenuItem: ({ className, ...props }: Omit<React.ComponentProps<typeof NavigationMenuPrimitive.Item>, "className"> & {
+    className?: string;
+}) => React.JSX.Element;
+export { NavigationMenuItem };

package/dist/components/navigation-menu/navigation-menu-item.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * A single top-level navigation entry, pairing a NavigationMenuTrigger with a
+ * NavigationMenuContent panel - or holding one NavigationMenuLink for a plain
+ * top-level link. The relative host anchors the panel.
+ */
+const NavigationMenuItem = ({ className, ...props }) => (_jsx(NavigationMenuPrimitive.Item, { className: cn("relative", className), "data-component": "navigation-menu-item", "data-slot": "navigation-menu-item", ...props }));
+export { NavigationMenuItem };

package/dist/components/navigation-menu/navigation-menu-link.d.ts

@@ -0,0 +1,13 @@
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+/**
+ * A navigation link. Inside a NavigationMenuContent panel it renders as a
+ * stacked, hover-highlighted row (title + description); as a direct child of a
+ * NavigationMenuItem it is a top-level link - pass
+ * `className={navigationMenuTriggerStyle()}` to give it the trigger pill look.
+ * Mark the current page with `active` (sets `data-active` and `aria-current`).
+ * Use `render` to compose a framework link component.
+ */
+declare const NavigationMenuLink: ({ className, ...props }: Omit<NavigationMenuPrimitive.Link.Props, "className"> & {
+    className?: string;
+}) => import("react").JSX.Element;
+export { NavigationMenuLink };

package/dist/components/navigation-menu/navigation-menu-link.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+import { focusRing } from "@instruments/materia-ui/tokens/focus-ring";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * A navigation link. Inside a NavigationMenuContent panel it renders as a
+ * stacked, hover-highlighted row (title + description); as a direct child of a
+ * NavigationMenuItem it is a top-level link - pass
+ * `className={navigationMenuTriggerStyle()}` to give it the trigger pill look.
+ * Mark the current page with `active` (sets `data-active` and `aria-current`).
+ * Use `render` to compose a framework link component.
+ */
+const NavigationMenuLink = ({ className, ...props }) => (_jsx(NavigationMenuPrimitive.Link, { className: cn(focusRing(), "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-active:bg-accent/50 data-active:text-accent-foreground data-active:hover:bg-accent data-active:focus:bg-accent [&_svg:not([class*='text-'])]:text-muted-foreground transition-color-shadow text-paragraph-sm flex flex-col gap-1 rounded-2xl p-2 outline-hidden select-none [&_svg:not([class*='size-'])]:size-4", className), "data-component": "navigation-menu-link", "data-slot": "navigation-menu-link", ...props }));
+export { NavigationMenuLink };

package/dist/components/navigation-menu/navigation-menu-list.d.ts

@@ -0,0 +1,10 @@
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+import type * as React from "react";
+/**
+ * Horizontal row wrapping the individual NavigationMenuItem entries. Renders the
+ * `<ul>`; the row is styled kin to the Tabs pill cluster.
+ */
+declare const NavigationMenuList: ({ className, ...props }: Omit<React.ComponentProps<typeof NavigationMenuPrimitive.List>, "className"> & {
+    className?: string;
+}) => React.JSX.Element;
+export { NavigationMenuList };

package/dist/components/navigation-menu/navigation-menu-list.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+import { cn } from "@instruments/materia-ui/utils/cn";
+/**
+ * Horizontal row wrapping the individual NavigationMenuItem entries. Renders the
+ * `<ul>`; the row is styled kin to the Tabs pill cluster.
+ */
+const NavigationMenuList = ({ className, ...props }) => (_jsx(NavigationMenuPrimitive.List, { className: cn("group flex flex-1 list-none items-center justify-center gap-1", className), "data-component": "navigation-menu-list", "data-slot": "navigation-menu-list", ...props }));
+export { NavigationMenuList };

package/dist/components/navigation-menu/navigation-menu-root.d.ts

@@ -0,0 +1,22 @@
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+/**
+ * Horizontal site navigation whose entries can open dropdown panels of links or
+ * rich content. Wraps Base UI NavigationMenu Root; compose with
+ * NavigationMenuList and NavigationMenuItem. Which entry is open is
+ * uncontrolled by default; pass `value`/`onValueChange` to control it.
+ *
+ * @bestPractice Reserve `NavigationMenu` for site/section navigation with panels; a click actions menu is `DropdownMenu`, a desktop app menu bar is `Menubar`, and simple in-page routed tabs are `TabNavigation`.
+ * @bestPractice Keep it uncontrolled unless you must drive it; leave `viewport` on unless you render your own `NavigationMenuViewport` (e.g. to place a `NavigationMenuIndicator` in it).
+ * @category navigation
+ */
+declare const NavigationMenu: ({ className, children, viewport, ...props }: Omit<NavigationMenuPrimitive.Root.Props, "className"> & {
+    className?: string;
+    /**
+     * Render the shared animated popup that hosts open panels. Base UI always
+     * hosts panels in a shared popup; set `false` only to render your own
+     * `NavigationMenuViewport` (the host is then yours to place).
+     * @default true
+     */
+    viewport?: boolean;
+}) => import("react").JSX.Element;
+export { NavigationMenu };

package/dist/components/navigation-menu/navigation-menu-root.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { NavigationMenuViewport } from "./navigation-menu-viewport.js";
+/**
+ * Horizontal site navigation whose entries can open dropdown panels of links or
+ * rich content. Wraps Base UI NavigationMenu Root; compose with
+ * NavigationMenuList and NavigationMenuItem. Which entry is open is
+ * uncontrolled by default; pass `value`/`onValueChange` to control it.
+ *
+ * @bestPractice Reserve `NavigationMenu` for site/section navigation with panels; a click actions menu is `DropdownMenu`, a desktop app menu bar is `Menubar`, and simple in-page routed tabs are `TabNavigation`.
+ * @bestPractice Keep it uncontrolled unless you must drive it; leave `viewport` on unless you render your own `NavigationMenuViewport` (e.g. to place a `NavigationMenuIndicator` in it).
+ * @category navigation
+ */
+const NavigationMenu = ({ className, children, viewport = true, ...props }) => (_jsxs(NavigationMenuPrimitive.Root, { className: cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className), "data-component": "navigation-menu", "data-slot": "navigation-menu", "data-viewport": viewport, ...props, children: [children, viewport ? _jsx(NavigationMenuViewport, {}) : null] }));
+export { NavigationMenu };

package/dist/components/navigation-menu/navigation-menu-trigger.d.ts

@@ -0,0 +1,24 @@
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+/**
+ * Shared class string for a top-level navigation trigger / link - a rounded
+ * pill styled kin to the Tabs pill, tinting to `accent` on hover / focus and
+ * while its panel is open. The focus ring is applied separately in
+ * {@link navigationMenuTriggerStyle} so the focus-token gate can track it and
+ * so its `transition-shadow` sorts ahead of this string's transition list.
+ */
+export declare const NAVIGATION_MENU_TRIGGER_CLASSES = "group inline-flex h-9 w-max cursor-pointer items-center justify-center gap-1 rounded-full bg-background px-4 py-2 text-sm font-medium text-muted-foreground outline-hidden transition-color-shadow select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-accent/50 data-popup-open:text-accent-foreground";
+/**
+ * Class helper for a navigation trigger's pill styling. Apply it to a
+ * {@link NavigationMenuLink} that should look like a NavigationMenuTrigger but
+ * has no dropdown panel (a plain top-level link):
+ * `<NavigationMenuLink className={navigationMenuTriggerStyle()} …>`.
+ */
+export declare const navigationMenuTriggerStyle: () => string;
+/**
+ * Pill button that reveals its NavigationMenuContent panel on hover / click,
+ * with a trailing chevron that flips when the panel is open.
+ */
+declare const NavigationMenuTrigger: ({ className, children, ...props }: Omit<NavigationMenuPrimitive.Trigger.Props, "className"> & {
+    className?: string;
+}) => import("react").JSX.Element;
+export { NavigationMenuTrigger };

package/dist/components/navigation-menu/navigation-menu-trigger.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+import { focusRing } from "@instruments/materia-ui/tokens/focus-ring";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { ChevronDown } from "lucide-react";
+import { Icon } from "../icon.js";
+/**
+ * Shared class string for a top-level navigation trigger / link - a rounded
+ * pill styled kin to the Tabs pill, tinting to `accent` on hover / focus and
+ * while its panel is open. The focus ring is applied separately in
+ * {@link navigationMenuTriggerStyle} so the focus-token gate can track it and
+ * so its `transition-shadow` sorts ahead of this string's transition list.
+ */
+export const NAVIGATION_MENU_TRIGGER_CLASSES = "group inline-flex h-9 w-max cursor-pointer items-center justify-center gap-1 rounded-full bg-background px-4 py-2 text-sm font-medium text-muted-foreground outline-hidden transition-color-shadow select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-accent/50 data-popup-open:text-accent-foreground";
+/**
+ * Class helper for a navigation trigger's pill styling. Apply it to a
+ * {@link NavigationMenuLink} that should look like a NavigationMenuTrigger but
+ * has no dropdown panel (a plain top-level link):
+ * `<NavigationMenuLink className={navigationMenuTriggerStyle()} …>`.
+ */
+export const navigationMenuTriggerStyle = () => cn(focusRing(), NAVIGATION_MENU_TRIGGER_CLASSES);
+/**
+ * Pill button that reveals its NavigationMenuContent panel on hover / click,
+ * with a trailing chevron that flips when the panel is open.
+ */
+const NavigationMenuTrigger = ({ className, children, ...props }) => (_jsxs(NavigationMenuPrimitive.Trigger, { className: cn(navigationMenuTriggerStyle(), className), "data-component": "navigation-menu-trigger", "data-slot": "navigation-menu-trigger", ...props, children: [children, _jsx(Icon, { className: "duration-normal transition-transform group-data-popup-open:rotate-180", icon: ChevronDown, size: "2xs" })] }));
+export { NavigationMenuTrigger };

package/dist/components/navigation-menu/navigation-menu-viewport.d.ts

@@ -0,0 +1,20 @@
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+import type * as React from "react";
+type NavigationMenuViewportProps = Omit<NavigationMenuPrimitive.Popup.Props, "className"> & Pick<NavigationMenuPrimitive.Positioner.Props, "align" | "alignOffset" | "anchor" | "arrowPadding" | "collisionAvoidance" | "collisionBoundary" | "collisionPadding" | "side" | "sticky"> & {
+    className?: string;
+    /** Distance in pixels between the active trigger and the popup. */
+    sideOffset?: NavigationMenuPrimitive.Positioner.Props["sideOffset"];
+    /** Rendered inside the popup above the panels, e.g. a NavigationMenuIndicator. */
+    children?: React.ReactNode;
+};
+/**
+ * Shared animated popup that hosts the open panel. Composes Base UI's Portal,
+ * Positioner, Popup and Viewport: the Popup carries the surface chrome (border /
+ * rounding / shadow) and is sized to the active NavigationMenuContent by Base
+ * UI. Rounding + shadow mirror `MENU_SURFACE_CLASSES.default` (rounded-3xl /
+ * shadow-md) to stay kin to DropdownMenu / Menubar. NavigationMenu renders this
+ * automatically unless `viewport={false}`. Positioning props go to the
+ * Positioner; `className` styles the popup surface.
+ */
+declare const NavigationMenuViewport: ({ className, children, align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, side, sideOffset, sticky, ...props }: NavigationMenuViewportProps) => React.JSX.Element;
+export { NavigationMenuViewport };

package/dist/components/navigation-menu/navigation-menu-viewport.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { POPOVER_SURFACE } from "../../tokens/overlay-styles.js";
+/**
+ * Shared animated popup that hosts the open panel. Composes Base UI's Portal,
+ * Positioner, Popup and Viewport: the Popup carries the surface chrome (border /
+ * rounding / shadow) and is sized to the active NavigationMenuContent by Base
+ * UI. Rounding + shadow mirror `MENU_SURFACE_CLASSES.default` (rounded-3xl /
+ * shadow-md) to stay kin to DropdownMenu / Menubar. NavigationMenu renders this
+ * automatically unless `viewport={false}`. Positioning props go to the
+ * Positioner; `className` styles the popup surface.
+ */
+const NavigationMenuViewport = ({ className, children, align, alignOffset, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, side, sideOffset = 6, sticky, ...props }) => (_jsx(NavigationMenuPrimitive.Portal, { children: _jsx(NavigationMenuPrimitive.Positioner, { align: align, alignOffset: alignOffset, anchor: anchor, arrowPadding: arrowPadding, className: "z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width)", collisionAvoidance: collisionAvoidance, collisionBoundary: collisionBoundary, collisionPadding: collisionPadding, side: side, sideOffset: sideOffset, sticky: sticky, children: _jsxs(NavigationMenuPrimitive.Popup, { className: cn(POPOVER_SURFACE, "data-closed:animate-out data-closed:zoom-out-95 data-open:animate-in data-open:zoom-in-90 relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-3xl border outline-none motion-reduce:animate-none! dark:shadow-none", className), "data-component": "navigation-menu-viewport", "data-slot": "navigation-menu-viewport", ...props, children: [children, _jsx(NavigationMenuPrimitive.Viewport, { className: "relative size-full overflow-hidden" })] }) }) }));
+export { NavigationMenuViewport };

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

@@ -0,0 +1,9 @@
+export { navigationMenuAnatomy } from "./navigation-menu/navigation-menu-anatomy.js";
+export { NavigationMenuContent } from "./navigation-menu/navigation-menu-content.js";
+export { NavigationMenuIndicator } from "./navigation-menu/navigation-menu-indicator.js";
+export { NavigationMenuItem } from "./navigation-menu/navigation-menu-item.js";
+export { NavigationMenuLink } from "./navigation-menu/navigation-menu-link.js";
+export { NavigationMenuList } from "./navigation-menu/navigation-menu-list.js";
+export { NavigationMenu } from "./navigation-menu/navigation-menu-root.js";
+export { NAVIGATION_MENU_TRIGGER_CLASSES, NavigationMenuTrigger, navigationMenuTriggerStyle, } from "./navigation-menu/navigation-menu-trigger.js";
+export { NavigationMenuViewport } from "./navigation-menu/navigation-menu-viewport.js";

package/dist/components/navigation-menu.js

@@ -0,0 +1,9 @@
+export { navigationMenuAnatomy } from "./navigation-menu/navigation-menu-anatomy.js";
+export { NavigationMenuContent } from "./navigation-menu/navigation-menu-content.js";
+export { NavigationMenuIndicator } from "./navigation-menu/navigation-menu-indicator.js";
+export { NavigationMenuItem } from "./navigation-menu/navigation-menu-item.js";
+export { NavigationMenuLink } from "./navigation-menu/navigation-menu-link.js";
+export { NavigationMenuList } from "./navigation-menu/navigation-menu-list.js";
+export { NavigationMenu } from "./navigation-menu/navigation-menu-root.js";
+export { NAVIGATION_MENU_TRIGGER_CLASSES, NavigationMenuTrigger, navigationMenuTriggerStyle, } from "./navigation-menu/navigation-menu-trigger.js";
+export { NavigationMenuViewport } from "./navigation-menu/navigation-menu-viewport.js";

package/dist/components/overlay-primitives.d.ts

@@ -0,0 +1,62 @@
+import type { ComponentProps, ElementType, ReactElement } from "react";
+/**
+ * Internal factory for the overlay wrapper family (dialog / sheet / sidepanel).
+ * These families each wrap the same Base UI `Dialog` primitive, so the thin
+ * `data-slot` boilerplate shells are byte-identical; this module produces them
+ * from a per-part identity so each shell shrinks to one call.
+ *
+ * Not part of the published surface - a plain `.ts` under `components/`, so it
+ * is invisible to the `.tsx`-only api-report scan and consumed only by sibling
+ * overlay part files. Import from "@instruments/materia-ui/components/overlay-primitives".
+ */
+/**
+ * data-* identity for a plain overlay part (root / portal / trigger / close).
+ * `component` and `slot` carry the same string in every current family, but
+ * they stay separate args so a single part can diverge without reshaping the
+ * factory.
+ */
+interface OverlayPartIds {
+    /** Value for the `data-component` attribute. */
+    component: string;
+    /** Value for the `data-slot` attribute. */
+    slot: string;
+}
+/**
+ * Identity + base class for a `cn`-merged overlay part (title / description).
+ * `slot` fills both `data-component` and `data-slot`.
+ */
+interface OverlayStyledIds {
+    /** Value for both `data-component` and `data-slot`. */
+    slot: string;
+    /** Base class merged ahead of the caller's `className`. */
+    className: string;
+}
+/**
+ * Builds a bare pass-through overlay shell: it forwards every prop to
+ * `Primitive` and stamps the `data-component` / `data-slot` identity ahead of
+ * the spread (so a caller can still override either attribute). Powers the
+ * root, portal, trigger, and close shells across the dialog / sheet / sidepanel
+ * families.
+ */
+declare const makeOverlayPart: <T extends ElementType>(Primitive: T, { component, slot }: OverlayPartIds) => (props: ComponentProps<T>) => ReactElement;
+/**
+ * Builds a `cn`-merged overlay shell: it merges `className` ahead of the
+ * caller's own class and stamps the slot identity. Powers the title and
+ * description shells that share `OVERLAY_TITLE` / `OVERLAY_DESCRIPTION`.
+ */
+declare const makeOverlayStyledPart: <T extends ElementType>(Primitive: T, { slot, className }: OverlayStyledIds) => ({ className: incoming, ...props }: Omit<ComponentProps<T>, "className"> & {
+    className?: string;
+}) => ReactElement;
+/** Root shell - `<Primitive data-component data-slot {...props} />`. */
+export declare const makeOverlayRoot: typeof makeOverlayPart;
+/** Portal shell - bare pass-through with identity attributes. */
+export declare const makeOverlayPortal: typeof makeOverlayPart;
+/** Trigger shell - bare pass-through with identity attributes. */
+export declare const makeOverlayTrigger: typeof makeOverlayPart;
+/** Close shell - bare pass-through with identity attributes. */
+export declare const makeOverlayClose: typeof makeOverlayPart;
+/** Title shell - `cn`-merged base class plus identity attributes. */
+export declare const makeOverlayTitle: typeof makeOverlayStyledPart;
+/** Description shell - `cn`-merged base class plus identity attributes. */
+export declare const makeOverlayDescription: typeof makeOverlayStyledPart;
+export {};

package/dist/components/overlay-primitives.js

@@ -0,0 +1,43 @@
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { createElement } from "react";
+/**
+ * Builds a bare pass-through overlay shell: it forwards every prop to
+ * `Primitive` and stamps the `data-component` / `data-slot` identity ahead of
+ * the spread (so a caller can still override either attribute). Powers the
+ * root, portal, trigger, and close shells across the dialog / sheet / sidepanel
+ * families.
+ */
+const makeOverlayPart = (Primitive, { component, slot }) => {
+    const OverlayPart = (props) => createElement(Primitive, {
+        "data-component": component,
+        "data-slot": slot,
+        ...props,
+    });
+    return OverlayPart;
+};
+/**
+ * Builds a `cn`-merged overlay shell: it merges `className` ahead of the
+ * caller's own class and stamps the slot identity. Powers the title and
+ * description shells that share `OVERLAY_TITLE` / `OVERLAY_DESCRIPTION`.
+ */
+const makeOverlayStyledPart = (Primitive, { slot, className }) => {
+    const OverlayStyledPart = ({ className: incoming, ...props }) => createElement(Primitive, {
+        className: cn(className, incoming),
+        "data-component": slot,
+        "data-slot": slot,
+        ...props,
+    });
+    return OverlayStyledPart;
+};
+/** Root shell - `<Primitive data-component data-slot {...props} />`. */
+export const makeOverlayRoot = makeOverlayPart;
+/** Portal shell - bare pass-through with identity attributes. */
+export const makeOverlayPortal = makeOverlayPart;
+/** Trigger shell - bare pass-through with identity attributes. */
+export const makeOverlayTrigger = makeOverlayPart;
+/** Close shell - bare pass-through with identity attributes. */
+export const makeOverlayClose = makeOverlayPart;
+/** Title shell - `cn`-merged base class plus identity attributes. */
+export const makeOverlayTitle = makeOverlayStyledPart;
+/** Description shell - `cn`-merged base class plus identity attributes. */
+export const makeOverlayDescription = makeOverlayStyledPart;

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

@@ -0,0 +1,36 @@
+import type { ResponsiveSize } from "../../tokens/size.js";
+interface PaginationProps {
+    /** Additional className for the nav wrapper */
+    className?: string;
+    /** Disable all controls */
+    disabled?: boolean;
+    /** Page button to render in loading state */
+    loadingPage?: number;
+    /** Called when page changes */
+    onPageChange: (page: number) => void;
+    /** Current page (1-indexed) */
+    page: number;
+    /**
+     * Button size - a single token or a per-breakpoint object like
+     * `{ base: "xs", md: "sm" }`. Forwarded to every control Button. @default "sm"
+     */
+    size?: ResponsiveSize;
+    /** Total number of pages */
+    totalPages: number;
+}
+/**
+ * Standalone pagination component.
+ * Works with any data source - not coupled to react-table.
+ *
+ * @example
+ * ```tsx
+ * <Pagination page={2} totalPages={13} onPageChange={setPage} />
+ * ```
+ *
+ * @bestPractice Drive it as a controlled control - pass `page`+`totalPages` and update state in `onPageChange`; it holds no internal page state.
+ * @bestPractice It is data-source agnostic (not coupled to react-table); for grid paging use the DataGrid's own pagination parts instead.
+ * @bestPractice Signal an in-flight jump with `loadingPage={n}` so only that button spins; leave a11y labels to the component (each control is pre-labelled).
+ * @category navigation
+ */
+declare const Pagination: ({ page, totalPages, onPageChange, loadingPage, size, disabled, className, }: PaginationProps) => import("react").JSX.Element;
+export { Pagination, type PaginationProps };

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import { Button } from "../button.js";
+import { Center } from "../center.js";
+import { Flex } from "../flex.js";
+import { getPageRange } from "../pagination/pagination-utils.js";
+/**
+ * Standalone pagination component.
+ * Works with any data source - not coupled to react-table.
+ *
+ * @example
+ * ```tsx
+ * <Pagination page={2} totalPages={13} onPageChange={setPage} />
+ * ```
+ *
+ * @bestPractice Drive it as a controlled control - pass `page`+`totalPages` and update state in `onPageChange`; it holds no internal page state.
+ * @bestPractice It is data-source agnostic (not coupled to react-table); for grid paging use the DataGrid's own pagination parts instead.
+ * @bestPractice Signal an in-flight jump with `loadingPage={n}` so only that button spins; leave a11y labels to the component (each control is pre-labelled).
+ * @category navigation
+ */
+const Pagination = ({ page, totalPages, onPageChange, loadingPage, size = "sm", disabled = false, className, }) => {
+    const pages = getPageRange(page, totalPages);
+    const isFirstPage = page <= 1;
+    const isLastPage = page >= totalPages;
+    const pageElements = pages.map((item, index) => {
+        if (item === "ellipsis") {
+            return (_jsx(Center, { "aria-hidden": "true", as: "span", className: "text-muted-foreground text-paragraph-sm min-w-8", children: "\u2026" }, `ellipsis-${index}`));
+        }
+        const isActive = item === page;
+        const isLoadingPage = item === loadingPage;
+        return (_jsx(Button, { "aria-current": isActive ? "page" : undefined, "aria-label": `Go to page ${item}`, asInput: isActive, disabled: disabled, emphasis: "ghost", loading: isLoadingPage, onClick: () => {
+                onPageChange(item);
+            }, size: size, tone: "neutral", children: item }, item));
+    });
+    return (_jsxs(Flex, { align: "center", "aria-label": "Pagination", as: "nav", className: className, "data-component": "pagination", "data-slot": "pagination", justify: "space-between", children: [_jsx(Button, { "aria-label": "Go to previous page", disabled: disabled || isFirstPage, icon: ChevronLeftIcon, onClick: () => {
+                    onPageChange(page - 1);
+                }, size: size, tone: "neutral", emphasis: "ghost", children: "Previous" }), _jsx(Flex, { align: "center", gap: "3xs", children: pageElements }), _jsx(Button, { "aria-label": "Go to next page", disabled: disabled || isLastPage, onClick: () => {
+                    onPageChange(page + 1);
+                }, size: size, suffixIcon: ChevronRightIcon, tone: "neutral", emphasis: "ghost", children: "Next" })] }));
+};
+export { Pagination };

package/dist/components/pagination/pagination-utils.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Generates a page range array for pagination display.
+ *
+ * Uses boundary count of 1 (always show first and last page)
+ * and sibling count of 1 (one page on each side of current).
+ * When a gap is only 1 page wide, shows the number instead of ellipsis.
+ *
+ * @returns Array of page numbers and "ellipsis" markers
+ *
+ * @example
+ * getPageRange(1, 5) // [1, 2, 3, 4, 5]
+ * getPageRange(2, 13) // [1, 2, 3, "ellipsis", 13]
+ * getPageRange(7, 13) // [1, "ellipsis", 6, 7, 8, "ellipsis", 13]
+ * getPageRange(12, 13) // [1, "ellipsis", 11, 12, 13]
+ */
+declare const getPageRange: (page: number, totalPages: number) => (number | "ellipsis")[];
+export { getPageRange };