@cascivo/react 0.13.0 → 0.13.1

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

@@ -4,9 +4,9 @@ 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 { Fragment as ne, useId as re, useRef as ie } from "react";
 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) {

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

@@ -2,9 +2,9 @@
 
 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";
+import { useId as c, useRef as ee } from "react";
+import { builtin as l, currentLocale as te, t as u } from "@cascivo/i18n";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region ../components/src/date-picker/date-picker.tsx
 var p = r({
 	initial: "closed",
@@ -41,9 +41,9 @@ function _(e) {
 }
 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);
+	let [j, M] = i(p), N = c(), P = A ?? `cascade-date-picker-${N}`, F = `${N}-grid`, I = te(), ie = k?.placeholder ?? u(l.datePicker.placeholder), ae = k?.previousMonth ?? u(l.datePicker.previousMonth), L = k?.nextMonth ?? u(l.datePicker.nextMonth), R = k?.clear ?? u(l.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);
+	let H = a(V.value ? _(V.value).getUTCFullYear() : z.getUTCFullYear()), U = a(V.value ? _(V.value).getUTCMonth() : z.getUTCMonth()), W = a(V.value), G = ee(null);
 	o(() => {
 		if (j.value !== "open") return;
 		let e = (e) => {
@@ -94,20 +94,20 @@ function v({ value: r, defaultValue: v, onValueChange: y, onChange: b, min: x, m
 			});
 		}
 	}, $ = V.value ? h(_(V.value), I) : "";
-	return /* @__PURE__ */ d("div", {
+	return /* @__PURE__ */ f("div", {
 		ref: G,
 		className: n(e.wrapper, re),
 		"data-state": E ? "error" : j.value,
 		"data-size": D,
 		children: [
-			w && /* @__PURE__ */ u("label", {
+			w && /* @__PURE__ */ d("label", {
 				className: e.label,
 				htmlFor: P,
 				children: w
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ f("div", {
 				className: e.field,
-				children: [/* @__PURE__ */ d("button", {
+				children: [/* @__PURE__ */ f("button", {
 					id: P,
 					type: "button",
 					role: "combobox",
@@ -119,15 +119,15 @@ function v({ value: r, defaultValue: v, onValueChange: y, onChange: b, min: x, m
 					className: e.trigger,
 					disabled: O,
 					onClick: j.value === "open" ? q : K,
-					children: [/* @__PURE__ */ u("span", {
+					children: [/* @__PURE__ */ d("span", {
 						className: n(e.value, $ ? void 0 : e.placeholder),
 						children: $ || ie
-					}), /* @__PURE__ */ u("span", {
+					}), /* @__PURE__ */ d("span", {
 						className: e.icon,
 						"aria-hidden": "true",
 						children: "📅"
 					})]
-				}), C && V.value !== void 0 && /* @__PURE__ */ u("button", {
+				}), C && V.value !== void 0 && /* @__PURE__ */ d("button", {
 					type: "button",
 					className: e.clear,
 					"aria-label": R,
@@ -135,29 +135,29 @@ function v({ value: r, defaultValue: v, onValueChange: y, onChange: b, min: x, m
 					children: "✕"
 				})]
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ f("div", {
 				id: F,
 				role: "dialog",
 				"aria-label": Q,
 				className: e.calendar,
 				"data-state": j.value,
 				onKeyDown: de,
-				children: [/* @__PURE__ */ d("div", {
+				children: [/* @__PURE__ */ f("div", {
 					className: e.header,
 					children: [
-						/* @__PURE__ */ u("button", {
+						/* @__PURE__ */ d("button", {
 							type: "button",
 							className: e.navButton,
 							"aria-label": ae,
 							onClick: se,
 							children: "‹"
 						}),
-						/* @__PURE__ */ u("span", {
+						/* @__PURE__ */ d("span", {
 							className: e.monthLabel,
 							"aria-live": "polite",
 							children: Q
 						}),
-						/* @__PURE__ */ u("button", {
+						/* @__PURE__ */ d("button", {
 							type: "button",
 							className: e.navButton,
 							"aria-label": L,
@@ -165,20 +165,20 @@ function v({ value: r, defaultValue: v, onValueChange: y, onChange: b, min: x, m
 							children: "›"
 						})
 					]
-				}), /* @__PURE__ */ d("table", {
+				}), /* @__PURE__ */ f("table", {
 					role: "grid",
 					className: e.grid,
-					children: [/* @__PURE__ */ u("thead", { children: /* @__PURE__ */ u("tr", { children: ue.map((t) => /* @__PURE__ */ u("th", {
+					children: [/* @__PURE__ */ d("thead", { children: /* @__PURE__ */ d("tr", { children: ue.map((t) => /* @__PURE__ */ d("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);
+					}, t)) }) }), /* @__PURE__ */ d("tbody", { children: Z.map((t, n) => /* @__PURE__ */ d("tr", { children: t.map((t, n) => {
+						if (!t) return /* @__PURE__ */ d("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", {
+						return /* @__PURE__ */ d("td", {
 							className: e.cell,
-							children: /* @__PURE__ */ u("button", {
+							children: /* @__PURE__ */ d("button", {
 								type: "button",
 								className: e.day,
 								tabIndex: o ? 0 : -1,
@@ -200,13 +200,13 @@ function v({ value: r, defaultValue: v, onValueChange: y, onChange: b, min: x, m
 					}) }, n)) })]
 				})]
 			}),
-			E && /* @__PURE__ */ u("span", {
+			E && /* @__PURE__ */ d("span", {
 				id: `${N}-error`,
 				className: e.error,
 				role: "alert",
 				children: E
 			}),
-			!E && T && /* @__PURE__ */ u("span", {
+			!E && T && /* @__PURE__ */ d("span", {
 				id: `${N}-hint`,
 				className: e.hint,
 				children: T

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

@@ -2,10 +2,10 @@
 
 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";
+import { batch as n, cn as r, useControllableSignal as ee, useSignal as i, useSignalEffect as a, useSignals as o } from "@cascivo/core";
+import { useRef as s } from "react";
+import { builtin as c, currentLocale as l, t as u } from "@cascivo/i18n";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region ../components/src/date-range-picker/date-range-picker.tsx
 function p(e) {
 	return Date.UTC(e.getUTCFullYear(), e.getUTCMonth(), e.getUTCDate());
@@ -21,15 +21,15 @@ function h(e, t, n) {
 	};
 }
 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({
+	o();
+	let E = S ?? l(), re = C ?? u(c.dateRangePicker.placeholder), D = T?.apply ?? u(c.dateRangePicker.apply), O = T?.clear ?? u(c.dateRangePicker.clear), k = T?.previousMonth ?? u(c.calendar.previousMonth), A = T?.nextMonth ?? u(c.calendar.nextMonth), [j, M] = ee({
 		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(() => {
+	}), N = i(!1), P = i(null), F = i(null), I = j.value?.start ?? _?.start ?? /* @__PURE__ */ new Date(), L = i(I.getUTCFullYear()), R = i(I.getUTCMonth()), z = s(null);
+	a(() => {
 		if (!N.value) return;
 		let e = (e) => {
 			z.current && !z.current.contains(e.target) && (N.value = !1);
@@ -102,49 +102,49 @@ function g({ value: g, defaultValue: _, onValueChange: te, min: v, max: y, disab
 			nextMonth: A
 		}
 	};
-	return /* @__PURE__ */ d("div", {
+	return /* @__PURE__ */ f("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", {
+		children: [/* @__PURE__ */ f("button", {
 			type: "button",
 			role: "combobox",
 			"aria-expanded": N.value,
 			"aria-haspopup": "dialog",
-			"aria-label": T?.label ?? l(c.dateRangePicker.label),
+			"aria-label": T?.label ?? u(c.dateRangePicker.label),
 			className: t.trigger,
 			onClick: N.value ? V : B,
-			children: [/* @__PURE__ */ u("span", {
+			children: [/* @__PURE__ */ d("span", {
 				className: r(t.value, Z ? void 0 : t.placeholder),
 				children: Z || re
-			}), /* @__PURE__ */ u("span", {
+			}), /* @__PURE__ */ d("span", {
 				className: t.icon,
 				"aria-hidden": "true",
 				children: "📅"
 			})]
-		}), /* @__PURE__ */ d("div", {
+		}), /* @__PURE__ */ f("div", {
 			role: "dialog",
 			className: t.panel,
 			"data-state": N.value ? "open" : "closed",
 			children: [
-				x && x.length > 0 && /* @__PURE__ */ u("div", {
+				x && x.length > 0 && /* @__PURE__ */ d("div", {
 					className: t.presets,
-					children: x.map((e) => /* @__PURE__ */ u("button", {
+					children: x.map((e) => /* @__PURE__ */ d("button", {
 						type: "button",
 						className: t.preset,
 						onClick: () => W(e),
 						children: e.label
 					}, e.label))
 				}),
-				/* @__PURE__ */ d("div", {
+				/* @__PURE__ */ f("div", {
 					className: t.calendars,
 					children: [
-						/* @__PURE__ */ u("div", {
+						/* @__PURE__ */ d("div", {
 							className: t.calNav,
-							children: /* @__PURE__ */ u("button", {
+							children: /* @__PURE__ */ d("button", {
 								type: "button",
 								className: t.navButton,
 								"aria-label": k,
@@ -152,19 +152,19 @@ function g({ value: g, defaultValue: _, onValueChange: te, min: v, max: y, disab
 								children: "‹"
 							})
 						}),
-						/* @__PURE__ */ u(e, {
+						/* @__PURE__ */ d(e, {
 							month: R.value,
 							year: L.value,
 							...$
 						}),
-						/* @__PURE__ */ u(e, {
+						/* @__PURE__ */ d(e, {
 							month: Q.month,
 							year: Q.year,
 							...$
 						}),
-						/* @__PURE__ */ u("div", {
+						/* @__PURE__ */ d("div", {
 							className: t.calNav,
-							children: /* @__PURE__ */ u("button", {
+							children: /* @__PURE__ */ d("button", {
 								type: "button",
 								className: t.navButton,
 								"aria-label": A,
@@ -174,14 +174,14 @@ function g({ value: g, defaultValue: _, onValueChange: te, min: v, max: y, disab
 						})
 					]
 				}),
-				/* @__PURE__ */ d("div", {
+				/* @__PURE__ */ f("div", {
 					className: t.footer,
-					children: [/* @__PURE__ */ u("button", {
+					children: [/* @__PURE__ */ d("button", {
 						type: "button",
 						className: t.clearBtn,
 						onClick: G,
 						children: O
-					}), /* @__PURE__ */ u("button", {
+					}), /* @__PURE__ */ d("button", {
 						type: "button",
 						className: t.applyBtn,
 						onClick: V,

package/dist/node/drawer/drawer.js

@@ -2,9 +2,9 @@
 
 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";
+import { useId as u } from "react";
+import { builtin as d, t as f } from "@cascivo/i18n";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#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 }) {
@@ -22,25 +22,25 @@ function g({ open: g, defaultOpen: _, onOpenChange: v, side: y = "end", size: b,
 			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 = {
+	}), P = u(), F = u(), I = w?.close ?? f(d.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, {
+	return /* @__PURE__ */ p(r, { children: /* @__PURE__ */ p(i, {
 		present: D,
-		children: /* @__PURE__ */ f("div", {
+		children: /* @__PURE__ */ p("div", {
 			className: e.overlay,
 			"data-side": y,
-			children: /* @__PURE__ */ f(t, {
+			children: /* @__PURE__ */ p(t, {
 				onDismiss: () => O(!1),
-				children: /* @__PURE__ */ f(n, {
+				children: /* @__PURE__ */ p(n, {
 					trapped: !0,
 					restoreFocus: !0,
 					autoFocus: !0,
-					children: /* @__PURE__ */ p("div", {
+					children: /* @__PURE__ */ m("div", {
 						role: "dialog",
 						"aria-modal": "true",
 						"aria-labelledby": x ? P : void 0,
@@ -49,30 +49,30 @@ function g({ open: g, defaultOpen: _, onOpenChange: v, side: y = "end", size: b,
 						"data-dragging": E && M.value ? "" : void 0,
 						className: a(e.panel, T),
 						style: L,
-						children: [(x || S) && /* @__PURE__ */ p("div", {
+						children: [(x || S) && /* @__PURE__ */ m("div", {
 							className: e.header,
 							ref: E ? A : void 0,
-							children: [/* @__PURE__ */ p("div", {
+							children: [/* @__PURE__ */ m("div", {
 								className: e.heading,
-								children: [x && /* @__PURE__ */ f("h2", {
+								children: [x && /* @__PURE__ */ p("h2", {
 									id: P,
 									className: e.title,
 									children: x
-								}), S && /* @__PURE__ */ f("p", {
+								}), S && /* @__PURE__ */ p("p", {
 									id: F,
 									className: e.description,
 									children: S
 								})]
-							}), /* @__PURE__ */ f("button", {
+							}), /* @__PURE__ */ p("button", {
 								type: "button",
 								"aria-label": I,
 								onClick: () => O(!1),
 								className: e.close,
-								children: /* @__PURE__ */ f("svg", {
+								children: /* @__PURE__ */ p("svg", {
 									"aria-hidden": "true",
 									viewBox: "0 0 16 16",
 									className: e.closeIcon,
-									children: /* @__PURE__ */ f("path", {
+									children: /* @__PURE__ */ p("path", {
 										d: "M4 4l8 8M12 4l-8 8",
 										fill: "none",
 										stroke: "currentColor",
@@ -81,8 +81,9 @@ function g({ open: g, defaultOpen: _, onOpenChange: v, side: y = "end", size: b,
 									})
 								})
 							})]
-						}), /* @__PURE__ */ f("div", {
+						}), /* @__PURE__ */ p("div", {
 							className: e.body,
+							"data-cascivo-drawer-body": "",
 							children: C
 						})]
 					})

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

@@ -1,15 +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"
+	overlay: "_overlay_1q94b_2",
+	panel: "_panel_1q94b_39",
+	header: "_header_1q94b_124",
+	heading: "_heading_1q94b_134",
+	title: "_title_1q94b_140",
+	description: "_description_1q94b_147",
+	close: "_close_1q94b_153",
+	closeIcon: "_closeIcon_1q94b_181",
+	body: "_body_1q94b_186"
 };
 //#endregion
 export { e as default };

package/dist/node/dropdown/dropdown.js

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

package/dist/node/editable/editable.js

@@ -2,14 +2,14 @@
 
 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";
+import { useRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region ../components/src/editable/editable.tsx
 function c({ value: c, onValueChange: l, placeholder: u, disabled: d = !1, submitOnBlur: f = !0, onCancel: p, className: m, ...h }) {
 	i();
-	let g = n(!1), _ = n(c), v = s(null), y = s(p);
+	let g = n(!1), _ = n(c), v = a(null), y = a(p);
 	y.current = p;
-	let b = s(l);
+	let b = a(l);
 	b.current = l, g.value || (_.value = c), r(() => {
 		if (g.value) {
 			let e = v.current;
@@ -22,10 +22,10 @@ function c({ value: c, onValueChange: l, placeholder: u, disabled: d = !1, submi
 	function S() {
 		_.value = c, g.value = !1, y.current?.();
 	}
-	return g.value ? /* @__PURE__ */ a("div", {
+	return g.value ? /* @__PURE__ */ o("div", {
 		className: t(e.wrapper, e.editing, m),
 		...h,
-		children: /* @__PURE__ */ a("input", {
+		children: /* @__PURE__ */ o("input", {
 			ref: v,
 			className: e.input,
 			value: _.value,
@@ -39,24 +39,24 @@ function c({ value: c, onValueChange: l, placeholder: u, disabled: d = !1, submi
 				f ? x() : S();
 			}
 		})
-	}) : /* @__PURE__ */ a("div", {
+	}) : /* @__PURE__ */ o("div", {
 		className: t(e.wrapper, m),
 		"data-disabled": d ? "" : void 0,
 		...h,
-		children: /* @__PURE__ */ o("button", {
+		children: /* @__PURE__ */ s("button", {
 			type: "button",
 			className: e.preview,
 			disabled: d,
 			onClick: () => {
 				d || (g.value = !0);
 			},
-			children: [/* @__PURE__ */ a("span", {
+			children: [/* @__PURE__ */ o("span", {
 				className: e["preview-text"],
-				children: c || /* @__PURE__ */ a("span", {
+				children: c || /* @__PURE__ */ o("span", {
 					className: e.placeholder,
 					children: u
 				})
-			}), /* @__PURE__ */ a("span", {
+			}), /* @__PURE__ */ o("span", {
 				className: e["edit-icon"],
 				"aria-hidden": "true"
 			})]