@vjdesigns/vjdesigns-ui 2.4.0 → 2.5.0

package/dist/components/forms/SearchInput/SearchInput.mjs

@@ -1,18 +1,19 @@
-import { en as e } from "../../../i18n/en.mjs";
-import { useControllableState as t } from "../../../hooks/useControllableState.mjs";
-import { useFormReset as n } from "../../../hooks/useFormReset.mjs";
-import { useMessages as r } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
-import { assignRef as i } from "../../../utils/refs.mjs";
-import { cx as ee } from "../../../utils/cx.mjs";
+"use client";
+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 { assignRef as r } from "../../../utils/refs.mjs";
+import { SearchIcon as ee } from "../../primitives/Icon/icons.mjs";
+import { KbdShortcut as i, useKbdPlatform as te } from "../../primitives/Kbd/Kbd.mjs";
 import { VisuallyHidden as a } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
-import { SearchIcon as o } from "../../primitives/Icon/icons.mjs";
-import { KbdShortcut as s, useKbdPlatform as te } from "../../primitives/Kbd/Kbd.mjs";
-import { useFieldContext as ne } from "../Field/FieldContext.mjs";
-import { Input as re } from "../Input/Input.mjs";
-import c from "./SearchInput.module.css.mjs";
+import { useFieldContext as o } from "../Field/FieldContext.mjs";
+import { Input as ne } from "../Input/Input.mjs";
+import s from "./SearchInput.module.css.mjs";
+import { useMessages as re } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { en as c } from "../../../i18n/en.mjs";
 import { createContext as l, useCallback as ie, useContext as ae, useEffect as u, useRef as d, useState as f } from "react";
 import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
-//#region src/components/forms/SearchInput/SearchInput.tsx
+// src/components/forms/SearchInput/SearchInput.tsx
 function oe(e, t) {
 	let n = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
 	n ? n.call(e, t) : e.value = t, e.dispatchEvent(new Event("input", { bubbles: !0 }));
@@ -56,165 +57,156 @@ function le(e) {
 	let n = e.key === " " ? "Space" : e.key === "escape" ? "Escape" : e.key;
 	return t.push(n.length === 1 ? n.toUpperCase() : n[0].toUpperCase() + n.slice(1)), t.join("+");
 }
-function v(t) {
-	return e.searchInput.results(t);
+function v(e) {
+	return c.searchInput.results(e);
 }
-var ue = l(null), y = ({ value: e, defaultValue: l = "", onValueChange: g, onSearch: v, debounce: y, minLength: b = 0, onClear: x, clearable: de = !0, clearLabel: fe, blurOnEscape: pe = !0, shortcut: S, shortcutEnabled: me = !0, shortcutPlatform: he, resultsCount: C, resultsLabel: ge, announceDelay: w = 700, radius: _e = "pill", size: T, loading: E = !1, startIcon: D, endIcon: O, endElement: ve, inputClassName: ye, autoComplete: be = "off", enterKeyHint: xe = "search", disabled: k, readOnly: A, ref: j, onChange: Se, onKeyDown: Ce, onFocus: we, onBlur: Te, "aria-label": M, "aria-labelledby": N, "aria-keyshortcuts": Ee, ...De }) => {
-	let P = r(), Oe = fe ?? P.searchInput.clear, F = ge ?? P.searchInput.results, [I, L] = t({
-		value: e,
+var ue = l(null), y = ({ value: c, defaultValue: l = "", onValueChange: g, onSearch: v, debounce: y, minLength: de = 0, onClear: b, clearable: fe = !0, clearLabel: pe, blurOnEscape: me = !0, shortcut: x, shortcutEnabled: he = !0, shortcutPlatform: ge, resultsCount: S, resultsLabel: _e, announceDelay: C = 700, radius: ve = "pill", size: w, loading: T = !1, startIcon: E, endIcon: D, endElement: ye, inputClassName: be, autoComplete: xe = "off", enterKeyHint: Se = "search", disabled: O, readOnly: k, ref: A, onChange: Ce, onKeyDown: we, onFocus: Te, onBlur: Ee, "aria-label": j, "aria-labelledby": M, "aria-keyshortcuts": De, ...Oe }) => {
+	let N = re(), ke = pe ?? N.searchInput.clear, P = _e ?? N.searchInput.results, [F, I] = e({
+		value: c,
 		defaultValue: l,
 		onChange: g
 	});
-	n(() => V.current, () => L(l ?? ""), e === void 0);
-	let R = ne(), z = ae(ue), B = te(he), V = d(null), ke = ie((e) => {
-		V.current = e, i(j, e);
-	}, [j]), Ae = k ?? R?.disabled ?? !1, je = A ?? R?.readOnly ?? !1, Me = T ?? R?.size ?? "md", H = d(v);
-	H.current = v;
-	let U = d(null), W = d(e ?? l), [G, K] = f(0), q = () => {
-		U.current != null && clearTimeout(U.current), U.current = null;
+	t(() => B.current, () => I(l ?? ""), c === void 0);
+	let L = o(), R = ae(ue), z = te(ge), B = d(null), Ae = ie((e) => {
+		B.current = e, r(A, e);
+	}, [A]), je = O ?? L?.disabled ?? !1, Me = k ?? L?.readOnly ?? !1, Ne = w ?? L?.size ?? "md", V = d(v);
+	V.current = v;
+	let H = d(null), U = d(c ?? l), [W, G] = f(0), K = () => {
+		H.current != null && clearTimeout(H.current), H.current = null;
 	};
-	u(() => q, []);
-	let J = (e) => {
-		q(), W.current = e, K((e) => e + 1), H.current?.(e);
-	}, Ne = (e) => {
-		if (y != null && (q(), e !== W.current)) {
-			if (e === "") {
-				J("");
-				return;
-			}
-			e.trim().length < b || (U.current = setTimeout(() => {
-				U.current = null, e !== W.current && J(e);
-			}, y));
-		}
-	}, Y = d(I);
-	Y.current = I;
-	let Pe = d(J);
-	Pe.current = J, u(() => {
-		if (!z) return;
-		let e = { search: () => (Pe.current(Y.current), Y.current) };
-		return z.current = e, () => {
-			z.current === e && (z.current = null);
+	u(() => K, []);
+	let q = (e) => {
+		K(), U.current = e, G((e) => e + 1), V.current?.(e);
+	}, Pe = (e) => {
+		y != null && (K(), e !== U.current && (e === "" ? q("") : e.trim().length < de || (H.current = setTimeout(() => {
+			H.current = null, e !== U.current && q(e);
+		}, y))));
+	}, J = d(F);
+	J.current = F;
+	let Fe = d(q);
+	Fe.current = q, u(() => {
+		if (!R) return;
+		let e = { search: () => (Fe.current(J.current), J.current) };
+		return R.current = e, () => {
+			R.current === e && (R.current = null);
 		};
-	}, [z]);
-	let X = d(!1), Fe = (e) => {
-		Se?.(e);
+	}, [R]);
+	let Y = d(!1), Ie = (e) => {
+		Ce?.(e);
 		let t = e.target.value;
-		L(t), K((e) => e + 1), X.current || Ne(t);
-	}, Ie = () => {
-		let e = V.current;
+		I(t), G((e) => e + 1), Y.current || Pe(t);
+	}, Le = () => {
+		let e = B.current;
 		if (e) {
-			X.current = !0;
+			Y.current = !0;
 			try {
 				oe(e, "");
 			} finally {
-				X.current = !1;
+				Y.current = !1;
 			}
-			q(), y != null && W.current !== "" && J(""), x?.();
+			K(), y != null && U.current !== "" && q(""), b?.();
 		}
-	}, Le = () => {
-		q(), x?.();
-	}, Re = (e) => {
-		if (Ce?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing)) {
+	}, Re = () => {
+		K(), b?.();
+	}, ze = (e) => {
+		if (we?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing)) {
 			if (e.key === "Enter") {
 				let t = e.currentTarget.form;
-				z && t ? (e.preventDefault(), typeof t.requestSubmit == "function" ? t.requestSubmit() : J(I)) : (t && v && e.preventDefault(), J(I));
-				return;
-			}
-			e.key === "Escape" && (I !== "" && !je ? (e.preventDefault(), e.stopPropagation(), Ie()) : pe && e.currentTarget.blur());
+				R && t ? (e.preventDefault(), typeof t.requestSubmit == "function" ? t.requestSubmit() : q(F)) : (t && v && e.preventDefault(), q(F));
+			} else e.key === "Escape" && (F !== "" && !Me ? (e.preventDefault(), e.stopPropagation(), Le()) : me && e.currentTarget.blur());
 		}
-	}, [ze, Z] = f(!1), Be = (e) => {
-		Z(!0), we?.(e);
-	}, Ve = (e) => {
-		Z(!1), Te?.(e);
-	}, He = S?.join("+") ?? "", Q = S ? _(S, B) : null, $ = Q != null && me && !Ae;
+	}, [Be, X] = f(!1), Ve = (e) => {
+		X(!0), Te?.(e);
+	}, He = (e) => {
+		X(!1), Ee?.(e);
+	}, Ue = x?.join("+") ?? "", Z = x ? _(x, z) : null, Q = Z != null && he && !je;
 	u(() => {
-		if (!$ || !S) return;
-		let e = _(S, B);
+		if (!Q || !x) return;
+		let e = _(x, z);
 		if (!e) return;
 		let t = (t) => {
 			if (t.defaultPrevented || t.isComposing) return;
-			let n = V.current;
+			let n = B.current;
 			n && !n.disabled && (t.target !== n && se(t.target) || ce(t, e) && n.getClientRects().length !== 0 && (t.preventDefault(), n.focus(), n.select()));
 		};
 		return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
 	}, [
-		$,
-		He,
-		B
+		Q,
+		Ue,
+		z
 	]);
-	let [Ue, We] = f(!1);
+	let [We, Ge] = f(!1);
 	u(() => {
-		let e = (V.current?.labels?.length ?? 0) > 0;
-		We((t) => t === e ? t : e);
+		let e = (B.current?.labels?.length ?? 0) > 0;
+		Ge((t) => t === e ? t : e);
 	});
-	let Ge = !M && !N && !R && !Ue, [Ke, qe] = f(""), Je = d(F);
-	Je.current = F, u(() => {
-		if (C == null || E || G === 0) return;
-		qe("");
-		let e = setTimeout(() => qe(Je.current(C)), w);
+	let Ke = !j && !M && !L && !We, [qe, Je] = f(""), Ye = d(P);
+	Ye.current = P, u(() => {
+		if (S == null || T || W === 0) return;
+		Je("");
+		let e = setTimeout(() => Je(Ye.current(S)), C);
 		return () => clearTimeout(e);
 	}, [
-		C,
-		E,
-		G,
-		w
+		S,
+		T,
+		W,
+		C
 	]);
-	let Ye = $ && !ze && I === "" && !E && S != null ? /* @__PURE__ */ m(s, {
-		keys: S,
-		size: Me === "lg" ? "md" : "sm",
-		platform: B,
-		className: c.hint
-	}) : null, Xe = Ye || O != null ? /* @__PURE__ */ h(p, { children: [Ye, O] }) : void 0;
-	return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(re, {
-		...De,
-		ref: ke,
+	let $ = Q && !Be && F === "" && !T && x != null ? /* @__PURE__ */ m(i, {
+		keys: x,
+		size: Ne === "lg" ? "md" : "sm",
+		platform: z,
+		className: s.hint
+	}) : null, Xe = $ || D != null ? /* @__PURE__ */ h(p, { children: [$, D] }) : void 0;
+	return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(ne, {
+		...Oe,
+		ref: Ae,
 		type: "search",
-		value: I,
-		size: T,
-		radius: _e,
-		loading: E,
-		disabled: k,
-		readOnly: A,
-		autoComplete: be,
-		enterKeyHint: xe,
-		"aria-label": M ?? (Ge ? P.searchInput.search : void 0),
-		"aria-labelledby": N,
-		"aria-keyshortcuts": Ee ?? ($ && Q ? le(Q) : void 0),
-		startIcon: D === void 0 ? /* @__PURE__ */ m(o, {}) : D,
+		value: F,
+		size: w,
+		radius: ve,
+		loading: T,
+		disabled: O,
+		readOnly: k,
+		autoComplete: xe,
+		enterKeyHint: Se,
+		"aria-label": j ?? (Ke ? N.searchInput.search : void 0),
+		"aria-labelledby": M,
+		"aria-keyshortcuts": De ?? (Q && Z ? le(Z) : void 0),
+		startIcon: E === void 0 ? /* @__PURE__ */ m(ee, {}) : E,
 		endIcon: Xe,
-		endElement: ve,
-		clearable: de,
-		clearLabel: Oe,
-		onClear: Le,
-		inputClassName: ee(c.input, ye),
-		onChange: Fe,
-		onKeyDown: Re,
-		onFocus: Be,
-		onBlur: Ve
+		endElement: ye,
+		clearable: fe,
+		clearLabel: ke,
+		onClear: Re,
+		inputClassName: n(s.input, be),
+		onChange: Ie,
+		onKeyDown: ze,
+		onFocus: Ve,
+		onBlur: He
 	}), /* @__PURE__ */ m(a, {
 		role: "status",
 		"aria-live": "polite",
 		"aria-atomic": "true",
-		children: Ke
+		children: qe
 	})] });
 };
-function b({ onSearch: e, onSubmit: t, className: n, children: r, noValidate: i = !0, ...a }) {
-	let o = d(null), s = (n) => {
+function de({ onSearch: e, onSubmit: t, className: r, children: ee, noValidate: i = !0, ...te }) {
+	let a = d(null), o = (n) => {
 		t?.(n), n.preventDefault();
 		let r;
-		r = o.current ? o.current.search() : n.currentTarget.querySelector("input[type=\"search\"]")?.value ?? "", e?.(r, n);
+		r = a.current ? a.current.search() : n.currentTarget.querySelector("input[type=\"search\"]")?.value ?? "", e?.(r, n);
 	};
 	return /* @__PURE__ */ m(ue.Provider, {
-		value: o,
+		value: a,
 		children: /* @__PURE__ */ m("form", {
-			...a,
+			...te,
 			role: "search",
 			noValidate: i,
-			className: ee(c.form, n),
-			onSubmit: s,
-			children: r
+			className: n(s.form, r),
+			onSubmit: o,
+			children: ee
 		})
 	});
 }
-//#endregion
-export { b as SearchForm, y as SearchInput, v as defaultResultsLabel };
+export { de as SearchForm, y as SearchInput, v as defaultResultsLabel };

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

@@ -1,8 +1,7 @@
-//#region src/components/forms/SearchInput/SearchInput.module.css
+// src/components/forms/SearchInput/SearchInput.module.css
 var e = "_input_1v7cb_15", t = "_hint_1v7cb_27", n = "_form_1v7cb_39", r = {
 	input: e,
 	hint: t,
 	form: n
 };
-//#endregion
 export { r as default, n as form, t as hint, e as input };

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

@@ -1 +1 @@
-const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useFormReset.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../Field/FieldContext.cjs.js"),i=require("./SegmentedControl.module.css.cjs.js");let a=require("react"),o=require("react/jsx-runtime");var s={sm:i.default.sm,md:i.default.md,lg:i.default.lg},c={neutral:i.default.toneNeutral,primary:i.default.tonePrimary},l={none:i.default.radiusNone,xs:i.default.radiusXs,sm:i.default.radiusSm,md:i.default.radiusMd,lg:i.default.radiusLg,xl:i.default.radiusXl,"2xl":i.default.radius2xl,pill:i.default.radiusPill},u={horizontal:i.default.horizontal,vertical:i.default.vertical},d=(0,a.createContext)(null);function f({value:e,icon:t,disabled:r,className:s,style:c,children:l,onChange:u,required:f,id:p,...m}){let h=(0,a.useContext)(d),g=(0,a.useId)(),_=p??g,v=!!(r||h?.disabled),y=h?h.value===e:!1,b=l!=null,x=t!=null;return(0,o.jsxs)(`label`,{htmlFor:_,style:c,"data-segment":``,"data-checked":y||void 0,"data-disabled":v||void 0,className:n.cx(i.default.segment,!b&&i.default.iconOnly,s),children:[(0,o.jsx)(`input`,{...m,id:_,type:`radio`,className:i.default.input,name:h?.name,value:e,checked:y,disabled:v,required:f??h?.required,"aria-invalid":m[`aria-invalid`]??(h?.itemInvalid?!0:void 0),"aria-describedby":[m[`aria-describedby`],h?.itemDescribedBy].filter(Boolean).join(` `)||void 0,onChange:t=>{u?.(t),!t.defaultPrevented&&t.target.checked&&h?.setValue(e)}}),(0,o.jsxs)(`span`,{className:i.default.content,children:[x&&(0,o.jsx)(`span`,{className:i.default.icon,"aria-hidden":`true`,children:t}),b&&(0,o.jsxs)(`span`,{className:i.default.labelStack,children:[(0,o.jsx)(`span`,{className:i.default.labelText,children:l}),(0,o.jsx)(`span`,{className:i.default.labelSizer,"aria-hidden":`true`,children:l})]})]})]})}function p({options:p,children:m,value:h,defaultValue:g,onValueChange:_,name:v,size:y,tone:b=`neutral`,radius:x=`pill`,fullWidth:S=!1,orientation:C=`horizontal`,disabled:w,invalid:T,required:E,label:D,className:O,id:k,"aria-describedby":A,"aria-labelledby":j,...M}){let N=r.useFieldContext(),P=(0,a.useId)(),F=`${P}-label`,I=N!==null,L=!I&&D!=null,R=r.useFieldControl({id:k,invalid:T,required:E,disabled:w,size:y,"aria-describedby":A}),[z,B]=e.useControllableState({value:h,defaultValue:g,onChange:_});t.useFormReset(()=>R.id?document.getElementById(R.id):null,()=>B(g),h===void 0);let V=R.size??`md`,H=(0,a.useRef)(null),U=(0,a.useRef)(null),W=(0,a.useRef)(!1),G=(0,a.useCallback)(e=>{let t=H.current,n=U.current;if(!t||!n)return;let r=t.querySelector(`:scope > [data-segment][data-checked]`);if(!r){n.dataset.hidden=``,W.current=!1;return}let i=e||!W.current||n.dataset.hidden!==void 0;i&&(n.dataset.instant=``),n.style.setProperty(`--sc-thumb-x`,`${r.offsetLeft}px`),n.style.setProperty(`--sc-thumb-y`,`${r.offsetTop}px`),n.style.setProperty(`--sc-thumb-w`,`${r.offsetWidth}px`),n.style.setProperty(`--sc-thumb-h`,`${r.offsetHeight}px`),delete n.dataset.hidden,i&&(n.offsetWidth,delete n.dataset.instant),W.current=!0},[]);(0,a.useLayoutEffect)(()=>{G(!1)});let K=(0,a.useRef)(null),q=(0,a.useRef)(new WeakSet);(0,a.useEffect)(()=>{if(typeof ResizeObserver>`u`)return;let e=new ResizeObserver(()=>G(!0));return K.current=e,()=>{e.disconnect(),K.current=null,q.current=new WeakSet}},[G]),(0,a.useEffect)(()=>{let e=K.current,t=H.current;if(e&&t)for(let n of[t,...t.querySelectorAll(`:scope > [data-segment]`)])q.current.has(n)||(q.current.add(n),e.observe(n))});let J={name:v??`segmented-${P}`,value:z,setValue:B,disabled:R.disabled,required:R.required},Y=N?.isGroup===!0&&j===void 0;Y&&(J.itemInvalid=R.invalid,J.itemDescribedBy=A);let X=j??(I?N.labelId:L?F:void 0),Z=Y?{"aria-describedby":A}:{role:`radiogroup`,"aria-labelledby":X,...R.ariaProps,"aria-disabled":R.disabled||void 0,"aria-required":R.required||void 0},Q=p?p.map(({value:e,label:t,icon:n,disabled:r,"aria-label":i})=>t===void 0?(0,o.jsx)(f,{value:e,icon:n,disabled:r,"aria-label":i},e):(0,o.jsx)(f,{value:e,icon:n,disabled:r,"aria-label":i,children:t},e)):m;return(0,o.jsx)(d.Provider,{value:J,children:(0,o.jsxs)(`div`,{id:R.id,...Z,...M,"data-disabled":R.disabled||void 0,"data-invalid":R.invalid||void 0,className:n.cx(i.default.root,s[V],c[b],l[x],u[C],S&&i.default.fullWidth,O),children:[L&&(0,o.jsxs)(`span`,{id:F,className:i.default.groupLabel,children:[D,R.required&&(0,o.jsxs)(`span`,{className:i.default.requiredMark,"aria-hidden":`true`,children:[` `,`*`]})]}),(0,o.jsxs)(`div`,{ref:H,className:i.default.track,children:[(0,o.jsx)(`span`,{ref:U,className:i.default.thumb,"data-hidden":``,"data-instant":``,"aria-hidden":`true`}),Q]})]})})}var m=Object.assign(p,{Item:f});exports.SegmentedControl=m,exports.SegmentedControlItem=f;
+"use client";const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useFormReset.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../Field/FieldContext.cjs.js"),i=require("./SegmentedControl.module.css.cjs.js");let a=require("react"),o=require("react/jsx-runtime");var s={sm:i.default.sm,md:i.default.md,lg:i.default.lg},c={neutral:i.default.toneNeutral,primary:i.default.tonePrimary},l={none:i.default.radiusNone,xs:i.default.radiusXs,sm:i.default.radiusSm,md:i.default.radiusMd,lg:i.default.radiusLg,xl:i.default.radiusXl,"2xl":i.default.radius2xl,pill:i.default.radiusPill},u={horizontal:i.default.horizontal,vertical:i.default.vertical},d=(0,a.createContext)(null);function f({value:e,icon:t,disabled:r,className:s,style:c,children:l,onChange:u,required:f,id:p,...m}){let h=(0,a.useContext)(d),g=(0,a.useId)(),_=p??g,v=!!(r||h?.disabled),y=h?h.value===e:!1,b=l!=null,x=t!=null;return(0,o.jsxs)(`label`,{htmlFor:_,style:c,"data-segment":``,"data-checked":y||void 0,"data-disabled":v||void 0,className:n.cx(i.default.segment,!b&&i.default.iconOnly,s),children:[(0,o.jsx)(`input`,{...m,id:_,type:`radio`,className:i.default.input,name:h?.name,value:e,checked:y,disabled:v,required:f??h?.required,"aria-invalid":m[`aria-invalid`]??(h?.itemInvalid?!0:void 0),"aria-describedby":[m[`aria-describedby`],h?.itemDescribedBy].filter(Boolean).join(` `)||void 0,onChange:t=>{u?.(t),!t.defaultPrevented&&t.target.checked&&h?.setValue(e)}}),(0,o.jsxs)(`span`,{className:i.default.content,children:[x&&(0,o.jsx)(`span`,{className:i.default.icon,"aria-hidden":`true`,children:t}),b&&(0,o.jsxs)(`span`,{className:i.default.labelStack,children:[(0,o.jsx)(`span`,{className:i.default.labelText,children:l}),(0,o.jsx)(`span`,{className:i.default.labelSizer,"aria-hidden":`true`,children:l})]})]})]})}function p({options:p,children:m,value:h,defaultValue:g,onValueChange:_,name:v,size:y,tone:b=`neutral`,radius:x=`pill`,fullWidth:S=!1,orientation:C=`horizontal`,disabled:w,invalid:T,required:E,label:D,className:O,id:k,"aria-describedby":A,"aria-labelledby":j,...M}){let N=r.useFieldContext(),P=(0,a.useId)(),F=`${P}-label`,I=N!==null,L=!I&&D!=null,R=r.useFieldControl({id:k,invalid:T,required:E,disabled:w,size:y,"aria-describedby":A}),[z,B]=e.useControllableState({value:h,defaultValue:g,onChange:_});t.useFormReset(()=>R.id?document.getElementById(R.id):null,()=>B(g),h===void 0);let V=R.size??`md`,H=(0,a.useRef)(null),U=(0,a.useRef)(null),W=(0,a.useRef)(!1),G=(0,a.useRef)(``),K=(0,a.useCallback)(e=>{let t=H.current,n=U.current;if(!t||!n)return;let r=t.querySelector(`:scope > [data-segment][data-checked]`);if(!r){n.dataset.hidden=``,W.current=!1;return}let i=`${r.offsetLeft}|${r.offsetTop}|${r.offsetWidth}|${r.offsetHeight}`;if(i===G.current&&W.current&&n.dataset.hidden===void 0)return;G.current=i;let a=e||!W.current||n.dataset.hidden!==void 0;a&&(n.dataset.instant=``),n.style.setProperty(`--sc-thumb-x`,`${r.offsetLeft}px`),n.style.setProperty(`--sc-thumb-y`,`${r.offsetTop}px`),n.style.setProperty(`--sc-thumb-w`,`${r.offsetWidth}px`),n.style.setProperty(`--sc-thumb-h`,`${r.offsetHeight}px`),delete n.dataset.hidden,a&&(n.offsetWidth,delete n.dataset.instant),W.current=!0},[]);(0,a.useLayoutEffect)(()=>{K(!1)});let q=(0,a.useRef)(null),J=(0,a.useRef)(new WeakSet);(0,a.useEffect)(()=>{if(typeof ResizeObserver>`u`)return;let e=new ResizeObserver(()=>K(!0));return q.current=e,()=>{e.disconnect(),q.current=null,J.current=new WeakSet}},[K]),(0,a.useEffect)(()=>{let e=q.current,t=H.current;if(e&&t)for(let n of[t,...t.querySelectorAll(`:scope > [data-segment]`)])J.current.has(n)||(J.current.add(n),e.observe(n))});let Y={name:v??`segmented-${P}`,value:z,setValue:B,disabled:R.disabled,required:R.required},X=N?.isGroup===!0&&j===void 0;X&&(Y.itemInvalid=R.invalid,Y.itemDescribedBy=A);let Z=j??(I?N.labelId:L?F:void 0),Q=X?{"aria-describedby":A}:{role:`radiogroup`,"aria-labelledby":Z,...R.ariaProps,"aria-disabled":R.disabled||void 0,"aria-required":R.required||void 0},$=p?p.map(({value:e,label:t,icon:n,disabled:r,"aria-label":i})=>t===void 0?(0,o.jsx)(f,{value:e,icon:n,disabled:r,"aria-label":i},e):(0,o.jsx)(f,{value:e,icon:n,disabled:r,"aria-label":i,children:t},e)):m;return(0,o.jsx)(d.Provider,{value:Y,children:(0,o.jsxs)(`div`,{id:R.id,...Q,...M,"data-disabled":R.disabled||void 0,"data-invalid":R.invalid||void 0,className:n.cx(i.default.root,s[V],c[b],l[x],u[C],S&&i.default.fullWidth,O),children:[L&&(0,o.jsxs)(`span`,{id:F,className:i.default.groupLabel,children:[D,R.required&&(0,o.jsxs)(`span`,{className:i.default.requiredMark,"aria-hidden":`true`,children:[` `,`*`]})]}),(0,o.jsxs)(`div`,{ref:H,className:i.default.track,children:[(0,o.jsx)(`span`,{ref:U,className:i.default.thumb,"data-hidden":``,"data-instant":``,"aria-hidden":`true`}),$]})]})})}var m=Object.assign(p,{Item:f});exports.SegmentedControl=m,exports.SegmentedControlItem=f;

package/dist/components/forms/SegmentedControl/SegmentedControl.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
 import { useFormReset as t } from "../../../hooks/useFormReset.mjs";
 import { cx as n } from "../../../utils/cx.mjs";
@@ -5,7 +6,7 @@ import { useFieldContext as r, useFieldControl as i } from "../Field/FieldContex
 import a from "./SegmentedControl.module.css.mjs";
 import { createContext as o, useCallback as s, useContext as c, useEffect as l, useId as u, useLayoutEffect as d, useRef as f } from "react";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
-//#region src/components/forms/SegmentedControl/SegmentedControl.tsx
+// src/components/forms/SegmentedControl/SegmentedControl.tsx
 var h = {
 	sm: a.sm,
 	md: a.md,
@@ -70,30 +71,33 @@ function b({ value: e, icon: t, disabled: r, className: i, style: o, children: s
 		})]
 	});
 }
-function x({ options: o, children: c, value: x, defaultValue: S, onValueChange: C, name: w, size: T, tone: ee = "neutral", radius: te = "pill", fullWidth: E = !1, orientation: D = "horizontal", disabled: O, invalid: k, required: A, label: j, className: M, id: N, "aria-describedby": P, "aria-labelledby": F, ...I }) {
-	let L = r(), R = u(), z = `${R}-label`, B = L !== null, V = !B && j != null, H = i({
-		id: N,
-		invalid: k,
-		required: A,
-		disabled: O,
-		size: T,
-		"aria-describedby": P
-	}), [U, W] = e({
+function x({ options: o, children: c, value: x, defaultValue: S, onValueChange: C, name: w, size: ee, tone: te = "neutral", radius: ne = "pill", fullWidth: T = !1, orientation: E = "horizontal", disabled: D, invalid: O, required: k, label: A, className: j, id: M, "aria-describedby": N, "aria-labelledby": P, ...F }) {
+	let I = r(), L = u(), R = `${L}-label`, z = I !== null, B = !z && A != null, V = i({
+		id: M,
+		invalid: O,
+		required: k,
+		disabled: D,
+		size: ee,
+		"aria-describedby": N
+	}), [H, U] = e({
 		value: x,
 		defaultValue: S,
 		onChange: C
 	});
-	t(() => H.id ? document.getElementById(H.id) : null, () => W(S), x === void 0);
-	let G = H.size ?? "md", K = f(null), q = f(null), J = f(!1), Y = s((e) => {
-		let t = K.current, n = q.current;
+	t(() => V.id ? document.getElementById(V.id) : null, () => U(S), x === void 0);
+	let W = V.size ?? "md", G = f(null), K = f(null), q = f(!1), J = f(""), Y = s((e) => {
+		let t = G.current, n = K.current;
 		if (!t || !n) return;
 		let r = t.querySelector(":scope > [data-segment][data-checked]");
 		if (!r) {
-			n.dataset.hidden = "", J.current = !1;
+			n.dataset.hidden = "", q.current = !1;
 			return;
 		}
-		let i = e || !J.current || n.dataset.hidden !== void 0;
-		i && (n.dataset.instant = ""), n.style.setProperty("--sc-thumb-x", `${r.offsetLeft}px`), n.style.setProperty("--sc-thumb-y", `${r.offsetTop}px`), n.style.setProperty("--sc-thumb-w", `${r.offsetWidth}px`), n.style.setProperty("--sc-thumb-h", `${r.offsetHeight}px`), delete n.dataset.hidden, i && (n.offsetWidth, delete n.dataset.instant), J.current = !0;
+		let i = `${r.offsetLeft}|${r.offsetTop}|${r.offsetWidth}|${r.offsetHeight}`;
+		if (i === J.current && q.current && n.dataset.hidden === void 0) return;
+		J.current = i;
+		let a = e || !q.current || n.dataset.hidden !== void 0;
+		a && (n.dataset.instant = ""), n.style.setProperty("--sc-thumb-x", `${r.offsetLeft}px`), n.style.setProperty("--sc-thumb-y", `${r.offsetTop}px`), n.style.setProperty("--sc-thumb-w", `${r.offsetWidth}px`), n.style.setProperty("--sc-thumb-h", `${r.offsetHeight}px`), delete n.dataset.hidden, a && (n.offsetWidth, delete n.dataset.instant), q.current = !0;
 	}, []);
 	d(() => {
 		Y(!1);
@@ -106,24 +110,24 @@ function x({ options: o, children: c, value: x, defaultValue: S, onValueChange:
 			e.disconnect(), X.current = null, Z.current = /* @__PURE__ */ new WeakSet();
 		};
 	}, [Y]), l(() => {
-		let e = X.current, t = K.current;
+		let e = X.current, t = G.current;
 		if (e && t) for (let n of [t, ...t.querySelectorAll(":scope > [data-segment]")]) Z.current.has(n) || (Z.current.add(n), e.observe(n));
 	});
 	let Q = {
-		name: w ?? `segmented-${R}`,
-		value: U,
-		setValue: W,
-		disabled: H.disabled,
-		required: H.required
-	}, $ = L?.isGroup === !0 && F === void 0;
-	$ && (Q.itemInvalid = H.invalid, Q.itemDescribedBy = P);
-	let ne = F ?? (B ? L.labelId : V ? z : void 0), re = $ ? { "aria-describedby": P } : {
+		name: w ?? `segmented-${L}`,
+		value: H,
+		setValue: U,
+		disabled: V.disabled,
+		required: V.required
+	}, $ = I?.isGroup === !0 && P === void 0;
+	$ && (Q.itemInvalid = V.invalid, Q.itemDescribedBy = N);
+	let re = P ?? (z ? I.labelId : B ? R : void 0), ie = $ ? { "aria-describedby": N } : {
 		role: "radiogroup",
-		"aria-labelledby": ne,
-		...H.ariaProps,
-		"aria-disabled": H.disabled || void 0,
-		"aria-required": H.required || void 0
-	}, ie = o ? o.map(({ value: e, label: t, icon: n, disabled: r, "aria-label": i }) => t === void 0 ? /* @__PURE__ */ p(b, {
+		"aria-labelledby": re,
+		...V.ariaProps,
+		"aria-disabled": V.disabled || void 0,
+		"aria-required": V.required || void 0
+	}, ae = o ? o.map(({ value: e, label: t, icon: n, disabled: r, "aria-label": i }) => t === void 0 ? /* @__PURE__ */ p(b, {
 		value: e,
 		icon: n,
 		disabled: r,
@@ -138,34 +142,33 @@ function x({ options: o, children: c, value: x, defaultValue: S, onValueChange:
 	return /* @__PURE__ */ p(y.Provider, {
 		value: Q,
 		children: /* @__PURE__ */ m("div", {
-			id: H.id,
-			...re,
-			...I,
-			"data-disabled": H.disabled || void 0,
-			"data-invalid": H.invalid || void 0,
-			className: n(a.root, h[G], g[ee], _[te], v[D], E && a.fullWidth, M),
-			children: [V && /* @__PURE__ */ m("span", {
-				id: z,
+			id: V.id,
+			...ie,
+			...F,
+			"data-disabled": V.disabled || void 0,
+			"data-invalid": V.invalid || void 0,
+			className: n(a.root, h[W], g[te], _[ne], v[E], T && a.fullWidth, j),
+			children: [B && /* @__PURE__ */ m("span", {
+				id: R,
 				className: a.groupLabel,
-				children: [j, H.required && /* @__PURE__ */ m("span", {
+				children: [A, V.required && /* @__PURE__ */ m("span", {
 					className: a.requiredMark,
 					"aria-hidden": "true",
 					children: [" ", "*"]
 				})]
 			}), /* @__PURE__ */ m("div", {
-				ref: K,
+				ref: G,
 				className: a.track,
 				children: [/* @__PURE__ */ p("span", {
-					ref: q,
+					ref: K,
 					className: a.thumb,
 					"data-hidden": "",
 					"data-instant": "",
 					"aria-hidden": "true"
-				}), ie]
+				}), ae]
 			})]
 		})
 	});
 }
 var S = Object.assign(x, { Item: b });
-//#endregion
 export { S as SegmentedControl, b as SegmentedControlItem };

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

@@ -1,4 +1,4 @@
-//#region src/components/forms/SegmentedControl/SegmentedControl.module.css
+// src/components/forms/SegmentedControl/SegmentedControl.module.css
 var e = "_sm_11itl_45", t = "_md_11itl_61", n = "_lg_11itl_77", r = "_radiusNone_11itl_97", i = "_radiusXs_11itl_103", a = "_radiusSm_11itl_109", o = "_radiusMd_11itl_115", s = "_radiusLg_11itl_121", c = "_radiusXl_11itl_127", l = "_radius2xl_11itl_133", u = "_radiusPill_11itl_139", d = "_toneNeutral_11itl_149", f = "_tonePrimary_11itl_159", p = "_root_11itl_179", m = "_fullWidth_11itl_197", h = "_groupLabel_11itl_207", g = "_requiredMark_11itl_223", _ = "_track_11itl_247", v = "_horizontal_11itl_277", y = "_vertical_11itl_287", b = "_segment_11itl_311", x = "_thumb_11itl_343", S = "_iconOnly_11itl_485", C = "_input_11itl_513", w = "_content_11itl_537", T = "_icon_11itl_485", E = "_labelStack_11itl_577", D = "_labelSizer_11itl_591", O = {
 	sm: e,
 	md: t,
@@ -29,5 +29,4 @@ var e = "_sm_11itl_45", t = "_md_11itl_61", n = "_lg_11itl_77", r = "_radiusNone
 	labelStack: E,
 	labelSizer: D
 };
-//#endregion
 export { w as content, O as default, m as fullWidth, h as groupLabel, v as horizontal, T as icon, S as iconOnly, C as input, D as labelSizer, E as labelStack, n as lg, t as md, l as radius2xl, s as radiusLg, o as radiusMd, r as radiusNone, u as radiusPill, a as radiusSm, c as radiusXl, i as radiusXs, g as requiredMark, p as root, b as segment, e as sm, x as thumb, d as toneNeutral, f as tonePrimary, _ as track, y as vertical };

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

@@ -1 +1 @@
-const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useFormReset.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../../primitives/Icon/icons.cjs.js"),i=require("../Field/FieldContext.cjs.js"),a=require("./Select.module.css.cjs.js");let o=require("react/jsx-runtime");var s={sm:a.default.sm,md:a.default.md,lg:a.default.lg},c={outline:a.default.outline,filled:a.default.filled},l={none:a.default.radiusNone,xs:a.default.radiusXs,sm:a.default.radiusSm,md:a.default.radiusMd,lg:a.default.radiusLg,xl:a.default.radiusXl,"2xl":a.default.radius2xl,pill:a.default.radiusPill},u=e=>`options`in e;function d(e){for(let t of e??[])if(u(t)){if(t.disabled)continue;let e=d(t.options);if(e!==void 0)return e}else if(!t.disabled)return t.value}var f=e=>(0,o.jsx)(`option`,{value:e.value,disabled:e.disabled,children:e.label},e.value);function p({size:p,variant:m=`outline`,radius:h,invalid:g,readOnly:_,placeholder:v,options:y,children:b,startIcon:x,multiple:S=!1,htmlSize:C,value:w,defaultValue:T,onValueChange:E,fullWidth:D=!0,className:O,selectClassName:k,style:A,id:j,required:M,disabled:N,onChange:P,"aria-describedby":F,...I}){let L=i.useFieldControl({id:j,invalid:g,required:M,disabled:N,readOnly:_,size:p,"aria-describedby":F}),R=L.size??`md`,[z,B]=e.useControllableState({value:w,defaultValue:T??(S?[]:v===void 0?d(y)??``:``),onChange:E});t.useFormReset(()=>L.id?document.getElementById(L.id):null,()=>B(T??(S?[]:``)),w===void 0);let V=S||C!==void 0&&C>1,H=v!==void 0&&!S,U=H&&(z===``||z===void 0),W=x!=null&&!V,G=e=>{if(L.readOnly)return;P?.(e);let t=e.currentTarget;B(S?Array.from(t.selectedOptions,e=>e.value):t.value)};return(0,o.jsxs)(`div`,{className:n.cx(a.default.root,s[R],c[m],h&&l[h],D&&a.default.fullWidth,V&&a.default.list,W&&a.default.hasStartIcon,L.invalid&&a.default.invalid,L.disabled&&a.default.disabled,O),style:A,children:[W&&(0,o.jsx)(`span`,{className:a.default.startIcon,"aria-hidden":`true`,children:x}),(0,o.jsxs)(`select`,{...L.ariaProps,...I,id:L.id,required:L.required,disabled:L.disabled,multiple:S,size:C,value:z,onChange:G,"aria-readonly":L.readOnly||void 0,"data-readonly":L.readOnly||void 0,onMouseDown:e=>{I.onMouseDown?.(e),L.readOnly&&e.preventDefault()},onKeyDown:e=>{I.onKeyDown?.(e),L.readOnly&&e.key!==`Tab`&&e.preventDefault()},"data-placeholder-shown":U||void 0,className:n.cx(a.default.select,k),children:[H&&(0,o.jsx)(`option`,{value:``,disabled:!0,hidden:!0,children:v}),y?y.map(e=>u(e)?(0,o.jsx)(`optgroup`,{label:e.label,disabled:e.disabled,children:e.options.map(f)},`group:${e.label}`):f(e)):b]}),!V&&(0,o.jsx)(r.ChevronDownIcon,{className:a.default.chevron,size:R===`sm`?`sm`:`md`})]})}exports.Select=p;
+"use client";const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../hooks/useFormReset.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../../primitives/Icon/icons.cjs.js"),i=require("../Field/FieldContext.cjs.js"),a=require("./Select.module.css.cjs.js");let o=require("react/jsx-runtime");var s={sm:a.default.sm,md:a.default.md,lg:a.default.lg},c={outline:a.default.outline,filled:a.default.filled},l={none:a.default.radiusNone,xs:a.default.radiusXs,sm:a.default.radiusSm,md:a.default.radiusMd,lg:a.default.radiusLg,xl:a.default.radiusXl,"2xl":a.default.radius2xl,pill:a.default.radiusPill},u=e=>`options`in e;function d(e){for(let t of e??[])if(u(t)){if(t.disabled)continue;let e=d(t.options);if(e!==void 0)return e}else if(!t.disabled)return t.value}var f=e=>(0,o.jsx)(`option`,{value:e.value,disabled:e.disabled,children:e.label},e.value);function p({size:p,variant:m=`outline`,radius:h,invalid:g,readOnly:_,placeholder:v,options:y,children:b,startIcon:x,multiple:S=!1,htmlSize:C,value:w,defaultValue:T,onValueChange:E,fullWidth:D=!0,className:O,selectClassName:k,style:A,id:j,required:M,disabled:N,onChange:P,"aria-describedby":F,...I}){let L=i.useFieldControl({id:j,invalid:g,required:M,disabled:N,readOnly:_,size:p,"aria-describedby":F}),R=L.size??`md`,[z,B]=e.useControllableState({value:w,defaultValue:T??(S?[]:v===void 0?d(y)??``:``),onChange:E});t.useFormReset(()=>L.id?document.getElementById(L.id):null,()=>B(T??(S?[]:``)),w===void 0);let V=S||C!==void 0&&C>1,H=v!==void 0&&!S,U=H&&(z===``||z===void 0),W=x!=null&&!V,G=e=>{if(L.readOnly)return;P?.(e);let t=e.currentTarget;B(S?Array.from(t.selectedOptions,e=>e.value):t.value)};return(0,o.jsxs)(`div`,{className:n.cx(a.default.root,s[R],c[m],h&&l[h],D&&a.default.fullWidth,V&&a.default.list,W&&a.default.hasStartIcon,L.invalid&&a.default.invalid,L.disabled&&a.default.disabled,O),style:A,children:[W&&(0,o.jsx)(`span`,{className:a.default.startIcon,"aria-hidden":`true`,children:x}),(0,o.jsxs)(`select`,{...L.ariaProps,...I,id:L.id,required:L.required,disabled:L.disabled,multiple:S,size:C,value:z,onChange:G,"aria-readonly":L.readOnly||void 0,"data-readonly":L.readOnly||void 0,onMouseDown:e=>{I.onMouseDown?.(e),L.readOnly&&e.preventDefault()},onKeyDown:e=>{I.onKeyDown?.(e),L.readOnly&&e.key!==`Tab`&&e.preventDefault()},"data-placeholder-shown":U||void 0,className:n.cx(a.default.select,k),children:[H&&(0,o.jsx)(`option`,{value:``,disabled:!0,hidden:!0,children:v}),y?y.map(e=>u(e)?(0,o.jsx)(`optgroup`,{label:e.label,disabled:e.disabled,children:e.options.map(f)},`group:${e.label}`):f(e)):b]}),!V&&(0,o.jsx)(r.ChevronDownIcon,{className:a.default.chevron,size:R===`sm`?`sm`:`md`})]})}exports.Select=p;

package/dist/components/forms/Select/Select.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
 import { useFormReset as t } from "../../../hooks/useFormReset.mjs";
 import { cx as n } from "../../../utils/cx.mjs";
@@ -5,7 +6,7 @@ import { ChevronDownIcon as r } from "../../primitives/Icon/icons.mjs";
 import { useFieldControl as i } from "../Field/FieldContext.mjs";
 import a from "./Select.module.css.mjs";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
-//#region src/components/forms/Select/Select.tsx
+// src/components/forms/Select/Select.tsx
 var c = {
 	sm: a.sm,
 	md: a.md,
@@ -103,5 +104,4 @@ function m({ size: m, variant: h = "outline", radius: g, invalid: _, readOnly: v
 		]
 	});
 }
-//#endregion
 export { m as Select };

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

@@ -1,4 +1,4 @@
-//#region src/components/forms/Select/Select.module.css
+// src/components/forms/Select/Select.module.css
 var e = "_root_18qoz_5", t = "_fullWidth_18qoz_39", n = "_sm_18qoz_51", r = "_md_18qoz_65", i = "_lg_18qoz_75", a = "_radiusNone_18qoz_87", o = "_radiusXs_18qoz_89", s = "_radiusSm_18qoz_91", c = "_radiusMd_18qoz_93", l = "_radiusLg_18qoz_95", u = "_radiusXl_18qoz_97", d = "_radius2xl_18qoz_99", f = "_radiusPill_18qoz_101", p = "_select_18qoz_107", m = "_outline_18qoz_231", h = "_filled_18qoz_241", g = "_invalid_18qoz_291", _ = "_disabled_18qoz_309", v = "_chevron_18qoz_335", y = "_startIcon_18qoz_337", b = "_hasStartIcon_18qoz_391", x = "_list_18qoz_419", S = {
 	root: e,
 	fullWidth: t,
@@ -23,5 +23,4 @@ var e = "_root_18qoz_5", t = "_fullWidth_18qoz_39", n = "_sm_18qoz_51", r = "_md
 	hasStartIcon: b,
 	list: x
 };
-//#endregion
 export { v as chevron, S as default, _ as disabled, h as filled, t as fullWidth, b as hasStartIcon, g as invalid, i as lg, x as list, r as md, m as outline, d as radius2xl, l as radiusLg, c as radiusMd, a as radiusNone, f as radiusPill, s as radiusSm, u as radiusXl, o as radiusXs, e as root, p as select, n as sm, y as startIcon };

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

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

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

@@ -1,3 +1,4 @@
+"use client";
 import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
 import { useFormReset as t } from "../../../hooks/useFormReset.mjs";
 import { cx as n } from "../../../utils/cx.mjs";
@@ -5,7 +6,7 @@ import { useFieldContext as r, useFieldControl as i } from "../Field/FieldContex
 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
+// src/components/forms/Slider/Slider.tsx
 var ne = {
 	sm: a.sizeSm,
 	md: a.sizeMd,
@@ -247,5 +248,4 @@ function p(p) {
 		}, t))]
 	});
 }
-//#endregion
 export { p as Slider };