@instruments/materia-ui 0.1.0

package/dist/compositions/mobile-navigation/mobile-navigation-anatomy.d.ts

@@ -0,0 +1,5 @@
+/**
+ * mobileNavigationAnatomy helper for MobileNavigation.
+ * Import from "@instruments/materia-ui/compositions/mobile-navigation".
+ */
+export declare const mobileNavigationAnatomy: import("../../tokens/anatomy.js").ComponentAnatomy;

package/dist/compositions/mobile-navigation/mobile-navigation-anatomy.js

@@ -0,0 +1,36 @@
+import { defineAnatomy } from "../../tokens/anatomy.js";
+/**
+ * mobileNavigationAnatomy helper for MobileNavigation.
+ * Import from "@instruments/materia-ui/compositions/mobile-navigation".
+ */
+export const mobileNavigationAnatomy = defineAnatomy({
+    children: [
+        {
+            children: [
+                {
+                    description: "Branded top bar with a close action",
+                    label: "MobileNavigationHeader",
+                    slot: "mobile-navigation-header",
+                },
+                {
+                    children: [
+                        {
+                            description: "Single navigation entry with icon and active state",
+                            label: "MobileNavigationItem",
+                            slot: "mobile-navigation-item",
+                        },
+                    ],
+                    description: "Scrollable region holding the navigation list",
+                    label: "MobileNavigationContent",
+                    slot: "mobile-navigation-content",
+                },
+            ],
+            description: "Full-height frame that stacks header and content",
+            label: "MobileNavigationFrame",
+            slot: "mobile-navigation-frame",
+        },
+    ],
+    description: "Root controlling open state for the mobile drawer",
+    label: "MobileNavigationRoot",
+    slot: "mobile-navigation-root",
+});

package/dist/compositions/mobile-navigation/mobile-navigation-drawer.d.ts

@@ -0,0 +1,27 @@
+import { useRender } from "@base-ui/react/use-render";
+import type React from "react";
+import { DrawerContent } from "../../components/drawer.js";
+import { VStack } from "../../components/stack.js";
+import { Text } from "../../components/text.js";
+/**
+ * Scrollable main region of the drawer, padded to clear a fixed bottom action.
+ */
+export declare const MobileNavigationContent: ({ className, ...props }: React.ComponentProps<"main">) => React.JSX.Element;
+/** Gapless vertical stack for adjacent drawer rows. */
+export declare const MobileNavigationDrawerStack: (props: React.ComponentProps<typeof VStack>) => React.JSX.Element;
+/** Vertical stack grouping related drawer rows with a small gap. */
+export declare const MobileNavigationDrawerSection: (props: React.ComponentProps<typeof VStack>) => React.JSX.Element;
+/**
+ * Bottom-sheet {@link DrawerContent} styled for mobile navigation: rounded top
+ * and safe-area-aware padding.
+ */
+export declare const MobileNavigationDrawerContent: ({ className, ...props }: React.ComponentProps<typeof DrawerContent>) => React.JSX.Element;
+/** Centred vertical panel for empty or confirmation states inside the drawer. */
+export declare const MobileNavigationCenteredPanel: ({ className, ...props }: React.ComponentProps<typeof VStack>) => React.JSX.Element;
+/** Horizontally centred {@link Text} for use within a centred panel. */
+export declare const MobileNavigationCenteredText: ({ className, ...props }: React.ComponentProps<typeof Text>) => React.JSX.Element;
+/**
+ * Truncating label slot for a drawer row's text content. Renders a `span`; pass
+ * `render` to apply the truncation styles to your own element instead.
+ */
+export declare const MobileNavigationSlottedText: ({ className, render, ...props }: useRender.ComponentProps<"span">) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;

package/dist/compositions/mobile-navigation/mobile-navigation-drawer.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { DrawerContent } from "../../components/drawer.js";
+import { Flex } from "../../components/flex.js";
+import { VStack } from "../../components/stack.js";
+import { Text } from "../../components/text.js";
+import { cn } from "../../utils/cn.js";
+/**
+ * Scrollable main region of the drawer, padded to clear a fixed bottom action.
+ */
+export const MobileNavigationContent = ({ className, ...props }) => (_jsx(Flex, { as: "main", className: cn("pb-safe-24 min-h-0 flex-1 px-4 pt-5", className), direction: "column", ...props }));
+/** Gapless vertical stack for adjacent drawer rows. */
+export const MobileNavigationDrawerStack = (props) => _jsx(VStack, { gap: "none", ...props });
+/** Vertical stack grouping related drawer rows with a small gap. */
+export const MobileNavigationDrawerSection = (props) => _jsx(VStack, { gap: "xs", ...props });
+/**
+ * Bottom-sheet {@link DrawerContent} styled for mobile navigation: rounded top
+ * and safe-area-aware padding.
+ */
+export const MobileNavigationDrawerContent = ({ className, ...props }) => (_jsx(DrawerContent, { className: cn("pb-safe-min-4 z-80 rounded-t-3xl border-gray-200 bg-gray-100 px-4 pt-8", className), ...props }));
+/** Centred vertical panel for empty or confirmation states inside the drawer. */
+export const MobileNavigationCenteredPanel = ({ className, ...props }) => (_jsx(VStack, { className: cn("px-7 py-6 text-center", className), gap: "base", ...props }));
+/** Horizontally centred {@link Text} for use within a centred panel. */
+export const MobileNavigationCenteredText = ({ className, ...props }) => (_jsx(Text, { className: cn("mx-auto", className), ...props }));
+/**
+ * Truncating label slot for a drawer row's text content. Renders a `span`; pass
+ * `render` to apply the truncation styles to your own element instead.
+ */
+export const MobileNavigationSlottedText = ({ className, render, ...props }) => useRender({
+    defaultTagName: "span",
+    props: mergeProps({
+        className: cn("text-paragraph min-w-0 flex-1 truncate text-left", className),
+    }, props),
+    render,
+});

package/dist/compositions/mobile-navigation/mobile-navigation-header.d.ts

@@ -0,0 +1,54 @@
+import type React from "react";
+import { Button } from "../../components/button.js";
+import { Flex } from "../../components/flex.js";
+/** The page surface a `MobileNavigationAppHeader` sits on, and so matches. */
+export type MobileNavigationAppHeaderSurface = "muted" | "card" | "background";
+/**
+ * Fixed top app bar for the mobile shell; hidden from `hideFrom` up.
+ *
+ * @bestPractice Inside a `SidebarProvider` frame pass `hideFrom="md"`: the sidebar switches to its desktop rail at md, so the bar should hand over at the same width rather than overlap the rail between md and lg.
+ * @bestPractice Set `surface` to the colour of the page under the bar - `card` when the phone's whole screen is the content card (an inset sidebar frame), `background` on a flat (`variant="sidebar"`) frame's page, `muted` on the grey canvas - so content scrolls under it without a seam.
+ */
+export declare const MobileNavigationAppHeader: ({ className, hideFrom, surface, ...props }: React.ComponentProps<"div"> & {
+    /**
+     * Breakpoint from which the bar is hidden. `md` matches the sidebar's
+     * desktop switch; `lg` matches the app's own mobile breakpoint.
+     * @default "lg"
+     */
+    hideFrom?: "md" | "lg";
+    /**
+     * The page surface the bar matches, so scrolling content disappears under
+     * it without a seam: `muted` (the canvas grey) or `card` (white).
+     * @default "muted"
+     */
+    surface?: MobileNavigationAppHeaderSurface;
+}) => React.JSX.Element;
+/** Flexible slot letting a search field fill the app bar's remaining width. */
+export declare const MobileNavigationHeaderSearchSlot: ({ className, ...props }: React.ComponentProps<"div">) => React.JSX.Element;
+/**
+ * Fixed-size pill icon button sized for the mobile app bar - 40px tall / 56px
+ * wide, so the bar stays visually light at phone widths without becoming a
+ * literal white island in dark mode. The tap target is the 40×56 pill itself: a hit-area pseudo-element
+ * can't extend it - the Button's `soft` variant is `overflow-hidden` (which
+ * clips its own pseudo-elements), and the bar's `gap-1` between pills is too
+ * tight for outward extension without overlapping neighbours.
+ *
+ * Pass short `children` (a count, say) beside the `icon` and the pill widens
+ * from its 56px minimum to fit them, keeping the same height.
+ *
+ * @param props.emphasis - Button emphasis. @default "soft"
+ * @bestPractice Keep children to a few characters, such as a cart count, and give the action an `aria-label` that says what the number means.
+ */
+export declare const MobileNavigationHeaderAction: ({ children, className, emphasis, ...props }: React.ComponentProps<typeof Button>) => React.JSX.Element;
+/** Header action showing the brand logo, typically used to open the navigation. */
+export declare const MobileNavigationBrandTrigger: ({ className, ...props }: Omit<React.ComponentProps<typeof Button>, "children" | "icon">) => React.JSX.Element;
+/** Brand logo plus stacked wordmark lockup for the drawer header. */
+export declare const MobileNavigationBrandLockup: ({ className, ...props }: React.ComponentProps<typeof Flex>) => React.JSX.Element;
+/**
+ * Drawer header pairing the brand lockup with a close button.
+ *
+ * @param props.onClose - Invoked when the close button is pressed.
+ */
+export declare const MobileNavigationHeader: ({ className, onClose, ...props }: Omit<React.ComponentProps<typeof Flex>, "children"> & {
+    onClose: () => void;
+}) => React.JSX.Element;

package/dist/compositions/mobile-navigation/mobile-navigation-header.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { Button } from "../../components/button.js";
+import { Flex } from "../../components/flex.js";
+import { Logo } from "../../components/logo.js";
+import { cn } from "../../utils/cn.js";
+// Stable module-scope icon component for the logo header action.
+const LogoIcon = () => _jsx(Logo, { className: "size-6" });
+const SURFACE_CLASSES = {
+    background: "bg-background",
+    card: "bg-card",
+    // An ancestor's `data-mobile-surface="card"` (e.g. on body for the PDP)
+    // still flips the default bar to card.
+    muted: "bg-muted [[data-mobile-surface=card]_&]:bg-card",
+};
+/**
+ * Fixed top app bar for the mobile shell; hidden from `hideFrom` up.
+ *
+ * @bestPractice Inside a `SidebarProvider` frame pass `hideFrom="md"`: the sidebar switches to its desktop rail at md, so the bar should hand over at the same width rather than overlap the rail between md and lg.
+ * @bestPractice Set `surface` to the colour of the page under the bar - `card` when the phone's whole screen is the content card (an inset sidebar frame), `background` on a flat (`variant="sidebar"`) frame's page, `muted` on the grey canvas - so content scrolls under it without a seam.
+ */
+export const MobileNavigationAppHeader = ({ className, hideFrom = "lg", surface = "muted", ...props }) => (_jsx(Flex, { align: "center", className: cn(
+    // pt clears the iOS status bar / notch (env inset resolves to 0 on
+    // devices without one, so desktop/tablet are unaffected - and this bar is
+    // hidden from `hideFrom` regardless).
+    SURFACE_CLASSES[surface], "pt-safe-2 fixed inset-x-0 top-0 z-50 px-4 pb-2", hideFrom === "md" ? "md:hidden" : "lg:hidden", className), "data-surface": surface, gap: "2xs", ...props }));
+/** Flexible slot letting a search field fill the app bar's remaining width. */
+export const MobileNavigationHeaderSearchSlot = ({ className, ...props }) => (_jsx("div", { className: cn("min-w-0 flex-1", className), ...props }));
+/**
+ * Fixed-size pill icon button sized for the mobile app bar - 40px tall / 56px
+ * wide, so the bar stays visually light at phone widths without becoming a
+ * literal white island in dark mode. The tap target is the 40×56 pill itself: a hit-area pseudo-element
+ * can't extend it - the Button's `soft` variant is `overflow-hidden` (which
+ * clips its own pseudo-elements), and the bar's `gap-1` between pills is too
+ * tight for outward extension without overlapping neighbours.
+ *
+ * Pass short `children` (a count, say) beside the `icon` and the pill widens
+ * from its 56px minimum to fit them, keeping the same height.
+ *
+ * @param props.emphasis - Button emphasis. @default "soft"
+ * @bestPractice Keep children to a few characters, such as a cart count, and give the action an `aria-label` that says what the number means.
+ */
+export const MobileNavigationHeaderAction = ({ children, className, emphasis = "soft", ...props }) => (_jsx(Button, { className: cn("dark:bg-surface-2 h-10 min-w-14 bg-white", className), emphasis: emphasis, radius: "full", size: children === undefined ? "icon-lg" : "lg", ...props, children: children }));
+/** Header action showing the brand logo, typically used to open the navigation. */
+export const MobileNavigationBrandTrigger = ({ className, ...props }) => (_jsx(MobileNavigationHeaderAction, { emphasis: "soft", icon: LogoIcon, ...props, className: className }));
+/** Brand logo plus stacked wordmark lockup for the drawer header. */
+export const MobileNavigationBrandLockup = ({ className, ...props }) => (_jsxs(Flex, { align: "center", className: cn("min-w-0 pl-4", className), gap: "xs", ...props, children: [_jsx(Logo, { className: "text-primary size-8 shrink-0" }), _jsxs(Flex, { as: "span", className: "text-caption min-w-0 font-semibold", direction: "column", justify: "center", children: [_jsx("span", { children: "Material" }), _jsx("span", { children: "Bank" })] })] }));
+/**
+ * Drawer header pairing the brand lockup with a close button.
+ *
+ * @param props.onClose - Invoked when the close button is pressed.
+ */
+export const MobileNavigationHeader = ({ className, onClose, ...props }) => (_jsxs(Flex, { align: "center", className: cn(
+    // Grows by the top safe-area inset and pads its content below the notch
+    // (env resolves to 0 without one, so nothing changes off-device).
+    "pt-safe-2 h-[calc(4rem+env(safe-area-inset-top,0px))] shrink-0 px-4 pb-2", className), justify: "space-between", ...props, children: [_jsx(MobileNavigationBrandLockup, {}), _jsx(MobileNavigationHeaderAction, { "aria-label": "Close menu", icon: X, onClick: onClose, tone: "neutral" })] }));

package/dist/compositions/mobile-navigation/mobile-navigation-item.d.ts

@@ -0,0 +1,51 @@
+import type React from "react";
+import { Button } from "../../components/button.js";
+import { Separator } from "../../components/separator.js";
+import { VStack } from "../../components/stack.js";
+import type { Tone } from "../../tokens/tone.js";
+import type { NavigationIcon } from "./mobile-navigation-root.js";
+/** Vertical list container for {@link MobileNavigationItem} rows. */
+export declare const MobileNavigationList: ({ className, ...props }: React.ComponentProps<typeof VStack>) => React.JSX.Element;
+/** Muted divider separating groups of navigation items. */
+export declare const MobileNavigationSeparator: (props: React.ComponentProps<typeof Separator>) => React.JSX.Element;
+export interface MobileNavigationItemProps extends Omit<React.ComponentProps<typeof Button>, "children" | "dot" | "icon" | "suffixIcon"> {
+    /** Mark the row as the current location (adds a filled background). */
+    active?: boolean;
+    /** Render the label in the destructive colour. */
+    destructive?: boolean;
+    /**
+     * Show a status dot in place of the leading icon. `true` uses the default
+     * affirmative tint; a {@link Tone} value tints it from the shared dot palette.
+     */
+    dot?: boolean | Tone;
+    /** Leading icon; omit to reserve leading space with no glyph. */
+    icon?: NavigationIcon;
+    /** Row text (required). */
+    label: React.ReactNode;
+    /** Trailing icon shown after the label. */
+    suffixIcon?: NavigationIcon;
+}
+/**
+ * A navigation row built on `Button`: a leading icon or status dot, a
+ * truncating label, and an optional trailing icon.
+ */
+export declare const MobileNavigationItem: ({ active, className, destructive, dot, icon, label, suffixIcon, ...props }: MobileNavigationItemProps) => React.JSX.Element;
+export interface MobileNavigationProjectItemProps {
+    /** Mark the project as current (dot indicator + filled background). */
+    active?: boolean;
+    /** Dim the label to indicate an archived project. */
+    archived?: boolean;
+    label: React.ReactNode;
+    /** Invoked when the trailing action button is pressed. */
+    onAction: () => void;
+    actionIcon: NavigationIcon;
+    /** Accessible label for the trailing action button. */
+    actionLabel: string;
+    /** The link element the row renders as, e.g. `<Link href="…" />`. */
+    render: React.ReactElement;
+}
+/**
+ * Navigation row for a project, pairing a link (passed as `render`) with a
+ * secondary trailing action button (e.g. project options).
+ */
+export declare const MobileNavigationProjectItem: ({ active, archived, label, onAction, actionIcon, actionLabel, render, }: MobileNavigationProjectItemProps) => React.JSX.Element;

package/dist/compositions/mobile-navigation/mobile-navigation-item.js

@@ -0,0 +1,41 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../../components/button.js";
+import { Dot } from "../../components/dot.js";
+import { Flex } from "../../components/flex.js";
+import { Icon } from "../../components/icon.js";
+import { Separator } from "../../components/separator.js";
+import { VStack } from "../../components/stack.js";
+import { cn } from "../../utils/cn.js";
+/** Vertical list container for {@link MobileNavigationItem} rows. */
+export const MobileNavigationList = ({ className, ...props }) => (_jsx(VStack, { className: cn("shrink-0", className), gap: "2xs", ...props }));
+/** Muted divider separating groups of navigation items. */
+export const MobileNavigationSeparator = (props) => _jsx(Separator, { className: "my-1", variant: "muted", ...props });
+/**
+ * A navigation row built on `Button`: a leading icon or status dot, a
+ * truncating label, and an optional trailing icon.
+ */
+export const MobileNavigationItem = ({ active, className, destructive, dot, icon, label, suffixIcon, ...props }) => {
+    let leadingIndicator;
+    if (dot !== false && dot !== undefined) {
+        // `dot === true` keeps the affirmative-green default; a Tone value tints
+        // the dot from the shared dot palette.
+        leadingIndicator = _jsx(Dot, { tone: dot === true ? "success" : dot });
+    }
+    else if (icon === undefined) {
+        leadingIndicator = _jsx("span", { className: "size-5 shrink-0" });
+    }
+    else {
+        leadingIndicator = _jsx(Icon, { className: "shrink-0", icon: icon, size: "lg" });
+    }
+    const content = (_jsxs(_Fragment, { children: [leadingIndicator, _jsx("span", { className: "text-paragraph min-w-0 flex-1 truncate text-left", children: label }), suffixIcon ? (_jsx(Icon, { className: "shrink-0", icon: suffixIcon, size: "base" })) : null] }));
+    return (_jsx(Button, { align: "start", "aria-current": active === true ? "page" : undefined, className: cn("text-paragraph h-11 w-full gap-3 px-4 font-normal hover:bg-transparent data-[hovered=true]:bg-transparent", active === true && "bg-white", destructive === true && "text-destructive", className), radius: "full", size: "xl", tone: "neutral", emphasis: "ghost", ...props, children: content }));
+};
+/**
+ * Navigation row for a project, pairing a link (passed as `render`) with a
+ * secondary trailing action button (e.g. project options).
+ */
+export const MobileNavigationProjectItem = ({ active, archived, label, onAction, actionIcon, actionLabel, render, }) => {
+    const content = (_jsxs(_Fragment, { children: [active === true ? (_jsx(Dot, { tone: "success" })) : (_jsx("span", { className: "size-5 shrink-0" })), _jsx("span", { className: "text-paragraph min-w-0 flex-1 truncate text-left", children: label })] }));
+    return (_jsxs(Flex, { align: "center", className: "group h-11", children: [_jsx(Button, { align: "start", "aria-current": active === true ? "page" : undefined, className: cn("text-paragraph h-11 min-w-0 flex-1 gap-3 px-4 font-normal hover:bg-transparent data-[hovered=true]:bg-transparent", active === true && "bg-white", archived === true && "text-muted-foreground"), radius: "full", size: "xl", tone: "neutral", emphasis: "ghost", render: render, children: content }), _jsx(Button, { "aria-label": actionLabel, className: "opacity-100 hover:bg-transparent data-[hovered=true]:bg-transparent", icon: actionIcon, onClick: onAction, radius: "full", size: "icon-xl", square: true, tone: "neutral", emphasis: "ghost" })] }));
+};

package/dist/compositions/mobile-navigation/mobile-navigation-profile.d.ts

@@ -0,0 +1,33 @@
+import type React from "react";
+import { Button } from "../../components/button.js";
+export interface MobileNavigationProfileActionProps extends Omit<React.ComponentProps<typeof Button>, "children"> {
+    /** Name used to derive the avatar initials fallback. */
+    avatarName: string | undefined;
+    /** User's display name shown as the button label. */
+    displayName: string;
+    /** Show a loading label and disable the button. */
+    loading?: boolean;
+    /** Avatar image URL; falls back to initials when absent. */
+    userAvatarUrl: string | null | undefined;
+}
+/**
+ * Bottom-pinned account button showing an avatar, display name, and a chevron;
+ * disabled while loading.
+ */
+export declare const MobileNavigationProfileAction: ({ avatarName, className, displayName, loading, userAvatarUrl, ...props }: MobileNavigationProfileActionProps) => React.JSX.Element;
+export interface MobileNavigationDrawerProfileProps {
+    displayName: string;
+    /** Secondary line under the name; hidden when absent. */
+    email: string | undefined;
+    /** Name used to derive the avatar initials fallback. */
+    userAvatarName: string | undefined;
+    /** Avatar image URL; falls back to initials when absent. */
+    userAvatarUrl: string | null | undefined;
+}
+/**
+ * Profile summary (avatar, name, optional email) shown at the top of the
+ * account drawer.
+ */
+export declare const MobileNavigationDrawerProfile: ({ displayName, email, userAvatarName, userAvatarUrl, }: MobileNavigationDrawerProfileProps) => React.JSX.Element;
+/** Full-width {@link Button} for primary drawer actions. */
+export declare const MobileNavigationFullWidthAction: ({ className, ...props }: React.ComponentProps<typeof Button>) => React.JSX.Element;

package/dist/compositions/mobile-navigation/mobile-navigation-profile.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronsUpDown } from "lucide-react";
+import { AvatarFallback } from "../../components/avatar/avatar-fallback.js";
+import { AvatarImage } from "../../components/avatar/avatar-image.js";
+import { AvatarRoot as Avatar } from "../../components/avatar/avatar-root.js";
+import { Button } from "../../components/button.js";
+import { Flex } from "../../components/flex.js";
+import { Icon } from "../../components/icon.js";
+import { VStack } from "../../components/stack.js";
+import { Text } from "../../components/text.js";
+import { cn } from "../../utils/cn.js";
+/**
+ * Bottom-pinned account button showing an avatar, display name, and a chevron;
+ * disabled while loading.
+ */
+export const MobileNavigationProfileAction = ({ avatarName, className, displayName, loading, userAvatarUrl, ...props }) => (_jsxs(Button, { align: "start", className: cn("text-paragraph mt-auto h-12 w-full gap-3 border-gray-200 bg-white px-1 pr-4 font-normal", className), disabled: loading, radius: "full", size: "2xl", tone: "neutral", emphasis: "soft", ...props, children: [_jsxs(Avatar, { className: "shrink-0", size: "base", children: [userAvatarUrl !== undefined &&
+                    userAvatarUrl !== null &&
+                    userAvatarUrl !== "" ? (_jsx(AvatarImage, { alt: displayName, src: userAvatarUrl })) : null, _jsx(AvatarFallback, { ...(avatarName === undefined ? {} : { name: avatarName }) })] }), _jsx(Text, { className: "min-w-0 flex-1 truncate", size: "paragraph", children: loading === true ? "Loading…" : displayName }), _jsx(Icon, { icon: ChevronsUpDown, size: "base" })] }));
+/**
+ * Profile summary (avatar, name, optional email) shown at the top of the
+ * account drawer.
+ */
+export const MobileNavigationDrawerProfile = ({ displayName, email, userAvatarName, userAvatarUrl, }) => (_jsxs(Flex, { align: "center", className: "h-15 px-4", gap: "sm", children: [_jsxs(Avatar, { className: "shrink-0", size: "base", children: [userAvatarUrl !== undefined &&
+                    userAvatarUrl !== null &&
+                    userAvatarUrl !== "" ? (_jsx(AvatarImage, { alt: displayName, src: userAvatarUrl })) : null, _jsx(AvatarFallback, { ...(userAvatarName === undefined ? {} : { name: userAvatarName }) })] }), _jsxs(VStack, { className: "min-w-0", gap: "2xs", children: [_jsx(Text, { className: "truncate", size: "paragraph-sm", weight: "medium", children: displayName }), email !== undefined && email !== null && email !== "" ? (_jsx(Text, { className: "truncate", size: "caption", variant: "muted", children: email })) : null] })] }));
+/** Full-width {@link Button} for primary drawer actions. */
+export const MobileNavigationFullWidthAction = ({ className, ...props }) => (_jsx(Button, { className: cn("w-full", className), ...props }));

package/dist/compositions/mobile-navigation/mobile-navigation-root.d.ts

@@ -0,0 +1,36 @@
+import type { HTMLMotionProps } from "motion/react";
+import type React from "react";
+import { VStack } from "../../components/stack.js";
+import type { IconComponent } from "../../tokens/icon-component.js";
+/** Icon accepted by mobile-navigation items - the canonical {@link IconComponent}. */
+export type NavigationIcon = IconComponent;
+/**
+ * Full-screen fixed overlay that hosts the mobile navigation; hidden from `lg` up.
+ *
+ * Carries modal-dialog semantics: focus is trapped inside the overlay while it is
+ * mounted, cycles with Tab, and returns to the trigger once it unmounts. Pressing
+ * Escape invokes `onClose`. The accessible name defaults to "Navigation menu" and
+ * can be overridden via `aria-label`.
+ *
+ * Renders an `m.div`, so consumers can drive enter/exit motion (e.g. a slide) by
+ * passing `initial`/`animate`/`exit`/`transition` and wrapping in `AnimatePresence`.
+ * With no motion props it renders statically. Horizontal overflow is clipped
+ * (`overflow-x-clip`) so a nested drill-in view sliding off-screen never spawns a
+ * horizontal scrollbar; vertical content still scrolls.
+ *
+ * @param props.onClose - Invoked when the overlay requests dismissal (Escape key).
+ *
+ * @bestPractice Wire `onClose` to your open-state setter - the overlay traps focus and fires it on Escape, but you own mounting/unmounting.
+ * @bestPractice It's `role="dialog"`+`aria-modal` and hidden from `lg` up, so pair it with a desktop nav rather than showing both at once.
+ * @bestPractice Override the default "Navigation menu" accessible name via `aria-label` when the drawer's purpose is more specific.
+ * @category navigation
+ */
+export declare const MobileNavigationRoot: ({ "aria-label": ariaLabel, children, className, onClose, ...props }: Omit<HTMLMotionProps<"div">, "children"> & {
+    children?: React.ReactNode;
+    onClose?: () => void;
+}) => React.JSX.Element;
+/**
+ * Full-height vertical column that lays out the drawer's contents inside
+ * {@link MobileNavigationRoot}.
+ */
+export declare const MobileNavigationFrame: ({ className, ...props }: React.ComponentProps<typeof VStack>) => React.JSX.Element;

package/dist/compositions/mobile-navigation/mobile-navigation-root.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import * as m from "motion/react-m";
+import { VStack } from "../../components/stack.js";
+import { cn } from "../../utils/cn.js";
+/**
+ * Full-screen fixed overlay that hosts the mobile navigation; hidden from `lg` up.
+ *
+ * Carries modal-dialog semantics: focus is trapped inside the overlay while it is
+ * mounted, cycles with Tab, and returns to the trigger once it unmounts. Pressing
+ * Escape invokes `onClose`. The accessible name defaults to "Navigation menu" and
+ * can be overridden via `aria-label`.
+ *
+ * Renders an `m.div`, so consumers can drive enter/exit motion (e.g. a slide) by
+ * passing `initial`/`animate`/`exit`/`transition` and wrapping in `AnimatePresence`.
+ * With no motion props it renders statically. Horizontal overflow is clipped
+ * (`overflow-x-clip`) so a nested drill-in view sliding off-screen never spawns a
+ * horizontal scrollbar; vertical content still scrolls.
+ *
+ * @param props.onClose - Invoked when the overlay requests dismissal (Escape key).
+ *
+ * @bestPractice Wire `onClose` to your open-state setter - the overlay traps focus and fires it on Escape, but you own mounting/unmounting.
+ * @bestPractice It's `role="dialog"`+`aria-modal` and hidden from `lg` up, so pair it with a desktop nav rather than showing both at once.
+ * @bestPractice Override the default "Navigation menu" accessible name via `aria-label` when the drawer's purpose is more specific.
+ * @category navigation
+ */
+export const MobileNavigationRoot = ({ "aria-label": ariaLabel = "Navigation menu", children, className, onClose, ...props }) => (_jsx(DialogPrimitive.Root, { disablePointerDismissal: true, modal: "trap-focus", onOpenChange: (open) => {
+        if (!open) {
+            onClose?.();
+        }
+    }, open: true, children: _jsx(DialogPrimitive.Portal, { children: _jsx(DialogPrimitive.Popup, { render: _jsx(m.div, { "aria-label": ariaLabel, "aria-modal": "true", className: cn("text-foreground fixed inset-0 z-70 overflow-x-clip overflow-y-auto bg-gray-100 will-change-transform lg:hidden", className), ...props }), children: children }) }) }));
+/**
+ * Full-height vertical column that lays out the drawer's contents inside
+ * {@link MobileNavigationRoot}.
+ */
+export const MobileNavigationFrame = ({ className, ...props }) => (_jsx(VStack, { className: cn("min-h-svh", className), gap: "none", ...props }));

package/dist/compositions/mobile-navigation.d.ts

@@ -0,0 +1,8 @@
+export { mobileNavigationAnatomy } from "./mobile-navigation/mobile-navigation-anatomy.js";
+export { MobileNavigationCenteredPanel, MobileNavigationCenteredText, MobileNavigationContent, MobileNavigationDrawerContent, MobileNavigationDrawerSection, MobileNavigationDrawerStack, MobileNavigationSlottedText, } from "./mobile-navigation/mobile-navigation-drawer.js";
+export { MobileNavigationAppHeader, MobileNavigationBrandLockup, MobileNavigationBrandTrigger, MobileNavigationHeader, MobileNavigationHeaderAction, MobileNavigationHeaderSearchSlot, type MobileNavigationAppHeaderSurface, } from "./mobile-navigation/mobile-navigation-header.js";
+export type { MobileNavigationItemProps, MobileNavigationProjectItemProps, } from "./mobile-navigation/mobile-navigation-item.js";
+export { MobileNavigationItem, MobileNavigationList, MobileNavigationProjectItem, MobileNavigationSeparator, } from "./mobile-navigation/mobile-navigation-item.js";
+export type { MobileNavigationDrawerProfileProps, MobileNavigationProfileActionProps, } from "./mobile-navigation/mobile-navigation-profile.js";
+export { MobileNavigationDrawerProfile, MobileNavigationFullWidthAction, MobileNavigationProfileAction, } from "./mobile-navigation/mobile-navigation-profile.js";
+export { MobileNavigationFrame, MobileNavigationRoot, } from "./mobile-navigation/mobile-navigation-root.js";

package/dist/compositions/mobile-navigation.js

@@ -0,0 +1,6 @@
+export { mobileNavigationAnatomy } from "./mobile-navigation/mobile-navigation-anatomy.js";
+export { MobileNavigationCenteredPanel, MobileNavigationCenteredText, MobileNavigationContent, MobileNavigationDrawerContent, MobileNavigationDrawerSection, MobileNavigationDrawerStack, MobileNavigationSlottedText, } from "./mobile-navigation/mobile-navigation-drawer.js";
+export { MobileNavigationAppHeader, MobileNavigationBrandLockup, MobileNavigationBrandTrigger, MobileNavigationHeader, MobileNavigationHeaderAction, MobileNavigationHeaderSearchSlot, } from "./mobile-navigation/mobile-navigation-header.js";
+export { MobileNavigationItem, MobileNavigationList, MobileNavigationProjectItem, MobileNavigationSeparator, } from "./mobile-navigation/mobile-navigation-item.js";
+export { MobileNavigationDrawerProfile, MobileNavigationFullWidthAction, MobileNavigationProfileAction, } from "./mobile-navigation/mobile-navigation-profile.js";
+export { MobileNavigationFrame, MobileNavigationRoot, } from "./mobile-navigation/mobile-navigation-root.js";

package/dist/compositions/page-header/page-header-actions.d.ts

@@ -0,0 +1,16 @@
+import type React from "react";
+type PageHeaderActionsProps = React.ComponentProps<"div">;
+/**
+ * Actions slot for `PageHeader`. Renders on the right side.
+ * Use for view toggles, filter buttons, select controls, etc.
+ *
+ * @example
+ * ```tsx
+ * <PageHeaderActions>
+ *   <ViewToggle value={view} onChange={setView} />
+ *   <Button icon={Filter}>Filter</Button>
+ * </PageHeaderActions>
+ * ```
+ */
+export declare const PageHeaderActions: ({ children, className, ...props }: PageHeaderActionsProps) => React.JSX.Element;
+export {};

package/dist/compositions/page-header/page-header-actions.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Flex } from "../../components/flex.js";
+/**
+ * Actions slot for `PageHeader`. Renders on the right side.
+ * Use for view toggles, filter buttons, select controls, etc.
+ *
+ * @example
+ * ```tsx
+ * <PageHeaderActions>
+ *   <ViewToggle value={view} onChange={setView} />
+ *   <Button icon={Filter}>Filter</Button>
+ * </PageHeaderActions>
+ * ```
+ */
+export const PageHeaderActions = ({ children, className, ...props }) => (_jsx(Flex, { align: "center", className: cn("ml-auto shrink-0", 
+    // Edge compensation: when the last action is a ghost/link button (its
+    // horizontal padding is transparent), pull the row right so the label
+    // sits flush with the header's edge instead of doubling the gap. The
+    // container owns the adjustment; the button just declares `data-edge-comp`.
+    // NOTE: -mr-2 is a conservative default - worth a visual pass per size.
+    "has-[>[data-edge-comp]:last-child]:-mr-2", className), "data-component": "page-header-actions", "data-slot": "page-header-actions", gap: "xs", ...props, children: children }));

package/dist/compositions/page-header/page-header-context.d.ts

@@ -0,0 +1,10 @@
+interface PageHeaderContextValue {
+    /** Whether the header sticks to the top of the viewport on scroll. */
+    sticky: boolean;
+}
+export declare const PageHeaderProvider: ({ children, sticky, }: {
+    children: React.ReactNode;
+    sticky?: boolean;
+}) => import("react").JSX.Element;
+export declare const usePageHeader: () => PageHeaderContextValue;
+export {};

package/dist/compositions/page-header/page-header-context.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, use, useMemo } from "react";
+const PageHeaderContext = createContext(null);
+export const PageHeaderProvider = ({ children, sticky = false, }) => {
+    const value = useMemo(() => ({ sticky }), [sticky]);
+    return (_jsx(PageHeaderContext.Provider, { value: value, children: children }));
+};
+export const usePageHeader = () => {
+    const context = use(PageHeaderContext);
+    if (!context) {
+        throw new Error("usePageHeader must be used within a PageHeader");
+    }
+    return context;
+};

package/dist/compositions/page-header/page-header-lead.d.ts

@@ -0,0 +1,23 @@
+import type React from "react";
+type PageHeaderLeadProps = React.ComponentProps<"div">;
+/**
+ * Primary content slot for a `PageHeader`. Stacks location context such as a
+ * breadcrumb above the page title while keeping the whole group aligned with
+ * the header actions.
+ *
+ * @example
+ * ```tsx
+ * <PageHeader>
+ *   <PageHeaderLead>
+ *     <Breadcrumb>…</Breadcrumb>
+ *     <PageHeaderTitle subtitle="Fall 2025">Melt Chandelier</PageHeaderTitle>
+ *   </PageHeaderLead>
+ *   <PageHeaderActions>…</PageHeaderActions>
+ * </PageHeader>
+ * ```
+ *
+ * @bestPractice Keep the current page out of a breadcrumb when the adjacent
+ * `PageHeaderTitle` already names it.
+ */
+export declare const PageHeaderLead: ({ children, className, ...props }: PageHeaderLeadProps) => React.JSX.Element;
+export {};

package/dist/compositions/page-header/page-header-lead.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@instruments/materia-ui/utils/cn";
+import { Flex } from "../../components/flex.js";
+/**
+ * Primary content slot for a `PageHeader`. Stacks location context such as a
+ * breadcrumb above the page title while keeping the whole group aligned with
+ * the header actions.
+ *
+ * @example
+ * ```tsx
+ * <PageHeader>
+ *   <PageHeaderLead>
+ *     <Breadcrumb>…</Breadcrumb>
+ *     <PageHeaderTitle subtitle="Fall 2025">Melt Chandelier</PageHeaderTitle>
+ *   </PageHeaderLead>
+ *   <PageHeaderActions>…</PageHeaderActions>
+ * </PageHeader>
+ * ```
+ *
+ * @bestPractice Keep the current page out of a breadcrumb when the adjacent
+ * `PageHeaderTitle` already names it.
+ */
+export const PageHeaderLead = ({ children, className, ...props }) => (_jsx(Flex, { className: cn(
+    // Below `sm` the lead keeps its automatic minimum width, its longest
+    // word, so the header's row wraps the actions underneath rather than
+    // squeezing the title until it breaks mid-word.
+    "flex-1 sm:min-w-0", className), "data-component": "page-header-lead", "data-slot": "page-header-lead", direction: "column", gap: "2xs", justify: "center", ...props, children: children }));