@cascivo/react 0.8.0 → 0.10.0

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 };

package/dist/node/input-group/input-group.js

@@ -0,0 +1,41 @@
+"use client";
+
+import e from "./input-group.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region ../components/src/input-group/input-group.tsx
+function i({ align: r = "inline-start", children: i, className: a, ...o }) {
+	return /* @__PURE__ */ n("span", {
+		className: t(e["inline-addon"], a),
+		"data-align": r,
+		"aria-hidden": "true",
+		...o,
+		children: i
+	});
+}
+function a({ prefix: i, suffix: a, children: o, className: s, ...c }) {
+	return /* @__PURE__ */ r("div", {
+		className: t(e["input-group"], s),
+		"data-has-prefix": i ? "" : void 0,
+		"data-has-suffix": a ? "" : void 0,
+		...c,
+		children: [
+			i && /* @__PURE__ */ n("span", {
+				className: e.addon,
+				"data-position": "prefix",
+				children: i
+			}),
+			/* @__PURE__ */ n("span", {
+				className: e["input-wrap"],
+				children: o
+			}),
+			a && /* @__PURE__ */ n("span", {
+				className: e.addon,
+				"data-position": "suffix",
+				children: a
+			})
+		]
+	});
+}
+//#endregion
+export { a as InputGroup, i as InputGroupAddon };

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

@@ -0,0 +1,11 @@
+"use client";
+
+var e = {
+	"input-group": "_input-group_n9tv2_2",
+	"input-wrap": "_input-wrap_n9tv2_8",
+	addon: "_addon_n9tv2_18",
+	"inline-addon": "_inline-addon_n9tv2_55",
+	"button-group": "_button-group_n9tv2_101"
+};
+//#endregion
+export { e as default };

package/dist/node/item/item.js

@@ -0,0 +1,52 @@
+"use client";
+
+import e from "./item.module.js";
+import { Slot as t, cn as n } from "@cascivo/core";
+import { jsx as r } from "react/jsx-runtime";
+//#region ../components/src/item/item.tsx
+function i({ asChild: i = !1, variant: a = "default", size: o = "md", className: s, children: c, ...l }) {
+	return /* @__PURE__ */ r(i ? t : "div", {
+		"data-variant": a,
+		"data-size": o,
+		className: n(e.item, s),
+		...l,
+		children: c
+	});
+}
+function a({ className: t, children: i, ...a }) {
+	return /* @__PURE__ */ r("div", {
+		className: n(e.media, t),
+		...a,
+		children: i
+	});
+}
+function o({ className: t, children: i, ...a }) {
+	return /* @__PURE__ */ r("div", {
+		className: n(e.content, t),
+		...a,
+		children: i
+	});
+}
+function s({ className: t, children: i, ...a }) {
+	return /* @__PURE__ */ r("div", {
+		className: n(e.title, t),
+		...a,
+		children: i
+	});
+}
+function c({ className: t, children: i, ...a }) {
+	return /* @__PURE__ */ r("p", {
+		className: n(e.description, t),
+		...a,
+		children: i
+	});
+}
+function l({ className: t, children: i, ...a }) {
+	return /* @__PURE__ */ r("div", {
+		className: n(e.actions, t),
+		...a,
+		children: i
+	});
+}
+//#endregion
+export { i as Item, l as ItemActions, o as ItemContent, c as ItemDescription, a as ItemMedia, s as ItemTitle };

package/dist/node/item/item.module.js

@@ -0,0 +1,12 @@
+"use client";
+
+var e = {
+	item: "_item_1uxrt_2",
+	media: "_media_1uxrt_30",
+	content: "_content_1uxrt_38",
+	title: "_title_1uxrt_45",
+	description: "_description_1uxrt_51",
+	actions: "_actions_1uxrt_58"
+};
+//#endregion
+export { e as default };

package/dist/node/join/join.js

@@ -0,0 +1,14 @@
+"use client";
+
+import e from "./join.module.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region ../components/src/join/join.tsx
+function n({ children: n, orientation: r = "horizontal", className: i }) {
+	return /* @__PURE__ */ t("div", {
+		className: [e.join, i].filter(Boolean).join(" "),
+		"data-orientation": r,
+		children: n
+	});
+}
+//#endregion
+export { n as Join };

package/dist/node/join/join.module.js

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

package/dist/node/kbd/kbd.js

@@ -0,0 +1,16 @@
+"use client";
+
+import e from "./kbd.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n } from "react/jsx-runtime";
+//#region ../components/src/kbd/kbd.tsx
+function r({ size: r = "md", className: i, children: a, ...o }) {
+	return /* @__PURE__ */ n("kbd", {
+		"data-size": r,
+		className: t(e.kbd, i),
+		...o,
+		children: a
+	});
+}
+//#endregion
+export { r as Kbd };

package/dist/node/kbd/kbd.module.js

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

package/dist/node/label/label.js

@@ -0,0 +1,25 @@
+"use client";
+
+import e from "./label.module.js";
+import { Slot as t, cn as n } from "@cascivo/core";
+import { builtin as r, t as i } from "@cascivo/i18n";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region ../components/src/label/label.tsx
+function c({ asChild: c = !1, required: l = !1, disabled: u = !1, className: d, children: f, labels: p, ...m }) {
+	let h = c ? t : "label", g = p?.required ?? i(r.label.required), _ = l ? /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("span", {
+		className: e.marker,
+		"aria-hidden": "true",
+		children: "*"
+	}), /* @__PURE__ */ o("span", {
+		className: e.srOnly,
+		children: g
+	})] }) : null;
+	return /* @__PURE__ */ o(h, {
+		"data-disabled": u ? "" : void 0,
+		className: n(e.label, d),
+		...m,
+		children: _ ? /* @__PURE__ */ s(a, { children: [f, _] }) : f
+	});
+}
+//#endregion
+export { c as Label };

package/dist/node/label/label.module.js

@@ -0,0 +1,9 @@
+"use client";
+
+var e = {
+	label: "_label_qztdi_2",
+	marker: "_marker_qztdi_18",
+	srOnly: "_srOnly_qztdi_23"
+};
+//#endregion
+export { e as default };

package/dist/node/layouts/src/auto-grid/auto-grid.js

@@ -0,0 +1,19 @@
+"use client";
+
+import e from "./auto-grid.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n } from "react/jsx-runtime";
+//#region ../layouts/src/auto-grid/auto-grid.tsx
+function r({ min: r = "16rem", gap: i = 4, className: a, style: o, ...s }) {
+	return /* @__PURE__ */ n("div", {
+		className: t(e["auto-grid"], a),
+		style: {
+			"--_min": r,
+			"--_gap": `var(--cascivo-space-${i})`,
+			...o
+		},
+		...s
+	});
+}
+//#endregion
+export { r as AutoGrid };

package/dist/node/layouts/src/auto-grid/auto-grid.module.js

@@ -0,0 +1,6 @@
+"use client";
+
+//#region ../layouts/src/auto-grid/auto-grid.module.css
+var e = { "auto-grid": "_auto-grid_v8cqo_2" };
+//#endregion
+export { e as default };

package/dist/node/layouts/src/center/center.js

@@ -0,0 +1,18 @@
+"use client";
+
+import e from "./center.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n } from "react/jsx-runtime";
+//#region ../layouts/src/center/center.tsx
+function r({ maxWidth: r = "48rem", className: i, style: a, ...o }) {
+	return /* @__PURE__ */ n("div", {
+		className: t(e.center, i),
+		style: {
+			"--_center-max": r,
+			...a
+		},
+		...o
+	});
+}
+//#endregion
+export { r as Center };

package/dist/node/layouts/src/center/center.module.js

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

package/dist/node/layouts/src/columns/columns.js

@@ -0,0 +1,23 @@
+"use client";
+
+import e from "./columns.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n } from "react/jsx-runtime";
+//#region ../layouts/src/columns/columns.tsx
+function r({ count: r = 2, gap: i = 4, className: a, style: o, children: s, ...c }) {
+	return /* @__PURE__ */ n("div", {
+		className: t(e["columns-container"], a),
+		style: {
+			"--_cols": String(r),
+			"--_gap": `var(--cascivo-space-${i})`,
+			...o
+		},
+		...c,
+		children: /* @__PURE__ */ n("div", {
+			className: e.columns,
+			children: s
+		})
+	});
+}
+//#endregion
+export { r as Columns };