@nexa-stack/framework 1.0.0 → 1.1.0

package/ui/echarts-nexa-BY8eW9ug.js

@@ -0,0 +1,456 @@
+//#region resources/ui/src/components/helpers.ts
+var e = (e, t) => e.includes(t);
+function t(e, t = /[,;]/) {
+	return e ? e.split(t).map((e) => e.trim()).filter(Boolean) : [];
+}
+function n(e) {
+	if (!e.includes("|") && !e.includes("/")) return e;
+	let t = e.split("||").map((e) => e.trim()).filter(Boolean), n = (e) => {
+		if (e.includes("/")) {
+			let [t, ...n] = e.split("/"), r = n.join("/").trim();
+			if (r.includes("|")) {
+				let e = r.split("|").map((e) => e.trim()).filter(Boolean);
+				if (e.length >= 2) return `${t.trim()} ${e.slice(0, -1).join(" ")} <em>${e[e.length - 1]}</em>`;
+			}
+			return `${t.trim()} <em>${r}</em>`;
+		}
+		if (!e.includes("|")) return e;
+		let t = e.split("|").map((e) => e.trim()).filter(Boolean);
+		return t.length === 3 ? `${t[0]} <em>${t[1]}</em> ${t[2]}` : t.length === 2 ? `${t[0]} <em>${t[1]}</em>` : t.map((e, t, n) => t === n.length - 1 ? `<em>${e}</em>` : e).join(" ");
+	};
+	return t.length > 1 ? t.map(n).join("<br>") : n(t[0] ?? e);
+}
+function r(e, n = ";") {
+	return t(e, n).map((e) => {
+		let [t, ...n] = e.split("|");
+		return {
+			head: t?.trim() ?? "",
+			body: n.join("|").trim()
+		};
+	});
+}
+function i(e) {
+	let n = e.getAttribute("plans"), r = Number(e.getAttribute("popular") ?? "1");
+	return n ? t(n, ";").map((e, n) => {
+		let [i, a, o, s, c] = e.split("|");
+		return {
+			name: i?.trim() ?? "Plan",
+			price: a?.trim() ?? "0",
+			desc: o?.trim() ?? "",
+			features: t(s ?? "", /,/),
+			cta: c?.trim() ?? "Choose",
+			popular: n === r
+		};
+	}) : [
+		{
+			name: "STARTER",
+			price: "0",
+			desc: "For personal projects and quick starts.",
+			features: [
+				"Core components",
+				"Responsive themes",
+				"Community updates"
+			],
+			cta: "Start free"
+		},
+		{
+			name: "PRO",
+			price: "19",
+			desc: "For real products and ambitious teams.",
+			features: [
+				"All widgets + pickers",
+				"Featured presets",
+				"Priority updates"
+			],
+			cta: "Choose Pro",
+			popular: !0
+		},
+		{
+			name: "STUDIO",
+			price: "49",
+			desc: "For agencies shipping many experiences.",
+			features: [
+				"Unlimited projects",
+				"Custom tokens",
+				"Team license"
+			],
+			cta: "Choose Studio"
+		}
+	];
+}
+function a(e, n) {
+	let r = e.getAttribute("items");
+	return r ? t(r, ";").slice(0, n).map((e, t) => {
+		let n = e.split("|").map((e) => e.trim()).filter(Boolean);
+		return n.length >= 3 ? [
+			n[0],
+			n[1],
+			n.slice(2).join(" | ")
+		] : n.length === 2 ? [
+			String(t + 1).padStart(2, "0"),
+			n[0],
+			n[1]
+		] : [
+			String(t + 1).padStart(2, "0"),
+			n[0] ?? "Feature",
+			"One short command."
+		];
+	}) : [
+		[
+			"01",
+			"Exceptional speed",
+			"Lightweight core — no heavy dependencies."
+		],
+		[
+			"02",
+			"Adaptive design",
+			"Looks great on every screen and direction."
+		],
+		[
+			"03",
+			"Scalable registry",
+			"Clear components that grow with your product."
+		],
+		[
+			"04",
+			"Living color map",
+			"One seed color dresses every widget."
+		]
+	].slice(0, n);
+}
+function o(e, n) {
+	let r = t(e.getAttribute("links") ?? e.getAttribute("nav"));
+	return (r.length ? r : n).map((e) => {
+		let [t, n] = e.split("|").map((e) => e.trim());
+		return `<a href="${n || "#"}">${t}</a>`;
+	}).join("");
+}
+//#endregion
+//#region resources/ui/src/components/charts.ts
+var s = 0;
+function c(e) {
+	return s += 1, `${e}${s}`;
+}
+function l(e) {
+	let n = r(e);
+	return n.length ? n.map((e) => {
+		let t = Number(e.body.replace(/[^0-9.-]/g, ""));
+		return {
+			label: e.head || "—",
+			value: Number.isFinite(t) ? t : 0
+		};
+	}).filter((e) => e.label) : t(e).map((e, t) => {
+		let n = Number(e.replace(/[^0-9.-]/g, ""));
+		return {
+			label: String(t + 1),
+			value: Number.isFinite(n) ? n : 0
+		};
+	});
+}
+function u(e) {
+	return Math.max(1, ...e.map((e) => e.value));
+}
+function d(e, t) {
+	let n = t <= 1 ? 0 : e / (t - 1);
+	return n < .33 ? "var(--nexa-cyan,#00c6ff)" : n < .66 ? "var(--nexa-sky,#2e9eff)" : "var(--nexa-violet,#7c5cfc)";
+}
+function f(e, t) {
+	let n = u(e);
+	return `<div class="nexa-chart-bars" role="img" aria-label="Bar chart">${e.map((r, i) => `<div class="nexa-chart-bar" style="--h:${Math.round(r.value / n * 100)}%;--c:${d(i, e.length)};${t ? `--d:${i * 60}ms` : ""}"><i></i><b>${r.value}</b><span>${r.label}</span></div>`).join("")}</div>`;
+}
+function p(e, t, n) {
+	let r = u(e), i = e.length <= 1 ? 0 : 92 / Math.max(1, e.length - 1), a = e.map((e, t) => ({
+		x: 4 + t * i,
+		y: 52 - e.value / r * 48,
+		p: e
+	})), o = a.map((e, t) => `${t ? "L" : "M"}${e.x.toFixed(2)} ${e.y.toFixed(2)}`).join(" "), s = `M${a[0]?.x.toFixed(2) ?? 4} 52 ${a.map((e) => `L${e.x.toFixed(2)} ${e.y.toFixed(2)}`).join(" ")} L${a.at(-1)?.x.toFixed(2) ?? 96} 52 Z`, l = a.map((e, t) => `<circle class="nexa-chart-dot" cx="${e.x}" cy="${e.y}" r="1.6" style="--d:${t * 50}ms"><title>${e.p.label}: ${e.p.value}</title></circle>`).join(""), d = c("nexaLine"), f = c("nexaArea"), p = `<div class="nexa-chart-x">${e.map((e) => `<span>${e.label}</span>`).join("")}</div>`;
+	return `<div class="nexa-chart-line ${t ? "is-area" : ""} ${n ? "is-anim" : ""}" role="img" aria-label="${t ? "Area" : "Line"} chart">
+  <svg viewBox="0 0 100 56" preserveAspectRatio="none" aria-hidden="true">
+   <defs>
+    <linearGradient id="${d}" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#00c6ff"/><stop offset="50%" stop-color="#2e9eff"/><stop offset="100%" stop-color="#7c5cfc"/></linearGradient>
+    <linearGradient id="${f}" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#2e9eff" stop-opacity=".35"/><stop offset="100%" stop-color="#7c5cfc" stop-opacity="0"/></linearGradient>
+   </defs>
+   ${t ? `<path class="nexa-chart-area" d="${s}" fill="url(#${f})"/>` : ""}
+   <path class="nexa-chart-path" d="${o}" fill="none" stroke="url(#${d})" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+   ${l}
+  </svg>${p}</div>`;
+}
+function m(e, t) {
+	let n = e.reduce((e, t) => e + t.value, 0) || 1, r = 2 * Math.PI * 42, i = 0, a = e.map((t, a) => {
+		let o = t.value / n * r, s = `${o} ${r - o}`, c = `<circle class="nexa-chart-ring" r="42" cx="50" cy="50" stroke="${d(a, e.length)}" stroke-dasharray="${s}" stroke-dashoffset="${-i}" pathLength="${r}" style="--len:${o};--gap:${r - o};--off:${-i};--d:${a * 80}ms"><title>${t.label}: ${t.value}</title></circle>`;
+		return i += o, c;
+	}).join(""), o = e.map((t, r) => `<li style="--c:${d(r, e.length)}"><i></i><span>${t.label}</span><b>${Math.round(t.value / n * 100)}%</b></li>`).join("");
+	return `<div class="nexa-chart-donut ${t ? "is-anim" : ""}" role="img" aria-label="Donut chart">
+  <svg viewBox="0 0 100 100" aria-hidden="true">
+   <circle class="nexa-chart-ring-bg" r="42" cx="50" cy="50"/>
+   ${a}
+   <text x="50" y="48" text-anchor="middle" class="nexa-chart-donut-val">${n}</text>
+   <text x="50" y="58" text-anchor="middle" class="nexa-chart-donut-lbl">TOTAL</text>
+  </svg>
+  <ul class="nexa-chart-legend">${o}</ul>
+ </div>`;
+}
+function h(e) {
+	let t = u(e), n = e.length <= 1 ? 0 : 116 / Math.max(1, e.length - 1), r = e.map((e, r) => {
+		let i = 2 + r * n, a = 26 - e.value / t * 24;
+		return `${r ? "L" : "M"}${i.toFixed(1)} ${a.toFixed(1)}`;
+	}).join(" "), i = c("nexaSpark");
+	return `<div class="nexa-chart-spark" role="img" aria-label="Sparkline"><svg viewBox="0 0 120 28" preserveAspectRatio="none"><defs><linearGradient id="${i}" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="#00c6ff"/><stop offset="100%" stop-color="#7c5cfc"/></linearGradient></defs><path d="${r}" fill="none" stroke="url(#${i})" stroke-width="2" stroke-linecap="round"/></svg></div>`;
+}
+var g = {
+	bar: "Jan|42;Feb|58;Mar|71;Apr|65;May|88;Jun|96",
+	line: "Mon|12;Tue|19;Wed|15;Thu|28;Fri|24;Sat|32;Sun|30",
+	area: "W1|40;W2|55;W3|48;W4|72;W5|68;W6|90",
+	donut: "Pro|48;Studio|27;Starter|25",
+	spark: "12,18,14,22,19,28,26,34,30,38"
+};
+function _(t) {
+	t.register("chart", ({ modifiers: t, element: n }) => {
+		let r = [
+			"bar",
+			"line",
+			"area",
+			"donut",
+			"pie",
+			"spark",
+			"sparkline"
+		].find((n) => e(t, n)) ?? "bar", i = r === "pie" ? "donut" : r === "sparkline" ? "spark" : r;
+		n.classList.add(`is-${i}`);
+		let a = !e(t, "static");
+		a && n.classList.add("is-anim");
+		let o = n.getAttribute("title") ?? n.getAttribute("label") ?? "", s = n.getAttribute("subtitle") ?? n.getAttribute("desc") ?? "", c = n.getAttribute("data") ?? n.getAttribute("values") ?? n.getAttribute("series") ?? g[i] ?? g.bar, u = i === "spark" ? c.includes("|") ? l(c) : l(c.split(/[,;\s]+/).filter(Boolean).map((e, t) => `${t + 1}|${e}`).join(";")) : l(c), d = o || s ? `<header class="nexa-chart-head">${o ? `<h3>${o}</h3>` : ""}${s ? `<p>${s}</p>` : ""}</header>` : "";
+		if (!e(t, "pro")) {
+			let e = "";
+			return e = i === "bar" ? f(u, a) : i === "line" ? p(u, !1, a) : i === "area" ? p(u, !0, a) : i === "donut" ? m(u, a) : h(u), n.classList.add("is-css"), `<div class="nexa-chart-card">${d}${e}</div>`;
+		}
+		n.classList.add("is-echarts");
+		let _ = a ? "" : " data-static=\"true\"";
+		return `<div class="nexa-chart-card is-pro">${d}${`<div class="nexa-echart-host" data-nexa-echart="${i}" data-chart="${((e) => e.replace(/&/g, "&amp;").replace(/"/g, "&quot;"))(c)}"${_} role="img" aria-label="${i} chart"></div>`}</div>`;
+	});
+}
+//#endregion
+//#region resources/ui/src/core/echarts-nexa.ts
+var v = {
+	color: [
+		"#00C6FF",
+		"#2E9EFF",
+		"#2563EB",
+		"#7C5CFC",
+		"#a78bfa",
+		"#38bdf8"
+	],
+	backgroundColor: "transparent",
+	textStyle: {
+		fontFamily: "Inter,Segoe UI,system-ui,sans-serif",
+		color: "#5B6478"
+	},
+	title: { textStyle: {
+		color: "#0B1220",
+		fontWeight: 700
+	} },
+	legend: { textStyle: { color: "#5B6478" } },
+	grid: {
+		left: 12,
+		right: 12,
+		top: 48,
+		bottom: 28,
+		containLabel: !0
+	},
+	categoryAxis: {
+		axisLine: { lineStyle: { color: "rgba(11,18,32,.08)" } },
+		axisTick: { show: !1 },
+		axisLabel: {
+			color: "#5B6478",
+			fontSize: 11
+		},
+		splitLine: { lineStyle: { color: "rgba(11,18,32,.06)" } }
+	},
+	valueAxis: {
+		axisLine: { show: !1 },
+		axisTick: { show: !1 },
+		axisLabel: {
+			color: "#5B6478",
+			fontSize: 11
+		},
+		splitLine: { lineStyle: { color: "rgba(11,18,32,.06)" } }
+	}
+}, y = {
+	type: "linear",
+	x: 0,
+	y: 0,
+	x2: 1,
+	y2: 0,
+	colorStops: [
+		{
+			offset: 0,
+			color: "#00C6FF"
+		},
+		{
+			offset: .5,
+			color: "#2E9EFF"
+		},
+		{
+			offset: 1,
+			color: "#7C5CFC"
+		}
+	]
+};
+function b(e, t, n = !0) {
+	let r = t.map((e) => e.label), i = t.map((e) => e.value), a = {
+		animation: n,
+		backgroundColor: "transparent"
+	};
+	return e === "spark" ? {
+		...a,
+		grid: {
+			left: 0,
+			right: 0,
+			top: 4,
+			bottom: 4
+		},
+		xAxis: {
+			type: "category",
+			show: !1,
+			data: r
+		},
+		yAxis: {
+			type: "value",
+			show: !1
+		},
+		series: [{
+			type: "line",
+			data: i,
+			smooth: !0,
+			symbol: "none",
+			lineStyle: {
+				width: 2,
+				color: "#2E9EFF"
+			},
+			areaStyle: { color: {
+				type: "linear",
+				x: 0,
+				y: 0,
+				x2: 0,
+				y2: 1,
+				colorStops: [{
+					offset: 0,
+					color: "rgba(46,158,255,.28)"
+				}, {
+					offset: 1,
+					color: "rgba(124,92,252,0)"
+				}]
+			} }
+		}]
+	} : e === "donut" || e === "pie" ? {
+		...a,
+		tooltip: { trigger: "item" },
+		legend: {
+			bottom: 0,
+			icon: "circle",
+			itemWidth: 8,
+			itemHeight: 8
+		},
+		series: [{
+			type: "pie",
+			radius: e === "donut" ? ["46%", "72%"] : ["0%", "72%"],
+			itemStyle: {
+				borderRadius: 6,
+				borderColor: "#fff",
+				borderWidth: 2
+			},
+			label: { show: !1 },
+			emphasis: {
+				scale: !0,
+				scaleSize: 6
+			},
+			data: t.map((e, t) => ({
+				name: e.label,
+				value: e.value,
+				itemStyle: { color: [
+					"#00C6FF",
+					"#2E9EFF",
+					"#2563EB",
+					"#7C5CFC",
+					"#a78bfa",
+					"#38bdf8"
+				][t % 6] }
+			}))
+		}]
+	} : e === "line" || e === "area" ? {
+		...a,
+		tooltip: { trigger: "axis" },
+		xAxis: {
+			type: "category",
+			data: r,
+			boundaryGap: !1
+		},
+		yAxis: { type: "value" },
+		series: [{
+			type: "line",
+			data: i,
+			smooth: !0,
+			symbolSize: 7,
+			lineStyle: {
+				width: 3,
+				color: y
+			},
+			itemStyle: {
+				color: "#2E9EFF",
+				borderColor: "#fff",
+				borderWidth: 2
+			},
+			areaStyle: e === "area" ? { color: {
+				type: "linear",
+				x: 0,
+				y: 0,
+				x2: 0,
+				y2: 1,
+				colorStops: [{
+					offset: 0,
+					color: "rgba(46,158,255,.32)"
+				}, {
+					offset: 1,
+					color: "rgba(124,92,252,0)"
+				}]
+			} } : void 0
+		}]
+	} : {
+		...a,
+		tooltip: { trigger: "axis" },
+		xAxis: {
+			type: "category",
+			data: r
+		},
+		yAxis: { type: "value" },
+		series: [{
+			type: "bar",
+			data: i,
+			barMaxWidth: 42,
+			itemStyle: {
+				borderRadius: [
+					8,
+					8,
+					4,
+					4
+				],
+				color: y
+			},
+			emphasis: { itemStyle: {
+				shadowBlur: 12,
+				shadowColor: "rgba(46,158,255,.35)"
+			} }
+		}]
+	};
+}
+function x(e) {
+	let t = (e ?? "bar").toLowerCase();
+	return t === "pie" ? "donut" : t === "sparkline" ? "spark" : [
+		"bar",
+		"line",
+		"area",
+		"donut",
+		"spark"
+	].includes(t) ? t : "bar";
+}
+//#endregion
+export { _ as a, o as c, i as d, t as f, l as i, a as l, b as n, n as o, x as r, e as s, v as t, r as u };

package/ui/favicon.svg

@@ -0,0 +1,11 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="32" height="32" rx="8" fill="#0B1220"/>
+  <path d="M8 24V8h4.2l7.6 11.2V8H24v16h-4.2L12.2 12.8V24H8z" fill="url(#nexaFav)"/>
+  <defs>
+    <linearGradient id="nexaFav" x1="8" y1="8" x2="24" y2="24" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#68C4FF"/>
+      <stop offset=".45" stop-color="#2E9EFF"/>
+      <stop offset="1" stop-color="#7C5CFC"/>
+    </linearGradient>
+  </defs>
+</svg>