@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/forms/Slider/Slider.d.ts

@@ -0,0 +1,84 @@
+import { ComponentPropsWithRef } from 'react';
+import { Orientation, Size, Tone } from '../../../types/common';
+/** A single value, or a `[start, end]` pair for a range slider. */
+export type SliderValue = number | [number, number];
+/** A labelled (or unlabelled) tick rendered under the track. */
+export interface SliderMark {
+    /** Position of the mark, between `min` and `max`. */
+    value: number;
+    /** Optional visible label, rendered under the track in muted text. */
+    label?: string;
+}
+/**
+ * When the value bubble above each thumb is visible.
+ * - `never`: no bubble (default).
+ * - `hover`: while the thumb is hovered, focused, or dragged. Press Escape to hide it.
+ * - `always`: always visible.
+ */
+export type SliderShowValue = "never" | "hover" | "always";
+type SliderOwnProps<T extends SliderValue> = {
+    /** Controlled value. A number for one thumb, or `[start, end]` for a range. */
+    value?: T;
+    /** Initial value when uncontrolled. Pass a `[start, end]` pair for a range. Defaults to `min`. */
+    defaultValue?: T;
+    /** Called with the next value on every change (drag, click, key press). */
+    onValueChange?: (value: T) => void;
+    /** Called once an interaction ends: on pointer up and on key up. Use it for expensive work (fetching, saving). */
+    onValueCommit?: (value: T) => void;
+    /** Lowest value. Default `0`. */
+    min?: number;
+    /** Highest value. Default `100`. */
+    max?: number;
+    /** Granularity of the value. Every value snaps to `min + n * step`. Default `1`. */
+    step?: number;
+    /** Jump used by PageUp / PageDown and Shift + Arrow. Defaults to `10 * step`. */
+    largeStep?: number;
+    /** Horizontal (default) or vertical. A vertical slider fills its height; give it one with `style` or a parent (default 12rem). */
+    orientation?: Orientation;
+    /** Track thickness and thumb size. Every size keeps a 24px pointer target. Default `md` (or the Field's size). */
+    size?: Size;
+    /** Semantic color of the fill and thumb border. Default `primary`. Ignored while `invalid` (danger is used). */
+    tone?: Tone;
+    /** Disables every thumb. Picked up from a surrounding Field. */
+    disabled?: boolean;
+    /** Thumbs stay focusable and announce their value, but the value can't change. */
+    readOnly?: boolean;
+    /** Marks the slider invalid: danger styling and `aria-invalid`. Picked up from a surrounding Field. */
+    invalid?: boolean;
+    /** Flips the direction: max sits at the inline start (horizontal) or the bottom (vertical). Arrow keys follow what you see. */
+    inverted?: boolean;
+    /** Range only: the minimum number of steps kept between the two thumbs. Default `0` (thumbs may meet but never cross). */
+    minStepsBetweenThumbs?: number;
+    /** Ticks under the track: `true` for one per step, or a list of `{ value, label? }`. */
+    marks?: boolean | SliderMark[];
+    /** When to show the value bubble above each thumb. Default `never`. */
+    showValue?: SliderShowValue;
+    /** Formats a value for the bubble and for `aria-valuetext` (e.g. currency or percent). */
+    formatValue?: (value: number) => string;
+    /** Custom `aria-valuetext` per thumb. Wins over `formatValue` for assistive tech. */
+    getAriaValueText?: (value: number, thumbIndex: number) => string;
+    /** Form field name. Renders one `<input type="hidden">` per thumb (a range submits the name twice; read it with `FormData.getAll`). */
+    name?: string;
+    /** Accessible names for each thumb, e.g. `["Minimum price", "Maximum price"]`. Recommended for ranges. */
+    thumbLabels?: string[];
+    /** Accessible name for the thumb(s) when there is no visible label. Applied to the thumbs, not the wrapper. */
+    "aria-label"?: string;
+    /** id(s) of the visible label. Applied to the thumbs (and the range group). Inside a Field, the Field's label is used. */
+    "aria-labelledby"?: string;
+};
+/** Props for `Slider`. Other props are spread onto the root `div`. */
+export type SliderProps<T extends SliderValue = number> = SliderOwnProps<T> & Omit<ComponentPropsWithRef<"div">, keyof SliderOwnProps<T> | "onChange" | "children">;
+/**
+ * Pick a number, or a `[start, end]` range, on a pill track. Follows the
+ * WAI-ARIA APG Slider and Multi-Thumb Slider patterns: every thumb is a
+ * focusable `role="slider"` with `aria-valuemin/max/now/text`.
+ *
+ * Operable without dragging (WCAG 2.5.7): click or tap anywhere on the track
+ * to move the nearest thumb there, or use the keyboard (Arrows, PageUp /
+ * PageDown, Home / End). Dragging with a mouse, pen, or finger also works.
+ *
+ * Inside a `Field`, the Field's label names the thumb, and its hint, error,
+ * invalid, and disabled state are wired automatically.
+ */
+export declare function Slider<T extends SliderValue = number>(props: SliderProps<T>): import("react").JSX.Element;
+export {};

package/dist/components/forms/Slider/Slider.mjs

@@ -0,0 +1,251 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useFormReset as t } from "../../../hooks/useFormReset.mjs";
+import { cx as n } from "../../../utils/cx.mjs";
+import { useFieldContext as r, useFieldControl as i } from "../Field/FieldContext.mjs";
+import a from "./Slider.module.css.mjs";
+import { useCallback as o, useId as ee, useMemo as te, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/forms/Slider/Slider.tsx
+var ne = {
+	sm: a.sizeSm,
+	md: a.sizeMd,
+	lg: a.sizeLg
+}, re = {
+	neutral: a.toneNeutral,
+	primary: a.tonePrimary,
+	accent: a.toneAccent,
+	success: a.toneSuccess,
+	warning: a.toneWarning,
+	danger: a.toneDanger,
+	info: a.toneInfo
+}, ie = 100, d = (e, t, n) => Math.min(n, Math.max(t, e)), f = (e) => {
+	let t = String(e);
+	if (t.includes("e-")) return Number(t.split("e-")[1]);
+	let n = t.indexOf(".");
+	return n === -1 ? 0 : t.length - n - 1;
+};
+function ae(e, t, n, r) {
+	let i = t + Math.round((e - t) / n) * n;
+	return Number(i.toFixed(r));
+}
+var oe = (e, t, n) => n > t ? (d(e, t, n) - t) / (n - t) * 100 : 0;
+function p(p) {
+	let { value: se, defaultValue: ce, onValueChange: le, onValueCommit: ue, min: m = 0, max: h = 100, step: g = 1, largeStep: _, orientation: v = "horizontal", size: de, tone: fe = "primary", disabled: pe, readOnly: me, invalid: he, inverted: y = !1, minStepsBetweenThumbs: ge = 0, marks: b, showValue: x = "never", formatValue: S, getAriaValueText: _e, name: ve, thumbLabels: ye, "aria-label": be, "aria-labelledby": xe, "aria-describedby": Se, id: Ce, className: we, style: Te, onPointerEnter: Ee, ...De } = p, Oe = r(), C = i({
+		id: Ce,
+		invalid: he,
+		disabled: pe,
+		readOnly: me,
+		size: de,
+		"aria-describedby": Se
+	}, { nativeRequired: !1 }), { disabled: w, readOnly: T, invalid: E } = C, ke = C.size ?? "md", Ae = !w && !T, D = g > 0 ? g : 1, O = _ && _ > 0 ? _ : D * 10, k = f(D) + Math.max(0, f(m) - f(D)), A = Math.max(0, ge) * D, [j, M] = e({
+		value: se,
+		defaultValue: ce ?? m,
+		onChange: le
+	});
+	t(() => I.current, () => M(ce ?? m), se === void 0);
+	let N = Array.isArray(j), P = N ? [d(j[0], m, h), d(j[1], m, h)] : [d(j, m, h)], F = s(P);
+	F.current = P;
+	let I = s(null), L = s(null), R = s([]), [z, B] = c(null), [V, H] = c(!1), [je, U] = c(!1), W = s(!1), Me = ee(), Ne = (e) => e === 0 && C.id ? C.id : `${Me}-thumb-${e}`, G = o((e, t) => t.length < 2 ? [m, h] : e === 0 ? [m, Math.max(m, t[1] - A)] : [Math.min(h, t[0] + A), h], [
+		m,
+		h,
+		A
+	]), K = (e) => e.length === 2 ? [e[0], e[1]] : e[0], q = o((e, t) => {
+		let n = F.current, [r, i] = G(e, n), a = d(ae(d(t, m, h), m, D, k), r, i);
+		if (a === n[e]) return;
+		let o = [...n];
+		o[e] = a, F.current = o, U(!1), M(K(o));
+	}, [
+		G,
+		m,
+		h,
+		D,
+		k,
+		M
+	]), Pe = () => v === "horizontal" && !!I.current && getComputedStyle(I.current).direction === "rtl", Fe = (e, t) => {
+		let n = L.current;
+		if (!n) return m;
+		let r = n.getBoundingClientRect(), i = v === "horizontal" ? r.width > 0 ? (e - r.left) / r.width : 0 : r.height > 0 ? (r.bottom - t) / r.height : 0;
+		return Pe() && (i = 1 - i), y && (i = 1 - i), m + d(i, 0, 1) * (h - m);
+	}, Ie = (e) => {
+		let t = F.current;
+		if (t.length < 2) return 0;
+		let n = Math.abs(e - t[0]), r = Math.abs(e - t[1]);
+		return n === r ? +(e > t[0]) : n < r ? 0 : 1;
+	}, Le = (e) => {
+		if (!Ae || e.button !== 0) return;
+		e.preventDefault();
+		let t = e.target.closest("[data-mark-value]")?.dataset.markValue, n = t === void 0 ? Fe(e.clientX, e.clientY) : Number(t), r = Ie(n);
+		B(r), H(!0), e.currentTarget.setPointerCapture(e.pointerId), R.current[r]?.focus({ preventScroll: !0 }), q(r, n);
+	}, Re = (e) => {
+		V && z !== null && q(z, Fe(e.clientX, e.clientY));
+	}, J = (e) => {
+		V && (e.currentTarget.hasPointerCapture(e.pointerId) && e.currentTarget.releasePointerCapture(e.pointerId), H(!1), B(null), ue?.(K(F.current)));
+	}, ze = (e) => (t) => {
+		if (t.key === "Escape" && x === "hover") {
+			U(!0);
+			return;
+		}
+		if (!Ae) return;
+		let n = F.current[e], r = t.shiftKey ? O : D, i = v === "horizontal" && Pe() !== y, a = v === "vertical" && y, o = null;
+		switch (t.key) {
+			case "ArrowRight":
+				o = n + (i ? -r : r);
+				break;
+			case "ArrowLeft":
+				o = n - (i ? -r : r);
+				break;
+			case "ArrowUp":
+				o = n + (a ? -r : r);
+				break;
+			case "ArrowDown":
+				o = n - (a ? -r : r);
+				break;
+			case "PageUp":
+				o = n + O;
+				break;
+			case "PageDown":
+				o = n - O;
+				break;
+			case "Home":
+				o = m;
+				break;
+			case "End":
+				o = h;
+				break;
+			default: return;
+		}
+		t.preventDefault(), W.current = !0, q(e, o);
+	}, Be = () => {
+		W.current && (W.current = !1, ue?.(K(F.current)));
+	}, Y = te(() => {
+		if (!b) return [];
+		if (Array.isArray(b)) return b.filter((e) => e.value >= m && e.value <= h);
+		let e = Math.floor((h - m) / D);
+		return e > ie ? [] : Array.from({ length: e + 1 }, (e, t) => ({ value: Number((m + t * D).toFixed(k)) }));
+	}, [
+		b,
+		m,
+		h,
+		D,
+		k
+	]), Ve = Y.some((e) => e.label), X = (e) => {
+		let t = oe(e, m, h);
+		return y ? 100 - t : t;
+	}, Z = v === "horizontal" ? "insetInlineStart" : "insetBlockEnd", He = v === "horizontal" ? "inlineSize" : "blockSize", Ue = X(N ? P[0] : m), We = X(N ? P[1] : P[0]), Q = Math.min(Ue, We), Ge = Math.max(Ue, We), Ke = (e) => {
+		let t = X(e);
+		return t >= Q && t <= Ge;
+	}, qe = {
+		[Z]: `${Q}%`,
+		[He]: `${Ge - Q}%`
+	}, $ = xe ?? Oe?.labelId, Je = (e) => S ? S(e) : String(e), Ye = (e, t) => _e ? _e(e, t) : S ? S(e) : void 0, Xe = E ? "danger" : fe;
+	return /* @__PURE__ */ u("div", {
+		...De,
+		ref: (e) => {
+			I.current = e;
+			let { ref: t } = p;
+			if (typeof t == "function") return t(e);
+			t && (t.current = e);
+		},
+		role: N ? "group" : void 0,
+		"aria-labelledby": N ? $ : void 0,
+		"aria-label": N && !$ ? be : void 0,
+		className: n(a.root, ne[ke], re[Xe], v === "vertical" ? a.vertical : a.horizontal, we),
+		style: Te,
+		"data-orientation": v,
+		"data-disabled": w || void 0,
+		"aria-disabled": w || void 0,
+		"data-readonly": T || void 0,
+		"data-invalid": E || void 0,
+		"data-dragging": V || void 0,
+		"data-show-value": x,
+		"data-bubble-dismissed": je || void 0,
+		onPointerEnter: (e) => {
+			U(!1), Ee?.(e);
+		},
+		children: [/* @__PURE__ */ u("div", {
+			className: a.control,
+			onPointerDown: Le,
+			onPointerMove: Re,
+			onPointerUp: J,
+			onPointerCancel: J,
+			onLostPointerCapture: (e) => {
+				V && J(e);
+			},
+			children: [/* @__PURE__ */ u("div", {
+				ref: L,
+				className: a.rail,
+				children: [
+					/* @__PURE__ */ l("div", {
+						className: a.track,
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ l("div", {
+							className: a.range,
+							style: qe
+						})
+					}),
+					Y.map((e) => /* @__PURE__ */ l("span", {
+						className: a.tick,
+						"data-in-range": Ke(e.value) || void 0,
+						style: { [Z]: `${X(e.value)}%` },
+						"aria-hidden": "true"
+					}, `tick-${e.value}`)),
+					P.map((e, t) => {
+						let [n, r] = G(t, P), i = ye?.[t];
+						return /* @__PURE__ */ u("span", {
+							ref: (e) => {
+								R.current[t] = e;
+							},
+							id: Ne(t),
+							role: "slider",
+							tabIndex: w ? -1 : 0,
+							className: a.thumb,
+							style: { [Z]: `${X(e)}%` },
+							"data-active": z === t || void 0,
+							"aria-valuemin": n,
+							"aria-valuemax": r,
+							"aria-valuenow": e,
+							"aria-valuetext": Ye(e, t),
+							"aria-orientation": v,
+							"aria-disabled": w || void 0,
+							"aria-readonly": T || void 0,
+							"aria-label": i ?? ($ ? void 0 : be),
+							"aria-labelledby": i ? void 0 : $,
+							...C.ariaProps,
+							"aria-required": void 0,
+							onKeyDown: ze(t),
+							onKeyUp: Be,
+							onFocus: () => U(!1),
+							children: [/* @__PURE__ */ l("span", {
+								className: a.knob,
+								"aria-hidden": "true"
+							}), x !== "never" && /* @__PURE__ */ l("span", {
+								className: a.bubble,
+								"aria-hidden": "true",
+								children: Je(e)
+							})]
+						}, t);
+					})
+				]
+			}), Ve && /* @__PURE__ */ l("div", {
+				className: a.marks,
+				"aria-hidden": "true",
+				children: Y.filter((e) => e.label).map((e) => /* @__PURE__ */ l("span", {
+					className: a.markAnchor,
+					style: { [Z]: `${X(e.value)}%` },
+					children: /* @__PURE__ */ l("span", {
+						className: a.markLabel,
+						"data-mark-value": e.value,
+						children: e.label
+					})
+				}, `label-${e.value}`))
+			})]
+		}), ve && P.map((e, t) => /* @__PURE__ */ l("input", {
+			type: "hidden",
+			name: ve,
+			value: e,
+			disabled: w
+		}, t))]
+	});
+}
+//#endregion
+export { p as Slider };

package/dist/components/forms/Slider/Slider.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_tonePrimary_dj5ma_27`,t=`_toneNeutral_dj5ma_37`,n=`_toneAccent_dj5ma_47`,r=`_toneSuccess_dj5ma_57`,i=`_toneWarning_dj5ma_67`,a=`_toneDanger_dj5ma_77`,o=`_toneInfo_dj5ma_87`,s=`_sizeSm_dj5ma_101`,c=`_sizeMd_dj5ma_113`,l=`_sizeLg_dj5ma_125`,u=`_root_dj5ma_145`,d=`_horizontal_dj5ma_159`,f=`_vertical_dj5ma_169`,p=`_control_dj5ma_179`,m=`_rail_dj5ma_219`,h=`_track_dj5ma_245`,g=`_range_dj5ma_287`,_=`_tick_dj5ma_319`,v=`_thumb_dj5ma_373`,y=`_knob_dj5ma_461`,b=`_bubble_dj5ma_521`,x=`_marks_dj5ma_687`,S=`_markAnchor_dj5ma_725`,C=`_markLabel_dj5ma_745`,w={tonePrimary:e,toneNeutral:t,toneAccent:n,toneSuccess:r,toneWarning:i,toneDanger:a,toneInfo:o,sizeSm:s,sizeMd:c,sizeLg:l,root:u,horizontal:d,vertical:f,control:p,rail:m,track:h,range:g,tick:_,thumb:v,knob:y,bubble:b,marks:x,markAnchor:S,markLabel:C};exports.bubble=b,exports.control=p,exports.default=w,exports.horizontal=d,exports.knob=y,exports.markAnchor=S,exports.markLabel=C,exports.marks=x,exports.rail=m,exports.range=g,exports.root=u,exports.sizeLg=l,exports.sizeMd=c,exports.sizeSm=s,exports.thumb=v,exports.tick=_,exports.toneAccent=n,exports.toneDanger=a,exports.toneInfo=o,exports.toneNeutral=t,exports.tonePrimary=e,exports.toneSuccess=r,exports.toneWarning=i,exports.track=h,exports.vertical=f;

package/dist/components/forms/Slider/Slider.module.css.mjs

@@ -0,0 +1,29 @@
+//#region src/components/forms/Slider/Slider.module.css
+var e = "_tonePrimary_dj5ma_27", t = "_toneNeutral_dj5ma_37", n = "_toneAccent_dj5ma_47", r = "_toneSuccess_dj5ma_57", i = "_toneWarning_dj5ma_67", a = "_toneDanger_dj5ma_77", o = "_toneInfo_dj5ma_87", s = "_sizeSm_dj5ma_101", c = "_sizeMd_dj5ma_113", l = "_sizeLg_dj5ma_125", u = "_root_dj5ma_145", d = "_horizontal_dj5ma_159", f = "_vertical_dj5ma_169", p = "_control_dj5ma_179", m = "_rail_dj5ma_219", h = "_track_dj5ma_245", g = "_range_dj5ma_287", _ = "_tick_dj5ma_319", v = "_thumb_dj5ma_373", y = "_knob_dj5ma_461", b = "_bubble_dj5ma_521", x = "_marks_dj5ma_687", S = "_markAnchor_dj5ma_725", C = "_markLabel_dj5ma_745", w = {
+	tonePrimary: e,
+	toneNeutral: t,
+	toneAccent: n,
+	toneSuccess: r,
+	toneWarning: i,
+	toneDanger: a,
+	toneInfo: o,
+	sizeSm: s,
+	sizeMd: c,
+	sizeLg: l,
+	root: u,
+	horizontal: d,
+	vertical: f,
+	control: p,
+	rail: m,
+	track: h,
+	range: g,
+	tick: _,
+	thumb: v,
+	knob: y,
+	bubble: b,
+	marks: x,
+	markAnchor: S,
+	markLabel: C
+};
+//#endregion
+export { b as bubble, p as control, w as default, d as horizontal, y as knob, S as markAnchor, C as markLabel, x as marks, m as rail, g as range, u as root, l as sizeLg, c as sizeMd, s as sizeSm, v as thumb, _ as tick, n as toneAccent, a as toneDanger, o as toneInfo, t as toneNeutral, e as tonePrimary, r as toneSuccess, i as toneWarning, h as track, f as vertical };

package/dist/components/forms/Slider/index.d.ts

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

package/dist/components/forms/Switch/Switch.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useFormReset.cjs.js"),n=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),r=require("../../../utils/cx.cjs.js"),i=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),a=require("../../primitives/Icon/icons.cjs.js"),o=require("../Field/FieldContext.cjs.js"),s=require("./Switch.module.css.cjs.js");let c=require("react"),l=require("react/jsx-runtime");var u={sm:s.default.sm,md:s.default.md,lg:s.default.lg},d={neutral:s.default.neutral,primary:s.default.primary,accent:s.default.accent,success:s.default.success,warning:s.default.warning,danger:s.default.danger,info:s.default.info},f={start:s.default.start,end:s.default.end,between:s.default.between};function p({checked:p,defaultChecked:m=!1,onCheckedChange:h,label:g,description:_,labelPosition:v=`end`,size:y,tone:b=`primary`,invalid:x,disabled:S,required:C,readOnly:w,thumbIcon:T,showStateLabels:ee=!1,stateLabels:te,loading:E=!1,loadingLabel:D,className:O,style:k,id:A,onChange:j,"aria-describedby":M,"aria-labelledby":N,"aria-label":P,ref:F,...I}){let L=n.useMessages(),R=te??{on:L.switch.on,off:L.switch.off},z=D??L.switch.saving,B=(0,c.useId)(),V=`${B}-label`,H=`${B}-description`,U=`${B}-loading`,W=g!=null&&g!==!1,G=_!=null&&_!==!1,K=o.useFieldControl({id:A,invalid:x,required:C,disabled:S,readOnly:w,size:y,"aria-describedby":[M,G&&H,E&&U].filter(Boolean).join(` `)||void 0}),q=K.size??`md`,J=o.useFieldContext(),Y=N??(W?V:P===void 0&&J&&!J.isGroup?J.labelId:void 0),[X,Z]=e.useControllableState({value:p,defaultValue:m,onChange:h});t.useFormReset(()=>K.id?document.getElementById(K.id):null,()=>Z(m??!1),p===void 0);let ne=K.readOnly||E,re=e=>{ne||(Z(e.target.checked),j?.(e))},ie=(0,l.jsxs)(`span`,{className:s.default.control,children:[(0,l.jsx)(`input`,{...I,...K.ariaProps,ref:F,id:K.id,type:`checkbox`,role:`switch`,className:s.default.input,checked:X,onChange:re,disabled:K.disabled,required:K.required,"aria-label":P,"aria-labelledby":Y,"aria-readonly":K.readOnly||void 0,"aria-busy":E||void 0}),(0,l.jsx)(`span`,{className:s.default.track,"aria-hidden":`true`,children:(0,l.jsx)(`span`,{className:s.default.thumb,children:E?(0,l.jsx)(a.LoaderIcon,{spin:!0,className:s.default.thumbIcon}):T&&(0,l.jsx)(`span`,{className:s.default.thumbIcon,children:X?T.on:T.off})})}),ee&&(0,l.jsxs)(`span`,{className:s.default.stateLabels,"aria-hidden":`true`,children:[(0,l.jsx)(`span`,{className:s.default.stateOn,children:R.on}),(0,l.jsx)(`span`,{className:s.default.stateOff,children:R.off})]})]}),Q=W||G?(0,l.jsxs)(`span`,{className:s.default.text,children:[W&&(0,l.jsx)(`span`,{id:V,className:s.default.label,children:g}),G&&(0,l.jsx)(`span`,{id:H,className:s.default.description,children:_})]}):null,$=v!==`end`;return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(`label`,{className:r.cx(s.default.root,u[q],d[b],f[v],O),style:k,"data-checked":X||void 0,"data-disabled":K.disabled||void 0,"data-invalid":K.invalid||void 0,"data-readonly":K.readOnly||void 0,"data-loading":E||void 0,children:[$&&Q,ie,!$&&Q,E&&(0,l.jsx)(`span`,{id:U,hidden:!0,children:z})]}),(0,l.jsx)(i.VisuallyHidden,{role:`status`,children:E?z:``})]})}exports.Switch=p;

package/dist/components/forms/Switch/Switch.d.ts

@@ -0,0 +1,62 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+import { Size, Tone } from '../../../types/common';
+/**
+ * Where the label sits relative to the switch.
+ * - `end`: switch first, label after it (default).
+ * - `start`: label first, switch after it.
+ * - `between`: label at the start and switch at the end of a full-width row (settings lists).
+ */
+export type SwitchLabelPosition = "start" | "end" | "between";
+/** Content for the on and off states (thumb icons, state labels). */
+export interface SwitchStateContent {
+    /** Shown while the switch is on. */
+    on: ReactNode;
+    /** Shown while the switch is off. */
+    off: ReactNode;
+}
+export interface SwitchProps extends Omit<ComponentPropsWithRef<"input">, "type" | "size" | "role" | "checked" | "defaultChecked" | "children"> {
+    /** Whether the switch is on (controlled). */
+    checked?: boolean;
+    /** Initial on state when uncontrolled. */
+    defaultChecked?: boolean;
+    /** Called with the next on state whenever the user toggles the switch. */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Visible label. The whole label is clickable. When omitted, give the switch
+     * a name with `aria-label`, `aria-labelledby`, or a surrounding `Field`.
+     */
+    label?: ReactNode;
+    /** Supporting text under the label, linked with `aria-describedby`. */
+    description?: ReactNode;
+    /** Where the label sits relative to the switch. `between` fills the row and pushes them apart. */
+    labelPosition?: SwitchLabelPosition;
+    /** Track, thumb, and label size. Defaults to the surrounding Field's size, then `md`. */
+    size?: Size;
+    /** Track color while on. */
+    tone?: Tone;
+    /** Marks the switch invalid (`aria-invalid` and a danger border). Inherited from Field. */
+    invalid?: boolean;
+    /** Disables the switch. Inherited from Field. */
+    disabled?: boolean;
+    /** Marks the switch as required for form submission. Inherited from Field. */
+    required?: boolean;
+    /** Keeps the switch focusable and announced, but blocks toggling (`aria-readonly`). Inherited from Field. */
+    readOnly?: boolean;
+    /** Decorative icons shown inside the thumb for each state, e.g. `{ on: <CheckIcon />, off: <CloseIcon /> }`. */
+    thumbIcon?: Partial<SwitchStateContent>;
+    /** Shows visible state text next to the track, so the state doesn't rely on color or position alone. */
+    showStateLabels?: boolean;
+    /** Text for `showStateLabels`. Defaults to "On" and "Off". */
+    stateLabels?: SwitchStateContent;
+    /** Shows a spinner in the thumb, sets `aria-busy`, and blocks toggling while a change is saved. */
+    loading?: boolean;
+    /** Screen-reader text added to the description while `loading`. Defaults to "Saving". */
+    loadingLabel?: string;
+}
+/**
+ * An on/off toggle for settings that take effect immediately. Renders a
+ * native `<input type="checkbox" role="switch">` under a pill track, so Space
+ * toggles it, forms submit it, and screen readers announce "on" or "off".
+ * Works standalone or inside a `Field`.
+ */
+export declare function Switch({ checked: checkedProp, defaultChecked, onCheckedChange, label, description, labelPosition, size: sizeProp, tone, invalid: invalidProp, disabled: disabledProp, required: requiredProp, readOnly: readOnlyProp, thumbIcon, showStateLabels, stateLabels: stateLabelsProp, loading, loadingLabel: loadingLabelProp, className, style, id: idProp, onChange, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, ref, ...inputProps }: SwitchProps): import("react").JSX.Element;

package/dist/components/forms/Switch/Switch.mjs

@@ -0,0 +1,135 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useFormReset as t } from "../../../hooks/useFormReset.mjs";
+import { useMessages as n } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { cx as r } from "../../../utils/cx.mjs";
+import { VisuallyHidden as i } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { LoaderIcon as a } from "../../primitives/Icon/icons.mjs";
+import { useFieldContext as o, useFieldControl as s } from "../Field/FieldContext.mjs";
+import c from "./Switch.module.css.mjs";
+import { useId as ee } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/forms/Switch/Switch.tsx
+var te = {
+	sm: c.sm,
+	md: c.md,
+	lg: c.lg
+}, f = {
+	neutral: c.neutral,
+	primary: c.primary,
+	accent: c.accent,
+	success: c.success,
+	warning: c.warning,
+	danger: c.danger,
+	info: c.info
+}, p = {
+	start: c.start,
+	end: c.end,
+	between: c.between
+};
+function m({ checked: m, defaultChecked: h = !1, onCheckedChange: g, label: _, description: v, labelPosition: y = "end", size: b, tone: x = "primary", invalid: S, disabled: ne, required: re, readOnly: ie, thumbIcon: C, showStateLabels: w = !1, stateLabels: T, loading: E = !1, loadingLabel: D, className: O, style: k, id: A, onChange: j, "aria-describedby": M, "aria-labelledby": N, "aria-label": P, ref: F, ...I }) {
+	let L = n(), R = T ?? {
+		on: L.switch.on,
+		off: L.switch.off
+	}, z = D ?? L.switch.saving, B = ee(), V = `${B}-label`, H = `${B}-description`, U = `${B}-loading`, W = _ != null && _ !== !1, G = v != null && v !== !1, K = s({
+		id: A,
+		invalid: S,
+		required: re,
+		disabled: ne,
+		readOnly: ie,
+		size: b,
+		"aria-describedby": [
+			M,
+			G && H,
+			E && U
+		].filter(Boolean).join(" ") || void 0
+	}), q = K.size ?? "md", J = o(), Y = N ?? (W ? V : P === void 0 && J && !J.isGroup ? J.labelId : void 0), [X, Z] = e({
+		value: m,
+		defaultValue: h,
+		onChange: g
+	});
+	t(() => K.id ? document.getElementById(K.id) : null, () => Z(h ?? !1), m === void 0);
+	let ae = K.readOnly || E, oe = (e) => {
+		ae || (Z(e.target.checked), j?.(e));
+	}, se = /* @__PURE__ */ d("span", {
+		className: c.control,
+		children: [
+			/* @__PURE__ */ u("input", {
+				...I,
+				...K.ariaProps,
+				ref: F,
+				id: K.id,
+				type: "checkbox",
+				role: "switch",
+				className: c.input,
+				checked: X,
+				onChange: oe,
+				disabled: K.disabled,
+				required: K.required,
+				"aria-label": P,
+				"aria-labelledby": Y,
+				"aria-readonly": K.readOnly || void 0,
+				"aria-busy": E || void 0
+			}),
+			/* @__PURE__ */ u("span", {
+				className: c.track,
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ u("span", {
+					className: c.thumb,
+					children: E ? /* @__PURE__ */ u(a, {
+						spin: !0,
+						className: c.thumbIcon
+					}) : C && /* @__PURE__ */ u("span", {
+						className: c.thumbIcon,
+						children: X ? C.on : C.off
+					})
+				})
+			}),
+			w && /* @__PURE__ */ d("span", {
+				className: c.stateLabels,
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ u("span", {
+					className: c.stateOn,
+					children: R.on
+				}), /* @__PURE__ */ u("span", {
+					className: c.stateOff,
+					children: R.off
+				})]
+			})
+		]
+	}), Q = W || G ? /* @__PURE__ */ d("span", {
+		className: c.text,
+		children: [W && /* @__PURE__ */ u("span", {
+			id: V,
+			className: c.label,
+			children: _
+		}), G && /* @__PURE__ */ u("span", {
+			id: H,
+			className: c.description,
+			children: v
+		})]
+	}) : null, $ = y !== "end";
+	return /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ d("label", {
+		className: r(c.root, te[q], f[x], p[y], O),
+		style: k,
+		"data-checked": X || void 0,
+		"data-disabled": K.disabled || void 0,
+		"data-invalid": K.invalid || void 0,
+		"data-readonly": K.readOnly || void 0,
+		"data-loading": E || void 0,
+		children: [
+			$ && Q,
+			se,
+			!$ && Q,
+			E && /* @__PURE__ */ u("span", {
+				id: U,
+				hidden: !0,
+				children: z
+			})
+		]
+	}), /* @__PURE__ */ u(i, {
+		role: "status",
+		children: E ? z : ""
+	})] });
+}
+//#endregion
+export { m as Switch };

package/dist/components/forms/Switch/Switch.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_1lkta_29`,t=`_sm_1lkta_113`,n=`_md_1lkta_129`,r=`_lg_1lkta_145`,i=`_neutral_1lkta_169`,a=`_primary_1lkta_185`,o=`_accent_1lkta_201`,s=`_success_1lkta_217`,c=`_warning_1lkta_233`,l=`_danger_1lkta_249`,u=`_info_1lkta_265`,d=`_end_1lkta_303`,f=`_start_1lkta_305`,p=`_between_1lkta_315`,m=`_control_1lkta_333`,h=`_input_1lkta_353`,g=`_track_1lkta_379`,_=`_thumb_1lkta_409`,v=`_thumbIcon_1lkta_473`,y=`_stateLabels_1lkta_501`,b=`_stateOn_1lkta_523`,x=`_stateOff_1lkta_525`,S=`_text_1lkta_555`,C=`_label_1lkta_579`,w=`_description_1lkta_589`,T={root:e,sm:t,md:n,lg:r,neutral:i,primary:a,accent:o,success:s,warning:c,danger:l,info:u,end:d,start:f,between:p,control:m,input:h,track:g,thumb:_,thumbIcon:v,stateLabels:y,stateOn:b,stateOff:x,text:S,label:C,description:w};exports.accent=o,exports.between=p,exports.control=m,exports.danger=l,exports.default=T,exports.description=w,exports.end=d,exports.info=u,exports.input=h,exports.label=C,exports.lg=r,exports.md=n,exports.neutral=i,exports.primary=a,exports.root=e,exports.sm=t,exports.start=f,exports.stateLabels=y,exports.stateOff=x,exports.stateOn=b,exports.success=s,exports.text=S,exports.thumb=_,exports.thumbIcon=v,exports.track=g,exports.warning=c;

package/dist/components/forms/Switch/Switch.module.css.mjs

@@ -0,0 +1,30 @@
+//#region src/components/forms/Switch/Switch.module.css
+var e = "_root_1lkta_29", t = "_sm_1lkta_113", n = "_md_1lkta_129", r = "_lg_1lkta_145", i = "_neutral_1lkta_169", a = "_primary_1lkta_185", o = "_accent_1lkta_201", s = "_success_1lkta_217", c = "_warning_1lkta_233", l = "_danger_1lkta_249", u = "_info_1lkta_265", d = "_end_1lkta_303", f = "_start_1lkta_305", p = "_between_1lkta_315", m = "_control_1lkta_333", h = "_input_1lkta_353", g = "_track_1lkta_379", _ = "_thumb_1lkta_409", v = "_thumbIcon_1lkta_473", y = "_stateLabels_1lkta_501", b = "_stateOn_1lkta_523", x = "_stateOff_1lkta_525", S = "_text_1lkta_555", C = "_label_1lkta_579", w = "_description_1lkta_589", T = {
+	root: e,
+	sm: t,
+	md: n,
+	lg: r,
+	neutral: i,
+	primary: a,
+	accent: o,
+	success: s,
+	warning: c,
+	danger: l,
+	info: u,
+	end: d,
+	start: f,
+	between: p,
+	control: m,
+	input: h,
+	track: g,
+	thumb: _,
+	thumbIcon: v,
+	stateLabels: y,
+	stateOn: b,
+	stateOff: x,
+	text: S,
+	label: C,
+	description: w
+};
+//#endregion
+export { o as accent, p as between, m as control, l as danger, T as default, w as description, d as end, u as info, h as input, C as label, r as lg, n as md, i as neutral, a as primary, e as root, t as sm, f as start, y as stateLabels, x as stateOff, b as stateOn, s as success, S as text, _ as thumb, v as thumbIcon, g as track, c as warning };

package/dist/components/forms/Switch/index.d.ts

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

package/dist/components/forms/TagInput/TagInput.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),n=require("../../../utils/refs.cjs.js"),r=require("../../../utils/cx.cjs.js"),i=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),a=require("../../primitives/Icon/icons.cjs.js"),o=require("../../data-display/Chip/Chip.cjs.js"),s=require("../Field/FieldContext.cjs.js"),c=require("./TagInput.module.css.cjs.js");let l=require("react"),u=require("react/jsx-runtime");var ee={sm:`sm`,md:`md`,lg:`lg`},te={sm:c.default.sm,md:c.default.md,lg:c.default.lg},d=e=>e.replace(/[.*+?^${}()|[\]\\]/g,`\\$&`);function f(e,t){return{",":t.comma,";":t.semicolon," ":t.space,"|":t.pipe,"	":t.tab}[e]??t.other(e)}function ne(e,t,n,r){let i=[n.keys.enter,...t?[n.keys.tab]:[],...e.map(e=>f(e,n.keys))],a=Intl.ListFormat,o=a?new a(r,{type:`disjunction`}).format(i):i.join(`, `);return n.instructions(o)}var p=({value:f,defaultValue:p,onValueChange:re,inputValue:ie,defaultInputValue:m,onInputValueChange:ae,delimiters:h=[`,`],addOnTab:g=!1,addOnBlur:oe=!1,allowDuplicates:se=!1,maxTags:_,validate:ce,transform:le,size:ue,disabled:de,readOnly:fe,invalid:pe,required:me,placeholder:he,name:ge,chipVariant:_e,chipTone:ve,removeLabel:ye,tagListLabel:be,instructions:xe,messages:Se,className:Ce,inputClassName:we,style:Te,ref:v,id:Ee,onChange:De,onKeyDown:Oe,onPaste:ke,onBlur:Ae,form:y,"aria-describedby":je,"aria-labelledby":b,...x})=>{let{messages:S,locale:Me}=t.useLocale(),Ne=ye??S.tagInput.remove,C={...S.tagInput,...Se},w=(0,l.useId)(),T=`${w}-instructions`,E=`${w}-error`,D=`${w}-max`,O=s.useFieldContext(),[k,A]=e.useControllableState({value:f,defaultValue:p??[],onChange:re}),[j,M]=e.useControllableState({value:ie,defaultValue:m??``,onChange:ae}),[N,P]=(0,l.useState)(null),[Pe,F]=(0,l.useState)(null),[I,L]=(0,l.useState)(null),[R,Fe]=(0,l.useState)({text:``,n:0}),z=_!==void 0&&k.length>=_,Ie=[je,T,z?D:void 0,N?E:void 0].filter(Boolean).join(` `)||void 0,B=s.useFieldControl({id:Ee,invalid:pe,required:me,disabled:de,readOnly:fe,size:ue,"aria-describedby":Ie},{nativeRequired:!1}),V=B.size??`md`,Le=B.invalid||N!==null,H=!B.disabled&&!B.readOnly,U=(0,l.useRef)(null),W=(0,l.useRef)(null),Re=(0,l.useRef)([]),G=(0,l.useRef)(null),K=(0,l.useRef)(void 0),ze=(0,l.useCallback)(e=>{U.current=e,n.assignRef(v,e)},[v]);(0,l.useEffect)(()=>()=>window.clearTimeout(K.current),[]);let Be=e=>{e&&Fe(t=>({text:e,n:t.n+1}))},[Ve,He]=(0,l.useState)(0),q=()=>U.current?.focus(),J=e=>{let t=Re.current[e]?.querySelector(`button:not(:disabled)`);return t?(t.focus(),!0):!1};(0,l.useLayoutEffect)(()=>{let e=G.current;e!==null&&(G.current=null,!(e<k.length&&J(e))&&q())}),(0,l.useEffect)(()=>{let e=U.current;e&&e.setCustomValidity(B.required&&k.length===0?C.required:``)});let Ue=(0,l.useRef)(p??[]),We=(0,l.useRef)(m??``);(0,l.useEffect)(()=>{let e=U.current?.form??W.current?.closest(`form`);if(!e)return;let t=()=>{A(Ue.current),M(We.current),P(null)};return e.addEventListener(`reset`,t),()=>e.removeEventListener(`reset`,t)},[A,M]);let Y=h.length>0?new RegExp(h.map(d).join(`|`)):null,Ge=new RegExp([...h.map(d),`\\r?\\n`,`\\t`].join(`|`)),X=e=>{let t=[...k],n=[],r=[],i=[],a=null,o=!1;for(let s of e){let e=s.trim();if(!e)continue;let c=(le?le(e):e).trim();if(c){if(_!==void 0&&t.length>=_){o=!0;continue}if(!se&&t.includes(c)){r.push(c);continue}if(ce){let t=ce(c);if(t!==!0){a??=typeof t==`string`&&t?t:C.invalid(c),i.push(e);continue}}t.push(c),n.push(c)}}n.length>0&&A(t),P(a),r.length>0&&(window.clearTimeout(K.current),F(r[0]),L(C.duplicate(r[0])),K.current=window.setTimeout(()=>F(null),1200));let s=_!==void 0&&t.length>=_&&n.length>0,c=[n.length>0?C.added(n):null,...r.map(C.duplicate),a,o||s?C.maxReached(_):null].filter(Boolean);return Be(c.join(`. `)),{rejected:i,added:n.length>0}},Ke=e=>{let t=k[e];t!==void 0&&H&&(G.current=e,A(k.filter((t,n)=>n!==e)),P(null),Be(C.removed(t)))},Z=(e,t=``)=>{let n=h[0],r=n===void 0||n.trim()===``?` `:`${n} `;return[...e,t].filter(Boolean).join(r)},Q=()=>{let e=X([j]);return M(e.rejected.length>0?j:``),e},qe=e=>{De?.(e),I&&L(null);let t=e.target.value;if(Y&&Y.test(t)){let e=t.split(Y),n=e.pop()??``,r=X(e);M(Z(r.rejected,n));return}N&&P(null),M(t)},Je=e=>{if(ke?.(e),e.defaultPrevented)return;let t=e.clipboardData.getData(`text`);if(!Ge.test(t))return;e.preventDefault();let n=e.currentTarget,r=n.selectionStart??j.length,i=n.selectionEnd??j.length,a=j.slice(0,r)+t+j.slice(i),o=X(a.split(Ge));M(Z(o.rejected))},Ye=()=>W.current?getComputedStyle(W.current).direction===`rtl`:!1,Xe=e=>{if(Oe?.(e),e.defaultPrevented||e.nativeEvent.isComposing)return;let t=e.currentTarget,n=t.selectionStart===0&&t.selectionEnd===0,r=Ye()?`ArrowRight`:`ArrowLeft`;switch(e.key){case`Enter`:if(e.repeat){e.preventDefault();return}if(!j.trim())return;e.preventDefault(),Q();return;case`Tab`:{if(!g||e.shiftKey||!j.trim())return;let t=Q();t.added&&t.rejected.length===0&&e.preventDefault();return}case`Backspace`:if(e.repeat||j!==``||k.length===0)return;J(k.length-1)&&e.preventDefault();return;case r:if(!n||k.length===0||e.shiftKey)return;J(k.length-1)&&e.preventDefault();return;default:return}},Ze=e=>{Ae?.(e),oe&&j.trim()&&Q()},Qe=(e,t)=>{let n=Ye(),r=n?`ArrowRight`:`ArrowLeft`,i=n?`ArrowLeft`:`ArrowRight`,a=!0;switch(e.key){case r:t>0&&J(t-1);break;case i:t<k.length-1&&J(t+1)||q();break;case`Home`:J(0);break;case`End`:q();break;default:a=!1}a&&e.preventDefault()},$e=e=>{let t=U.current;if(!t||B.disabled)return;let n=e.target;n===t||n.closest(`button, a, input, [tabindex]`)||(e.preventDefault(),t.focus())},$=be===void 0?b??(O&&!O.isGroup?O.labelId:void 0):void 0,et=be??($?void 0:S.tagInput.list),tt=xe??ne(h,g,S.tagInput,Me),nt=k.length===0&&!z;return(0,u.jsxs)(`div`,{ref:W,className:r.cx(c.default.root,Ce),style:Te,"data-size":V,children:[(0,u.jsxs)(`div`,{className:r.cx(c.default.box,te[V],k.length>0&&c.default.hasTags,Le&&c.default.invalid,B.disabled&&c.default.disabled,B.readOnly&&!B.disabled&&c.default.readOnly),onPointerDown:$e,children:[k.length>0&&(0,u.jsx)(`ul`,{className:c.default.list,"aria-labelledby":$,"aria-label":et,"aria-describedby":B.readOnly?B.ariaProps[`aria-describedby`]:void 0,children:k.map((e,t)=>(0,u.jsx)(`li`,{ref:e=>{Re.current[t]=e},className:c.default.item,"data-highlighted":Pe===e||void 0,onKeyDown:e=>Qe(e,t),onFocus:()=>He(t),children:(0,u.jsx)(o.Chip,{size:ee[V],variant:_e,tone:ve,disabled:B.disabled,onRemove:H?()=>Ke(t):void 0,removeLabel:H?Ne(e):void 0,removeTabIndex:t===Math.min(Ve,k.length-1)?0:-1,children:e})},`${e}-${t}`))}),B.readOnly&&!B.disabled?k.length===0&&(0,u.jsx)(`span`,{className:c.default.empty,children:C.empty}):(0,u.jsx)(`input`,{...x,ref:ze,id:B.id,type:`text`,form:y,value:j,placeholder:nt?he:void 0,disabled:B.disabled,readOnly:z,autoComplete:x.autoComplete??`off`,...B.ariaProps,"aria-labelledby":b,"aria-invalid":Le||void 0,"aria-errormessage":N?E:B.ariaProps[`aria-errormessage`],className:r.cx(c.default.input,we),onChange:qe,onKeyDown:Xe,onPaste:Je,onBlur:Ze})]}),N&&(0,u.jsxs)(`p`,{id:E,className:c.default.error,children:[(0,u.jsx)(a.ErrorIcon,{size:`sm`,className:c.default.errorIcon}),(0,u.jsx)(`span`,{children:N})]}),(0,u.jsx)(i.VisuallyHidden,{id:T,children:tt}),I&&(0,u.jsx)(`p`,{className:c.default.limit,children:I}),z&&(0,u.jsx)(`p`,{id:D,className:c.default.limit,children:C.maxReached(_)}),(0,u.jsxs)(i.VisuallyHidden,{role:`status`,"aria-live":`polite`,"aria-atomic":`true`,children:[R.text,R.n%2==1?`\xA0`:``]}),ge!==void 0&&k.map((e,t)=>(0,u.jsx)(`input`,{type:`hidden`,name:ge,value:e,form:y,disabled:B.disabled},`${e}-${t}`))]})};exports.TagInput=p;