@cascivo/react 0.8.0 → 0.10.0

package/dist/node/comparison/comparison.js

@@ -0,0 +1,69 @@
+"use client";
+
+import e from "./comparison.module.js";
+import { cn as t, useControllableSignal 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/comparison/comparison.tsx
+var u = (e) => Math.min(100, Math.max(0, e));
+function d({ after: d, before: f, position: p, defaultPosition: m = 50, onPositionChange: h, orientation: g = "horizontal", keyboardStep: _ = 5, label: v, className: y, ...b }) {
+	i();
+	let x = l(null), S = r(!1), [C, w] = n({
+		value: p,
+		defaultValue: m,
+		onChange: h
+	}), T = Math.round(u(C.value)), E = (e) => {
+		let t = x.current;
+		if (!t) return;
+		let n = t.getBoundingClientRect();
+		w(u(g === "vertical" ? (e.clientY - n.top) / n.height * 100 : (e.clientX - n.left) / n.width * 100));
+	}, D = (e) => {
+		let t = g === "vertical" ? "ArrowUp" : "ArrowLeft", n = g === "vertical" ? "ArrowDown" : "ArrowRight", r = null;
+		e.key === t || e.key === "ArrowLeft" || e.key === "ArrowUp" ? r = T - _ : e.key === n || e.key === "ArrowRight" || e.key === "ArrowDown" ? r = T + _ : e.key === "Home" ? r = 0 : e.key === "End" ? r = 100 : e.key === "PageUp" ? r = T + _ * 2 : e.key === "PageDown" && (r = T - _ * 2), r !== null && (e.preventDefault(), w(u(r)));
+	};
+	return /* @__PURE__ */ c("div", {
+		ref: x,
+		"data-orientation": g,
+		"data-dragging": S.value || void 0,
+		className: t(e.comparison, y),
+		style: { "--position": `${T}%` },
+		onPointerDown: (e) => {
+			S.value = !0, e.currentTarget.setPointerCapture?.(e.pointerId), E(e);
+		},
+		onPointerMove: (e) => {
+			S.value && E(e);
+		},
+		onPointerUp: (e) => {
+			S.value = !1, e.currentTarget.releasePointerCapture?.(e.pointerId);
+		},
+		...b,
+		children: [
+			/* @__PURE__ */ s("div", {
+				className: e.item,
+				children: d
+			}),
+			/* @__PURE__ */ s("div", {
+				className: e.before,
+				"aria-hidden": "true",
+				children: f
+			}),
+			/* @__PURE__ */ s("div", {
+				className: e.divider,
+				children: /* @__PURE__ */ s("div", {
+					role: "slider",
+					tabIndex: 0,
+					"aria-label": v ?? o(a.comparison.label),
+					"aria-orientation": g,
+					"aria-valuemin": 0,
+					"aria-valuemax": 100,
+					"aria-valuenow": T,
+					className: e.handle,
+					onKeyDown: D
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { d as Comparison };

package/dist/node/comparison/comparison.module.js

@@ -0,0 +1,11 @@
+"use client";
+
+var e = {
+	comparison: "_comparison_zo41p_2",
+	item: "_item_zo41p_11",
+	before: "_before_zo41p_12",
+	divider: "_divider_zo41p_36",
+	handle: "_handle_zo41p_56"
+};
+//#endregion
+export { e as default };

package/dist/node/contained-list/contained-list.js

@@ -0,0 +1,41 @@
+"use client";
+
+import e from "./contained-list.module.js";
+import { Slot as t, cn as n } from "@cascivo/core";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region ../components/src/contained-list/contained-list.tsx
+function a({ label: t, kind: a = "on-page", action: o, className: s, children: c, ...l }) {
+	return /* @__PURE__ */ i("div", {
+		"data-kind": a,
+		className: n(e.root, s),
+		...l,
+		children: [/* @__PURE__ */ i("div", {
+			className: e.header,
+			children: [/* @__PURE__ */ r("h3", {
+				className: e.label,
+				children: t
+			}), o ? /* @__PURE__ */ r("div", {
+				className: e.action,
+				children: o
+			}) : null]
+		}), /* @__PURE__ */ r("ul", {
+			className: e.list,
+			children: c
+		})]
+	});
+}
+function o({ asChild: i = !1, onClick: a, className: o, children: s, ...c }) {
+	let l = i || typeof a == "function", u = i ? t : "div";
+	return /* @__PURE__ */ r("li", {
+		className: e.item,
+		"data-interactive": l ? "" : void 0,
+		children: /* @__PURE__ */ r(u, {
+			className: n(e.itemContent, o),
+			onClick: a,
+			...c,
+			children: s
+		})
+	});
+}
+//#endregion
+export { a as ContainedList, o as ContainedListItem };

package/dist/node/contained-list/contained-list.module.js

@@ -0,0 +1,13 @@
+"use client";
+
+var e = {
+	root: "_root_u2rtc_2",
+	header: "_header_u2rtc_11",
+	label: "_label_u2rtc_25",
+	action: "_action_u2rtc_33",
+	list: "_list_u2rtc_39",
+	item: "_item_u2rtc_45",
+	itemContent: "_itemContent_u2rtc_57"
+};
+//#endregion
+export { e as default };

package/dist/node/context-menu/context-menu.js

@@ -0,0 +1,89 @@
+"use client";
+
+import e from "./context-menu.module.js";
+import { useSignal as t, useSignalEffect as n, useSignals as r } from "@cascivo/core";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useRef as o } from "react";
+//#region ../components/src/context-menu/context-menu.tsx
+function s({ children: s }) {
+	r();
+	let c = o(null), l = o(null), u = t(!1), d = () => {
+		let e = c.current;
+		return e ? Array.from(e.querySelectorAll("[role=\"menuitem\"]:not([aria-disabled=\"true\"])")) : [];
+	}, f = (e) => {
+		let t = d();
+		t.length !== 0 && t[e(t, t.indexOf(document.activeElement))]?.focus();
+	}, p = (e) => {
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), f((e, t) => t < 0 ? 0 : (t + 1) % e.length);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), f((e, t) => t < 0 ? e.length - 1 : (t - 1 + e.length) % e.length);
+				break;
+			case "Home":
+				e.preventDefault(), f(() => 0);
+				break;
+			case "End":
+				e.preventDefault(), f((e) => e.length - 1);
+				break;
+		}
+	};
+	n(() => {
+		let e = c.current;
+		if (e) if (u.value) {
+			try {
+				e.showPopover();
+			} catch {}
+			d()[0]?.focus();
+		} else try {
+			e.hidePopover();
+		} catch {}
+	}), n(() => {
+		let e = c.current;
+		if (!e) return;
+		let t = (e) => {
+			e.newState === "closed" && (u.value = !1);
+		};
+		return e.addEventListener("toggle", t), () => e.removeEventListener("toggle", t);
+	});
+	function m(e) {
+		e.preventDefault();
+		let t = l.current;
+		t && (t.style.setProperty("--cascivo-context-x", `${e.clientX}px`), t.style.setProperty("--cascivo-context-y", `${e.clientY}px`), u.value = !0);
+	}
+	let [h, ...g] = Array.isArray(s) ? s : [s];
+	return /* @__PURE__ */ a("div", {
+		ref: l,
+		onContextMenu: m,
+		className: e.wrapper,
+		children: [h, /* @__PURE__ */ i("div", {
+			ref: c,
+			popover: "auto",
+			role: "menu",
+			"data-state": u.value ? "open" : "closed",
+			className: e.menu,
+			onKeyDown: p,
+			children: g
+		})]
+	});
+}
+function c({ children: t, onSelect: n, disabled: r }) {
+	function a() {
+		r || n();
+	}
+	function o(e) {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), a());
+	}
+	return /* @__PURE__ */ i("div", {
+		role: "menuitem",
+		tabIndex: r ? -1 : 0,
+		"aria-disabled": r,
+		onClick: a,
+		onKeyDown: o,
+		className: e.item,
+		children: t
+	});
+}
+//#endregion
+export { s as ContextMenu, c as ContextMenuItem };

package/dist/node/context-menu/context-menu.module.js

@@ -0,0 +1,9 @@
+"use client";
+
+var e = {
+	wrapper: "_wrapper_dfne7_2",
+	menu: "_menu_dfne7_6",
+	item: "_item_dfne7_45"
+};
+//#endregion
+export { e as default };

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

@@ -0,0 +1,58 @@
+"use client";
+
+import e from "./copy-button.module.js";
+import { cn as t, useSignal 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/copy-button/copy-button.tsx
+function c({ value: c, size: l = "md", labels: u, className: d, ...f }) {
+	r();
+	let p = n(!1), m = u?.copy ?? a(i.copyButton.copy), h = u?.copied ?? a(i.copyButton.copied);
+	return /* @__PURE__ */ o("button", {
+		type: "button",
+		"aria-label": p.value ? h : m,
+		"data-state": p.value ? "copied" : "idle",
+		"data-size": l,
+		className: t(e.copyButton, d),
+		onClick: () => {
+			navigator.clipboard.writeText(c), p.value = !0, setTimeout(() => {
+				p.value = !1;
+			}, 2e3);
+		},
+		...f,
+		children: p.value ? /* @__PURE__ */ o("svg", {
+			"aria-hidden": "true",
+			viewBox: "0 0 16 16",
+			className: e.icon,
+			children: /* @__PURE__ */ o("path", {
+				d: "M13.5 4.5 6 12 2.5 8.5",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		}) : /* @__PURE__ */ s("svg", {
+			"aria-hidden": "true",
+			viewBox: "0 0 16 16",
+			className: e.icon,
+			children: [/* @__PURE__ */ o("rect", {
+				x: "5.5",
+				y: "5.5",
+				width: "8",
+				height: "8",
+				rx: "1.5",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.5"
+			}), /* @__PURE__ */ o("path", {
+				d: "M3.5 10.5h-1a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v1",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.5"
+			})]
+		})
+	});
+}
+//#endregion
+export { c as CopyButton };

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

@@ -0,0 +1,8 @@
+"use client";
+
+var e = {
+	copyButton: "_copyButton_w0pqt_2",
+	icon: "_icon_w0pqt_45"
+};
+//#endregion
+export { e as default };

package/dist/node/data-list/data-list.js

@@ -0,0 +1,27 @@
+"use client";
+
+import e from "./data-list.module.js";
+import { cn as t } from "@cascivo/core";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region ../components/src/data-list/data-list.tsx
+function i({ items: i, orientation: a = "horizontal", dividers: o = !1, size: s = "md", className: c, ...l }) {
+	return /* @__PURE__ */ n("dl", {
+		"data-orientation": a,
+		"data-size": s,
+		"data-dividers": o ? "" : void 0,
+		className: t(e.list, c),
+		...l,
+		children: i.map((t, i) => /* @__PURE__ */ r("div", {
+			className: e.row,
+			children: [/* @__PURE__ */ n("dt", {
+				className: e.term,
+				children: t.label
+			}), /* @__PURE__ */ n("dd", {
+				className: e.detail,
+				children: t.value
+			})]
+		}, t.id ?? i))
+	});
+}
+//#endregion
+export { i as DataList };

package/dist/node/data-list/data-list.module.js

@@ -0,0 +1,10 @@
+"use client";
+
+var e = {
+	list: "_list_prsqy_2",
+	row: "_row_prsqy_21",
+	term: "_term_prsqy_45",
+	detail: "_detail_prsqy_51"
+};
+//#endregion
+export { e as default };