@cascivo/react 0.9.0 → 0.10.1

package/dist/node/form/form.js

@@ -0,0 +1,95 @@
+"use client";
+
+import e from "./form.module.js";
+import { batch as t, cn as n, signal as r, useSignal as i, useSignals as a } from "@cascivo/core";
+import { jsx as o } from "react/jsx-runtime";
+//#region ../components/src/form/form.tsx
+function s(e) {
+	let t = e[0];
+	return t === void 0 ? "" : String(typeof t == "string" || typeof t == "number" ? t : t.key);
+}
+async function c(e, t) {
+	let n = await e["~standard"].validate(t);
+	if (!("issues" in n) || n.issues === void 0) return {};
+	let r = {};
+	for (let e of n.issues) {
+		let t = e.path && e.path.length > 0 ? s(e.path) : "";
+		t && !(t in r) && (r[t] = e.message);
+	}
+	return r;
+}
+function l(e) {
+	let n = r({ ...e.initialValues }), i = r({}), a = r({}), o = r(!1), s = async (t) => {
+		let n = {};
+		return e.schema && (n = await c(e.schema, t)), Object.keys(n).length === 0 && e.validate && (n = await e.validate(t)), n;
+	}, l = 0, u = (t, r) => {
+		if (n.value = {
+			...n.value,
+			[t]: r
+		}, !e.validateOnChange) return;
+		let a = ++l;
+		s(n.value).then((e) => {
+			if (a !== l) return;
+			let n = { ...i.value }, r = e[t];
+			r === void 0 ? delete n[t] : n[t] = r, i.value = n;
+		});
+	};
+	return {
+		values: n,
+		errors: i,
+		touched: a,
+		submitting: o,
+		setValue: u,
+		field(e) {
+			return {
+				get value() {
+					return n.value[e];
+				},
+				onChange: (t) => u(e, t),
+				onBlur: () => {
+					a.value = {
+						...a.value,
+						[e]: !0
+					};
+				},
+				get error() {
+					return i.value[e];
+				}
+			};
+		},
+		async submit(r) {
+			o.value = !0;
+			try {
+				let o = await s(n.value), c = Object.fromEntries(Object.keys(e.initialValues).map((e) => [e, !0]));
+				t(() => {
+					i.value = o, a.value = c;
+				}), Object.keys(o).length === 0 && await r(n.value);
+			} finally {
+				o.value = !1;
+			}
+		},
+		reset() {
+			t(() => {
+				n.value = { ...e.initialValues }, i.value = {}, a.value = {};
+			});
+		}
+	};
+}
+function u(e) {
+	a();
+	let t = i(null);
+	return t.peek() === null && (t.value = l(e)), t.peek();
+}
+function d({ form: t, onValid: r, children: i, className: a, ...s }) {
+	return /* @__PURE__ */ o("form", {
+		noValidate: !0,
+		className: n(e.form, a),
+		onSubmit: (e) => {
+			e.preventDefault(), t.submit(r);
+		},
+		...s,
+		children: i
+	});
+}
+//#endregion
+export { d as Form, l as createForm, u as useForm };

package/dist/node/form/form.module.js

@@ -0,0 +1,5 @@
+"use client";
+
+var e = { form: "_form_1mtxl_2" };
+//#endregion
+export { e as default };

package/dist/node/header/header.js

@@ -0,0 +1,44 @@
+"use client";
+
+import e from "./header.module.js";
+import { cn as t, getLinkComponent as n, useSignals as r } from "@cascivo/core";
+import { builtin as i, t as a } from "@cascivo/i18n";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region ../components/src/header/header.tsx
+function c({ brand: c, links: l, actions: u, sticky: d = !1, labels: f, className: p, ...m }) {
+	r();
+	let h = n(), g = f?.nav ?? a(i.header.nav);
+	return /* @__PURE__ */ s("header", {
+		role: "banner",
+		"data-sticky": d || void 0,
+		className: t(e.header, p),
+		...m,
+		children: [
+			c && /* @__PURE__ */ o("div", {
+				className: e.brand,
+				children: c
+			}),
+			l && l.length > 0 && /* @__PURE__ */ o("nav", {
+				"aria-label": g,
+				className: e.nav,
+				children: /* @__PURE__ */ o("ul", {
+					className: e.list,
+					children: l.map((t, n) => /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(h, {
+						href: t.href,
+						"aria-current": t.active ? "page" : void 0,
+						"data-state": t.active ? "active" : void 0,
+						className: e.link,
+						children: t.label
+					}) }, t.id ?? `${n}-${t.href}`))
+				})
+			}),
+			/* @__PURE__ */ o("div", { className: e.spacer }),
+			u && /* @__PURE__ */ o("div", {
+				className: e.actions,
+				children: u
+			})
+		]
+	});
+}
+//#endregion
+export { c as Header };

package/dist/node/header/header.module.js

@@ -0,0 +1,13 @@
+"use client";
+
+var e = {
+	header: "_header_1n9di_2",
+	brand: "_brand_1n9di_20",
+	nav: "_nav_1n9di_35",
+	list: "_list_1n9di_39",
+	link: "_link_1n9di_48",
+	spacer: "_spacer_1n9di_80",
+	actions: "_actions_1n9di_84"
+};
+//#endregion
+export { e as default };

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

@@ -0,0 +1,74 @@
+"use client";
+
+import e from "./header-panel.module.js";
+import { cn as t, useSignal 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";
+//#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);
+	v.value = u;
+	let y = l(d);
+	return y.current = d, r(() => {
+		let e = g.current;
+		if (e) if (v.value) {
+			_.current = document.activeElement;
+			try {
+				e.showPopover();
+			} catch {}
+			e.focus();
+		} else {
+			try {
+				e.hidePopover();
+			} catch {}
+			_.current?.focus(), _.current = null;
+		}
+	}), r(() => {
+		let e = g.current;
+		if (!e) return;
+		let t = (e) => {
+			let t = "newState" in e ? e.newState === "closed" : !0;
+			v.peek() && t && y.current();
+		};
+		return e.addEventListener("toggle", t), () => e.removeEventListener("toggle", t);
+	}), /* @__PURE__ */ c("div", {
+		ref: g,
+		popover: "auto",
+		role: "region",
+		"aria-label": f,
+		tabIndex: -1,
+		"data-state": u ? "open" : "closed",
+		className: t(e.panel, h),
+		children: [/* @__PURE__ */ c("div", {
+			className: e.header,
+			children: [/* @__PURE__ */ s("span", {
+				className: e.title,
+				children: f
+			}), /* @__PURE__ */ s("button", {
+				type: "button",
+				"aria-label": m?.close ?? o(a.headerPanel.close),
+				className: e.close,
+				onClick: () => y.current(),
+				children: /* @__PURE__ */ s("svg", {
+					viewBox: "0 0 16 16",
+					width: "14",
+					height: "14",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ s("path", {
+						d: "M4 4l8 8M12 4l-8 8",
+						stroke: "currentColor",
+						strokeWidth: "1.5",
+						strokeLinecap: "round"
+					})
+				})
+			})]
+		}), /* @__PURE__ */ s("div", {
+			className: e.body,
+			children: p
+		})]
+	});
+}
+//#endregion
+export { u as HeaderPanel };

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

@@ -0,0 +1,11 @@
+"use client";
+
+var e = {
+	panel: "_panel_gsmp3_2",
+	header: "_header_gsmp3_41",
+	title: "_title_gsmp3_50",
+	close: "_close_gsmp3_57",
+	body: "_body_gsmp3_80"
+};
+//#endregion
+export { e as default };

package/dist/node/heading/heading.js

@@ -0,0 +1,24 @@
+"use client";
+
+import e from "./heading.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n } from "react/jsx-runtime";
+//#region ../components/src/heading/heading.tsx
+var r = {
+	1: "2xl",
+	2: "xl",
+	3: "lg",
+	4: "md",
+	5: "sm",
+	6: "sm"
+};
+function i({ level: i = 2, size: a, className: o, children: s, ...c }) {
+	return /* @__PURE__ */ n(`h${i}`, {
+		"data-size": a ?? r[i],
+		className: t(e.heading, o),
+		...c,
+		children: s
+	});
+}
+//#endregion
+export { i as Heading };

package/dist/node/heading/heading.module.js

@@ -0,0 +1,5 @@
+"use client";
+
+var e = { heading: "_heading_1mlcc_2" };
+//#endregion
+export { e as default };

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

@@ -0,0 +1,84 @@
+"use client";
+
+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";
+//#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);
+	d.current = r;
+	let f = o(a);
+	f.current = a;
+	let p = {
+		...c,
+		open: () => {
+			clearTimeout(u.current), l.current = setTimeout(() => {
+				c.isOpen.value = !0;
+			}, d.current);
+		},
+		close: () => {
+			clearTimeout(l.current), u.current = setTimeout(() => {
+				c.isOpen.value = !1;
+			}, f.current);
+		}
+	};
+	return n(() => () => {
+		clearTimeout(l.current), clearTimeout(u.current);
+	}), /* @__PURE__ */ i(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 },
+		onMouseEnter: s,
+		onMouseLeave: c,
+		onFocus: s,
+		onBlur: c,
+		className: t.trigger,
+		children: n
+	});
+}
+function u({ children: e }) {
+	return /* @__PURE__ */ i(s.Consumer, { children: (t) => {
+		if (!t) throw Error("HoverCardTrigger must be inside <HoverCard>");
+		return /* @__PURE__ */ i(l, {
+			ctx: t,
+			children: e
+		});
+	} });
+}
+function d({ ctx: e, children: n, className: a }) {
+	r();
+	let { popoverRef: o, anchorName: s, isOpen: c, open: l, close: u } = e;
+	return /* @__PURE__ */ i("div", {
+		ref: o,
+		popover: "auto",
+		role: "complementary",
+		"data-state": c.value ? "open" : "closed",
+		style: { positionAnchor: s },
+		onMouseEnter: l,
+		onMouseLeave: u,
+		className: [t.content, a].filter(Boolean).join(" "),
+		children: n
+	});
+}
+function f({ children: e, className: t }) {
+	return /* @__PURE__ */ i(s.Consumer, { children: (n) => {
+		if (!n) throw Error("HoverCardContent must be inside <HoverCard>");
+		return /* @__PURE__ */ i(d, {
+			ctx: n,
+			...t !== void 0 && { className: t },
+			children: e
+		});
+	} });
+}
+//#endregion
+export { c as HoverCard, f as HoverCardContent, u as HoverCardTrigger };

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

@@ -0,0 +1,8 @@
+"use client";
+
+var e = {
+	trigger: "_trigger_p0sib_2",
+	content: "_content_p0sib_7"
+};
+//#endregion
+export { e as default };

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

@@ -0,0 +1,21 @@
+"use client";
+
+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";
+//#region ../components/src/icon-button/icon-button.tsx
+var a = i(function({ label: i, icon: a, size: o = "md", variant: s = "ghost", asChild: c = !1, className: l, children: u, ...d }, f) {
+	return /* @__PURE__ */ r(c ? t : "button", {
+		type: c ? void 0 : "button",
+		"aria-label": i,
+		"data-size": o,
+		"data-variant": s,
+		className: n(e.iconButton, l),
+		ref: f,
+		...d,
+		children: u ?? a
+	});
+});
+//#endregion
+export { a as IconButton };

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

@@ -0,0 +1,5 @@
+"use client";
+
+var e = { iconButton: "_iconButton_13zh2_2" };
+//#endregion
+export { e as default };

package/dist/node/image/image.js

@@ -0,0 +1,64 @@
+"use client";
+
+import e from "./image.module.js";
+import { cn as t, createMachine as n, useMachine as r, useSignals as i } from "@cascivo/core";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region ../components/src/image/image.tsx
+var s = n({
+	initial: "loading",
+	states: {
+		loading: { on: {
+			LOADED: "loaded",
+			ERROR: "error"
+		} },
+		loaded: {},
+		error: {}
+	}
+});
+function c({ src: n, alt: c = "", fallbackSrc: l, width: u, height: d, radius: f = "md", zoom: p = !1, removeWrapper: m = !1, isBlurred: h = !1, className: g, style: _, ...v }) {
+	i();
+	let [y, b] = r(s), x = y.value === "error", S = x && !l, C = x && l ? l : n, w = {
+		...u !== void 0 && { inlineSize: u },
+		...d !== void 0 && { blockSize: d }
+	};
+	return m ? /* @__PURE__ */ a("img", {
+		className: t(e.image, g),
+		src: C,
+		alt: c,
+		onLoad: () => b("LOADED"),
+		onError: () => b("ERROR"),
+		style: {
+			...w,
+			..._
+		},
+		...v
+	}) : /* @__PURE__ */ o("span", {
+		"data-state": y.value,
+		"data-radius": f,
+		"data-zoom": p || void 0,
+		"data-blurred": h || void 0,
+		className: t(e.wrapper, g),
+		style: {
+			...w,
+			..._
+		},
+		role: S ? "img" : void 0,
+		"aria-label": S ? c : void 0,
+		children: [y.value === "loading" && /* @__PURE__ */ a("span", {
+			className: e.placeholder,
+			"aria-hidden": "true"
+		}), S ? /* @__PURE__ */ a("span", {
+			className: e.fallback,
+			"aria-hidden": "true"
+		}) : /* @__PURE__ */ a("img", {
+			className: e.image,
+			src: C,
+			alt: c,
+			onLoad: () => b("LOADED"),
+			onError: () => b("ERROR"),
+			...v
+		})]
+	});
+}
+//#endregion
+export { c as Image };

package/dist/node/image/image.module.js

@@ -0,0 +1,11 @@
+"use client";
+
+var e = {
+	wrapper: "_wrapper_1cf1d_2",
+	image: "_image_1cf1d_28",
+	placeholder: "_placeholder_1cf1d_47",
+	"cascade-image-shimmer": "_cascade-image-shimmer_1cf1d_1",
+	fallback: "_fallback_1cf1d_66"
+};
+//#endregion
+export { e as default };

package/dist/node/index.js

@@ -0,0 +1,2 @@
+'use client';
+export * from './react/src/index.js';

package/dist/node/indicator/indicator.js

@@ -0,0 +1,18 @@
+"use client";
+
+import e from "./indicator.module.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region ../components/src/indicator/indicator.tsx
+function r({ children: r, overlay: i, placement: a = "top-end", className: o }) {
+	return /* @__PURE__ */ n("div", {
+		className: [e.indicator, o].filter(Boolean).join(" "),
+		"data-placement": a,
+		children: [r, /* @__PURE__ */ t("div", {
+			className: e.overlay,
+			"aria-hidden": !0,
+			children: i
+		})]
+	});
+}
+//#endregion
+export { r as Indicator };

package/dist/node/indicator/indicator.module.js

@@ -0,0 +1,8 @@
+"use client";
+
+var e = {
+	indicator: "_indicator_12iz3_2",
+	overlay: "_overlay_12iz3_7"
+};
+//#endregion
+export { e as default };

package/dist/node/inline-loading/inline-loading.js

@@ -0,0 +1,76 @@
+"use client";
+
+import { Spinner as e } from "../spinner/spinner.js";
+import t from "./inline-loading.module.js";
+import { cn as n } from "@cascivo/core";
+import { builtin as r, t as i } from "@cascivo/i18n";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region ../components/src/inline-loading/inline-loading.tsx
+function s(e, t) {
+	switch (e) {
+		case "active": return t?.active ?? i(r.inlineLoading.active);
+		case "finished": return t?.finished ?? i(r.inlineLoading.finished);
+		case "error": return t?.error ?? i(r.inlineLoading.error);
+		default: return "";
+	}
+}
+function c({ status: n }) {
+	return n === "active" ? /* @__PURE__ */ a(e, {
+		size: "sm",
+		className: t.spinner
+	}) : n === "finished" ? /* @__PURE__ */ a("svg", {
+		className: t.icon,
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		fill: "none",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ a("path", {
+			d: "M3.5 8.5l3 3 6-7",
+			stroke: "currentColor",
+			strokeWidth: "1.75",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	}) : n === "error" ? /* @__PURE__ */ o("svg", {
+		className: t.icon,
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		fill: "none",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ a("path", {
+			d: "M8 4.5v4M8 11h.01",
+			stroke: "currentColor",
+			strokeWidth: "1.75",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}), /* @__PURE__ */ a("circle", {
+			cx: "8",
+			cy: "8",
+			r: "6.25",
+			stroke: "currentColor",
+			strokeWidth: "1.5"
+		})]
+	}) : null;
+}
+function l({ status: e, label: r, labels: i, className: l, ...u }) {
+	let d = r ?? s(e, i);
+	return /* @__PURE__ */ o("div", {
+		role: "status",
+		"aria-live": "polite",
+		"data-status": e,
+		className: n(t["inline-loading"], l),
+		...u,
+		children: [/* @__PURE__ */ a("span", {
+			className: t.indicator,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ a(c, { status: e })
+		}), d && /* @__PURE__ */ a("span", {
+			className: t.label,
+			children: d
+		})]
+	});
+}
+//#endregion
+export { l as InlineLoading };

package/dist/node/inline-loading/inline-loading.module.js

@@ -0,0 +1,11 @@
+"use client";
+
+var e = {
+	"inline-loading": "_inline-loading_h27o5_2",
+	indicator: "_indicator_h27o5_20",
+	spinner: "_spinner_h27o5_29",
+	icon: "_icon_h27o5_33",
+	label: "_label_h27o5_46"
+};
+//#endregion
+export { e as default };

package/dist/node/input/input.js

@@ -0,0 +1,54 @@
+"use client";
+
+import e from "./input.module.js";
+import { cn as t, createMachine as n, useMachine as r } from "@cascivo/core";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region ../components/src/input/input.tsx
+var o = n({
+	initial: "idle",
+	states: {
+		idle: { on: { FOCUS: "focused" } },
+		focused: { on: { BLUR: "idle" } }
+	}
+});
+function s({ label: n, hint: s, error: c, size: l = "md", className: u, id: d, onFocus: f, onBlur: p, ...m }) {
+	let [h, g] = r(o), _ = d ?? (n ? `cascade-input-${n.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+	return /* @__PURE__ */ a("div", {
+		className: t(e.wrapper, u),
+		"data-state": c ? "error" : h.value,
+		"data-size": l,
+		children: [
+			n && /* @__PURE__ */ i("label", {
+				className: e.label,
+				htmlFor: _,
+				children: n
+			}),
+			/* @__PURE__ */ i("input", {
+				id: _,
+				className: e.input,
+				"aria-invalid": c ? !0 : void 0,
+				"aria-describedby": c ? `${_}-error` : s ? `${_}-hint` : void 0,
+				onFocus: (e) => {
+					g("FOCUS"), f?.(e);
+				},
+				onBlur: (e) => {
+					g("BLUR"), p?.(e);
+				},
+				...m
+			}),
+			c && /* @__PURE__ */ i("span", {
+				id: `${_}-error`,
+				className: e.error,
+				role: "alert",
+				children: c
+			}),
+			!c && s && /* @__PURE__ */ i("span", {
+				id: `${_}-hint`,
+				className: e.hint,
+				children: s
+			})
+		]
+	});
+}
+//#endregion
+export { s as Input };

package/dist/node/input/input.module.js

@@ -0,0 +1,11 @@
+"use client";
+
+var e = {
+	wrapper: "_wrapper_ao79u_2",
+	label: "_label_ao79u_26",
+	input: "_input_ao79u_34",
+	error: "_error_ao79u_77",
+	hint: "_hint_ao79u_84"
+};
+//#endregion
+export { e as default };