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

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

@@ -137,7 +137,7 @@ function g({ value: g, defaultValue: _, onValueChange: v, min: y, max: b, disabl
 						className: t.preset,
 						onClick: () => W(e),
 						children: e.label
-					}, e.label))
+					}, e.id ?? e.label))
 				}),
 				/* @__PURE__ */ f("div", {
 					className: t.calendars,

package/dist/dock/dock.js

@@ -5,9 +5,9 @@ import { getLinkComponent as t, useSignals as n } from "@cascivo/core";
 import { builtin as r, t as i } from "@cascivo/i18n";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region ../components/src/dock/dock.tsx
-function s({ items: s, activeIndex: c, className: l, ariaLabel: u }) {
+function s({ items: s, activeIndex: c, className: l, ariaLabel: u, label: d }) {
 	return n(), /* @__PURE__ */ a("nav", {
-		"aria-label": u ?? i(r.dock.nav),
+		"aria-label": u ?? d ?? i(r.dock.nav),
 		className: [e.dock, l].filter(Boolean).join(" "),
 		children: s.map((n, r) => {
 			let i = r === c;

package/dist/dropdown/dropdown.js

@@ -12,96 +12,99 @@ var p = i({
 		open: { on: { CLOSE: "closed" } }
 	}
 });
-function m({ trigger: i, items: m, onSelect: h, placement: g = "bottom-start", open: _, onOpenChange: v }) {
+function m(e) {
+	return !("kind" in e);
+}
+function h({ trigger: i, items: h, onSelect: g, placement: _ = "bottom-start", open: v, onOpenChange: y }) {
 	u();
-	let [y, b] = s(p), x = n(null), S = n(null), C = n(null), w = n([]), T = c(-1), E = _ !== void 0, D = E ? _ : y.value === "open", O = o(D), k = m.map((e, t) => ({
+	let [b, x] = s(p), S = n(null), C = n(null), w = n(null), T = n([]), E = c(-1), D = v !== void 0, O = D ? v : b.value === "open", k = o(O), A = h.map((e, t) => ({
 		item: e,
 		index: t
-	})).filter(({ item: e }) => !e.separator && !e.disabled).map(({ index: e }) => e), A = (e) => {
-		E || b(e ? "OPEN" : "CLOSE"), v?.(e);
+	})).filter(({ item: e }) => m(e) && !e.disabled).map(({ index: e }) => e), j = (e) => {
+		D || x(e ? "OPEN" : "CLOSE"), y?.(e);
 	};
 	l(() => {
-		let e = T.value;
-		O.value && e >= 0 && w.current[e]?.focus();
+		let e = E.value;
+		k.value && e >= 0 && T.current[e]?.focus();
 	}), l(() => {
-		O.value ? T.value = k[0] ?? -1 : T.value = -1;
+		k.value ? E.value = A[0] ?? -1 : E.value = -1;
 	}), l(() => {
-		O.value ? C.current?.showPopover() : C.current?.hidePopover();
+		k.value ? w.current?.showPopover() : w.current?.hidePopover();
 	}), l(() => {
-		let e = C.current;
+		let e = w.current;
 		if (!e) return;
 		let t = (e) => {
-			e.newState === "closed" && A(!1);
+			e.newState === "closed" && j(!1);
 		};
 		return e.addEventListener("toggle", t), () => e.removeEventListener("toggle", t);
 	});
-	let j = (e) => {
-		let t = m[e];
-		!t || t.separator || t.disabled || (h?.(t.value), A(!1), a(S.current));
-	}, M = (e) => {
-		k.length !== 0 && (T.value = k[(k.indexOf(T.value) + e + k.length) % k.length] ?? -1);
+	let M = (e) => {
+		let t = h[e];
+		!t || !m(t) || t.disabled || (g?.(t.value), j(!1), a(C.current));
 	}, N = (e) => {
+		A.length !== 0 && (E.value = A[(A.indexOf(E.value) + e + A.length) % A.length] ?? -1);
+	}, P = (e) => {
 		switch (e.key) {
 			case "ArrowDown":
-				e.preventDefault(), M(1);
+				e.preventDefault(), N(1);
 				break;
 			case "ArrowUp":
-				e.preventDefault(), M(-1);
+				e.preventDefault(), N(-1);
 				break;
 			case "Home":
-				e.preventDefault(), T.value = k[0] ?? -1;
+				e.preventDefault(), E.value = A[0] ?? -1;
 				break;
 			case "End":
-				e.preventDefault(), T.value = k[k.length - 1] ?? -1;
+				e.preventDefault(), E.value = A[A.length - 1] ?? -1;
 				break;
 			case "Escape":
-				e.preventDefault(), A(!1), a(S.current);
+				e.preventDefault(), j(!1), a(C.current);
 				break;
 			case "Enter":
 			case " ":
-				e.preventDefault(), j(T.value);
+				e.preventDefault(), M(E.value);
 				break;
 		}
-	}, P = i, F = t(P, {
-		ref: r(S, P.props.ref),
+	}, F = i, I = t(F, {
+		ref: r(C, F.props.ref),
 		onClick: (e) => {
-			P.props.onClick?.(e), A(!D);
+			F.props.onClick?.(e), j(!O);
 		},
 		"aria-haspopup": "menu",
-		"aria-expanded": D
+		"aria-expanded": O
 	});
 	return /* @__PURE__ */ f("div", {
-		ref: x,
+		ref: S,
 		className: e.root,
-		children: [F, /* @__PURE__ */ d("div", {
-			ref: C,
+		children: [I, /* @__PURE__ */ d("div", {
+			ref: w,
 			popover: "auto",
 			role: "menu",
-			"data-placement": g,
-			"data-state": D ? "open" : "closed",
+			"data-placement": _,
+			"data-state": O ? "open" : "closed",
 			className: e.menu,
-			onKeyDown: N,
-			children: m.map((t, n) => t.separator ? /* @__PURE__ */ d("div", {
-				role: "separator",
-				className: e.separator
-			}, `sep-${n}`) : /* @__PURE__ */ f("button", {
+			onKeyDown: P,
+			children: h.map((t, n) => m(t) ? /* @__PURE__ */ f("button", {
 				type: "button",
 				role: "menuitem",
 				ref: (e) => {
-					w.current[n] = e;
+					T.current[n] = e;
 				},
-				tabIndex: T.value === n ? 0 : -1,
+				tabIndex: E.value === n ? 0 : -1,
 				disabled: t.disabled,
 				className: e.item,
-				onClick: () => j(n),
+				onClick: () => M(n),
 				children: [t.icon && /* @__PURE__ */ d("span", {
 					className: e.icon,
 					"aria-hidden": "true",
 					children: t.icon
 				}), t.label]
-			}, t.value))
+			}, t.value) : /* @__PURE__ */ d("div", {
+				role: "separator",
+				className: e.separator
+			}, `sep-${n}`))
 		})]
 	});
 }
 //#endregion
-export { m as Dropdown };
+export { h as Dropdown };

package/dist/editable/editable.js

@@ -5,50 +5,59 @@ import { useRef as t } from "react";
 import { cn as n, useSignal as r, useSignalEffect as i, useSignals as a } from "@cascivo/core";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region ../components/src/editable/editable.tsx
-function c({ value: c, onValueChange: l, placeholder: u, disabled: d = !1, submitOnBlur: f = !0, onCancel: p, className: m, ...h }) {
+function c({ value: c, onValueChange: l, placeholder: u, disabled: d = !1, submitOnBlur: f = !0, onCancel: p, className: m, id: h, "aria-labelledby": g, "aria-describedby": _, "aria-invalid": v, ...y }) {
 	a();
-	let g = r(!1), _ = r(c), v = t(null), y = t(p);
-	y.current = p;
-	let b = t(l);
-	b.current = l, g.value || (_.value = c), i(() => {
-		if (g.value) {
-			let e = v.current;
+	let b = r(!1), x = r(c), S = t(null), C = t(p);
+	C.current = p;
+	let w = t(l);
+	w.current = l;
+	let T = {
+		id: h,
+		"aria-labelledby": g,
+		"aria-describedby": _,
+		"aria-invalid": v
+	};
+	b.value || (x.value = c), i(() => {
+		if (b.value) {
+			let e = S.current;
 			e && (e.focus(), e.select());
 		}
 	});
-	function x() {
-		b.current(_.value), g.value = !1;
+	function E() {
+		w.current(x.value), b.value = !1;
 	}
-	function S() {
-		_.value = c, g.value = !1, y.current?.();
+	function D() {
+		x.value = c, b.value = !1, C.current?.();
 	}
-	return g.value ? /* @__PURE__ */ o("div", {
+	return b.value ? /* @__PURE__ */ o("div", {
 		className: n(e.wrapper, e.editing, m),
-		...h,
+		...y,
 		children: /* @__PURE__ */ o("input", {
-			ref: v,
+			ref: S,
 			className: e.input,
-			value: _.value,
+			...T,
+			value: x.value,
 			onChange: (e) => {
-				_.value = e.currentTarget.value;
+				x.value = e.currentTarget.value;
 			},
 			onKeyDown: (e) => {
-				e.key === "Enter" ? (e.preventDefault(), x()) : e.key === "Escape" && (e.preventDefault(), S());
+				e.key === "Enter" ? (e.preventDefault(), E()) : e.key === "Escape" && (e.preventDefault(), D());
 			},
 			onBlur: () => {
-				f ? x() : S();
+				f ? E() : D();
 			}
 		})
 	}) : /* @__PURE__ */ o("div", {
 		className: n(e.wrapper, m),
 		"data-disabled": d ? "" : void 0,
-		...h,
+		...y,
 		children: /* @__PURE__ */ s("button", {
 			type: "button",
 			className: e.preview,
+			...T,
 			disabled: d,
 			onClick: () => {
-				d || (g.value = !0);
+				d || (b.value = !0);
 			},
 			children: [/* @__PURE__ */ o("span", {
 				className: e["preview-text"],