@cascivo/react 0.12.0 → 0.13.1

package/dist/resizable/resizable.js

@@ -2,20 +2,20 @@
 
 import e from "./resizable.module.js";
 import { cn as t, useControllableSignal as n, useSignal as r, useSignalEffect as i, useSignals as a } from "@cascivo/core";
-import { builtin as o, t as s } from "@cascivo/i18n";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Children as u, useRef as d } from "react";
+import { Children as o, useRef as s } from "react";
+import { builtin as c, t as l } from "@cascivo/i18n";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region ../components/src/resizable/resizable.tsx
 function f(e, t, n) {
 	return Math.min(n, Math.max(t, e));
 }
 function p({ children: p, orientation: m = "horizontal", defaultRatio: h = .5, ratio: g, minRatio: _ = .1, maxRatio: v = .9, onRatioChange: y, className: b, label: x }) {
 	a();
-	let [S, C] = u.toArray(p), [w, T] = n({
+	let [S, C] = o.toArray(p), [w, T] = n({
 		value: g,
 		defaultValue: h,
 		onChange: y
-	}), E = d(null), D = r(!1), O = (e) => {
+	}), E = s(null), D = r(!1), O = (e) => {
 		T(f(e, _, v));
 	}, k = (e, t) => {
 		let n = E.current;
@@ -40,18 +40,18 @@ function p({ children: p, orientation: m = "horizontal", defaultRatio: h = .5, r
 		else if (e.key === "End") O(v);
 		else return;
 		e.preventDefault();
-	}, j = x ?? s(o.resizable.handle), M = Math.round(w.value * 100);
-	return /* @__PURE__ */ l("div", {
+	}, j = x ?? l(c.resizable.handle), M = Math.round(w.value * 100);
+	return /* @__PURE__ */ d("div", {
 		ref: E,
 		className: t(e.resizable, b),
 		"data-orientation": m,
 		style: { "--cascivo-resizable-ratio": w.value },
 		children: [
-			/* @__PURE__ */ c("div", {
+			/* @__PURE__ */ u("div", {
 				className: e.pane,
 				children: S
 			}),
-			/* @__PURE__ */ c("div", {
+			/* @__PURE__ */ u("div", {
 				className: e.handle,
 				role: "separator",
 				"aria-orientation": m,
@@ -64,12 +64,12 @@ function p({ children: p, orientation: m = "horizontal", defaultRatio: h = .5, r
 				onPointerDown: (e) => {
 					e.preventDefault(), D.value = !0;
 				},
-				children: /* @__PURE__ */ c("span", {
+				children: /* @__PURE__ */ u("span", {
 					className: e.grip,
 					"aria-hidden": "true"
 				})
 			}),
-			/* @__PURE__ */ c("div", {
+			/* @__PURE__ */ u("div", {
 				className: e.pane,
 				children: C
 			})

package/dist/scroll-area/scroll-area.js

@@ -2,12 +2,12 @@
 
 import e from "./scroll-area.module.js";
 import { cn as t, useSignalEffect as n, useSignals as r } from "@cascivo/core";
-import { jsx as i } from "react/jsx-runtime";
-import { useRef as a } from "react";
+import { useRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
 //#region ../components/src/scroll-area/scroll-area.tsx
 function o({ height: o, width: s, orientation: c = "vertical", edges: l = "shadow", className: u, style: d, children: f, ...p }) {
 	r();
-	let m = a(null);
+	let m = i(null);
 	n(() => {
 		let e = m.current;
 		if (!e) return;
@@ -24,7 +24,7 @@ function o({ height: o, width: s, orientation: c = "vertical", edges: l = "shado
 		...s === void 0 ? {} : { "--cascivo-scroll-area-width": s },
 		...d
 	};
-	return /* @__PURE__ */ i("div", {
+	return /* @__PURE__ */ a("div", {
 		ref: m,
 		"data-orientation": c,
 		"data-edges": l,

package/dist/search/search.css

@@ -1 +1 @@
-@layer cascivo.component{._root_1m8s8_2{inline-size:var(--cascivo-search-width,100%);align-items:center;display:inline-flex;position:relative}._root_1m8s8_2[data-size=sm]{--_search-height:2rem;--_search-font:var(--cascivo-text-sm);--_search-px:var(--cascivo-space-3)}._root_1m8s8_2[data-size=md]{--_search-height:2.5rem;--_search-font:var(--cascivo-text-sm);--_search-px:var(--cascivo-space-4)}._root_1m8s8_2[data-size=lg]{--_search-height:3rem;--_search-font:var(--cascivo-text-base);--_search-px:var(--cascivo-space-4)}._label_1m8s8_31{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}._icon_1m8s8_44{color:var(--cascivo-color-text-muted);pointer-events:none;align-items:center;display:inline-flex;position:absolute;inset-inline-start:var(--_search-px,var(--cascivo-space-4))}._input_1m8s8_53{inline-size:100%;block-size:var(--_search-height,2.5rem);font-family:var(--cascivo-font-sans);font-size:var(--_search-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);transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);outline:none;padding-inline-start:calc(var(--_search-px,var(--cascivo-space-4)) + 1rem + var(--cascivo-space-2));padding-inline-end:calc(var(--_search-px,var(--cascivo-space-4)) + 1.5rem)}._input_1m8s8_53::-webkit-search-cancel-button{appearance:none;display:none}._input_1m8s8_53::-webkit-search-decoration{appearance:none;display:none}._input_1m8s8_53::placeholder{color:var(--cascivo-color-text-muted)}._input_1m8s8_53:hover:not(:disabled):not(:focus){border-color:var(--cascivo-color-border-strong)}._input_1m8s8_53:focus{border-color:var(--cascivo-color-accent);box-shadow:var(--cascivo-focus-ring)}._input_1m8s8_53:disabled{opacity:.5;cursor:not-allowed;background-color:var(--cascivo-color-bg-subtle)}._clear_1m8s8_99{block-size:1.5rem;inline-size:1.5rem;font-size:var(--cascivo-text-sm);line-height:var(--cascivo-leading-none);color:var(--cascivo-color-text-muted);border-radius:var(--cascivo-radius-control);cursor:pointer;transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out), color var(--cascivo-duration-150) var(--cascivo-ease-out);background-color:#0000;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex;position:absolute;inset-inline-end:var(--cascivo-space-2)}._clear_1m8s8_99:hover:not(:disabled){color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}._clear_1m8s8_99:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._clear_1m8s8_99:disabled{cursor:not-allowed}}
+@layer cascivo.component{._root_1ppci_2{min-inline-size:0;inline-size:var(--cascivo-search-width,100%);align-items:center;display:inline-flex;position:relative}._root_1ppci_2[data-size=sm]{--_search-height:2rem;--_search-font:var(--cascivo-text-sm);--_search-px:var(--cascivo-space-3)}._root_1ppci_2[data-size=md]{--_search-height:2.5rem;--_search-font:var(--cascivo-text-sm);--_search-px:var(--cascivo-space-4)}._root_1ppci_2[data-size=lg]{--_search-height:3rem;--_search-font:var(--cascivo-text-base);--_search-px:var(--cascivo-space-4)}._label_1ppci_35{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}._icon_1ppci_48{color:var(--cascivo-color-text-muted);pointer-events:none;align-items:center;display:inline-flex;position:absolute;inset-inline-start:var(--_search-px,var(--cascivo-space-4))}._input_1ppci_57{inline-size:100%;block-size:var(--_search-height,2.5rem);font-family:var(--cascivo-font-sans);font-size:var(--_search-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);transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);outline:none;padding-inline-start:calc(var(--_search-px,var(--cascivo-space-4)) + 1rem + var(--cascivo-space-2));padding-inline-end:calc(var(--_search-px,var(--cascivo-space-4)) + 1.5rem)}._input_1ppci_57::-webkit-search-cancel-button{appearance:none;display:none}._input_1ppci_57::-webkit-search-decoration{appearance:none;display:none}._input_1ppci_57::placeholder{color:var(--cascivo-color-text-muted)}._input_1ppci_57:hover:not(:disabled):not(:focus){border-color:var(--cascivo-color-border-strong)}._input_1ppci_57:focus{border-color:var(--cascivo-color-accent);box-shadow:var(--cascivo-focus-ring)}._input_1ppci_57:disabled{opacity:.5;cursor:not-allowed;background-color:var(--cascivo-color-bg-subtle)}._clear_1ppci_103{block-size:1.5rem;inline-size:1.5rem;font-size:var(--cascivo-text-sm);line-height:var(--cascivo-leading-none);color:var(--cascivo-color-text-muted);border-radius:var(--cascivo-radius-control);cursor:pointer;transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out), color var(--cascivo-duration-150) var(--cascivo-ease-out);background-color:#0000;border:none;justify-content:center;align-items:center;padding:0;display:inline-flex;position:absolute;inset-inline-end:var(--cascivo-space-2)}._clear_1ppci_103:hover:not(:disabled){color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}._clear_1ppci_103:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._clear_1ppci_103:disabled{cursor:not-allowed}}

package/dist/search/search.js

@@ -1,13 +1,13 @@
 "use client";
 
 import e from "./search.module.js";
-import { cn as t, useId as n, useSignal as r, useSignalEffect as i, useSignals as a } from "@cascivo/core";
-import { builtin as o, t as s } from "@cascivo/i18n";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { useRef as u } from "react";
+import { cn as t, focusElement as n, useId as r, useSignal as i, useSignalEffect as a, useSignals as o } from "@cascivo/core";
+import { useRef as s } from "react";
+import { builtin as c, t as l } from "@cascivo/i18n";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region ../components/src/search/search.tsx
-function d() {
-	return /* @__PURE__ */ l("svg", {
+function f() {
+	return /* @__PURE__ */ d("svg", {
 		viewBox: "0 0 16 16",
 		width: "16",
 		height: "16",
@@ -16,11 +16,11 @@ function d() {
 		strokeWidth: "1.5",
 		strokeLinecap: "round",
 		"aria-hidden": "true",
-		children: [/* @__PURE__ */ c("circle", {
+		children: [/* @__PURE__ */ u("circle", {
 			cx: "7",
 			cy: "7",
 			r: "4.5"
-		}), /* @__PURE__ */ c("line", {
+		}), /* @__PURE__ */ u("line", {
 			x1: "10.5",
 			y1: "10.5",
 			x2: "14",
@@ -28,58 +28,58 @@ function d() {
 		})]
 	});
 }
-function f({ value: f, defaultValue: p = "", onValueChange: m, onChange: h, onSearch: g, debounceMs: _ = 300, placeholder: v, size: y = "md", label: b, disabled: x = !1, clearLabel: S, id: C, className: w }) {
-	a();
-	let T = v ?? s(o.search.placeholder), E = b ?? s(o.search.label), D = S ?? s(o.search.clear), O = u(null), k = n("cascade-search"), A = C ?? k, j = f !== void 0, M = r(j ? f : p);
-	j && (M.value = f);
-	let N = u(g);
-	N.current = g;
-	let P = u(null), F = () => {
-		P.current !== null && (clearTimeout(P.current), P.current = null);
+function p({ value: p, defaultValue: m = "", onValueChange: h, onChange: g, onSearch: _, debounceMs: v = 300, placeholder: y, size: b = "md", label: x, disabled: S = !1, clearLabel: C, id: w, className: T }) {
+	o();
+	let E = y ?? l(c.search.placeholder), D = x ?? l(c.search.label), O = C ?? l(c.search.clear), k = s(null), A = r("cascade-search"), j = w ?? A, M = p !== void 0, N = i(M ? p : m);
+	M && (N.value = p);
+	let P = s(_);
+	P.current = _;
+	let F = s(null), I = () => {
+		F.current !== null && (clearTimeout(F.current), F.current = null);
 	};
-	i(() => F);
-	let I = (e) => {
+	a(() => I);
+	let L = (e) => {
 		let t = e.target.value;
-		j || (M.value = t), (m ?? h)?.(t), F(), P.current = setTimeout(() => {
-			P.current = null, N.current?.(t);
-		}, _);
-	}, L = (e) => {
-		e.key === "Enter" && (F(), g?.(M.value));
-	}, R = () => {
-		F(), j || (M.value = ""), (m ?? h)?.(""), g?.(""), O.current?.focus();
-	}, z = M.value !== "";
-	return /* @__PURE__ */ l("div", {
-		className: t(e.root, w),
-		"data-size": y,
-		"data-state": z ? "filled" : "empty",
+		M || (N.value = t), (h ?? g)?.(t), I(), F.current = setTimeout(() => {
+			F.current = null, P.current?.(t);
+		}, v);
+	}, R = (e) => {
+		e.key === "Enter" && (I(), _?.(N.value));
+	}, z = () => {
+		I(), M || (N.value = ""), (h ?? g)?.(""), _?.(""), n(k.current);
+	}, B = N.value !== "";
+	return /* @__PURE__ */ d("div", {
+		className: t(e.root, T),
+		"data-size": b,
+		"data-state": B ? "filled" : "empty",
 		children: [
-			/* @__PURE__ */ c("label", {
+			/* @__PURE__ */ u("label", {
 				className: e.label,
-				htmlFor: A,
-				children: E
+				htmlFor: j,
+				children: D
 			}),
-			/* @__PURE__ */ c("span", {
+			/* @__PURE__ */ u("span", {
 				className: e.icon,
-				children: /* @__PURE__ */ c(d, {})
+				children: /* @__PURE__ */ u(f, {})
 			}),
-			/* @__PURE__ */ c("input", {
-				ref: O,
-				id: A,
+			/* @__PURE__ */ u("input", {
+				ref: k,
+				id: j,
 				type: "search",
 				className: e.input,
-				value: M.value,
-				placeholder: T,
-				disabled: x,
-				onChange: I,
-				onKeyDown: L
+				value: N.value,
+				placeholder: E,
+				disabled: S,
+				onChange: L,
+				onKeyDown: R
 			}),
-			z && /* @__PURE__ */ c("button", {
+			B && /* @__PURE__ */ u("button", {
 				type: "button",
 				className: e.clear,
-				"aria-label": D,
-				disabled: x,
-				onClick: R,
-				children: /* @__PURE__ */ c("span", {
+				"aria-label": O,
+				disabled: S,
+				onClick: z,
+				children: /* @__PURE__ */ u("span", {
 					"aria-hidden": "true",
 					children: "✕"
 				})
@@ -88,4 +88,4 @@ function f({ value: f, defaultValue: p = "", onValueChange: m, onChange: h, onSe
 	});
 }
 //#endregion
-export { f as Search };
+export { p as Search };

package/dist/search/search.module.js

@@ -2,11 +2,11 @@
 
 import './search.css';
 var e = {
-	root: "_root_1m8s8_2",
-	label: "_label_1m8s8_31",
-	icon: "_icon_1m8s8_44",
-	input: "_input_1m8s8_53",
-	clear: "_clear_1m8s8_99"
+	root: "_root_1ppci_2",
+	label: "_label_1ppci_35",
+	icon: "_icon_1ppci_48",
+	input: "_input_1ppci_57",
+	clear: "_clear_1ppci_103"
 };
 //#endregion
 export { e as default };

package/dist/select/select.js

@@ -2,70 +2,71 @@
 
 import e from "./select.module.js";
 import { cn as t, createMachine as n, useMachine as r } from "@cascivo/core";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region ../components/src/select/select.tsx
-var o = n({
+var s = n({
 	initial: "idle",
 	states: {
 		idle: { on: { FOCUS: "focused" } },
 		focused: { on: { BLUR: "idle" } }
 	}
-});
-function s({ label: n, hint: s, error: c, placeholder: l, options: u, size: d = "md", className: f, id: p, defaultValue: m, value: h, onFocus: g, onBlur: _, ...v }) {
-	let [y, b] = r(o), x = p ?? (n ? `cascade-select-${n.toLowerCase().replace(/\s+/g, "-")}` : void 0), S = h !== void 0, C = l !== void 0;
-	return /* @__PURE__ */ a("div", {
+}), c = i(function({ label: n, hint: i, error: c, placeholder: l, options: u, size: d = "md", className: f, id: p, defaultValue: m, value: h, onFocus: g, onBlur: _, ...v }, y) {
+	let [b, x] = r(s), S = p ?? (n ? `cascade-select-${n.toLowerCase().replace(/\s+/g, "-")}` : void 0), C = h !== void 0, w = l !== void 0;
+	return /* @__PURE__ */ o("div", {
 		className: t(e.wrapper, f),
-		"data-state": c ? "error" : y.value,
+		"data-state": c ? "error" : b.value,
 		"data-size": d,
 		children: [
-			n && /* @__PURE__ */ i("label", {
+			n && /* @__PURE__ */ a("label", {
 				className: e.label,
-				htmlFor: x,
+				htmlFor: S,
 				children: n
 			}),
-			/* @__PURE__ */ a("div", {
+			/* @__PURE__ */ o("div", {
 				className: e.field,
-				children: [/* @__PURE__ */ a("select", {
-					id: x,
+				children: [/* @__PURE__ */ o("select", {
+					id: S,
 					className: e.select,
 					"aria-invalid": c ? !0 : void 0,
-					"aria-describedby": c ? `${x}-error` : s ? `${x}-hint` : void 0,
+					"aria-describedby": c ? `${S}-error` : i ? `${S}-hint` : void 0,
 					value: h,
-					defaultValue: !S && C ? m ?? "" : m,
+					defaultValue: !C && w ? m ?? "" : m,
 					onFocus: (e) => {
-						b("FOCUS"), g?.(e);
+						x("FOCUS"), g?.(e);
 					},
 					onBlur: (e) => {
-						b("BLUR"), _?.(e);
+						x("BLUR"), _?.(e);
 					},
+					ref: y,
 					...v,
-					children: [C && /* @__PURE__ */ i("option", {
+					children: [w && /* @__PURE__ */ a("option", {
 						value: "",
 						disabled: !0,
 						children: l
-					}), u.map((e) => /* @__PURE__ */ i("option", {
+					}), u.map((e) => /* @__PURE__ */ a("option", {
 						value: e.value,
 						disabled: e.disabled,
 						children: e.label
 					}, e.value))]
-				}), /* @__PURE__ */ i("span", {
+				}), /* @__PURE__ */ a("span", {
 					className: e.chevron,
 					"aria-hidden": "true"
 				})]
 			}),
-			c && /* @__PURE__ */ i("span", {
-				id: `${x}-error`,
+			c && /* @__PURE__ */ a("span", {
+				id: `${S}-error`,
 				className: e.error,
 				role: "alert",
 				children: c
 			}),
-			!c && s && /* @__PURE__ */ i("span", {
-				id: `${x}-hint`,
+			!c && i && /* @__PURE__ */ a("span", {
+				id: `${S}-hint`,
 				className: e.hint,
-				children: s
+				children: i
 			})
 		]
 	});
-}
+});
 //#endregion
-export { s as Select };
+export { c as Select };

package/dist/sheet/sheet.css

@@ -1 +1 @@
-@layer cascivo.component{._sheet_18eks_2{background:var(--cascivo-color-surface);box-shadow:var(--cascivo-shadow-overlay);transition:translate var(--cascivo-motion-enter), display var(--cascivo-motion-enter) allow-discrete, overlay var(--cascivo-motion-enter) allow-discrete;border:none;flex-direction:column;margin:0;padding:0;display:flex;position:fixed}._sheet_18eks_2[data-state=closed]{transition:translate var(--cascivo-motion-exit), display var(--cascivo-motion-exit) allow-discrete, overlay var(--cascivo-motion-exit) allow-discrete}._sheet_18eks_2[data-side=end]{border-inline-start:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay) 0 0 var(--cascivo-radius-overlay);width:min(24rem,90vw);height:100%;inset-block:0;inset-inline-end:0;translate:100%}._sheet_18eks_2[data-side=end][data-state=open]{translate:0}@starting-style{._sheet_18eks_2[data-side=end][data-state=open]{translate:100%}}._sheet_18eks_2[data-side=start]{border-inline-end:1px solid var(--cascivo-color-border);border-radius:0 var(--cascivo-radius-overlay) var(--cascivo-radius-overlay) 0;width:min(24rem,90vw);height:100%;inset-block:0;inset-inline-start:0;translate:-100%}._sheet_18eks_2[data-side=start][data-state=open]{translate:0}@starting-style{._sheet_18eks_2[data-side=start][data-state=open]{translate:-100%}}._sheet_18eks_2[data-side=top]{border-block-end:1px solid var(--cascivo-color-border);border-radius:0 0 var(--cascivo-radius-overlay) var(--cascivo-radius-overlay);width:100%;height:auto;max-height:80vh;inset-block-start:0;inset-inline:0;translate:0 -100%}._sheet_18eks_2[data-side=top][data-state=open]{translate:0}@starting-style{._sheet_18eks_2[data-side=top][data-state=open]{translate:0 -100%}}._sheet_18eks_2[data-side=bottom]{border-block-start:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay) var(--cascivo-radius-overlay) 0 0;width:100%;height:auto;max-height:80vh;inset-block-end:0;inset-inline:0;translate:0 100%}._sheet_18eks_2[data-side=bottom][data-state=open]{translate:0}@starting-style{._sheet_18eks_2[data-side=bottom][data-state=open]{translate:0 100%}}._sheet_18eks_2::backdrop{opacity:1;transition:opacity var(--cascivo-motion-enter), display var(--cascivo-motion-enter) allow-discrete, overlay var(--cascivo-motion-enter) allow-discrete;background-color:#0006}@starting-style{._sheet_18eks_2::backdrop{opacity:0}}._sheet_18eks_2[data-state=closed]::backdrop{opacity:0;transition:opacity var(--cascivo-motion-exit), display var(--cascivo-motion-exit) allow-discrete, overlay var(--cascivo-motion-exit) allow-discrete}._header_18eks_133{padding:var(--cascivo-space-4) var(--cascivo-space-6);border-block-end:1px solid var(--cascivo-color-border);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}._title_18eks_142{font-size:var(--cascivo-text-lg);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text)}._close_18eks_148{width:2rem;height:2rem;font-size:var(--cascivo-text-sm);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;justify-content:center;align-items:center;padding:0;display:flex}._close_18eks_148:hover{color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}._close_18eks_148:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._body_18eks_176{padding:var(--cascivo-space-6);flex:1;overflow-y:auto}}
+@layer cascivo.component{._sheet_gx7nz_2{background:var(--cascivo-color-surface);box-shadow:var(--cascivo-shadow-overlay);border:none;flex-direction:column;margin:0;padding:0;position:fixed}._sheet_gx7nz_2:popover-open{display:flex}._sheet_gx7nz_2{transition:translate var(--cascivo-motion-enter), display var(--cascivo-motion-enter) allow-discrete, overlay var(--cascivo-motion-enter) allow-discrete}._sheet_gx7nz_2[data-state=closed]{transition:translate var(--cascivo-motion-exit), display var(--cascivo-motion-exit) allow-discrete, overlay var(--cascivo-motion-exit) allow-discrete}._sheet_gx7nz_2[data-side=end]{border-inline-start:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay) 0 0 var(--cascivo-radius-overlay);width:min(24rem,90vw);height:100%;inset-block:0;inset-inline-end:0;translate:100%}._sheet_gx7nz_2[data-side=end][data-state=open]{translate:0}@starting-style{._sheet_gx7nz_2[data-side=end][data-state=open]{translate:100%}}._sheet_gx7nz_2[data-side=start]{border-inline-end:1px solid var(--cascivo-color-border);border-radius:0 var(--cascivo-radius-overlay) var(--cascivo-radius-overlay) 0;width:min(24rem,90vw);height:100%;inset-block:0;inset-inline-start:0;translate:-100%}._sheet_gx7nz_2[data-side=start][data-state=open]{translate:0}@starting-style{._sheet_gx7nz_2[data-side=start][data-state=open]{translate:-100%}}._sheet_gx7nz_2[data-side=top]{border-block-end:1px solid var(--cascivo-color-border);border-radius:0 0 var(--cascivo-radius-overlay) var(--cascivo-radius-overlay);width:100%;height:auto;max-height:80vh;inset-block-start:0;inset-inline:0;translate:0 -100%}._sheet_gx7nz_2[data-side=top][data-state=open]{translate:0}@starting-style{._sheet_gx7nz_2[data-side=top][data-state=open]{translate:0 -100%}}._sheet_gx7nz_2[data-side=bottom]{border-block-start:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay) var(--cascivo-radius-overlay) 0 0;width:100%;height:auto;max-height:80vh;inset-block-end:0;inset-inline:0;translate:0 100%}._sheet_gx7nz_2[data-side=bottom][data-state=open]{translate:0}@starting-style{._sheet_gx7nz_2[data-side=bottom][data-state=open]{translate:0 100%}}._sheet_gx7nz_2::backdrop{opacity:1;transition:opacity var(--cascivo-motion-enter), display var(--cascivo-motion-enter) allow-discrete, overlay var(--cascivo-motion-enter) allow-discrete;background-color:#0006}@starting-style{._sheet_gx7nz_2::backdrop{opacity:0}}._sheet_gx7nz_2[data-state=closed]::backdrop{opacity:0;transition:opacity var(--cascivo-motion-exit), display var(--cascivo-motion-exit) allow-discrete, overlay var(--cascivo-motion-exit) allow-discrete}._header_gx7nz_141{padding:var(--cascivo-space-4) var(--cascivo-space-6);border-block-end:1px solid var(--cascivo-color-border);flex-shrink:0;justify-content:space-between;align-items:center;display:flex}._title_gx7nz_150{font-size:var(--cascivo-text-lg);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text)}._close_gx7nz_156{width:2rem;height:2rem;font-size:var(--cascivo-text-sm);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;justify-content:center;align-items:center;padding:0;display:flex}._close_gx7nz_156:hover{color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}._close_gx7nz_156:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._body_gx7nz_184{gap:var(--cascivo-dialog-body-gap,var(--cascivo-space-5));padding:var(--cascivo-space-6);flex-direction:column;flex:1;display:flex;overflow-y:auto}}

package/dist/sheet/sheet.js

@@ -2,12 +2,12 @@
 
 import e from "./sheet.module.js";
 import { useEffectPropSignal as t, useSignalEffect 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";
-import { useId as s, useRef as c } from "react";
+import { useId as r, useRef as i } from "react";
+import { builtin as a, t as o } from "@cascivo/i18n";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region ../components/src/sheet/sheet.tsx
 function l({ open: l, onClose: u, title: d, children: f, side: p = "end" }) {
-	let m = c(null), h = s(), g = t(l), _ = c(u);
+	let m = i(null), h = r(), g = t(l), _ = i(u);
 	return _.current = u, n(() => {
 		let e = m.current;
 		if (e) if (g.value) try {
@@ -16,7 +16,7 @@ function l({ open: l, onClose: u, title: d, children: f, side: p = "end" }) {
 		else try {
 			e.hidePopover();
 		} catch {}
-	}), /* @__PURE__ */ o("div", {
+	}), /* @__PURE__ */ c("div", {
 		ref: m,
 		popover: "manual",
 		role: "dialog",
@@ -25,21 +25,22 @@ function l({ open: l, onClose: u, title: d, children: f, side: p = "end" }) {
 		"data-state": l ? "open" : "closed",
 		"data-side": p,
 		className: e.sheet,
-		children: [/* @__PURE__ */ o("div", {
+		children: [/* @__PURE__ */ c("div", {
 			className: e.header,
-			children: [d != null && /* @__PURE__ */ a("span", {
+			children: [d != null && /* @__PURE__ */ s("span", {
 				id: h,
 				className: e.title,
 				children: d
-			}), /* @__PURE__ */ a("button", {
+			}), /* @__PURE__ */ s("button", {
 				type: "button",
-				"aria-label": i(r.sheet.close),
+				"aria-label": o(a.sheet.close),
 				onClick: () => _.current(),
 				className: e.close,
 				children: "✕"
 			})]
-		}), /* @__PURE__ */ a("div", {
+		}), /* @__PURE__ */ s("div", {
 			className: e.body,
+			"data-cascivo-sheet-body": "",
 			children: f
 		})]
 	});

package/dist/sheet/sheet.module.js

@@ -2,11 +2,11 @@
 
 import './sheet.css';
 var e = {
-	sheet: "_sheet_18eks_2",
-	header: "_header_18eks_133",
-	title: "_title_18eks_142",
-	close: "_close_18eks_148",
-	body: "_body_18eks_176"
+	sheet: "_sheet_gx7nz_2",
+	header: "_header_gx7nz_141",
+	title: "_title_gx7nz_150",
+	close: "_close_gx7nz_156",
+	body: "_body_gx7nz_184"
 };
 //#endregion
 export { e as default };