@cascivo/react 0.12.0 → 0.13.1

package/dist/header-panel/header-panel.js

@@ -1,18 +1,18 @@
 "use client";
 
 import e from "./header-panel.module.js";
-import { cn as t, useEffectPropSignal as n, useSignalEffect 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";
+import { cn as t, focusElement as n, useEffectPropSignal as r, useSignalEffect as i, useSignals as a } from "@cascivo/core";
+import { useRef as o } from "react";
+import { builtin as s, t as c } from "@cascivo/i18n";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region ../components/src/header-panel/header-panel.tsx
-function u({ open: u, onClose: d, label: f, children: p, labels: m, className: h }) {
-	i();
-	let g = l(null), _ = l(null), v = n(u), y = l(d);
-	return y.current = d, r(() => {
-		let e = g.current;
-		if (e) if (v.value) {
-			_.current = document.activeElement;
+function d({ open: d, onClose: f, label: p, children: m, labels: h, className: g }) {
+	a();
+	let _ = o(null), v = o(null), y = r(d), b = o(f);
+	return b.current = f, i(() => {
+		let e = _.current;
+		if (e) if (y.value) {
+			v.current = document.activeElement;
 			try {
 				e.showPopover();
 			} catch {}
@@ -21,40 +21,40 @@ function u({ open: u, onClose: d, label: f, children: p, labels: m, className: h
 			try {
 				e.hidePopover();
 			} catch {}
-			_.current?.focus(), _.current = null;
+			n(v.current), v.current = null;
 		}
-	}), r(() => {
-		let e = g.current;
+	}), i(() => {
+		let e = _.current;
 		if (!e) return;
 		let t = (e) => {
 			let t = "newState" in e ? e.newState === "closed" : !0;
-			v.peek() && t && y.current();
+			y.peek() && t && b.current();
 		};
 		return e.addEventListener("toggle", t), () => e.removeEventListener("toggle", t);
-	}), /* @__PURE__ */ c("div", {
-		ref: g,
+	}), /* @__PURE__ */ u("div", {
+		ref: _,
 		popover: "auto",
 		role: "region",
-		"aria-label": f,
+		"aria-label": p,
 		tabIndex: -1,
-		"data-state": u ? "open" : "closed",
-		className: t(e.panel, h),
-		children: [/* @__PURE__ */ c("div", {
+		"data-state": d ? "open" : "closed",
+		className: t(e.panel, g),
+		children: [/* @__PURE__ */ u("div", {
 			className: e.header,
-			children: [/* @__PURE__ */ s("span", {
+			children: [/* @__PURE__ */ l("span", {
 				className: e.title,
-				children: f
-			}), /* @__PURE__ */ s("button", {
+				children: p
+			}), /* @__PURE__ */ l("button", {
 				type: "button",
-				"aria-label": m?.close ?? o(a.headerPanel.close),
+				"aria-label": h?.close ?? c(s.headerPanel.close),
 				className: e.close,
-				onClick: () => y.current(),
-				children: /* @__PURE__ */ s("svg", {
+				onClick: () => b.current(),
+				children: /* @__PURE__ */ l("svg", {
 					viewBox: "0 0 16 16",
 					width: "14",
 					height: "14",
 					"aria-hidden": "true",
-					children: /* @__PURE__ */ s("path", {
+					children: /* @__PURE__ */ l("path", {
 						d: "M4 4l8 8M12 4l-8 8",
 						stroke: "currentColor",
 						strokeWidth: "1.5",
@@ -62,11 +62,11 @@ function u({ open: u, onClose: d, label: f, children: p, labels: m, className: h
 					})
 				})
 			})]
-		}), /* @__PURE__ */ s("div", {
+		}), /* @__PURE__ */ l("div", {
 			className: e.body,
-			children: p
+			children: m
 		})]
 	});
 }
 //#endregion
-export { u as HeaderPanel };
+export { d as HeaderPanel };

package/dist/hover-card/hover-card.js

@@ -3,15 +3,15 @@
 import { usePopover as e } from "../popover/use-popover.js";
 import t from "./hover-card.module.js";
 import { useSignalEffect as n, useSignals as r } from "@cascivo/core";
-import { jsx as i } from "react/jsx-runtime";
-import { createContext as a, useRef as o } from "react";
+import { createContext as i, useRef as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
 //#region ../components/src/hover-card/hover-card.tsx
-var s = a(null);
-function c({ children: t, openDelay: r = 300, closeDelay: a = 100 }) {
-	let c = e(), l = o(void 0), u = o(void 0), d = o(r);
+var s = i(null);
+function c({ children: t, openDelay: r = 300, closeDelay: i = 100 }) {
+	let c = e(), l = a(void 0), u = a(void 0), d = a(r);
 	d.current = r;
-	let f = o(a);
-	f.current = a;
+	let f = a(i);
+	f.current = i;
 	let p = {
 		...c,
 		open: () => {
@@ -27,17 +27,17 @@ function c({ children: t, openDelay: r = 300, closeDelay: a = 100 }) {
 	};
 	return n(() => () => {
 		clearTimeout(l.current), clearTimeout(u.current);
-	}), /* @__PURE__ */ i(s.Provider, {
+	}), /* @__PURE__ */ o(s.Provider, {
 		value: p,
 		children: t
 	});
 }
 function l({ ctx: e, children: n }) {
 	r();
-	let { triggerRef: a, anchorName: o, open: s, close: c } = e;
-	return /* @__PURE__ */ i("span", {
-		ref: a,
-		style: { anchorName: o },
+	let { triggerRef: i, anchorName: a, open: s, close: c } = e;
+	return /* @__PURE__ */ o("span", {
+		ref: i,
+		style: { anchorName: a },
 		onMouseEnter: s,
 		onMouseLeave: c,
 		onFocus: s,
@@ -47,33 +47,33 @@ function l({ ctx: e, children: n }) {
 	});
 }
 function u({ children: e }) {
-	return /* @__PURE__ */ i(s.Consumer, { children: (t) => {
+	return /* @__PURE__ */ o(s.Consumer, { children: (t) => {
 		if (!t) throw Error("HoverCardTrigger must be inside <HoverCard>");
-		return /* @__PURE__ */ i(l, {
+		return /* @__PURE__ */ o(l, {
 			ctx: t,
 			children: e
 		});
 	} });
 }
-function d({ ctx: e, children: n, className: a }) {
+function d({ ctx: e, children: n, className: i }) {
 	r();
-	let { popoverRef: o, anchorName: s, isOpen: c, open: l, close: u } = e;
-	return /* @__PURE__ */ i("div", {
-		ref: o,
+	let { popoverRef: a, anchorName: s, isOpen: c, open: l, close: u } = e;
+	return /* @__PURE__ */ o("div", {
+		ref: a,
 		popover: "auto",
 		role: "complementary",
 		"data-state": c.value ? "open" : "closed",
 		style: { positionAnchor: s },
 		onMouseEnter: l,
 		onMouseLeave: u,
-		className: [t.content, a].filter(Boolean).join(" "),
+		className: [t.content, i].filter(Boolean).join(" "),
 		children: n
 	});
 }
 function f({ children: e, className: t }) {
-	return /* @__PURE__ */ i(s.Consumer, { children: (n) => {
+	return /* @__PURE__ */ o(s.Consumer, { children: (n) => {
 		if (!n) throw Error("HoverCardContent must be inside <HoverCard>");
-		return /* @__PURE__ */ i(d, {
+		return /* @__PURE__ */ o(d, {
 			ctx: n,
 			...t !== void 0 && { className: t },
 			children: e

package/dist/icon-button/icon-button.css

@@ -1 +1 @@
-@layer cascivo.component{._iconButton_13zh2_2{aspect-ratio:1;font-family:var(--cascivo-font-sans);line-height:var(--cascivo-leading-none);cursor:pointer;border-radius:var(--cascivo-button-radius,var(--cascivo-radius-control));color:var(--cascivo-color-text);transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out), color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);background-color:#0000;border:1px solid #0000;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:inline-flex}._iconButton_13zh2_2:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._iconButton_13zh2_2:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}._iconButton_13zh2_2[data-size=sm]{block-size:var(--cascivo-control-height-sm);inline-size:var(--cascivo-control-height-sm);font-size:var(--cascivo-text-sm)}._iconButton_13zh2_2[data-size=md]{block-size:var(--cascivo-control-height-md);inline-size:var(--cascivo-control-height-md);font-size:var(--cascivo-text-base)}._iconButton_13zh2_2[data-size=lg]{block-size:var(--cascivo-control-height-lg);inline-size:var(--cascivo-control-height-lg);font-size:var(--cascivo-text-lg)}._iconButton_13zh2_2[data-variant=ghost]:hover:not(:disabled){background-color:var(--cascivo-color-bg-subtle)}._iconButton_13zh2_2[data-variant=outline]{border-color:var(--cascivo-color-border);background-color:var(--cascivo-color-surface)}._iconButton_13zh2_2[data-variant=outline]:hover:not(:disabled){background-color:var(--cascivo-color-bg-subtle)}._iconButton_13zh2_2[data-variant=filled]{background-color:var(--cascivo-color-primary);color:var(--cascivo-color-primary-fg)}._iconButton_13zh2_2[data-variant=filled]:hover:not(:disabled){background-color:var(--cascivo-color-primary-hover)}._iconButton_13zh2_2[data-variant=filled]:active:not(:disabled){background-color:var(--cascivo-color-primary-active)}}@media (forced-colors:active){._iconButton_13zh2_2{border:1px solid buttontext}._iconButton_13zh2_2:focus-visible{outline-offset:2px;outline:2px solid highlight}._iconButton_13zh2_2:disabled{color:graytext;border-color:graytext}}
+@layer cascivo.component{._iconButton_1f9hf_2{aspect-ratio:1;font-family:var(--cascivo-font-sans);line-height:var(--cascivo-leading-none);cursor:pointer;border-radius:var(--cascivo-button-radius,var(--cascivo-radius-control));color:var(--cascivo-color-text);transition:background-color var(--cascivo-duration-150) var(--cascivo-ease-out), color var(--cascivo-duration-150) var(--cascivo-ease-out), box-shadow var(--cascivo-duration-150) var(--cascivo-ease-out);background-color:#0000;border:1px solid #0000;flex-shrink:0;justify-content:center;align-items:center;padding:0;text-decoration:none;display:inline-flex}._iconButton_1f9hf_2:focus-visible{box-shadow:var(--cascivo-focus-ring);outline:none}._iconButton_1f9hf_2:disabled,._iconButton_1f9hf_2[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}._iconButton_1f9hf_2[data-size=sm]{block-size:var(--cascivo-control-height-sm);inline-size:var(--cascivo-control-height-sm);font-size:var(--cascivo-text-sm)}._iconButton_1f9hf_2[data-size=md]{block-size:var(--cascivo-control-height-md);inline-size:var(--cascivo-control-height-md);font-size:var(--cascivo-text-base)}._iconButton_1f9hf_2[data-size=lg]{block-size:var(--cascivo-control-height-lg);inline-size:var(--cascivo-control-height-lg);font-size:var(--cascivo-text-lg)}._iconButton_1f9hf_2[data-variant=ghost]:hover:not(:disabled){background-color:var(--cascivo-color-bg-subtle)}._iconButton_1f9hf_2[data-variant=outline]{border-color:var(--cascivo-color-border);background-color:var(--cascivo-color-surface)}._iconButton_1f9hf_2[data-variant=outline]:hover:not(:disabled){background-color:var(--cascivo-color-bg-subtle)}._iconButton_1f9hf_2[data-variant=filled]{background-color:var(--cascivo-color-primary);color:var(--cascivo-color-primary-fg)}._iconButton_1f9hf_2[data-variant=filled]:hover:not(:disabled){background-color:var(--cascivo-color-primary-hover)}._iconButton_1f9hf_2[data-variant=filled]:active:not(:disabled){background-color:var(--cascivo-color-primary-active)}}@media (forced-colors:active){._iconButton_1f9hf_2{border:1px solid buttontext}._iconButton_1f9hf_2:focus-visible{outline-offset:2px;outline:2px solid highlight}._iconButton_1f9hf_2:disabled{color:graytext;border-color:graytext}}

package/dist/icon-button/icon-button.js

@@ -2,13 +2,13 @@
 
 import e from "./icon-button.module.js";
 import { Slot as t, cn as n } from "@cascivo/core";
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
 //#region ../components/src/icon-button/icon-button.tsx
-var a = i(function({ label: i, ariaLabel: a, icon: o, size: s = "md", variant: c = "ghost", asChild: l = !1, className: u, children: d, ...f }, p) {
-	return /* @__PURE__ */ r(l ? t : "button", {
+var a = r(function({ label: r, ariaLabel: a, icon: o, size: s = "md", variant: c = "ghost", asChild: l = !1, className: u, children: d, ...f }, p) {
+	return /* @__PURE__ */ i(l ? t : "button", {
 		type: l ? void 0 : "button",
-		"aria-label": i ?? a,
+		"aria-label": r ?? a,
 		"data-size": s,
 		"data-variant": c,
 		className: n(e.iconButton, u),

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

@@ -1,6 +1,6 @@
 "use client";
 
 import './icon-button.css';
-var e = { iconButton: "_iconButton_13zh2_2" };
+var e = { iconButton: "_iconButton_1f9hf_2" };
 //#endregion
 export { e as default };