@cascivo/react 0.3.4 → 0.3.8

package/dist/menubar/menubar.js

@@ -0,0 +1,103 @@
+"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";
+//#region ../components/src/menubar/menubar.tsx
+function p({ menus: t, "aria-label": n, className: i }) {
+	s();
+	let c = d(), u = o(null), f = a({
+		orientation: "horizontal",
+		loop: !0
+	});
+	return /* @__PURE__ */ l("div", {
+		role: "menubar",
+		"aria-label": n,
+		className: r(e.menubar, i),
+		children: t.map((e, t) => /* @__PURE__ */ l(m, {
+			menu: e,
+			index: t,
+			baseId: c,
+			openId: u,
+			itemProps: f.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,
+		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", {
+		ref: (e) => {
+			d.current = e, x(e);
+		},
+		type: "button",
+		role: "menuitem",
+		"aria-haspopup": "menu",
+		"aria-expanded": m,
+		"aria-controls": g,
+		"data-state": m ? "open" : "closed",
+		className: e.trigger,
+		style: _,
+		onClick: () => {
+			a.value = m ? null : t.id;
+		},
+		onKeyDown: b,
+		...C,
+		children: t.label
+	}), /* @__PURE__ */ l(n, {
+		present: m,
+		children: /* @__PURE__ */ l(h, {
+			menu: t,
+			menuId: g,
+			floatingRef: p,
+			floatingStyle: v,
+			onClose: () => {
+				a.value = null, d.current?.focus();
+			}
+		})
+	})] });
+}
+function h({ 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, {
+		onDismiss: o,
+		children: /* @__PURE__ */ l("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", {
+				role: "menuitem",
+				tabIndex: -1,
+				"aria-disabled": t.disabled,
+				className: e.item,
+				onClick: () => {
+					t.disabled || (t.onSelect?.(), o());
+				},
+				onKeyDown: (e) => {
+					t.disabled || (e.key === "Enter" || e.key === " " ? (e.preventDefault(), t.onSelect?.(), o()) : s(e));
+				},
+				children: t.label
+			}, t.id))
+		})
+	});
+}
+//#endregion
+export { p as Menubar };

package/dist/menubar/menubar.module.js

@@ -0,0 +1,11 @@
+"use client";
+
+import './menubar.css';
+var e = {
+	menubar: "_menubar_1fs00_2",
+	trigger: "_trigger_1fs00_12",
+	panel: "_panel_1fs00_35",
+	item: "_item_1fs00_66"
+};
+//#endregion
+export { e as default };

package/dist/modal/modal.css

@@ -0,0 +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}}

package/dist/modal/modal.js

@@ -0,0 +1,73 @@
+"use client";
+
+import e from "./modal.module.js";
+import { cn as t, useDraggable as n, useSignal as r, useSignalEffect as i, useSignals as a } from "@cascivo/core";
+import { builtin as o, t as s } from "@cascivo/i18n";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useRef as u } from "react";
+//#region ../components/src/modal/modal.tsx
+function d({ open: d = !1, onClose: f, title: p, description: m, children: h, className: g, size: _ = "md", draggable: v = !1 }) {
+	a();
+	let y = u(null), b = u(f);
+	b.current = f;
+	let { handleRef: x, offset: S } = n({ isDisabled: !v }), C = v ? {
+		"--modal-x": `${S.value.x}px`,
+		"--modal-y": `${S.value.y}px`
+	} : void 0, w = r(d);
+	return w.value = d, i(() => {
+		let e = y.current;
+		e && (w.value ? e.open || e.showModal() : e.open && e.close());
+	}), i(() => {
+		let e = y.current;
+		if (!e) return;
+		let t = () => b.current?.();
+		return e.addEventListener("close", t), () => e.removeEventListener("close", t);
+	}), /* @__PURE__ */ c("dialog", {
+		ref: y,
+		"data-size": _,
+		"data-draggable": v || void 0,
+		className: t(e.dialog, g),
+		style: C,
+		onClick: (e) => {
+			e.target === y.current && y.current?.close();
+		},
+		onKeyDown: (e) => {
+			e.key === "Escape" && (e.preventDefault(), y.current?.close());
+		},
+		"aria-labelledby": p ? "cascade-modal-title" : void 0,
+		"aria-describedby": m ? "cascade-modal-desc" : void 0,
+		children: /* @__PURE__ */ l("div", {
+			className: e.panel,
+			children: [
+				(p || f) && /* @__PURE__ */ l("div", {
+					className: e.header,
+					ref: v ? (e) => {
+						x.current = e;
+					} : void 0,
+					children: [p && /* @__PURE__ */ c("h2", {
+						id: "cascade-modal-title",
+						className: e.title,
+						children: p
+					}), f && /* @__PURE__ */ c("button", {
+						type: "button",
+						className: e.close,
+						onClick: () => y.current?.close(),
+						"aria-label": s(o.modal.close),
+						children: "✕"
+					})]
+				}),
+				m && /* @__PURE__ */ c("p", {
+					id: "cascade-modal-desc",
+					className: e.description,
+					children: m
+				}),
+				/* @__PURE__ */ c("div", {
+					className: e.body,
+					children: h
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { d as Modal };

package/dist/modal/modal.module.js

@@ -0,0 +1,14 @@
+"use client";
+
+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"
+};
+//#endregion
+export { e as default };

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

@@ -0,0 +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}}

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

@@ -0,0 +1,105 @@
+"use client";
+
+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";
+//#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;
+	});
+	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;
+		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);
+			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();
+		};
+		return e.addEventListener("keydown", t), () => e.removeEventListener("keydown", t);
+	});
+	function E(e) {
+		p.includes(e) ? m(p.filter((t) => t !== e)) : m([...p, 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,
+			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", {
+				className: t["trigger-label"],
+				children: D
+			}), /* @__PURE__ */ l("span", {
+				className: t.chevron,
+				"aria-hidden": "true"
+			})]
+		}), /* @__PURE__ */ u("div", {
+			ref: b.popoverRef,
+			popover: "auto",
+			role: "listbox",
+			"aria-multiselectable": "true",
+			className: t.panel,
+			style: { positionAnchor: b.anchorName },
+			tabIndex: -1,
+			children: [/* @__PURE__ */ l("div", {
+				className: t["search-row"],
+				children: /* @__PURE__ */ l("input", {
+					ref: w,
+					type: "search",
+					className: t.search,
+					placeholder: O,
+					value: x.value,
+					onChange: (e) => {
+						x.value = e.currentTarget.value, S.value = -1;
+					}
+				})
+			}), /* @__PURE__ */ l("div", {
+				ref: C,
+				className: t.options,
+				children: T.value.length === 0 ? /* @__PURE__ */ l("div", {
+					className: t["no-results"],
+					children: k
+				}) : T.value.map((e, n) => /* @__PURE__ */ u("div", {
+					role: "option",
+					"aria-selected": p.includes(e.value),
+					"aria-disabled": e.disabled,
+					"data-active": n === S.value ? "" : void 0,
+					"data-selected": p.includes(e.value) ? "" : void 0,
+					"data-disabled": e.disabled ? "" : void 0,
+					className: t.option,
+					onMouseDown: (t) => {
+						t.preventDefault(), e.disabled || E(e.value);
+					},
+					onMouseEnter: () => {
+						S.value = n;
+					},
+					children: [/* @__PURE__ */ l("span", {
+						className: t.checkbox,
+						"aria-hidden": "true"
+					}), e.label]
+				}, e.value))
+			})]
+		})]
+	});
+}
+//#endregion
+export { f as MultiSelect };

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

@@ -0,0 +1,18 @@
+"use client";
+
+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"
+};
+//#endregion
+export { e as default };

package/dist/native-select/native-select.css

@@ -0,0 +1 @@
+@layer cascivo.component{._root_1s4kv_2{inline-size:100%;display:inline-flex;position:relative}._root_1s4kv_2[data-size=sm]{--_select-height:2rem;--_select-font:var(--cascivo-text-sm);--_select-px:var(--cascivo-space-3)}._root_1s4kv_2[data-size=md]{--_select-height:2.5rem;--_select-font:var(--cascivo-text-sm);--_select-px:var(--cascivo-space-4)}._root_1s4kv_2[data-size=lg]{--_select-height:3rem;--_select-font:var(--cascivo-text-base);--_select-px:var(--cascivo-space-4)}._select_1s4kv_24{appearance:none;inline-size:100%;block-size:var(--_select-height,2.5rem);font-family:var(--cascivo-font-sans);font-size:var(--_select-font,var(--cascivo-text-sm));color:var(--cascivo-color-text);background-color:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-field);cursor:pointer;transition:border-color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);outline:none;padding-inline-start:var(--_select-px,var(--cascivo-space-4));padding-inline-end:var(--cascivo-space-10)}._select_1s4kv_24:hover:not(:disabled):not(:focus){border-color:var(--cascivo-color-border-strong)}._select_1s4kv_24:focus{border-color:var(--cascivo-color-accent);box-shadow:var(--cascivo-focus-ring)}._select_1s4kv_24:disabled{opacity:.5;cursor:not-allowed;background-color:var(--cascivo-color-bg-subtle)}._root_1s4kv_2[data-invalid] ._select_1s4kv_24{border-color:var(--cascivo-color-destructive)}._root_1s4kv_2[data-invalid] ._select_1s4kv_24:focus{box-shadow:0 0 0 3px rgb(from var(--cascivo-color-destructive) r g b / .3)}._chevron_1s4kv_66{pointer-events:none;background-color:var(--cascivo-color-text-muted);block-size:1rem;inline-size:1rem;position:absolute;inset-block-start:50%;inset-inline-end:var(--cascivo-space-3);translate:0 -50%;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") 50%/contain no-repeat}}@media (forced-colors:active){._select_1s4kv_24{color:fieldtext;background-color:field;border:1px solid fieldtext}._select_1s4kv_24:focus{outline-offset:2px;outline:2px solid highlight}}

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

@@ -0,0 +1,37 @@
+"use client";
+
+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";
+//#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", {
+		className: t(e.root, f),
+		"data-size": o,
+		"data-invalid": s || void 0,
+		children: [/* @__PURE__ */ r("select", {
+			className: e.select,
+			disabled: c,
+			"aria-invalid": s || void 0,
+			value: u,
+			defaultValue: !m && h ? d ?? "" : d,
+			...p,
+			children: [h && /* @__PURE__ */ n("option", {
+				value: "",
+				disabled: !0,
+				hidden: !0,
+				children: l
+			}), i ? i.map((e) => /* @__PURE__ */ n("option", {
+				value: e.value,
+				disabled: e.disabled,
+				children: e.label
+			}, e.value)) : a]
+		}), /* @__PURE__ */ n("span", {
+			className: e.chevron,
+			"aria-hidden": "true"
+		})]
+	});
+}
+//#endregion
+export { i as NativeSelect };

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

@@ -0,0 +1,10 @@
+"use client";
+
+import './native-select.css';
+var e = {
+	root: "_root_1s4kv_2",
+	select: "_select_1s4kv_24",
+	chevron: "_chevron_1s4kv_66"
+};
+//#endregion
+export { e as default };

package/dist/navigation-menu/navigation-menu.css

@@ -0,0 +1 @@
+@layer cascivo.component{._nav_1k4lc_2{display:inline-flex}._list_1k4lc_6{align-items:center;gap:var(--cascivo-space-1);margin:0;padding:0;list-style:none;display:flex}._nav_1k4lc_2[data-orientation=vertical] ._list_1k4lc_6{flex-direction:column;align-items:stretch}._item_1k4lc_20{position:relative}._link_1k4lc_24,._trigger_1k4lc_25{align-items:center;gap:var(--cascivo-space-1);padding-block:var(--cascivo-space-2);padding-inline:var(--cascivo-space-3);border-radius:var(--cascivo-radius-item);font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text);cursor:pointer;background:0 0;border:none;text-decoration:none;display:inline-flex}:is(._link_1k4lc_24,._trigger_1k4lc_25):hover,:is(._link_1k4lc_24,._trigger_1k4lc_25)[data-state=open]{background:var(--cascivo-color-bg-subtle)}:is(._link_1k4lc_24,._trigger_1k4lc_25):focus-visible{outline:var(--cascivo-focus-ring);outline-offset:2px}._panel_1k4lc_50{padding:var(--cascivo-space-3);background:var(--cascivo-color-surface);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-overlay);min-width:12rem;box-shadow:var(--cascivo-shadow-md);opacity:1;transition:opacity var(--cascivo-motion-enter), translate var(--cascivo-motion-enter);margin:0;position:fixed;inset:auto;translate:0}@starting-style{._panel_1k4lc_50{opacity:0;translate:0 calc(-1 * var(--cascivo-space-2))}}._panel_1k4lc_50[data-state=closed]{opacity:0;translate:0 calc(-1 * var(--cascivo-space-2));transition:opacity var(--cascivo-motion-exit), translate var(--cascivo-motion-exit)}}@media (prefers-reduced-motion:reduce){._panel_1k4lc_50{transition:none}}@media (forced-colors:active){._link_1k4lc_24:focus-visible,._trigger_1k4lc_25:focus-visible{outline:2px solid highlight}}

package/dist/navigation-menu/navigation-menu.js

@@ -0,0 +1,95 @@
+"use client";
+
+import e from "./navigation-menu.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 { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useId as u, useRef as d } from "react";
+//#region ../components/src/navigation-menu/navigation-menu.tsx
+function f({ items: t, "aria-label": n, orientation: i = "horizontal", className: l }) {
+	s();
+	let d = u(), f = o(null), m = a({
+		orientation: i,
+		loop: !0
+	});
+	return /* @__PURE__ */ c("nav", {
+		"aria-label": n,
+		className: r(e.nav, l),
+		"data-orientation": i,
+		children: /* @__PURE__ */ c("ul", {
+			role: "list",
+			className: e.list,
+			children: t.map((e, t) => /* @__PURE__ */ c(p, {
+				item: e,
+				baseId: d,
+				openId: f,
+				itemProps: m.getItemProps(t)
+			}, e.id))
+		})
+	});
+}
+function p({ item: t, baseId: r, openId: a, itemProps: o }) {
+	s();
+	let u = d(null), f = d(null), p = t.content != null, h = a.value === t.id, g = `${r}-panel-${t.id}`, { anchorStyle: _, floatingStyle: v } = i({
+		anchorRef: u,
+		floatingRef: f,
+		placement: "bottom-start",
+		enabled: h
+	}), { ref: y, onKeyDown: b, ...x } = o;
+	return p ? /* @__PURE__ */ l("li", {
+		className: e.item,
+		children: [/* @__PURE__ */ c("button", {
+			ref: (e) => {
+				u.current = e, y(e);
+			},
+			type: "button",
+			"aria-expanded": h,
+			"aria-controls": g,
+			"data-state": h ? "open" : "closed",
+			className: e.trigger,
+			style: _,
+			onClick: () => {
+				a.value = h ? null : t.id;
+			},
+			onKeyDown: (e) => {
+				b(e), !e.defaultPrevented && e.key === "Escape" && (a.value = null);
+			},
+			...x,
+			children: t.label
+		}), /* @__PURE__ */ c(n, {
+			present: h,
+			children: /* @__PURE__ */ c(m, {
+				panelId: g,
+				floatingRef: f,
+				floatingStyle: v,
+				onClose: () => {
+					a.value = null, u.current?.focus();
+				},
+				children: t.content
+			})
+		})]
+	}) : /* @__PURE__ */ c("li", {
+		className: e.item,
+		children: /* @__PURE__ */ c("a", {
+			ref: (e) => y(e),
+			href: t.href,
+			className: e.link,
+			onKeyDown: b,
+			...x,
+			children: t.label
+		})
+	});
+}
+function m({ panelId: n, floatingRef: r, floatingStyle: i, onClose: a, children: o }) {
+	return /* @__PURE__ */ c(t, {
+		onDismiss: a,
+		children: /* @__PURE__ */ c("div", {
+			ref: r,
+			id: n,
+			className: e.panel,
+			style: i,
+			children: o
+		})
+	});
+}
+//#endregion
+export { f as NavigationMenu };

package/dist/navigation-menu/navigation-menu.module.js

@@ -0,0 +1,13 @@
+"use client";
+
+import './navigation-menu.css';
+var e = {
+	nav: "_nav_1k4lc_2",
+	list: "_list_1k4lc_6",
+	item: "_item_1k4lc_20",
+	link: "_link_1k4lc_24",
+	trigger: "_trigger_1k4lc_25",
+	panel: "_panel_1k4lc_50"
+};
+//#endregion
+export { e as default };

package/dist/notification/notification.css

@@ -0,0 +1 @@
+@layer cascivo.component{._notification_10586_2{gap:var(--cascivo-space-3);padding:var(--cascivo-space-4);border:1px solid var(--cascivo-color-border);border-radius:var(--cascivo-radius-surface);background-color:var(--cascivo-color-surface);font-family:var(--cascivo-font-sans);color:var(--cascivo-color-text);opacity:1;transition:opacity var(--cascivo-motion-enter);display:flex}@starting-style{._notification_10586_2{opacity:0}}._notification_10586_2[data-state=closed]{opacity:0;transition:opacity var(--cascivo-motion-exit)}._notification_10586_2[data-variant=info]{border-color:color-mix(in oklch, var(--cascivo-color-info) 35%, var(--cascivo-color-border));background:color-mix(in oklch, var(--cascivo-color-info) 5%, var(--cascivo-color-bg))}._notification_10586_2[data-variant=success]{border-color:color-mix(in oklch, var(--cascivo-color-success) 35%, var(--cascivo-color-border));background:color-mix(in oklch, var(--cascivo-color-success) 5%, var(--cascivo-color-bg))}._notification_10586_2[data-variant=warning]{border-color:color-mix(in oklch, var(--cascivo-color-warning) 35%, var(--cascivo-color-border));background:color-mix(in oklch, var(--cascivo-color-warning) 5%, var(--cascivo-color-bg))}._notification_10586_2[data-variant=error]{border-color:color-mix(in oklch, var(--cascivo-color-destructive) 35%, var(--cascivo-color-border));background:color-mix(in oklch, var(--cascivo-color-destructive) 5%, var(--cascivo-color-bg))}._icon_10586_58{flex-shrink:0;align-items:center;margin-block-start:.125rem;line-height:1;display:flex}._notification_10586_2[data-variant=info] ._icon_10586_58{color:var(--cascivo-color-info)}._notification_10586_2[data-variant=success] ._icon_10586_58{color:var(--cascivo-color-success)}._notification_10586_2[data-variant=warning] ._icon_10586_58{color:var(--cascivo-color-warning)}._notification_10586_2[data-variant=error] ._icon_10586_58{color:var(--cascivo-color-destructive)}._body_10586_79{gap:var(--cascivo-space-1);flex-direction:column;flex:1;min-inline-size:0;display:flex}._title_10586_87{font-size:var(--cascivo-text-sm);font-weight:var(--cascivo-font-semibold);line-height:var(--cascivo-leading-snug)}._description_10586_93{font-size:var(--cascivo-text-sm);color:var(--cascivo-color-text-subtle);line-height:var(--cascivo-leading-normal)}._actions_10586_99{gap:var(--cascivo-space-2);flex-wrap:wrap;margin-block-start:var(--cascivo-space-2);display:flex}._dismiss_10586_106{block-size:1.5rem;inline-size:1.5rem;font-size:var(--cascivo-text-xs);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;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}._dismiss_10586_106:hover{color:var(--cascivo-color-text);background-color:var(--cascivo-color-bg-subtle)}._dismiss_10586_106:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}}@media (forced-colors:active){._notification_10586_2{border:1px solid canvastext}._notification_10586_2[data-variant=info],._notification_10586_2[data-variant=success],._notification_10586_2[data-variant=warning],._notification_10586_2[data-variant=error]{border-width:2px}._dismiss_10586_106:focus-visible{outline-offset:2px;outline:2px solid highlight}}@media (prefers-contrast:more){._notification_10586_2{border-width:2px}}

package/dist/notification/notification.js

@@ -0,0 +1,134 @@
+"use client";
+
+import e from "./notification.module.js";
+import { Presence as t, cn as n, useSignal as r, useSignals as i } from "@cascivo/core";
+import { builtin as a, t as o } from "@cascivo/i18n";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useRef as l } from "react";
+//#region ../components/src/notification/notification.tsx
+var u = new Set(["warning", "error"]), d = 160;
+function f({ variant: e }) {
+	return e === "success" ? /* @__PURE__ */ c("svg", {
+		viewBox: "0 0 20 20",
+		width: "20",
+		height: "20",
+		fill: "none",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ s("circle", {
+			cx: "10",
+			cy: "10",
+			r: "8",
+			stroke: "currentColor",
+			strokeWidth: "1.5"
+		}), /* @__PURE__ */ s("path", {
+			d: "M6.5 10.5l2.5 2.5 4.5-5",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})]
+	}) : e === "warning" ? /* @__PURE__ */ c("svg", {
+		viewBox: "0 0 20 20",
+		width: "20",
+		height: "20",
+		fill: "none",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ s("path", {
+			d: "M10 2.5L18.5 17H1.5L10 2.5z",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinejoin: "round"
+		}), /* @__PURE__ */ s("path", {
+			d: "M10 8v3.5M10 14h.01",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round"
+		})]
+	}) : e === "error" ? /* @__PURE__ */ c("svg", {
+		viewBox: "0 0 20 20",
+		width: "20",
+		height: "20",
+		fill: "none",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ s("circle", {
+			cx: "10",
+			cy: "10",
+			r: "8",
+			stroke: "currentColor",
+			strokeWidth: "1.5"
+		}), /* @__PURE__ */ s("path", {
+			d: "M10 6v4.5M10 13.5h.01",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round"
+		})]
+	}) : /* @__PURE__ */ c("svg", {
+		viewBox: "0 0 20 20",
+		width: "20",
+		height: "20",
+		fill: "none",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ s("circle", {
+			cx: "10",
+			cy: "10",
+			r: "8",
+			stroke: "currentColor",
+			strokeWidth: "1.5"
+		}), /* @__PURE__ */ s("path", {
+			d: "M10 9v5M10 6.5h.01",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round"
+		})]
+	});
+}
+function p({ title: p, description: m, variant: h = "info", dismissible: g = !1, onDismiss: _, actions: v, icon: y, labels: b, className: x, ...S }) {
+	i();
+	let C = r(!0), w = l(_);
+	w.current = _;
+	let T = g || _ !== void 0, E = () => {
+		C.value = !1, setTimeout(() => w.current?.(), d);
+	};
+	return /* @__PURE__ */ s(t, {
+		present: C,
+		children: /* @__PURE__ */ c("div", {
+			role: u.has(h) ? "alert" : "status",
+			"data-variant": h,
+			className: n(e.notification, x),
+			...S,
+			children: [
+				/* @__PURE__ */ s("span", {
+					className: e.icon,
+					"aria-hidden": "true",
+					children: y ?? /* @__PURE__ */ s(f, { variant: h })
+				}),
+				/* @__PURE__ */ c("div", {
+					className: e.body,
+					children: [
+						/* @__PURE__ */ s("div", {
+							className: e.title,
+							children: p
+						}),
+						m && /* @__PURE__ */ s("div", {
+							className: e.description,
+							children: m
+						}),
+						v && /* @__PURE__ */ s("div", {
+							className: e.actions,
+							children: v
+						})
+					]
+				}),
+				T && /* @__PURE__ */ s("button", {
+					type: "button",
+					className: e.dismiss,
+					"aria-label": b?.dismiss ?? o(a.notification.dismiss),
+					onClick: E,
+					children: "✕"
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { p as Notification };