@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/navigation/Pagination/Pagination.d.ts

@@ -0,0 +1,97 @@
+import { ComponentPropsWithRef, MouseEvent, ReactNode } from 'react';
+import { Size } from '../../../types/common';
+/** One slot in a pagination range: a page number (1-based) or a gap. */
+export type PaginationRangeItem = number | "ellipsis-start" | "ellipsis-end";
+export interface PaginationRangeOptions {
+    /** Current page, 1-based. Clamped to `1..pageCount`. */
+    page: number;
+    /** Total number of pages. `0` (or less) returns an empty range. */
+    pageCount: number;
+    /** Pages shown on each side of the current page. @default 1 */
+    siblingCount?: number;
+    /** Pages always shown at the start and at the end. @default 1 */
+    boundaryCount?: number;
+}
+/**
+ * Computes which page numbers and gaps to show. The output always has the
+ * same number of slots once there are enough pages
+ * (`2 * boundaryCount + 2 * siblingCount + 3`), so the control doesn't jump
+ * around as the page changes. A gap never hides just one page: that page is
+ * shown instead.
+ *
+ * @example getPaginationRange({ page: 6, pageCount: 20 })
+ * // [1, "ellipsis-start", 5, 6, 7, "ellipsis-end", 20]
+ */
+export declare function getPaginationRange({ page, pageCount, siblingCount, boundaryCount, }: PaginationRangeOptions): PaginationRangeItem[];
+/**
+ * Look of the non-current page buttons. The current page is always a solid
+ * primary pill with an indicator bar, so it stands out in every variant.
+ */
+export type PaginationVariant = "ghost" | "outline" | "soft";
+/** What a control does, for `getItemAriaLabel`. */
+export type PaginationItemType = "page" | "previous" | "next" | "first" | "last";
+export interface PaginationProps extends Omit<ComponentPropsWithRef<"nav">, "children"> {
+    /**
+     * Total number of pages. With a total item count, pass
+     * `Math.ceil(total / pageSize)`. `0` renders the Previous/Next controls,
+     * disabled.
+     */
+    pageCount: number;
+    /** Current page (1-based) when controlled. */
+    page?: number;
+    /** Initial page (1-based) when uncontrolled. @default 1 */
+    defaultPage?: number;
+    /** Called with the new page (1-based) when the user picks a page. */
+    onPageChange?: (page: number) => void;
+    /** Pages shown on each side of the current page. @default 1 */
+    siblingCount?: number;
+    /** Pages always shown at the start and end. @default 1 */
+    boundaryCount?: number;
+    /** Adds First and Last page buttons outside Previous and Next. @default false */
+    showFirstLast?: boolean;
+    /**
+     * Compact mode for small screens: Previous and Next around a
+     * "Page 3 of 12" status (announced politely when it changes). @default false
+     */
+    compact?: boolean;
+    /** Control size. @default "md" */
+    size?: Size;
+    /**
+     * Look of the non-current page buttons and the arrows. The current page is
+     * always a solid primary pill. @default "ghost"
+     */
+    variant?: PaginationVariant;
+    /** Disables every control. @default false */
+    disabled?: boolean;
+    /**
+     * Renders every control as a link (`<a href>`) instead of a button, for
+     * server-routed pagination. Return the URL for a page, e.g.
+     * `(page) => "?page=" + page`. Only called for enabled controls with a
+     * page in range; disabled ends render without `href`. A plain click
+     * follows the link (no state change or `onPageChange` before the page
+     * unloads); for a client-side router, see `onLinkClick`.
+     */
+    getHref?: (page: number) => string;
+    /**
+     * Link mode only: runs on a plain (unmodified) click of a page link. Call
+     * `event.preventDefault()` and navigate with your router; the page state
+     * then updates and `onPageChange` fires as for buttons.
+     */
+    onLinkClick?: (page: number, event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Accessible name for each control, for localization. Defaults to
+     * "Previous page", "Next page", "First page", "Last page",
+     * "Go to page 5", and "Page 5" for the current page. Keep the visible page
+     * number in the name.
+     */
+    getItemAriaLabel?: (type: PaginationItemType, page: number, current: boolean) => string;
+    /** Status text in compact mode. @default (page, count) => "Page 3 of 12" */
+    formatStatus?: (page: number, pageCount: number) => ReactNode;
+}
+/**
+ * Page navigation: a `<nav>` landmark with a list of pill page buttons,
+ * Previous/Next arrows, optional First/Last, and gaps for long ranges. The
+ * current page has `aria-current="page"`. Pass `getHref` to render links for
+ * server-routed pages, or `compact` for a small-screen "Page 3 of 12" layout.
+ */
+export declare const Pagination: ({ pageCount, page: pageProp, defaultPage, onPageChange, siblingCount, boundaryCount, showFirstLast, compact, size, variant, disabled, getHref, onLinkClick, getItemAriaLabel: getItemAriaLabelProp, formatStatus: formatStatusProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: PaginationProps) => import("react").JSX.Element;

package/dist/components/navigation/Pagination/Pagination.mjs

@@ -0,0 +1,133 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useMessages as t } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { cx as n } from "../../../utils/cx.mjs";
+import { Button as r, IconButton as i } from "../../primitives/Button/Button.mjs";
+import { ChevronLeftIcon as a, ChevronRightIcon as o, ChevronsLeftIcon as s, ChevronsRightIcon as c } from "../../primitives/Icon/icons.mjs";
+import l from "./Pagination.module.css.mjs";
+import { useEffect as u, useRef as d } from "react";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/navigation/Pagination/Pagination.tsx
+var h = (e, t) => e > t ? [] : Array.from({ length: t - e + 1 }, (t, n) => e + n), g = (e, t) => Math.max(0, Math.floor(Number.isFinite(e) ? e : t));
+function _({ page: e, pageCount: t, siblingCount: n = 1, boundaryCount: r = 1 }) {
+	let i = g(t, 0);
+	if (i === 0) return [];
+	let a = g(n, 1), o = g(r, 1), s = Math.min(Math.max(1, Math.floor(e) || 1), i);
+	if (i <= 2 * o + 2 * a + 3) return h(1, i);
+	let c = h(1, Math.min(o, i)), l = h(Math.max(i - o + 1, o + 1), i), u = Math.max(Math.min(s - a, i - o - a * 2 - 1), o + 2), d = Math.min(Math.max(s + a, o + a * 2 + 2), i - o - 1), f = [...c];
+	return u > o + 2 ? f.push("ellipsis-start") : o + 1 < i - o && f.push(o + 1), f.push(...h(u, d)), d < i - o - 1 ? f.push("ellipsis-end") : i - o > o && f.push(i - o), f.push(...l), f;
+}
+var v = {
+	sm: l.sm,
+	md: l.md,
+	lg: l.lg
+}, y = (e) => (t, n, r) => {
+	switch (t) {
+		case "previous": return e.previous;
+		case "next": return e.next;
+		case "first": return e.first;
+		case "last": return e.last;
+		default: return r ? e.currentPage(n) : e.goToPage(n);
+	}
+}, ee = (e) => (t, n) => /* @__PURE__ */ p(f, { children: e.split(/(\{page\}|\{total\})/).map((e, r) => e === "{page}" ? /* @__PURE__ */ p("strong", {
+	className: l.statusNumber,
+	children: t
+}, r) : e === "{total}" ? /* @__PURE__ */ p("strong", {
+	className: l.statusNumber,
+	children: n
+}, r) : e) }), b = ({ pageCount: f, page: h, defaultPage: b = 1, onPageChange: x, siblingCount: S = 1, boundaryCount: C = 1, showFirstLast: w = !1, compact: T = !1, size: E = "md", variant: D = "ghost", disabled: O = !1, getHref: k, onLinkClick: A, getItemAriaLabel: j, formatStatus: M, className: N, "aria-label": P, "aria-labelledby": F, ...I }) => {
+	let L = t(), R = j ?? y(L.pagination), z = M ?? ee(L.pagination.status), B = g(f, 0), [V, H] = e({
+		value: h,
+		defaultValue: b,
+		onChange: x
+	}), U = B === 0 ? 1 : Math.min(Math.max(1, Math.floor(V) || 1), B), W = d(null), G = d(null);
+	u(() => {
+		let e = G.current;
+		if (!e) return;
+		G.current = null;
+		let t = W.current;
+		(t?.querySelector("[aria-current=\"page\"]") ?? t?.querySelector(`[data-pagination-item="${e}"]:not([disabled])`) ?? t?.querySelector("button:not([disabled]), a[href]"))?.focus();
+	}, [U]);
+	let K = U <= 1, q = U >= B, J = (e, t) => {
+		let n = Math.min(Math.max(1, e), Math.max(1, B));
+		n !== U && (t && (n === 1 || n === B) && (G.current = n === 1 ? "next" : "previous", requestAnimationFrame(() => {
+			G.current = null;
+		})), H(n));
+	}, Y = (e, t, n = !1) => {
+		let r = Math.min(Math.max(1, e), Math.max(1, B));
+		return {
+			...k && !n && B > 0 ? { href: k(r) } : {},
+			onClick: (e) => {
+				if (!k) {
+					J(r, t);
+					return;
+				}
+				e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || (A?.(r, e), e.defaultPrevented && J(r, t));
+			}
+		};
+	}, X = (e, t, n, r) => /* @__PURE__ */ p("li", {
+		className: l.item,
+		children: /* @__PURE__ */ p(i, {
+			...Y(t, !0, O || n),
+			variant: D,
+			tone: "neutral",
+			size: E,
+			disabled: O || n,
+			"aria-label": R(e, t, !1),
+			"data-pagination-item": e,
+			children: r
+		})
+	}, e), Z = [w && X("first", 1, K, /* @__PURE__ */ p(s, {})), X("previous", U - 1, K, /* @__PURE__ */ p(a, {}))], Q = [X("next", U + 1, q, /* @__PURE__ */ p(o, {})), w && X("last", B, q, /* @__PURE__ */ p(c, {}))], $;
+	return $ = T ? /* @__PURE__ */ p("li", {
+		className: n(l.item, l.statusItem),
+		children: /* @__PURE__ */ p("span", {
+			className: l.status,
+			"aria-live": "polite",
+			"aria-atomic": "true",
+			"aria-disabled": O || void 0,
+			children: B === 0 ? z(0, 0) : z(U, B)
+		})
+	}, "status") : _({
+		page: U,
+		pageCount: B,
+		siblingCount: S,
+		boundaryCount: C
+	}).map((e) => {
+		if (typeof e != "number") return /* @__PURE__ */ p("li", {
+			className: n(l.item, l.ellipsis),
+			"aria-hidden": "true",
+			children: "…"
+		}, e);
+		let t = e === U;
+		return /* @__PURE__ */ p("li", {
+			className: n(l.item, t && l.current),
+			children: /* @__PURE__ */ p(r, {
+				...Y(e, !1, O),
+				variant: t ? "solid" : D,
+				tone: t ? "primary" : "neutral",
+				size: E,
+				compact: !0,
+				disabled: O,
+				"aria-current": t ? "page" : void 0,
+				"aria-label": R("page", e, t),
+				"data-pagination-item": "page",
+				children: e
+			})
+		}, `page-${e}`);
+	}), /* @__PURE__ */ p("nav", {
+		...I,
+		"aria-label": F ? P : P ?? L.pagination.nav,
+		"aria-labelledby": F,
+		className: n(l.root, v[E], T && l.compact, O && l.disabled, N),
+		children: /* @__PURE__ */ m("ul", {
+			ref: W,
+			className: l.list,
+			children: [
+				Z,
+				$,
+				Q
+			]
+		})
+	});
+};
+//#endregion
+export { b as Pagination, _ as getPaginationRange };

package/dist/components/navigation/Pagination/Pagination.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_wi9ss_17`,t=`_sm_wi9ss_35`,n=`_md_wi9ss_47`,r=`_lg_wi9ss_59`,i=`_list_wi9ss_71`,a=`_item_wi9ss_93`,o=`_current_wi9ss_109`,s=`_ellipsis_wi9ss_153`,c=`_statusItem_wi9ss_179`,l=`_status_wi9ss_179`,u=`_statusNumber_wi9ss_207`,d=`_compact_wi9ss_221`,f=`_disabled_wi9ss_233`,p={root:e,sm:t,md:n,lg:r,list:i,item:a,current:o,"indicator-in":`_indicator-in_wi9ss_1`,ellipsis:s,statusItem:c,status:l,statusNumber:u,compact:d,disabled:f};exports.compact=d,exports.current=o,exports.default=p,exports.disabled=f,exports.ellipsis=s,exports.item=a,exports.lg=r,exports.list=i,exports.md=n,exports.root=e,exports.sm=t,exports.status=l,exports.statusItem=c,exports.statusNumber=u;

package/dist/components/navigation/Pagination/Pagination.module.css.mjs

@@ -0,0 +1,19 @@
+//#region src/components/navigation/Pagination/Pagination.module.css
+var e = "_root_wi9ss_17", t = "_sm_wi9ss_35", n = "_md_wi9ss_47", r = "_lg_wi9ss_59", i = "_list_wi9ss_71", a = "_item_wi9ss_93", o = "_current_wi9ss_109", s = "_ellipsis_wi9ss_153", c = "_statusItem_wi9ss_179", l = "_status_wi9ss_179", u = "_statusNumber_wi9ss_207", d = "_compact_wi9ss_221", f = "_disabled_wi9ss_233", p = {
+	root: e,
+	sm: t,
+	md: n,
+	lg: r,
+	list: i,
+	item: a,
+	current: o,
+	"indicator-in": "_indicator-in_wi9ss_1",
+	ellipsis: s,
+	statusItem: c,
+	status: l,
+	statusNumber: u,
+	compact: d,
+	disabled: f
+};
+//#endregion
+export { d as compact, o as current, p as default, f as disabled, s as ellipsis, a as item, r as lg, i as list, n as md, e as root, t as sm, l as status, c as statusItem, u as statusNumber };

package/dist/components/navigation/Pagination/index.d.ts

@@ -0,0 +1 @@
+export * from './Pagination';

package/dist/components/navigation/Sidebar/Sidebar.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useFocusTrap.cjs.js"),n=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),r=require("../../../hooks/useMergedRef.cjs.js"),i=require("../../../utils/cx.cjs.js"),a=require("../../overlays/Drawer/Drawer.cjs.js"),o=require("./SidebarContext.cjs.js"),s=require("./Sidebar.module.css.cjs.js"),c=require("./SidebarParts.cjs.js");let l=require("react"),u=require("react/jsx-runtime");var d={sm:s.default.sm,md:s.default.md,lg:s.default.lg};function f({memory:e}){let n=(0,l.useRef)(null);return(0,l.useLayoutEffect)(()=>{let r=n.current?.parentElement;return()=>{let n=document.activeElement;r&&n instanceof HTMLElement&&r.contains(n)&&(e.current=t.getFocusable(r).indexOf(n))}},[e]),(0,u.jsx)(`span`,{ref:n,hidden:!0})}var p=({children:c,mode:p=`static`,collapsed:m,defaultCollapsed:h=!1,onCollapsedChange:g,open:_,defaultOpen:v=!1,onOpenChange:y,closeOnNavigate:b=!0,overlayLabel:x,size:S=`md`,tooltipPlacement:C=`end`,id:w,className:T,"aria-label":E,"aria-labelledby":D,ref:O,...k})=>{let A=(0,l.useRef)(null),j=r.useMergedRef(A,O),[M]=(0,l.useState)(()=>new Map),N=(0,l.useRef)(null);(0,l.useEffect)(()=>{let e=N.current;N.current=null;let n=A.current;if(e===null||e<0||!n)return;let r=t.getFocusable(n);(r[e]??r[0])?.focus()},[p]);let P=n.useMessages(),F=(0,l.useId)(),I=w??`sidebar-${F}`,L=D?void 0:E??P.sidebar.nav,[R,z]=e.useControllableState({value:m,defaultValue:h,onChange:g}),[B,V]=e.useControllableState({value:_,defaultValue:v,onChange:y}),H=p===`overlay`,U=!H&&R,W=H&&B,G=(0,l.useCallback)(e=>z(e),[z]),K=(0,l.useCallback)(e=>V(e),[V]),q=(0,l.useCallback)(()=>{H&&b&&V(!1)},[H,b,V]),J=(0,l.useMemo)(()=>({mode:p,collapsed:U,setCollapsed:G,open:W,setOpen:K,size:S,navId:I,tooltipPlacement:C,onNavigate:q,groupOpen:M}),[p,U,G,W,K,S,I,C,q,M]),Y=(0,u.jsxs)(`nav`,{...k,ref:j,id:I,"aria-label":L,"aria-labelledby":D,"data-mode":p,"data-collapsed":U||void 0,className:i.cx(s.default.root,d[S],H?s.default.overlay:s.default.static,U&&s.default.collapsed,T),children:[(0,u.jsx)(f,{memory:N}),c]});return(0,u.jsx)(o.SidebarContext.Provider,{value:J,children:H?(0,u.jsx)(a.Drawer,{open:W,onOpenChange:K,side:`start`,size:`sm`,children:(0,u.jsx)(a.Drawer.Content,{"aria-label":x??E??P.sidebar.nav,children:Y})}):Y})};p.displayName=`Sidebar`;var m=Object.assign(p,{Header:c.SidebarHeader,Body:c.SidebarBody,Section:c.SidebarSection,Item:c.SidebarItem,Group:c.SidebarGroup,Footer:c.SidebarFooter,Toggle:c.SidebarToggle});exports.Sidebar=m,exports.SidebarBody=c.SidebarBody,exports.SidebarFooter=c.SidebarFooter,exports.SidebarGroup=c.SidebarGroup,exports.SidebarHeader=c.SidebarHeader,exports.SidebarItem=c.SidebarItem,exports.SidebarSection=c.SidebarSection,exports.SidebarToggle=c.SidebarToggle,exports.useSidebar=o.useSidebar;

package/dist/components/navigation/Sidebar/Sidebar.d.ts

@@ -0,0 +1,90 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { Size } from '../../../types/common';
+import { TooltipPlacement } from '../../overlays/Tooltip';
+import { useSidebar, SidebarMode } from './SidebarContext';
+import { SidebarBody, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarSection, SidebarToggle } from './SidebarParts';
+export { useSidebar };
+export type { SidebarMode, SidebarState } from './SidebarContext';
+export type { SidebarBadgeValue, SidebarBodyProps, SidebarFooterProps, SidebarGroupProps, SidebarHeaderProps, SidebarHeadingLevel, SidebarItemOwnProps, SidebarItemProps, SidebarSectionProps, SidebarToggleProps, } from './SidebarParts';
+export { SidebarBody, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, SidebarSection, SidebarToggle, };
+export interface SidebarProps extends ComponentPropsWithRef<"nav"> {
+    /** `Sidebar.Header`, `Sidebar.Body` (with sections), and `Sidebar.Footer`. */
+    children?: ReactNode;
+    /**
+     * Accessible name of the navigation landmark. Use a different name for each
+     * `nav` on the page. Ignored when `aria-labelledby` is set.
+     * @default "Main navigation"
+     */
+    "aria-label"?: string;
+    /**
+     * `static` (default): an in-flow column that can collapse to an icon rail.
+     * `overlay`: the same content in a modal `Drawer` from the inline-start
+     * edge, opened with `open` / `onOpenChange`. Switch modes responsively by
+     * driving this prop from a media query in your app shell (for example
+     * `mode={isWide ? "static" : "overlay"}`); keep the same children for both.
+     * @default "static"
+     */
+    mode?: SidebarMode;
+    /** Controlled collapsed (icon rail) state. Static mode only. */
+    collapsed?: boolean;
+    /** Initial collapsed state when uncontrolled. @default false */
+    defaultCollapsed?: boolean;
+    /** Called with the next collapsed state (from `Sidebar.Toggle`, or a rail group press). */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Overlay mode: controlled open state of the drawer. */
+    open?: boolean;
+    /** Overlay mode: initial open state when uncontrolled. @default false */
+    defaultOpen?: boolean;
+    /** Overlay mode: called with the next open state (close button, Escape, backdrop, or navigation). */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Overlay mode: close the drawer when a `Sidebar.Item` is activated, including
+     * router links whose `onClick` calls `preventDefault()`. Group buttons never close it.
+     * @default true
+     */
+    closeOnNavigate?: boolean;
+    /** Overlay mode: the drawer dialog's accessible name. Defaults to the sidebar's `aria-label`. */
+    overlayLabel?: string;
+    /** Item height and type size (`--control-height-sm|md|lg`). Also sets the rail width. @default "md" */
+    size?: Size;
+    /**
+     * Side for rail tooltips. The default `"end"` follows the text direction
+     * (right in left-to-right layouts, left in right-to-left ones); use
+     * `"start"` for a sidebar on the inline-end side of the page. @default "end"
+     */
+    tooltipPlacement?: TooltipPlacement;
+}
+/** App side navigation. See `SidebarProps` and the parts (`Sidebar.Header`, `.Body`, `.Section`, `.Item`, `.Group`, `.Footer`, `.Toggle`). */
+export declare const Sidebar: {
+    ({ children, mode, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, open: openProp, defaultOpen, onOpenChange, closeOnNavigate, overlayLabel, size, tooltipPlacement, id: idProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...rest }: SidebarProps): import("react").JSX.Element;
+    displayName: string;
+} & {
+    Header: {
+        ({ className, children, ...rest }: import('./SidebarParts').SidebarHeaderProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ className, children, ...rest }: import('./SidebarParts').SidebarBodyProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Section: {
+        ({ heading, headingLevel, className, children, ...rest }: import('./SidebarParts').SidebarSectionProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        (props: import('./SidebarParts').SidebarItemProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Group: {
+        ({ label, icon, children, open: openProp, defaultOpen, onOpenChange, active, badge, badgeLabel, badgeTone, disabled, value, className, ...rest }: import('./SidebarParts').SidebarGroupProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ className, children, ...rest }: import('./SidebarParts').SidebarFooterProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    Toggle: {
+        ({ collapseLabel: collapseLabelProp, expandLabel: expandLabelProp, variant, tone, size, className, children, onClick, ...rest }: import('./SidebarParts').SidebarToggleProps): import("react").JSX.Element | null;
+        displayName: string;
+    };
+};

package/dist/components/navigation/Sidebar/Sidebar.mjs

@@ -0,0 +1,113 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { getFocusable as t } from "../../../hooks/useFocusTrap.mjs";
+import { useMessages as n } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { useMergedRef as r } from "../../../hooks/useMergedRef.mjs";
+import { cx as i } from "../../../utils/cx.mjs";
+import { Drawer as a } from "../../overlays/Drawer/Drawer.mjs";
+import { SidebarContext as o, useSidebar as s } from "./SidebarContext.mjs";
+import c from "./Sidebar.module.css.mjs";
+import { SidebarBody as l, SidebarFooter as u, SidebarGroup as d, SidebarHeader as f, SidebarItem as p, SidebarSection as m, SidebarToggle as h } from "./SidebarParts.mjs";
+import { useCallback as g, useEffect as _, useId as v, useLayoutEffect as y, useMemo as b, useRef as x, useState as S } from "react";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
+//#region src/components/navigation/Sidebar/Sidebar.tsx
+var ee = {
+	sm: c.sm,
+	md: c.md,
+	lg: c.lg
+};
+function T({ memory: e }) {
+	let n = x(null);
+	return y(() => {
+		let r = n.current?.parentElement;
+		return () => {
+			let n = document.activeElement;
+			r && n instanceof HTMLElement && r.contains(n) && (e.current = t(r).indexOf(n));
+		};
+	}, [e]), /* @__PURE__ */ C("span", {
+		ref: n,
+		hidden: !0
+	});
+}
+var E = ({ children: s, mode: l = "static", collapsed: u, defaultCollapsed: d = !1, onCollapsedChange: f, open: p, defaultOpen: m = !1, onOpenChange: h, closeOnNavigate: y = !0, overlayLabel: E, size: D = "md", tooltipPlacement: O = "end", id: k, className: A, "aria-label": j, "aria-labelledby": M, ref: N, ...P }) => {
+	let F = x(null), I = r(F, N), [L] = S(() => /* @__PURE__ */ new Map()), R = x(null);
+	_(() => {
+		let e = R.current;
+		R.current = null;
+		let n = F.current;
+		if (e === null || e < 0 || !n) return;
+		let r = t(n);
+		(r[e] ?? r[0])?.focus();
+	}, [l]);
+	let z = n(), B = v(), V = k ?? `sidebar-${B}`, H = M ? void 0 : j ?? z.sidebar.nav, [U, W] = e({
+		value: u,
+		defaultValue: d,
+		onChange: f
+	}), [G, K] = e({
+		value: p,
+		defaultValue: m,
+		onChange: h
+	}), q = l === "overlay", J = !q && U, Y = q && G, X = g((e) => W(e), [W]), Z = g((e) => K(e), [K]), Q = g(() => {
+		q && y && K(!1);
+	}, [
+		q,
+		y,
+		K
+	]), te = b(() => ({
+		mode: l,
+		collapsed: J,
+		setCollapsed: X,
+		open: Y,
+		setOpen: Z,
+		size: D,
+		navId: V,
+		tooltipPlacement: O,
+		onNavigate: Q,
+		groupOpen: L
+	}), [
+		l,
+		J,
+		X,
+		Y,
+		Z,
+		D,
+		V,
+		O,
+		Q,
+		L
+	]), $ = /* @__PURE__ */ w("nav", {
+		...P,
+		ref: I,
+		id: V,
+		"aria-label": H,
+		"aria-labelledby": M,
+		"data-mode": l,
+		"data-collapsed": J || void 0,
+		className: i(c.root, ee[D], q ? c.overlay : c.static, J && c.collapsed, A),
+		children: [/* @__PURE__ */ C(T, { memory: R }), s]
+	});
+	return /* @__PURE__ */ C(o.Provider, {
+		value: te,
+		children: q ? /* @__PURE__ */ C(a, {
+			open: Y,
+			onOpenChange: Z,
+			side: "start",
+			size: "sm",
+			children: /* @__PURE__ */ C(a.Content, {
+				"aria-label": E ?? j ?? z.sidebar.nav,
+				children: $
+			})
+		}) : $
+	});
+};
+E.displayName = "Sidebar";
+var D = Object.assign(E, {
+	Header: f,
+	Body: l,
+	Section: m,
+	Item: p,
+	Group: d,
+	Footer: u,
+	Toggle: h
+});
+//#endregion
+export { D as Sidebar, l as SidebarBody, u as SidebarFooter, d as SidebarGroup, f as SidebarHeader, p as SidebarItem, m as SidebarSection, h as SidebarToggle, s as useSidebar };

package/dist/components/navigation/Sidebar/Sidebar.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_1yk86_19`,t=`_sm_1yk86_73`,n=`_md_1yk86_93`,r=`_lg_1yk86_101`,i=`_collapsed_1yk86_141`,a=`_overlay_1yk86_151`,o=`_header_1yk86_169`,s=`_body_1yk86_209`,c=`_footer_1yk86_235`,l=`_list_1yk86_255`,u=`_section_1yk86_271`,d=`_sectionHeading_1yk86_281`,f=`_subList_1yk86_353`,p=`_listItem_1yk86_377`,m=`_item_1yk86_397`,h=`_disabled_1yk86_467`,g=`_icon_1yk86_485`,_=`_label_1yk86_515`,v=`_badge_1yk86_533`,y=`_chevron_1yk86_545`,b=`_groupTrigger_1yk86_563`,x=`_railDot_1yk86_573`,S=`_active_1yk86_583`,C=`_groupContent_1yk86_711`,w=`_groupClip_1yk86_745`,T=`_nested_1yk86_771`,E=`_toggle_1yk86_805`,D=`_toggleIcon_1yk86_823`,O={root:e,sm:t,md:n,lg:r,static:`_static_1yk86_123`,collapsed:i,overlay:a,header:o,body:s,footer:c,list:l,section:u,sectionHeading:d,subList:f,listItem:p,item:m,disabled:h,icon:g,label:_,badge:v,chevron:y,groupTrigger:b,railDot:x,active:S,groupContent:C,groupClip:w,nested:T,toggle:E,toggleIcon:D};exports.active=S,exports.badge=v,exports.body=s,exports.chevron=y,exports.collapsed=i,exports.default=O,exports.disabled=h,exports.footer=c,exports.groupClip=w,exports.groupContent=C,exports.groupTrigger=b,exports.header=o,exports.icon=g,exports.item=m,exports.label=_,exports.lg=r,exports.list=l,exports.listItem=p,exports.md=n,exports.nested=T,exports.overlay=a,exports.railDot=x,exports.root=e,exports.section=u,exports.sectionHeading=d,exports.sm=t,exports.subList=f,exports.toggle=E,exports.toggleIcon=D;

package/dist/components/navigation/Sidebar/Sidebar.module.css.mjs

@@ -0,0 +1,34 @@
+//#region src/components/navigation/Sidebar/Sidebar.module.css
+var e = "_root_1yk86_19", t = "_sm_1yk86_73", n = "_md_1yk86_93", r = "_lg_1yk86_101", i = "_collapsed_1yk86_141", a = "_overlay_1yk86_151", o = "_header_1yk86_169", s = "_body_1yk86_209", c = "_footer_1yk86_235", l = "_list_1yk86_255", u = "_section_1yk86_271", d = "_sectionHeading_1yk86_281", f = "_subList_1yk86_353", p = "_listItem_1yk86_377", m = "_item_1yk86_397", h = "_disabled_1yk86_467", g = "_icon_1yk86_485", _ = "_label_1yk86_515", v = "_badge_1yk86_533", y = "_chevron_1yk86_545", b = "_groupTrigger_1yk86_563", x = "_railDot_1yk86_573", S = "_active_1yk86_583", C = "_groupContent_1yk86_711", w = "_groupClip_1yk86_745", T = "_nested_1yk86_771", E = "_toggle_1yk86_805", D = "_toggleIcon_1yk86_823", O = {
+	root: e,
+	sm: t,
+	md: n,
+	lg: r,
+	static: "_static_1yk86_123",
+	collapsed: i,
+	overlay: a,
+	header: o,
+	body: s,
+	footer: c,
+	list: l,
+	section: u,
+	sectionHeading: d,
+	subList: f,
+	listItem: p,
+	item: m,
+	disabled: h,
+	icon: g,
+	label: _,
+	badge: v,
+	chevron: y,
+	groupTrigger: b,
+	railDot: x,
+	active: S,
+	groupContent: C,
+	groupClip: w,
+	nested: T,
+	toggle: E,
+	toggleIcon: D
+};
+//#endregion
+export { S as active, v as badge, s as body, y as chevron, i as collapsed, O as default, h as disabled, c as footer, w as groupClip, C as groupContent, b as groupTrigger, o as header, g as icon, m as item, _ as label, r as lg, l as list, p as listItem, n as md, T as nested, a as overlay, x as railDot, e as root, u as section, d as sectionHeading, t as sm, f as subList, E as toggle, D as toggleIcon };

package/dist/components/navigation/Sidebar/Sidebar.storyHelpers.d.ts

@@ -0,0 +1,27 @@
+import { CSSProperties, ReactNode } from 'react';
+export { useMediaQuery } from '../../../hooks/useMediaQuery';
+export declare const Label: ({ children }: {
+    children: ReactNode;
+}) => import("react").JSX.Element;
+/** A fixed-height app frame: sidebar on the start side, content filling the rest. */
+export declare const Frame: ({ children, content, style, }: {
+    children: ReactNode;
+    content?: ReactNode;
+    style?: CSSProperties;
+}) => import("react").JSX.Element;
+/** Brand mark for the header. Hides the name while the sidebar is a rail. */
+export declare const Brand: () => import("react").JSX.Element;
+export interface ClubNavProps {
+    /** Which item is the current page. */
+    active?: string;
+    /** Whether the Playbook group starts open. */
+    playbookOpen?: boolean;
+    /** Called when an item is chosen. Clicks are handled in place, like a client-side router. */
+    onSelect?: (id: string) => void;
+}
+/** The standard club navigation used by most stories. */
+export declare const ClubNav: ({ active, playbookOpen, onSelect }: ClubNavProps) => import("react").JSX.Element;
+/** Placeholder page content for the app shell. */
+export declare const PageContent: ({ title }: {
+    title: string;
+}) => import("react").JSX.Element;

package/dist/components/navigation/Sidebar/SidebarContext.cjs.js

@@ -0,0 +1 @@
+let e=require("react");var t=(0,e.createContext)(null);function n(n){let r=(0,e.useContext)(t);if(!r)throw Error(`${n} must be used inside <Sidebar>.`);return r}function r(){let{mode:e,collapsed:t,setCollapsed:r,open:i,setOpen:a}=n(`useSidebar`);return{mode:e,collapsed:t,setCollapsed:r,open:i,setOpen:a}}var i=(0,e.createContext)(0);exports.SidebarContext=t,exports.SidebarDepthContext=i,exports.useSidebar=r,exports.useSidebarContext=n;

package/dist/components/navigation/Sidebar/SidebarContext.d.ts

@@ -0,0 +1,45 @@
+import { Size } from '../../../types/common';
+import { TooltipPlacement } from '../../overlays/Tooltip';
+/**
+ * How the sidebar is presented.
+ * - `static`: an in-flow column next to the page content. Can collapse to an icon rail.
+ * - `overlay`: off-canvas. The same content renders inside a modal `Drawer`
+ *   that slides in from the inline-start edge; drive it with `open` / `onOpenChange`.
+ */
+export type SidebarMode = "static" | "overlay";
+/** State shared by every part of a `Sidebar`. Read it with `useSidebar()`. */
+export interface SidebarState {
+    /** Presentation mode. */
+    mode: SidebarMode;
+    /** True when the sidebar is showing as an icon rail (static mode and collapsed). */
+    collapsed: boolean;
+    /** Collapses or expands the rail. Has no visible effect in overlay mode. */
+    setCollapsed: (collapsed: boolean) => void;
+    /** Overlay mode: whether the drawer is open. Always `false` in static mode. */
+    open: boolean;
+    /** Overlay mode: opens or closes the drawer. */
+    setOpen: (open: boolean) => void;
+}
+/** @internal */
+export interface SidebarContextValue extends SidebarState {
+    size: Size;
+    navId: string;
+    tooltipPlacement: TooltipPlacement;
+    /** Called after an item is activated (closes the overlay drawer when `closeOnNavigate`). */
+    onNavigate: () => void;
+    /**
+     * Open state of uncontrolled groups, by group key. Kept on the root so it
+     * survives the nav remounting when `mode` switches.
+     */
+    groupOpen: Map<string, boolean>;
+}
+export declare const SidebarContext: import('react').Context<SidebarContextValue | null>;
+/** @internal */
+export declare function useSidebarContext(part: string): SidebarContextValue;
+/**
+ * Reads the nearest `Sidebar`'s state, e.g. to hide a workspace name in the
+ * header while the sidebar is a collapsed rail. Must be called inside `Sidebar`.
+ */
+export declare function useSidebar(): SidebarState;
+/** @internal Nesting depth: 0 for top-level items, 1+ inside a `Sidebar.Group`. */
+export declare const SidebarDepthContext: import('react').Context<number>;

package/dist/components/navigation/Sidebar/SidebarContext.mjs

@@ -0,0 +1,21 @@
+import { createContext as e, useContext as t } from "react";
+//#region src/components/navigation/Sidebar/SidebarContext.ts
+var n = e(null);
+function r(e) {
+	let r = t(n);
+	if (!r) throw Error(`${e} must be used inside <Sidebar>.`);
+	return r;
+}
+function i() {
+	let { mode: e, collapsed: t, setCollapsed: n, open: i, setOpen: a } = r("useSidebar");
+	return {
+		mode: e,
+		collapsed: t,
+		setCollapsed: n,
+		open: i,
+		setOpen: a
+	};
+}
+var a = e(0);
+//#endregion
+export { n as SidebarContext, a as SidebarDepthContext, i as useSidebar, r as useSidebarContext };

package/dist/components/navigation/Sidebar/SidebarParts.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../../primitives/Button/Button.cjs.js"),i=require("../../primitives/Icon/icons.cjs.js"),a=require("../../data-display/Badge/Badge.cjs.js"),o=require("../../overlays/Tooltip/Tooltip.cjs.js"),s=require("./SidebarContext.cjs.js"),c=require("./Sidebar.module.css.cjs.js");let l=require("react"),u=require("react/jsx-runtime");var d=e=>e!==void 0&&e!==``&&e!==0;function f({badge:e,badgeLabel:t,badgeTone:n}){return d(e)?typeof e==`number`?(0,u.jsx)(a.Badge,{variant:`solid`,tone:n,size:`sm`,count:e,label:t}):(0,u.jsx)(a.Badge,{variant:`solid`,tone:n,size:`sm`,label:t,children:e}):null}function p({icon:e,label:t,badge:n,trailing:r}){return(0,u.jsxs)(u.Fragment,{children:[e!=null&&(0,u.jsx)(`span`,{className:c.default.icon,"aria-hidden":`true`,children:e}),(0,u.jsx)(`span`,{className:c.default.label,children:t}),n!=null&&(0,u.jsxs)(u.Fragment,{children:[` `,(0,u.jsx)(`span`,{className:c.default.badge,children:n}),(0,u.jsx)(`span`,{className:c.default.railDot,"aria-hidden":`true`})]}),r]})}function m(e,{badge:t,badgeLabel:n}){let r=d(t)?n||(typeof t==`number`?a.formatBadgeCount(t):t):null;return typeof e==`string`||typeof e==`number`?r==null?String(e):`${e} ${r}`:r==null?e:(0,u.jsxs)(u.Fragment,{children:[e,` `,r]})}var h=({className:e,children:t,...r})=>(0,u.jsx)(`div`,{...r,className:n.cx(c.default.header,e),children:t});h.displayName=`Sidebar.Header`;var g=({className:e,children:t,...r})=>(0,u.jsx)(`div`,{...r,className:n.cx(c.default.body,e),children:t});g.displayName=`Sidebar.Body`;var _=({className:e,children:t,...r})=>(0,u.jsx)(`div`,{...r,className:n.cx(c.default.footer,e),children:t});_.displayName=`Sidebar.Footer`;var v=({heading:e,headingLevel:t,className:r,children:i,...a})=>{let o=(0,l.useId)(),s=e!=null&&e!==!1&&e!==``,d=t?`h${t}`:`div`;return(0,u.jsxs)(`div`,{role:s?`group`:void 0,"aria-labelledby":s?o:void 0,...a,className:n.cx(c.default.section,r),children:[s&&(0,u.jsx)(d,{id:o,className:c.default.sectionHeading,children:e}),(0,u.jsx)(`ul`,{className:c.default.list,children:i})]})};v.displayName=`Sidebar.Section`;var y=e=>{let{children:t,icon:r,active:i=!1,badge:a,badgeLabel:d,badgeTone:h=`accent`,disabled:g=!1,className:_,href:v,role:y,onClick:b,"aria-current":x,...S}=e,{collapsed:C,tooltipPlacement:w,onNavigate:T}=s.useSidebarContext(`Sidebar.Item`),E=(0,l.useContext)(s.SidebarDepthContext),D=C&&E===0,O=f({badge:a,badgeLabel:d,badgeTone:h}),k=e=>{if(g){e.preventDefault();return}b?.(e),T()},A={...S,className:n.cx(c.default.item,E>0&&c.default.nested,i&&c.default.active,g&&c.default.disabled,_),"aria-current":i?x??`page`:x,"data-active":i||void 0,onClick:k},j=(0,u.jsx)(p,{icon:r,label:t,badge:O}),M=v===void 0?(0,u.jsx)(`button`,{type:`button`,...A,ref:S.ref,role:y,disabled:g,children:j}):(0,u.jsx)(`a`,{...A,ref:S.ref,href:g?void 0:v,role:g?`link`:y,"aria-disabled":g||void 0,children:j});return(0,u.jsx)(`li`,{className:c.default.listItem,children:(0,u.jsx)(o.Tooltip,{content:m(t,{badge:a,badgeLabel:d,badgeTone:h}),placement:w,relationship:`label`,disabled:!D,children:M})})};y.displayName=`Sidebar.Item`;var b=({label:t,icon:r,children:a,open:d,defaultOpen:h=!1,onOpenChange:g,active:_=!1,badge:v,badgeLabel:y,badgeTone:b=`accent`,disabled:x=!1,value:S,className:C,...w})=>{let{collapsed:T,setCollapsed:E,tooltipPlacement:D,groupOpen:O}=s.useSidebarContext(`Sidebar.Group`),k=(0,l.useContext)(s.SidebarDepthContext),A=T&&k===0,j=S??(typeof t==`string`?t:void 0),[M,N]=e.useControllableState({value:d,defaultValue:(j===void 0?void 0:O.get(j))??h,onChange:e=>{j!==void 0&&O.set(j,e),g?.(e)}}),P=(0,l.useId)(),F=M&&!A,I=F?`open`:`closed`,L=f({badge:v,badgeLabel:y,badgeTone:b}),R=()=>{A?(E(!1),N(!0)):N(!M)};return(0,u.jsxs)(`li`,{...w,className:n.cx(c.default.listItem,C),"data-state":I,children:[(0,u.jsx)(o.Tooltip,{content:m(t,{badge:v,badgeLabel:y,badgeTone:b}),placement:D,relationship:`label`,disabled:!A,children:(0,u.jsx)(`button`,{type:`button`,className:n.cx(c.default.item,c.default.groupTrigger,k>0&&c.default.nested,_&&!F&&c.default.active,x&&c.default.disabled),"aria-expanded":F,"aria-controls":P,"data-state":I,disabled:x,onClick:R,children:(0,u.jsx)(p,{icon:r,label:t,badge:L,trailing:(0,u.jsx)(`span`,{className:c.default.chevron,"aria-hidden":`true`,children:(0,u.jsx)(i.ChevronDownIcon,{size:`sm`})})})})}),(0,u.jsx)(`div`,{className:c.default.groupContent,"data-state":I,children:(0,u.jsx)(`div`,{className:c.default.groupClip,children:(0,u.jsx)(`ul`,{id:P,className:c.default.subList,children:(0,u.jsx)(s.SidebarDepthContext.Provider,{value:k+1,children:a})})})})]})};b.displayName=`Sidebar.Group`;var x=({collapseLabel:e,expandLabel:a,variant:l=`ghost`,tone:d=`neutral`,size:f=`sm`,className:p,children:m,onClick:h,...g})=>{let _=t.useMessages(),v=e??_.sidebar.collapse,y=a??_.sidebar.expand,{mode:b,collapsed:x,setCollapsed:S,navId:C,tooltipPlacement:w}=s.useSidebarContext(`Sidebar.Toggle`);if(b===`overlay`)return null;let T=x?y:v;return(0,u.jsx)(o.Tooltip,{content:T,placement:w,relationship:`label`,children:(0,u.jsx)(r.IconButton,{variant:l,tone:d,size:f,"aria-controls":C,...g,"aria-label":T,className:n.cx(c.default.toggle,p),onClick:e=>{h?.(e),e.defaultPrevented||S(!x)},children:m??(0,u.jsx)(`span`,{className:c.default.toggleIcon,children:(0,u.jsx)(i.ChevronLeftIcon,{})})})})};x.displayName=`Sidebar.Toggle`,exports.SidebarBody=g,exports.SidebarFooter=_,exports.SidebarGroup=b,exports.SidebarHeader=h,exports.SidebarItem=y,exports.SidebarSection=v,exports.SidebarToggle=x;