@cascivo/react 0.12.0 → 0.13.1

package/dist/node/color-picker/color-picker.js

@@ -2,9 +2,9 @@
 
 import e from "./color-picker.module.js";
 import { cn as t, useControllableSignal as n, useSignal as r, useSignalEffect as i, useSignals as a } from "@cascivo/core";
-import { builtin as o, t as s } from "@cascivo/i18n";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
-import { useId as d, useRef as f } from "react";
+import { useId as o, useRef as s } from "react";
+import { builtin as c, t as l } from "@cascivo/i18n";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region ../components/src/color-picker/color-picker.tsx
 function p(e, t, n) {
 	return Math.min(n, Math.max(t, e));
@@ -75,11 +75,11 @@ function _({ h: e, s: t, l: n, a: r }) {
 }
 function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S = !0, label: C, disabled: w, size: T = "md", className: E, labels: D }) {
 	a();
-	let O = d(), [k, A] = n({
+	let O = o(), [k, A] = n({
 		value: v,
 		defaultValue: y ?? "#3b82f6",
 		onChange: b
-	}), j = f(null), M = r(!1), N = g(m(k.value)), P = (e) => {
+	}), j = s(null), M = r(!1), N = g(m(k.value)), P = (e) => {
 		A(h(_(e), S));
 	}, F = (e, t) => {
 		let n = j.current;
@@ -119,22 +119,22 @@ function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S =
 	}, R = typeof window < "u" ? window.EyeDropper : void 0, z = () => {
 		R && new R().open().then((e) => A(e.sRGBHex));
 	}, B = {
-		hue: D?.hue ?? s(o.colorPicker.hue),
-		alpha: D?.alpha ?? s(o.colorPicker.alpha),
-		colorArea: D?.colorArea ?? s(o.colorPicker.colorArea),
-		eyedropper: D?.eyedropper ?? s(o.colorPicker.eyedropper)
+		hue: D?.hue ?? l(c.colorPicker.hue),
+		alpha: D?.alpha ?? l(c.colorPicker.alpha),
+		colorArea: D?.colorArea ?? l(c.colorPicker.colorArea),
+		eyedropper: D?.eyedropper ?? l(c.colorPicker.eyedropper)
 	}, V = h(m(k.value), !1), H = `hsl(${N.h} 100% 50%)`;
-	return /* @__PURE__ */ u("div", {
+	return /* @__PURE__ */ f("div", {
 		className: t(e.picker, E),
 		"data-size": T,
 		"data-disabled": w || void 0,
 		children: [
-			C && /* @__PURE__ */ l("span", {
+			C && /* @__PURE__ */ d("span", {
 				className: e.label,
 				id: `${O}-label`,
 				children: C
 			}),
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ d("div", {
 				ref: j,
 				className: e.area,
 				role: "slider",
@@ -147,7 +147,7 @@ function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S =
 					w || (e.preventDefault(), M.value = !0, F(e.clientX, e.clientY));
 				},
 				onKeyDown: I,
-				children: /* @__PURE__ */ l("span", {
+				children: /* @__PURE__ */ d("span", {
 					className: e.thumb,
 					style: {
 						insetInlineStart: `${N.s}%`,
@@ -156,15 +156,15 @@ function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S =
 					}
 				})
 			}),
-			/* @__PURE__ */ u("div", {
+			/* @__PURE__ */ f("div", {
 				className: e.sliders,
 				children: [
-					/* @__PURE__ */ l("label", {
+					/* @__PURE__ */ d("label", {
 						className: e.srOnly,
 						htmlFor: `${O}-hue`,
 						children: B.hue
 					}),
-					/* @__PURE__ */ l("input", {
+					/* @__PURE__ */ d("input", {
 						id: `${O}-hue`,
 						className: e.hue,
 						type: "range",
@@ -181,11 +181,11 @@ function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S =
 							a: N.a
 						})
 					}),
-					S && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("label", {
+					S && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("label", {
 						className: e.srOnly,
 						htmlFor: `${O}-alpha`,
 						children: B.alpha
-					}), /* @__PURE__ */ l("input", {
+					}), /* @__PURE__ */ d("input", {
 						id: `${O}-alpha`,
 						className: e.alpha,
 						type: "range",
@@ -205,11 +205,11 @@ function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S =
 					})] })
 				]
 			}),
-			x && x.length > 0 && /* @__PURE__ */ l("div", {
+			x && x.length > 0 && /* @__PURE__ */ d("div", {
 				className: e.presets,
 				role: "group",
 				"aria-label": B.colorArea,
-				children: x.map((t, n) => /* @__PURE__ */ l("button", {
+				children: x.map((t, n) => /* @__PURE__ */ d("button", {
 					type: "button",
 					className: e.preset,
 					style: { backgroundColor: t },
@@ -222,15 +222,15 @@ function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S =
 					}
 				}, t))
 			}),
-			/* @__PURE__ */ u("div", {
+			/* @__PURE__ */ f("div", {
 				className: e.row,
 				children: [
-					/* @__PURE__ */ l("span", {
+					/* @__PURE__ */ d("span", {
 						className: e.preview,
 						style: { backgroundColor: k.value },
 						"aria-hidden": "true"
 					}),
-					/* @__PURE__ */ l("input", {
+					/* @__PURE__ */ d("input", {
 						className: e.text,
 						type: "text",
 						value: k.value,
@@ -238,19 +238,19 @@ function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S =
 						"aria-label": C ?? B.colorArea,
 						onChange: (e) => A(e.target.value)
 					}),
-					R && /* @__PURE__ */ l("button", {
+					R && /* @__PURE__ */ d("button", {
 						type: "button",
 						className: e.eyedropper,
 						"aria-label": B.eyedropper,
 						disabled: w,
 						onClick: z,
-						children: /* @__PURE__ */ l("svg", {
+						children: /* @__PURE__ */ d("svg", {
 							width: "16",
 							height: "16",
 							viewBox: "0 0 24 24",
 							fill: "none",
 							"aria-hidden": "true",
-							children: /* @__PURE__ */ l("path", {
+							children: /* @__PURE__ */ d("path", {
 								d: "m2 22 1-1h3l9-9M3 21v-3l9-9m1.5 1.5-2-2M19 2l3 3-9 9-3-3z",
 								stroke: "currentColor",
 								strokeWidth: "2",

package/dist/node/combobox/combobox.js

@@ -1,164 +1,164 @@
 "use client";
 
 import e from "./combobox.module.js";
-import { cn as t, createMachine as n, useMachine as r, useSignal as i, useSignalEffect as a, useSignals as o } from "@cascivo/core";
-import { builtin as s, t as c } from "@cascivo/i18n";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { useId as d, useRef as f } from "react";
+import { cn as t, createMachine as n, focusElement as r, useMachine as i, useSignal as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
+import { useId as c, useRef as l } from "react";
+import { builtin as u, t as d } from "@cascivo/i18n";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region ../components/src/combobox/combobox.tsx
-var p = n({
+var m = n({
 	initial: "closed",
 	states: {
 		closed: { on: { OPEN: "open" } },
 		open: { on: { CLOSE: "closed" } }
 	}
 });
-function m({ options: n, value: m, defaultValue: h, onValueChange: g, onChange: _, clearable: v = !1, searchable: y = !0, label: b, hint: x, error: S, size: C = "md", disabled: w = !1, labels: T, className: E, id: D }) {
-	o();
-	let [O, k] = r(p), A = d(), j = D ?? `cascade-combobox-${A}`, M = `${A}-listbox`, N = f(null), P = T?.placeholder ?? c(s.combobox.placeholder), F = T?.empty ?? c(s.combobox.empty), I = T?.clear ?? c(s.combobox.clear), L = T?.search ?? c(s.combobox.search), R = i(m ?? h);
-	m !== void 0 && (R.value = m);
-	let z = i(""), B = i(0), V = O.value === "open", H = n.filter((e) => !y || !z.value ? !0 : e.label.toLowerCase().includes(z.value.toLowerCase())), U = n.find((e) => e.value === R.value);
-	a(() => {
-		if (!V) return;
+function h({ options: n, value: h, defaultValue: g, onValueChange: _, onChange: v, clearable: y = !1, searchable: b = !0, label: x, hint: S, error: C, size: w = "md", disabled: T = !1, labels: E, className: D, id: O }) {
+	s();
+	let [k, A] = i(m), j = c(), M = O ?? `cascade-combobox-${j}`, N = `${j}-listbox`, P = l(null), F = E?.placeholder ?? d(u.combobox.placeholder), I = E?.empty ?? d(u.combobox.empty), L = E?.clear ?? d(u.combobox.clear), R = E?.search ?? d(u.combobox.search), z = a(h ?? g);
+	h !== void 0 && (z.value = h);
+	let B = a(""), V = a(0), H = k.value === "open", U = n.filter((e) => !b || !B.value ? !0 : e.label.toLowerCase().includes(B.value.toLowerCase())), W = n.find((e) => e.value === z.value);
+	o(() => {
+		if (!H) return;
 		let e = (e) => {
-			let t = document.getElementById(`${A}-root`);
-			t && !t.contains(e.target) && k("CLOSE");
+			let t = document.getElementById(`${j}-root`);
+			t && !t.contains(e.target) && A("CLOSE");
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	});
-	let W = () => {
-		w || (z.value = "", B.value = 0, k("OPEN"), setTimeout(() => N.current?.focus(), 0));
-	}, G = () => {
-		k("CLOSE"), z.value = "";
-	}, K = g ?? _, q = (e) => {
-		m === void 0 && (R.value = e), K?.(e), G();
-	}, J = () => {
-		m === void 0 && (R.value = void 0), K?.(void 0);
-	}, Y = H.flatMap((e, t) => e.disabled ? [] : [t]), X = (e) => {
-		if (Y.length === 0) return;
-		let t = Y[(Y.indexOf(B.value) + e + Y.length) % Y.length];
-		t !== void 0 && (B.value = t);
-	}, Z = (e) => {
-		(e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), W());
+	let G = () => {
+		T || (B.value = "", V.value = 0, A("OPEN"), setTimeout(() => r(P.current), 0));
+	}, K = () => {
+		A("CLOSE"), B.value = "";
+	}, q = _ ?? v, J = (e) => {
+		h === void 0 && (z.value = e), q?.(e), K();
+	}, Y = () => {
+		h === void 0 && (z.value = void 0), q?.(void 0);
+	}, X = U.flatMap((e, t) => e.disabled ? [] : [t]), Z = (e) => {
+		if (X.length === 0) return;
+		let t = X[(X.indexOf(V.value) + e + X.length) % X.length];
+		t !== void 0 && (V.value = t);
 	}, Q = (e) => {
+		(e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), G());
+	}, ee = (e) => {
 		switch (e.key) {
 			case "ArrowDown":
-				e.preventDefault(), X(1);
+				e.preventDefault(), Z(1);
 				break;
 			case "ArrowUp":
-				e.preventDefault(), X(-1);
+				e.preventDefault(), Z(-1);
 				break;
 			case "Enter": {
 				e.preventDefault();
-				let t = H[B.value];
-				t && !t.disabled && q(t.value);
+				let t = U[V.value];
+				t && !t.disabled && J(t.value);
 				break;
 			}
 			case "Escape":
-				e.preventDefault(), G();
+				e.preventDefault(), K();
 				break;
 			case "Tab":
-				G();
+				K();
 				break;
 		}
-	}, $ = (e) => `${A}-option-${e}`;
-	return /* @__PURE__ */ u("div", {
-		id: `${A}-root`,
-		className: t(e.wrapper, E),
-		"data-state": S ? "error" : O.value,
-		"data-size": C,
+	}, $ = (e) => `${j}-option-${e}`;
+	return /* @__PURE__ */ p("div", {
+		id: `${j}-root`,
+		className: t(e.wrapper, D),
+		"data-state": C ? "error" : k.value,
+		"data-size": w,
 		children: [
-			b && /* @__PURE__ */ l("label", {
+			x && /* @__PURE__ */ f("label", {
 				className: e.label,
-				htmlFor: j,
-				children: b
+				htmlFor: M,
+				children: x
 			}),
-			/* @__PURE__ */ u("div", {
+			/* @__PURE__ */ p("div", {
 				className: e.field,
-				children: [/* @__PURE__ */ u("button", {
-					id: j,
+				children: [/* @__PURE__ */ p("button", {
+					id: M,
 					type: "button",
 					role: "combobox",
-					"aria-expanded": V,
-					"aria-controls": M,
+					"aria-expanded": H,
+					"aria-controls": N,
 					"aria-haspopup": "listbox",
-					"aria-activedescendant": V && B.value >= 0 ? $(B.value) : void 0,
-					"aria-invalid": S ? !0 : void 0,
-					"aria-describedby": S ? `${A}-error` : x ? `${A}-hint` : void 0,
+					"aria-activedescendant": H && V.value >= 0 ? $(V.value) : void 0,
+					"aria-invalid": C ? !0 : void 0,
+					"aria-describedby": C ? `${j}-error` : S ? `${j}-hint` : void 0,
 					className: e.trigger,
-					disabled: w,
-					onKeyDown: Z,
-					onClick: V ? G : W,
-					children: [/* @__PURE__ */ l("span", {
-						className: t(e.value, U ? void 0 : e.placeholder),
-						children: U?.label ?? P
-					}), /* @__PURE__ */ l("span", {
+					disabled: T,
+					onKeyDown: Q,
+					onClick: H ? K : G,
+					children: [/* @__PURE__ */ f("span", {
+						className: t(e.value, W ? void 0 : e.placeholder),
+						children: W?.label ?? F
+					}), /* @__PURE__ */ f("span", {
 						className: e.chevron,
 						"aria-hidden": "true"
 					})]
-				}), v && R.value !== void 0 && /* @__PURE__ */ l("button", {
+				}), y && z.value !== void 0 && /* @__PURE__ */ f("button", {
 					type: "button",
 					className: e.clear,
-					"aria-label": I,
+					"aria-label": L,
 					onClick: (e) => {
-						e.stopPropagation(), J();
+						e.stopPropagation(), Y();
 					},
 					children: "✕"
 				})]
 			}),
-			/* @__PURE__ */ u("div", {
+			/* @__PURE__ */ p("div", {
 				role: "listbox",
-				id: M,
+				id: N,
 				className: e.listbox,
-				"data-state": V ? "open" : "closed",
-				"aria-label": b,
-				children: [y && V && /* @__PURE__ */ l("div", {
+				"data-state": H ? "open" : "closed",
+				"aria-label": x,
+				children: [b && H && /* @__PURE__ */ f("div", {
 					className: e.searchWrapper,
-					children: /* @__PURE__ */ l("input", {
-						ref: N,
+					children: /* @__PURE__ */ f("input", {
+						ref: P,
 						type: "text",
 						className: e.search,
-						value: z.value,
+						value: B.value,
 						onChange: (e) => {
-							z.value = e.target.value, B.value = 0;
+							B.value = e.target.value, V.value = 0;
 						},
-						onKeyDown: Q,
-						"aria-label": L,
+						onKeyDown: ee,
+						"aria-label": R,
 						autoComplete: "off"
 					})
-				}), H.length === 0 ? /* @__PURE__ */ l("div", {
+				}), U.length === 0 ? /* @__PURE__ */ f("div", {
 					className: e.empty,
-					children: F
-				}) : H.map((t, n) => /* @__PURE__ */ l("div", {
+					children: I
+				}) : U.map((t, n) => /* @__PURE__ */ f("div", {
 					id: $(n),
 					role: "option",
-					"aria-selected": t.value === R.value,
+					"aria-selected": t.value === z.value,
 					"aria-disabled": t.disabled || void 0,
-					"data-state": n === B.value ? "active" : void 0,
+					"data-state": n === V.value ? "active" : void 0,
 					"data-disabled": t.disabled || void 0,
 					className: e.option,
 					onMouseEnter: () => {
-						t.disabled || (B.value = n);
+						t.disabled || (V.value = n);
 					},
 					onClick: () => {
-						t.disabled || q(t.value);
+						t.disabled || J(t.value);
 					},
 					children: t.label
 				}, t.value))]
 			}),
-			S && /* @__PURE__ */ l("span", {
-				id: `${A}-error`,
+			C && /* @__PURE__ */ f("span", {
+				id: `${j}-error`,
 				className: e.error,
 				role: "alert",
-				children: S
+				children: C
 			}),
-			!S && x && /* @__PURE__ */ l("span", {
-				id: `${A}-hint`,
+			!C && S && /* @__PURE__ */ f("span", {
+				id: `${j}-hint`,
 				className: e.hint,
-				children: x
+				children: S
 			})
 		]
 	});
 }
 //#endregion
-export { m as Combobox };
+export { h as Combobox };

package/dist/node/combobox/combobox.module.js

@@ -1,21 +1,21 @@
 "use client";
 
 var e = {
-	wrapper: "_wrapper_bi94t_2",
-	label: "_label_bi94t_10",
-	field: "_field_bi94t_16",
-	trigger: "_trigger_bi94t_22",
-	value: "_value_bi94t_70",
-	placeholder: "_placeholder_bi94t_76",
-	chevron: "_chevron_bi94t_80",
-	clear: "_clear_bi94t_96",
-	listbox: "_listbox_bi94t_122",
-	searchWrapper: "_searchWrapper_bi94t_156",
-	search: "_search_bi94t_156",
-	option: "_option_bi94t_178",
-	empty: "_empty_bi94t_201",
-	error: "_error_bi94t_208",
-	hint: "_hint_bi94t_213"
+	wrapper: "_wrapper_11nor_2",
+	label: "_label_11nor_14",
+	field: "_field_11nor_20",
+	trigger: "_trigger_11nor_26",
+	value: "_value_11nor_74",
+	placeholder: "_placeholder_11nor_80",
+	chevron: "_chevron_11nor_84",
+	clear: "_clear_11nor_100",
+	listbox: "_listbox_11nor_126",
+	searchWrapper: "_searchWrapper_11nor_160",
+	search: "_search_11nor_160",
+	option: "_option_11nor_182",
+	empty: "_empty_11nor_205",
+	error: "_error_11nor_212",
+	hint: "_hint_11nor_217"
 };
 //#endregion
 export { e as default };