@moneyforward/mfui-components 3.25.1 → 3.27.0

package/dist/src/Sidebar/Sidebar.js

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../styled-system/css';
+import { sidebarSlotRecipe } from '../../styled-system/recipes';
+import { SidebarServiceMenu } from './SidebarServiceMenu';
+import { SidebarTenantMenu } from './SidebarTenantMenu';
+import { SidebarUserMenu } from './SidebarUserMenu';
+import { SidebarNavigationItem } from './SidebarNavigationItem';
+import { useSidebarResize } from './hooks/useSidebarResize';
+function SidebarBase({ className, logoSlot, mainNavigationItems, extraNavigationSlot, footerSlot, serviceMenuSlot, footerIconMenuSlot, tenantSlot, userSlot, minWidth, maxWidth, defaultWidth, onWidthChange, mainNavigationLabel = 'メインナビゲーション', extraNavigationLabel = '追加ナビゲーション', resizeHandleLabel = 'サイドバーの幅を調整', }) {
+    const classes = sidebarSlotRecipe();
+    const { width, minWidth: resolvedMinWidth, maxWidth: resolvedMaxWidth, rootRef, isDragging, handlePointerDown, handleKeyDown, } = useSidebarResize({
+        minWidth,
+        maxWidth,
+        defaultWidth,
+        onWidthChange,
+    });
+    return (_jsxs("div", { ref: rootRef, className: cx(classes.root, 'mfui-Sidebar__root', className), style: { width: `${String(width)}px` }, "data-mfui-dragging": isDragging ? true : undefined, children: [_jsx("header", { className: cx(classes.header, 'mfui-Sidebar__header'), children: _jsx("div", { className: cx(classes.leftPane, 'mfui-Sidebar__leftPane'), children: _jsx("div", { className: cx(classes.logo, 'mfui-Sidebar__logo'), children: logoSlot }) }) }), _jsxs("div", { className: cx(classes.navigationWrapper, 'mfui-Sidebar__navigationWrapper'), children: [mainNavigationItems && mainNavigationItems.length > 0 ? (_jsx("nav", { "aria-label": mainNavigationLabel, className: cx(classes.mainNavigation, 'mfui-Sidebar__mainNavigation'), children: _jsx("ul", { className: cx(classes.navigationList, 'mfui-Sidebar__navigationList'), children: mainNavigationItems.map((item, index) => {
+                                if ('type' in item) {
+                                    return (_jsx("li", { "aria-hidden": "true", className: cx(classes.navigationDivider, 'mfui-Sidebar__navigationDivider') }, index));
+                                }
+                                return _jsx(SidebarNavigationItem, { ...item }, index);
+                            }) }) })) : null, extraNavigationSlot ? (_jsx("nav", { "aria-label": extraNavigationLabel, className: cx(classes.extraNavigation, 'mfui-Sidebar__extraNavigation'), children: extraNavigationSlot })) : null] }), _jsxs("div", { className: cx(classes.footer, 'mfui-Sidebar__footer'), children: [footerSlot ? _jsx("div", { className: cx(classes.footerSlot, 'mfui-Sidebar__footerSlot'), children: footerSlot }) : null, serviceMenuSlot ? (_jsx("div", { className: cx(classes.serviceMenu, 'mfui-Sidebar__serviceMenu'), children: serviceMenuSlot })) : null, _jsx("div", { className: cx(classes.footerIconMenu, 'mfui-Sidebar__footerIconMenu'), children: footerIconMenuSlot }), tenantSlot || userSlot ? (_jsxs("div", { className: cx(classes.footerUserIdMenu, 'mfui-Sidebar__footerUserIdMenu'), children: [tenantSlot ? (_jsx("div", { className: cx(classes.footerUserIdMenuItem, 'mfui-Sidebar__footerUserIdMenuItem'), children: tenantSlot })) : null, userSlot ? (_jsx("div", { className: cx(classes.footerUserIdMenuItem, 'mfui-Sidebar__footerUserIdMenuItem'), children: userSlot })) : null] })) : null] }), _jsx("div", { "data-mfui-handle": true, "data-mfui-dragging": isDragging ? true : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": resizeHandleLabel, "aria-valuenow": width, "aria-valuemin": resolvedMinWidth, "aria-valuemax": resolvedMaxWidth, 
+                // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                tabIndex: 0, className: cx(classes.handle, 'mfui-Sidebar__handle'), onPointerDown: handlePointerDown, onKeyDown: handleKeyDown })] }));
+}
+/**
+ * The sidebar component.
+ * A navigation layout component that combines a logo header, a navigation area,
+ * and a footer with icon menu and user information.
+ *
+ * **EXPERIMENTAL**: This component is experimental and may be changed or removed in the future.
+ *
+ * The width is resizable via the drag handle on the right edge. See the `WidthPersistence` story for
+ * an example of persisting the width across reloads via `onWidthChange` and `defaultWidth`.
+ *
+ * The following composition components are provided as sub-components:
+ * - `Sidebar.NavigationItem` — a single navigation item; `mainNavigationItems` renders these for you,
+ *   but it can also be used directly inside `extraNavigationSlot`.
+ * - `Sidebar.ServiceMenu` — the footer service menu trigger, intended to wrap a list of services.
+ * - `Sidebar.TenantMenu` — the footer tenant (business) name and its menu.
+ * - `Sidebar.UserMenu` — the footer user (account) name and its menu.
+ *
+ * @example
+ * ```tsx
+ * <Sidebar
+ *   logoSlot={<YourLogo />}
+ *   defaultWidth={savedWidth}
+ *   onWidthChange={(width) => persistWidth(width)}
+ *   mainNavigationItems={[
+ *     { label: 'Home', icon: <HomeIcon />, href: '/', isCurrent: true },
+ *     { label: 'Search', icon: <SearchIcon />, onClick: handleSearch },
+ *   ]}
+ *   serviceMenuSlot={
+ *     <Sidebar.ServiceMenu label="サービス" icon={<ApplicationsIcon />}>
+ *       <DropdownMenu.Item href="https://example.com">マイページ</DropdownMenu.Item>
+ *     </Sidebar.ServiceMenu>
+ *   }
+ *   footerIconMenuSlot={<YourIconButtons />}
+ *   tenantSlot={
+ *     <Sidebar.TenantMenu name="株式会社サンプル" tooltipLabel="事業者">
+ *       <DropdownMenu.Item href="https://example.com">事業者設定</DropdownMenu.Item>
+ *     </Sidebar.TenantMenu>
+ *   }
+ *   userSlot={
+ *     <Sidebar.UserMenu name="山田 太郎" tooltipLabel="アカウント">
+ *       <DropdownMenu.Item onClick={handleLogout}>ログアウト</DropdownMenu.Item>
+ *     </Sidebar.UserMenu>
+ *   }
+ * />
+ * ```
+ */
+export const Sidebar = Object.assign(SidebarBase, {
+    /** @see {@link SidebarNavigationItem} */
+    NavigationItem: SidebarNavigationItem,
+    /** @see {@link SidebarServiceMenu} */
+    ServiceMenu: SidebarServiceMenu,
+    /** @see {@link SidebarTenantMenu} */
+    TenantMenu: SidebarTenantMenu,
+    /** @see {@link SidebarUserMenu} */
+    UserMenu: SidebarUserMenu,
+});

package/dist/src/Sidebar/Sidebar.types.d.ts

@@ -0,0 +1,143 @@
+import { type ComponentPropsWithoutRef, type ElementType, type ReactElement, type ReactNode } from 'react';
+type AnchorNavigationItemProps = {
+    /**
+     * The URL to navigate to when the item is clicked.
+     * When provided, the item is rendered as an anchor (`<a>`) element.
+     */
+    href: string;
+    /**
+     * The target attribute for the anchor element.
+     */
+    target?: string;
+    /**
+     * Custom link component to use instead of the default anchor element.
+     * Useful for client-side routing libraries (e.g. next/link).
+     */
+    customLinkComponent?: ElementType;
+    onClick?: undefined;
+};
+type ButtonNavigationItemProps = {
+    href?: undefined;
+    target?: undefined;
+    customLinkComponent?: undefined;
+    /**
+     * The click handler for the navigation item.
+     * When provided without `href`, the item is rendered as a button (`<button>`) element.
+     */
+    onClick: ComponentPropsWithoutRef<'button'>['onClick'];
+};
+export type SidebarNavigationItem = {
+    /**
+     * The label of the navigation item.
+     */
+    label: string;
+    /**
+     * The icon of the navigation item.
+     */
+    icon: ReactElement;
+    /**
+     * Whether the navigation item is the current page.
+     */
+    isCurrent?: boolean;
+    /**
+     * Maximum number of lines before truncating with an ellipsis.
+     * When the label is truncated, a tooltip with the full text is shown automatically.
+     *
+     * @default 1
+     */
+    maxLines?: number;
+} & (AnchorNavigationItemProps | ButtonNavigationItemProps);
+/**
+ * A visual divider that separates groups of navigation items.
+ */
+export type SidebarNavigationDivider = {
+    type: 'divider';
+};
+export type SidebarNavigationEntry = SidebarNavigationItem | SidebarNavigationDivider;
+export type SidebarProps = {
+    /**
+     * Additional class names to apply to the component.
+     */
+    className?: string;
+    /**
+     * Elements to be displayed on the logo area at the top of the sidebar.
+     */
+    logoSlot: ReactNode;
+    /**
+     * Navigation items to be displayed in the primary navigation area.
+     * Use `{ type: 'divider' }` to insert a visual separator between groups of items.
+     */
+    mainNavigationItems?: SidebarNavigationEntry[];
+    /**
+     * Elements to be displayed in the secondary navigation area, below the primary navigation.
+     * This slot accepts any content.
+     */
+    extraNavigationSlot?: ReactNode;
+    /**
+     * Elements to be displayed above the service menu in the footer.
+     * This slot accepts any content.
+     */
+    footerSlot?: ReactNode;
+    /**
+     * Elements to be displayed as the service menu in the footer.
+     * Intended for a dropdown menu listing available services.
+     */
+    serviceMenuSlot: ReactNode;
+    /**
+     * Elements to be displayed in the footer icon menu area.
+     * Icon buttons with dropdowns should open upward (placement: top).
+     */
+    footerIconMenuSlot: ReactNode;
+    /**
+     * Elements to be displayed below the footer icon menu.
+     * Intended for the tenant (business) name and its menu.
+     */
+    tenantSlot?: ReactNode;
+    /**
+     * Elements to be displayed below the tenant area.
+     * Intended for the user (account) name and its menu.
+     */
+    userSlot?: ReactNode;
+    /**
+     * Minimum width in pixels when resizing.
+     *
+     * @default 180
+     */
+    minWidth?: number;
+    /**
+     * Maximum width in pixels when resizing.
+     *
+     * @default 280
+     */
+    maxWidth?: number;
+    /**
+     * The initial (or server-persisted) width in pixels.
+     * Use this to restore the sidebar width from your own storage (e.g. a server-side user preference).
+     * When provided, the sidebar opens at this width clamped to `[minWidth, maxWidth]`.
+     */
+    defaultWidth?: number;
+    /**
+     * Called whenever the user finishes resizing the sidebar, with the new width in pixels.
+     * Use this to persist the value in your own storage (e.g. via an API call).
+     */
+    onWidthChange: (width: number) => void;
+    /**
+     * The accessible name for the primary navigation landmark.
+     *
+     * @default 'メインナビゲーション'
+     */
+    mainNavigationLabel?: string;
+    /**
+     * The accessible name for the secondary navigation landmark.
+     *
+     * @default '追加ナビゲーション'
+     */
+    extraNavigationLabel?: string;
+    /**
+     * The accessible name for the resize handle.
+     *
+     * @default 'サイドバーの幅を調整'
+     */
+    resizeHandleLabel?: string;
+};
+export {};

package/dist/src/Sidebar/Sidebar.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/Sidebar/SidebarNavigationItem.d.ts

@@ -0,0 +1,9 @@
+import { type SidebarNavigationItem as SidebarNavigationItemType } from './Sidebar.types';
+export type SidebarNavigationItemProps = SidebarNavigationItemType;
+/**
+ * A single navigation item shown in the Sidebar.
+ *
+ * Renders as an anchor (`<a>`) when `href` is provided, or a button (`<button>`) when `onClick` is provided.
+ * Long labels are truncated to `maxLines` with an automatic tooltip showing the full text.
+ */
+export declare function SidebarNavigationItem({ label, icon, isCurrent, maxLines, ...rest }: SidebarNavigationItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/Sidebar/SidebarNavigationItem.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, useRef, useState } from 'react';
+import { cx } from '../../styled-system/css';
+import { sidebarSlotRecipe } from '../../styled-system/recipes';
+import { FocusIndicator } from '../FocusIndicator';
+import { Tooltip } from '../Tooltip';
+import { Typography } from '../Typography';
+import { useIsomorphicLayoutEffect } from '../utilities/react/useIsomorphicLayoutEffect';
+/**
+ * A single navigation item shown in the Sidebar.
+ *
+ * Renders as an anchor (`<a>`) when `href` is provided, or a button (`<button>`) when `onClick` is provided.
+ * Long labels are truncated to `maxLines` with an automatic tooltip showing the full text.
+ */
+export function SidebarNavigationItem({ label, icon, isCurrent, maxLines, ...rest }) {
+    const classes = sidebarSlotRecipe();
+    const labelRef = useRef(null);
+    const [isTruncated, setIsTruncated] = useState(false);
+    useIsomorphicLayoutEffect(() => {
+        const element = labelRef.current;
+        if (!element)
+            return;
+        const check = () => {
+            setIsTruncated(element.scrollHeight > element.clientHeight);
+        };
+        check();
+        const observer = new ResizeObserver(check);
+        observer.observe(element);
+        return () => {
+            observer.disconnect();
+        };
+        // Re-check when label/maxLines change: a content change may not alter the observed
+        // box size, so ResizeObserver alone would leave isTruncated stale.
+    }, [label, maxLines]);
+    const isAnchor = 'href' in rest && rest.href !== undefined;
+    const Tag = isAnchor
+        ? (rest.customLinkComponent ?? 'a')
+        : 'button';
+    const href = isAnchor ? rest.href : undefined;
+    const target = 'target' in rest ? rest.target : undefined;
+    const onClick = 'onClick' in rest ? rest.onClick : undefined;
+    return (_jsx("li", { className: cx(classes.navigationListItem, 'mfui-Sidebar__navigationListItem'), style: maxLines !== undefined ? { '--mfui-sidebar-max-lines': maxLines } : undefined, children: _jsx(Tooltip, { content: label, disabled: !isTruncated, placement: "right", children: _jsx(FocusIndicator, { children: _jsx(Tag, { "data-mfui-focusable": true, href: href, target: target, type: isAnchor ? undefined : 'button', "aria-current": isCurrent ? 'page' : undefined, className: cx(classes.navigationLink, 'mfui-Sidebar__navigationLink'), onClick: onClick, children: _jsxs("div", { className: cx(classes.navigationLinkInner, 'mfui-Sidebar__navigationLinkInner'), children: [_jsx("span", { className: cx(classes.navigationLinkIcon, 'mfui-Sidebar__navigationLinkIcon'), children: cloneElement(icon, {
+                                    width: 18,
+                                    height: 18,
+                                    'aria-hidden': true,
+                                }) }), _jsx(Typography, { ref: labelRef, variant: "controlLabel", className: cx(classes.navigationLinkLabel, 'mfui-Sidebar__navigationLinkLabel'), children: label })] }) }) }) }) }));
+}

package/dist/src/Sidebar/SidebarServiceMenu.d.ts

@@ -0,0 +1,23 @@
+import { type ReactElement, type ReactNode } from 'react';
+export type SidebarServiceMenuProps = {
+    /**
+     * The label shown in the service switcher trigger.
+     */
+    label: string;
+    /**
+     * The icon shown in the service switcher trigger.
+     */
+    icon: ReactElement;
+    /**
+     * The dropdown menu items (e.g. `DropdownMenu.Item` / `DropdownMenu.Divider`).
+     */
+    children: ReactNode;
+};
+/**
+ * The service switcher menu shown in the Sidebar footer.
+ *
+ * It renders a navigation-link styled trigger (matching the sidebar navigation items) that opens a
+ * dropdown of services. The trigger design and accessibility are fixed; pass the label, icon, and
+ * menu items only.
+ */
+export declare function SidebarServiceMenu({ label, icon, children }: SidebarServiceMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/Sidebar/SidebarServiceMenu.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DropdownMenu } from '../DropdownMenu';
+/**
+ * The service switcher menu shown in the Sidebar footer.
+ *
+ * It renders a navigation-link styled trigger (matching the sidebar navigation items) that opens a
+ * dropdown of services. The trigger design and accessibility are fixed; pass the label, icon, and
+ * menu items only.
+ */
+export function SidebarServiceMenu({ label, icon, children }) {
+    return (_jsx(DropdownMenu, { label: label, triggerProps: {
+            priority: 'tertiary',
+            size: 'small',
+            isDropdownTrigger: false,
+            leftIcon: icon,
+            // Styled via the `serviceMenu` slot's `& .mfui-Sidebar__serviceTrigger` descendant selector.
+            className: 'mfui-Sidebar__serviceTrigger',
+        }, menuPopoverProps: { allowedPlacements: ['top-start'] }, children: children }));
+}

package/dist/src/Sidebar/SidebarTenantMenu.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+export type SidebarTenantMenuProps = {
+    /**
+     * The tenant (business) name shown in the trigger.
+     */
+    name: string;
+    /**
+     * The tooltip label describing what the trigger is (e.g. `"事業者"`).
+     * Shown on hover/focus. When omitted, no tooltip is shown.
+     */
+    tooltipLabel?: string;
+    /**
+     * The dropdown menu items (e.g. `DropdownMenu.Item` / `DropdownMenu.Divider`).
+     */
+    children: ReactNode;
+};
+/**
+ * The tenant (business) menu shown in the Sidebar footer.
+ *
+ * It renders a fixed, text-only trigger showing the tenant name that opens a dropdown menu.
+ * The trigger design and accessibility are fixed; pass the name and menu items only.
+ */
+export declare function SidebarTenantMenu({ name, tooltipLabel, children }: SidebarTenantMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/Sidebar/SidebarTenantMenu.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DropdownMenu } from '../DropdownMenu';
+/**
+ * The tenant (business) menu shown in the Sidebar footer.
+ *
+ * It renders a fixed, text-only trigger showing the tenant name that opens a dropdown menu.
+ * The trigger design and accessibility are fixed; pass the name and menu items only.
+ */
+export function SidebarTenantMenu({ name, tooltipLabel, children }) {
+    return (_jsx(DropdownMenu, { triggerMiddleTruncate: true, label: name, tooltipLabel: tooltipLabel, tooltipPlacement: "top", triggerTypographyVariant: "condensedControlLabel", triggerProps: {
+            priority: 'tertiary',
+            size: 'small',
+            isDropdownTrigger: false,
+            // Styled via the `footerUserIdMenuItem` slot's `& .mfui-Sidebar__tenantTrigger` descendant selector.
+            className: 'mfui-Sidebar__tenantTrigger',
+        }, menuPopoverProps: { allowedPlacements: ['top-start'] }, children: children }));
+}

package/dist/src/Sidebar/SidebarUserMenu.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+export type SidebarUserMenuProps = {
+    /**
+     * The user (account) name shown in the trigger.
+     */
+    name: string;
+    /**
+     * The tooltip label describing what the trigger is (e.g. `"アカウント"`).
+     * Shown on hover/focus. When omitted, no tooltip is shown.
+     */
+    tooltipLabel?: string;
+    /**
+     * The dropdown menu items (e.g. `DropdownMenu.Item` / `DropdownMenu.Divider`).
+     */
+    children: ReactNode;
+};
+/**
+ * The user (account) menu shown in the Sidebar footer.
+ *
+ * It renders a fixed, text-only trigger showing the user name that opens a dropdown menu.
+ * The trigger design and accessibility are fixed; pass the name and menu items only.
+ */
+export declare function SidebarUserMenu({ name, tooltipLabel, children }: SidebarUserMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/Sidebar/SidebarUserMenu.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DropdownMenu } from '../DropdownMenu';
+/**
+ * The user (account) menu shown in the Sidebar footer.
+ *
+ * It renders a fixed, text-only trigger showing the user name that opens a dropdown menu.
+ * The trigger design and accessibility are fixed; pass the name and menu items only.
+ */
+export function SidebarUserMenu({ name, tooltipLabel, children }) {
+    return (_jsx(DropdownMenu, { label: name, tooltipLabel: tooltipLabel, tooltipPlacement: "top", triggerProps: {
+            priority: 'tertiary',
+            size: 'small',
+            isDropdownTrigger: false,
+            // Styled via the `footerUserIdMenuItem` slot's `& .mfui-Sidebar__userTrigger` descendant selector.
+            className: 'mfui-Sidebar__userTrigger',
+        }, menuPopoverProps: { allowedPlacements: ['top-start'] }, children: children }));
+}

package/dist/src/Sidebar/hooks/useSidebarResize.d.ts

@@ -0,0 +1,28 @@
+import { type KeyboardEvent, type PointerEvent as ReactPointerEvent } from 'react';
+/**
+ * Hook to manage the resizable width of the Sidebar via pointer dragging and keyboard control.
+ *
+ * @param options.minWidth - Minimum width in pixels (default 180)
+ *
+ * @param options.maxWidth - Maximum width in pixels (default 280)
+ *
+ * @param options.defaultWidth - Seeds the initial width only (like React's `defaultValue`); not re-synced afterwards (default 200)
+ *
+ * @param options.onWidthChange - Called with the new width when a change is committed (pointer release or keyboard step)
+ *
+ * @returns Object containing the current width, resolved bounds, refs, and resize handlers
+ */
+export declare function useSidebarResize({ minWidth, maxWidth, defaultWidth, onWidthChange, }?: {
+    minWidth?: number;
+    maxWidth?: number;
+    defaultWidth?: number;
+    onWidthChange?: (width: number) => void;
+}): {
+    width: number;
+    minWidth: number;
+    maxWidth: number;
+    rootRef: import("react").RefObject<HTMLDivElement | null>;
+    isDragging: boolean;
+    handlePointerDown: (event: ReactPointerEvent<HTMLElement>) => void;
+    handleKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+};

package/dist/src/Sidebar/hooks/useSidebarResize.js

@@ -0,0 +1,111 @@
+import { useCallback, useEffect, useRef, useState, } from 'react';
+const DEFAULT_WIDTH = 200;
+const DEFAULT_MIN_WIDTH = 180;
+const DEFAULT_MAX_WIDTH = 280;
+const KEYBOARD_STEP_PX = 14;
+/**
+ * Hook to manage the resizable width of the Sidebar via pointer dragging and keyboard control.
+ *
+ * @param options.minWidth - Minimum width in pixels (default 180)
+ *
+ * @param options.maxWidth - Maximum width in pixels (default 280)
+ *
+ * @param options.defaultWidth - Seeds the initial width only (like React's `defaultValue`); not re-synced afterwards (default 200)
+ *
+ * @param options.onWidthChange - Called with the new width when a change is committed (pointer release or keyboard step)
+ *
+ * @returns Object containing the current width, resolved bounds, refs, and resize handlers
+ */
+export function useSidebarResize({ minWidth = DEFAULT_MIN_WIDTH, maxWidth = DEFAULT_MAX_WIDTH, defaultWidth, onWidthChange, } = {}) {
+    const rootRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const pointerIdRef = useRef(null);
+    const onWidthChangeRef = useRef(onWidthChange);
+    useEffect(() => {
+        onWidthChangeRef.current = onWidthChange;
+    });
+    const clamp = useCallback((value) => Math.min(Math.max(value, minWidth), maxWidth), [minWidth, maxWidth]);
+    // Validate the resolved bounds. When minWidth > maxWidth the clamp pins the width to maxWidth,
+    // which is counterintuitive, so surface it as a developer error.
+    useEffect(() => {
+        if (minWidth > maxWidth) {
+            console.error(`Sidebar: minWidth (${String(minWidth)}) must be less than or equal to maxWidth (${String(maxWidth)}).`);
+        }
+    }, [minWidth, maxWidth]);
+    // Clamp the default so the initial render stays within the user-supplied bounds.
+    // `defaultWidth` seeds the initial width only (like React's `defaultValue`); it is intentionally
+    // not re-synced on later changes, so the user's drag/keyboard adjustments are never overridden.
+    const initialWidth = clamp(defaultWidth ?? DEFAULT_WIDTH);
+    const widthRef = useRef(initialWidth);
+    const [width, setWidth] = useState(initialWidth);
+    const notify = useCallback((value) => {
+        onWidthChangeRef.current?.(value);
+    }, []);
+    const applyWidth = useCallback((newWidth) => {
+        widthRef.current = newWidth;
+        setWidth(newWidth);
+    }, []);
+    // --- Drag ---
+    const handlePointerDown = useCallback((event) => {
+        event.preventDefault();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        pointerIdRef.current = event.pointerId;
+        setIsDragging(true);
+    }, []);
+    const handlePointerMove = useCallback((event) => {
+        if (pointerIdRef.current !== event.pointerId)
+            return;
+        if (!rootRef.current)
+            return;
+        const rect = rootRef.current.getBoundingClientRect();
+        const newWidth = Math.min(Math.max(event.clientX - rect.left, minWidth), maxWidth);
+        applyWidth(newWidth);
+    }, [minWidth, maxWidth, applyWidth]);
+    const handlePointerUp = useCallback((event) => {
+        if (pointerIdRef.current !== event.pointerId)
+            return;
+        setIsDragging(false);
+        pointerIdRef.current = null;
+        notify(widthRef.current);
+    }, [notify]);
+    useEffect(() => {
+        if (!isDragging)
+            return;
+        document.addEventListener('pointermove', handlePointerMove);
+        document.addEventListener('pointerup', handlePointerUp);
+        document.addEventListener('pointercancel', handlePointerUp);
+        return () => {
+            document.removeEventListener('pointermove', handlePointerMove);
+            document.removeEventListener('pointerup', handlePointerUp);
+            document.removeEventListener('pointercancel', handlePointerUp);
+        };
+    }, [isDragging, handlePointerMove, handlePointerUp]);
+    // --- Keyboard ---
+    const handleKeyDown = useCallback((event) => {
+        let newWidth;
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                newWidth = Math.min(widthRef.current + KEYBOARD_STEP_PX, maxWidth);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                newWidth = Math.max(widthRef.current - KEYBOARD_STEP_PX, minWidth);
+                break;
+            case 'Home':
+                event.preventDefault();
+                newWidth = minWidth;
+                break;
+            case 'End':
+                event.preventDefault();
+                newWidth = maxWidth;
+                break;
+            // No default
+        }
+        if (newWidth !== undefined) {
+            applyWidth(newWidth);
+            notify(newWidth);
+        }
+    }, [minWidth, maxWidth, applyWidth, notify]);
+    return { width, minWidth, maxWidth, rootRef, isDragging, handlePointerDown, handleKeyDown };
+}

package/dist/src/Sidebar/index.d.ts

@@ -0,0 +1,6 @@
+export { Sidebar } from './Sidebar';
+export type { SidebarProps, SidebarNavigationItem, SidebarNavigationDivider, SidebarNavigationEntry, } from './Sidebar.types';
+export type { SidebarNavigationItemProps } from './SidebarNavigationItem';
+export type { SidebarServiceMenuProps } from './SidebarServiceMenu';
+export type { SidebarTenantMenuProps } from './SidebarTenantMenu';
+export type { SidebarUserMenuProps } from './SidebarUserMenu';

package/dist/src/Sidebar/index.js

@@ -0,0 +1 @@
+export { Sidebar } from './Sidebar';

package/dist/src/SplitView/SplitView.js

@@ -32,7 +32,7 @@ import { parseSizeToNumber } from './utils/parseSize';
  * />
  * ```
  */
-export const SplitView = forwardRef(({ className, leftPanelSlot, rightPanelSlot, isOpen, initialPanelSize, minPanelSize, maxPanelSize, targetPanel, initialRightPanelSize, minRightPanelSize, maxRightPanelSize, leftPanelProps, rightPanelProps, dividerProps, enableAutoUnmount = true, ...props }, ref) => {
+export const SplitView = forwardRef(({ className, leftPanelSlot, rightPanelSlot, isOpen, initialPanelSize, minPanelSize, maxPanelSize, targetPanel, initialRightPanelSize, minRightPanelSize, maxRightPanelSize, leftPanelProps, rightPanelProps, dividerProps, onWidthChange, enableAutoUnmount = true, ...props }, ref) => {
     // Normalize legacy props to the new API
     const resolvedTargetPanel = targetPanel ?? 'right';
     const resolvedInitialPanelSize = initialPanelSize ?? initialRightPanelSize;
@@ -135,6 +135,7 @@ export const SplitView = forwardRef(({ className, leftPanelSlot, rightPanelSlot,
         targetPanel: resolvedTargetPanel,
         minPanelSize: minPanelSizeNumber,
         maxPanelSize: maxPanelSizeNumber,
+        onWidthChange,
         setControlledPanelSize,
         setLastControlledPanelSize,
     });
@@ -146,6 +147,7 @@ export const SplitView = forwardRef(({ className, leftPanelSlot, rightPanelSlot,
         initialPanelSize: initialPanelSizeNumber,
         minPanelSize: minPanelSizeNumber,
         maxPanelSize: maxPanelSizeNumber,
+        onWidthChange,
         setControlledPanelSize,
         setLastControlledPanelSize,
     });

package/dist/src/SplitView/SplitView.types.d.ts

@@ -52,6 +52,12 @@ type SplitViewBaseProps = {
      * Props for the divider element.
      */
     dividerProps?: ComponentPropsWithoutRef<'div'>;
+    /**
+     * Called when the user commits a width change by releasing a drag or pressing an arrow key.
+     *
+     * Use this to persist the controlled panel width and restore it later via `initialPanelSize`.
+     */
+    onWidthChange?: (width: number) => void;
     /**
      * Enable auto unmounting of the controlled panel content when it is not displayed.
      * When true, the controlled panel content will return null instead of hiding via CSS.

package/dist/src/SplitView/hooks/useSplitViewDrag.d.ts

@@ -8,6 +8,7 @@ export declare function useSplitViewDrag(options: {
     targetPanel: 'left' | 'right';
     minPanelSize: number;
     maxPanelSize: number;
+    onWidthChange?: (width: number) => void;
     setControlledPanelSize: (size: number | undefined) => void;
     setLastControlledPanelSize: (size: number | undefined) => void;
 }): {

package/dist/src/SplitView/hooks/useSplitViewDrag.js

@@ -6,9 +6,14 @@ import { calculateConstrainedPanelSize } from '../utils/calculatePanelSize';
  * @param options - Drag hook options
  */
 export function useSplitViewDrag(options) {
-    const { containerRef, targetPanel, minPanelSize, maxPanelSize, setControlledPanelSize, setLastControlledPanelSize } = options;
+    const { containerRef, targetPanel, minPanelSize, maxPanelSize, onWidthChange, setControlledPanelSize, setLastControlledPanelSize, } = options;
     const [isDragging, setIsDragging] = useState(false);
     const pointerIdRef = useRef(null);
+    const latestSizeRef = useRef(undefined);
+    const onWidthChangeRef = useRef(onWidthChange);
+    useEffect(() => {
+        onWidthChangeRef.current = onWidthChange;
+    });
     /**
      * Handle pointer down on the divider.
      */
@@ -34,6 +39,7 @@ export function useSplitViewDrag(options) {
             ? event.clientX - containerRect.left // left panel size = pointer X from container left
             : containerSize - (event.clientX - containerRect.left); // right panel size (legacy behavior)
         const constrainedSize = calculateConstrainedPanelSize(rawControlledPanelSize, minPanelSize, maxPanelSize);
+        latestSizeRef.current = constrainedSize;
         setControlledPanelSize(constrainedSize);
         setLastControlledPanelSize(constrainedSize);
     }, [
@@ -50,8 +56,12 @@ export function useSplitViewDrag(options) {
      */
     const handlePointerUp = useCallback((event) => {
         if (pointerIdRef.current === event.pointerId) {
+            if (latestSizeRef.current !== undefined) {
+                onWidthChangeRef.current?.(latestSizeRef.current);
+            }
             setIsDragging(false);
             pointerIdRef.current = null;
+            latestSizeRef.current = undefined;
         }
     }, []);
     /**