@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/navigation/Stepper/Stepper.mjs

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

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

@@ -0,0 +1 @@
+var e=`_root_uas10_33`,t=`_list_uas10_67`,n=`_sm_uas10_85`,r=`_md_uas10_107`,i=`_lg_uas10_115`,a=`_item_uas10_145`,o=`_trigger_uas10_155`,s=`_button_uas10_179`,c=`_title_uas10_205`,l=`_marker_uas10_217`,u=`_text_uas10_233`,d=`_statusCurrent_uas10_267`,f=`_statusError_uas10_269`,p=`_statusUpcoming_uas10_277`,m=`_description_uas10_285`,h=`_number_uas10_353`,g=`_statusComplete_uas10_371`,_=`_disabled_uas10_453`,v=`_connector_uas10_493`,y=`_fill_uas10_509`,b=`_horizontal_uas10_529`,x=`_compact_uas10_629`,S=`_caption_uas10_671`,C=`_captionCount_uas10_689`,w=`_captionTitle_uas10_707`,T=`_vertical_uas10_731`,E={root:e,list:t,sm:n,md:r,lg:i,item:a,trigger:o,button:s,title:c,marker:l,text:u,statusCurrent:d,statusError:f,statusUpcoming:p,description:m,number:h,statusComplete:g,"stepper-pop":`_stepper-pop_uas10_1`,disabled:_,connector:v,fill:y,horizontal:b,compact:x,caption:S,captionCount:C,captionTitle:w,vertical:T};exports.button=s,exports.caption=S,exports.captionCount=C,exports.captionTitle=w,exports.compact=x,exports.connector=v,exports.default=E,exports.description=m,exports.disabled=_,exports.fill=y,exports.horizontal=b,exports.item=a,exports.lg=i,exports.list=t,exports.marker=l,exports.md=r,exports.number=h,exports.root=e,exports.sm=n,exports.statusComplete=g,exports.statusCurrent=d,exports.statusError=f,exports.statusUpcoming=p,exports.text=u,exports.title=c,exports.trigger=o,exports.vertical=T;

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

@@ -0,0 +1,32 @@
+//#region src/components/navigation/Stepper/Stepper.module.css
+var e = "_root_uas10_33", t = "_list_uas10_67", n = "_sm_uas10_85", r = "_md_uas10_107", i = "_lg_uas10_115", a = "_item_uas10_145", o = "_trigger_uas10_155", s = "_button_uas10_179", c = "_title_uas10_205", l = "_marker_uas10_217", u = "_text_uas10_233", d = "_statusCurrent_uas10_267", f = "_statusError_uas10_269", p = "_statusUpcoming_uas10_277", m = "_description_uas10_285", h = "_number_uas10_353", g = "_statusComplete_uas10_371", _ = "_disabled_uas10_453", v = "_connector_uas10_493", y = "_fill_uas10_509", b = "_horizontal_uas10_529", x = "_compact_uas10_629", S = "_caption_uas10_671", C = "_captionCount_uas10_689", w = "_captionTitle_uas10_707", T = "_vertical_uas10_731", E = {
+	root: e,
+	list: t,
+	sm: n,
+	md: r,
+	lg: i,
+	item: a,
+	trigger: o,
+	button: s,
+	title: c,
+	marker: l,
+	text: u,
+	statusCurrent: d,
+	statusError: f,
+	statusUpcoming: p,
+	description: m,
+	number: h,
+	statusComplete: g,
+	"stepper-pop": "_stepper-pop_uas10_1",
+	disabled: _,
+	connector: v,
+	fill: y,
+	horizontal: b,
+	compact: x,
+	caption: S,
+	captionCount: C,
+	captionTitle: w,
+	vertical: T
+};
+//#endregion
+export { s as button, S as caption, C as captionCount, w as captionTitle, x as compact, v as connector, E as default, m as description, _ as disabled, y as fill, b as horizontal, a as item, i as lg, t as list, l as marker, r as md, h as number, e as root, n as sm, g as statusComplete, d as statusCurrent, f as statusError, p as statusUpcoming, u as text, c as title, o as trigger, T as vertical };

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

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

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

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../utils/cx.cjs.js"),n=require("../../data-display/Badge/Badge.cjs.js"),r=require("./Tabs.module.css.cjs.js");let i=require("react"),a=require("react/jsx-runtime");var o={line:r.default.line,pill:r.default.pill,enclosed:r.default.enclosed},s={sm:r.default.sm,md:r.default.md,lg:r.default.lg},c={horizontal:r.default.horizontal,vertical:r.default.vertical},l=e=>e.replace(/[^A-Za-z0-9_-]/g,e=>`_${e.charCodeAt(0).toString(16)}`);function u(){let[e,t]=(0,i.useState)({});return[e,(0,i.useCallback)((e,n)=>(t(t=>t[e]===n?t:{...t,[e]:n}),()=>t(t=>{if(t[e]!==n)return t;let r={...t};return delete r[e],r})),[])]}var d=(0,i.createContext)(null);function f(e){let t=(0,i.useContext)(d);if(!t)throw Error(`<${e}> must be used inside <Tabs>.`);return t}var p=(e,t)=>`${e}-tab-${l(t)}`,m=(e,t)=>`${e}-panel-${l(t)}`;function h({value:n,defaultValue:l,onValueChange:f,variant:p=`line`,size:m=`md`,orientation:h=`horizontal`,activationMode:g=`automatic`,fullWidth:_=!1,keepMounted:v=!1,className:y,children:b,...x}){let S=(0,i.useId)(),[C,w]=e.useControllableState({value:n,defaultValue:l,onChange:f}),[T,E]=(0,i.useState)(void 0),[D,O]=(0,i.useState)(void 0),k=(0,i.useCallback)(e=>w(e),[w]),[A,j]=u(),[M,N]=u(),P=C??D,F=(0,i.useMemo)(()=>({baseId:S,selected:P,select:k,tabStop:T,setTabStop:E,setFirstEnabled:O,orientation:h,activationMode:g,variant:p,size:m,keepMounted:v,tabIds:A,panelIds:M,registerTab:j,registerPanel:N}),[S,P,k,T,h,g,p,m,v,A,M,j,N]);return(0,a.jsx)(d.Provider,{value:F,children:(0,a.jsx)(`div`,{...x,"data-orientation":h,className:t.cx(r.default.root,o[p],s[m],c[h],_&&r.default.fullWidth,y),children:b})})}var g=`[role="tab"]`;function _({className:e,children:n,onKeyDown:o,ref:s,...c}){let{selected:l,setTabStop:u,setFirstEnabled:d,orientation:p,activationMode:m,variant:h,select:_}=f(`Tabs.List`),v=(0,i.useRef)(null),y=(0,i.useRef)(null),b=(0,i.useRef)(null),x=(0,i.useRef)(!1),S=h!==`enclosed`,C=(0,i.useCallback)(e=>{if(v.current=e,typeof s==`function`)return s(e);s&&(s.current=e)},[s]),w=(0,i.useCallback)(e=>{let t=y.current;if(!t)return[];let n=Array.from(t.querySelectorAll(g));return e?n.filter(e=>!e.disabled):n},[]),[T,E]=(0,i.useState)(0);(0,i.useLayoutEffect)(()=>{let e=y.current;if(!e||typeof MutationObserver>`u`)return;let t=new MutationObserver(()=>E(e=>e+1));return t.observe(e,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[`disabled`,`data-value`]}),()=>t.disconnect()},[]),(0,i.useLayoutEffect)(()=>{let e=w(!0),t=e.find(e=>e.dataset.value===l)??e[0];u(t?.dataset.value),d(e[0]?.dataset.value)},[w,l,T,u,d]);let D=(0,i.useCallback)(e=>{let t=y.current,n=b.current;if(!t||!n)return;let r=t.querySelector(`${g}[aria-selected="true"]`);if(!r){n.dataset.hidden=``,x.current=!1;return}let i=e||!x.current||n.dataset.hidden!==void 0;i&&(n.dataset.instant=``),n.style.setProperty(`--_tabs-ind-x`,`${r.offsetLeft}px`),n.style.setProperty(`--_tabs-ind-y`,`${r.offsetTop}px`),n.style.setProperty(`--_tabs-ind-w`,`${r.offsetWidth}px`),n.style.setProperty(`--_tabs-ind-h`,`${r.offsetHeight}px`),delete n.dataset.hidden,i&&(n.offsetWidth,delete n.dataset.instant),x.current=!0},[]);(0,i.useLayoutEffect)(()=>{S&&D(!1)},[S,D,l,T,p,h]);let O=(0,i.useRef)(null),k=(0,i.useRef)(new WeakSet);(0,i.useEffect)(()=>{if(!S||typeof ResizeObserver>`u`)return;let e=new ResizeObserver(()=>D(!0));return O.current=e,()=>{e.disconnect(),O.current=null,k.current=new WeakSet}},[S,D]),(0,i.useEffect)(()=>{let e=O.current,t=y.current;if(e&&t)for(let n of[t,...t.querySelectorAll(g)])k.current.has(n)||(k.current.add(n),e.observe(n))},[S,D,T]);let A=(0,i.useRef)(!1);(0,i.useEffect)(()=>{let e=v.current,t=y.current;if(!e||!t||p!==`horizontal`||e.scrollWidth<=e.clientWidth)return;let n=t.querySelector(`${g}[aria-selected="true"]`);if(!n)return;let r=parseFloat(getComputedStyle(e).paddingInlineStart)||0,i=e.getBoundingClientRect(),a=n.getBoundingClientRect(),o=0;if(a.left<i.left+r?o=a.left-i.left-r:a.right>i.right-r&&(o=a.right-i.right+r),o!==0){let t=typeof window.matchMedia==`function`&&window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;e.scrollBy({left:o,behavior:!A.current||t?`auto`:`smooth`})}A.current=!0},[l,p]);let j=e=>{if(o?.(e),e.defaultPrevented||e.altKey||e.ctrlKey||e.metaKey)return;let t=e.target.closest(g);if(!t||!y.current?.contains(t))return;let n=w(!0);if(n.length===0)return;let r=n.indexOf(t),i=getComputedStyle(e.currentTarget).direction===`rtl`,a,s=e=>n[(((r===-1?0:r)+e)%n.length+n.length)%n.length];switch(e.key){case`ArrowRight`:p===`horizontal`&&(a=s(i?-1:1));break;case`ArrowLeft`:p===`horizontal`&&(a=s(i?1:-1));break;case`ArrowDown`:p===`vertical`&&(a=s(1));break;case`ArrowUp`:p===`vertical`&&(a=s(-1));break;case`Home`:a=n[0];break;case`End`:a=n[n.length-1];break;default:return}if(!a)return;e.preventDefault(),a.focus();let c=a.dataset.value;m===`automatic`&&c!==void 0&&_(c)};return(0,a.jsx)(`div`,{...c,ref:C,role:`tablist`,"aria-orientation":p,onKeyDown:j,className:t.cx(r.default.list,e),children:(0,a.jsxs)(`div`,{ref:y,className:r.default.track,children:[n,S&&(0,a.jsx)(`span`,{ref:b,className:r.default.indicator,"data-hidden":``,"data-instant":``,"aria-hidden":`true`})]})})}function v({value:e,icon:o,badge:s,badgeLabel:c,disabled:l=!1,className:u,children:d,onClick:m,id:h,...g}){let _=f(`Tabs.Tab`),v=_.selected===e,y=d!=null,b=o!=null,x=h??p(_.baseId,e),{registerTab:S}=_;(0,i.useLayoutEffect)(()=>S(e,x),[S,e,x]);let C=typeof s==`number`?(0,a.jsx)(n.Badge,{count:s,size:`sm`,variant:v?`solid`:`soft`,tone:v?`accent`:`neutral`,label:c}):s,w=C!=null&&C!==!1;return(0,a.jsx)(`button`,{...g,type:`button`,role:`tab`,id:x,"data-value":e,"aria-selected":v,"aria-controls":_.panelIds[e],tabIndex:_.tabStop===e?0:-1,disabled:l,className:t.cx(r.default.tab,!y&&r.default.iconOnly,u),onClick:t=>{m?.(t),!t.defaultPrevented&&!l&&_.select(e)},children:(0,a.jsxs)(`span`,{className:r.default.content,children:[b&&(0,a.jsx)(`span`,{className:r.default.icon,"aria-hidden":`true`,children:o}),y&&(0,a.jsxs)(`span`,{className:r.default.labelStack,children:[(0,a.jsx)(`span`,{className:r.default.labelText,children:d}),(0,a.jsx)(`span`,{className:r.default.labelSizer,"aria-hidden":`true`,children:d})]}),w&&(0,a.jsx)(`span`,{className:r.default.badge,children:C})]})})}function y({value:e,keepMounted:n,className:o,children:s,id:c,tabIndex:l=0,"aria-labelledby":u,...d}){let h=f(`Tabs.Panel`),g=h.selected===e,_=n??h.keepMounted,v=g||_,y=c??m(h.baseId,e),{registerPanel:b}=h;return(0,i.useLayoutEffect)(()=>v?b(e,y):void 0,[v,b,e,y]),v?(0,a.jsx)(`div`,{...d,role:`tabpanel`,id:y,"aria-labelledby":u??h.tabIds[e]??p(h.baseId,e),tabIndex:l,hidden:!g,"data-selected":g||void 0,className:t.cx(r.default.panel,o),children:s}):null}var b=Object.assign(h,{List:_,Tab:v,Panel:y});exports.Tab=v,exports.TabPanel=y,exports.Tabs=b,exports.TabsList=_;

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

@@ -0,0 +1,132 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { Orientation, Size } from '../../../types/common';
+/**
+ * Visual style of the tab list.
+ * - `line`: tabs sit on a hairline; a chunky rounded primary bar springs
+ *   under (or, vertically, beside) the selected tab.
+ * - `pill`: free-floating pill tabs with no track; a solid, inverse
+ *   "jersey" pill springs behind the selected tab.
+ * - `enclosed`: folder tabs. The selected tab lifts onto the panel's surface
+ *   with a primary cap along its outer edge, and the panel is framed to match.
+ */
+export type TabsVariant = "line" | "pill" | "enclosed";
+/**
+ * How arrow keys behave.
+ * - `automatic`: moving focus also selects the tab (best when panels render instantly).
+ * - `manual`: arrows only move focus; Enter or Space selects (best when panels are slow to load).
+ */
+export type TabsActivationMode = "automatic" | "manual";
+export interface TabsProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange"> {
+    /** Selected tab value (controlled). Use with `onValueChange`. */
+    value?: string;
+    /** Initially selected tab value (uncontrolled). When omitted, the first enabled tab starts selected. */
+    defaultValue?: string;
+    /** Called with the newly selected tab's `value`. */
+    onValueChange?: (value: string) => void;
+    /** Visual style of the tab list. See `TabsVariant`. @default "line" */
+    variant?: TabsVariant;
+    /** Tab height, padding, and type size. @default "md" */
+    size?: Size;
+    /** Tabs in a row above the panels, or in a column beside them. Sets `aria-orientation` and the arrow keys. @default "horizontal" */
+    orientation?: Orientation;
+    /** Whether arrow keys also select (`automatic`) or only move focus (`manual`, select with Enter or Space). @default "automatic" */
+    activationMode?: TabsActivationMode;
+    /** Stretch the tabs to share the list's full width equally (horizontal only). @default false */
+    fullWidth?: boolean;
+    /**
+     * Keep inactive panels mounted (hidden with the `hidden` attribute) so their
+     * state survives tab switches. By default only the active panel renders.
+     * `Tabs.Panel` can override this per panel. @default false
+     */
+    keepMounted?: boolean;
+    /** `Tabs.List` and `Tabs.Panel` parts. */
+    children?: ReactNode;
+}
+/**
+ * Switches between related panels of content, one visible at a time.
+ * Compose `Tabs.List` with `Tabs.Tab` children, plus one `Tabs.Panel` per tab,
+ * matched by `value`.
+ *
+ * Follows the WAI-ARIA Tabs pattern: `tablist` / `tab` / `tabpanel` roles,
+ * roving tabindex, arrow keys (direction-aware, swapped in RTL), Home / End,
+ * and automatic or manual activation.
+ *
+ * Use `SegmentedControl` for a form value, and `ToggleGroup` for pressed buttons.
+ */
+declare function TabsRoot({ value: valueProp, defaultValue, onValueChange, variant, size, orientation, activationMode, fullWidth, keepMounted, className, children, ...rest }: TabsProps): import("react").JSX.Element;
+export interface TabsListProps extends ComponentPropsWithRef<"div"> {
+    /**
+     * `Tabs.Tab` children. Name the list with `aria-label` or `aria-labelledby`
+     * when the page has more than one tab set or no heading names it.
+     */
+    children?: ReactNode;
+}
+/**
+ * The `role="tablist"` row (or column) of tabs. In a horizontal list, tabs
+ * never wrap: the list scrolls sideways when it is wider than its container
+ * and keeps the selected tab in view.
+ */
+declare function TabsList({ className, children, onKeyDown, ref, ...rest }: TabsListProps): import("react").JSX.Element;
+type NativeTabProps = Omit<ComponentPropsWithRef<"button">, "value" | "type" | "children" | "aria-label" | "role">;
+interface TabBaseProps extends NativeTabProps {
+    /**
+     * Identifies the tab and matches it to the `Tabs.Panel` with the same `value`.
+     * Tab and panel ids are generated from it; if you pass your own `id`, give
+     * the panel a matching `aria-labelledby`.
+     */
+    value: string;
+    /** Decorative icon before the label (e.g. `<Icon name="settings" />`). */
+    icon?: ReactNode;
+    /**
+     * Trailing count or tag. A number renders a small `Badge` (accent when the
+     * tab is selected, neutral otherwise); any other node renders as given.
+     * A `0` count is hidden.
+     */
+    badge?: ReactNode;
+    /** Screen-reader text for a numeric `badge`, e.g. `"3 unread"`, so the tab is not announced as a bare number. */
+    badgeLabel?: string;
+    /** Disables the tab. Arrow keys, Home, and End skip it. */
+    disabled?: boolean;
+}
+/**
+ * Props for `Tabs.Tab`. Pass the visible label as `children`, or, for an
+ * icon-only tab, pass `icon` and a required `aria-label`.
+ */
+export type TabProps = TabBaseProps & ({
+    /** Visible tab label. */
+    children: NonNullable<ReactNode>;
+    /** Overrides the accessible name (rarely needed). */
+    "aria-label"?: string;
+} | {
+    children?: undefined;
+    /** The icon that stands in for the label. */
+    icon: NonNullable<ReactNode>;
+    /** Accessible name for the icon-only tab (required). */
+    "aria-label": string;
+});
+/** One tab: a native `<button role="tab">`. Must be inside `Tabs.List`. */
+declare function Tab({ value, icon, badge, badgeLabel, disabled, className, children, onClick, id: idProp, ...rest }: TabProps): import("react").JSX.Element;
+export interface TabPanelProps extends Omit<ComponentPropsWithRef<"div">, "role"> {
+    /** The `value` of the `Tabs.Tab` this panel belongs to. */
+    value: string;
+    /** Keep this panel mounted (hidden) while inactive. Overrides `Tabs`'s `keepMounted`. */
+    keepMounted?: boolean;
+    /** Panel content. */
+    children?: ReactNode;
+}
+/**
+ * The `role="tabpanel"` content for one tab, labelled by its tab. It is
+ * focusable (`tabIndex=0`) so keyboard users can reach content that has no
+ * focusable elements of its own.
+ */
+declare function TabPanel({ value, keepMounted: keepMountedProp, className, children, id: idProp, tabIndex, "aria-labelledby": ariaLabelledBy, ...rest }: TabPanelProps): import("react").JSX.Element | null;
+/** Tabs root. See `TabsProps`; compose with `Tabs.List`, `Tabs.Tab`, and `Tabs.Panel`. */
+export declare const Tabs: typeof TabsRoot & {
+    /** The `tablist` that holds the tabs. */
+    List: typeof TabsList;
+    /** One tab button. */
+    Tab: typeof Tab;
+    /** The content panel for one tab. */
+    Panel: typeof TabPanel;
+};
+export { TabsList, Tab, TabPanel };

package/dist/components/navigation/Tabs/Tabs.mjs

@@ -0,0 +1,300 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { cx as t } from "../../../utils/cx.mjs";
+import { Badge as n } from "../../data-display/Badge/Badge.mjs";
+import r from "./Tabs.module.css.mjs";
+import { createContext as i, useCallback as a, useContext as o, useEffect as s, useId as c, useLayoutEffect as l, useMemo as u, useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/navigation/Tabs/Tabs.tsx
+var h = {
+	line: r.line,
+	pill: r.pill,
+	enclosed: r.enclosed
+}, g = {
+	sm: r.sm,
+	md: r.md,
+	lg: r.lg
+}, _ = {
+	horizontal: r.horizontal,
+	vertical: r.vertical
+}, v = (e) => e.replace(/[^A-Za-z0-9_-]/g, (e) => `_${e.charCodeAt(0).toString(16)}`);
+function y() {
+	let [e, t] = f({});
+	return [e, a((e, n) => (t((t) => t[e] === n ? t : {
+		...t,
+		[e]: n
+	}), () => t((t) => {
+		if (t[e] !== n) return t;
+		let r = { ...t };
+		return delete r[e], r;
+	})), [])];
+}
+var b = i(null);
+function x(e) {
+	let t = o(b);
+	if (!t) throw Error(`<${e}> must be used inside <Tabs>.`);
+	return t;
+}
+var S = (e, t) => `${e}-tab-${v(t)}`, C = (e, t) => `${e}-panel-${v(t)}`;
+function w({ value: n, defaultValue: i, onValueChange: o, variant: s = "line", size: l = "md", orientation: d = "horizontal", activationMode: m = "automatic", fullWidth: v = !1, keepMounted: x = !1, className: S, children: C, ...w }) {
+	let T = c(), [E, D] = e({
+		value: n,
+		defaultValue: i,
+		onChange: o
+	}), [O, k] = f(void 0), [A, j] = f(void 0), M = a((e) => D(e), [D]), [N, P] = y(), [F, I] = y(), L = E ?? A, R = u(() => ({
+		baseId: T,
+		selected: L,
+		select: M,
+		tabStop: O,
+		setTabStop: k,
+		setFirstEnabled: j,
+		orientation: d,
+		activationMode: m,
+		variant: s,
+		size: l,
+		keepMounted: x,
+		tabIds: N,
+		panelIds: F,
+		registerTab: P,
+		registerPanel: I
+	}), [
+		T,
+		L,
+		M,
+		O,
+		d,
+		m,
+		s,
+		l,
+		x,
+		N,
+		F,
+		P,
+		I
+	]);
+	return /* @__PURE__ */ p(b.Provider, {
+		value: R,
+		children: /* @__PURE__ */ p("div", {
+			...w,
+			"data-orientation": d,
+			className: t(r.root, h[s], g[l], _[d], v && r.fullWidth, S),
+			children: C
+		})
+	});
+}
+var T = "[role=\"tab\"]";
+function E({ className: e, children: n, onKeyDown: i, ref: o, ...c }) {
+	let { selected: u, setTabStop: h, setFirstEnabled: g, orientation: _, activationMode: v, variant: y, select: b } = x("Tabs.List"), S = d(null), C = d(null), w = d(null), E = d(!1), D = y !== "enclosed", O = a((e) => {
+		if (S.current = e, typeof o == "function") return o(e);
+		o && (o.current = e);
+	}, [o]), k = a((e) => {
+		let t = C.current;
+		if (!t) return [];
+		let n = Array.from(t.querySelectorAll(T));
+		return e ? n.filter((e) => !e.disabled) : n;
+	}, []), [A, j] = f(0);
+	l(() => {
+		let e = C.current;
+		if (!e || typeof MutationObserver > "u") return;
+		let t = new MutationObserver(() => j((e) => e + 1));
+		return t.observe(e, {
+			childList: !0,
+			subtree: !0,
+			attributes: !0,
+			attributeFilter: ["disabled", "data-value"]
+		}), () => t.disconnect();
+	}, []), l(() => {
+		let e = k(!0), t = e.find((e) => e.dataset.value === u) ?? e[0];
+		h(t?.dataset.value), g(e[0]?.dataset.value);
+	}, [
+		k,
+		u,
+		A,
+		h,
+		g
+	]);
+	let M = a((e) => {
+		let t = C.current, n = w.current;
+		if (!t || !n) return;
+		let r = t.querySelector(`${T}[aria-selected="true"]`);
+		if (!r) {
+			n.dataset.hidden = "", E.current = !1;
+			return;
+		}
+		let i = e || !E.current || n.dataset.hidden !== void 0;
+		i && (n.dataset.instant = ""), n.style.setProperty("--_tabs-ind-x", `${r.offsetLeft}px`), n.style.setProperty("--_tabs-ind-y", `${r.offsetTop}px`), n.style.setProperty("--_tabs-ind-w", `${r.offsetWidth}px`), n.style.setProperty("--_tabs-ind-h", `${r.offsetHeight}px`), delete n.dataset.hidden, i && (n.offsetWidth, delete n.dataset.instant), E.current = !0;
+	}, []);
+	l(() => {
+		D && M(!1);
+	}, [
+		D,
+		M,
+		u,
+		A,
+		_,
+		y
+	]);
+	let N = d(null), P = d(/* @__PURE__ */ new WeakSet());
+	s(() => {
+		if (!D || typeof ResizeObserver > "u") return;
+		let e = new ResizeObserver(() => M(!0));
+		return N.current = e, () => {
+			e.disconnect(), N.current = null, P.current = /* @__PURE__ */ new WeakSet();
+		};
+	}, [D, M]), s(() => {
+		let e = N.current, t = C.current;
+		if (e && t) for (let n of [t, ...t.querySelectorAll(T)]) P.current.has(n) || (P.current.add(n), e.observe(n));
+	}, [
+		D,
+		M,
+		A
+	]);
+	let F = d(!1);
+	s(() => {
+		let e = S.current, t = C.current;
+		if (!e || !t || _ !== "horizontal" || e.scrollWidth <= e.clientWidth) return;
+		let n = t.querySelector(`${T}[aria-selected="true"]`);
+		if (!n) return;
+		let r = parseFloat(getComputedStyle(e).paddingInlineStart) || 0, i = e.getBoundingClientRect(), a = n.getBoundingClientRect(), o = 0;
+		if (a.left < i.left + r ? o = a.left - i.left - r : a.right > i.right - r && (o = a.right - i.right + r), o !== 0) {
+			let t = typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+			e.scrollBy({
+				left: o,
+				behavior: !F.current || t ? "auto" : "smooth"
+			});
+		}
+		F.current = !0;
+	}, [u, _]);
+	let I = (e) => {
+		if (i?.(e), e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey) return;
+		let t = e.target.closest(T);
+		if (!t || !C.current?.contains(t)) return;
+		let n = k(!0);
+		if (n.length === 0) return;
+		let r = n.indexOf(t), a = getComputedStyle(e.currentTarget).direction === "rtl", o, s = (e) => n[(((r === -1 ? 0 : r) + e) % n.length + n.length) % n.length];
+		switch (e.key) {
+			case "ArrowRight":
+				_ === "horizontal" && (o = s(a ? -1 : 1));
+				break;
+			case "ArrowLeft":
+				_ === "horizontal" && (o = s(a ? 1 : -1));
+				break;
+			case "ArrowDown":
+				_ === "vertical" && (o = s(1));
+				break;
+			case "ArrowUp":
+				_ === "vertical" && (o = s(-1));
+				break;
+			case "Home":
+				o = n[0];
+				break;
+			case "End":
+				o = n[n.length - 1];
+				break;
+			default: return;
+		}
+		if (!o) return;
+		e.preventDefault(), o.focus();
+		let c = o.dataset.value;
+		v === "automatic" && c !== void 0 && b(c);
+	};
+	return /* @__PURE__ */ p("div", {
+		...c,
+		ref: O,
+		role: "tablist",
+		"aria-orientation": _,
+		onKeyDown: I,
+		className: t(r.list, e),
+		children: /* @__PURE__ */ m("div", {
+			ref: C,
+			className: r.track,
+			children: [n, D && /* @__PURE__ */ p("span", {
+				ref: w,
+				className: r.indicator,
+				"data-hidden": "",
+				"data-instant": "",
+				"aria-hidden": "true"
+			})]
+		})
+	});
+}
+function D({ value: e, icon: i, badge: a, badgeLabel: o, disabled: s = !1, className: c, children: u, onClick: d, id: f, ...h }) {
+	let g = x("Tabs.Tab"), _ = g.selected === e, v = u != null, y = i != null, b = f ?? S(g.baseId, e), { registerTab: C } = g;
+	l(() => C(e, b), [
+		C,
+		e,
+		b
+	]);
+	let w = typeof a == "number" ? /* @__PURE__ */ p(n, {
+		count: a,
+		size: "sm",
+		variant: _ ? "solid" : "soft",
+		tone: _ ? "accent" : "neutral",
+		label: o
+	}) : a, T = w != null && w !== !1;
+	return /* @__PURE__ */ p("button", {
+		...h,
+		type: "button",
+		role: "tab",
+		id: b,
+		"data-value": e,
+		"aria-selected": _,
+		"aria-controls": g.panelIds[e],
+		tabIndex: g.tabStop === e ? 0 : -1,
+		disabled: s,
+		className: t(r.tab, !v && r.iconOnly, c),
+		onClick: (t) => {
+			d?.(t), !t.defaultPrevented && !s && g.select(e);
+		},
+		children: /* @__PURE__ */ m("span", {
+			className: r.content,
+			children: [
+				y && /* @__PURE__ */ p("span", {
+					className: r.icon,
+					"aria-hidden": "true",
+					children: i
+				}),
+				v && /* @__PURE__ */ m("span", {
+					className: r.labelStack,
+					children: [/* @__PURE__ */ p("span", {
+						className: r.labelText,
+						children: u
+					}), /* @__PURE__ */ p("span", {
+						className: r.labelSizer,
+						"aria-hidden": "true",
+						children: u
+					})]
+				}),
+				T && /* @__PURE__ */ p("span", {
+					className: r.badge,
+					children: w
+				})
+			]
+		})
+	});
+}
+function O({ value: e, keepMounted: n, className: i, children: a, id: o, tabIndex: s = 0, "aria-labelledby": c, ...u }) {
+	let d = x("Tabs.Panel"), f = d.selected === e, m = n ?? d.keepMounted, h = f || m, g = o ?? C(d.baseId, e), { registerPanel: _ } = d;
+	return l(() => h ? _(e, g) : void 0, [
+		h,
+		_,
+		e,
+		g
+	]), h ? /* @__PURE__ */ p("div", {
+		...u,
+		role: "tabpanel",
+		id: g,
+		"aria-labelledby": c ?? d.tabIds[e] ?? S(d.baseId, e),
+		tabIndex: s,
+		hidden: !f,
+		"data-selected": f || void 0,
+		className: t(r.panel, i),
+		children: a
+	}) : null;
+}
+var k = Object.assign(w, {
+	List: E,
+	Tab: D,
+	Panel: O
+});
+//#endregion
+export { D as Tab, O as TabPanel, k as Tabs, E as TabsList };

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

@@ -0,0 +1 @@
+var e=`_sm_1udqw_45`,t=`_md_1udqw_59`,n=`_lg_1udqw_73`,r=`_root_1udqw_97`,i=`_vertical_1udqw_119`,a=`_enclosed_1udqw_137`,o=`_list_1udqw_159`,s=`_horizontal_1udqw_177`,c=`_tab_1udqw_211`,l=`_track_1udqw_219`,u=`_iconOnly_1udqw_331`,d=`_fullWidth_1udqw_349`,f=`_content_1udqw_399`,p=`_icon_1udqw_331`,m=`_labelStack_1udqw_447`,h=`_labelSizer_1udqw_461`,g=`_badge_1udqw_471`,_=`_indicator_1udqw_493`,v=`_line_1udqw_535`,y=`_pill_1udqw_615`,b=`_panel_1udqw_787`,x={sm:e,md:t,lg:n,root:r,vertical:i,enclosed:a,list:o,horizontal:s,tab:c,track:l,iconOnly:u,fullWidth:d,content:f,icon:p,labelStack:m,labelSizer:h,badge:g,indicator:_,line:v,pill:y,panel:b};exports.badge=g,exports.content=f,exports.default=x,exports.enclosed=a,exports.fullWidth=d,exports.horizontal=s,exports.icon=p,exports.iconOnly=u,exports.indicator=_,exports.labelSizer=h,exports.labelStack=m,exports.lg=n,exports.line=v,exports.list=o,exports.md=t,exports.panel=b,exports.pill=y,exports.root=r,exports.sm=e,exports.tab=c,exports.track=l,exports.vertical=i;