@cascivo/react 0.3.3 → 0.3.7

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

@@ -0,0 +1,195 @@
+"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",
+			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/date-range-picker/date-range-picker.module.js

@@ -0,0 +1,21 @@
+"use client";
+
+import './date-range-picker.css';
+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/dock/dock.css

@@ -0,0 +1 @@
+@layer cascivo.component{._dock_cqgv4_2{background-color:var(--cascivo-color-surface);border-block-start:1px solid var(--cascivo-border-subtle);z-index:var(--cascivo-z-dock,40);align-items:stretch;padding-block-end:env(safe-area-inset-bottom,0);display:flex;position:fixed;inset-block-end:0;inset-inline:0}@media (width>=64rem){._dock_cqgv4_2{display:none}}._item_cqgv4_20{min-block-size:var(--cascivo-target-min-coarse,2.75rem);cursor:pointer;color:var(--cascivo-color-text-muted);transition:color .1s var(--cascivo-ease-out);background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.25rem;padding-block:.5rem;padding-inline:.25rem;text-decoration:none;display:flex}._item_cqgv4_20[data-active]{color:var(--cascivo-color-accent)}._item_cqgv4_20:focus-visible{outline:var(--cascivo-ring-width) solid var(--cascivo-ring-color);outline-offset:-2px}._icon_cqgv4_47{align-items:center;font-size:1.25rem;line-height:1;display:flex}._label_cqgv4_54{font-size:.6875rem;line-height:1}._item_cqgv4_20[data-active] ._label_cqgv4_54{font-weight:600}}

package/dist/dock/dock.js

@@ -0,0 +1,32 @@
+"use client";
+
+import e from "./dock.module.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region ../components/src/dock/dock.tsx
+function r({ items: r, activeIndex: i, className: a }) {
+	return /* @__PURE__ */ t("nav", {
+		"aria-label": "Main navigation",
+		className: [e.dock, a].filter(Boolean).join(" "),
+		children: r.map((r, a) => {
+			let o = a === i;
+			return /* @__PURE__ */ n(r.href ? "a" : "button", {
+				className: e.item,
+				"data-active": o || void 0,
+				"aria-current": o ? "page" : void 0,
+				...r.href ? { href: r.href } : {},
+				type: r.href ? void 0 : "button",
+				onClick: r.onClick,
+				children: [/* @__PURE__ */ t("span", {
+					className: e.icon,
+					"aria-hidden": "true",
+					children: r.icon
+				}), /* @__PURE__ */ t("span", {
+					className: e.label,
+					children: r.label
+				})]
+			}, a);
+		})
+	});
+}
+//#endregion
+export { r as Dock };

package/dist/dock/dock.module.js

@@ -0,0 +1,11 @@
+"use client";
+
+import './dock.css';
+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/drawer/drawer.css

@@ -0,0 +1 @@
+@layer cascivo.component{._overlay_cbcjg_2{z-index:var(--cascivo-z-overlay,50);opacity:1;transition:opacity var(--cascivo-motion-enter);background-color:#0006;display:flex;position:fixed;inset:0}._overlay_cbcjg_2[data-state=closed]{opacity:0;transition:opacity var(--cascivo-motion-exit)}@starting-style{._overlay_cbcjg_2[data-state=open]{opacity:0}}._overlay_cbcjg_2[data-side=end]{justify-content:flex-end;align-items:stretch}._overlay_cbcjg_2[data-side=start]{justify-content:flex-start;align-items:stretch}._overlay_cbcjg_2[data-side=top]{align-items:flex-start}._overlay_cbcjg_2[data-side=bottom]{align-items:flex-end}._panel_cbcjg_39{background:var(--cascivo-color-surface);box-shadow:var(--cascivo-shadow-overlay);transform:none;transform:translate(var(--_drawer-drag-x,0), var(--_drawer-drag-y,0));transition:translate var(--cascivo-motion-enter), transform var(--cascivo-motion-exit);flex-direction:column;display:flex}._panel_cbcjg_39[data-dragging]{transition:none}._overlay_cbcjg_2[data-state=closed] ._panel_cbcjg_39{transition:translate var(--cascivo-motion-exit)}._panel_cbcjg_39[data-side=end]{inline-size:var(--_drawer-size,min(24rem, 90vw));border-inline-start:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay) 0 0 var(--cascivo-radius-overlay);block-size:100%;translate:0}._overlay_cbcjg_2[data-state=closed] ._panel_cbcjg_39[data-side=end]{translate:100%}._panel_cbcjg_39[data-side=start]{inline-size:var(--_drawer-size,min(24rem, 90vw));border-inline-end:1px solid var(--cascivo-color-border);border-radius:0 var(--cascivo-radius-overlay) var(--cascivo-radius-overlay) 0;block-size:100%;translate:0}._overlay_cbcjg_2[data-state=closed] ._panel_cbcjg_39[data-side=start]{translate:-100%}._panel_cbcjg_39[data-side=top]{inline-size:100%;block-size:var(--_drawer-size,auto);border-block-end:1px solid var(--cascivo-color-border);border-radius:0 0 var(--cascivo-radius-overlay) var(--cascivo-radius-overlay);max-block-size:80vh;translate:0}._overlay_cbcjg_2[data-state=closed] ._panel_cbcjg_39[data-side=top]{translate:0 -100%}._panel_cbcjg_39[data-side=bottom]{inline-size:100%;block-size:var(--_drawer-size,auto);border-block-start:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay) var(--cascivo-radius-overlay) 0 0;max-block-size:80vh;translate:0}._overlay_cbcjg_2[data-state=closed] ._panel_cbcjg_39[data-side=bottom]{translate:0 100%}@starting-style{._overlay_cbcjg_2[data-state=open] ._panel_cbcjg_39[data-side=end]{translate:100%}._overlay_cbcjg_2[data-state=open] ._panel_cbcjg_39[data-side=start]{translate:-100%}._overlay_cbcjg_2[data-state=open] ._panel_cbcjg_39[data-side=top]{translate:0 -100%}._overlay_cbcjg_2[data-state=open] ._panel_cbcjg_39[data-side=bottom]{translate:0 100%}}._header_cbcjg_124{justify-content:space-between;align-items:flex-start;gap:var(--cascivo-space-4);padding:var(--cascivo-space-4) var(--cascivo-space-6);border-block-end:1px solid var(--cascivo-color-border);flex-shrink:0;display:flex}._heading_cbcjg_134{gap:var(--cascivo-space-1);flex-direction:column;display:flex}._title_cbcjg_140{font-size:var(--cascivo-text-lg);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);margin:0}._description_cbcjg_147{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);margin:0}._close_cbcjg_153{block-size:2rem;inline-size:2rem;color:var(--cascivo-color-text-muted);border-radius:var(--cascivo-radius-control);cursor:pointer;transition:color var(--cascivo-duration-150) var(--cascivo-ease-out), background-color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}._close_cbcjg_153:hover{color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}._close_cbcjg_153:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._closeIcon_cbcjg_181{block-size:1rem;inline-size:1rem}._body_cbcjg_186{padding:var(--cascivo-space-6);flex:1;overflow-y:auto}@media (prefers-reduced-motion:reduce){._panel_cbcjg_39{transition:none}}}

package/dist/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/drawer/drawer.module.js

@@ -0,0 +1,16 @@
+"use client";
+
+import './drawer.css';
+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 };

package/dist/dropdown/dropdown.css

@@ -0,0 +1 @@
+@layer cascivo.component{._root_3wuq6_2{display:inline-flex;position:relative}._menu_3wuq6_7{z-index:var(--cascivo-z-dropdown);min-inline-size:10rem;max-inline-size:calc(100vw - var(--cascivo-space-4,1rem));padding:var(--cascivo-space-1);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));translate:0 -.25rem}._menu_3wuq6_7[data-placement=bottom-start]{inset-inline-start:0}._menu_3wuq6_7[data-placement=bottom-end]{inset-inline-end:0}._menu_3wuq6_7[data-state=open]{opacity:1;visibility:visible;translate:0}@starting-style{._menu_3wuq6_7[data-state=open]{opacity:0;translate:0 -.25rem}}@supports (anchor-name:--a) and (position-anchor:--a){._menu_3wuq6_7{position-anchor:var(--cascivo-dropdown-anchor,--dropdown-trigger);position:fixed;inset:auto}._menu_3wuq6_7[data-placement=bottom-start]{inset-area:block-end span-inline-start;inset-inline-start:0}._menu_3wuq6_7[data-placement=bottom-end]{inset-area:block-end span-inline-end;inset-inline-end:0}@media (prefers-reduced-motion:no-preference){._menu_3wuq6_7{transition:opacity var(--cascivo-motion-enter), translate var(--cascivo-motion-enter), visibility var(--cascivo-motion-enter), display var(--cascivo-motion-enter) allow-discrete, overlay var(--cascivo-motion-enter) allow-discrete}@starting-style{._menu_3wuq6_7[data-state=open]{opacity:0;translate:0 -.25rem}}}}._item_3wuq6_83{align-items:center;gap:var(--cascivo-space-2);inline-size:100%;padding-inline:var(--cascivo-space-3);padding-block:var(--cascivo-space-2);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);text-align:start;color:var(--cascivo-color-text);border-radius:var(--cascivo-radius-item);cursor:pointer;background:0 0;border:none;display:flex}._item_3wuq6_83:hover:not(:disabled),._item_3wuq6_83:focus-visible{background-color:var(--cascivo-color-bg-subtle);outline:none}._item_3wuq6_83:disabled{opacity:.5;cursor:not-allowed}._icon_3wuq6_111{color:var(--cascivo-color-text-muted);align-items:center;display:inline-flex}._separator_3wuq6_117{block-size:1px;margin-block:var(--cascivo-space-1);background-color:var(--cascivo-color-border)}}@media (forced-colors:active){._menu_3wuq6_7{border:1px solid buttontext}._item_3wuq6_83:focus-visible{outline-offset:2px;outline:2px solid highlight}}

package/dist/dropdown/dropdown.js

@@ -0,0 +1,109 @@
+"use client";
+
+import e from "./dropdown.module.js";
+import { composeRefs as t, createMachine as n, useMachine as r, useSignal as i, useSignalEffect as a, useSignals as o } from "@cascivo/core";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { cloneElement as l, useRef as u } from "react";
+//#region ../components/src/dropdown/dropdown.tsx
+var d = n({
+	initial: "closed",
+	states: {
+		closed: { on: { OPEN: "open" } },
+		open: { on: { CLOSE: "closed" } }
+	}
+});
+function f({ trigger: n, items: f, onSelect: p, placement: m = "bottom-start", open: h, onOpenChange: g }) {
+	o();
+	let [_, v] = r(d), y = u(null), b = u(null), x = u(null), S = u([]), C = i(-1), w = h !== void 0, T = w ? h : _.value === "open", E = i(T);
+	E.value = T;
+	let D = f.map((e, t) => ({
+		item: e,
+		index: t
+	})).filter(({ item: e }) => !e.separator && !e.disabled).map(({ index: e }) => e), O = (e) => {
+		w || v(e ? "OPEN" : "CLOSE"), g?.(e);
+	};
+	a(() => {
+		let e = C.value;
+		E.value && e >= 0 && S.current[e]?.focus();
+	}), a(() => {
+		E.value ? C.value = D[0] ?? -1 : C.value = -1;
+	}), a(() => {
+		E.value ? x.current?.showPopover() : x.current?.hidePopover();
+	}), a(() => {
+		let e = x.current;
+		if (!e) return;
+		let t = (e) => {
+			e.newState === "closed" && O(!1);
+		};
+		return e.addEventListener("toggle", t), () => e.removeEventListener("toggle", t);
+	});
+	let k = (e) => {
+		let t = f[e];
+		!t || t.separator || t.disabled || (p?.(t.value), O(!1), b.current?.focus());
+	}, A = (e) => {
+		D.length !== 0 && (C.value = D[(D.indexOf(C.value) + e + D.length) % D.length] ?? -1);
+	}, j = (e) => {
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), A(1);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), A(-1);
+				break;
+			case "Home":
+				e.preventDefault(), C.value = D[0] ?? -1;
+				break;
+			case "End":
+				e.preventDefault(), C.value = D[D.length - 1] ?? -1;
+				break;
+			case "Escape":
+				e.preventDefault(), O(!1), b.current?.focus();
+				break;
+			case "Enter":
+			case " ":
+				e.preventDefault(), k(C.value);
+				break;
+		}
+	}, M = n, N = l(M, {
+		ref: t(b, M.props.ref),
+		onClick: (e) => {
+			M.props.onClick?.(e), O(!T);
+		},
+		"aria-haspopup": "menu",
+		"aria-expanded": T
+	});
+	return /* @__PURE__ */ c("div", {
+		ref: y,
+		className: e.root,
+		children: [N, /* @__PURE__ */ s("div", {
+			ref: x,
+			popover: "auto",
+			role: "menu",
+			"data-placement": m,
+			"data-state": T ? "open" : "closed",
+			className: e.menu,
+			onKeyDown: j,
+			children: f.map((t, n) => t.separator ? /* @__PURE__ */ s("div", {
+				role: "separator",
+				className: e.separator
+			}, `sep-${n}`) : /* @__PURE__ */ c("button", {
+				type: "button",
+				role: "menuitem",
+				ref: (e) => {
+					S.current[n] = e;
+				},
+				tabIndex: C.value === n ? 0 : -1,
+				disabled: t.disabled,
+				className: e.item,
+				onClick: () => k(n),
+				children: [t.icon && /* @__PURE__ */ s("span", {
+					className: e.icon,
+					"aria-hidden": "true",
+					children: t.icon
+				}), t.label]
+			}, t.value))
+		})]
+	});
+}
+//#endregion
+export { f as Dropdown };

package/dist/dropdown/dropdown.module.js

@@ -0,0 +1,12 @@
+"use client";
+
+import './dropdown.css';
+var e = {
+	root: "_root_3wuq6_2",
+	menu: "_menu_3wuq6_7",
+	item: "_item_3wuq6_83",
+	icon: "_icon_3wuq6_111",
+	separator: "_separator_3wuq6_117"
+};
+//#endregion
+export { e as default };

package/dist/editable/editable.css

@@ -0,0 +1 @@
+@layer cascivo.component{._wrapper_5e6r0_2{align-items:center;min-width:4rem;display:inline-flex}._preview_5e6r0_8{align-items:center;gap:var(--cascivo-space-1-5);padding-block:var(--cascivo-space-0-5);padding-inline:var(--cascivo-space-1);border-radius:var(--cascivo-radius-control);font-family:var(--cascivo-font-sans);font-size:inherit;color:var(--cascivo-color-text);cursor:pointer;text-align:start;transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out), background-color var(--cascivo-duration-150) var(--cascivo-ease-out);background:0 0;border:1px solid #0000;display:inline-flex}._preview_5e6r0_8:hover:not(:disabled){border-color:var(--cascivo-color-border);background-color:var(--cascivo-color-bg-subtle)}._preview_5e6r0_8:focus-visible{outline:2px solid var(--cascivo-color-accent);outline-offset:1px}._preview_5e6r0_8:disabled{cursor:not-allowed;opacity:.5}._preview-text_5e6r0_42{min-width:1ch}._placeholder_5e6r0_46{color:var(--cascivo-color-text-muted)}._edit-icon_5e6r0_50{background-color:var(--cascivo-color-text-muted);opacity:0;width:.875rem;height:.875rem;transition:opacity var(--cascivo-duration-100) var(--cascivo-ease-out);display:block;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}._preview_5e6r0_8:hover ._edit-icon_5e6r0_50{opacity:1}._editing_5e6r0_69 ._input_5e6r0_70{width:100%;min-width:4rem;padding-block:var(--cascivo-space-0-5);padding-inline:var(--cascivo-space-1);font-family:var(--cascivo-font-sans);font-size:inherit;color:var(--cascivo-color-text);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-accent);border-radius:var(--cascivo-radius-control);box-shadow:var(--cascivo-focus-ring);outline:none}}

package/dist/editable/editable.js

@@ -0,0 +1,67 @@
+"use client";
+
+import e from "./editable.module.js";
+import { cn as t, useSignal as n, useSignalEffect as r, useSignals as i } from "@cascivo/core";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useRef as s } from "react";
+//#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 }) {
+	i();
+	let g = n(!1), _ = n(c), v = s(null), y = s(p);
+	y.current = p;
+	let b = s(l);
+	b.current = l, g.value || (_.value = c), r(() => {
+		if (g.value) {
+			let e = v.current;
+			e && (e.focus(), e.select());
+		}
+	});
+	function x() {
+		b.current(_.value), g.value = !1;
+	}
+	function S() {
+		_.value = c, g.value = !1, y.current?.();
+	}
+	return g.value ? /* @__PURE__ */ a("div", {
+		className: t(e.wrapper, e.editing, m),
+		...h,
+		children: /* @__PURE__ */ a("input", {
+			ref: v,
+			className: e.input,
+			value: _.value,
+			onChange: (e) => {
+				_.value = e.currentTarget.value;
+			},
+			onKeyDown: (e) => {
+				e.key === "Enter" ? (e.preventDefault(), x()) : e.key === "Escape" && (e.preventDefault(), S());
+			},
+			onBlur: () => {
+				f ? x() : S();
+			}
+		})
+	}) : /* @__PURE__ */ a("div", {
+		className: t(e.wrapper, m),
+		"data-disabled": d ? "" : void 0,
+		...h,
+		children: /* @__PURE__ */ o("button", {
+			type: "button",
+			className: e.preview,
+			disabled: d,
+			onClick: () => {
+				d || (g.value = !0);
+			},
+			children: [/* @__PURE__ */ a("span", {
+				className: e["preview-text"],
+				children: c || /* @__PURE__ */ a("span", {
+					className: e.placeholder,
+					children: u
+				})
+			}), /* @__PURE__ */ a("span", {
+				className: e["edit-icon"],
+				"aria-hidden": "true"
+			})]
+		})
+	});
+}
+//#endregion
+export { c as Editable };

package/dist/editable/editable.module.js

@@ -0,0 +1,14 @@
+"use client";
+
+import './editable.css';
+var e = {
+	wrapper: "_wrapper_5e6r0_2",
+	preview: "_preview_5e6r0_8",
+	"preview-text": "_preview-text_5e6r0_42",
+	placeholder: "_placeholder_5e6r0_46",
+	"edit-icon": "_edit-icon_5e6r0_50",
+	editing: "_editing_5e6r0_69",
+	input: "_input_5e6r0_70"
+};
+//#endregion
+export { e as default };

package/dist/empty-state/empty-state.css

@@ -0,0 +1 @@
+@layer cascivo.component{._empty-state_1wem6_2{text-align:center;align-items:center;gap:var(--cascivo-space-2);padding:var(--cascivo-space-8);font-family:var(--cascivo-font-sans);color:var(--cascivo-color-text);flex-direction:column;display:flex}._empty-state_1wem6_2[data-size=lg]{gap:var(--cascivo-space-3);padding:var(--cascivo-space-12)}._icon_1wem6_18{block-size:3rem;inline-size:3rem;font-size:var(--cascivo-text-xl);color:var(--cascivo-color-text-muted);background-color:var(--cascivo-color-bg-subtle);border-radius:var(--cascivo-radius-full);flex-shrink:0;justify-content:center;align-items:center;margin-block-end:var(--cascivo-space-2);line-height:1;display:flex}._empty-state_1wem6_2[data-size=lg] ._icon_1wem6_18{block-size:4rem;inline-size:4rem;font-size:var(--cascivo-text-2xl)}._title_1wem6_39{font-size:var(--cascivo-text-base);font-weight:var(--cascivo-font-semibold);line-height:var(--cascivo-leading-snug);margin:0}._empty-state_1wem6_2[data-size=lg] ._title_1wem6_39{font-size:var(--cascivo-text-lg)}._description_1wem6_50{max-inline-size:40ch;font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-normal);margin:0}._empty-state_1wem6_2[data-size=lg] ._description_1wem6_50{font-size:var(--cascivo-text-base)}._action_1wem6_62{margin-block-start:var(--cascivo-space-2)}}

package/dist/empty-state/empty-state.js

@@ -0,0 +1,34 @@
+"use client";
+
+import e from "./empty-state.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region ../components/src/empty-state/empty-state.tsx
+function i({ icon: i, title: a, description: o, action: s, size: c = "md", className: l, ...u }) {
+	return /* @__PURE__ */ r("div", {
+		"data-size": c,
+		className: t(e["empty-state"], l),
+		...u,
+		children: [
+			i && /* @__PURE__ */ n("span", {
+				className: e.icon,
+				"aria-hidden": "true",
+				children: i
+			}),
+			/* @__PURE__ */ n("h3", {
+				className: e.title,
+				children: a
+			}),
+			o && /* @__PURE__ */ n("p", {
+				className: e.description,
+				children: o
+			}),
+			s && /* @__PURE__ */ n("div", {
+				className: e.action,
+				children: s
+			})
+		]
+	});
+}
+//#endregion
+export { i as EmptyState };

package/dist/empty-state/empty-state.module.js

@@ -0,0 +1,12 @@
+"use client";
+
+import './empty-state.css';
+var e = {
+	"empty-state": "_empty-state_1wem6_2",
+	icon: "_icon_1wem6_18",
+	title: "_title_1wem6_39",
+	description: "_description_1wem6_50",
+	action: "_action_1wem6_62"
+};
+//#endregion
+export { e as default };

package/dist/fab/fab.css

@@ -0,0 +1 @@
+@layer cascivo.component{._root_142gl_2{z-index:var(--cascivo-z-dropdown,30);gap:var(--cascivo-space-3);flex-direction:column;display:flex;position:fixed;inset-block-end:calc(var(--cascivo-space-6) + env(safe-area-inset-bottom,0px))}._root_142gl_2[data-position=bottom-end]{align-items:flex-end;inset-inline-end:calc(var(--cascivo-space-6) + env(safe-area-inset-right,0px))}._root_142gl_2[data-position=bottom-start]{align-items:flex-start;inset-inline-start:calc(var(--cascivo-space-6) + env(safe-area-inset-left,0px))}._fab_142gl_21{block-size:3.5rem;inline-size:3.5rem;color:var(--cascivo-color-accent-content);background:var(--cascivo-color-accent);border-radius:var(--cascivo-radius-full,9999px);box-shadow:var(--cascivo-shadow-overlay);cursor:pointer;transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);border:none;justify-content:center;align-items:center;padding:0;display:inline-flex}._fab_142gl_21:hover{background:var(--cascivo-color-accent-hover,var(--cascivo-color-accent))}._fab_142gl_21:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._icon_142gl_48{block-size:1.5rem;inline-size:1.5rem;transition:rotate var(--cascivo-motion-emphasis,.2s var(--cascivo-ease-out));display:inline-flex}._fab_142gl_21[data-state=open] ._icon_142gl_48{rotate:45deg}._dial_142gl_60{gap:var(--cascivo-space-2);align-items:inherit;opacity:1;transition:opacity var(--cascivo-motion-enter), translate var(--cascivo-motion-enter);flex-direction:column;margin:0;padding:0;list-style:none;display:flex;translate:0}._dial_142gl_60[data-state=closed]{opacity:0;translate:0 var(--cascivo-space-3);transition:opacity var(--cascivo-motion-exit), translate var(--cascivo-motion-exit)}@starting-style{._dial_142gl_60[data-state=open]{opacity:0;translate:0 var(--cascivo-space-3)}}._dialItem_142gl_91{display:flex}._action_142gl_95{align-items:center;gap:var(--cascivo-space-3);min-block-size:var(--cascivo-target-min-coarse,2.75rem);padding-block:var(--cascivo-space-2);padding-inline:var(--cascivo-space-4);color:var(--cascivo-color-text);background:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-full,9999px);box-shadow:var(--cascivo-shadow-overlay);cursor:pointer;transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out);display:inline-flex}._root_142gl_2[data-position=bottom-start] ._action_142gl_95{flex-direction:row-reverse}._action_142gl_95:hover{background:var(--cascivo-color-bg-subtle)}._action_142gl_95:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._action_142gl_95[aria-disabled=true]{color:var(--cascivo-color-text-muted);cursor:not-allowed}._actionLabel_142gl_129{font-size:var(--cascivo-text-sm);white-space:nowrap}._actionIcon_142gl_134{block-size:1.25rem;inline-size:1.25rem;color:var(--cascivo-color-accent);display:inline-flex}@media (prefers-reduced-motion:reduce){._dial_142gl_60,._icon_142gl_48{transition:none}}}