@cascivo/react 0.8.0 → 0.10.0

package/dist/node/code-snippet/code-snippet.js

@@ -0,0 +1,116 @@
+"use client";
+
+import { tokenize as e } from "./highlight.js";
+import t from "./code-snippet.module.js";
+import { cn as n, useClipboard 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";
+//#region ../components/src/code-snippet/code-snippet.tsx
+function l({ code: n, language: r }) {
+	return /* @__PURE__ */ s("code", {
+		className: t.code,
+		children: e(n, r).map((e, t) => e.type === "text" ? /* @__PURE__ */ s("span", { children: e.value }, t) : /* @__PURE__ */ s("span", {
+			"data-tok": e.type,
+			children: e.value
+		}, t))
+	});
+}
+function u({ code: e, variant: u = "single", language: d, terminal: f = !1, title: p, showLineNumbers: m, showCopyButton: h, labels: g, className: _ }) {
+	i();
+	let { copied: v, copy: y } = r(), b = g?.copy ?? o(a.codeSnippet.copy), x = g?.copied ?? o(a.codeSnippet.copied), S = h ?? u !== "inline" ? /* @__PURE__ */ s("button", {
+		type: "button",
+		"aria-label": v.value ? x : b,
+		"data-state": v.value ? "copied" : "idle",
+		className: t.copy,
+		onClick: () => void y(e),
+		children: v.value ? /* @__PURE__ */ s("svg", {
+			"aria-hidden": "true",
+			viewBox: "0 0 16 16",
+			className: t.icon,
+			children: /* @__PURE__ */ s("path", {
+				d: "M13.5 4.5 6 12 2.5 8.5",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		}) : /* @__PURE__ */ c("svg", {
+			"aria-hidden": "true",
+			viewBox: "0 0 16 16",
+			className: t.icon,
+			children: [/* @__PURE__ */ s("rect", {
+				x: "5.5",
+				y: "5.5",
+				width: "8",
+				height: "8",
+				rx: "1.5",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.5"
+			}), /* @__PURE__ */ s("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"
+			})]
+		})
+	}) : null;
+	if (u === "inline") return /* @__PURE__ */ c("span", {
+		className: n(t.root, _),
+		"data-variant": "inline",
+		children: [/* @__PURE__ */ s("code", {
+			className: t.inlineCode,
+			children: e
+		}), S]
+	});
+	let C = e.split("\n"), w = u === "multi" && m && !d;
+	return /* @__PURE__ */ c("div", {
+		className: n(t.root, _),
+		"data-variant": u,
+		"data-terminal": f ? "" : void 0,
+		children: [
+			f && /* @__PURE__ */ c("div", {
+				className: t.bar,
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ c("span", {
+					className: t.dots,
+					children: [
+						/* @__PURE__ */ s("span", { className: t.dot }),
+						/* @__PURE__ */ s("span", { className: t.dot }),
+						/* @__PURE__ */ s("span", { className: t.dot })
+					]
+				}), p && /* @__PURE__ */ s("span", {
+					className: t.title,
+					children: p
+				})]
+			}),
+			/* @__PURE__ */ s("pre", {
+				className: t.pre,
+				children: w ? /* @__PURE__ */ s("code", {
+					className: t.code,
+					children: C.map((e, n) => /* @__PURE__ */ c("span", {
+						className: t.line,
+						children: [/* @__PURE__ */ s("span", {
+							"aria-hidden": "true",
+							className: t.lineNumber,
+							children: n + 1
+						}), /* @__PURE__ */ s("span", {
+							className: t.lineText,
+							children: e
+						})]
+					}, n))
+				}) : d ? /* @__PURE__ */ s(l, {
+					code: e,
+					language: d
+				}) : /* @__PURE__ */ s("code", {
+					className: t.code,
+					children: e
+				})
+			}),
+			S
+		]
+	});
+}
+//#endregion
+export { u as CodeSnippet };

package/dist/node/code-snippet/code-snippet.module.js

@@ -0,0 +1,19 @@
+"use client";
+
+var e = {
+	root: "_root_4lyzf_2",
+	inlineCode: "_inlineCode_4lyzf_12",
+	pre: "_pre_4lyzf_23",
+	code: "_code_4lyzf_44",
+	line: "_line_4lyzf_49",
+	lineNumber: "_lineNumber_4lyzf_54",
+	lineText: "_lineText_4lyzf_62",
+	copy: "_copy_4lyzf_66",
+	icon: "_icon_4lyzf_106",
+	bar: "_bar_4lyzf_153",
+	dots: "_dots_4lyzf_163",
+	dot: "_dot_4lyzf_163",
+	title: "_title_4lyzf_187"
+};
+//#endregion
+export { e as default };

package/dist/node/code-snippet/highlight.js

@@ -0,0 +1,69 @@
+"use client";
+
+//#region ../components/src/code-snippet/highlight.ts
+function e(e) {
+	return e.map(([e, t]) => ({
+		type: e,
+		re: RegExp(`^(?:${t})`)
+	}));
+}
+var t = "\"(?:[^\"\\\\]|\\\\.)*\"|'(?:[^'\\\\]|\\\\.)*'", n = "`(?:[^`\\\\]|\\\\.)*`", r = "const|let|var|function|return|if|else|for|while|do|switch|case|break|continue|new|class|extends|super|import|export|from|default|async|await|yield|typeof|instanceof|in|of|void|delete|this|null|true|false|undefined", i = `${r}|interface|type|as|readonly|enum|implements|public|private|protected|abstract|namespace|declare|satisfies|keyof|infer|is|string|number|boolean|unknown|never|any`, a = {
+	bash: e([
+		["comment", "#[^\\n]*"],
+		["string", t],
+		["prompt", "\\$(?= )"],
+		["keyword", "\\b(?:npx|npm|pnpm|yarn|bun|deno|node|git|cd|ls|cat|echo|export|sudo|mkdir|rm|cp|mv|curl|wget|chmod|source)\\b"],
+		["variable", "--?[A-Za-z][\\w-]*"],
+		["number", "\\b\\d+(?:\\.\\d+)?\\b"]
+	]),
+	css: e([
+		["comment", "/\\*[\\s\\S]*?\\*/"],
+		["string", t],
+		["keyword", "@[\\w-]+"],
+		["variable", "--[\\w-]+"],
+		["fn", "[\\w-]+(?=\\()"],
+		["number", "#[0-9a-fA-F]{3,8}\\b|-?\\d*\\.?\\d+(?:[a-z%]+)?"],
+		["punct", "[{}();:,]"]
+	]),
+	js: e([
+		["comment", "//[^\\n]*|/\\*[\\s\\S]*?\\*/"],
+		["string", `${t}|${n}`],
+		["keyword", `\\b(?:${r})\\b`],
+		["fn", "[A-Za-z_$][\\w$]*(?=\\()"],
+		["number", "-?\\d*\\.?\\d+"],
+		["punct", "[{}()\\[\\];:,.]|=>"]
+	]),
+	ts: e([
+		["comment", "//[^\\n]*|/\\*[\\s\\S]*?\\*/"],
+		["string", `${t}|${n}`],
+		["keyword", `\\b(?:${i})\\b`],
+		["fn", "[A-Za-z_$][\\w$]*(?=\\()"],
+		["number", "-?\\d*\\.?\\d+"],
+		["punct", "[{}()\\[\\];:,.]|=>"]
+	])
+};
+function o(e, t) {
+	let n = a[t], r = [], i = e, o = "", s = () => {
+		o &&= (r.push({
+			type: "text",
+			value: o
+		}), "");
+	};
+	for (; i.length > 0;) {
+		let e = !1;
+		for (let { type: t, re: a } of n) {
+			let n = a.exec(i);
+			if (n && n[0].length > 0) {
+				s(), r.push({
+					type: t,
+					value: n[0]
+				}), i = i.slice(n[0].length), e = !0;
+				break;
+			}
+		}
+		e || (o += i[0], i = i.slice(1));
+	}
+	return s(), r;
+}
+//#endregion
+export { o as tokenize };

package/dist/node/collapsible/collapsible.js

@@ -0,0 +1,42 @@
+"use client";
+
+import e from "./collapsible.module.js";
+import { cn as t, useControllableSignal as n, useSignals as r } from "@cascivo/core";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useId as o } from "react";
+//#region ../components/src/collapsible/collapsible.tsx
+function s({ open: s, defaultOpen: c = !1, onOpenChange: l, trigger: u, disabled: d = !1, className: f, children: p }) {
+	r();
+	let [m, h] = n({
+		...s === void 0 ? {} : { value: s },
+		defaultValue: c,
+		...l ? { onChange: l } : {}
+	}), g = o(), _ = `${g}-content`, v = `${g}-trigger`, y = m.value;
+	return /* @__PURE__ */ a("div", {
+		"data-state": y ? "open" : "closed",
+		className: t(e.root, f),
+		children: [/* @__PURE__ */ i("button", {
+			type: "button",
+			id: v,
+			"aria-expanded": y,
+			"aria-controls": _,
+			disabled: d,
+			"data-state": y ? "open" : "closed",
+			className: e.trigger,
+			onClick: () => h(!y),
+			children: u
+		}), /* @__PURE__ */ i("div", {
+			id: _,
+			role: "region",
+			"aria-labelledby": v,
+			"data-state": y ? "open" : "closed",
+			className: e.content,
+			children: /* @__PURE__ */ i("div", {
+				className: e.contentInner,
+				children: p
+			})
+		})]
+	});
+}
+//#endregion
+export { s as Collapsible };

package/dist/node/collapsible/collapsible.module.js

@@ -0,0 +1,10 @@
+"use client";
+
+var e = {
+	root: "_root_j549b_2",
+	trigger: "_trigger_j549b_7",
+	content: "_content_j549b_39",
+	contentInner: "_contentInner_j549b_58"
+};
+//#endregion
+export { e as default };

package/dist/node/color-picker/color-picker.js

@@ -0,0 +1,268 @@
+"use client";
+
+import e from "./color-picker.module.js";
+import { cn as t, useControllableSignal 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 { 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/color-picker/color-picker.tsx
+function p(e, t, n) {
+	return Math.min(n, Math.max(t, e));
+}
+function m(e) {
+	let t = e.trim().replace(/^#/, "");
+	t.length === 3 && (t = t[0] + t[0] + t[1] + t[1] + t[2] + t[2]), t.length === 4 && (t = t[0] + t[0] + t[1] + t[1] + t[2] + t[2] + t[3] + t[3]);
+	let n = parseInt(t.slice(0, 2), 16), r = parseInt(t.slice(2, 4), 16), i = parseInt(t.slice(4, 6), 16), a = t.length >= 8 ? parseInt(t.slice(6, 8), 16) / 255 : 1;
+	return Number.isNaN(n) || Number.isNaN(r) || Number.isNaN(i) ? {
+		r: 0,
+		g: 0,
+		b: 0,
+		a: 1
+	} : {
+		r: n,
+		g: r,
+		b: i,
+		a
+	};
+}
+function h({ r: e, g: t, b: n, a: r }, i) {
+	let a = (e) => p(Math.round(e), 0, 255).toString(16).padStart(2, "0"), o = `#${a(e)}${a(t)}${a(n)}`;
+	return !i || r >= 1 ? o : o + a(r * 255);
+}
+function g({ r: e, g: t, b: n, a: r }) {
+	let i = e / 255, a = t / 255, o = n / 255, s = Math.max(i, a, o), c = Math.min(i, a, o), l = s - c, u = 0;
+	l !== 0 && (u = s === i ? (a - o) / l % 6 : s === a ? (o - i) / l + 2 : (i - a) / l + 4, u *= 60, u < 0 && (u += 360));
+	let d = (s + c) / 2, f = l === 0 ? 0 : l / (1 - Math.abs(2 * d - 1));
+	return {
+		h: u,
+		s: f * 100,
+		l: d * 100,
+		a: r
+	};
+}
+function _({ h: e, s: t, l: n, a: r }) {
+	let i = t / 100, a = n / 100, o = (1 - Math.abs(2 * a - 1)) * i, s = o * (1 - Math.abs(e / 60 % 2 - 1)), c = a - o / 2, l = 0, u = 0, d = 0;
+	return e < 60 ? [l, u, d] = [
+		o,
+		s,
+		0
+	] : e < 120 ? [l, u, d] = [
+		s,
+		o,
+		0
+	] : e < 180 ? [l, u, d] = [
+		0,
+		o,
+		s
+	] : e < 240 ? [l, u, d] = [
+		0,
+		s,
+		o
+	] : e < 300 ? [l, u, d] = [
+		s,
+		0,
+		o
+	] : [l, u, d] = [
+		o,
+		0,
+		s
+	], {
+		r: (l + c) * 255,
+		g: (u + c) * 255,
+		b: (d + c) * 255,
+		a: r
+	};
+}
+function v({ value: v, defaultValue: y, onValueChange: b, presets: x, alpha: S = !0, label: C, disabled: w, size: T = "md", className: E, labels: D }) {
+	a();
+	let O = d(), [k, A] = n({
+		value: v,
+		defaultValue: y ?? "#3b82f6",
+		onChange: b
+	}), j = f(null), M = r(!1), N = g(m(k.value)), P = (e) => {
+		A(h(_(e), S));
+	}, F = (e, t) => {
+		let n = j.current;
+		if (!n) return;
+		let r = n.getBoundingClientRect(), i = p((e - r.left) / r.width, 0, 1), a = p((t - r.top) / r.height, 0, 1);
+		P({
+			h: N.h,
+			s: i * 100,
+			l: (1 - a) * 100,
+			a: N.a
+		});
+	};
+	i(() => {
+		if (!M.value) return;
+		let e = (e) => F(e.clientX, e.clientY), t = () => {
+			M.value = !1;
+		};
+		return window.addEventListener("pointermove", e), window.addEventListener("pointerup", t), () => {
+			window.removeEventListener("pointermove", e), window.removeEventListener("pointerup", t);
+		};
+	});
+	let I = (e) => {
+		let t = e.shiftKey ? 10 : 2, { s: n, l: r } = N;
+		if (e.key === "ArrowLeft") n -= t;
+		else if (e.key === "ArrowRight") n += t;
+		else if (e.key === "ArrowUp") r += t;
+		else if (e.key === "ArrowDown") r -= t;
+		else return;
+		e.preventDefault(), P({
+			h: N.h,
+			s: p(n, 0, 100),
+			l: p(r, 0, 100),
+			a: N.a
+		});
+	}, L = (e, t) => {
+		!x || x.length === 0 || A(x[(t + e + x.length) % x.length]);
+	}, R = typeof window < "u" ? window.EyeDropper : void 0, z = () => {
+		R && new R().open().then((e) => A(e.sRGBHex));
+	}, B = {
+		hue: D?.hue ?? s(o.colorPicker.hue),
+		alpha: D?.alpha ?? s(o.colorPicker.alpha),
+		colorArea: D?.colorArea ?? s(o.colorPicker.colorArea),
+		eyedropper: D?.eyedropper ?? s(o.colorPicker.eyedropper)
+	}, V = h(m(k.value), !1), H = `hsl(${N.h} 100% 50%)`;
+	return /* @__PURE__ */ u("div", {
+		className: t(e.picker, E),
+		"data-size": T,
+		"data-disabled": w || void 0,
+		children: [
+			C && /* @__PURE__ */ l("span", {
+				className: e.label,
+				id: `${O}-label`,
+				children: C
+			}),
+			/* @__PURE__ */ l("div", {
+				ref: j,
+				className: e.area,
+				role: "slider",
+				"aria-label": B.colorArea,
+				"aria-valuetext": V,
+				"aria-disabled": w || void 0,
+				tabIndex: w ? -1 : 0,
+				style: { background: H },
+				onPointerDown: (e) => {
+					w || (e.preventDefault(), M.value = !0, F(e.clientX, e.clientY));
+				},
+				onKeyDown: I,
+				children: /* @__PURE__ */ l("span", {
+					className: e.thumb,
+					style: {
+						insetInlineStart: `${N.s}%`,
+						insetBlockStart: `${100 - N.l}%`,
+						backgroundColor: V
+					}
+				})
+			}),
+			/* @__PURE__ */ u("div", {
+				className: e.sliders,
+				children: [
+					/* @__PURE__ */ l("label", {
+						className: e.srOnly,
+						htmlFor: `${O}-hue`,
+						children: B.hue
+					}),
+					/* @__PURE__ */ l("input", {
+						id: `${O}-hue`,
+						className: e.hue,
+						type: "range",
+						min: 0,
+						max: 360,
+						step: 1,
+						value: Math.round(N.h),
+						disabled: w,
+						"aria-label": B.hue,
+						onChange: (e) => P({
+							h: Number(e.target.value),
+							s: N.s,
+							l: N.l,
+							a: N.a
+						})
+					}),
+					S && /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("label", {
+						className: e.srOnly,
+						htmlFor: `${O}-alpha`,
+						children: B.alpha
+					}), /* @__PURE__ */ l("input", {
+						id: `${O}-alpha`,
+						className: e.alpha,
+						type: "range",
+						min: 0,
+						max: 1,
+						step: .01,
+						value: N.a,
+						disabled: w,
+						"aria-label": B.alpha,
+						style: { "--cascivo-color-picker-solid": V },
+						onChange: (e) => P({
+							h: N.h,
+							s: N.s,
+							l: N.l,
+							a: Number(e.target.value)
+						})
+					})] })
+				]
+			}),
+			x && x.length > 0 && /* @__PURE__ */ l("div", {
+				className: e.presets,
+				role: "group",
+				"aria-label": B.colorArea,
+				children: x.map((t, n) => /* @__PURE__ */ l("button", {
+					type: "button",
+					className: e.preset,
+					style: { backgroundColor: t },
+					"aria-label": t,
+					"aria-pressed": t.toLowerCase() === k.value.toLowerCase(),
+					disabled: w,
+					onClick: () => A(t),
+					onKeyDown: (e) => {
+						e.key === "ArrowRight" ? (e.preventDefault(), L(1, n)) : e.key === "ArrowLeft" && (e.preventDefault(), L(-1, n));
+					}
+				}, t))
+			}),
+			/* @__PURE__ */ u("div", {
+				className: e.row,
+				children: [
+					/* @__PURE__ */ l("span", {
+						className: e.preview,
+						style: { backgroundColor: k.value },
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ l("input", {
+						className: e.text,
+						type: "text",
+						value: k.value,
+						disabled: w,
+						"aria-label": C ?? B.colorArea,
+						onChange: (e) => A(e.target.value)
+					}),
+					R && /* @__PURE__ */ l("button", {
+						type: "button",
+						className: e.eyedropper,
+						"aria-label": B.eyedropper,
+						disabled: w,
+						onClick: z,
+						children: /* @__PURE__ */ l("svg", {
+							width: "16",
+							height: "16",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ l("path", {
+								d: "m2 22 1-1h3l9-9M3 21v-3l9-9m1.5 1.5-2-2M19 2l3 3-9 9-3-3z",
+								stroke: "currentColor",
+								strokeWidth: "2",
+								strokeLinecap: "round",
+								strokeLinejoin: "round"
+							})
+						})
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { v as ColorPicker };

package/dist/node/color-picker/color-picker.module.js

@@ -0,0 +1,20 @@
+"use client";
+
+var e = {
+	picker: "_picker_1ehlq_2",
+	label: "_label_1ehlq_27",
+	srOnly: "_srOnly_1ehlq_34",
+	area: "_area_1ehlq_46",
+	thumb: "_thumb_1ehlq_63",
+	sliders: "_sliders_1ehlq_74",
+	hue: "_hue_1ehlq_80",
+	alpha: "_alpha_1ehlq_81",
+	presets: "_presets_1ehlq_136",
+	preset: "_preset_1ehlq_136",
+	row: "_row_1ehlq_161",
+	preview: "_preview_1ehlq_167",
+	text: "_text_1ehlq_175",
+	eyedropper: "_eyedropper_1ehlq_193"
+};
+//#endregion
+export { e as default };