themelia-react-ui 1.0.1 → 1.0.2

package/dist/value-inputs-D0KCrfVC.js

@@ -0,0 +1,840 @@
+"use client";
+import { p as e, s as t } from "./ui-provider-DRPn3qNl.js";
+import { useStrings as n } from "./lib/strings.js";
+import { t as r } from "./utils-BvH9PSmq.js";
+import { t as i } from "./buttons-D_6KJvEE.js";
+import { a } from "./text.styles-Q4sGAIgA.js";
+import { a as o } from "./typography-BxQgiZyw.js";
+import { t as s } from "./structure-CRdqVawd.js";
+import { t as c } from "./track-recipes-LLPNVwFg.js";
+import { n as l, t as u } from "./popover.recipes-QlD4JenO.js";
+import { n as d } from "./collection-content-D6S8cv_n.js";
+import { t as f } from "./badge-CzId1Wlm.js";
+import { t as p } from "./field-affordance-recipes-uKY4MsZ_.js";
+import { a as m, d as h, p as g, u as _ } from "./form-sizing-QP8aIRaW.js";
+import { t as v } from "./input-SX9V0AL3.js";
+import { t as y } from "./date-picker-DzP5HQq7.js";
+import { o as b, t as x } from "./popover-CghIYdQf.js";
+import { _ as S, d as C, f as w, g as T, h as E, u as ee } from "./choice-inputs-Mk3iWbhr.js";
+import * as D from "react";
+import { forwardRef as O, memo as k, useCallback as A, useId as te, useMemo as j, useRef as ne, useState as M } from "react";
+import { jsx as N, jsxs as P } from "react/jsx-runtime";
+import { Check as F, X as re } from "lucide-react";
+import { Slider as I } from "@base-ui/react/slider";
+//#region src/components/base/value-inputs/tags-input.tsx
+var ie = {
+	placeholder: "Add a tag…",
+	emptyRecommendations: "No recommendations found.",
+	clearAll: "Clear all",
+	summary: (e, t) => `${e} / ${t} tags`
+};
+function L({ id: t, "aria-describedby": c, value: m = [], onValueChange: h, placeholder: g, recommendations: _, maxTags: y, showMaxTags: S = !1, allowDuplicates: C = !1, validate: w, disabled: T = !1, showClearAll: E = !1, renderTag: ee, delimiter: O = /[\n,]/, addOnBlur: k = !0, minLength: te = 1, maxLength: I, sortTags: L = !1, caseSensitive: R = !1, field: z, invalid: ae, className: oe, strings: se }) {
+	let { defaultTextSize: ce } = e(), le = n(ie, g === void 0 ? void 0 : { placeholder: g }), B = n(le, se), [V, H] = M(""), [U, W] = M(!1), [G, K] = M(-1), q = ne(null), J = D.useId(), Y = U && !T && !!_?.length && !(y !== void 0 && m.length >= y), X = A((e) => {
+		if (typeof e == "string") return e;
+		if (z && typeof e == "object" && e) {
+			let t = e[z];
+			return typeof t == "string" ? t : t == null ? "" : String(t);
+		}
+		return String(e);
+	}, [z]), ue = A((e) => typeof m[0] == "string" || m.length === 0 ? e : z ? { [z]: e } : e, [z, m]), Z = j(() => _ ? _.map((e) => e && typeof e == "object" && "value" in e && "label" in e ? e : {
+		value: e,
+		label: X(e)
+	}) : [], [_, X]), Q = j(() => {
+		if (!Z.length || !V) return Z;
+		let e = R ? V : V.toLowerCase(), t = new Set(m.map((e) => {
+			let t = X(e);
+			return R ? t : t.toLowerCase();
+		}));
+		return Z.filter((n) => {
+			let r = R ? n.label : n.label.toLowerCase(), i = X(n.value), a = R ? i : i.toLowerCase();
+			return (r.includes(e) || a.includes(e)) && (C || !t.has(a));
+		});
+	}, [
+		Z,
+		V,
+		m,
+		C,
+		R,
+		X
+	]), de = j(() => L ? [...m].sort((e, t) => {
+		let n = X(e), r = X(t);
+		return n.localeCompare(r);
+	}) : m, [
+		m,
+		L,
+		X
+	]), $ = A((e) => {
+		let t = typeof e == "string" ? ue(e) : e, n = X(t).trim();
+		if (!n || n.length < te || I && n.length > I || y && m.length >= y || !C && m.some((e) => {
+			let t = X(e);
+			return R ? t === n : t.toLowerCase() === n.toLowerCase();
+		}) || w && !w(t)) return;
+		let r = [...m, t];
+		h?.(r), H(""), W(!1), K(-1);
+	}, [
+		m,
+		h,
+		y,
+		C,
+		w,
+		te,
+		I,
+		R,
+		X,
+		ue
+	]), fe = A((e) => {
+		let t = m.filter((t, n) => n !== e);
+		h?.(t);
+	}, [m, h]), pe = A((e) => {
+		let t = e.target.value;
+		H(t), K(-1), _ && _.length > 0 && W(!0);
+	}, [_]), me = A((e) => {
+		T || (e.key === "Enter" ? (e.preventDefault(), U && G >= 0 && G < Q.length ? ($(Q[G].value), K(-1)) : V.trim() && $(V)) : e.key === "Tab" ? V && (e.preventDefault(), $(V)) : e.key === "ArrowDown" ? (e.preventDefault(), U && K((e) => e < Q.length - 1 ? e + 1 : e)) : e.key === "ArrowUp" ? (e.preventDefault(), U && K((e) => e > 0 ? e - 1 : 0)) : e.key === "Escape" ? (W(!1), K(-1)) : e.key === "Backspace" && !V && m.length > 0 && fe(m.length - 1));
+	}, [
+		T,
+		U,
+		G,
+		Q,
+		V,
+		$,
+		fe,
+		m.length
+	]), he = A((e) => {
+		T || (e.preventDefault(), e.clipboardData.getData("text").split(O).map((e) => e.trim()).filter(Boolean).forEach((e) => $(e)));
+	}, [
+		T,
+		O,
+		$
+	]), ge = A(() => {
+		W(!1), k && V && $(V);
+	}, [
+		k,
+		V,
+		$
+	]), _e = A(() => {
+		h?.([]), H("");
+	}, [h]), ve = A((e, t, n) => {
+		let i = `${X(e)}-${t}`;
+		return /* @__PURE__ */ P(f, {
+			tone: "secondary",
+			className: r("tags-input--component", "gap-space-xs pr-space-xs"),
+			children: [/* @__PURE__ */ N(o, {
+				tag: "span",
+				size: "inherit",
+				weight: "normal",
+				lineHeight: "none",
+				className: "text-inherit",
+				children: X(e)
+			}), /* @__PURE__ */ N("button", {
+				type: "button",
+				"aria-label": `Remove ${X(e)}`,
+				className: r(p.target, p.focus, p.clear),
+				onClick: () => n(t),
+				disabled: T,
+				children: /* @__PURE__ */ N(re, {
+					className: p.icon,
+					"aria-hidden": "true"
+				})
+			})]
+		}, i);
+	}, [X, T]), ye = !!ae;
+	return /* @__PURE__ */ P(s, {
+		gap: "dense",
+		className: r("w-full relative", oe),
+		children: [/* @__PURE__ */ P(s, {
+			gap: "md",
+			children: [/* @__PURE__ */ P(b, {
+				open: Y,
+				onOpenChange: (e, t) => {
+					(e || t.reason !== "outside-press" || t.event.target !== q.current) && (W(e), e || K(-1));
+				},
+				children: [/* @__PURE__ */ N(v, {
+					id: t,
+					"aria-describedby": c,
+					role: _ ? "combobox" : void 0,
+					"aria-autocomplete": _ ? "list" : void 0,
+					"aria-expanded": _ ? Y : void 0,
+					"aria-controls": Y ? J : void 0,
+					"aria-activedescendant": Y && G >= 0 && G < Q.length ? `${J}-${G}` : void 0,
+					ref: q,
+					type: "text",
+					placeholder: B.placeholder,
+					value: V,
+					onChange: pe,
+					onKeyDown: me,
+					onPaste: he,
+					onBlur: ge,
+					onFocus: () => {
+						_ && Q.length > 0 && W(!0);
+					},
+					disabled: T || y !== void 0 && m.length >= y,
+					invalid: ye,
+					maxLength: I,
+					className: "w-full"
+				}), !!_ && /* @__PURE__ */ N(x, {
+					anchor: q,
+					align: "start",
+					type: "menu",
+					initialFocus: !1,
+					finalFocus: !1,
+					role: "listbox",
+					id: J,
+					"aria-label": B.placeholder,
+					className: "tags-input--recommendations w-(--anchor-width) max-h-[200px]",
+					children: /* @__PURE__ */ N("div", { children: Q.length > 0 ? Q.map((e, t) => {
+						let n = X(e.value), i = m.some((t) => X(t) === X(e.value));
+						return /* @__PURE__ */ P("button", {
+							id: `${J}-${t}`,
+							role: "option",
+							"aria-selected": G === t,
+							tabIndex: -1,
+							type: "button",
+							onPointerDown: (e) => e.preventDefault(),
+							onClick: () => {
+								$(e.value), K(-1), q.current?.focus();
+							},
+							onMouseEnter: () => K(t),
+							className: r(u.interactive, l(), a[ce ?? "sm"], "box-border w-full cursor-pointer justify-between border-0 bg-transparent font-sans text-foreground", "hover:bg-accent hover:text-accent-foreground", "focus-visible:outline-none", G === t && "bg-accent text-accent-foreground"),
+							children: [/* @__PURE__ */ N(d, { children: e.label }), /* @__PURE__ */ N(F, { className: r("ml-auto size-icon-sm", i ? "opacity-100" : "opacity-0") })]
+						}, n);
+					}) : /* @__PURE__ */ N(o, {
+						tag: "div",
+						size: "xs",
+						type: "secondary",
+						className: "px-space-md py-row-y",
+						children: B.emptyRecommendations
+					}) })
+				})]
+			}), de.length > 0 && /* @__PURE__ */ P(s, {
+				direction: "horizontal",
+				gap: "sm",
+				children: [de.map((e, t) => ee ? ee(e, t, fe) : ve(e, t, fe)), !!E && m.length > 0 && !T && /* @__PURE__ */ N(i, {
+					type: "button",
+					size: "sm",
+					onClick: _e,
+					className: "ml-auto",
+					children: B.clearAll
+				})]
+			})]
+		}), !!y && !!S && /* @__PURE__ */ N(o, {
+			size: "xs",
+			type: "secondary",
+			children: B.summary(m.length, y)
+		})]
+	});
+}
+L.displayName = "TagsInput";
+//#endregion
+//#region src/components/base/value-inputs/phone-input.tsx
+var R = {
+	prefixPlaceholder: "Prefix",
+	prefixAriaLabel: "Country prefix"
+}, z = {
+	US: {
+		value: "+1",
+		label: "United States",
+		iso: "US"
+	},
+	CA: {
+		value: "+1",
+		label: "Canada",
+		iso: "CA"
+	},
+	AU: {
+		value: "+61",
+		label: "Australia",
+		iso: "AU"
+	},
+	BG: {
+		value: "+359",
+		label: "Bulgaria",
+		iso: "BG"
+	},
+	GR: {
+		value: "+30",
+		label: "Greece",
+		iso: "GR"
+	},
+	GB: {
+		value: "+44",
+		label: "United Kingdom",
+		iso: "GB"
+	},
+	DE: {
+		value: "+49",
+		label: "Germany",
+		iso: "DE"
+	},
+	FR: {
+		value: "+33",
+		label: "France",
+		iso: "FR"
+	},
+	IT: {
+		value: "+39",
+		label: "Italy",
+		iso: "IT"
+	},
+	ES: {
+		value: "+34",
+		label: "Spain",
+		iso: "ES"
+	},
+	NL: {
+		value: "+31",
+		label: "Netherlands",
+		iso: "NL"
+	},
+	BE: {
+		value: "+32",
+		label: "Belgium",
+		iso: "BE"
+	},
+	AT: {
+		value: "+43",
+		label: "Austria",
+		iso: "AT"
+	},
+	CH: {
+		value: "+41",
+		label: "Switzerland",
+		iso: "CH"
+	},
+	PL: {
+		value: "+48",
+		label: "Poland",
+		iso: "PL"
+	},
+	RO: {
+		value: "+40",
+		label: "Romania",
+		iso: "RO"
+	},
+	RS: {
+		value: "+381",
+		label: "Serbia",
+		iso: "RS"
+	},
+	HR: {
+		value: "+385",
+		label: "Croatia",
+		iso: "HR"
+	},
+	SI: {
+		value: "+386",
+		label: "Slovenia",
+		iso: "SI"
+	},
+	MK: {
+		value: "+389",
+		label: "North Macedonia",
+		iso: "MK"
+	},
+	TR: {
+		value: "+90",
+		label: "Turkey",
+		iso: "TR"
+	},
+	RU: {
+		value: "+7",
+		label: "Russia",
+		iso: "RU"
+	},
+	UA: {
+		value: "+380",
+		label: "Ukraine",
+		iso: "UA"
+	},
+	SK: {
+		value: "+421",
+		label: "Slovakia",
+		iso: "SK"
+	},
+	CZ: {
+		value: "+420",
+		label: "Czech Republic",
+		iso: "CZ"
+	},
+	HU: {
+		value: "+36",
+		label: "Hungary",
+		iso: "HU"
+	},
+	PT: {
+		value: "+351",
+		label: "Portugal",
+		iso: "PT"
+	},
+	IE: {
+		value: "+353",
+		label: "Ireland",
+		iso: "IE"
+	},
+	SE: {
+		value: "+46",
+		label: "Sweden",
+		iso: "SE"
+	},
+	NO: {
+		value: "+47",
+		label: "Norway",
+		iso: "NO"
+	},
+	DK: {
+		value: "+45",
+		label: "Denmark",
+		iso: "DK"
+	},
+	FI: {
+		value: "+358",
+		label: "Finland",
+		iso: "FI"
+	},
+	CY: {
+		value: "+357",
+		label: "Cyprus",
+		iso: "CY"
+	},
+	AL: {
+		value: "+355",
+		label: "Albania",
+		iso: "AL"
+	},
+	ME: {
+		value: "+382",
+		label: "Montenegro",
+		iso: "ME"
+	},
+	BA: {
+		value: "+387",
+		label: "Bosnia and Herzegovina",
+		iso: "BA"
+	},
+	XK: {
+		value: "+383",
+		label: "Kosovo",
+		iso: "XK"
+	},
+	MD: {
+		value: "+373",
+		label: "Moldova",
+		iso: "MD"
+	},
+	BY: {
+		value: "+375",
+		label: "Belarus",
+		iso: "BY"
+	},
+	LT: {
+		value: "+370",
+		label: "Lithuania",
+		iso: "LT"
+	},
+	LV: {
+		value: "+371",
+		label: "Latvia",
+		iso: "LV"
+	},
+	EE: {
+		value: "+372",
+		label: "Estonia",
+		iso: "EE"
+	}
+}, ae = [
+	"US",
+	"CA",
+	"GB",
+	"DE",
+	"FR",
+	"IT",
+	"ES",
+	"AU"
+], oe = (e) => typeof e == "string" ? z[e.toUpperCase()] ?? null : e, se = (e) => e.map(oe).filter((e) => e !== null), ce = (e, t) => {
+	let n = e.trim().replace(/\s+/g, " ").replace(/[^\d ()+-]/g, "");
+	return t && n.startsWith(t) && (n = n.slice(t.length).replace(/^[\s-]+/, "")), t && n.startsWith("0") && (n = n.slice(1)), n;
+}, le = (e, t) => e ? e.startsWith("+") ? e : z[e.toUpperCase()]?.value ?? e : t[0]?.value ?? "";
+function B({ normalizeOnBlur: e = !0, onBlur: i, onChange: a, prefix: s, defaultPrefix: c, prefixes: l = ae, onPrefixChange: u, disablePrefixSelector: d = !1, prefixPlaceholder: f, prefixWidth: p = "w-30", showCountryName: y = !0, showPrefixInDropdown: b = !0, invalid: x, disabled: D, className: O, size: k, strings: te, ...ne }, F) {
+	let { defaultScale: re } = t(), I = g(k, re), ie = n(R, te), L = j(() => se(l), [l]), oe = j(() => le(c, L), [c, L]), [B, V] = M(oe), [H, U] = M(() => {
+		let e = s ?? c;
+		return e && !e.startsWith("+") ? e.toUpperCase() : L.find((e) => e.value === oe)?.iso;
+	}), W = s !== void 0, G = W ? le(s, L) : B, K = j(() => {
+		if (!G || L.some((e) => e.value === G)) return L;
+		let e = Object.values(z).find((e) => e.value === G);
+		return e ? [e, ...L] : L;
+	}, [L, G]), q = j(() => K.find((e) => e.iso === (s && !s.startsWith("+") ? s.toUpperCase() : H) && e.value === G) ?? K.find((e) => e.value === G), [
+		K,
+		G,
+		H,
+		s
+	]), J = A((e) => {
+		if (e === null) return;
+		let t = K.find((t) => t.iso === e);
+		t && (U(t.iso), W || V(t.value), u?.(t.value));
+	}, [
+		W,
+		u,
+		K
+	]), Y = A((e) => {
+		if (!a) return;
+		let t = e.target.value;
+		if (G && t.startsWith(G)) {
+			let n = t.slice(G.length).replace(/^[\s-]+/, ""), r = n.startsWith("0") ? n.slice(1) : n;
+			if (r !== t) {
+				a({
+					...e,
+					target: {
+						...e.target,
+						value: r
+					},
+					currentTarget: {
+						...e.currentTarget,
+						value: r
+					}
+				});
+				return;
+			}
+		}
+		a(e);
+	}, [a, G]), X = A((t) => {
+		if (e && typeof a == "function") {
+			let e = ce(t.target.value, G);
+			e !== t.target.value && a({
+				...t,
+				target: {
+					...t.target,
+					value: e
+				},
+				currentTarget: {
+					...t.currentTarget,
+					value: e
+				}
+			});
+		}
+		i?.(t);
+	}, [
+		e,
+		a,
+		i,
+		G
+	]);
+	if (K.length === 0 || d) {
+		let e = G || c;
+		return e ? /* @__PURE__ */ P("div", {
+			className: "flex items-start gap-space-md",
+			children: [/* @__PURE__ */ N("div", {
+				"aria-invalid": x || void 0,
+				className: r("flex items-center justify-center rounded-inner border border-input bg-muted", _[I], m[I], D && "opacity-50", "aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20"),
+				children: /* @__PURE__ */ N(o, {
+					tag: "span",
+					size: "inherit",
+					type: "secondary",
+					weight: "medium",
+					children: e
+				})
+			}), /* @__PURE__ */ N("div", {
+				className: "flex-1",
+				children: /* @__PURE__ */ N(v, {
+					ref: F,
+					size: I,
+					type: "tel",
+					autoComplete: "tel",
+					inputMode: "tel",
+					onChange: Y,
+					onBlur: X,
+					invalid: x,
+					disabled: D,
+					className: O,
+					...ne
+				})
+			})]
+		}) : /* @__PURE__ */ N(v, {
+			ref: F,
+			size: I,
+			type: "tel",
+			autoComplete: "tel",
+			inputMode: "tel",
+			onChange: Y,
+			onBlur: X,
+			invalid: x,
+			disabled: D,
+			className: r("phone-input--component", O),
+			...ne
+		});
+	}
+	return /* @__PURE__ */ P("div", {
+		className: "flex items-start gap-space-md",
+		children: [/* @__PURE__ */ P(E, {
+			value: q?.iso ?? null,
+			onValueChange: (e) => J(e),
+			disabled: D,
+			children: [/* @__PURE__ */ N(T, {
+				"aria-label": ie.prefixAriaLabel,
+				"aria-invalid": x || void 0,
+				className: r(h(I), "shrink-0 !shadow-none", p, D && "opacity-50 cursor-not-allowed"),
+				children: /* @__PURE__ */ N(S, {
+					placeholder: /* @__PURE__ */ N(o, {
+						tag: "span",
+						size: "inherit",
+						type: "secondary",
+						lineHeight: "tight",
+						className: "text-inherit",
+						children: f ?? ie.prefixPlaceholder
+					}),
+					children: !!q && /* @__PURE__ */ N(o, {
+						tag: "span",
+						children: q.value
+					})
+				})
+			}), /* @__PURE__ */ N(ee, { children: /* @__PURE__ */ N(C, { children: K.map((e) => /* @__PURE__ */ N(w, {
+				value: e.iso,
+				size: I,
+				children: /* @__PURE__ */ P("div", {
+					className: "flex items-center gap-space-md",
+					children: [!!b && /* @__PURE__ */ N(o, {
+						tag: "span",
+						size: "inherit",
+						weight: "medium",
+						className: "min-w-13 text-inherit",
+						children: e.value
+					}), !!y && /* @__PURE__ */ N(o, {
+						tag: "span",
+						size: "inherit",
+						type: "secondary",
+						lineHeight: "tight",
+						className: "text-inherit",
+						children: e.label
+					})]
+				})
+			}, e.iso)) }) })]
+		}), /* @__PURE__ */ N("div", {
+			className: "flex-1",
+			children: /* @__PURE__ */ N(v, {
+				ref: F,
+				size: I,
+				type: "tel",
+				autoComplete: "tel",
+				inputMode: "tel",
+				onChange: Y,
+				onBlur: X,
+				invalid: x,
+				disabled: D,
+				className: O,
+				...ne
+			})
+		})]
+	});
+}
+var V = k(D.forwardRef(B));
+V.displayName = "PhoneInput";
+//#endregion
+//#region src/components/base/value-inputs/color-input.tsx
+var H = { chooseColor: "Choose color" }, U = {
+	sm: "size-control-sm",
+	md: "size-control",
+	lg: "size-control-lg"
+};
+function W(e) {
+	let t = e.trim().toLowerCase();
+	return /^#[0-9a-f]{6}$/.test(t) ? t : /^#[0-9a-f]{3}$/.test(t) ? `#${t.slice(1).split("").map((e) => `${e}${e}`).join("")}` : null;
+}
+function G(e, t) {
+	let n = Number(e.toFixed(t));
+	return Object.is(n, -0) ? 0 : n;
+}
+function K(e) {
+	let t = W(e);
+	if (!t) return e;
+	let [n, r, i] = [
+		1,
+		3,
+		5
+	].map((e) => Number.parseInt(t.slice(e, e + 2), 16) / 255).map((e) => e <= .04045 ? e / 12.92 : ((e + .055) / 1.055) ** 2.4), a = Math.cbrt(.4122214708 * n + .5363325363 * r + .0514459929 * i), o = Math.cbrt(.2119034982 * n + .6806995451 * r + .1073969566 * i), s = Math.cbrt(.0883024619 * n + .2817188376 * r + .6299787005 * i), c = .2104542553 * a + .793617785 * o - .0040720468 * s, l = 1.9779984951 * a - 2.428592205 * o + .4505937099 * s, u = .0259040371 * a + .7827717662 * o - .808675766 * s, d = Math.hypot(l, u), f = d < 5e-5 ? 0 : Math.atan2(u, l) * 180 / Math.PI + (u < 0 ? 360 : 0);
+	return `oklch(${G(c, 4)} ${G(d, 4)} ${G(f, 2)})`;
+}
+function q(e, t) {
+	let n = window.getComputedStyle(e).backgroundColor, r = W(n);
+	if (r) return r;
+	if (typeof CanvasRenderingContext2D > "u") return t;
+	try {
+		let e = document.createElement("canvas");
+		e.width = 1, e.height = 1;
+		let r = e.getContext("2d", { willReadFrequently: !0 });
+		if (!r) return t;
+		r.clearRect(0, 0, 1, 1), r.fillStyle = n, r.fillRect(0, 0, 1, 1);
+		let [i, a, o, s] = r.getImageData(0, 0, 1, 1).data;
+		return s === 0 ? t : `#${[
+			i,
+			a,
+			o
+		].map((e) => e.toString(16).padStart(2, "0")).join("")}`;
+	} catch {
+		return t;
+	}
+}
+var J = D.forwardRef(function({ className: e, value: i, defaultValue: a, onChange: o, onValueChange: c, previewValue: l, pickerAriaLabel: u, size: d, disabled: f, readOnly: p, strings: m, inputStrings: h, ..._ }, y) {
+	let b = n(H, m), { defaultScale: x } = t(), S = g(d, x), [C, w] = D.useState(a ?? ""), T = i ?? C, E = l ?? T, ee = W(T) ?? "#000000", [O, k] = D.useState(ee), A = D.useRef(null);
+	D.useLayoutEffect(() => {
+		let e = W(E);
+		if (e) {
+			k(e);
+			return;
+		}
+		A.current && typeof window < "u" && k((e) => q(A.current, e));
+	}, [E]);
+	let te = (e) => {
+		i === void 0 && w(e.target.value), o?.(e), c?.(e.target.value);
+	};
+	return /* @__PURE__ */ P(s, {
+		direction: "horizontal",
+		gap: "sm",
+		align: "center",
+		wrap: !1,
+		className: r("color-input--component min-w-0 [&>.input--component]:min-w-0 [&>.input--component]:flex-1", e),
+		children: [/* @__PURE__ */ P("label", {
+			className: r("color-input--picker box-border relative shrink-0 cursor-pointer overflow-hidden rounded-inner border border-input bg-background shadow-xs", "focus-within:border-ring focus-within:ring-3 focus-within:ring-ring", "data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50", U[S]),
+			"data-disabled": f || p || void 0,
+			children: [/* @__PURE__ */ N("span", {
+				ref: A,
+				"aria-hidden": "true",
+				"data-user-color": !0,
+				className: "color-input--swatch absolute inset-1 rounded-[calc(var(--radius)-2px)]",
+				style: { background: E || "transparent" }
+			}), /* @__PURE__ */ N("input", {
+				type: "color",
+				value: O,
+				disabled: f || p,
+				"aria-label": u ?? b.chooseColor,
+				onInput: (e) => {
+					let t = K(e.currentTarget.value);
+					i === void 0 && w(t), o && o({
+						...e,
+						target: {
+							...e.currentTarget,
+							value: t
+						},
+						currentTarget: {
+							...e.currentTarget,
+							value: t
+						}
+					}), c?.(t);
+				},
+				className: "color-input--native absolute inset-0 size-full cursor-pointer opacity-0"
+			})]
+		}), /* @__PURE__ */ N(v, {
+			..._,
+			ref: y,
+			size: S,
+			value: T,
+			disabled: f,
+			readOnly: p,
+			onChange: te,
+			strings: h,
+			className: "min-w-0 flex-1 font-mono"
+		})]
+	});
+});
+J.displayName = "ColorInput";
+//#endregion
+//#region src/components/base/value-inputs/slider.tsx
+var Y = { ariaLabel: "Value" };
+function X({ name: e, id: t, "aria-label": i, "aria-labelledby": a, "aria-describedby": s, strings: l, value: u, defaultValue: d, min: f = 0, max: p = 100, step: m = 1, disabled: h = !1, invalid: g = !1, onChange: _, onValueChange: v, onValueCommitted: y, showValue: b = !1, formatValue: x, unit: S, className: C, orientation: w = "horizontal" }, T) {
+	let E = te(), ee = n(Y, l), D = t ?? `slider-${E}`, O = e ?? D, k = i ?? ee.ariaLabel, ne = A((e) => {
+		let t = Array.isArray(e) ? e[0] : e;
+		v?.(t), _?.({ target: {
+			name: O,
+			value: t
+		} });
+	}, [
+		O,
+		_,
+		v
+	]), M = A((e) => {
+		let t = Array.isArray(e) ? e[0] : e;
+		y?.(t);
+	}, [y]), F = j(() => {
+		if (!b) return null;
+		let e = u ?? d ?? f;
+		return x ? x(e) : S ? `${e}${S}` : String(e);
+	}, [
+		b,
+		u,
+		d,
+		f,
+		x,
+		S
+	]), re = u === void 0 ? void 0 : [u], ie = d === void 0 ? [f] : [d];
+	return /* @__PURE__ */ P("div", {
+		className: r("slider--component", "flex items-center gap-space-lg", C),
+		children: [/* @__PURE__ */ N(I.Root, {
+			ref: T,
+			"data-slot": "slider",
+			id: D,
+			"aria-label": k,
+			"aria-labelledby": a,
+			"aria-describedby": s,
+			value: re,
+			defaultValue: ie,
+			min: f,
+			max: p,
+			step: m,
+			disabled: h,
+			orientation: w,
+			onValueChange: ne,
+			onValueCommitted: M,
+			"aria-invalid": g || void 0,
+			className: r("box-border data-[orientation=horizontal]:w-full data-[orientation=horizontal]:px-control data-[orientation=vertical]:h-full", "min-w-0 flex-1", g && "[&_[data-slot=slider-range]]:bg-destructive [&_[data-slot=slider-thumb]]:border-destructive"),
+			children: /* @__PURE__ */ P(I.Control, {
+				className: "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-[orientation=horizontal]:min-h-control data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+				children: [/* @__PURE__ */ N(I.Track, {
+					"data-slot": "slider-track",
+					className: r("relative grow overflow-hidden rounded-full bg-muted select-none data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full", c),
+					children: /* @__PURE__ */ N(I.Indicator, {
+						"data-slot": "slider-range",
+						className: "absolute bg-primary select-none data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+					})
+				}), /* @__PURE__ */ N(I.Thumb, {
+					index: 0,
+					"data-slot": "slider-thumb",
+					getAriaLabel: () => k,
+					className: "block size-icon shrink-0 rounded-full border border-primary bg-background shadow-sm ring-ring transition-[color,box-shadow] select-none hover:ring-4 has-[:focus-visible]:ring-4 has-[:focus-visible]:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+				})]
+			})
+		}), !!b && F !== null && /* @__PURE__ */ N(o, {
+			tag: "span",
+			type: g ? "error" : "secondary",
+			className: "min-w-8 shrink-0 text-right tabular-nums",
+			children: F
+		})]
+	});
+}
+var ue = D.forwardRef(X);
+ue.displayName = "SliderField";
+//#endregion
+//#region src/components/base/value-inputs/date-time-input.tsx
+var Z = O(function({ value: e, onValueChange: t, placeholder: n, readableFormat: r = "dd-MM-yyyy HH:mm", stepMinutes: i = 30, modal: a = !0, invalid: o, disabled: s }, c) {
+	let l = e ? new Date(e) : void 0, u = o ? " " : void 0, d = A((e) => {
+		t?.(e.date ? e.date.toISOString() : void 0);
+	}, [t]);
+	return /* @__PURE__ */ N(y, {
+		ref: c,
+		className: "date-time-input--component",
+		mode: "single",
+		disabled: s,
+		error: u,
+		placeholder: n,
+		value: l,
+		onValueChange: d,
+		readableFormat: r,
+		withTime: {
+			enabled: !0,
+			format: "24",
+			step: i
+		},
+		modal: a
+	});
+});
+Z.displayName = "DateTimeInput";
+//#endregion
+export { H as a, V as c, J as i, R as l, ue as n, z as o, Y as r, ae as s, Z as t, L as u };
+
+//# sourceMappingURL=value-inputs-D0KCrfVC.js.map