@cascivo/react 0.14.0 → 0.16.0

package/dist/button-group/button-group.js

@@ -1,23 +1,23 @@
 "use client";
 
 import e from "./button-group.module.js";
-import { cn as t } from "@cascivo/core";
-import { forwardRef as n } from "react";
+import { forwardRef as t } from "react";
+import { cn as n } from "@cascivo/core";
 import { jsx as r } from "react/jsx-runtime";
 //#region ../components/src/button-group/button-group.tsx
 function i(e) {
 	return Array.from(e.querySelectorAll("button, a[href], [tabindex]")).filter((e) => !e.hasAttribute("disabled") && e.getAttribute("aria-disabled") !== "true");
 }
-var a = n(function({ orientation: n = "horizontal", size: a = "md", roving: o = !1, loop: s = !1, className: c, onKeyDown: l, children: u, ...d }, f) {
+var a = t(function({ orientation: t = "horizontal", size: a = "md", roving: o = !1, loop: s = !1, className: c, onKeyDown: l, children: u, ...d }, f) {
 	return /* @__PURE__ */ r("div", {
 		role: "group",
-		"data-orientation": n,
+		"data-orientation": t,
 		"data-size": a,
-		className: t(e.buttonGroup, c),
+		className: n(e.buttonGroup, c),
 		ref: f,
 		onKeyDown: (e) => {
 			if (l?.(e), !o) return;
-			let t = n === "horizontal", r = t ? "ArrowRight" : "ArrowDown", a = t ? "ArrowLeft" : "ArrowUp";
+			let n = t === "horizontal", r = n ? "ArrowRight" : "ArrowDown", a = n ? "ArrowLeft" : "ArrowUp";
 			if (![
 				r,
 				a,

package/dist/button-group/button-group.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './button-group.css';
 var e = { buttonGroup: "_buttonGroup_3e81x_2" };
 //#endregion

package/dist/calendar/calendar.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './calendar.css';
 var e = {
 	calendar: "_calendar_7pqxh_2",

package/dist/card/card.js

@@ -1,7 +1,5 @@
-"use client";
-
 import e from "./card.module.js";
-import { cn as t } from "@cascivo/core";
+import { cn as t } from "@cascivo/core/pure";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region ../components/src/card/card.tsx
 function i({ variant: r = "default", padding: i = "md", className: a, children: o, ...s }) {

package/dist/card/card.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './card.css';
 var e = {
 	card: "_card_ssezx_2",

package/dist/carousel/carousel.js

@@ -1,8 +1,8 @@
 "use client";
 
 import e from "./carousel.module.js";
-import { cn as t, useControllableSignal as n, useRovingFocus as r, useSignalEffect as i, useSignals as a } from "@cascivo/core";
-import { useId as o, useRef as s } from "react";
+import { useId as t, useRef as n } from "react";
+import { cn as r, useControllableSignal as i, useRovingFocus as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
 import { builtin as c, t as l } from "@cascivo/i18n";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region ../components/src/carousel/carousel.tsx
@@ -10,16 +10,16 @@ function f(e, t) {
 	return t || (e == null ? [] : Array.isArray(e) ? e : [e]);
 }
 function p({ children: p, slides: m, index: h, defaultIndex: g, onIndexChange: _, loop: v = !1, className: y, labels: b }) {
-	a();
-	let x = o(), S = f(p, m), C = S.length, [w, T] = n({
+	s();
+	let x = t(), S = f(p, m), C = S.length, [w, T] = i({
 		value: h,
 		defaultValue: g ?? 0,
 		onChange: _
-	}), E = s(null), D = s([]), O = s(!1), { getItemProps: k, setActiveIndex: A } = r({
+	}), E = n(null), D = n([]), O = n(!1), { getItemProps: k, setActiveIndex: A } = a({
 		orientation: "horizontal",
 		loop: v
 	});
-	i(() => {
+	o(() => {
 		let e = E.current;
 		if (!e) return;
 		let t = () => {
@@ -42,7 +42,7 @@ function p({ children: p, slides: m, index: h, defaultIndex: g, onIndexChange: _
 		}, 400)), T(t), A(t);
 	}, M = b?.region ?? l(c.carousel.region), N = b?.previous ?? l(c.carousel.previous), P = b?.next ?? l(c.carousel.next);
 	return /* @__PURE__ */ d("section", {
-		className: t(e.carousel, y),
+		className: r(e.carousel, y),
 		"aria-roledescription": "carousel",
 		"aria-label": M,
 		children: [/* @__PURE__ */ d("div", {
@@ -50,7 +50,7 @@ function p({ children: p, slides: m, index: h, defaultIndex: g, onIndexChange: _
 			children: [
 				/* @__PURE__ */ u("button", {
 					type: "button",
-					className: t(e.nav, e.prev),
+					className: r(e.nav, e.prev),
 					"aria-label": N,
 					"aria-controls": `${x}-track`,
 					disabled: !v && w.value <= 0,
@@ -91,7 +91,7 @@ function p({ children: p, slides: m, index: h, defaultIndex: g, onIndexChange: _
 				}),
 				/* @__PURE__ */ u("button", {
 					type: "button",
-					className: t(e.nav, e.next),
+					className: r(e.nav, e.next),
 					"aria-label": P,
 					"aria-controls": `${x}-track`,
 					disabled: !v && w.value >= C - 1,

package/dist/carousel/carousel.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './carousel.css';
 var e = {
 	carousel: "_carousel_1dvrl_2",

package/dist/chat-bubble/chat-bubble.js

@@ -1,5 +1,3 @@
-"use client";
-
 import e from "./chat-bubble.module.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region ../components/src/chat-bubble/chat-bubble.tsx

package/dist/chat-bubble/chat-bubble.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './chat-bubble.css';
 var e = {
 	bubble: "_bubble_ykkyv_2",

package/dist/checkbox/checkbox.js

@@ -1,22 +1,22 @@
 "use client";
 
 import e from "./checkbox.module.js";
-import { cn as t, composeRefs as n, useEffectPropSignal as r, useSignalEffect as i } from "@cascivo/core";
-import { forwardRef as a, useRef as o } from "react";
+import { forwardRef as t, useRef as n } from "react";
+import { cn as r, composeRefs as i, useEffectPropSignal as a, useSignalEffect as o } from "@cascivo/core";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region ../components/src/checkbox/checkbox.tsx
-var l = a(function({ label: a, indeterminate: l = !1, className: u, id: d, disabled: f, ...p }, m) {
-	let h = o(null), g = r(l);
-	i(() => {
+var l = t(function({ label: t, indeterminate: l = !1, className: u, id: d, disabled: f, ...p }, m) {
+	let h = n(null), g = a(l);
+	o(() => {
 		h.current && (h.current.indeterminate = g.value);
 	});
-	let _ = d ?? (a ? `cascade-checkbox-${a.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+	let _ = d ?? (t ? `cascade-checkbox-${t.toLowerCase().replace(/\s+/g, "-")}` : void 0);
 	return /* @__PURE__ */ c("label", {
-		className: t(e.wrapper, u),
+		className: r(e.wrapper, u),
 		"data-disabled": f || void 0,
 		children: [
 			/* @__PURE__ */ s("input", {
-				ref: n(m, h),
+				ref: i(m, h),
 				id: _,
 				type: "checkbox",
 				className: e.input,
@@ -27,9 +27,9 @@ var l = a(function({ label: a, indeterminate: l = !1, className: u, id: d, disab
 				className: e.control,
 				"aria-hidden": "true"
 			}),
-			a && /* @__PURE__ */ s("span", {
+			t && /* @__PURE__ */ s("span", {
 				className: e.label,
-				children: a
+				children: t
 			})
 		]
 	});

package/dist/checkbox/checkbox.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './checkbox.css';
 var e = {
 	wrapper: "_wrapper_tw120_2",

package/dist/checkbox-card/checkbox-card.js

@@ -1,13 +1,13 @@
 "use client";
 
 import e from "./checkbox-card.module.js";
-import { cn as t } from "@cascivo/core";
-import { forwardRef as n } from "react";
+import { forwardRef as t } from "react";
+import { cn as n } from "@cascivo/core";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region ../components/src/checkbox-card/checkbox-card.tsx
-var a = n(function({ title: n, description: a, checked: o, defaultChecked: s, disabled: c, onCheckedChange: l, className: u, ...d }, f) {
+var a = t(function({ title: t, description: a, checked: o, defaultChecked: s, disabled: c, onCheckedChange: l, className: u, ...d }, f) {
 	return /* @__PURE__ */ i("label", {
-		className: t(e.card, u),
+		className: n(e.card, u),
 		"data-disabled": c || void 0,
 		children: [
 			/* @__PURE__ */ r("input", {
@@ -37,7 +37,7 @@ var a = n(function({ title: n, description: a, checked: o, defaultChecked: s, di
 				className: e.body,
 				children: [/* @__PURE__ */ r("span", {
 					className: e.title,
-					children: n
+					children: t
 				}), a && /* @__PURE__ */ r("span", {
 					className: e.description,
 					children: a

package/dist/checkbox-card/checkbox-card.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './checkbox-card.css';
 var e = {
 	card: "_card_102u6_2",

package/dist/code/code.js

@@ -1,7 +1,5 @@
-"use client";
-
 import e from "./code.module.js";
-import { cn as t } from "@cascivo/core";
+import { cn as t } from "@cascivo/core/pure";
 import { jsx as n } from "react/jsx-runtime";
 //#region ../components/src/code/code.tsx
 function r({ size: r = "md", className: i, children: a, ...o }) {

package/dist/code/code.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './code.css';
 var e = { code: "_code_hxmy6_2" };
 //#endregion

package/dist/code-snippet/code-snippet.module.js

@@ -1,5 +1,3 @@
-"use client";
-
 import './code-snippet.css';
 var e = {
 	root: "_root_4lyzf_2",

package/dist/code-snippet/highlight.js

@@ -1,5 +1,3 @@
-"use client";
-
 //#region ../components/src/code-snippet/highlight.ts
 function e(e) {
 	return e.map(([e, t]) => ({

package/dist/collapsible/collapsible.css

@@ -1 +1 @@
-@layer cascivo.component{._root_j549b_2{flex-direction:column;display:flex}._trigger_j549b_7{justify-content:space-between;align-items:center;gap:var(--cascivo-space-3);inline-size:100%;padding:var(--cascivo-space-3);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);text-align:start;color:var(--cascivo-color-text);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-control);cursor:pointer;background:0 0;display:flex}._trigger_j549b_7:hover:not(:disabled){background-color:var(--cascivo-color-bg-subtle)}._trigger_j549b_7:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._trigger_j549b_7:disabled{opacity:.5;cursor:not-allowed}._content_j549b_39{visibility:hidden;color:var(--cascivo-color-text);transition:grid-template-rows var(--cascivo-duration-200) var(--cascivo-ease-out), visibility var(--cascivo-duration-200) var(--cascivo-ease-out);grid-template-rows:0fr;display:grid}._content_j549b_39[data-state=open]{visibility:visible;grid-template-rows:1fr}@starting-style{._content_j549b_39[data-state=open]{grid-template-rows:0fr}}._contentInner_j549b_58{font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-relaxed);overflow:hidden}._content_j549b_39[data-state=open] ._contentInner_j549b_58{padding-block:var(--cascivo-space-3)}}@media (prefers-reduced-motion:reduce){._content_j549b_39{transition:none}}@media (forced-colors:active){._trigger_j549b_7:focus-visible{outline-offset:2px;outline:2px solid highlight}}
+@layer cascivo.component{._root_13r7c_2{display:block}._trigger_13r7c_6{justify-content:space-between;align-items:center;gap:var(--cascivo-space-3);inline-size:100%;padding:var(--cascivo-space-3);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);text-align:start;color:var(--cascivo-color-text);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-control);cursor:pointer;background:0 0;list-style:none;display:flex}._trigger_13r7c_6::-webkit-details-marker{display:none}._trigger_13r7c_6:hover:not([aria-disabled=true]){background-color:var(--cascivo-color-bg-subtle)}._trigger_13r7c_6:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._trigger_13r7c_6[aria-disabled=true]{opacity:.5;cursor:not-allowed}._root_13r7c_2::details-content{block-size:0;color:var(--cascivo-color-text);transition:block-size var(--cascivo-duration-200) var(--cascivo-ease-out), content-visibility var(--cascivo-duration-200) allow-discrete;overflow:hidden}._root_13r7c_2[open]::details-content{block-size:auto;block-size:calc-size(auto, size)}._content_13r7c_69{padding-block:var(--cascivo-space-3);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-relaxed)}}@media (prefers-reduced-motion:reduce){._root_13r7c_2::details-content{transition:none}}@media (forced-colors:active){._trigger_13r7c_6:focus-visible{outline-offset:2px;outline:2px solid highlight}}

package/dist/collapsible/collapsible.js

@@ -1,42 +1,47 @@
 "use client";
 
 import e from "./collapsible.module.js";
-import { cn as t, useControllableSignal as n, useSignals as r } from "@cascivo/core";
-import { useId as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useId as t, useRef as n } from "react";
+import { cn as r, useControllableSignal as i, useSignalEffect as a, useSignals as o } from "@cascivo/core";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region ../components/src/collapsible/collapsible.tsx
-function s({ open: s, defaultOpen: c = !1, onOpenChange: l, trigger: u, disabled: d = !1, className: f, children: p }) {
-	r();
-	let [m, h] = n({
-		...s === void 0 ? {} : { value: s },
-		defaultValue: c,
-		...l ? { onChange: l } : {}
-	}), g = i(), _ = `${g}-content`, v = `${g}-trigger`, y = m.value;
-	return /* @__PURE__ */ o("div", {
-		"data-state": y ? "open" : "closed",
-		className: t(e.root, f),
-		children: [/* @__PURE__ */ a("button", {
-			type: "button",
-			id: v,
-			"aria-expanded": y,
-			"aria-controls": _,
-			disabled: d,
-			"data-state": y ? "open" : "closed",
+function l({ open: l, defaultOpen: u = !1, onOpenChange: d, trigger: f, disabled: p = !1, className: m, children: h }) {
+	o();
+	let [g, _] = i({
+		...l === void 0 ? {} : { value: l },
+		defaultValue: u,
+		...d ? { onChange: d } : {}
+	}), v = t(), y = `${v}-content`, b = `${v}-trigger`, x = n(null), S = g.value;
+	return a(() => {
+		let e = x.current;
+		e && e.open !== g.value && (e.open = g.value);
+	}), /* @__PURE__ */ c("details", {
+		ref: x,
+		open: S,
+		"data-state": S ? "open" : "closed",
+		className: r(e.root, m),
+		onToggle: (e) => {
+			let t = e.currentTarget;
+			t.open !== g.value && _(t.open), t.open !== g.value && (t.open = g.value);
+		},
+		children: [/* @__PURE__ */ s("summary", {
+			id: b,
+			"aria-controls": y,
+			...p ? { "aria-disabled": !0 } : {},
+			"data-state": S ? "open" : "closed",
 			className: e.trigger,
-			onClick: () => h(!y),
-			children: u
-		}), /* @__PURE__ */ a("div", {
-			id: _,
+			onClick: (e) => {
+				p && e.preventDefault();
+			},
+			children: f
+		}), /* @__PURE__ */ s("div", {
+			id: y,
 			role: "region",
-			"aria-labelledby": v,
-			"data-state": y ? "open" : "closed",
+			"aria-labelledby": b,
 			className: e.content,
-			children: /* @__PURE__ */ a("div", {
-				className: e.contentInner,
-				children: p
-			})
+			children: h
 		})]
 	});
 }
 //#endregion
-export { s as Collapsible };
+export { l as Collapsible };

package/dist/collapsible/collapsible.module.js

@@ -1,11 +1,8 @@
-"use client";
-
 import './collapsible.css';
 var e = {
-	root: "_root_j549b_2",
-	trigger: "_trigger_j549b_7",
-	content: "_content_j549b_39",
-	contentInner: "_contentInner_j549b_58"
+	root: "_root_13r7c_2",
+	trigger: "_trigger_13r7c_6",
+	content: "_content_13r7c_69"
 };
 //#endregion
 export { e as default };

package/dist/color-picker/color-picker.js

@@ -1,8 +1,8 @@
 "use client";
 
 import e from "./color-picker.module.js";
-import { cn as t, useControllableSignal as n, useSignal as r, useSignalEffect as i, useSignals as a } from "@cascivo/core";
-import { useId as o, useRef as s } from "react";
+import { useId as t, useRef as n } from "react";
+import { cn as r, useControllableSignal as i, useSignal as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
 import { builtin as c, t as l } from "@cascivo/i18n";
 import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region ../components/src/color-picker/color-picker.tsx
@@ -74,12 +74,12 @@ function _({ h: e, s: t, l: n, a: r }) {
 	};
 }
 function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S = !0, label: C, disabled: w, size: T = "md", className: E, labels: D }) {
-	a();
-	let O = o(), [k, A] = n({
+	s();
+	let O = t(), [k, A] = i({
 		value: v,
 		defaultValue: y ?? "#3b82f6",
 		onChange: b
-	}), j = s(null), M = r(!1), N = g(m(k.value)), P = (e) => {
+	}), j = n(null), M = a(!1), N = g(m(k.value)), P = (e) => {
 		A(h(_(e), S));
 	}, F = (e, t) => {
 		let n = j.current;
@@ -92,7 +92,7 @@ function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S =
 			a: N.a
 		});
 	};
-	i(() => {
+	o(() => {
 		if (!M.value) return;
 		let e = (e) => F(e.clientX, e.clientY), t = () => {
 			M.value = !1;
@@ -125,7 +125,7 @@ function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S =
 		eyedropper: D?.eyedropper ?? l(c.colorPicker.eyedropper)
 	}, V = h(m(k.value), !1), H = `hsl(${N.h} 100% 50%)`;
 	return /* @__PURE__ */ f("div", {
-		className: t(e.picker, E),
+		className: r(e.picker, E),
 		"data-size": T,
 		"data-disabled": w || void 0,
 		children: [

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

@@ -1,5 +1,3 @@
-"use client";
-
 import './color-picker.css';
 var e = {
 	picker: "_picker_1ehlq_2",

package/dist/combobox/combobox.css

@@ -1 +1 @@
-@layer cascivo.component{._wrapper_11nor_2{gap:var(--cascivo-space-1);min-inline-size:0;font-family:var(--cascivo-font-sans);flex-direction:column;display:flex;position:relative}._label_11nor_14{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text)}._field_11nor_20{align-items:center;display:flex;position:relative}._trigger_11nor_26{inline-size:100%;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-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);cursor:pointer;text-align:start;transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);outline:none;justify-content:space-between;align-items:center;display:flex}._trigger_11nor_26:hover:not(:disabled){border-color:var(--cascivo-color-border-strong)}._trigger_11nor_26:focus-visible{border-color:var(--cascivo-color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--cascivo-color-accent) 20%, transparent)}._trigger_11nor_26:disabled{opacity:.5;cursor:not-allowed}._wrapper_11nor_2[data-size=sm] ._trigger_11nor_26{block-size:2rem}._wrapper_11nor_2[data-size=md] ._trigger_11nor_26{block-size:2.5rem}._wrapper_11nor_2[data-size=lg] ._trigger_11nor_26{block-size:3rem}._wrapper_11nor_2[data-state=error] ._trigger_11nor_26{border-color:var(--cascivo-color-danger)}._value_11nor_74{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._placeholder_11nor_80{color:var(--cascivo-color-text-subtle)}._chevron_11nor_84{border-inline-end:2px solid var(--cascivo-color-text-muted);border-block-end:2px solid var(--cascivo-color-text-muted);block-size:.75rem;inline-size:.75rem;transition:transform var(--cascivo-duration-150) var(--cascivo-ease-out);flex-shrink:0;margin-inline-start:var(--cascivo-space-2);display:inline-block;transform:rotate(45deg)}._wrapper_11nor_2[data-state=open] ._chevron_11nor_84{transform:rotate(-135deg)}._clear_11nor_100{cursor:pointer;min-block-size:1.5rem;min-inline-size:1.5rem;color:var(--cascivo-color-text-muted);font-size:var(--cascivo-text-xs);padding:var(--cascivo-space-1);border-radius:var(--cascivo-radius-control);background:0 0;border:none;outline:none;justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-inline-end:var(--cascivo-space-8)}._clear_11nor_100:hover{color:var(--cascivo-color-text)}._clear_11nor_100:focus-visible{box-shadow:0 0 0 2px var(--cascivo-color-accent)}._listbox_11nor_126{inline-size:100%;z-index:var(--cascivo-z-dropdown);background-color:var(--cascivo-color-surface-overlay);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);max-block-size:16rem;box-shadow:var(--cascivo-shadow-overlay);opacity:0;visibility:hidden;transition:opacity var(--cascivo-motion-enter), translate var(--cascivo-motion-enter), visibility var(--cascivo-motion-enter);position:absolute;inset-block-start:calc(100% + var(--cascivo-space-1));inset-inline-start:0;overflow-y:auto;translate:0 -.25rem}._listbox_11nor_126[data-state=open]{opacity:1;visibility:visible;translate:0}@starting-style{._listbox_11nor_126[data-state=open]{opacity:0;translate:0 -.25rem}}._searchWrapper_11nor_160{padding:var(--cascivo-space-2);border-block-end:1px solid var(--cascivo-color-border)}._search_11nor_160{inline-size:100%;padding-inline:var(--cascivo-space-2);padding-block:var(--cascivo-space-1);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_11nor_160:focus-visible{border-color:var(--cascivo-color-accent)}._option_11nor_182{padding-inline:var(--cascivo-space-3);padding-block:var(--cascivo-space-2);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);cursor:pointer;border-radius:var(--cascivo-radius-item)}._option_11nor_182[data-state=active]{background-color:var(--cascivo-color-bg-subtle)}._option_11nor_182[aria-selected=true]{background-color:color-mix(in srgb, var(--cascivo-color-accent) 12%, transparent);color:var(--cascivo-color-accent)}._option_11nor_182[data-disabled]{opacity:.4;cursor:not-allowed}._empty_11nor_205{padding:var(--cascivo-space-4);text-align:center;font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-muted)}._error_11nor_212{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-danger)}._hint_11nor_217{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-muted)}}
+@layer cascivo.component{._wrapper_bu0jy_2{gap:var(--cascivo-space-1);min-inline-size:0;font-family:var(--cascivo-font-sans);flex-direction:column;display:flex;position:relative}._label_bu0jy_14{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text)}._field_bu0jy_20{align-items:center;display:flex;position:relative}._trigger_bu0jy_26{inline-size:100%;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-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);cursor:pointer;text-align:start;transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);outline:none;justify-content:space-between;align-items:center;display:flex}._trigger_bu0jy_26:hover:not(:disabled){border-color:var(--cascivo-color-border-strong)}._trigger_bu0jy_26:focus-visible{border-color:var(--cascivo-color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--cascivo-color-accent) 20%, transparent)}._trigger_bu0jy_26:disabled{opacity:.5;cursor:not-allowed}._wrapper_bu0jy_2[data-size=sm] ._trigger_bu0jy_26{block-size:2rem}._wrapper_bu0jy_2[data-size=md] ._trigger_bu0jy_26{block-size:2.5rem}._wrapper_bu0jy_2[data-size=lg] ._trigger_bu0jy_26{block-size:3rem}._wrapper_bu0jy_2[data-state=error] ._trigger_bu0jy_26{border-color:var(--cascivo-color-destructive)}._value_bu0jy_74{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._placeholder_bu0jy_80{color:var(--cascivo-color-text-subtle)}._chevron_bu0jy_84{border-inline-end:2px solid var(--cascivo-color-text-muted);border-block-end:2px solid var(--cascivo-color-text-muted);block-size:.75rem;inline-size:.75rem;transition:transform var(--cascivo-duration-150) var(--cascivo-ease-out);flex-shrink:0;margin-inline-start:var(--cascivo-space-2);display:inline-block;transform:rotate(45deg)}._wrapper_bu0jy_2[data-state=open] ._chevron_bu0jy_84{transform:rotate(-135deg)}._clear_bu0jy_100{cursor:pointer;min-block-size:1.5rem;min-inline-size:1.5rem;color:var(--cascivo-color-text-muted);font-size:var(--cascivo-text-xs);padding:var(--cascivo-space-1);border-radius:var(--cascivo-radius-control);background:0 0;border:none;outline:none;justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-inline-end:var(--cascivo-space-8)}._clear_bu0jy_100:hover{color:var(--cascivo-color-text)}._clear_bu0jy_100:focus-visible{box-shadow:0 0 0 2px var(--cascivo-color-accent)}._listbox_bu0jy_126{inline-size:100%;z-index:var(--cascivo-z-dropdown);background-color:var(--cascivo-color-surface-overlay);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);max-block-size:16rem;box-shadow:var(--cascivo-shadow-overlay);opacity:0;visibility:hidden;transition:opacity var(--cascivo-motion-enter), translate var(--cascivo-motion-enter), visibility var(--cascivo-motion-enter);position:absolute;inset-block-start:calc(100% + var(--cascivo-space-1));inset-inline-start:0;overflow-y:auto;translate:0 -.25rem}._listbox_bu0jy_126[data-state=open]{opacity:1;visibility:visible;translate:0}@starting-style{._listbox_bu0jy_126[data-state=open]{opacity:0;translate:0 -.25rem}}._searchWrapper_bu0jy_160{padding:var(--cascivo-space-2);border-block-end:1px solid var(--cascivo-color-border)}._search_bu0jy_160{inline-size:100%;padding-inline:var(--cascivo-space-2);padding-block:var(--cascivo-space-1);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_bu0jy_160:focus-visible{border-color:var(--cascivo-color-accent)}._option_bu0jy_182{padding-inline:var(--cascivo-space-3);padding-block:var(--cascivo-space-2);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);cursor:pointer;border-radius:var(--cascivo-radius-item)}._option_bu0jy_182[data-state=active]{background-color:var(--cascivo-color-bg-subtle)}._option_bu0jy_182[aria-selected=true]{background-color:color-mix(in srgb, var(--cascivo-color-accent) 12%, transparent);color:var(--cascivo-color-accent)}._option_bu0jy_182[data-disabled]{opacity:.4;cursor:not-allowed}._empty_bu0jy_205{padding:var(--cascivo-space-4);text-align:center;font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-muted)}._error_bu0jy_212{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-destructive)}._hint_bu0jy_217{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-muted)}}

package/dist/combobox/combobox.js

@@ -1,24 +1,24 @@
 "use client";
 
 import e from "./combobox.module.js";
-import { cn as t, createMachine as n, focusElement as r, useMachine as i, useSignal as a, useSignalEffect as o, useSignals as s } from "@cascivo/core";
-import { useId as c, useRef as l } from "react";
+import { useId as t, useRef as n } from "react";
+import { cn as r, createMachine as i, focusElement as a, useMachine as o, useSignal as s, useSignalEffect 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";
 //#region ../components/src/combobox/combobox.tsx
-var m = n({
+var m = i({
 	initial: "closed",
 	states: {
 		closed: { on: { OPEN: "open" } },
 		open: { on: { CLOSE: "closed" } }
 	}
 });
-function h({ options: n, value: h, defaultValue: g, onValueChange: _, onChange: v, clearable: y = !1, searchable: b = !0, label: x, hint: S, error: C, size: w = "md", disabled: T = !1, labels: E, className: D, id: O }) {
-	s();
-	let [k, A] = i(m), j = c(), M = O ?? `cascade-combobox-${j}`, N = `${j}-listbox`, P = l(null), F = E?.placeholder ?? d(u.combobox.placeholder), I = E?.empty ?? d(u.combobox.empty), L = E?.clear ?? d(u.combobox.clear), R = E?.search ?? d(u.combobox.search), z = a(h ?? g);
+function h({ options: i, value: h, defaultValue: g, onValueChange: _, onChange: v, clearable: y = !1, searchable: b = !0, label: x, hint: S, error: C, size: w = "md", disabled: T = !1, labels: E, className: D, id: O }) {
+	l();
+	let [k, A] = o(m), j = t(), M = O ?? `cascade-combobox-${j}`, N = `${j}-listbox`, P = n(null), F = E?.placeholder ?? d(u.combobox.placeholder), I = E?.empty ?? d(u.combobox.empty), L = E?.clear ?? d(u.combobox.clear), R = E?.search ?? d(u.combobox.search), z = s(h ?? g);
 	h !== void 0 && (z.value = h);
-	let B = a(""), V = a(0), H = k.value === "open", U = n.filter((e) => !b || !B.value ? !0 : e.label.toLowerCase().includes(B.value.toLowerCase())), W = n.find((e) => e.value === z.value);
-	o(() => {
+	let B = s(""), V = s(0), H = k.value === "open", U = i.filter((e) => !b || !B.value ? !0 : e.label.toLowerCase().includes(B.value.toLowerCase())), W = i.find((e) => e.value === z.value);
+	c(() => {
 		if (!H) return;
 		let e = (e) => {
 			let t = document.getElementById(`${j}-root`);
@@ -27,7 +27,7 @@ function h({ options: n, value: h, defaultValue: g, onValueChange: _, onChange:
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
 	});
 	let G = () => {
-		T || (B.value = "", V.value = 0, A("OPEN"), setTimeout(() => r(P.current), 0));
+		T || (B.value = "", V.value = 0, A("OPEN"), setTimeout(() => a(P.current), 0));
 	}, K = () => {
 		A("CLOSE"), B.value = "";
 	}, q = _ ?? v, J = (e) => {
@@ -64,7 +64,7 @@ function h({ options: n, value: h, defaultValue: g, onValueChange: _, onChange:
 	}, $ = (e) => `${j}-option-${e}`;
 	return /* @__PURE__ */ p("div", {
 		id: `${j}-root`,
-		className: t(e.wrapper, D),
+		className: r(e.wrapper, D),
 		"data-state": C ? "error" : k.value,
 		"data-size": w,
 		children: [
@@ -90,7 +90,7 @@ function h({ options: n, value: h, defaultValue: g, onValueChange: _, onChange:
 					onKeyDown: Q,
 					onClick: H ? K : G,
 					children: [/* @__PURE__ */ f("span", {
-						className: t(e.value, W ? void 0 : e.placeholder),
+						className: r(e.value, W ? void 0 : e.placeholder),
 						children: W?.label ?? F
 					}), /* @__PURE__ */ f("span", {
 						className: e.chevron,

package/dist/combobox/combobox.module.js

@@ -1,22 +1,20 @@
-"use client";
-
 import './combobox.css';
 var e = {
-	wrapper: "_wrapper_11nor_2",
-	label: "_label_11nor_14",
-	field: "_field_11nor_20",
-	trigger: "_trigger_11nor_26",
-	value: "_value_11nor_74",
-	placeholder: "_placeholder_11nor_80",
-	chevron: "_chevron_11nor_84",
-	clear: "_clear_11nor_100",
-	listbox: "_listbox_11nor_126",
-	searchWrapper: "_searchWrapper_11nor_160",
-	search: "_search_11nor_160",
-	option: "_option_11nor_182",
-	empty: "_empty_11nor_205",
-	error: "_error_11nor_212",
-	hint: "_hint_11nor_217"
+	wrapper: "_wrapper_bu0jy_2",
+	label: "_label_bu0jy_14",
+	field: "_field_bu0jy_20",
+	trigger: "_trigger_bu0jy_26",
+	value: "_value_bu0jy_74",
+	placeholder: "_placeholder_bu0jy_80",
+	chevron: "_chevron_bu0jy_84",
+	clear: "_clear_bu0jy_100",
+	listbox: "_listbox_bu0jy_126",
+	searchWrapper: "_searchWrapper_bu0jy_160",
+	search: "_search_bu0jy_160",
+	option: "_option_bu0jy_182",
+	empty: "_empty_bu0jy_205",
+	error: "_error_bu0jy_212",
+	hint: "_hint_bu0jy_217"
 };
 //#endregion
 export { e as default };