@cascivo/react 0.3.4 → 0.3.7

package/dist/color-picker/color-picker.css

@@ -0,0 +1 @@
+@layer cascivo.component{._picker_1ehlq_2{gap:var(--cascivo-space-3);inline-size:fit-content;font-family:var(--cascivo-font-sans);flex-direction:column;display:flex}._picker_1ehlq_2[data-disabled]{opacity:.5;pointer-events:none}._picker_1ehlq_2[data-size=sm]{--cascivo-color-picker-area-size:9rem}._picker_1ehlq_2[data-size=md]{--cascivo-color-picker-area-size:12rem}._picker_1ehlq_2[data-size=lg]{--cascivo-color-picker-area-size:16rem}._label_1ehlq_27{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text);line-height:var(--cascivo-leading-snug)}._srOnly_1ehlq_34{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}._area_1ehlq_46{inline-size:var(--cascivo-color-picker-area-size,12rem);block-size:var(--cascivo-color-picker-area-size,12rem);border-radius:var(--cascivo-radius-md);cursor:crosshair;touch-action:none;background-image:linear-gradient(#0000,#000),linear-gradient(90deg,#fff,#0000);background-color:var(--cascivo-color-border);position:relative}._area_1ehlq_46:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._thumb_1ehlq_63{border-radius:var(--cascivo-radius-full);border:2px solid var(--cascivo-color-surface);block-size:.875rem;inline-size:.875rem;box-shadow:var(--cascivo-shadow-sm);pointer-events:none;position:absolute;transform:translate(-50%,-50%)}._sliders_1ehlq_74{gap:var(--cascivo-space-2);flex-direction:column;display:flex}._hue_1ehlq_80,._alpha_1ehlq_81{appearance:none;border-radius:var(--cascivo-radius-full);cursor:pointer;block-size:.75rem;inline-size:100%}:is(._hue_1ehlq_80,._alpha_1ehlq_81):focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}:is(._hue_1ehlq_80,._alpha_1ehlq_81)::-webkit-slider-thumb{appearance:none;border-radius:var(--cascivo-radius-full);background-color:var(--cascivo-color-surface);border:2px solid var(--cascivo-color-border-strong);block-size:1rem;inline-size:1rem;box-shadow:var(--cascivo-shadow-sm)}:is(._hue_1ehlq_80,._alpha_1ehlq_81)::-moz-range-thumb{border-radius:var(--cascivo-radius-full);background-color:var(--cascivo-color-surface);border:2px solid var(--cascivo-color-border-strong);block-size:1rem;inline-size:1rem;box-shadow:var(--cascivo-shadow-sm)}._hue_1ehlq_80{background-image:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}._alpha_1ehlq_81{background-color:#fff;background-image:linear-gradient(to right, transparent, var(--cascivo-color-picker-solid,#000)), conic-gradient(#0000 .25turn, #ccc 0 .5turn, #0000 0 .75turn, #ccc 0);background-size:100% 100%,.5rem .5rem}._presets_1ehlq_136{gap:var(--cascivo-space-2);flex-wrap:wrap;display:flex}._preset_1ehlq_136{border-radius:var(--cascivo-radius-sm);border:1px solid var(--cascivo-color-border);cursor:pointer;block-size:1.5rem;inline-size:1.5rem;padding:0}._preset_1ehlq_136:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._preset_1ehlq_136[aria-pressed=true]{outline:2px solid var(--cascivo-color-accent);outline-offset:2px}._row_1ehlq_161{align-items:center;gap:var(--cascivo-space-2);display:flex}._preview_1ehlq_167{border-radius:var(--cascivo-radius-sm);border:1px solid var(--cascivo-color-border);flex-shrink:0;block-size:1.75rem;inline-size:1.75rem}._text_1ehlq_175{min-inline-size:0;font-family:var(--cascivo-font-mono);font-size:var(--cascivo-text-sm);padding-block:var(--cascivo-space-1);padding-inline:var(--cascivo-space-2);color:var(--cascivo-color-text);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-control);flex:1}._text_1ehlq_175:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._eyedropper_1ehlq_193{block-size:1.75rem;inline-size:1.75rem;color:var(--cascivo-color-text);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-control);cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}._eyedropper_1ehlq_193:hover{background-color:var(--cascivo-color-bg-subtle)}._eyedropper_1ehlq_193:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}}@media (forced-colors:active){._area_1ehlq_46:focus-visible,._preset_1ehlq_136:focus-visible,._eyedropper_1ehlq_193:focus-visible{outline-offset:2px;outline:2px solid highlight}}

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

@@ -0,0 +1,268 @@
+"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 { builtin as o, t as s } from "@cascivo/i18n";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useId as d, useRef as f } from "react";
+//#region ../components/src/color-picker/color-picker.tsx
+function p(e, t, n) {
+	return Math.min(n, Math.max(t, e));
+}
+function m(e) {
+	let t = e.trim().replace(/^#/, "");
+	t.length === 3 && (t = t[0] + t[0] + t[1] + t[1] + t[2] + t[2]), t.length === 4 && (t = t[0] + t[0] + t[1] + t[1] + t[2] + t[2] + t[3] + t[3]);
+	let n = parseInt(t.slice(0, 2), 16), r = parseInt(t.slice(2, 4), 16), i = parseInt(t.slice(4, 6), 16), a = t.length >= 8 ? parseInt(t.slice(6, 8), 16) / 255 : 1;
+	return Number.isNaN(n) || Number.isNaN(r) || Number.isNaN(i) ? {
+		r: 0,
+		g: 0,
+		b: 0,
+		a: 1
+	} : {
+		r: n,
+		g: r,
+		b: i,
+		a
+	};
+}
+function h({ r: e, g: t, b: n, a: r }, i) {
+	let a = (e) => p(Math.round(e), 0, 255).toString(16).padStart(2, "0"), o = `#${a(e)}${a(t)}${a(n)}`;
+	return !i || r >= 1 ? o : o + a(r * 255);
+}
+function g({ r: e, g: t, b: n, a: r }) {
+	let i = e / 255, a = t / 255, o = n / 255, s = Math.max(i, a, o), c = Math.min(i, a, o), l = s - c, u = 0;
+	l !== 0 && (u = s === i ? (a - o) / l % 6 : s === a ? (o - i) / l + 2 : (i - a) / l + 4, u *= 60, u < 0 && (u += 360));
+	let d = (s + c) / 2, f = l === 0 ? 0 : l / (1 - Math.abs(2 * d - 1));
+	return {
+		h: u,
+		s: f * 100,
+		l: d * 100,
+		a: r
+	};
+}
+function _({ h: e, s: t, l: n, a: r }) {
+	let i = t / 100, a = n / 100, o = (1 - Math.abs(2 * a - 1)) * i, s = o * (1 - Math.abs(e / 60 % 2 - 1)), c = a - o / 2, l = 0, u = 0, d = 0;
+	return e < 60 ? [l, u, d] = [
+		o,
+		s,
+		0
+	] : e < 120 ? [l, u, d] = [
+		s,
+		o,
+		0
+	] : e < 180 ? [l, u, d] = [
+		0,
+		o,
+		s
+	] : e < 240 ? [l, u, d] = [
+		0,
+		s,
+		o
+	] : e < 300 ? [l, u, d] = [
+		s,
+		0,
+		o
+	] : [l, u, d] = [
+		o,
+		0,
+		s
+	], {
+		r: (l + c) * 255,
+		g: (u + c) * 255,
+		b: (d + c) * 255,
+		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 = d(), [k, A] = n({
+		value: v,
+		defaultValue: y ?? "#3b82f6",
+		onChange: b
+	}), j = f(null), M = r(!1), N = g(m(k.value)), P = (e) => {
+		A(h(_(e), S));
+	}, F = (e, t) => {
+		let n = j.current;
+		if (!n) return;
+		let r = n.getBoundingClientRect(), i = p((e - r.left) / r.width, 0, 1), a = p((t - r.top) / r.height, 0, 1);
+		P({
+			h: N.h,
+			s: i * 100,
+			l: (1 - a) * 100,
+			a: N.a
+		});
+	};
+	i(() => {
+		if (!M.value) return;
+		let e = (e) => F(e.clientX, e.clientY), t = () => {
+			M.value = !1;
+		};
+		return window.addEventListener("pointermove", e), window.addEventListener("pointerup", t), () => {
+			window.removeEventListener("pointermove", e), window.removeEventListener("pointerup", t);
+		};
+	});
+	let I = (e) => {
+		let t = e.shiftKey ? 10 : 2, { s: n, l: r } = N;
+		if (e.key === "ArrowLeft") n -= t;
+		else if (e.key === "ArrowRight") n += t;
+		else if (e.key === "ArrowUp") r += t;
+		else if (e.key === "ArrowDown") r -= t;
+		else return;
+		e.preventDefault(), P({
+			h: N.h,
+			s: p(n, 0, 100),
+			l: p(r, 0, 100),
+			a: N.a
+		});
+	}, L = (e, t) => {
+		!x || x.length === 0 || A(x[(t + e + x.length) % x.length]);
+	}, R = typeof window < "u" ? window.EyeDropper : void 0, z = () => {
+		R && new R().open().then((e) => A(e.sRGBHex));
+	}, B = {
+		hue: D?.hue ?? s(o.colorPicker.hue),
+		alpha: D?.alpha ?? s(o.colorPicker.alpha),
+		colorArea: D?.colorArea ?? s(o.colorPicker.colorArea),
+		eyedropper: D?.eyedropper ?? s(o.colorPicker.eyedropper)
+	}, V = h(m(k.value), !1), H = `hsl(${N.h} 100% 50%)`;
+	return /* @__PURE__ */ u("div", {
+		className: t(e.picker, E),
+		"data-size": T,
+		"data-disabled": w || void 0,
+		children: [
+			C && /* @__PURE__ */ l("span", {
+				className: e.label,
+				id: `${O}-label`,
+				children: C
+			}),
+			/* @__PURE__ */ l("div", {
+				ref: j,
+				className: e.area,
+				role: "slider",
+				"aria-label": B.colorArea,
+				"aria-valuetext": V,
+				"aria-disabled": w || void 0,
+				tabIndex: w ? -1 : 0,
+				style: { background: H },
+				onPointerDown: (e) => {
+					w || (e.preventDefault(), M.value = !0, F(e.clientX, e.clientY));
+				},
+				onKeyDown: I,
+				children: /* @__PURE__ */ l("span", {
+					className: e.thumb,
+					style: {
+						insetInlineStart: `${N.s}%`,
+						insetBlockStart: `${100 - N.l}%`,
+						backgroundColor: V
+					}
+				})
+			}),
+			/* @__PURE__ */ u("div", {
+				className: e.sliders,
+				children: [
+					/* @__PURE__ */ l("label", {
+						className: e.srOnly,
+						htmlFor: `${O}-hue`,
+						children: B.hue
+					}),
+					/* @__PURE__ */ l("input", {
+						id: `${O}-hue`,
+						className: e.hue,
+						type: "range",
+						min: 0,
+						max: 360,
+						step: 1,
+						value: Math.round(N.h),
+						disabled: w,
+						"aria-label": B.hue,
+						onChange: (e) => P({
+							h: Number(e.target.value),
+							s: N.s,
+							l: N.l,
+							a: N.a
+						})
+					}),
+					S && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("label", {
+						className: e.srOnly,
+						htmlFor: `${O}-alpha`,
+						children: B.alpha
+					}), /* @__PURE__ */ l("input", {
+						id: `${O}-alpha`,
+						className: e.alpha,
+						type: "range",
+						min: 0,
+						max: 1,
+						step: .01,
+						value: N.a,
+						disabled: w,
+						"aria-label": B.alpha,
+						style: { "--cascivo-color-picker-solid": V },
+						onChange: (e) => P({
+							h: N.h,
+							s: N.s,
+							l: N.l,
+							a: Number(e.target.value)
+						})
+					})] })
+				]
+			}),
+			x && x.length > 0 && /* @__PURE__ */ l("div", {
+				className: e.presets,
+				role: "group",
+				"aria-label": B.colorArea,
+				children: x.map((t, n) => /* @__PURE__ */ l("button", {
+					type: "button",
+					className: e.preset,
+					style: { backgroundColor: t },
+					"aria-label": t,
+					"aria-pressed": t.toLowerCase() === k.value.toLowerCase(),
+					disabled: w,
+					onClick: () => A(t),
+					onKeyDown: (e) => {
+						e.key === "ArrowRight" ? (e.preventDefault(), L(1, n)) : e.key === "ArrowLeft" && (e.preventDefault(), L(-1, n));
+					}
+				}, t))
+			}),
+			/* @__PURE__ */ u("div", {
+				className: e.row,
+				children: [
+					/* @__PURE__ */ l("span", {
+						className: e.preview,
+						style: { backgroundColor: k.value },
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ l("input", {
+						className: e.text,
+						type: "text",
+						value: k.value,
+						disabled: w,
+						"aria-label": C ?? B.colorArea,
+						onChange: (e) => A(e.target.value)
+					}),
+					R && /* @__PURE__ */ l("button", {
+						type: "button",
+						className: e.eyedropper,
+						"aria-label": B.eyedropper,
+						disabled: w,
+						onClick: z,
+						children: /* @__PURE__ */ l("svg", {
+							width: "16",
+							height: "16",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ l("path", {
+								d: "m2 22 1-1h3l9-9M3 21v-3l9-9m1.5 1.5-2-2M19 2l3 3-9 9-3-3z",
+								stroke: "currentColor",
+								strokeWidth: "2",
+								strokeLinecap: "round",
+								strokeLinejoin: "round"
+							})
+						})
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { v as ColorPicker };

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

@@ -0,0 +1,21 @@
+"use client";
+
+import './color-picker.css';
+var e = {
+	picker: "_picker_1ehlq_2",
+	label: "_label_1ehlq_27",
+	srOnly: "_srOnly_1ehlq_34",
+	area: "_area_1ehlq_46",
+	thumb: "_thumb_1ehlq_63",
+	sliders: "_sliders_1ehlq_74",
+	hue: "_hue_1ehlq_80",
+	alpha: "_alpha_1ehlq_81",
+	presets: "_presets_1ehlq_136",
+	preset: "_preset_1ehlq_136",
+	row: "_row_1ehlq_161",
+	preview: "_preview_1ehlq_167",
+	text: "_text_1ehlq_175",
+	eyedropper: "_eyedropper_1ehlq_193"
+};
+//#endregion
+export { e as default };

package/dist/combobox/combobox.css

@@ -0,0 +1 @@
+@layer cascivo.component{._wrapper_1ago2_2{gap:var(--cascivo-space-1);font-family:var(--cascivo-font-sans);flex-direction:column;display:flex;position:relative}._label_1ago2_10{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text)}._field_1ago2_16{align-items:center;display:flex;position:relative}._trigger_1ago2_22{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_1ago2_22:hover:not(:disabled){border-color:var(--cascivo-color-border-strong)}._trigger_1ago2_22: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_1ago2_22:disabled{opacity:.5;cursor:not-allowed}._wrapper_1ago2_2[data-size=sm] ._trigger_1ago2_22{block-size:2rem}._wrapper_1ago2_2[data-size=md] ._trigger_1ago2_22{block-size:2.5rem}._wrapper_1ago2_2[data-size=lg] ._trigger_1ago2_22{block-size:3rem}._wrapper_1ago2_2[data-state=error] ._trigger_1ago2_22{border-color:var(--cascivo-color-danger)}._value_1ago2_70{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._placeholder_1ago2_76{color:var(--cascivo-color-text-subtle)}._chevron_1ago2_80{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_1ago2_2[data-state=open] ._chevron_1ago2_80{transform:rotate(-135deg)}._clear_1ago2_96{cursor:pointer;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;position:absolute;inset-inline-end:var(--cascivo-space-8)}._clear_1ago2_96:hover{color:var(--cascivo-color-text)}._clear_1ago2_96:focus-visible{box-shadow:0 0 0 2px var(--cascivo-color-accent)}._listbox_1ago2_117{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_1ago2_117[data-state=open]{opacity:1;visibility:visible;translate:0}@starting-style{._listbox_1ago2_117[data-state=open]{opacity:0;translate:0 -.25rem}}._searchWrapper_1ago2_151{padding:var(--cascivo-space-2);border-block-end:1px solid var(--cascivo-color-border)}._search_1ago2_151{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_1ago2_151:focus-visible{border-color:var(--cascivo-color-accent)}._option_1ago2_173{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_1ago2_173[data-state=active]{background-color:var(--cascivo-color-bg-subtle)}._option_1ago2_173[aria-selected=true]{background-color:color-mix(in srgb, var(--cascivo-color-accent) 12%, transparent);color:var(--cascivo-color-accent)}._option_1ago2_173[data-disabled]{opacity:.4;cursor:not-allowed}._empty_1ago2_196{padding:var(--cascivo-space-4);text-align:center;font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-muted)}._error_1ago2_203{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-danger)}._hint_1ago2_208{font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-muted)}}

package/dist/combobox/combobox.js

@@ -0,0 +1,164 @@
+"use client";
+
+import e from "./combobox.module.js";
+import { cn as t, createMachine as n, useMachine 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 { useId as d, useRef as f } from "react";
+//#region ../components/src/combobox/combobox.tsx
+var p = n({
+	initial: "closed",
+	states: {
+		closed: { on: { OPEN: "open" } },
+		open: { on: { CLOSE: "closed" } }
+	}
+});
+function m({ options: n, value: m, defaultValue: h, onChange: g, clearable: _ = !1, searchable: v = !0, label: y, hint: b, error: x, size: S = "md", disabled: C = !1, labels: w, className: T, id: E }) {
+	o();
+	let [D, O] = r(p), k = d(), A = E ?? `cascade-combobox-${k}`, j = `${k}-listbox`, M = f(null), N = w?.placeholder ?? c(s.combobox.placeholder), P = w?.empty ?? c(s.combobox.empty), F = w?.clear ?? c(s.combobox.clear), I = i(m ?? h);
+	m !== void 0 && (I.value = m);
+	let L = i(""), R = i(0), z = D.value === "open", B = n.filter((e) => !v || !L.value ? !0 : e.label.toLowerCase().includes(L.value.toLowerCase())), V = n.find((e) => e.value === I.value);
+	a(() => {
+		if (!z) return;
+		let e = (e) => {
+			let t = document.getElementById(`${k}-root`);
+			t && !t.contains(e.target) && O("CLOSE");
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	});
+	let H = () => {
+		C || (L.value = "", R.value = 0, O("OPEN"), setTimeout(() => M.current?.focus(), 0));
+	}, U = () => {
+		O("CLOSE"), L.value = "";
+	}, W = (e) => {
+		m === void 0 && (I.value = e), g?.(e), U();
+	}, G = () => {
+		m === void 0 && (I.value = void 0), g?.(void 0);
+	}, K = B.flatMap((e, t) => e.disabled ? [] : [t]), q = (e) => {
+		if (K.length === 0) return;
+		let t = K[(K.indexOf(R.value) + e + K.length) % K.length];
+		t !== void 0 && (R.value = t);
+	}, J = (e) => {
+		(e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), H());
+	}, Y = (e) => {
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), q(1);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), q(-1);
+				break;
+			case "Enter": {
+				e.preventDefault();
+				let t = B[R.value];
+				t && !t.disabled && W(t.value);
+				break;
+			}
+			case "Escape":
+				e.preventDefault(), U();
+				break;
+			case "Tab":
+				U();
+				break;
+		}
+	}, X = (e) => `${k}-option-${e}`;
+	return /* @__PURE__ */ u("div", {
+		id: `${k}-root`,
+		className: t(e.wrapper, T),
+		"data-state": x ? "error" : D.value,
+		"data-size": S,
+		children: [
+			y && /* @__PURE__ */ l("label", {
+				className: e.label,
+				htmlFor: A,
+				children: y
+			}),
+			/* @__PURE__ */ u("div", {
+				className: e.field,
+				children: [/* @__PURE__ */ u("button", {
+					id: A,
+					type: "button",
+					role: "combobox",
+					"aria-expanded": z,
+					"aria-controls": j,
+					"aria-haspopup": "listbox",
+					"aria-activedescendant": z && R.value >= 0 ? X(R.value) : void 0,
+					"aria-invalid": x ? !0 : void 0,
+					"aria-describedby": x ? `${k}-error` : b ? `${k}-hint` : void 0,
+					className: e.trigger,
+					disabled: C,
+					onKeyDown: J,
+					onClick: z ? U : H,
+					children: [/* @__PURE__ */ l("span", {
+						className: t(e.value, V ? void 0 : e.placeholder),
+						children: V?.label ?? N
+					}), /* @__PURE__ */ l("span", {
+						className: e.chevron,
+						"aria-hidden": "true"
+					})]
+				}), _ && I.value !== void 0 && /* @__PURE__ */ l("button", {
+					type: "button",
+					className: e.clear,
+					"aria-label": F,
+					onClick: (e) => {
+						e.stopPropagation(), G();
+					},
+					children: "✕"
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
+				role: "listbox",
+				id: j,
+				className: e.listbox,
+				"data-state": z ? "open" : "closed",
+				"aria-label": y,
+				children: [v && z && /* @__PURE__ */ l("div", {
+					className: e.searchWrapper,
+					children: /* @__PURE__ */ l("input", {
+						ref: M,
+						type: "text",
+						className: e.search,
+						value: L.value,
+						onChange: (e) => {
+							L.value = e.target.value, R.value = 0;
+						},
+						onKeyDown: Y,
+						"aria-label": "Search options",
+						autoComplete: "off"
+					})
+				}), B.length === 0 ? /* @__PURE__ */ l("div", {
+					className: e.empty,
+					children: P
+				}) : B.map((t, n) => /* @__PURE__ */ l("div", {
+					id: X(n),
+					role: "option",
+					"aria-selected": t.value === I.value,
+					"aria-disabled": t.disabled || void 0,
+					"data-state": n === R.value ? "active" : void 0,
+					"data-disabled": t.disabled || void 0,
+					className: e.option,
+					onMouseEnter: () => {
+						t.disabled || (R.value = n);
+					},
+					onClick: () => {
+						t.disabled || W(t.value);
+					},
+					children: t.label
+				}, t.value))]
+			}),
+			x && /* @__PURE__ */ l("span", {
+				id: `${k}-error`,
+				className: e.error,
+				role: "alert",
+				children: x
+			}),
+			!x && b && /* @__PURE__ */ l("span", {
+				id: `${k}-hint`,
+				className: e.hint,
+				children: b
+			})
+		]
+	});
+}
+//#endregion
+export { m as Combobox };

package/dist/combobox/combobox.module.js

@@ -0,0 +1,22 @@
+"use client";
+
+import './combobox.css';
+var e = {
+	wrapper: "_wrapper_1ago2_2",
+	label: "_label_1ago2_10",
+	field: "_field_1ago2_16",
+	trigger: "_trigger_1ago2_22",
+	value: "_value_1ago2_70",
+	placeholder: "_placeholder_1ago2_76",
+	chevron: "_chevron_1ago2_80",
+	clear: "_clear_1ago2_96",
+	listbox: "_listbox_1ago2_117",
+	searchWrapper: "_searchWrapper_1ago2_151",
+	search: "_search_1ago2_151",
+	option: "_option_1ago2_173",
+	empty: "_empty_1ago2_196",
+	error: "_error_1ago2_203",
+	hint: "_hint_1ago2_208"
+};
+//#endregion
+export { e as default };

package/dist/command-menu/command-menu.css

@@ -0,0 +1 @@
+@layer cascivo.component{._dialog_cpgn8_2{border-radius:var(--cascivo-radius-overlay);inline-size:min(40rem, calc(100vw - var(--cascivo-space-8)));max-block-size:calc(85vh - 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;margin-block-start:15vh;margin-inline:auto;padding:0;overflow:visible;scale:.96}._dialog_cpgn8_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_cpgn8_2[open]{opacity:0;scale:.96}}._dialog_cpgn8_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_cpgn8_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_cpgn8_2[open]::backdrop{opacity:0}}._panel_cpgn8_62{background-color:var(--cascivo-color-surface-overlay);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);box-shadow:var(--cascivo-shadow-overlay);flex-direction:column;display:flex;overflow:hidden}._search_cpgn8_72{align-items:center;gap:var(--cascivo-space-3);padding-inline:var(--cascivo-space-4);border-block-end:1px solid var(--cascivo-color-border);display:flex}._searchIcon_cpgn8_80{color:var(--cascivo-color-text-muted);flex-shrink:0}._input_cpgn8_85{block-size:3rem;font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-base);color:var(--cascivo-color-text);background:0 0;border:none;flex:1;padding:0}._input_cpgn8_85:focus{outline:none}._input_cpgn8_85::placeholder{color:var(--cascivo-color-text-muted)}._list_cpgn8_104{max-block-size:20rem;padding:var(--cascivo-space-2);overflow-y:auto}._group_cpgn8_110+._group_cpgn8_110{margin-block-start:var(--cascivo-space-2)}._heading_cpgn8_114{padding-inline:var(--cascivo-space-2);padding-block:var(--cascivo-space-1);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-xs);font-weight:var(--cascivo-font-medium);color:var(--cascivo-color-text-subtle)}._option_cpgn8_123{align-items:center;gap:var(--cascivo-space-3);padding-inline:var(--cascivo-space-2);padding-block:var(--cascivo-space-2);border-radius:var(--cascivo-radius-item);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);cursor:pointer;-webkit-user-select:none;user-select:none;display:flex}._option_cpgn8_123[data-state=active]{background-color:var(--cascivo-color-accent-muted)}._option_cpgn8_123[data-disabled]{opacity:.5;cursor:not-allowed}._icon_cpgn8_148{color:var(--cascivo-color-text-muted);flex-shrink:0;align-items:center;display:inline-flex}._label_cpgn8_155{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}._shortcut_cpgn8_162{gap:var(--cascivo-space-1);margin-inline-start:auto;display:inline-flex}._empty_cpgn8_168{padding-block:var(--cascivo-space-8);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-muted);text-align:center}._footer_cpgn8_176{gap:var(--cascivo-space-4);padding-inline:var(--cascivo-space-4);padding-block:var(--cascivo-space-2);border-block-start:1px solid var(--cascivo-color-border);font-family:var(--cascivo-font-sans);font-size:var(--cascivo-text-xs);color:var(--cascivo-color-text-subtle);display:flex}._hint_cpgn8_187{align-items:center;gap:var(--cascivo-space-1);display:inline-flex}}