@vireocodedev/ui 0.2.0 → 0.2.1

package/dist/capabilities/application-navigation/components/navigation/VireoApplicationNavigation/VireoApplicationNavigation.classes.d.ts

@@ -0,0 +1,9 @@
+import { type VireoApplicationNavigationSlotName } from "./VireoApplicationNavigation.identity.js";
+/** Utility classes available to VireoApplicationNavigation. */
+export type VireoApplicationNavigationClasses = Record<VireoApplicationNavigationSlotName, string>;
+/** Valid keys for VireoApplicationNavigation utility classes and theme style overrides. */
+export type VireoApplicationNavigationClassKey = keyof VireoApplicationNavigationClasses;
+/** Returns the generated utility class name for a VireoApplicationNavigation slot or state. */
+export declare function getVireoApplicationNavigationUtilityClass(slot: string): string;
+/** Generated utility class names keyed by each public VireoApplicationNavigation class key. */
+export declare const vireoApplicationNavigationClasses: VireoApplicationNavigationClasses;

package/dist/capabilities/application-navigation/components/navigation/VireoApplicationNavigation/VireoApplicationNavigation.classes.js

@@ -0,0 +1,8 @@
+import { generateUtilityClass, generateUtilityClasses } from "@mui/material";
+import { VIREO_APPLICATION_NAVIGATION_NAME, VIREO_APPLICATION_NAVIGATION_SLOTS, } from "./VireoApplicationNavigation.identity.js";
+/** Returns the generated utility class name for a VireoApplicationNavigation slot or state. */
+export function getVireoApplicationNavigationUtilityClass(slot) {
+    return generateUtilityClass(VIREO_APPLICATION_NAVIGATION_NAME, slot);
+}
+/** Generated utility class names keyed by each public VireoApplicationNavigation class key. */
+export const vireoApplicationNavigationClasses = generateUtilityClasses(VIREO_APPLICATION_NAVIGATION_NAME, [...VIREO_APPLICATION_NAVIGATION_SLOTS]);

package/dist/capabilities/application-navigation/components/navigation/VireoApplicationNavigation/VireoApplicationNavigation.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { type VireoApplicationNavigationProps } from "./VireoApplicationNavigation.types.js";
+/**
+ * Provides a responsive, resizable application-navigation surface with persistent expanded and compact modes.
+ */
+export declare const VireoApplicationNavigation: React.ForwardRefExoticComponent<Omit<VireoApplicationNavigationProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/capabilities/application-navigation/components/navigation/VireoApplicationNavigation/VireoApplicationNavigation.identity.d.ts

@@ -0,0 +1,6 @@
+/** Stable component name shared by every VireoApplicationNavigation integration point. */
+export declare const VIREO_APPLICATION_NAVIGATION_NAME = "VireoApplicationNavigation";
+/** Canonical public slots exposed by VireoApplicationNavigation, in rendered DOM order. */
+export declare const VIREO_APPLICATION_NAVIGATION_SLOTS: readonly ["root", "surface", "content", "resizeHandle"];
+/** Public slot names exposed by VireoApplicationNavigation. */
+export type VireoApplicationNavigationSlotName = (typeof VIREO_APPLICATION_NAVIGATION_SLOTS)[number];

package/dist/capabilities/application-navigation/components/navigation/VireoApplicationNavigation/VireoApplicationNavigation.identity.js

@@ -0,0 +1,9 @@
+/** Stable component name shared by every VireoApplicationNavigation integration point. */
+export const VIREO_APPLICATION_NAVIGATION_NAME = "VireoApplicationNavigation";
+/** Canonical public slots exposed by VireoApplicationNavigation, in rendered DOM order. */
+export const VIREO_APPLICATION_NAVIGATION_SLOTS = [
+    "root",
+    "surface",
+    "content",
+    "resizeHandle",
+];

package/dist/capabilities/application-navigation/components/navigation/VireoApplicationNavigation/VireoApplicationNavigation.js

@@ -0,0 +1,188 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../../core/public.js";
+import { VireoApplicationNavigationContext } from "../../../../../capabilities/application-navigation/contexts/VireoApplicationNavigationContext/VireoApplicationNavigationContext.js";
+import { SIDE_PANEL_RESIZE_KEYBOARD_STEP, VireoSidePanelResizeHandle } from "../../../../../capabilities/overlays/public.js";
+import { unstable_composeClasses as composeClasses } from "@mui/material";
+import { useThemeProps } from "@mui/material/styles";
+import { useForkRef } from "@mui/material/utils";
+import React from "react";
+import { getVireoApplicationNavigationUtilityClass, } from "./VireoApplicationNavigation.classes.js";
+import { VIREO_APPLICATION_NAVIGATION_NAME, } from "./VireoApplicationNavigation.identity.js";
+import { VireoApplicationNavigationContent, VireoApplicationNavigationRoot, VireoApplicationNavigationSurface, } from "./VireoApplicationNavigation.styled.js";
+import { VIREO_APPLICATION_NAVIGATION_DEFAULT_COMPACT_WIDTH, VIREO_APPLICATION_NAVIGATION_DEFAULT_EXPANDED_WIDTH, VIREO_APPLICATION_NAVIGATION_MAX_EXPANDED_WIDTH, VIREO_APPLICATION_NAVIGATION_MIN_EXPANDED_WIDTH, VIREO_APPLICATION_NAVIGATION_WIDTH_CSS_VAR, } from "./VireoApplicationNavigation.types.js";
+function useUtilityClasses(ownerState, classes) {
+    return composeClasses({
+        root: ["root"],
+        surface: ["surface"],
+        content: ["content"],
+        resizeHandle: ["resizeHandle"],
+    }, getVireoApplicationNavigationUtilityClass, classes);
+}
+/**
+ * Provides a responsive, resizable application-navigation surface with persistent expanded and compact modes.
+ */
+export const VireoApplicationNavigation = React.forwardRef(function VireoApplicationNavigation(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_APPLICATION_NAVIGATION_NAME });
+    const { children, className, classes: classesProp, collapseThreshold, compactWidth = VIREO_APPLICATION_NAVIGATION_DEFAULT_COMPACT_WIDTH, defaultExpandedWidth = VIREO_APPLICATION_NAVIGATION_DEFAULT_EXPANDED_WIDTH, expandedWidth = VIREO_APPLICATION_NAVIGATION_DEFAULT_EXPANDED_WIDTH, locked = false, maxExpandedWidth = VIREO_APPLICATION_NAVIGATION_MAX_EXPANDED_WIDTH, minExpandedWidth = VIREO_APPLICATION_NAVIGATION_MIN_EXPANDED_WIDTH, mode = "expanded", onClose, onExpandedWidthChange, onModeChange, open = false, resizable = true, slotProps = {}, slots = {}, style, sx, variant = "permanent", ...other } = props;
+    const clampExpandedWidth = React.useCallback((value) => Math.min(maxExpandedWidth, Math.max(minExpandedWidth, value)), [maxExpandedWidth, minExpandedWidth]);
+    const resolvedCollapseThreshold = collapseThreshold ?? minExpandedWidth;
+    const resolvedMode = variant === "temporary" ? "expanded" : mode;
+    const effectiveResizable = variant === "permanent" && resizable && !locked;
+    const controlledExpandedWidth = clampExpandedWidth(expandedWidth);
+    const controlledWidth = resolvedMode === "compact" ? compactWidth : controlledExpandedWidth;
+    const [preview, setPreview] = React.useState(null);
+    const cleanupResizeRef = React.useRef(null);
+    const isResizing = preview !== null;
+    const activeMode = preview?.mode ?? resolvedMode;
+    const width = preview?.width ?? controlledWidth;
+    React.useEffect(() => () => cleanupResizeRef.current?.(), []);
+    const ownerState = {
+        mode: activeMode,
+        variant,
+        width,
+        isResizing,
+        resizable: effectiveResizable,
+        locked,
+    };
+    const classes = useUtilityClasses(ownerState, classesProp);
+    const resolvedRootSlotProps = resolveSlotProps(slotProps.root, ownerState);
+    const resolvedSurfaceSlotProps = resolveSlotProps(slotProps.surface, ownerState);
+    const resolvedContentSlotProps = resolveSlotProps(slotProps.content, ownerState);
+    const resolvedResizeHandleSlotProps = resolveSlotProps(slotProps.resizeHandle, ownerState);
+    const { className: rootSlotClassName, ref: rootSlotRef, style: rootSlotStyle, sx: rootSlotSx, ...rootSlotOther } = resolvedRootSlotProps;
+    const rootRef = useForkRef(forwardedRef, rootSlotRef);
+    const { className: surfaceSlotClassName, sx: surfaceSlotSx, ...surfaceSlotOther } = resolvedSurfaceSlotProps;
+    const { className: contentSlotClassName, sx: contentSlotSx, ...contentSlotOther } = resolvedContentSlotProps;
+    const { className: resizeHandleSlotClassName, sx: resizeHandleSlotSx, ...resizeHandleSlotOther } = resolvedResizeHandleSlotProps;
+    const toggleMode = React.useCallback(() => {
+        if (variant !== "permanent" || locked)
+            return;
+        onModeChange?.(resolvedMode === "compact" ? "expanded" : "compact");
+    }, [locked, onModeChange, resolvedMode, variant]);
+    const handleResizeStart = React.useCallback(event => {
+        if (!effectiveResizable)
+            return;
+        event.preventDefault();
+        cleanupResizeRef.current?.();
+        const startX = event.clientX;
+        const startWidth = width;
+        let nextMode = activeMode;
+        let nextWidth = width;
+        const previousCursor = document.body.style.cursor;
+        const previousUserSelect = document.body.style.userSelect;
+        document.body.style.cursor = "col-resize";
+        document.body.style.userSelect = "none";
+        setPreview({ mode: activeMode, width });
+        const handlePointerMove = (moveEvent) => {
+            const candidate = startWidth + moveEvent.clientX - startX;
+            if (candidate < resolvedCollapseThreshold) {
+                nextMode = "compact";
+                nextWidth = compactWidth;
+            }
+            else {
+                nextMode = "expanded";
+                nextWidth = clampExpandedWidth(candidate);
+            }
+            setPreview({ mode: nextMode, width: nextWidth });
+        };
+        const cleanup = () => {
+            window.removeEventListener("pointermove", handlePointerMove);
+            window.removeEventListener("pointerup", handlePointerUp);
+            window.removeEventListener("pointercancel", handlePointerUp);
+            document.body.style.cursor = previousCursor;
+            document.body.style.userSelect = previousUserSelect;
+            cleanupResizeRef.current = null;
+            setPreview(null);
+        };
+        const handlePointerUp = () => {
+            cleanup();
+            if (nextMode !== resolvedMode)
+                onModeChange?.(nextMode);
+            if (nextMode === "expanded" && nextWidth !== controlledExpandedWidth) {
+                onExpandedWidthChange?.(nextWidth);
+            }
+        };
+        cleanupResizeRef.current = cleanup;
+        window.addEventListener("pointermove", handlePointerMove);
+        window.addEventListener("pointerup", handlePointerUp);
+        window.addEventListener("pointercancel", handlePointerUp);
+    }, [
+        activeMode,
+        clampExpandedWidth,
+        compactWidth,
+        controlledExpandedWidth,
+        effectiveResizable,
+        onExpandedWidthChange,
+        onModeChange,
+        resolvedCollapseThreshold,
+        resolvedMode,
+        width,
+    ]);
+    const handleResizeDoubleClick = React.useCallback(event => {
+        if (!effectiveResizable)
+            return;
+        event.preventDefault();
+        if (resolvedMode !== "expanded")
+            onModeChange?.("expanded");
+        onExpandedWidthChange?.(clampExpandedWidth(defaultExpandedWidth));
+    }, [clampExpandedWidth, defaultExpandedWidth, effectiveResizable, onExpandedWidthChange, onModeChange, resolvedMode]);
+    const handleResizeKeyDown = React.useCallback(event => {
+        if (!effectiveResizable)
+            return;
+        const step = event.shiftKey ? SIDE_PANEL_RESIZE_KEYBOARD_STEP * 2 : SIDE_PANEL_RESIZE_KEYBOARD_STEP;
+        let nextMode = resolvedMode;
+        let nextWidth = controlledWidth;
+        if (event.key === "Home") {
+            nextMode = "compact";
+            nextWidth = compactWidth;
+        }
+        else if (event.key === "End") {
+            nextMode = "expanded";
+            nextWidth = maxExpandedWidth;
+        }
+        else if (event.key === "ArrowRight") {
+            nextMode = "expanded";
+            nextWidth = resolvedMode === "compact" ? minExpandedWidth : clampExpandedWidth(controlledWidth + step);
+        }
+        else if (event.key === "ArrowLeft") {
+            const candidate = controlledWidth - step;
+            nextMode = resolvedMode === "compact" || candidate < resolvedCollapseThreshold ? "compact" : "expanded";
+            nextWidth = nextMode === "compact" ? compactWidth : clampExpandedWidth(candidate);
+        }
+        else {
+            return;
+        }
+        event.preventDefault();
+        if (nextMode !== resolvedMode)
+            onModeChange?.(nextMode);
+        if (nextMode === "expanded" && nextWidth !== controlledExpandedWidth)
+            onExpandedWidthChange?.(nextWidth);
+    }, [
+        clampExpandedWidth,
+        compactWidth,
+        controlledExpandedWidth,
+        controlledWidth,
+        effectiveResizable,
+        maxExpandedWidth,
+        minExpandedWidth,
+        onExpandedWidthChange,
+        onModeChange,
+        resolvedCollapseThreshold,
+        resolvedMode,
+    ]);
+    const SurfaceSlot = slots.surface ?? VireoApplicationNavigationSurface;
+    const ContentSlot = slots.content ?? VireoApplicationNavigationContent;
+    const ResizeHandleSlot = slots.resizeHandle ?? VireoSidePanelResizeHandle;
+    const renderState = { mode: activeMode, width, isResizing, toggleMode };
+    const renderedChildren = typeof children === "function" ? children(renderState) : children;
+    return (_jsx(VireoApplicationNavigationRoot, { ...other, ...rootSlotOther, as: slots.root ?? "div", ref: rootRef, ownerState: ownerState, className: joinClassNames(classes.root, className, rootSlotClassName), style: {
+            [VIREO_APPLICATION_NAVIGATION_WIDTH_CSS_VAR]: `${width}px`,
+            ...style,
+            ...rootSlotStyle,
+        }, sx: mergeSx(sx, rootSlotSx), children: _jsx(SurfaceSlot, { ...surfaceSlotOther, ownerState: ownerState, className: joinClassNames(classes.surface, surfaceSlotClassName), sx: surfaceSlotSx, variant: variant, open: variant === "permanent" || open, onClose: onClose, children: _jsx(VireoApplicationNavigationContext.Provider, { value: { mode: activeMode }, children: _jsxs(ContentSlot, { ...contentSlotOther, ownerState: ownerState, className: joinClassNames(classes.content, contentSlotClassName), sx: contentSlotSx, children: [renderedChildren, variant === "permanent" && (_jsx(ResizeHandleSlot, { ...resizeHandleSlotOther, enabled: effectiveResizable, isResizing: isResizing, onResizeStart: handleResizeStart, onResizeKeyDown: handleResizeKeyDown, onResizeDoubleClick: handleResizeDoubleClick, valueMin: compactWidth, valueMax: maxExpandedWidth, valueNow: width, className: joinClassNames(classes.resizeHandle, resizeHandleSlotClassName), sx: mergeSx({
+                                left: "auto",
+                                right: 0,
+                                "&::after": { left: "auto", right: 0 },
+                            }, resizeHandleSlotSx) }))] }) }) }) }));
+});
+VireoApplicationNavigation.displayName = VIREO_APPLICATION_NAVIGATION_NAME;

package/dist/capabilities/application-navigation/components/navigation/VireoApplicationNavigation/VireoApplicationNavigation.styled.d.ts

@@ -0,0 +1,8 @@
+import { type StyledSlotComponent } from "../../../../../core/public.js";
+import { type BoxProps, type DrawerProps } from "@mui/material";
+import { type VireoApplicationNavigationOwnerState } from "./VireoApplicationNavigation.types.js";
+type VireoApplicationNavigationStyledSlotComponent<TProps extends object> = StyledSlotComponent<TProps, VireoApplicationNavigationOwnerState>;
+export declare const VireoApplicationNavigationRoot: VireoApplicationNavigationStyledSlotComponent<BoxProps>;
+export declare const VireoApplicationNavigationSurface: VireoApplicationNavigationStyledSlotComponent<DrawerProps>;
+export declare const VireoApplicationNavigationContent: VireoApplicationNavigationStyledSlotComponent<BoxProps>;
+export {};

package/dist/capabilities/application-navigation/components/navigation/VireoApplicationNavigation/VireoApplicationNavigation.styled.js

@@ -0,0 +1,53 @@
+import { VIREO_MOTION_TOKENS } from "../../../../../core/public.js";
+import { Box, Drawer } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_APPLICATION_NAVIGATION_NAME } from "./VireoApplicationNavigation.identity.js";
+export const VireoApplicationNavigationRoot = styled(Box, {
+    name: VIREO_APPLICATION_NAVIGATION_NAME,
+    slot: "Root",
+    overridesResolver: (_props, styles) => styles.root,
+})(({ ownerState }) => ({
+    flex: "0 0 auto",
+    height: "100%",
+    minHeight: 0,
+    position: "relative",
+    width: ownerState.variant === "permanent" ? ownerState.width : 0,
+    transition: ownerState.isResizing
+        ? "none"
+        : `width ${VIREO_MOTION_TOKENS.duration.standard}ms ${VIREO_MOTION_TOKENS.easing.standard}`,
+}));
+export const VireoApplicationNavigationSurface = styled(Drawer, {
+    name: VIREO_APPLICATION_NAVIGATION_NAME,
+    slot: "Surface",
+    overridesResolver: (_props, styles) => styles.surface,
+})(({ ownerState, theme }) => ({
+    width: ownerState.variant === "permanent" ? ownerState.width : "100%",
+    maxWidth: ownerState.variant === "temporary" ? "100vw" : undefined,
+    flexShrink: 0,
+    "& .MuiDrawer-paper": {
+        boxSizing: "border-box",
+        position: ownerState.variant === "permanent" ? "absolute" : undefined,
+        width: ownerState.width,
+        maxWidth: ownerState.variant === "temporary" ? "100vw" : undefined,
+        overflowX: "hidden",
+        borderRight: `1px solid ${theme.palette.divider}`,
+        transition: ownerState.isResizing
+            ? "none"
+            : theme.transitions.create("width", {
+                duration: VIREO_MOTION_TOKENS.duration.standard,
+                easing: VIREO_MOTION_TOKENS.easing.standard,
+            }),
+    },
+}));
+export const VireoApplicationNavigationContent = styled(Box, {
+    name: VIREO_APPLICATION_NAVIGATION_NAME,
+    slot: "Content",
+    overridesResolver: (_props, styles) => styles.content,
+})({
+    display: "flex",
+    flexDirection: "column",
+    height: "100%",
+    minHeight: 0,
+    overflowX: "hidden",
+    position: "relative",
+});

package/dist/capabilities/application-navigation/components/navigation/VireoApplicationNavigation/VireoApplicationNavigation.types.d.ts

@@ -0,0 +1,101 @@
+import type { VireoDataAttributeValue, VireoThemeComponent } from "../../../../../core/public.js";
+import type { VireoApplicationNavigationMode } from "../../../../../capabilities/application-navigation/contexts/VireoApplicationNavigationContext/VireoApplicationNavigationContext.js";
+import type { VireoSidePanelResizeHandle } from "../../../../../capabilities/overlays/public.js";
+import type { Box, BoxProps, Drawer } from "@mui/material";
+import type { CreateSlotsAndSlotProps, SlotProps } from "@mui/material/utils";
+import type React from "react";
+import { type VireoApplicationNavigationClasses, type VireoApplicationNavigationClassKey } from "./VireoApplicationNavigation.classes.js";
+import type { VIREO_APPLICATION_NAVIGATION_NAME, VireoApplicationNavigationSlotName } from "./VireoApplicationNavigation.identity.js";
+export type { VireoApplicationNavigationMode } from "../../../../../capabilities/application-navigation/contexts/VireoApplicationNavigationContext/VireoApplicationNavigationContext.js";
+export declare const VIREO_APPLICATION_NAVIGATION_WIDTH_CSS_VAR = "--vireo-application-navigation-width";
+export declare const VIREO_APPLICATION_NAVIGATION_DEFAULT_EXPANDED_WIDTH = 264;
+export declare const VIREO_APPLICATION_NAVIGATION_DEFAULT_COMPACT_WIDTH = 80;
+export declare const VIREO_APPLICATION_NAVIGATION_MIN_EXPANDED_WIDTH = 220;
+export declare const VIREO_APPLICATION_NAVIGATION_MAX_EXPANDED_WIDTH = 480;
+export declare const VIREO_APPLICATION_NAVIGATION_DEFAULT_COLLAPSE_THRESHOLD = 220;
+export type VireoApplicationNavigationVariant = "permanent" | "temporary";
+export type VireoApplicationNavigationRenderState = {
+    mode: VireoApplicationNavigationMode;
+    width: number;
+    isResizing: boolean;
+    toggleMode: () => void;
+};
+export type VireoApplicationNavigationOwnerState = {
+    mode: VireoApplicationNavigationMode;
+    variant: VireoApplicationNavigationVariant;
+    width: number;
+    isResizing: boolean;
+    resizable: boolean;
+    locked: boolean;
+};
+export interface VireoApplicationNavigationRootSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoApplicationNavigationSurfaceSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoApplicationNavigationContentSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+export interface VireoApplicationNavigationResizeHandleSlotPropsOverrides {
+    [key: `data-${string}`]: VireoDataAttributeValue;
+}
+/** Replaceable semantic regions exposed by {@link VireoApplicationNavigation}. */
+export type VireoApplicationNavigationSlots = {
+    [TSlotName in VireoApplicationNavigationSlotName]: React.ElementType;
+};
+/** Slot props exposed by {@link VireoApplicationNavigation}. */
+export type VireoApplicationNavigationSlotsAndSlotProps = CreateSlotsAndSlotProps<VireoApplicationNavigationSlots, {
+    /** @default 'div' */
+    root: SlotProps<"div", VireoApplicationNavigationRootSlotPropsOverrides, VireoApplicationNavigationOwnerState>;
+    /** @default Drawer */
+    surface: SlotProps<typeof Drawer, VireoApplicationNavigationSurfaceSlotPropsOverrides, VireoApplicationNavigationOwnerState>;
+    /** @default 'div' */
+    content: SlotProps<typeof Box, VireoApplicationNavigationContentSlotPropsOverrides, VireoApplicationNavigationOwnerState>;
+    /** @default VireoSidePanelResizeHandle */
+    resizeHandle: SlotProps<typeof VireoSidePanelResizeHandle, VireoApplicationNavigationResizeHandleSlotPropsOverrides, VireoApplicationNavigationOwnerState>;
+}>;
+/** Props owned by {@link VireoApplicationNavigation}. */
+export type VireoApplicationNavigationOwnProps = VireoApplicationNavigationSlotsAndSlotProps & {
+    /** Current desktop navigation presentation. @default 'expanded' */
+    mode?: VireoApplicationNavigationMode;
+    /** Desktop or modal navigation surface. @default 'permanent' */
+    variant?: VireoApplicationNavigationVariant;
+    /** Whether a temporary surface is open. Ignored by permanent surfaces. @default false */
+    open?: boolean;
+    /** Requests that a temporary surface close. */
+    onClose?: () => void;
+    /** Remembered width used by expanded mode. @default 264 */
+    expandedWidth?: number;
+    /** Fixed width used by compact mode. @default 80 */
+    compactWidth?: number;
+    /** Smallest expanded width. @default 220 */
+    minExpandedWidth?: number;
+    /** Largest expanded width. @default 480 */
+    maxExpandedWidth?: number;
+    /** Expanded width restored by a resize-handle double click. @default 264 */
+    defaultExpandedWidth?: number;
+    /** Width below which resizing snaps to compact mode. @default minExpandedWidth */
+    collapseThreshold?: number;
+    /** Enables pointer and keyboard resizing for a permanent surface. @default true */
+    resizable?: boolean;
+    /** Locks the current mode and width by disabling mode toggles and resizing. @default false */
+    locked?: boolean;
+    /** Called when the requested desktop mode changes. */
+    onModeChange?: (mode: VireoApplicationNavigationMode) => void;
+    /** Called when resizing or a reset commits a new expanded width. */
+    onExpandedWidthChange?: (width: number) => void;
+    /** Navigation contents, optionally rendered from the resolved navigation state. */
+    children: React.ReactNode | ((state: VireoApplicationNavigationRenderState) => React.ReactNode);
+    /** Override or extend the utility classes applied to each slot. */
+    classes?: Partial<VireoApplicationNavigationClasses>;
+};
+/** Props VireoApplicationNavigation inherits from its default root after excluding component-owned props. */
+export type VireoApplicationNavigationInheritedProps = Omit<BoxProps<"div">, "children" | "component">;
+/** Props accepted by {@link VireoApplicationNavigation}. */
+export type VireoApplicationNavigationProps = VireoApplicationNavigationOwnProps & VireoApplicationNavigationInheritedProps;
+declare module "@mui/material/styles" {
+    interface Components<Theme = unknown> {
+        [VIREO_APPLICATION_NAVIGATION_NAME]?: VireoThemeComponent<VireoApplicationNavigationProps, VireoApplicationNavigationClassKey, VireoApplicationNavigationOwnerState, Theme>;
+    }
+}

package/dist/capabilities/application-navigation/components/navigation/VireoApplicationNavigation/VireoApplicationNavigation.types.js

@@ -0,0 +1,6 @@
+export const VIREO_APPLICATION_NAVIGATION_WIDTH_CSS_VAR = "--vireo-application-navigation-width";
+export const VIREO_APPLICATION_NAVIGATION_DEFAULT_EXPANDED_WIDTH = 264;
+export const VIREO_APPLICATION_NAVIGATION_DEFAULT_COMPACT_WIDTH = 80;
+export const VIREO_APPLICATION_NAVIGATION_MIN_EXPANDED_WIDTH = 220;
+export const VIREO_APPLICATION_NAVIGATION_MAX_EXPANDED_WIDTH = 480;
+export const VIREO_APPLICATION_NAVIGATION_DEFAULT_COLLAPSE_THRESHOLD = VIREO_APPLICATION_NAVIGATION_MIN_EXPANDED_WIDTH;

package/dist/capabilities/application-navigation/components/navigation/VireoApplicationNavigation/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./VireoApplicationNavigation.js";
+export * from "./VireoApplicationNavigation.classes.js";
+export * from "./VireoApplicationNavigation.types.js";

package/dist/capabilities/application-navigation/components/navigation/VireoApplicationNavigation/index.js

@@ -0,0 +1,3 @@
+export * from "./VireoApplicationNavigation.js";
+export * from "./VireoApplicationNavigation.classes.js";
+export * from "./VireoApplicationNavigation.types.js";

package/dist/capabilities/application-navigation/components/navigation/VireoApplicationNavigationItem/VireoApplicationNavigationItem.classes.d.ts

@@ -0,0 +1,9 @@
+import { type VireoApplicationNavigationItemSlotName } from "./VireoApplicationNavigationItem.identity.js";
+/** Utility classes available to VireoApplicationNavigationItem. */
+export type VireoApplicationNavigationItemClasses = Record<VireoApplicationNavigationItemSlotName, string>;
+/** Valid keys for VireoApplicationNavigationItem utility classes and theme style overrides. */
+export type VireoApplicationNavigationItemClassKey = keyof VireoApplicationNavigationItemClasses;
+/** Returns the generated utility class name for a VireoApplicationNavigationItem slot or state. */
+export declare function getVireoApplicationNavigationItemUtilityClass(slot: string): string;
+/** Generated utility class names keyed by each public VireoApplicationNavigationItem class key. */
+export declare const vireoApplicationNavigationItemClasses: VireoApplicationNavigationItemClasses;

package/dist/capabilities/application-navigation/components/navigation/VireoApplicationNavigationItem/VireoApplicationNavigationItem.classes.js

@@ -0,0 +1,8 @@
+import { generateUtilityClass, generateUtilityClasses } from "@mui/material";
+import { VIREO_APPLICATION_NAVIGATION_ITEM_NAME, VIREO_APPLICATION_NAVIGATION_ITEM_SLOTS, } from "./VireoApplicationNavigationItem.identity.js";
+/** Returns the generated utility class name for a VireoApplicationNavigationItem slot or state. */
+export function getVireoApplicationNavigationItemUtilityClass(slot) {
+    return generateUtilityClass(VIREO_APPLICATION_NAVIGATION_ITEM_NAME, slot);
+}
+/** Generated utility class names keyed by each public VireoApplicationNavigationItem class key. */
+export const vireoApplicationNavigationItemClasses = generateUtilityClasses(VIREO_APPLICATION_NAVIGATION_ITEM_NAME, [...VIREO_APPLICATION_NAVIGATION_ITEM_SLOTS]);

package/dist/capabilities/application-navigation/components/navigation/VireoApplicationNavigationItem/VireoApplicationNavigationItem.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { type VireoApplicationNavigationItemProps } from "./VireoApplicationNavigationItem.types.js";
+/**
+ * Renders a destination consistently in expanded and compact application navigation.
+ */
+export declare const VireoApplicationNavigationItem: React.ForwardRefExoticComponent<Omit<VireoApplicationNavigationItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/capabilities/application-navigation/components/navigation/VireoApplicationNavigationItem/VireoApplicationNavigationItem.identity.d.ts

@@ -0,0 +1,6 @@
+/** Stable component name shared by every VireoApplicationNavigationItem integration point. */
+export declare const VIREO_APPLICATION_NAVIGATION_ITEM_NAME = "VireoApplicationNavigationItem";
+/** Canonical public slots exposed by VireoApplicationNavigationItem, in rendered DOM order. */
+export declare const VIREO_APPLICATION_NAVIGATION_ITEM_SLOTS: readonly ["root", "icon", "label"];
+/** Public slot names exposed by VireoApplicationNavigationItem. */
+export type VireoApplicationNavigationItemSlotName = (typeof VIREO_APPLICATION_NAVIGATION_ITEM_SLOTS)[number];

package/dist/capabilities/application-navigation/components/navigation/VireoApplicationNavigationItem/VireoApplicationNavigationItem.identity.js

@@ -0,0 +1,4 @@
+/** Stable component name shared by every VireoApplicationNavigationItem integration point. */
+export const VIREO_APPLICATION_NAVIGATION_ITEM_NAME = "VireoApplicationNavigationItem";
+/** Canonical public slots exposed by VireoApplicationNavigationItem, in rendered DOM order. */
+export const VIREO_APPLICATION_NAVIGATION_ITEM_SLOTS = ["root", "icon", "label"];

package/dist/capabilities/application-navigation/components/navigation/VireoApplicationNavigationItem/VireoApplicationNavigationItem.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { joinClassNames, mergeSx, resolveSlotProps } from "../../../../../core/public.js";
+import { VireoApplicationNavigationContext } from "../../../../../capabilities/application-navigation/contexts/VireoApplicationNavigationContext/VireoApplicationNavigationContext.js";
+import { Tooltip, unstable_composeClasses as composeClasses } from "@mui/material";
+import { useThemeProps } from "@mui/material/styles";
+import { useForkRef } from "@mui/material/utils";
+import React from "react";
+import { getVireoApplicationNavigationItemUtilityClass, } from "./VireoApplicationNavigationItem.classes.js";
+import { VIREO_APPLICATION_NAVIGATION_ITEM_NAME, } from "./VireoApplicationNavigationItem.identity.js";
+import { VireoApplicationNavigationItemIcon, VireoApplicationNavigationItemLabel, VireoApplicationNavigationItemRoot, } from "./VireoApplicationNavigationItem.styled.js";
+function useUtilityClasses(ownerState, classes) {
+    return composeClasses({
+        root: ["root"],
+        icon: ["icon"],
+        label: ["label"],
+    }, getVireoApplicationNavigationItemUtilityClass, classes);
+}
+/**
+ * Renders a destination consistently in expanded and compact application navigation.
+ */
+export const VireoApplicationNavigationItem = React.forwardRef(function VireoApplicationNavigationItem(inProps, forwardedRef) {
+    const props = useThemeProps({ props: inProps, name: VIREO_APPLICATION_NAVIGATION_ITEM_NAME });
+    const { className, classes: classesProp, compactLabel, disabled = false, icon, label, mode: modeProp, selected = false, slotProps = {}, slots = {}, style, sx, tooltip = label, ...other } = props;
+    const navigation = React.useContext(VireoApplicationNavigationContext);
+    const ownerState = {
+        mode: modeProp ?? navigation.mode,
+        selected,
+        disabled,
+    };
+    const classes = useUtilityClasses(ownerState, classesProp);
+    const resolvedRootSlotProps = resolveSlotProps(slotProps.root, ownerState);
+    const { className: rootSlotClassName, ref: rootSlotRef, style: rootSlotStyle, sx: rootSlotSx, ...rootSlotOther } = resolvedRootSlotProps;
+    const rootRef = useForkRef(forwardedRef, rootSlotRef);
+    const resolvedIconSlotProps = resolveSlotProps(slotProps.icon, ownerState);
+    const resolvedLabelSlotProps = resolveSlotProps(slotProps.label, ownerState);
+    const { className: iconSlotClassName, ...iconSlotOther } = resolvedIconSlotProps;
+    const { className: labelSlotClassName, ...labelSlotOther } = resolvedLabelSlotProps;
+    const item = (_jsxs(VireoApplicationNavigationItemRoot, { ...other, ...rootSlotOther, as: slots.root, ref: rootRef, ownerState: ownerState, "aria-current": selected ? "page" : undefined, disabled: disabled, selected: selected, className: joinClassNames(classes.root, className, rootSlotClassName), style: { ...style, ...rootSlotStyle }, sx: mergeSx(sx, rootSlotSx), children: [_jsx(VireoApplicationNavigationItemIcon, { ...iconSlotOther, as: slots.icon ?? "span", ownerState: ownerState, className: joinClassNames(classes.icon, iconSlotClassName), "aria-hidden": true, children: icon }), _jsx(VireoApplicationNavigationItemLabel, { ...labelSlotOther, as: slots.label, ownerState: ownerState, className: joinClassNames(classes.label, labelSlotClassName), children: ownerState.mode === "compact" ? (compactLabel ?? label) : label })] }));
+    return ownerState.mode === "compact" && tooltip ? (_jsx(Tooltip, { placement: "right", title: tooltip, children: item })) : (item);
+});
+VireoApplicationNavigationItem.displayName = VIREO_APPLICATION_NAVIGATION_ITEM_NAME;

package/dist/capabilities/application-navigation/components/navigation/VireoApplicationNavigationItem/VireoApplicationNavigationItem.styled.d.ts

@@ -0,0 +1,8 @@
+import { type StyledSlotComponent } from "../../../../../core/public.js";
+import { type BoxProps, type ListItemButtonProps, type TypographyProps } from "@mui/material";
+import { type VireoApplicationNavigationItemOwnerState } from "./VireoApplicationNavigationItem.types.js";
+type VireoApplicationNavigationItemStyledSlotComponent<TProps extends object> = StyledSlotComponent<TProps, VireoApplicationNavigationItemOwnerState>;
+export declare const VireoApplicationNavigationItemRoot: VireoApplicationNavigationItemStyledSlotComponent<ListItemButtonProps>;
+export declare const VireoApplicationNavigationItemIcon: VireoApplicationNavigationItemStyledSlotComponent<BoxProps>;
+export declare const VireoApplicationNavigationItemLabel: VireoApplicationNavigationItemStyledSlotComponent<TypographyProps>;
+export {};

package/dist/capabilities/application-navigation/components/navigation/VireoApplicationNavigationItem/VireoApplicationNavigationItem.styled.js

@@ -0,0 +1,78 @@
+import { VIREO_MOTION_TOKENS } from "../../../../../core/public.js";
+import { Box, ListItemButton, Typography, } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { VIREO_APPLICATION_NAVIGATION_ITEM_NAME } from "./VireoApplicationNavigationItem.identity.js";
+export const VireoApplicationNavigationItemRoot = styled(ListItemButton, {
+    name: VIREO_APPLICATION_NAVIGATION_ITEM_NAME,
+    slot: "Root",
+    overridesResolver: (_props, styles) => styles.root,
+})(({ ownerState, theme }) => ({
+    borderRadius: theme.shape.borderRadius,
+    display: "flex",
+    flex: "0 0 auto",
+    flexDirection: ownerState.mode === "compact" ? "column" : "row",
+    gap: ownerState.mode === "compact" ? theme.spacing(0.5) : theme.spacing(1.5),
+    justifyContent: ownerState.mode === "compact" ? "center" : "flex-start",
+    minHeight: ownerState.mode === "compact" ? 64 : 48,
+    padding: ownerState.mode === "compact" ? theme.spacing(1, 0.5) : theme.spacing(1, 1.5),
+    position: "relative",
+    transition: theme.transitions.create(["background-color", "color", "padding", "transform"], {
+        duration: VIREO_MOTION_TOKENS.duration.micro,
+        easing: VIREO_MOTION_TOKENS.easing.standard,
+    }),
+    "&::before": {
+        backgroundColor: theme.palette.primary.main,
+        borderRadius: 999,
+        content: '""',
+        insetBlock: ownerState.mode === "compact" ? "auto 4px" : "12px",
+        insetInlineStart: ownerState.mode === "compact" ? "25%" : 3,
+        opacity: 0,
+        position: "absolute",
+        transform: ownerState.mode === "compact" ? "scaleX(0)" : "scaleY(0)",
+        transformOrigin: "center",
+        transition: theme.transitions.create(["opacity", "transform"], {
+            duration: VIREO_MOTION_TOKENS.duration.standard,
+            easing: VIREO_MOTION_TOKENS.easing.standard,
+        }),
+        width: ownerState.mode === "compact" ? "50%" : 3,
+        height: ownerState.mode === "compact" ? 3 : "auto",
+    },
+    "&.Mui-selected::before": {
+        opacity: 1,
+        transform: "scale(1)",
+    },
+    "&:active:not(.Mui-disabled)": {
+        transform: "translateY(1px)",
+    },
+    "@media (prefers-reduced-motion: reduce)": {
+        transitionDuration: "0ms",
+        "&::before": { transitionDuration: "0ms" },
+        "&:active:not(.Mui-disabled)": { transform: "none" },
+    },
+}));
+export const VireoApplicationNavigationItemIcon = styled(Box, {
+    name: VIREO_APPLICATION_NAVIGATION_ITEM_NAME,
+    slot: "Icon",
+    overridesResolver: (_props, styles) => styles.icon,
+})({
+    alignItems: "center",
+    color: "inherit",
+    display: "inline-flex",
+    flex: "0 0 auto",
+    justifyContent: "center",
+    minWidth: 24,
+});
+export const VireoApplicationNavigationItemLabel = styled(Typography, {
+    name: VIREO_APPLICATION_NAVIGATION_ITEM_NAME,
+    slot: "Label",
+    overridesResolver: (_props, styles) => styles.label,
+})(({ ownerState }) => ({
+    fontSize: ownerState.mode === "compact" ? "0.6875rem" : "0.875rem",
+    fontWeight: ownerState.selected ? 700 : 500,
+    lineHeight: ownerState.mode === "compact" ? 1.15 : 1.4,
+    maxWidth: "100%",
+    overflow: "hidden",
+    textAlign: ownerState.mode === "compact" ? "center" : "start",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+}));