@cascivo/react 0.9.0 → 0.10.0

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

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

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

@@ -0,0 +1,25 @@
+"use client";
+
+var e = {
+	wrapper: "_wrapper_6chzy_2",
+	label: "_label_6chzy_27",
+	field: "_field_6chzy_34",
+	trigger: "_trigger_6chzy_40",
+	value: "_value_6chzy_78",
+	placeholder: "_placeholder_6chzy_84",
+	icon: "_icon_6chzy_87",
+	clear: "_clear_6chzy_92",
+	calendar: "_calendar_6chzy_117",
+	header: "_header_6chzy_149",
+	monthLabel: "_monthLabel_6chzy_156",
+	navButton: "_navButton_6chzy_162",
+	grid: "_grid_6chzy_184",
+	weekday: "_weekday_6chzy_189",
+	cell: "_cell_6chzy_198",
+	empty: "_empty_6chzy_202",
+	day: "_day_6chzy_206",
+	error: "_error_6chzy_241",
+	hint: "_hint_6chzy_245"
+};
+//#endregion
+export { e as default };

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

@@ -0,0 +1,196 @@
+"use client";
+
+import { Calendar as e } from "../calendar/calendar.js";
+import t from "./date-range-picker.module.js";
+import { batch as n, cn as r, useControllableSignal as i, useSignal as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
+import { builtin as c, currentLocale as ee, t as l } from "@cascivo/i18n";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useRef as f } from "react";
+//#region ../components/src/date-range-picker/date-range-picker.tsx
+function p(e) {
+	return Date.UTC(e.getUTCFullYear(), e.getUTCMonth(), e.getUTCDate());
+}
+function m(e, t) {
+	return !e || !t ? !1 : p(e) === p(t);
+}
+function h(e, t, n) {
+	let r = new Date(Date.UTC(e, t + n, 1));
+	return {
+		year: r.getUTCFullYear(),
+		month: r.getUTCMonth()
+	};
+}
+function g({ value: g, defaultValue: _, onValueChange: te, min: v, max: y, disabled: b, presets: x, locale: S, placeholder: C, size: w = "md", labels: T, className: ne }) {
+	s();
+	let E = S ?? ee(), re = C ?? l(c.dateRangePicker.placeholder), D = T?.apply ?? l(c.dateRangePicker.apply), O = T?.clear ?? l(c.dateRangePicker.clear), k = T?.previousMonth ?? l(c.calendar.previousMonth), A = T?.nextMonth ?? l(c.calendar.nextMonth), [j, M] = i({
+		value: g === void 0 ? void 0 : g,
+		defaultValue: _ ?? null,
+		onChange: (e) => {
+			e && te?.(e);
+		}
+	}), N = a(!1), P = a(null), F = a(null), I = j.value?.start ?? _?.start ?? /* @__PURE__ */ new Date(), L = a(I.getUTCFullYear()), R = a(I.getUTCMonth()), z = f(null);
+	o(() => {
+		if (!N.value) return;
+		let e = (e) => {
+			z.current && !z.current.contains(e.target) && (N.value = !1);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	});
+	let B = () => {
+		N.value = !0;
+	}, V = () => {
+		N.value = !1;
+	}, H = (e) => {
+		let t = h(L.value, R.value, e);
+		n(() => {
+			L.value = t.year, R.value = t.month;
+		});
+	}, U = (e) => {
+		let t = P.value;
+		if (t === null) {
+			P.value = e;
+			return;
+		}
+		if (m(t, e)) {
+			n(() => {
+				P.value = null, F.value = null;
+			}), M(null);
+			return;
+		}
+		let r = p(t) <= p(e) ? {
+			start: t,
+			end: e
+		} : {
+			start: e,
+			end: t
+		};
+		n(() => {
+			P.value = null, F.value = null;
+		}), M(r);
+	}, W = (e) => {
+		n(() => {
+			P.value = null, F.value = null, L.value = e.range.start.getUTCFullYear(), R.value = e.range.start.getUTCMonth();
+		}), M(e.range);
+	}, G = () => {
+		n(() => {
+			P.value = null, F.value = null;
+		}), M(null);
+	}, K = P.value ?? j.value?.start ?? null, q = P.value ? F.value ?? null : j.value?.end ?? null, J = K && q ? Math.min(p(K), p(q)) : null, Y = K && q ? Math.max(p(K), p(q)) : null, ie = (e) => {
+		if (J === null || Y === null) return !1;
+		let t = p(e);
+		return t > J && t < Y;
+	}, ae = (e) => m(e, K) || J !== null && p(e) === J, oe = (e) => m(e, q) || Y !== null && p(e) === Y, X = new Intl.DateTimeFormat(E, {
+		year: "numeric",
+		month: "short",
+		day: "numeric"
+	}), Z = j.value ? `${X.format(j.value.start)} → ${X.format(j.value.end)}` : "", Q = h(L.value, R.value, 1), $ = {
+		locale: E,
+		size: w,
+		...v === void 0 ? {} : { min: v },
+		...y === void 0 ? {} : { max: y },
+		...b === void 0 ? {} : { disabled: b },
+		hideNav: !0,
+		isInRange: ie,
+		isRangeStart: ae,
+		isRangeEnd: oe,
+		onValueChange: U,
+		onDayHover: (e) => {
+			F.value = e;
+		},
+		labels: {
+			previousMonth: k,
+			nextMonth: A
+		}
+	};
+	return /* @__PURE__ */ d("div", {
+		ref: z,
+		className: r(t.wrapper, ne),
+		"data-size": w,
+		onKeyDown: (e) => {
+			e.key === "Escape" && N.value && (e.stopPropagation(), V());
+		},
+		children: [/* @__PURE__ */ d("button", {
+			type: "button",
+			role: "combobox",
+			"aria-expanded": N.value,
+			"aria-haspopup": "dialog",
+			"aria-label": T?.label ?? l(c.dateRangePicker.label),
+			className: t.trigger,
+			onClick: N.value ? V : B,
+			children: [/* @__PURE__ */ u("span", {
+				className: r(t.value, Z ? void 0 : t.placeholder),
+				children: Z || re
+			}), /* @__PURE__ */ u("span", {
+				className: t.icon,
+				"aria-hidden": "true",
+				children: "📅"
+			})]
+		}), /* @__PURE__ */ d("div", {
+			role: "dialog",
+			className: t.panel,
+			"data-state": N.value ? "open" : "closed",
+			children: [
+				x && x.length > 0 && /* @__PURE__ */ u("div", {
+					className: t.presets,
+					children: x.map((e) => /* @__PURE__ */ u("button", {
+						type: "button",
+						className: t.preset,
+						onClick: () => W(e),
+						children: e.label
+					}, e.label))
+				}),
+				/* @__PURE__ */ d("div", {
+					className: t.calendars,
+					children: [
+						/* @__PURE__ */ u("div", {
+							className: t.calNav,
+							children: /* @__PURE__ */ u("button", {
+								type: "button",
+								className: t.navButton,
+								"aria-label": k,
+								onClick: () => H(-1),
+								children: "‹"
+							})
+						}),
+						/* @__PURE__ */ u(e, {
+							month: R.value,
+							year: L.value,
+							...$
+						}),
+						/* @__PURE__ */ u(e, {
+							month: Q.month,
+							year: Q.year,
+							...$
+						}),
+						/* @__PURE__ */ u("div", {
+							className: t.calNav,
+							children: /* @__PURE__ */ u("button", {
+								type: "button",
+								className: t.navButton,
+								"aria-label": A,
+								onClick: () => H(1),
+								children: "›"
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ d("div", {
+					className: t.footer,
+					children: [/* @__PURE__ */ u("button", {
+						type: "button",
+						className: t.clearBtn,
+						onClick: G,
+						children: O
+					}), /* @__PURE__ */ u("button", {
+						type: "button",
+						className: t.applyBtn,
+						onClick: V,
+						children: D
+					})]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { g as DateRangePicker };

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

@@ -0,0 +1,20 @@
+"use client";
+
+var e = {
+	wrapper: "_wrapper_k1szr_2",
+	trigger: "_trigger_k1szr_25",
+	value: "_value_k1szr_55",
+	placeholder: "_placeholder_k1szr_61",
+	icon: "_icon_k1szr_64",
+	panel: "_panel_k1szr_69",
+	calendars: "_calendars_k1szr_104",
+	calNav: "_calNav_k1szr_110",
+	navButton: "_navButton_k1szr_116",
+	presets: "_presets_k1szr_139",
+	preset: "_preset_k1szr_139",
+	footer: "_footer_k1szr_166",
+	clearBtn: "_clearBtn_k1szr_175",
+	applyBtn: "_applyBtn_k1szr_176"
+};
+//#endregion
+export { e as default };

package/dist/node/dock/dock.js

@@ -0,0 +1,34 @@
+"use client";
+
+import e from "./dock.module.js";
+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 }) {
+	return n(), /* @__PURE__ */ a("nav", {
+		"aria-label": u ?? i(r.dock.nav),
+		className: [e.dock, l].filter(Boolean).join(" "),
+		children: s.map((n, r) => {
+			let i = r === c;
+			return /* @__PURE__ */ o(n.href ? t() : "button", {
+				className: e.item,
+				"data-active": i || void 0,
+				"aria-current": i ? "page" : void 0,
+				...n.href ? { href: n.href } : {},
+				type: n.href ? void 0 : "button",
+				onClick: n.onClick,
+				children: [/* @__PURE__ */ a("span", {
+					className: e.icon,
+					"aria-hidden": "true",
+					children: n.icon
+				}), /* @__PURE__ */ a("span", {
+					className: e.label,
+					children: n.label
+				})]
+			}, r);
+		})
+	});
+}
+//#endregion
+export { s as Dock };

package/dist/node/dock/dock.module.js

@@ -0,0 +1,10 @@
+"use client";
+
+var e = {
+	dock: "_dock_cqgv4_2",
+	item: "_item_cqgv4_20",
+	icon: "_icon_cqgv4_47",
+	label: "_label_cqgv4_54"
+};
+//#endregion
+export { e as default };

package/dist/node/drawer/drawer.js

@@ -0,0 +1,95 @@
+"use client";
+
+import e from "./drawer.module.js";
+import { DismissableLayer as t, FocusScope as n, Portal as r, Presence as i, cn as a, useControllableSignal as o, useDraggable as s, useScrollLock as c, useSignals as l } from "@cascivo/core";
+import { builtin as u, t as d } from "@cascivo/i18n";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { useId as m } from "react";
+//#region ../components/src/drawer/drawer.tsx
+var h = 80;
+function g({ open: g, defaultOpen: _, onOpenChange: v, side: y = "end", size: b, title: x, description: S, children: C, labels: w, className: T, swipeToDismiss: E = !1 }) {
+	l();
+	let [D, O] = o({
+		value: g,
+		defaultValue: _ ?? !1,
+		onChange: v
+	});
+	c(D);
+	let k = y === "top" || y === "bottom" ? "y" : "x", { handleRef: A, offset: j, isDragging: M, reset: N } = s({
+		isDisabled: !E,
+		axis: k,
+		onDragEnd: (e) => {
+			let t = k === "y" ? e.y : e.x, n = y === "end" && t > h || y === "start" && t < -80 || y === "bottom" && t > h || y === "top" && t < -80;
+			N(), n && O(!1);
+		}
+	}), P = m(), F = m(), I = w?.close ?? d(u.drawer.close), L = {
+		...b ? { "--_drawer-size": b } : {},
+		...E ? {
+			"--_drawer-drag-x": `${j.value.x}px`,
+			"--_drawer-drag-y": `${j.value.y}px`
+		} : {}
+	};
+	return /* @__PURE__ */ f(r, { children: /* @__PURE__ */ f(i, {
+		present: D,
+		children: /* @__PURE__ */ f("div", {
+			className: e.overlay,
+			"data-side": y,
+			children: /* @__PURE__ */ f(t, {
+				onDismiss: () => O(!1),
+				children: /* @__PURE__ */ f(n, {
+					trapped: !0,
+					restoreFocus: !0,
+					autoFocus: !0,
+					children: /* @__PURE__ */ p("div", {
+						role: "dialog",
+						"aria-modal": "true",
+						"aria-labelledby": x ? P : void 0,
+						"aria-describedby": S ? F : void 0,
+						"data-side": y,
+						"data-dragging": E && M.value ? "" : void 0,
+						className: a(e.panel, T),
+						style: L,
+						children: [(x || S) && /* @__PURE__ */ p("div", {
+							className: e.header,
+							ref: E ? A : void 0,
+							children: [/* @__PURE__ */ p("div", {
+								className: e.heading,
+								children: [x && /* @__PURE__ */ f("h2", {
+									id: P,
+									className: e.title,
+									children: x
+								}), S && /* @__PURE__ */ f("p", {
+									id: F,
+									className: e.description,
+									children: S
+								})]
+							}), /* @__PURE__ */ f("button", {
+								type: "button",
+								"aria-label": I,
+								onClick: () => O(!1),
+								className: e.close,
+								children: /* @__PURE__ */ f("svg", {
+									"aria-hidden": "true",
+									viewBox: "0 0 16 16",
+									className: e.closeIcon,
+									children: /* @__PURE__ */ f("path", {
+										d: "M4 4l8 8M12 4l-8 8",
+										fill: "none",
+										stroke: "currentColor",
+										strokeWidth: "1.5",
+										strokeLinecap: "round"
+									})
+								})
+							})]
+						}), /* @__PURE__ */ f("div", {
+							className: e.body,
+							children: C
+						})]
+					})
+				})
+			})
+		})
+	}) });
+}
+//#endregion
+export { g as Drawer };

package/dist/node/drawer/drawer.module.js

@@ -0,0 +1,15 @@
+"use client";
+
+var e = {
+	overlay: "_overlay_cbcjg_2",
+	panel: "_panel_cbcjg_39",
+	header: "_header_cbcjg_124",
+	heading: "_heading_cbcjg_134",
+	title: "_title_cbcjg_140",
+	description: "_description_cbcjg_147",
+	close: "_close_cbcjg_153",
+	closeIcon: "_closeIcon_cbcjg_181",
+	body: "_body_cbcjg_186"
+};
+//#endregion
+export { e as default };