@cascivo/react 0.16.0 → 0.17.0

package/dist/date-picker/date-picker.js

@@ -2,25 +2,25 @@
 
 import e from "./date-picker.module.js";
 import { useId as t, useRef as n } from "react";
-import { batch as r, cn as i, createMachine as a, useMachine as o, useSignal as s, useSignalEffect as c, useSignals as ee } from "@cascivo/core";
-import { builtin as l, currentLocale as te, t as u } from "@cascivo/i18n";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { batch as r, cn as i, createMachine as a, useControllableSignal as o, useMachine as s, useSignal as c, useSignalEffect as l, useSignals as ee } from "@cascivo/core";
+import { builtin as u, currentLocale as d, t as f } from "@cascivo/i18n";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region ../components/src/date-picker/date-picker.tsx
-var p = a({
+var h = a({
 	initial: "closed",
 	states: {
 		closed: { on: { OPEN: "open" } },
 		open: { on: { CLOSE: "closed" } }
 	}
 });
-function ne(e) {
+function g(e) {
 	try {
 		let t = new Intl.Locale(e).weekInfo;
 		if (t) return t.firstDay % 7;
 	} catch {}
 	return 1;
 }
-function m(e, t, n) {
+function te(e, t, n) {
 	let r = new Date(Date.UTC(e, t, 1)), i = new Date(Date.UTC(e, t + 1, 0)), a = (r.getUTCDay() - n + 7) % 7, o = [];
 	for (let e = 0; e < a; e++) o.push(null);
 	for (let n = 1; n <= i.getUTCDate(); n++) o.push(new Date(Date.UTC(e, t, n)));
@@ -29,170 +29,171 @@ function m(e, t, n) {
 	for (let e = 0; e < o.length; e += 7) s.push(o.slice(e, e + 7));
 	return s;
 }
-function h(e, t) {
+function _(e, t) {
 	return new Intl.DateTimeFormat(t).format(e);
 }
-function g(e) {
+function v(e) {
 	return e.toISOString().slice(0, 10);
 }
-function _(e) {
+function y(e) {
 	let [t, n, r] = e.split("-").map(Number);
 	return new Date(Date.UTC(t, n - 1, r));
 }
-function v({ value: a, defaultValue: v, onValueChange: y, onChange: b, min: x, max: S, clearable: C = !1, label: w, hint: T, error: E, size: D = "md", disabled: O = !1, labels: k, className: re, id: A }) {
+function b({ value: a, defaultValue: b, onValueChange: ne, onChange: x, min: S, max: C, clearable: w = !1, label: T, hint: E, error: D, size: re = "md", disabled: O = !1, labels: k, className: ie, id: ae }) {
 	ee();
-	let [j, M] = o(p), N = t(), P = A ?? `cascade-date-picker-${N}`, F = `${N}-grid`, I = te(), ie = k?.placeholder ?? u(l.datePicker.placeholder), ae = k?.previousMonth ?? u(l.datePicker.previousMonth), L = k?.nextMonth ?? u(l.datePicker.nextMonth), R = k?.clear ?? u(l.datePicker.clear), z = /* @__PURE__ */ new Date(), B = g(z), V = s(a ?? v);
-	a !== void 0 && (V.value = a);
-	let H = s(V.value ? _(V.value).getUTCFullYear() : z.getUTCFullYear()), U = s(V.value ? _(V.value).getUTCMonth() : z.getUTCMonth()), W = s(V.value), G = n(null);
-	c(() => {
-		if (j.value !== "open") return;
+	let [A, j] = s(h), M = t(), N = ae ?? `cascade-date-picker-${M}`, P = `${M}-grid`, F = d(), I = k?.placeholder ?? f(u.datePicker.placeholder), L = k?.previousMonth ?? f(u.datePicker.previousMonth), R = k?.nextMonth ?? f(u.datePicker.nextMonth), z = k?.clear ?? f(u.datePicker.clear), B = /* @__PURE__ */ new Date(), V = v(B), [H] = o({
+		value: a,
+		defaultValue: b
+	}), U = c(H.value ? y(H.value).getUTCFullYear() : B.getUTCFullYear()), W = c(H.value ? y(H.value).getUTCMonth() : B.getUTCMonth()), G = c(H.value), K = n(null);
+	l(() => {
+		if (A.value !== "open") return;
 		let e = (e) => {
-			G.current && !G.current.contains(e.target) && M("CLOSE");
+			K.current && !K.current.contains(e.target) && j("CLOSE");
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	});
-	let K = () => {
-		O || M("OPEN");
-	}, q = () => M("CLOSE"), J = y ?? b, Y = (e) => {
-		x && e < x || S && e > S || (a === void 0 && (V.value = e), J?.(e), q());
+	let q = () => {
+		O || j("OPEN");
+	}, J = () => j("CLOSE"), Y = ne ?? x, X = (e) => {
+		S && e < S || C && e > C || (a === void 0 && (H.value = e), Y?.(e), J());
 	}, oe = (e) => {
-		e.stopPropagation(), a === void 0 && (V.value = void 0), J?.(void 0);
+		e.stopPropagation(), a === void 0 && (H.value = void 0), Y?.(void 0);
 	}, se = () => {
-		U.value === 0 ? r(() => {
-			H.value--, U.value = 11;
-		}) : U.value--;
+		W.value === 0 ? r(() => {
+			U.value--, W.value = 11;
+		}) : W.value--;
 	}, ce = () => {
-		U.value === 11 ? r(() => {
-			H.value++, U.value = 0;
-		}) : U.value++;
-	}, X = ne(I), Z = m(H.value, U.value, X), le = new Intl.DateTimeFormat(I, { weekday: "short" }), ue = Array.from({ length: 7 }, (e, t) => {
-		let n = new Date(Date.UTC(2024, 0, 7 + X + t));
-		return le.format(n);
-	}), Q = new Intl.DateTimeFormat(I, {
+		W.value === 11 ? r(() => {
+			U.value++, W.value = 0;
+		}) : W.value++;
+	}, Z = g(F), le = te(U.value, W.value, Z), ue = new Intl.DateTimeFormat(F, { weekday: "short" }), de = Array.from({ length: 7 }, (e, t) => {
+		let n = new Date(Date.UTC(2024, 0, 7 + Z + t));
+		return ue.format(n);
+	}), Q = new Intl.DateTimeFormat(F, {
 		month: "long",
 		year: "numeric"
-	}).format(new Date(Date.UTC(H.value, U.value, 1))), de = (e) => {
-		let t = W.value;
+	}).format(new Date(Date.UTC(U.value, W.value, 1))), fe = (e) => {
+		let t = G.value;
 		if (!t) return;
-		let n = _(t), i;
+		let n = y(t), i;
 		if (e.key === "ArrowRight") i = new Date(Date.UTC(n.getUTCFullYear(), n.getUTCMonth(), n.getUTCDate() + 1));
 		else if (e.key === "ArrowLeft") i = new Date(Date.UTC(n.getUTCFullYear(), n.getUTCMonth(), n.getUTCDate() - 1));
 		else if (e.key === "ArrowDown") i = new Date(Date.UTC(n.getUTCFullYear(), n.getUTCMonth(), n.getUTCDate() + 7));
 		else if (e.key === "ArrowUp") i = new Date(Date.UTC(n.getUTCFullYear(), n.getUTCMonth(), n.getUTCDate() - 7));
 		else if (e.key === "Enter" || e.key === " ") {
-			e.preventDefault(), Y(t);
+			e.preventDefault(), X(t);
 			return;
 		} else if (e.key === "Escape") {
-			q();
+			J();
 			return;
 		} else return;
 		if (e.preventDefault(), i) {
-			let e = g(i);
-			if (x && e < x || S && e > S) return;
-			W.value = e, r(() => {
-				H.value = i.getUTCFullYear(), U.value = i.getUTCMonth();
+			let e = v(i);
+			if (S && e < S || C && e > C) return;
+			G.value = e, r(() => {
+				U.value = i.getUTCFullYear(), W.value = i.getUTCMonth();
 			});
 		}
-	}, $ = V.value ? h(_(V.value), I) : "";
-	return /* @__PURE__ */ f("div", {
-		ref: G,
-		className: i(e.wrapper, re),
-		"data-state": E ? "error" : j.value,
-		"data-size": D,
+	}, $ = H.value ? _(y(H.value), F) : "";
+	return /* @__PURE__ */ m("div", {
+		ref: K,
+		className: i(e.wrapper, ie),
+		"data-state": D ? "error" : A.value,
+		"data-size": re,
 		children: [
-			w && /* @__PURE__ */ d("label", {
+			T && /* @__PURE__ */ p("label", {
 				className: e.label,
-				htmlFor: P,
-				children: w
+				htmlFor: N,
+				children: T
 			}),
-			/* @__PURE__ */ f("div", {
+			/* @__PURE__ */ m("div", {
 				className: e.field,
-				children: [/* @__PURE__ */ f("button", {
-					id: P,
+				children: [/* @__PURE__ */ m("button", {
+					id: N,
 					type: "button",
 					role: "combobox",
-					"aria-expanded": j.value === "open",
-					"aria-controls": F,
+					"aria-expanded": A.value === "open",
+					"aria-controls": P,
 					"aria-haspopup": "dialog",
-					"aria-invalid": E ? !0 : void 0,
-					"aria-describedby": E ? `${N}-error` : T ? `${N}-hint` : void 0,
+					"aria-invalid": D ? !0 : void 0,
+					"aria-describedby": D ? `${M}-error` : E ? `${M}-hint` : void 0,
 					className: e.trigger,
 					disabled: O,
-					onClick: j.value === "open" ? q : K,
-					children: [/* @__PURE__ */ d("span", {
+					onClick: A.value === "open" ? J : q,
+					children: [/* @__PURE__ */ p("span", {
 						className: i(e.value, $ ? void 0 : e.placeholder),
-						children: $ || ie
-					}), /* @__PURE__ */ d("span", {
+						children: $ || I
+					}), /* @__PURE__ */ p("span", {
 						className: e.icon,
 						"aria-hidden": "true",
 						children: "📅"
 					})]
-				}), C && V.value !== void 0 && /* @__PURE__ */ d("button", {
+				}), w && H.value !== void 0 && /* @__PURE__ */ p("button", {
 					type: "button",
 					className: e.clear,
-					"aria-label": R,
+					"aria-label": z,
 					onClick: oe,
 					children: "✕"
 				})]
 			}),
-			/* @__PURE__ */ f("div", {
-				id: F,
+			/* @__PURE__ */ m("div", {
+				id: P,
 				role: "dialog",
 				"aria-label": Q,
 				className: e.calendar,
-				"data-state": j.value,
-				onKeyDown: de,
-				children: [/* @__PURE__ */ f("div", {
+				"data-state": A.value,
+				onKeyDown: fe,
+				children: [/* @__PURE__ */ m("div", {
 					className: e.header,
 					children: [
-						/* @__PURE__ */ d("button", {
+						/* @__PURE__ */ p("button", {
 							type: "button",
 							className: e.navButton,
-							"aria-label": ae,
+							"aria-label": L,
 							onClick: se,
 							children: "‹"
 						}),
-						/* @__PURE__ */ d("span", {
+						/* @__PURE__ */ p("span", {
 							className: e.monthLabel,
 							"aria-live": "polite",
 							children: Q
 						}),
-						/* @__PURE__ */ d("button", {
+						/* @__PURE__ */ p("button", {
 							type: "button",
 							className: e.navButton,
-							"aria-label": L,
+							"aria-label": R,
 							onClick: ce,
 							children: "›"
 						})
 					]
-				}), /* @__PURE__ */ f("table", {
+				}), /* @__PURE__ */ m("table", {
 					role: "grid",
 					className: e.grid,
-					children: [/* @__PURE__ */ d("thead", { children: /* @__PURE__ */ d("tr", { children: ue.map((t) => /* @__PURE__ */ d("th", {
+					children: [/* @__PURE__ */ p("thead", { children: /* @__PURE__ */ p("tr", { children: de.map((t) => /* @__PURE__ */ p("th", {
 						className: e.weekday,
 						abbr: t,
 						scope: "col",
 						children: t
-					}, t)) }) }), /* @__PURE__ */ d("tbody", { children: Z.map((t, n) => /* @__PURE__ */ d("tr", { children: t.map((t, n) => {
-						if (!t) return /* @__PURE__ */ d("td", { className: e.empty }, n);
-						let r = g(t), i = r === V.value, a = r === B, o = r === W.value, s = x !== void 0 && r < x || S !== void 0 && r > S;
-						return /* @__PURE__ */ d("td", {
+					}, t)) }) }), /* @__PURE__ */ p("tbody", { children: le.map((t, n) => /* @__PURE__ */ p("tr", { children: t.map((t, n) => {
+						if (!t) return /* @__PURE__ */ p("td", { className: e.empty }, n);
+						let r = v(t), i = r === H.value, a = r === V, o = r === G.value, s = S !== void 0 && r < S || C !== void 0 && r > C;
+						return /* @__PURE__ */ p("td", {
 							className: e.cell,
-							children: /* @__PURE__ */ d("button", {
+							children: /* @__PURE__ */ p("button", {
 								type: "button",
 								className: e.day,
 								tabIndex: o ? 0 : -1,
 								"aria-pressed": i,
-								"aria-label": h(t, I),
+								"aria-label": _(t, F),
 								"aria-current": a ? "date" : void 0,
 								"aria-disabled": s || void 0,
 								"data-selected": i || void 0,
 								"data-today": a || void 0,
 								onClick: () => {
-									s || Y(r);
+									s || X(r);
 								},
 								onFocus: () => {
-									W.value = r;
+									G.value = r;
 								},
 								children: t.getUTCDate()
 							})
@@ -200,19 +201,19 @@ function v({ value: a, defaultValue: v, onValueChange: y, onChange: b, min: x, m
 					}) }, n)) })]
 				})]
 			}),
-			E && /* @__PURE__ */ d("span", {
-				id: `${N}-error`,
+			D && /* @__PURE__ */ p("span", {
+				id: `${M}-error`,
 				className: e.error,
 				role: "alert",
-				children: E
+				children: D
 			}),
-			!E && T && /* @__PURE__ */ d("span", {
-				id: `${N}-hint`,
+			!D && E && /* @__PURE__ */ p("span", {
+				id: `${M}-hint`,
 				className: e.hint,
-				children: T
+				children: E
 			})
 		]
 	});
 }
 //#endregion
-export { v as DatePicker };
+export { b as DatePicker };

package/dist/field/field.css

@@ -1 +1 @@
-@layer cascivo.component{._field_ws86v_2{gap:var(--cascivo-space-2);font-family:var(--cascivo-font-sans);display:grid}._field_ws86v_2[data-disabled]{opacity:.5}._description_ws86v_12{font-size:var(--cascivo-text-sm);line-height:var(--cascivo-leading-snug);color:var(--cascivo-color-text-muted);margin:0}._error_ws86v_19{font-size:var(--cascivo-text-sm);line-height:var(--cascivo-leading-snug);color:var(--cascivo-color-destructive);margin:0}}@media (forced-colors:active){._error_ws86v_19{color:buttontext}}
+@layer cascivo.component{._field_1y14o_2{gap:var(--cascivo-space-2);font-family:var(--cascivo-font-sans);align-content:start;display:grid}._field_1y14o_2[data-disabled]{opacity:.5}._description_1y14o_20{font-size:var(--cascivo-text-sm);line-height:var(--cascivo-leading-snug);color:var(--cascivo-color-text-muted);margin:0}._error_1y14o_27{font-size:var(--cascivo-text-sm);line-height:var(--cascivo-leading-snug);color:var(--cascivo-color-destructive);margin:0}}@media (forced-colors:active){._error_1y14o_27{color:buttontext}}

package/dist/field/field.module.js

@@ -1,8 +1,8 @@
 import './field.css';
 var e = {
-	field: "_field_ws86v_2",
-	description: "_description_ws86v_12",
-	error: "_error_ws86v_19"
+	field: "_field_1y14o_2",
+	description: "_description_1y14o_20",
+	error: "_error_1y14o_27"
 };
 //#endregion
 export { e as default };