@cascivo/react 0.12.0 → 0.13.1

package/dist/menubar/menubar.js

@@ -1,89 +1,89 @@
 "use client";
 
 import e from "./menubar.module.js";
-import { DismissableLayer as t, Presence as n, cn as r, useAnchorPosition as i, useRovingFocus as a, useSignal as o, useSignals as s } from "@cascivo/core";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
-import { useId as d, useRef as f } from "react";
+import { DismissableLayer as t, Presence as n, cn as r, focusElement as i, useAnchorPosition as a, useRovingFocus as o, useSignal as s, useSignals as c } from "@cascivo/core";
+import { useId as l, useRef as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
 //#region ../components/src/menubar/menubar.tsx
-function p({ menus: t, "aria-label": n, className: i }) {
-	s();
-	let c = d(), u = o(null), f = a({
+function m({ menus: t, "aria-label": n, className: i }) {
+	c();
+	let a = l(), u = s(null), d = o({
 		orientation: "horizontal",
 		loop: !0
 	});
-	return /* @__PURE__ */ l("div", {
+	return /* @__PURE__ */ f("div", {
 		role: "menubar",
 		"aria-label": n,
 		className: r(e.menubar, i),
-		children: t.map((e, t) => /* @__PURE__ */ l(m, {
+		children: t.map((e, t) => /* @__PURE__ */ f(h, {
 			menu: e,
 			index: t,
-			baseId: c,
+			baseId: a,
 			openId: u,
-			itemProps: f.getItemProps(t)
+			itemProps: d.getItemProps(t)
 		}, e.id))
 	});
 }
-function m({ menu: t, baseId: r, openId: a, itemProps: o }) {
-	s();
-	let d = f(null), p = f(null), m = a.value === t.id, g = `${r}-menu-${t.id}`, { anchorStyle: _, floatingStyle: v } = i({
-		anchorRef: d,
-		floatingRef: p,
+function h({ menu: t, baseId: r, openId: o, itemProps: s }) {
+	c();
+	let l = u(null), m = u(null), h = o.value === t.id, _ = `${r}-menu-${t.id}`, { anchorStyle: v, floatingStyle: y } = a({
+		anchorRef: l,
+		floatingRef: m,
 		placement: "bottom-start",
-		enabled: m
-	}), y = () => {
-		(p.current?.querySelector("[role=\"menuitem\"]:not([aria-disabled=\"true\"])"))?.focus();
-	}, b = (e) => {
-		o.onKeyDown(e), !e.defaultPrevented && (e.key === "ArrowDown" || e.key === "Enter" || e.key === " " ? (e.preventDefault(), a.value = t.id, requestAnimationFrame(y)) : e.key === "Escape" && (a.value = null));
-	}, { ref: x, onKeyDown: S, ...C } = o;
-	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("button", {
+		enabled: h
+	}), b = () => {
+		(m.current?.querySelector("[role=\"menuitem\"]:not([aria-disabled=\"true\"])"))?.focus();
+	}, x = (e) => {
+		s.onKeyDown(e), !e.defaultPrevented && (e.key === "ArrowDown" || e.key === "Enter" || e.key === " " ? (e.preventDefault(), o.value = t.id, requestAnimationFrame(b)) : e.key === "Escape" && (o.value = null));
+	}, { ref: S, onKeyDown: C, ...w } = s;
+	return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("button", {
 		ref: (e) => {
-			d.current = e, x(e);
+			l.current = e, S(e);
 		},
 		type: "button",
 		role: "menuitem",
 		"aria-haspopup": "menu",
-		"aria-expanded": m,
-		"aria-controls": g,
-		"data-state": m ? "open" : "closed",
+		"aria-expanded": h,
+		"aria-controls": _,
+		"data-state": h ? "open" : "closed",
 		className: e.trigger,
-		style: _,
+		style: v,
 		onClick: () => {
-			a.value = m ? null : t.id;
+			o.value = h ? null : t.id;
 		},
-		onKeyDown: b,
-		...C,
+		onKeyDown: x,
+		...w,
 		children: t.label
-	}), /* @__PURE__ */ l(n, {
-		present: m,
-		children: /* @__PURE__ */ l(h, {
+	}), /* @__PURE__ */ f(n, {
+		present: h,
+		children: /* @__PURE__ */ f(g, {
 			menu: t,
-			menuId: g,
-			floatingRef: p,
-			floatingStyle: v,
+			menuId: _,
+			floatingRef: m,
+			floatingStyle: y,
 			onClose: () => {
-				a.value = null, d.current?.focus();
+				o.value = null, i(l.current);
 			}
 		})
 	})] });
 }
-function h({ menu: n, menuId: r, floatingRef: i, floatingStyle: a, onClose: o }) {
+function g({ menu: n, menuId: r, floatingRef: i, floatingStyle: a, onClose: o }) {
 	let s = (e) => {
 		let t = Array.from(i.current?.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])") ?? []);
 		if (t.length === 0) return;
 		let n = t.indexOf(e.currentTarget);
 		e.key === "ArrowDown" ? (e.preventDefault(), t[(n + 1) % t.length]?.focus()) : e.key === "ArrowUp" ? (e.preventDefault(), t[(n - 1 + t.length) % t.length]?.focus()) : e.key === "Home" ? (e.preventDefault(), t[0]?.focus()) : e.key === "End" && (e.preventDefault(), t[t.length - 1]?.focus());
 	};
-	return /* @__PURE__ */ l(t, {
+	return /* @__PURE__ */ f(t, {
 		onDismiss: o,
-		children: /* @__PURE__ */ l("div", {
+		children: /* @__PURE__ */ f("div", {
 			ref: i,
 			id: r,
 			role: "menu",
 			"aria-label": typeof n.label == "string" ? n.label : void 0,
 			className: e.panel,
 			style: a,
-			children: n.items.map((t) => /* @__PURE__ */ l("div", {
+			children: n.items.map((t) => /* @__PURE__ */ f("div", {
 				role: "menuitem",
 				tabIndex: -1,
 				"aria-disabled": t.disabled,
@@ -100,4 +100,4 @@ function h({ menu: n, menuId: r, floatingRef: i, floatingStyle: a, onClose: o })
 	});
 }
 //#endregion
-export { p as Menubar };
+export { m as Menubar };

package/dist/modal/modal.css

@@ -1 +1 @@
-@layer cascivo.component{._dialog_t1gwg_2{border-radius:var(--cascivo-radius-overlay);max-height:calc(100dvh - var(--cascivo-space-16));opacity:0;transition:opacity var(--cascivo-motion-exit), scale var(--cascivo-motion-exit), display var(--cascivo-duration-150) allow-discrete, overlay var(--cascivo-duration-150) allow-discrete;background:0 0;border:none;padding:0;overflow:visible;scale:.96}._dialog_t1gwg_2[open]{opacity:1;transition:opacity var(--cascivo-motion-enter), scale var(--cascivo-motion-enter), display var(--cascivo-duration-200) allow-discrete, overlay var(--cascivo-duration-200) allow-discrete;scale:1}@starting-style{._dialog_t1gwg_2[open]{opacity:0;scale:.96}}._dialog_t1gwg_2::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity var(--cascivo-motion-exit), display var(--cascivo-duration-150) allow-discrete, overlay var(--cascivo-duration-150) allow-discrete;background-color:#00000080}._dialog_t1gwg_2[open]::backdrop{opacity:1;transition:opacity var(--cascivo-motion-enter), display var(--cascivo-duration-200) allow-discrete, overlay var(--cascivo-duration-200) allow-discrete}@starting-style{._dialog_t1gwg_2[open]::backdrop{opacity:0}}._dialog_t1gwg_2[data-size=sm]{--_modal-width:24rem}._dialog_t1gwg_2[data-size=md]{--_modal-width:32rem}._dialog_t1gwg_2[data-size=lg]{--_modal-width:48rem}._panel_t1gwg_69{width:var(--_modal-width,32rem);max-width:calc(100vw - var(--cascivo-space-8));background-color:var(--cascivo-color-surface-overlay);border-radius:var(--cascivo-radius-overlay);border:1px solid var(--cascivo-color-border);box-shadow:var(--cascivo-shadow-overlay);overflow:hidden}._header_t1gwg_79{padding:var(--cascivo-space-6);border-block-end:1px solid var(--cascivo-color-border);justify-content:space-between;align-items:center;padding-block-end:var(--cascivo-space-4);display:flex}._dialog_t1gwg_2[data-draggable]{translate:var(--modal-x,0) var(--modal-y,0)}._dialog_t1gwg_2[data-draggable] ._header_t1gwg_79{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}._dialog_t1gwg_2[data-draggable] ._header_t1gwg_79:active{cursor:grabbing}._title_t1gwg_101{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-lg);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-tight);margin:0}._close_t1gwg_110{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_t1gwg_110:hover{color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}._close_t1gwg_110:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._description_t1gwg_138{padding-inline:var(--cascivo-space-6);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-relaxed);margin:0;padding-block-start:var(--cascivo-space-4)}._body_t1gwg_148{padding:var(--cascivo-space-6)}@media (width<=40rem){._dialog_t1gwg_2{max-block-size:90dvh;margin:0}._panel_t1gwg_69{max-block-size:90dvh;inline-size:100%;max-inline-size:100%;border-start-start-radius:var(--cascivo-radius-overlay);border-start-end-radius:var(--cascivo-radius-overlay);border-end-end-radius:0;border-end-start-radius:0;padding-block-end:env(safe-area-inset-bottom,0);overflow-y:auto}}@media (prefers-reduced-motion:reduce){._dialog_t1gwg_2,._dialog_t1gwg_2[open]{transition:none}}}@media (forced-colors:active){._panel_t1gwg_69{border:1px solid buttontext}._close_t1gwg_110:focus-visible{outline-offset:2px;outline:2px solid highlight}}
+@layer cascivo.component{._dialog_hywey_2{border-radius:var(--cascivo-radius-overlay);max-height:calc(100dvh - var(--cascivo-space-16));opacity:0;transition:opacity var(--cascivo-motion-exit), scale var(--cascivo-motion-exit), display var(--cascivo-duration-150) allow-discrete, overlay var(--cascivo-duration-150) allow-discrete;background:0 0;border:none;padding:0;overflow:visible;scale:.96}._dialog_hywey_2[open]{opacity:1;transition:opacity var(--cascivo-motion-enter), scale var(--cascivo-motion-enter), display var(--cascivo-duration-200) allow-discrete, overlay var(--cascivo-duration-200) allow-discrete;scale:1}@starting-style{._dialog_hywey_2[open]{opacity:0;scale:.96}}._dialog_hywey_2::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity var(--cascivo-motion-exit), display var(--cascivo-duration-150) allow-discrete, overlay var(--cascivo-duration-150) allow-discrete;background-color:#00000080}._dialog_hywey_2[open]::backdrop{opacity:1;transition:opacity var(--cascivo-motion-enter), display var(--cascivo-duration-200) allow-discrete, overlay var(--cascivo-duration-200) allow-discrete}@starting-style{._dialog_hywey_2[open]::backdrop{opacity:0}}._dialog_hywey_2[data-size=sm]{--_modal-width:24rem}._dialog_hywey_2[data-size=md]{--_modal-width:32rem}._dialog_hywey_2[data-size=lg]{--_modal-width:48rem}._panel_hywey_69{width:var(--_modal-width,32rem);max-width:calc(100vw - var(--cascivo-space-8));background-color:var(--cascivo-color-surface-overlay);border-radius:var(--cascivo-radius-overlay);border:1px solid var(--cascivo-color-border);box-shadow:var(--cascivo-shadow-overlay);overflow:hidden}._header_hywey_79{padding:var(--cascivo-space-6);border-block-end:1px solid var(--cascivo-color-border);justify-content:space-between;align-items:center;padding-block-end:var(--cascivo-space-4);display:flex}._dialog_hywey_2[data-draggable]{translate:var(--modal-x,0) var(--modal-y,0)}._dialog_hywey_2[data-draggable] ._header_hywey_79{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}._dialog_hywey_2[data-draggable] ._header_hywey_79:active{cursor:grabbing}._title_hywey_101{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-lg);font-weight:var(--cascivo-font-semibold);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-tight);margin:0}._close_hywey_110{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_hywey_110:hover{color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}._close_hywey_110:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._description_hywey_138{padding-inline:var(--cascivo-space-6);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-relaxed);margin:0;padding-block-start:var(--cascivo-space-4)}._body_hywey_148{gap:var(--cascivo-dialog-body-gap,var(--cascivo-space-5));padding:var(--cascivo-space-6);flex-direction:column;display:flex}._footer_hywey_166{justify-content:flex-end;gap:var(--cascivo-space-2);padding:var(--cascivo-space-4) var(--cascivo-space-6);border-block-start:1px solid var(--cascivo-color-border);flex-wrap:wrap;display:flex}@media (width<=40rem){._dialog_hywey_2{max-block-size:90dvh;margin:0}._panel_hywey_69{max-block-size:90dvh;inline-size:100%;max-inline-size:100%;border-start-start-radius:var(--cascivo-radius-overlay);border-start-end-radius:var(--cascivo-radius-overlay);border-end-end-radius:0;border-end-start-radius:0;padding-block-end:env(safe-area-inset-bottom,0);overflow-y:auto}}@media (prefers-reduced-motion:reduce){._dialog_hywey_2,._dialog_hywey_2[open]{transition:none}}}@media (forced-colors:active){._panel_hywey_69{border:1px solid buttontext}._close_hywey_110:focus-visible{outline-offset:2px;outline:2px solid highlight}}

package/dist/modal/modal.js

@@ -2,65 +2,71 @@
 
 import e from "./modal.module.js";
 import { cn as t, useDraggable as n, useEffectPropSignal as r, useId as i, useSignalEffect as a, useSignals as o } 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 { useRef as d } from "react";
+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/modal/modal.tsx
-function f({ open: f = !1, onClose: p, title: m, description: h, children: g, className: _, size: v = "md", draggable: y = !1 }) {
+function f({ open: f = !1, onClose: p, title: m, description: h, children: g, footer: _, className: v, size: y = "md", draggable: b = !1 }) {
 	o();
-	let b = d(null), x = d(p);
-	x.current = p;
-	let S = i("cascivo-modal-title"), C = i("cascivo-modal-desc"), { handleRef: w, offset: T } = n({ isDisabled: !y }), E = y ? {
-		"--modal-x": `${T.value.x}px`,
-		"--modal-y": `${T.value.y}px`
-	} : void 0, D = r(f);
+	let x = s(null), S = s(p);
+	S.current = p;
+	let C = i("cascivo-modal-title"), w = i("cascivo-modal-desc"), { handleRef: T, offset: E } = n({ isDisabled: !b }), D = b ? {
+		"--modal-x": `${E.value.x}px`,
+		"--modal-y": `${E.value.y}px`
+	} : void 0, O = r(f);
 	return a(() => {
-		let e = b.current;
-		e && (D.value ? e.open || e.showModal() : e.open && e.close());
+		let e = x.current;
+		e && (O.value ? e.open || e.showModal() : e.open && e.close());
 	}), a(() => {
-		let e = b.current;
+		let e = x.current;
 		if (!e) return;
-		let t = () => x.current?.();
+		let t = () => S.current?.();
 		return e.addEventListener("close", t), () => e.removeEventListener("close", t);
-	}), /* @__PURE__ */ l("dialog", {
-		ref: b,
-		"data-size": v,
-		"data-draggable": y || void 0,
-		className: t(e.dialog, _),
-		style: E,
+	}), /* @__PURE__ */ u("dialog", {
+		ref: x,
+		"data-size": y,
+		"data-draggable": b || void 0,
+		className: t(e.dialog, v),
+		style: D,
 		onClick: (e) => {
-			e.target === b.current && b.current?.close();
+			e.target === x.current && x.current?.close();
 		},
-		"aria-labelledby": m ? S : void 0,
-		"aria-describedby": h ? C : void 0,
-		children: /* @__PURE__ */ u("div", {
+		"aria-labelledby": m ? C : void 0,
+		"aria-describedby": h ? w : void 0,
+		children: /* @__PURE__ */ d("div", {
 			className: e.panel,
 			children: [
-				(m || p) && /* @__PURE__ */ u("div", {
+				(m || p) && /* @__PURE__ */ d("div", {
 					className: e.header,
-					ref: y ? (e) => {
-						w.current = e;
+					ref: b ? (e) => {
+						T.current = e;
 					} : void 0,
-					children: [m && /* @__PURE__ */ l("h2", {
-						id: S,
+					children: [m && /* @__PURE__ */ u("h2", {
+						id: C,
 						className: e.title,
 						children: m
-					}), p && /* @__PURE__ */ l("button", {
+					}), p && /* @__PURE__ */ u("button", {
 						type: "button",
 						className: e.close,
-						onClick: () => b.current?.close(),
-						"aria-label": c(s.modal.close),
+						onClick: () => x.current?.close(),
+						"aria-label": l(c.modal.close),
 						children: "✕"
 					})]
 				}),
-				h && /* @__PURE__ */ l("p", {
-					id: C,
+				h && /* @__PURE__ */ u("p", {
+					id: w,
 					className: e.description,
 					children: h
 				}),
-				/* @__PURE__ */ l("div", {
+				/* @__PURE__ */ u("div", {
 					className: e.body,
+					"data-cascivo-modal-body": "",
 					children: g
+				}),
+				_ && /* @__PURE__ */ u("div", {
+					className: e.footer,
+					"data-cascivo-modal-footer": "",
+					children: _
 				})
 			]
 		})

package/dist/modal/modal.module.js

@@ -2,13 +2,14 @@
 
 import './modal.css';
 var e = {
-	dialog: "_dialog_t1gwg_2",
-	panel: "_panel_t1gwg_69",
-	header: "_header_t1gwg_79",
-	title: "_title_t1gwg_101",
-	close: "_close_t1gwg_110",
-	description: "_description_t1gwg_138",
-	body: "_body_t1gwg_148"
+	dialog: "_dialog_hywey_2",
+	panel: "_panel_hywey_69",
+	header: "_header_hywey_79",
+	title: "_title_hywey_101",
+	close: "_close_hywey_110",
+	description: "_description_hywey_138",
+	body: "_body_hywey_148",
+	footer: "_footer_hywey_166"
 };
 //#endregion
 export { e as default };

package/dist/multi-select/multi-select.css

@@ -1 +1 @@
-@layer cascivo.component{._wrapper_nkk1l_2{width:100%;display:inline-block;position:relative}._trigger_nkk1l_8{width:100%;height:2.5rem;padding-inline:var(--cascivo-space-4);font-family:var(--cascivo-font-sans);font-size: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);justify-content:space-between;align-items:center;display:flex}._trigger_nkk1l_8:hover:not(:disabled){border-color:var(--cascivo-color-border-strong)}._trigger_nkk1l_8:focus-visible{border-color:var(--cascivo-color-accent);box-shadow:var(--cascivo-focus-ring);outline:none}._trigger_nkk1l_8:disabled{opacity:.5;cursor:not-allowed;background-color:var(--cascivo-color-bg-subtle)}._trigger_nkk1l_8[aria-expanded=true]{border-color:var(--cascivo-color-accent);box-shadow:var(--cascivo-focus-ring)}._trigger-label_nkk1l_47{text-overflow:ellipsis;white-space:nowrap;color:var(--cascivo-color-text-muted);overflow:hidden}._chevron_nkk1l_59{width:1rem;height:1rem;background-color:var(--cascivo-color-text-muted);transition:transform var(--cascivo-duration-150) var(--cascivo-ease-out);flex-shrink:0;margin-inline-start:var(--cascivo-space-2);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='M6 9l6 6 6-6'/%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='M6 9l6 6 6-6'/%3E%3C/svg%3E");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}._trigger_nkk1l_8[aria-expanded=true] ._chevron_nkk1l_59{transform:rotate(180deg)}._panel_nkk1l_79{position-area:block-end span-inline-end;position-try-fallbacks:--bottom-start, block-start span-inline-end;padding:var(--cascivo-space-1);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);min-width:12rem;max-height:16rem;box-shadow:var(--cascivo-shadow-md);opacity:0;transition:opacity var(--cascivo-motion-enter), translate var(--cascivo-motion-enter), display var(--cascivo-motion-enter) allow-discrete, overlay var(--cascivo-motion-enter) allow-discrete;flex-direction:column;margin-block-start:var(--cascivo-space-1);display:flex;overflow:hidden;translate:0 -.25rem}._panel_nkk1l_79:popover-open{opacity:1;translate:0}@starting-style{._panel_nkk1l_79:popover-open{opacity:0;translate:0 -.25rem}}._search-row_nkk1l_117{padding-block-end:var(--cascivo-space-1)}._search_nkk1l_117{width:100%;height:2rem;padding-inline:var(--cascivo-space-3);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);outline:none}._search_nkk1l_117:focus{border-color:var(--cascivo-color-accent)}._options_nkk1l_138{flex:1;overflow-y:auto}._option_nkk1l_138{align-items:center;gap:var(--cascivo-space-2);padding-block:var(--cascivo-space-1-5);padding-inline:var(--cascivo-space-2);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);border-radius:var(--cascivo-radius-item);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}._option_nkk1l_138[data-active]{background-color:var(--cascivo-color-bg-subtle)}._option_nkk1l_138[data-disabled]{opacity:.5;cursor:not-allowed}._checkbox_nkk1l_166{border:1.5px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-indicator);background-color:var(--cascivo-color-surface);width:1rem;height:1rem;transition:background-color var(--cascivo-duration-100) var(--cascivo-ease-out);flex-shrink:0}._option_nkk1l_138[data-selected] ._checkbox_nkk1l_166{background-color:var(--cascivo-color-accent);border-color:var(--cascivo-color-accent)}._no-results_nkk1l_181{padding-block:var(--cascivo-space-3);padding-inline:var(--cascivo-space-2);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-muted);text-align:center}}
+@layer cascivo.component{._wrapper_1fi6e_2{min-inline-size:0;width:100%;display:inline-block;position:relative}._trigger_1fi6e_12{width:100%;height:2.5rem;padding-inline:var(--cascivo-space-4);font-family:var(--cascivo-font-sans);font-size: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);justify-content:space-between;align-items:center;display:flex}._trigger_1fi6e_12:hover:not(:disabled){border-color:var(--cascivo-color-border-strong)}._trigger_1fi6e_12:focus-visible{border-color:var(--cascivo-color-accent);box-shadow:var(--cascivo-focus-ring);outline:none}._trigger_1fi6e_12:disabled{opacity:.5;cursor:not-allowed;background-color:var(--cascivo-color-bg-subtle)}._trigger_1fi6e_12[aria-expanded=true]{border-color:var(--cascivo-color-accent);box-shadow:var(--cascivo-focus-ring)}._trigger-label_1fi6e_51{text-overflow:ellipsis;white-space:nowrap;color:var(--cascivo-color-text-muted);overflow:hidden}._chevron_1fi6e_63{width:1rem;height:1rem;background-color:var(--cascivo-color-text-muted);transition:transform var(--cascivo-duration-150) var(--cascivo-ease-out);flex-shrink:0;margin-inline-start:var(--cascivo-space-2);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='M6 9l6 6 6-6'/%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='M6 9l6 6 6-6'/%3E%3C/svg%3E");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}._trigger_1fi6e_12[aria-expanded=true] ._chevron_1fi6e_63{transform:rotate(180deg)}._panel_1fi6e_83{position-area:block-end span-inline-end;position-try-fallbacks:--bottom-start, block-start span-inline-end;padding:var(--cascivo-space-1);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);min-width:12rem;max-height:16rem;box-shadow:var(--cascivo-shadow-md);opacity:0;transition:opacity var(--cascivo-motion-enter), translate var(--cascivo-motion-enter), display var(--cascivo-motion-enter) allow-discrete, overlay var(--cascivo-motion-enter) allow-discrete;flex-direction:column;margin-block-start:var(--cascivo-space-1);overflow:hidden;translate:0 -.25rem}._panel_1fi6e_83:popover-open{opacity:1;display:flex;translate:0}@starting-style{._panel_1fi6e_83:popover-open{opacity:0;translate:0 -.25rem}}._search-row_1fi6e_128{padding-block-end:var(--cascivo-space-1)}._search_1fi6e_128{width:100%;height:2rem;padding-inline:var(--cascivo-space-3);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);outline:none}._search_1fi6e_128:focus{border-color:var(--cascivo-color-accent)}._options_1fi6e_149{flex:1;overflow-y:auto}._option_1fi6e_149{align-items:center;gap:var(--cascivo-space-2);padding-block:var(--cascivo-space-1-5);padding-inline:var(--cascivo-space-2);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);border-radius:var(--cascivo-radius-item);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}._option_1fi6e_149[data-active]{background-color:var(--cascivo-color-bg-subtle)}._option_1fi6e_149[data-disabled]{opacity:.5;cursor:not-allowed}._checkbox_1fi6e_177{border:1.5px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-indicator);background-color:var(--cascivo-color-surface);width:1rem;height:1rem;transition:background-color var(--cascivo-duration-100) var(--cascivo-ease-out);flex-shrink:0}._option_1fi6e_149[data-selected] ._checkbox_1fi6e_177{background-color:var(--cascivo-color-accent);border-color:var(--cascivo-color-accent)}._no-results_1fi6e_192{padding-block:var(--cascivo-space-3);padding-inline:var(--cascivo-space-2);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-muted);text-align:center}}

package/dist/multi-select/multi-select.js

@@ -2,98 +2,98 @@
 
 import { usePopover as e } from "../popover/use-popover.js";
 import t from "./multi-select.module.js";
-import { cn as n, useComputed as r, useSignal as i, useSignalEffect as a, useSignals as o } 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 { useRef as d } from "react";
+import { cn as n, focusElement as r, useComputed as i, useSignal as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
+import { useRef as c } from "react";
+import { builtin as l, t as u } from "@cascivo/i18n";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region ../components/src/multi-select/multi-select.tsx
-function f({ options: f, value: p, onValueChange: m, placeholder: h, disabled: g = !1, labels: _, className: v, ...y }) {
-	o();
-	let b = e({ placement: "bottom" }), x = i(""), S = i(-1), C = d(null), w = d(null), T = r(() => {
-		let e = x.value.toLowerCase();
-		return e ? f.filter((t) => t.label.toLowerCase().includes(e)) : f;
+function p({ options: p, value: m, onValueChange: h, placeholder: g, disabled: _ = !1, labels: v, className: y, ...b }) {
+	s();
+	let x = e({ placement: "bottom" }), S = a(""), C = a(-1), w = c(null), T = c(null), E = i(() => {
+		let e = S.value.toLowerCase();
+		return e ? p.filter((t) => t.label.toLowerCase().includes(e)) : p;
 	});
-	a(() => {
-		b.isOpen.value ? (S.value = -1, setTimeout(() => w.current?.focus(), 0)) : x.value = "";
-	}), a(() => {
-		let e = C.current;
-		if (!e || !b.isOpen.value) return;
+	o(() => {
+		x.isOpen.value ? (C.value = -1, setTimeout(() => r(T.current), 0)) : S.value = "";
+	}), o(() => {
+		let e = w.current;
+		if (!e || !x.isOpen.value) return;
 		let t = (e) => {
-			let t = T.value;
-			if (e.key === "ArrowDown") e.preventDefault(), S.value = Math.min(S.value + 1, t.length - 1);
-			else if (e.key === "ArrowUp") e.preventDefault(), S.value = Math.max(S.value - 1, -1);
+			let t = E.value;
+			if (e.key === "ArrowDown") e.preventDefault(), C.value = Math.min(C.value + 1, t.length - 1);
+			else if (e.key === "ArrowUp") e.preventDefault(), C.value = Math.max(C.value - 1, -1);
 			else if (e.key === " " || e.key === "Enter") {
-				let n = t[S.value];
-				n && !n.disabled && (e.preventDefault(), E(n.value));
-			} else e.key === "Escape" && b.close();
+				let n = t[C.value];
+				n && !n.disabled && (e.preventDefault(), D(n.value));
+			} else e.key === "Escape" && x.close();
 		};
 		return e.addEventListener("keydown", t), () => e.removeEventListener("keydown", t);
 	});
-	function E(e) {
-		p.includes(e) ? m(p.filter((t) => t !== e)) : m([...p, e]);
+	function D(e) {
+		m.includes(e) ? h(m.filter((t) => t !== e)) : h([...m, e]);
 	}
-	let D = p.length === 0 ? h ?? _?.placeholder ?? c(s.multiSelect.placeholder) : _?.selected ? _.selected(p.length) : c(s.multiSelect.selected, { count: String(p.length) }), O = _?.search ?? c(s.multiSelect.search), k = _?.noResults ?? c(s.multiSelect.noResults);
-	return /* @__PURE__ */ u("div", {
-		className: n(t.wrapper, v),
-		...y,
-		children: [/* @__PURE__ */ u("button", {
-			ref: b.triggerRef,
+	let O = m.length === 0 ? g ?? v?.placeholder ?? u(l.multiSelect.placeholder) : v?.selected ? v.selected(m.length) : u(l.multiSelect.selected, { count: String(m.length) }), k = v?.search ?? u(l.multiSelect.search), A = v?.noResults ?? u(l.multiSelect.noResults);
+	return /* @__PURE__ */ f("div", {
+		className: n(t.wrapper, y),
+		...b,
+		children: [/* @__PURE__ */ f("button", {
+			ref: x.triggerRef,
 			type: "button",
 			className: t.trigger,
 			"aria-haspopup": "listbox",
-			"aria-expanded": b.isOpen.value,
-			disabled: g,
-			style: { anchorName: b.anchorName },
-			onClick: () => b.toggle(),
-			children: [/* @__PURE__ */ l("span", {
+			"aria-expanded": x.isOpen.value,
+			disabled: _,
+			style: { anchorName: x.anchorName },
+			onClick: () => x.toggle(),
+			children: [/* @__PURE__ */ d("span", {
 				className: t["trigger-label"],
-				children: D
-			}), /* @__PURE__ */ l("span", {
+				children: O
+			}), /* @__PURE__ */ d("span", {
 				className: t.chevron,
 				"aria-hidden": "true"
 			})]
-		}), /* @__PURE__ */ u("div", {
-			ref: b.popoverRef,
+		}), /* @__PURE__ */ f("div", {
+			ref: x.popoverRef,
 			popover: "auto",
 			className: t.panel,
-			style: { positionAnchor: b.anchorName },
+			style: { positionAnchor: x.anchorName },
 			tabIndex: -1,
-			children: [/* @__PURE__ */ l("div", {
+			children: [/* @__PURE__ */ d("div", {
 				className: t["search-row"],
-				children: /* @__PURE__ */ l("input", {
-					ref: w,
+				children: /* @__PURE__ */ d("input", {
+					ref: T,
 					type: "search",
 					className: t.search,
-					placeholder: O,
-					value: x.value,
+					placeholder: k,
+					value: S.value,
 					onChange: (e) => {
-						x.value = e.currentTarget.value, S.value = -1;
+						S.value = e.currentTarget.value, C.value = -1;
 					}
 				})
-			}), /* @__PURE__ */ l("div", {
-				ref: C,
+			}), /* @__PURE__ */ d("div", {
+				ref: w,
 				role: "listbox",
 				"aria-multiselectable": "true",
-				"aria-label": _?.label ?? c(s.multiSelect.label),
+				"aria-label": v?.label ?? u(l.multiSelect.label),
 				className: t.options,
-				children: T.value.length === 0 ? /* @__PURE__ */ l("div", {
+				children: E.value.length === 0 ? /* @__PURE__ */ d("div", {
 					className: t["no-results"],
-					children: k
-				}) : T.value.map((e, n) => /* @__PURE__ */ u("div", {
+					children: A
+				}) : E.value.map((e, n) => /* @__PURE__ */ f("div", {
 					role: "option",
-					"aria-selected": p.includes(e.value),
+					"aria-selected": m.includes(e.value),
 					"aria-disabled": e.disabled,
-					"data-active": n === S.value ? "" : void 0,
-					"data-selected": p.includes(e.value) ? "" : void 0,
+					"data-active": n === C.value ? "" : void 0,
+					"data-selected": m.includes(e.value) ? "" : void 0,
 					"data-disabled": e.disabled ? "" : void 0,
 					className: t.option,
 					onMouseDown: (t) => {
-						t.preventDefault(), e.disabled || E(e.value);
+						t.preventDefault(), e.disabled || D(e.value);
 					},
 					onMouseEnter: () => {
-						S.value = n;
+						C.value = n;
 					},
-					children: [/* @__PURE__ */ l("span", {
+					children: [/* @__PURE__ */ d("span", {
 						className: t.checkbox,
 						"aria-hidden": "true"
 					}), e.label]
@@ -103,4 +103,4 @@ function f({ options: f, value: p, onValueChange: m, placeholder: h, disabled: g
 	});
 }
 //#endregion
-export { f as MultiSelect };
+export { p as MultiSelect };

package/dist/multi-select/multi-select.module.js

@@ -2,17 +2,17 @@
 
 import './multi-select.css';
 var e = {
-	wrapper: "_wrapper_nkk1l_2",
-	trigger: "_trigger_nkk1l_8",
-	"trigger-label": "_trigger-label_nkk1l_47",
-	chevron: "_chevron_nkk1l_59",
-	panel: "_panel_nkk1l_79",
-	"search-row": "_search-row_nkk1l_117",
-	search: "_search_nkk1l_117",
-	options: "_options_nkk1l_138",
-	option: "_option_nkk1l_138",
-	checkbox: "_checkbox_nkk1l_166",
-	"no-results": "_no-results_nkk1l_181"
+	wrapper: "_wrapper_1fi6e_2",
+	trigger: "_trigger_1fi6e_12",
+	"trigger-label": "_trigger-label_1fi6e_51",
+	chevron: "_chevron_1fi6e_63",
+	panel: "_panel_1fi6e_83",
+	"search-row": "_search-row_1fi6e_128",
+	search: "_search_1fi6e_128",
+	options: "_options_1fi6e_149",
+	option: "_option_1fi6e_149",
+	checkbox: "_checkbox_1fi6e_177",
+	"no-results": "_no-results_1fi6e_192"
 };
 //#endregion
 export { e as default };

package/dist/native-select/native-select.js

@@ -2,36 +2,38 @@
 
 import e from "./native-select.module.js";
 import { cn as t } from "@cascivo/core";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region ../components/src/native-select/native-select.tsx
-function i({ options: i, children: a, size: o = "md", invalid: s, disabled: c, placeholder: l, value: u, defaultValue: d, className: f, ...p }) {
-	let m = u !== void 0, h = l !== void 0;
-	return /* @__PURE__ */ r("div", {
+var a = n(function({ options: n, children: a, size: o = "md", invalid: s, disabled: c, placeholder: l, value: u, defaultValue: d, className: f, ...p }, m) {
+	let h = u !== void 0, g = l !== void 0;
+	return /* @__PURE__ */ i("div", {
 		className: t(e.root, f),
 		"data-size": o,
 		"data-invalid": s || void 0,
-		children: [/* @__PURE__ */ r("select", {
+		children: [/* @__PURE__ */ i("select", {
+			ref: m,
 			className: e.select,
 			disabled: c,
 			"aria-invalid": s || void 0,
 			value: u,
-			defaultValue: !m && h ? d ?? "" : d,
+			defaultValue: !h && g ? d ?? "" : d,
 			...p,
-			children: [h && /* @__PURE__ */ n("option", {
+			children: [g && /* @__PURE__ */ r("option", {
 				value: "",
 				disabled: !0,
 				hidden: !0,
 				children: l
-			}), i ? i.map((e) => /* @__PURE__ */ n("option", {
+			}), n ? n.map((e) => /* @__PURE__ */ r("option", {
 				value: e.value,
 				disabled: e.disabled,
 				children: e.label
 			}, e.value)) : a]
-		}), /* @__PURE__ */ n("span", {
+		}), /* @__PURE__ */ r("span", {
 			className: e.chevron,
 			"aria-hidden": "true"
 		})]
 	});
-}
+});
 //#endregion
-export { i as NativeSelect };
+export { a as NativeSelect };