@cascivo/react 0.3.3 → 0.3.7

package/dist/data-table/data-table.js

@@ -0,0 +1,368 @@
+"use client";
+
+import { Button as e } from "../button/button.js";
+import { Checkbox as t } from "../checkbox/checkbox.js";
+import n from "./data-table.module.js";
+import { batch as r, cn as i, useComputed as a, useSignal as o, useSignalEffect as ee, useSignals as te } 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 { Fragment as ne, useId as re, useRef as ie } from "react";
+import { flushSync as ae } from "react-dom";
+//#region ../components/src/data-table/data-table.tsx
+function d(e, t) {
+	return e[t];
+}
+function oe(e, t) {
+	return typeof e == "number" && typeof t == "number" ? e - t : String(e ?? "").localeCompare(String(t ?? ""));
+}
+function f({ columns: f, rows: se, getRowId: ce, sort: p, defaultSort: le, sortMode: ue = "client", onSortChange: de, searchable: m = !1, pagination: h, selection: g, batchActions: _, renderExpandedRow: v, density: fe = "normal", zebra: pe = !1, stickyHeader: me = !1, loading: y = !1, emptyState: he, title: b, description: x, labels: S, className: ge, virtualized: C = !1, rowHeight: w = 40, windowSize: _e = 20, overscan: ve = 3 }) {
+	te();
+	let ye = re(), T = {
+		search: S?.search ?? c(s.dataTable.search),
+		empty: S?.empty ?? c(s.dataTable.empty),
+		selectAll: S?.selectAll ?? c(s.dataTable.selectAll),
+		selectRow: S?.selectRow ?? c(s.dataTable.selectRow),
+		itemsSelected: (e) => S?.itemsSelected?.(e) ?? c(s.dataTable.itemsSelected, { count: e }),
+		expandRow: S?.expandRow ?? c(s.dataTable.expandRow)
+	}, E = o(se);
+	E.value = se;
+	let D = o(f);
+	D.value = f;
+	let O = o(p ?? le);
+	p !== void 0 && (O.value = p);
+	let k = o(g?.selected ?? []);
+	g?.selected !== void 0 && (k.value = g.selected);
+	let A = o(""), j = o(1), M = o(h?.pageSize ?? 0), N = o(/* @__PURE__ */ new Set()), P = ie(null), F = o(0);
+	ee(() => {
+		if (!C) return;
+		let e = P.current;
+		if (!e) return;
+		let t = () => {
+			ae(() => {
+				F.value = e.scrollTop;
+			});
+		};
+		return e.addEventListener("scroll", t, { passive: !0 }), () => e.removeEventListener("scroll", t);
+	});
+	let I = a(() => E.value.map((e, t) => ({
+		row: e,
+		id: ce ? ce(e) : String(t)
+	}))), L = a(() => {
+		let e = A.value.trim().toLowerCase();
+		if (!e) return I.value;
+		let t = D.value;
+		return I.value.filter((n) => t.some((t) => String(d(n.row, t.key) ?? "").toLowerCase().includes(e)));
+	}), R = a(() => {
+		let e = O.value;
+		if (!e || ue === "server") return L.value;
+		let t = L.value.map((e, t) => [e, t]);
+		return t.sort((t, n) => {
+			let r = oe(d(t[0].row, e.key), d(n[0].row, e.key));
+			return e.direction === "desc" && (r = -r), r === 0 ? t[1] - n[1] : r;
+		}), t.map(([e]) => e);
+	}), z = a(() => h ? Math.max(1, Math.ceil(L.value.length / M.value)) : 1), B = a(() => Math.min(j.value, z.value)), V = a(() => {
+		if (!h) return R.value;
+		let e = (B.value - 1) * M.value;
+		return R.value.slice(e, e + M.value);
+	}), H = a(() => C ? Math.floor(F.value / w) : 0), U = a(() => C ? Math.min(H.value + _e + ve * 2, V.value.length) : V.value.length), be = a(() => C ? V.value.slice(H.value, U.value) : V.value), xe = (e) => {
+		let t = O.value, n;
+		n = !t || t.key !== e ? {
+			key: e,
+			direction: "asc"
+		} : t.direction === "asc" ? {
+			key: e,
+			direction: "desc"
+		} : void 0, r(() => {
+			p === void 0 && (O.value = n), j.value = 1;
+		}), de?.(n);
+	}, Se = (e) => {
+		if (![
+			"ArrowUp",
+			"ArrowDown",
+			"ArrowLeft",
+			"ArrowRight"
+		].includes(e.key)) return;
+		let t = e.currentTarget, n = Array.from(t.querySelectorAll("th button, td button, td input[type=\"checkbox\"]")), r = n.indexOf(document.activeElement);
+		if (r === -1) return;
+		e.preventDefault();
+		let i = (e) => e.closest("tr"), a;
+		if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+			let t = n[r + (e.key === "ArrowRight" ? 1 : -1)];
+			t && i(t) === i(n[r]) && (a = t);
+		} else {
+			let t = e.key === "ArrowDown" ? 1 : -1, o = n[r];
+			for (let e = r + t; e >= 0 && e < n.length; e += t) if (i(n[e]) !== i(o)) {
+				a = n[e];
+				break;
+			}
+		}
+		a?.focus();
+	}, W = (e) => {
+		g?.selected === void 0 && (k.value = e), g?.onChange?.(e);
+	}, Ce = (e) => {
+		let t = k.value;
+		g?.mode === "single" ? W(t.includes(e) ? [] : [e]) : W(t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
+	}, we = (e) => {
+		let t = new Set(N.value);
+		t.has(e) ? t.delete(e) : t.add(e), N.value = t;
+	}, G = V.value, K = k.value, Te = N.value, q = G.length > 0 && G.every((e) => K.includes(e.id)), Ee = G.some((e) => K.includes(e.id)), J = be.value, Y = H.value, X = U.value, De = () => {
+		let e = G.map((e) => e.id);
+		W(q ? K.filter((t) => !e.includes(t)) : [...new Set([...K, ...e])]);
+	}, Z = f.length + +!!g + +!!v, Oe = h && !C && J.length > 0 ? Math.max(0, M.value - J.length) : 0, ke = `${ye}-title`, Ae = `${ye}-description`, Q = L.value.length, $ = Q === 0 ? 0 : (B.value - 1) * M.value + 1, je = Q === 0 ? 0 : $ + G.length - 1, Me = !!_ && _.length > 0 && K.length > 0;
+	return /* @__PURE__ */ u("div", {
+		className: i(n.root, ge),
+		"data-density": fe,
+		"data-zebra": pe || void 0,
+		"data-sticky-header": me || void 0,
+		"data-paginated": h ? !0 : void 0,
+		children: [
+			/* @__PURE__ */ l("span", {
+				"aria-live": "polite",
+				className: n.srOnly,
+				children: k.value.length > 0 ? T.itemsSelected(k.value.length) : ""
+			}),
+			(b !== void 0 || x !== void 0 || m) && /* @__PURE__ */ u("div", {
+				className: n.toolbar,
+				children: [(b !== void 0 || x !== void 0) && /* @__PURE__ */ u("div", {
+					className: n.heading,
+					children: [b !== void 0 && /* @__PURE__ */ l("div", {
+						id: ke,
+						className: n.title,
+						children: b
+					}), x !== void 0 && /* @__PURE__ */ l("div", {
+						id: Ae,
+						className: n.description,
+						children: x
+					})]
+				}), m && /* @__PURE__ */ l("input", {
+					type: "search",
+					className: n.search,
+					"aria-label": T.search,
+					placeholder: T.search,
+					value: A.value,
+					onChange: (e) => {
+						A.value = e.target.value, j.value = 1;
+					}
+				})]
+			}),
+			Me && /* @__PURE__ */ u("div", {
+				className: n.batchBar,
+				children: [/* @__PURE__ */ l("span", {
+					className: n.batchCount,
+					children: T.itemsSelected(K.length)
+				}), /* @__PURE__ */ l("div", {
+					className: n.batchActions,
+					children: _.map((t) => /* @__PURE__ */ l(e, {
+						size: "sm",
+						variant: "secondary",
+						onClick: () => t.onClick(K),
+						children: t.label
+					}, t.label))
+				})]
+			}),
+			/* @__PURE__ */ l("div", {
+				ref: C ? P : void 0,
+				className: i(n.scroller, C && n.scrollerVirtualized),
+				children: /* @__PURE__ */ u("table", {
+					className: n.table,
+					"aria-labelledby": b === void 0 ? void 0 : ke,
+					"aria-describedby": x === void 0 ? void 0 : Ae,
+					"aria-busy": y || void 0,
+					"aria-rowcount": C ? G.length : void 0,
+					onKeyDown: Se,
+					children: [
+						/* @__PURE__ */ u("colgroup", { children: [
+							v && /* @__PURE__ */ l("col", { className: n.controlCol }),
+							g && /* @__PURE__ */ l("col", { className: n.controlCol }),
+							f.map((e) => /* @__PURE__ */ l("col", { style: e.width === void 0 ? void 0 : { width: e.width } }, e.key))
+						] }),
+						/* @__PURE__ */ l("thead", { children: /* @__PURE__ */ u("tr", { children: [
+							v && /* @__PURE__ */ l("th", {
+								scope: "col",
+								className: n.controlCell,
+								children: /* @__PURE__ */ l("span", {
+									className: n.srOnly,
+									children: T.expandRow
+								})
+							}),
+							g && /* @__PURE__ */ l("th", {
+								scope: "col",
+								className: n.controlCell,
+								children: g.mode === "multi" ? /* @__PURE__ */ l(t, {
+									"aria-label": T.selectAll,
+									checked: q,
+									indeterminate: Ee && !q,
+									onChange: De
+								}) : /* @__PURE__ */ l("span", {
+									className: n.srOnly,
+									children: T.selectRow
+								})
+							}),
+							f.map((e) => {
+								let t = O.value?.key === e.key ? O.value.direction : void 0, r = t === "asc" ? "ascending" : t === "desc" ? "descending" : "none";
+								return /* @__PURE__ */ l("th", {
+									scope: "col",
+									"data-align": e.align ?? "start",
+									"aria-sort": e.sortable ? r : void 0,
+									children: e.sortable ? /* @__PURE__ */ l("button", {
+										type: "button",
+										className: n.sortButton,
+										"data-state": r,
+										onClick: () => xe(e.key),
+										children: e.header
+									}) : e.header
+								}, e.key);
+							})
+						] }) }),
+						/* @__PURE__ */ u("tbody", { children: [
+							y && Array.from({ length: 5 }, (e, t) => /* @__PURE__ */ l("tr", {
+								className: n.row,
+								children: Array.from({ length: Z }, (e, t) => /* @__PURE__ */ l("td", { children: /* @__PURE__ */ l("span", {
+									className: n.shimmer,
+									"aria-hidden": "true"
+								}) }, t))
+							}, t)),
+							!y && G.length === 0 && /* @__PURE__ */ l("tr", {
+								"data-empty-row": !0,
+								children: /* @__PURE__ */ l("td", {
+									colSpan: Z,
+									className: n.emptyCell,
+									children: he ?? T.empty
+								})
+							}),
+							!y && C && Y > 0 && /* @__PURE__ */ l("tr", {
+								"aria-hidden": "true",
+								style: { height: Y * w }
+							}),
+							!y && J.map((e, r) => {
+								let i = C ? Y + r : r, a = K.includes(e.id), o = Te.has(e.id);
+								return /* @__PURE__ */ u(ne, { children: [/* @__PURE__ */ u("tr", {
+									className: n.row,
+									"data-parity": i % 2 == 0 ? "even" : "odd",
+									"data-state": a ? "selected" : void 0,
+									"aria-rowindex": C ? Y + r + 1 : void 0,
+									children: [
+										v && /* @__PURE__ */ l("td", {
+											className: n.controlCell,
+											children: /* @__PURE__ */ l("button", {
+												type: "button",
+												className: n.expandButton,
+												"aria-expanded": o,
+												"aria-label": T.expandRow,
+												"data-state": o ? "open" : "closed",
+												onClick: () => we(e.id),
+												children: /* @__PURE__ */ l("span", {
+													className: n.chevron,
+													"aria-hidden": "true"
+												})
+											})
+										}),
+										g && /* @__PURE__ */ l("td", {
+											className: n.controlCell,
+											children: /* @__PURE__ */ l(t, {
+												"aria-label": T.selectRow,
+												checked: a,
+												onChange: () => Ce(e.id)
+											})
+										}),
+										f.map((t) => /* @__PURE__ */ l("td", {
+											"data-align": t.align ?? "start",
+											children: t.render ? t.render(e.row) : String(d(e.row, t.key) ?? "")
+										}, t.key))
+									]
+								}), v && /* @__PURE__ */ l("tr", {
+									className: n.expansionRow,
+									"data-state": o ? "open" : "closed",
+									children: /* @__PURE__ */ l("td", {
+										colSpan: Z,
+										children: /* @__PURE__ */ l("div", {
+											className: n.expansionGrid,
+											"data-state": o ? "open" : "closed",
+											children: /* @__PURE__ */ l("div", {
+												className: n.expansionInner,
+												children: v(e.row)
+											})
+										})
+									})
+								})] }, e.id);
+							}),
+							!y && C && X < G.length && /* @__PURE__ */ l("tr", {
+								"aria-hidden": "true",
+								style: { height: (G.length - X) * w }
+							}),
+							Oe > 0 && /* @__PURE__ */ l("tr", {
+								"aria-hidden": "true",
+								"data-filler-row": !0,
+								children: /* @__PURE__ */ l("td", {
+									colSpan: Z,
+									style: {
+										blockSize: `calc(var(--_row-height) * ${Oe})`,
+										padding: 0
+									}
+								})
+							})
+						] })
+					]
+				})
+			}),
+			h && /* @__PURE__ */ u("div", {
+				className: n.footer,
+				children: [
+					h.pageSizeOptions && /* @__PURE__ */ u("label", {
+						className: n.pageSize,
+						children: [/* @__PURE__ */ l("span", { children: "Rows per page" }), /* @__PURE__ */ l("select", {
+							value: M.value,
+							onChange: (e) => {
+								M.value = Number(e.target.value), j.value = 1;
+							},
+							children: h.pageSizeOptions.map((e) => /* @__PURE__ */ l("option", {
+								value: e,
+								children: e
+							}, e))
+						})]
+					}),
+					/* @__PURE__ */ u("span", {
+						className: n.range,
+						children: [
+							$,
+							"–",
+							je,
+							" of ",
+							Q
+						]
+					}),
+					/* @__PURE__ */ u("div", {
+						className: n.pageButtons,
+						children: [/* @__PURE__ */ l("button", {
+							type: "button",
+							className: n.pageButton,
+							"aria-label": "Previous page",
+							disabled: B.value <= 1,
+							onClick: () => {
+								j.value = B.value - 1;
+							},
+							children: /* @__PURE__ */ l("span", {
+								"aria-hidden": "true",
+								children: "‹"
+							})
+						}), /* @__PURE__ */ l("button", {
+							type: "button",
+							className: n.pageButton,
+							"aria-label": "Next page",
+							disabled: B.value >= z.value,
+							onClick: () => {
+								j.value = B.value + 1;
+							},
+							children: /* @__PURE__ */ l("span", {
+								"aria-hidden": "true",
+								children: "›"
+							})
+						})]
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { f as DataTable };

package/dist/data-table/data-table.module.js

@@ -0,0 +1,36 @@
+"use client";
+
+import './data-table.css';
+var e = {
+	root: "_root_55t77_2",
+	toolbar: "_toolbar_55t77_26",
+	heading: "_heading_55t77_35",
+	title: "_title_55t77_41",
+	description: "_description_55t77_47",
+	search: "_search_55t77_52",
+	batchBar: "_batchBar_55t77_79",
+	batchCount: "_batchCount_55t77_89",
+	batchActions: "_batchActions_55t77_95",
+	scroller: "_scroller_55t77_101",
+	scrollerVirtualized: "_scrollerVirtualized_55t77_106",
+	table: "_table_55t77_112",
+	row: "_row_55t77_168",
+	controlCol: "_controlCol_55t77_174",
+	controlCell: "_controlCell_55t77_178",
+	sortButton: "_sortButton_55t77_184",
+	emptyCell: "_emptyCell_55t77_232",
+	expansionRow: "_expansionRow_55t77_239",
+	expansionGrid: "_expansionGrid_55t77_245",
+	expansionInner: "_expansionInner_55t77_249",
+	expandButton: "_expandButton_55t77_254",
+	chevron: "_chevron_55t77_277",
+	shimmer: "_shimmer_55t77_292",
+	footer: "_footer_55t77_319",
+	pageSize: "_pageSize_55t77_329",
+	range: "_range_55t77_355",
+	pageButtons: "_pageButtons_55t77_360",
+	pageButton: "_pageButton_55t77_360",
+	srOnly: "_srOnly_55t77_399"
+};
+//#endregion
+export { e as default };

package/dist/date-picker/date-picker.css

@@ -0,0 +1 @@
+@layer cascivo.component{._wrapper_1gnc3_2{gap:var(--cascivo-space-1);font-family:var(--cascivo-font-sans);flex-direction:column;display:inline-flex;position:relative}._wrapper_1gnc3_2[data-size=sm]{--_height:2rem;--_font:var(--cascivo-text-sm);--_px:var(--cascivo-space-3)}._wrapper_1gnc3_2[data-size=md]{--_height:2.5rem;--_font:var(--cascivo-text-sm);--_px:var(--cascivo-space-4)}._wrapper_1gnc3_2[data-size=lg]{--_height:3rem;--_font:var(--cascivo-text-base);--_px:var(--cascivo-space-4)}._label_1gnc3_27{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-snug)}._field_1gnc3_34{align-items:center;display:flex;position:relative}._trigger_1gnc3_40{justify-content:space-between;align-items:center;gap:var(--cascivo-space-2);block-size:var(--_height,2.5rem);min-inline-size:12rem;padding-inline:var(--_px,var(--cascivo-space-4));font-family:var(--cascivo-font-sans);font-size:var(--_font,var(--cascivo-text-sm));color:var(--cascivo-color-text);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);cursor:pointer;text-align:start;transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);outline:none;display:flex}._trigger_1gnc3_40:hover:not(:disabled){border-color:var(--cascivo-color-border-strong)}._trigger_1gnc3_40:focus-visible{border-color:var(--cascivo-color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--cascivo-color-accent) 20%, transparent)}._trigger_1gnc3_40:disabled{opacity:.5;cursor:not-allowed}._wrapper_1gnc3_2[data-state=error] ._trigger_1gnc3_40{border-color:var(--cascivo-color-danger)}._value_1gnc3_78{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}._placeholder_1gnc3_84{color:var(--cascivo-color-text-subtle)}._icon_1gnc3_87{color:var(--cascivo-color-text-muted);font-style:normal}._clear_1gnc3_92{cursor:pointer;color:var(--cascivo-color-text-muted);font-size:var(--cascivo-text-xs);padding:var(--cascivo-space-1);border-radius:var(--cascivo-radius-control);background:0 0;border:none;outline:none;position:absolute;inset-inline-end:var(--cascivo-space-8)}._clear_1gnc3_92:hover{color:var(--cascivo-color-text)}._clear_1gnc3_92:focus-visible{box-shadow:0 0 0 2px var(--cascivo-color-accent)}._calendar_1gnc3_112{z-index:var(--cascivo-z-dropdown);padding:var(--cascivo-space-3);background-color:var(--cascivo-color-surface-overlay);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);box-shadow:var(--cascivo-shadow-overlay);opacity:0;visibility:hidden;transition:opacity var(--cascivo-motion-enter), translate var(--cascivo-motion-enter), visibility var(--cascivo-motion-enter);position:absolute;inset-block-start:calc(100% + var(--cascivo-space-1));inset-inline-start:0;translate:0 -.25rem}._calendar_1gnc3_112[data-state=open]{opacity:1;visibility:visible;translate:0}@starting-style{._calendar_1gnc3_112[data-state=open]{opacity:0;translate:0 -.25rem}}._header_1gnc3_144{justify-content:space-between;align-items:center;margin-block-end:var(--cascivo-space-2);display:flex}._monthLabel_1gnc3_151{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text)}._navButton_1gnc3_157{border-radius:var(--cascivo-radius-control);cursor:pointer;block-size:2rem;inline-size:2rem;color:var(--cascivo-color-text-muted);font-size:var(--cascivo-text-base);background:0 0;border:1px solid #0000;outline:none;justify-content:center;align-items:center;display:inline-flex}._navButton_1gnc3_157:hover{background-color:var(--cascivo-color-bg-subtle);color:var(--cascivo-color-text)}._navButton_1gnc3_157:focus-visible{border-color:var(--cascivo-color-accent)}._grid_1gnc3_179{border-collapse:collapse;inline-size:100%}._weekday_1gnc3_184{padding-block:var(--cascivo-space-1);font-size:var(--cascivo-text-xs);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text-muted);text-align:center;inline-size:2.25rem}._cell_1gnc3_193{text-align:center;padding:2px}._empty_1gnc3_197{inline-size:2.25rem}._day_1gnc3_201{block-size:2.25rem;inline-size:2.25rem;font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);border-radius:var(--cascivo-radius-control);cursor:pointer;background:0 0;border:none;outline:none;justify-content:center;align-items:center;display:flex}._day_1gnc3_201:hover:not([aria-disabled]){background-color:var(--cascivo-color-bg-subtle)}._day_1gnc3_201:focus-visible{box-shadow:0 0 0 2px var(--cascivo-color-accent)}._day_1gnc3_201[data-today]{font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-accent)}._day_1gnc3_201[data-selected]{background-color:var(--cascivo-color-accent);color:var(--cascivo-color-accent-foreground,var(--cascivo-color-text-on-accent))}._day_1gnc3_201[aria-disabled]{opacity:.35;cursor:not-allowed}._error_1gnc3_236{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-danger)}._hint_1gnc3_240{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-muted)}}

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

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

@@ -0,0 +1,26 @@
+"use client";
+
+import './date-picker.css';
+var e = {
+	wrapper: "_wrapper_1gnc3_2",
+	label: "_label_1gnc3_27",
+	field: "_field_1gnc3_34",
+	trigger: "_trigger_1gnc3_40",
+	value: "_value_1gnc3_78",
+	placeholder: "_placeholder_1gnc3_84",
+	icon: "_icon_1gnc3_87",
+	clear: "_clear_1gnc3_92",
+	calendar: "_calendar_1gnc3_112",
+	header: "_header_1gnc3_144",
+	monthLabel: "_monthLabel_1gnc3_151",
+	navButton: "_navButton_1gnc3_157",
+	grid: "_grid_1gnc3_179",
+	weekday: "_weekday_1gnc3_184",
+	cell: "_cell_1gnc3_193",
+	empty: "_empty_1gnc3_197",
+	day: "_day_1gnc3_201",
+	error: "_error_1gnc3_236",
+	hint: "_hint_1gnc3_240"
+};
+//#endregion
+export { e as default };

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

@@ -0,0 +1 @@
+@layer cascivo.component{._wrapper_k1szr_2{font-family:var(--cascivo-font-sans);flex-direction:column;display:inline-flex;position:relative}._wrapper_k1szr_2[data-size=sm]{--_height:2rem;--_font:var(--cascivo-text-sm);--_px:var(--cascivo-space-3)}._wrapper_k1szr_2[data-size=md]{--_height:2.5rem;--_font:var(--cascivo-text-sm);--_px:var(--cascivo-space-4)}._wrapper_k1szr_2[data-size=lg]{--_height:3rem;--_font:var(--cascivo-text-base);--_px:var(--cascivo-space-4)}._trigger_k1szr_25{justify-content:space-between;align-items:center;gap:var(--cascivo-space-2);block-size:var(--_height,2.5rem);min-inline-size:18rem;padding-inline:var(--_px,var(--cascivo-space-4));font-family:var(--cascivo-font-sans);font-size:var(--_font,var(--cascivo-text-sm));color:var(--cascivo-color-text);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);cursor:pointer;text-align:start;transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);outline:none;display:flex}._trigger_k1szr_25:hover{border-color:var(--cascivo-color-border-strong)}._trigger_k1szr_25:focus-visible{border-color:var(--cascivo-color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--cascivo-color-accent) 20%, transparent)}._value_k1szr_55{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}._placeholder_k1szr_61{color:var(--cascivo-color-text-subtle)}._icon_k1szr_64{color:var(--cascivo-color-text-muted);font-style:normal}._panel_k1szr_69{z-index:var(--cascivo-z-dropdown);gap:var(--cascivo-space-2);padding:var(--cascivo-space-3);background-color:var(--cascivo-color-surface-overlay);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);box-shadow:var(--cascivo-shadow-overlay);opacity:0;visibility:hidden;transition:opacity var(--cascivo-motion-enter), translate var(--cascivo-motion-enter), visibility var(--cascivo-motion-enter);flex-direction:column;display:flex;position:absolute;inset-block-start:calc(100% + var(--cascivo-space-1));inset-inline-start:0;translate:0 -.25rem}._panel_k1szr_69[data-state=open]{opacity:1;visibility:visible;translate:0}@starting-style{._panel_k1szr_69[data-state=open]{opacity:0;translate:0 -.25rem}}._calendars_k1szr_104{align-items:flex-start;gap:var(--cascivo-space-2);display:flex}._calNav_k1szr_110{align-items:center;padding-block-start:var(--cascivo-space-1);display:flex}._navButton_k1szr_116{border-radius:var(--cascivo-radius-control);cursor:pointer;block-size:2rem;inline-size:2rem;color:var(--cascivo-color-text-muted);font-size:var(--cascivo-text-base);background:0 0;border:1px solid #0000;outline:none;justify-content:center;align-items:center;display:inline-flex}._navButton_k1szr_116:hover{background-color:var(--cascivo-color-bg-subtle);color:var(--cascivo-color-text)}._navButton_k1szr_116:focus-visible{box-shadow:var(--cascivo-focus-ring)}._presets_k1szr_139{gap:var(--cascivo-space-1);border-block-end:1px solid var(--cascivo-color-border);flex-wrap:wrap;padding-block-end:var(--cascivo-space-2);display:flex}._preset_k1szr_139{padding-block:var(--cascivo-space-1);padding-inline:var(--cascivo-space-3);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-control);cursor:pointer;background:0 0;outline:none}._preset_k1szr_139:hover{background-color:var(--cascivo-color-bg-subtle)}._preset_k1szr_139:focus-visible{box-shadow:var(--cascivo-focus-ring)}._footer_k1szr_166{justify-content:flex-end;align-items:center;gap:var(--cascivo-space-2);border-block-start:1px solid var(--cascivo-color-border);padding-block-start:var(--cascivo-space-2);display:flex}._clearBtn_k1szr_175,._applyBtn_k1szr_176{padding-block:var(--cascivo-space-1);padding-inline:var(--cascivo-space-4);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);border-radius:var(--cascivo-radius-control);cursor:pointer;outline:none}:is(._clearBtn_k1szr_175,._applyBtn_k1szr_176):focus-visible{box-shadow:var(--cascivo-focus-ring)}._clearBtn_k1szr_175{color:var(--cascivo-color-text);border:1px solid var(--cascivo-color-border);background:0 0}._clearBtn_k1szr_175:hover{background-color:var(--cascivo-color-bg-subtle)}._applyBtn_k1szr_176{color:var(--cascivo-color-primary-fg);background-color:var(--cascivo-color-primary);border:1px solid #0000}._applyBtn_k1szr_176:hover{background-color:var(--cascivo-color-primary-hover)}}