@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

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

@@ -0,0 +1,179 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { Tone } from '../../../types/common';
+import { IconButtonProps } from '../../primitives/Button';
+/** A count or short text shown in an item's badge. */
+export type SidebarBadgeValue = number | string;
+export interface SidebarHeaderProps extends ComponentPropsWithRef<"div"> {
+    /** Brand, workspace switcher, and usually a `Sidebar.Toggle`. Pinned above the scrolling body. */
+    children?: ReactNode;
+}
+/**
+ * The pinned top area: logo, product or workspace name, and the collapse
+ * toggle. In rail mode its children stack vertically and anything wider than
+ * the rail is clipped; use `useSidebar().collapsed` to swap in a compact logo.
+ */
+export declare const SidebarHeader: {
+    ({ className, children, ...rest }: SidebarHeaderProps): import("react").JSX.Element;
+    displayName: string;
+};
+export interface SidebarBodyProps extends ComponentPropsWithRef<"div"> {
+    /** `Sidebar.Section`s. Scrolls when taller than the sidebar, while the header and footer stay pinned. */
+    children?: ReactNode;
+}
+/** The scrolling middle of the sidebar, between `Sidebar.Header` and `Sidebar.Footer`. */
+export declare const SidebarBody: {
+    ({ className, children, ...rest }: SidebarBodyProps): import("react").JSX.Element;
+    displayName: string;
+};
+export interface SidebarFooterProps extends ComponentPropsWithRef<"div"> {
+    /** Account, settings, or help links (a `Sidebar.Section`), or a `Sidebar.Toggle`. Pinned to the bottom. */
+    children?: ReactNode;
+}
+/** The pinned bottom area, separated from the body by a divider. */
+export declare const SidebarFooter: {
+    ({ className, children, ...rest }: SidebarFooterProps): import("react").JSX.Element;
+    displayName: string;
+};
+/** Heading level for a section heading. Omit it to render a plain (non-heading) label. */
+export type SidebarHeadingLevel = 2 | 3 | 4 | 5 | 6;
+export interface SidebarSectionProps extends ComponentPropsWithRef<"div"> {
+    /**
+     * Visible group label, e.g. "Teams". The section becomes `role="group"`
+     * named by it (`aria-labelledby`). In rail mode the heading is visually
+     * hidden (still the group's name) and a divider separates sections instead.
+     */
+    heading?: ReactNode;
+    /**
+     * Renders the heading as `h2`-`h6` so it appears in the page's heading
+     * outline. When omitted, the heading is a styled `div` that only names the group.
+     */
+    headingLevel?: SidebarHeadingLevel;
+    /** `Sidebar.Item`s and `Sidebar.Group`s. Rendered inside a `<ul>`. */
+    children?: ReactNode;
+}
+/**
+ * A list of items with an optional visible heading. Every `Sidebar.Item` and
+ * `Sidebar.Group` must sit in a section (use one without `heading` for an
+ * ungrouped list).
+ */
+export declare const SidebarSection: {
+    ({ heading, headingLevel, className, children, ...rest }: SidebarSectionProps): import("react").JSX.Element;
+    displayName: string;
+};
+export interface SidebarItemOwnProps {
+    /** The visible label. It is the item's accessible name, including in rail mode (where it also appears as a tooltip). */
+    children: ReactNode;
+    /** Decorative icon before the label. Required for a usable rail: it's all that shows when collapsed. */
+    icon?: ReactNode;
+    /**
+     * Marks the current page: sets `aria-current="page"` and shows a soft
+     * primary tint, a start-edge indicator bar, and bold text. @default false
+     */
+    active?: boolean;
+    /**
+     * A count (rendered with `Badge` `count`, capped at 99+, hidden at 0) or a
+     * short text such as "New". In rail mode it shrinks to a dot on the icon and
+     * the full badge shows in the tooltip.
+     */
+    badge?: SidebarBadgeValue;
+    /** Screen-reader text for the badge, e.g. "3 unread messages". Replaces the visible badge text in the accessible name. */
+    badgeLabel?: string;
+    /** Badge color. @default "accent" */
+    badgeTone?: Tone;
+    /**
+     * Disables the item. Buttons use the native `disabled` attribute; links
+     * drop `href` and get `aria-disabled`. @default false
+     */
+    disabled?: boolean;
+}
+/**
+ * Renders a `<button>` by default, or an `<a>` when `href` is passed (the same
+ * approach as `Button`). For client-side routing, pass `href` and handle
+ * `onClick` (call `event.preventDefault()` and push the route), so the item
+ * stays a real link that can be opened in a new tab.
+ */
+export type SidebarItemProps = (SidebarItemOwnProps & Omit<ComponentPropsWithRef<"button">, keyof SidebarItemOwnProps | "href"> & {
+    /** Pass a URL to render the item as a link (`<a>`). */
+    href?: undefined;
+}) | (SidebarItemOwnProps & Omit<ComponentPropsWithRef<"a">, keyof SidebarItemOwnProps> & {
+    /** Pass a URL to render the item as a link (`<a>`). */
+    href: string;
+});
+/**
+ * A navigation link (or button) inside a `Sidebar.Section` or
+ * `Sidebar.Group`. Renders `<li>` around the control; `className`, `ref`, and
+ * other props go on the `<a>` / `<button>` itself. In overlay mode,
+ * activating an item closes the drawer (see `closeOnNavigate`).
+ */
+export declare const SidebarItem: {
+    (props: SidebarItemProps): import("react").JSX.Element;
+    displayName: string;
+};
+export interface SidebarGroupProps extends Omit<ComponentPropsWithRef<"li">, "children"> {
+    /** The disclosure button's visible label, and its accessible name. */
+    label: ReactNode;
+    /** Decorative icon before the label. Shown alone in rail mode. */
+    icon?: ReactNode;
+    /** Nested `Sidebar.Item`s. Rendered in a `<ul>` that the button controls. */
+    children?: ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. @default false */
+    defaultOpen?: boolean;
+    /** Called with the next open state. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * One of the nested items is the current page. While the group is closed
+     * (or the sidebar is a rail), the button shows the active look so users can
+     * see where they are. It doesn't set `aria-current`; the nested item does. @default false
+     */
+    active?: boolean;
+    /** A count or short text on the group button, like `Sidebar.Item`'s `badge`. */
+    badge?: SidebarBadgeValue;
+    /** Screen-reader text for the badge. */
+    badgeLabel?: string;
+    /** Badge color. @default "accent" */
+    badgeTone?: Tone;
+    /** Disables the disclosure button. @default false */
+    disabled?: boolean;
+    /**
+     * A stable key for the group. An uncontrolled group's open state is kept
+     * by key, so it survives a `mode` switch (which remounts the nav).
+     * Defaults to `label` when that is plain text.
+     */
+    value?: string;
+}
+/**
+ * A collapsible set of nested items: a disclosure button (`aria-expanded`,
+ * `aria-controls`) and the `<ul>` it shows and hides. Enter and Space toggle
+ * it (native button behavior). In rail mode the nested list is hidden, and
+ * pressing the button expands the sidebar and opens the group.
+ *
+ * `className` and other props go on the wrapping `<li>`.
+ */
+export declare const SidebarGroup: {
+    ({ label, icon, children, open: openProp, defaultOpen, onOpenChange, active, badge, badgeLabel, badgeTone, disabled, value, className, ...rest }: SidebarGroupProps): import("react").JSX.Element;
+    displayName: string;
+};
+export type SidebarToggleProps = Omit<Extract<IconButtonProps, {
+    href?: undefined;
+}>, "aria-label" | "children"> & {
+    /** Accessible name (and tooltip) while expanded. @default "Collapse sidebar" */
+    collapseLabel?: string;
+    /** Accessible name (and tooltip) while collapsed. @default "Expand sidebar" */
+    expandLabel?: string;
+    /** Custom icon. Defaults to a chevron that points toward the collapse direction. */
+    children?: ReactNode;
+};
+/**
+ * An `IconButton` that collapses the sidebar to an icon rail and back. Its
+ * name (and tooltip) states the action, switching between "Collapse sidebar"
+ * and "Expand sidebar"; it has no `aria-expanded`, since the sidebar stays
+ * visible as a rail and the name already carries the state. `aria-controls`
+ * points at the sidebar. Renders nothing in overlay mode. Defaults to
+ * `variant="ghost"`, `tone="neutral"`, `size="sm"`.
+ */
+export declare const SidebarToggle: {
+    ({ collapseLabel: collapseLabelProp, expandLabel: expandLabelProp, variant, tone, size, className, children, onClick, ...rest }: SidebarToggleProps): import("react").JSX.Element | null;
+    displayName: string;
+};

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

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

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

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

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

@@ -0,0 +1 @@
+const e=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),t=require("../../../utils/cx.cjs.js"),n=require("./SkipLink.module.css.cjs.js");let r=require("react"),i=require("react/jsx-runtime");var a=`a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable=''], [contenteditable='true'], [tabindex]`,o=e=>{if(!e||!e.startsWith(`#`)||e.length<2)return null;let t=e.slice(1);try{t=decodeURIComponent(t)}catch{}return document.getElementById(t)},s=null,c=e=>{s?.(),s=null;let t=!e.matches(a)&&!e.hasAttribute(`tabindex`),n=()=>{e.removeEventListener(`blur`,n),t&&e.getAttribute(`tabindex`)===`-1`&&e.removeAttribute(`tabindex`),s===n&&(s=null)};return t&&(e.setAttribute(`tabindex`,`-1`),e.addEventListener(`blur`,n),s=n),e.focus({preventScroll:!0}),document.activeElement===e?(e.scrollIntoView?.({block:`start`}),!0):(n(),!1)};function l({href:r=`#main`,children:a,className:s,onClick:l,...u}){let d=e.useMessages(),f=a??d.skipLink.label,p=e=>{if(l?.(e),e.defaultPrevented||e.button!==0||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey)return;let t=o(r);if(t&&c(t)){e.preventDefault();try{window.location.hash!==r&&window.history.pushState(null,``,r)}catch{}}};return(0,i.jsx)(`a`,{...u,href:r,onClick:p,className:t.cx(n.default.root,s),children:f})}function u({className:e,children:a,...o}){return(0,i.jsx)(`ul`,{role:`list`,...o,className:t.cx(n.default.group,e),children:r.Children.map(a,(e,t)=>(0,r.isValidElement)(e)?(0,i.jsx)(`li`,{className:n.default.item,children:e},e.key??t):e)})}exports.SkipLink=l,exports.SkipLinks=u;

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

@@ -0,0 +1,41 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export interface SkipLinkProps extends ComponentPropsWithRef<"a"> {
+    /**
+     * Same-page fragment of the element to skip to, such as `"#main"` (the
+     * default). The target needs a matching `id`. On activation, focus moves
+     * to it (adding a temporary `tabindex="-1"` when it isn't natively
+     * focusable) and the URL hash is updated. Non-fragment URLs navigate
+     * normally.
+     */
+    href?: string;
+    /** Link text. Defaults to "Skip to main content". */
+    children?: ReactNode;
+}
+/**
+ * Bypass link (WCAG 2.4.1) that stays visually hidden until it receives
+ * keyboard focus, then springs in as a high-contrast pill at the top start
+ * corner of the viewport, above every other layer. Render it as the first
+ * focusable element on the page.
+ *
+ * With a sticky header, give the target a `scroll-margin-top` of at least
+ * the header's height (WCAG 2.4.11), so it isn't scrolled under the header.
+ *
+ * Note: the target receives programmatic focus, so browsers may draw a focus
+ * ring around it (e.g. the whole `<main>`). That ring tells keyboard users
+ * where they landed; if you want to hide it, style `[tabindex="-1"]:focus`
+ * on the target rather than removing focus.
+ */
+export declare function SkipLink({ href, children: childrenProp, className, onClick, ...rest }: SkipLinkProps): import("react").JSX.Element;
+export interface SkipLinksProps extends ComponentPropsWithRef<"ul"> {
+    /**
+     * `SkipLink` elements, in Tab order. Each one is wrapped in an `<li>` and
+     * appears in the same top-start spot when it has focus.
+     */
+    children?: ReactNode;
+}
+/**
+ * Groups several skip links (for example navigation, search, and main
+ * content) as a list. Only the focused link is visible; Tab moves through
+ * them in order. Pass an `aria-label` (such as "Skip links") to name the list.
+ */
+export declare function SkipLinks({ className, children, ...rest }: SkipLinksProps): import("react").JSX.Element;

package/dist/components/navigation/SkipLink/SkipLink.mjs

@@ -0,0 +1,52 @@
+import { useMessages as e } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { cx as t } from "../../../utils/cx.mjs";
+import n from "./SkipLink.module.css.mjs";
+import { Children as r, isValidElement as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/navigation/SkipLink/SkipLink.tsx
+var o = "a[href], area[href], button, input, select, textarea, iframe, summary, [contenteditable=''], [contenteditable='true'], [tabindex]", s = (e) => {
+	if (!e || !e.startsWith("#") || e.length < 2) return null;
+	let t = e.slice(1);
+	try {
+		t = decodeURIComponent(t);
+	} catch {}
+	return document.getElementById(t);
+}, c = null, l = (e) => {
+	c?.(), c = null;
+	let t = !e.matches(o) && !e.hasAttribute("tabindex"), n = () => {
+		e.removeEventListener("blur", n), t && e.getAttribute("tabindex") === "-1" && e.removeAttribute("tabindex"), c === n && (c = null);
+	};
+	return t && (e.setAttribute("tabindex", "-1"), e.addEventListener("blur", n), c = n), e.focus({ preventScroll: !0 }), document.activeElement === e ? (e.scrollIntoView?.({ block: "start" }), !0) : (n(), !1);
+};
+function u({ href: r = "#main", children: i, className: o, onClick: c, ...u }) {
+	let d = e(), f = i ?? d.skipLink.label, p = (e) => {
+		if (c?.(e), e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+		let t = s(r);
+		if (t && l(t)) {
+			e.preventDefault();
+			try {
+				window.location.hash !== r && window.history.pushState(null, "", r);
+			} catch {}
+		}
+	};
+	return /* @__PURE__ */ a("a", {
+		...u,
+		href: r,
+		onClick: p,
+		className: t(n.root, o),
+		children: f
+	});
+}
+function d({ className: e, children: o, ...s }) {
+	return /* @__PURE__ */ a("ul", {
+		role: "list",
+		...s,
+		className: t(n.group, e),
+		children: r.map(o, (e, t) => i(e) ? /* @__PURE__ */ a("li", {
+			className: n.item,
+			children: e
+		}, e.key ?? t) : e)
+	});
+}
+//#endregion
+export { u as SkipLink, d as SkipLinks };

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

@@ -0,0 +1 @@
+var e=`_root_1f8gq_17`,t=`_group_1f8gq_165`,n=`_item_1f8gq_177`,r={root:e,group:t,item:n};exports.default=r,exports.group=t,exports.item=n,exports.root=e;

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

@@ -0,0 +1,8 @@
+//#region src/components/navigation/SkipLink/SkipLink.module.css
+var e = "_root_1f8gq_17", t = "_group_1f8gq_165", n = "_item_1f8gq_177", r = {
+	root: e,
+	group: t,
+	item: n
+};
+//#endregion
+export { r as default, t as group, n as item, e as root };

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

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

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

@@ -0,0 +1 @@
+const e=require("../../../i18n/en.cjs.js"),t=require("../../../hooks/useControllableState.cjs.js"),n=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),r=require("../../../utils/refs.cjs.js"),i=require("../../../hooks/useResponsiveValue.cjs.js"),a=require("../../../utils/cx.cjs.js"),o=require("../../../utils/flattenChildren.cjs.js"),s=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),c=require("../../primitives/Icon/icons.cjs.js"),l=require("../../primitives/Icon/Icon.cjs.js"),u=require("./Stepper.module.css.cjs.js");let d=require("react"),f=require("react/jsx-runtime");var p=e.en.stepper.status,m=e=>({step:t,total:n,title:r})=>t>n?e.allComplete(n):r?e.stepTitled(t,n,r):e.step(t,n),h={sm:u.default.sm,md:u.default.md,lg:u.default.lg},g={horizontal:u.default.horizontal,vertical:u.default.vertical},_={complete:u.default.statusComplete,current:u.default.statusCurrent,upcoming:u.default.statusUpcoming,error:u.default.statusError},v=6,y=(0,d.createContext)(null),b=(0,d.createContext)(0);function x(){let e=(0,d.useContext)(y);if(!e)throw Error(`Stepper.Step must be used inside a Stepper.`);return e}function S(e,t){return e<t?`complete`:e===t?`current`:`upcoming`}function C({activeStep:e,defaultActiveStep:c=0,onActiveStepChange:l,orientation:p=`horizontal`,size:_=`md`,clickable:x=!1,linear:C=!0,compact:w=`auto`,announce:T=!1,announcement:E,statusLabels:D,"aria-label":O,className:k,children:A,ref:j,...M}){let N=n.useMessages(),P=E??m(N.stepper),F=O??N.stepper.nav,[I,L]=t.useControllableState({value:e,defaultValue:c,onChange:l}),R=i.useResponsiveValue(p,`horizontal`),z=R===`horizontal`,B=x||!C,V=o.flattenChildren(A),H=V.length,U=(0,d.useRef)(null),W=(0,d.useCallback)(e=>{U.current=e,r.assignRef(j,e)},[j]),[G,K]=(0,d.useState)(!1);(0,d.useLayoutEffect)(()=>{if(!z||w!==`auto`)return;let e=U.current;if(!e)return;let t=()=>{let t=parseFloat(getComputedStyle(e).fontSize)||16,n=e.clientWidth/Math.max(H,1);K(n<v*t)};if(t(),typeof ResizeObserver>`u`)return;let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[z,w,H]);let q=z&&(w===`auto`?G:w),[J,Y]=(0,d.useState)(``),X=(0,d.useRef)(!0);(0,d.useEffect)(()=>{if(X.current){X.current=!1;return}if(!T)return;let e=U.current?.querySelector(`[data-step-index="${I}"] [data-step-title]`),t=V[I];Y(P({step:I+1,total:H,title:e?.textContent?.trim()??``,status:t?t.props.status??S(I,I):void 0}))},[I]);let Z={activeStep:I,setActiveStep:L,interactive:B,linear:C,statusLabels:{...N.stepper.status,...D}},Q=V[I],$=B?`nav`:`div`;return(0,f.jsx)(y.Provider,{value:Z,children:(0,f.jsxs)($,{role:B?void 0:`group`,"aria-label":F,...M,ref:W,className:a.cx(u.default.root,g[R],h[_],q&&u.default.compact,B&&u.default.interactive,k),"data-orientation":R,children:[(0,f.jsx)(`ol`,{role:`list`,className:u.default.list,children:V.map((e,t)=>(0,f.jsx)(b.Provider,{value:t,children:e},e.key??t))}),q&&(0,f.jsxs)(`div`,{className:u.default.caption,"aria-hidden":`true`,children:[(0,f.jsx)(`span`,{className:u.default.captionCount,children:I>=H?N.stepper.count(H,H):N.stepper.step(I+1,H)}),Q&&(0,f.jsx)(`span`,{className:u.default.captionTitle,children:Q.props.title})]}),T&&(0,f.jsx)(s.VisuallyHidden,{role:`status`,"aria-live":`polite`,"aria-atomic":`true`,children:J})]})})}var w=()=>(0,f.jsxs)(l.Icon,{strokeWidth:3,children:[(0,f.jsx)(`path`,{d:`M12 6v7.5`}),(0,f.jsx)(`circle`,{cx:`12`,cy:`18`,r:`1.6`,fill:`currentColor`,stroke:`none`})]});function T({title:e,description:t,icon:r,status:i,disabled:o=!1,statusLabel:l,className:p,...m}){let h=n.useMessages(),{activeStep:g,setActiveStep:v,interactive:y,linear:C,statusLabels:T}=x(),E=(0,d.useContext)(b),D=i??S(E,g),O=E===g,k=l??T[D],A=y&&(!C||E<=g||D===`complete`),j;j=D===`complete`?(0,f.jsx)(c.CheckIcon,{strokeWidth:3}):D===`error`?(0,f.jsx)(w,{}):r??(0,f.jsx)(`span`,{className:u.default.number,children:E+1});let M=(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(`span`,{className:u.default.marker,"aria-hidden":`true`,children:j}),(0,f.jsxs)(`span`,{className:u.default.text,children:[(0,f.jsx)(s.VisuallyHidden,{children:h.stepper.prefix(E+1)}),(0,f.jsx)(`span`,{className:u.default.title,"data-step-title":``,children:e}),(0,f.jsx)(s.VisuallyHidden,{children:`, ${k}`}),t!=null&&(0,f.jsx)(`span`,{className:u.default.description,children:t})]})]});return(0,f.jsxs)(`li`,{"aria-current":O&&!A?`step`:void 0,...m,className:a.cx(u.default.item,_[D],o&&A&&u.default.disabled,p),"data-status":D,"data-step-index":E,children:[A?(0,f.jsx)(`button`,{type:`button`,className:a.cx(u.default.trigger,u.default.button),"aria-current":O?`step`:void 0,disabled:o,onClick:()=>v(E),children:M}):(0,f.jsx)(`div`,{className:u.default.trigger,children:M}),(0,f.jsx)(`span`,{className:u.default.connector,"aria-hidden":`true`,children:(0,f.jsx)(`span`,{className:u.default.fill})})]})}var E=Object.assign(C,{Step:T});exports.Step=T,exports.Stepper=E,exports.defaultStepperStatusLabels=p;

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

@@ -0,0 +1,109 @@
+import { ComponentPropsWithRef, ReactNode, Ref } from 'react';
+import { Orientation, Responsive, Size } from '../../../types/common';
+/** Progress status of a step. Each status has its own marker shape and icon, plus hidden status text. */
+export type StepStatus = "complete" | "current" | "upcoming" | "error";
+/** Screen-reader text announced before each step's title, per status. */
+export type StepperStatusLabels = Partial<Record<StepStatus, string>>;
+/** Default screen-reader text for each status. */
+export declare const defaultStepperStatusLabels: Record<StepStatus, string>;
+/**
+ * How a horizontal stepper treats narrow widths.
+ * - `"auto"`: when each step would get less than about 6rem, step labels are
+ *   hidden visually (still read by screen readers) and a caption under the
+ *   track shows "Step 2 of 4" plus the current step's title.
+ * - `true`: always use that compact look.
+ * - `false`: never; labels wrap instead (they never overflow the page).
+ */
+export type StepperCompact = boolean | "auto";
+/** Information passed to `announcement` when the active step changes. */
+export interface StepperAnnouncementInfo {
+    /** 1-based number of the new active step. */
+    step: number;
+    /** Number of steps. */
+    total: number;
+    /** Plain text of the new active step's title (empty when past the last step). */
+    title: string;
+    /** Resolved status of the new active step (`undefined` when past the last step). */
+    status: StepStatus | undefined;
+}
+export interface StepperOwnProps {
+    /** Index of the active (current) step, zero-based. Controlled. Set it to the number of steps to show every step complete. */
+    activeStep?: number;
+    /** Initial active step when uncontrolled. @default 0 */
+    defaultActiveStep?: number;
+    /** Called with the new step index when a clickable step is chosen. */
+    onActiveStepChange?: (index: number) => void;
+    /**
+     * Layout direction. Pass an object to switch at breakpoints (mobile first),
+     * e.g. `{ base: "vertical", md: "horizontal" }`. Before hydration the
+     * `base` value is used. @default "horizontal"
+     */
+    orientation?: Responsive<Orientation>;
+    /** Marker size, spacing, and type size. @default "md" */
+    size?: Size;
+    /**
+     * Makes steps buttons that call `onActiveStepChange`. In linear mode
+     * (the default) only completed steps and the current step can be chosen.
+     * @default false
+     */
+    clickable?: boolean;
+    /**
+     * When `false`, any step can be chosen in any order (implies `clickable`).
+     * When `true`, upcoming steps can't be jumped to. @default true
+     */
+    linear?: boolean;
+    /** Narrow-width behaviour of a horizontal stepper. See `StepperCompact`. @default "auto" */
+    compact?: StepperCompact;
+    /**
+     * Announce active-step changes in a polite live region ("Step 2 of 4:
+     * Shipping"). Leave off when your page already moves focus to the new
+     * step's heading, so the change isn't read twice. @default false
+     */
+    announce?: boolean;
+    /** Builds the live-region text when `announce` is on. */
+    announcement?: (info: StepperAnnouncementInfo) => string;
+    /** Overrides the screen-reader status text ("Completed", "Current", "Not started", "Error"). */
+    statusLabels?: StepperStatusLabels;
+    /** Accessible name for the stepper. @default "Progress" */
+    "aria-label"?: string;
+    /** `Stepper.Step` elements. */
+    children?: ReactNode;
+}
+export type StepperProps = StepperOwnProps & Omit<ComponentPropsWithRef<"div">, keyof StepperOwnProps | "ref"> & {
+    /** Ref to the root element (a `nav` when steps are clickable, otherwise a `div`). */
+    ref?: Ref<HTMLElement>;
+};
+declare function StepperRoot({ activeStep: activeStepProp, defaultActiveStep, onActiveStepChange, orientation: orientationProp, size, clickable, linear, compact, announce, announcement: announcementProp, statusLabels, "aria-label": ariaLabelProp, className, children, ref, ...rest }: StepperProps): import("react").JSX.Element;
+export interface StepOwnProps {
+    /** Step name, in bold display type. Keep it short ("Shipping", "Payment"). */
+    title: ReactNode;
+    /** Supporting text under the title. Hidden in compact mode. */
+    description?: ReactNode;
+    /**
+     * Icon shown in the marker instead of the step number for `current` and
+     * `upcoming` steps. Decorative. Completed and error steps always show
+     * their check and alert icons so status never depends on color.
+     */
+    icon?: ReactNode;
+    /** Overrides the status derived from `activeStep` (before: complete, at: current, after: upcoming). */
+    status?: StepStatus;
+    /** Prevents choosing this step in a clickable stepper. */
+    disabled?: boolean;
+    /** Overrides the screen-reader status text for this step. */
+    statusLabel?: string;
+}
+export type StepProps = StepOwnProps & Omit<ComponentPropsWithRef<"li">, keyof StepOwnProps | "title">;
+declare function Step({ title, description, icon, status: statusProp, disabled, statusLabel, className, ...rest }: StepProps): import("react").JSX.Element;
+type StepperComponent = typeof StepperRoot & {
+    /** One step. Its number and default status come from its position. */
+    Step: typeof Step;
+};
+/**
+ * Multi-step progress indicator for wizards and checkout flows, rendered as
+ * an ordered list in a labelled group (or a `nav` when steps are clickable).
+ * The current step gets `aria-current="step"`, and every step announces its
+ * status as hidden text. Status also shows as marker icon and shape:
+ * check (complete), accent ring (current), number (upcoming), alert square (error).
+ */
+export declare const Stepper: StepperComponent;
+export { Step };