@selectwin/kit 0.1.197 → 0.1.198

package/dist/SelectFlowCanvas.js

@@ -0,0 +1,282 @@
+/* empty css           */
+import { ArrowLeftIcon as e, CloseIcon as t, MinusCircleIcon as n, PlusIcon as r } from "./icons.js";
+import { SelectAlert as i } from "./SelectAlert.js";
+import { SelectIconButton as a } from "./SelectIconButton.js";
+import { useId as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/SelectFlowCanvas.tsx
+var u = (e) => Math.round(e * 100) / 100;
+function d({ width: e, height: t, edges: i, labels: d = [], pluses: f = [], children: p, zoom: m, defaultZoom: h = 1, onZoomChange: g, minZoom: _ = .5, maxZoom: v = 1.3, onBackgroundClick: y, ariaLabel: b }) {
+	let x = o().replace(/:/g, ""), [S, C] = s(h), w = m ?? S, T = (e) => {
+		let t = u(Math.min(v, Math.max(_, e)));
+		m === void 0 && C(t), g == null || g(t);
+	}, E = `select-flow-arrow-${x}`, D = `select-flow-arrow-on-${x}`;
+	return /* @__PURE__ */ l("div", {
+		className: "select-flow",
+		role: "region",
+		"aria-label": b,
+		children: [/* @__PURE__ */ c("div", {
+			className: "select-flow__scroll",
+			onClick: (e) => {
+				e.target.dataset.flowBackground === "true" && (y == null || y());
+			},
+			"data-flow-background": "true",
+			children: /* @__PURE__ */ c("div", {
+				className: "select-flow__sizer",
+				style: {
+					width: e * w,
+					height: t * w
+				},
+				"data-flow-background": "true",
+				children: /* @__PURE__ */ l("div", {
+					className: "select-flow__stage",
+					style: {
+						width: e,
+						height: t,
+						transform: `scale(${w})`
+					},
+					"data-flow-background": "true",
+					children: [
+						/* @__PURE__ */ l("svg", {
+							className: "select-flow__edges",
+							width: e,
+							height: t,
+							"aria-hidden": "true",
+							children: [/* @__PURE__ */ l("defs", { children: [/* @__PURE__ */ c("marker", {
+								id: E,
+								viewBox: "0 0 10 10",
+								refX: "8",
+								refY: "5",
+								markerWidth: "7",
+								markerHeight: "7",
+								orient: "auto-start-reverse",
+								children: /* @__PURE__ */ c("path", {
+									className: "select-flow__arrow",
+									d: "M 0 0 L 10 5 L 0 10 z"
+								})
+							}), /* @__PURE__ */ c("marker", {
+								id: D,
+								viewBox: "0 0 10 10",
+								refX: "8",
+								refY: "5",
+								markerWidth: "7",
+								markerHeight: "7",
+								orient: "auto-start-reverse",
+								children: /* @__PURE__ */ c("path", {
+									className: "select-flow__arrow select-flow__arrow--on",
+									d: "M 0 0 L 10 5 L 0 10 z"
+								})
+							})] }), i.map((e) => /* @__PURE__ */ c("path", {
+								d: e.d,
+								className: `select-flow__edge${e.state === "on" ? " select-flow__edge--on" : e.state === "muted" ? " select-flow__edge--muted" : ""}`,
+								markerEnd: `url(#${e.state === "on" ? D : E})`
+							}, e.id))]
+						}),
+						d.map((e) => /* @__PURE__ */ c("span", {
+							className: `select-flow__label${e.tone === "yes" ? " select-flow__label--yes" : ""}${e.active ? " select-flow__label--on" : ""}`,
+							style: {
+								left: e.x,
+								top: e.y
+							},
+							children: e.text
+						}, e.id)),
+						p,
+						f.map((e) => /* @__PURE__ */ c("button", {
+							type: "button",
+							className: "select-flow__plus",
+							style: {
+								left: e.x,
+								top: e.y
+							},
+							title: e.label,
+							"aria-label": e.label,
+							onClick: e.onClick,
+							children: /* @__PURE__ */ c(r, {})
+						}, e.id))
+					]
+				})
+			})
+		}), /* @__PURE__ */ l("div", {
+			className: "select-flow__zoom",
+			children: [
+				/* @__PURE__ */ c(a, {
+					icon: /* @__PURE__ */ c(n, {}),
+					label: "Diminuir o zoom",
+					size: "sm",
+					disabled: w <= _,
+					onClick: () => T(w - .1)
+				}),
+				/* @__PURE__ */ l("button", {
+					type: "button",
+					className: "select-flow__zoomvalue",
+					onClick: () => T(1),
+					title: "Voltar a 100%",
+					children: [Math.round(w * 100), "%"]
+				}),
+				/* @__PURE__ */ c(a, {
+					icon: /* @__PURE__ */ c(r, {}),
+					label: "Aumentar o zoom",
+					size: "sm",
+					disabled: w >= v,
+					onClick: () => T(w + .1)
+				})
+			]
+		})]
+	});
+}
+function f({ x: e, y: t, width: n, height: r, shape: i = "card", tone: a = "neutral", icon: o, order: s, eyebrow: u, title: d, subtitle: f, tags: p, titleTone: m = "default", selected: h = !1, active: g = !1, muted: _ = !1, invalid: v = !1, onClick: y, ariaLabel: b }) {
+	let x = `${h ? " is-selected" : v ? " is-invalid" : g ? " is-on" : ""}${_ ? " is-muted" : ""}`, S = {
+		left: e,
+		top: t,
+		width: n,
+		height: r
+	}, C = d != null && /* @__PURE__ */ c("span", {
+		className: `select-flownode__title${m === "warning" ? " select-flownode__title--warning" : ""}`,
+		children: d
+	});
+	return i === "decision" ? /* @__PURE__ */ c("button", {
+		type: "button",
+		className: `select-flownode select-flownode--decision${x}`,
+		style: S,
+		onClick: y,
+		"aria-label": b,
+		children: /* @__PURE__ */ l("span", {
+			className: "select-flownode__inner",
+			children: [s != null && /* @__PURE__ */ c("span", {
+				className: "select-flownode__order",
+				children: s
+			}), /* @__PURE__ */ l("span", {
+				className: "select-flownode__text",
+				children: [
+					u != null && /* @__PURE__ */ c("span", {
+						className: "select-flownode__eyebrow",
+						children: u
+					}),
+					C,
+					f != null && /* @__PURE__ */ c("span", {
+						className: "select-flownode__sub",
+						children: f
+					}),
+					p != null && /* @__PURE__ */ c("span", {
+						className: "select-flownode__tags",
+						children: p
+					})
+				]
+			})]
+		})
+	}) : i === "pill" ? /* @__PURE__ */ l("button", {
+		type: "button",
+		className: `select-flownode select-flownode--pill${x}`,
+		style: S,
+		onClick: y,
+		"aria-label": b,
+		children: [o, d]
+	}) : /* @__PURE__ */ l("button", {
+		type: "button",
+		className: `select-flownode select-flownode--${i === "terminal" ? "terminal" : "card"}${x}`,
+		style: S,
+		onClick: y,
+		"aria-label": b,
+		children: [i === "card" && o != null && /* @__PURE__ */ c("span", {
+			className: `select-flownode__chip select-flownode__chip--${a}`,
+			children: o
+		}), /* @__PURE__ */ l("span", {
+			className: "select-flownode__text",
+			children: [
+				u != null && /* @__PURE__ */ c("span", {
+					className: "select-flownode__eyebrow",
+					children: u
+				}),
+				C,
+				f != null && /* @__PURE__ */ c("span", {
+					className: "select-flownode__sub",
+					children: f
+				}),
+				p != null && /* @__PURE__ */ c("span", {
+					className: "select-flownode__tags",
+					children: p
+				})
+			]
+		})]
+	});
+}
+function p({ title: n, subtitle: r, onBack: o, backLabel: s = "Voltar", toolbar: u, actions: d, error: f, canvas: p, inspectorHead: m, inspector: h, inspectorLabel: g = "Painel", inspectorOpen: _, onInspectorClose: v }) {
+	let y = _ !== void 0;
+	return /* @__PURE__ */ l("div", {
+		className: `select-flowpage${y ? " select-flowpage--sheet" : ""}${y && _ ? " is-inspecting" : ""}`,
+		children: [
+			/* @__PURE__ */ l("header", {
+				className: "select-flowpage__bar",
+				children: [
+					o && /* @__PURE__ */ c(a, {
+						icon: /* @__PURE__ */ c(e, {}),
+						label: s,
+						variant: "outline",
+						onClick: o
+					}),
+					/* @__PURE__ */ l("div", {
+						className: "select-flowpage__ident",
+						children: [/* @__PURE__ */ c("span", {
+							className: "select-flowpage__title",
+							children: n
+						}), r != null && /* @__PURE__ */ c("span", {
+							className: "select-flowpage__sub",
+							children: r
+						})]
+					}),
+					u != null && /* @__PURE__ */ c("div", {
+						className: "select-flowpage__tools",
+						children: u
+					}),
+					d != null && /* @__PURE__ */ c("div", {
+						className: "select-flowpage__actions",
+						children: d
+					})
+				]
+			}),
+			f != null && f !== "" && /* @__PURE__ */ c("div", {
+				className: "select-flowpage__error",
+				children: /* @__PURE__ */ c(i, {
+					tone: "critical",
+					children: f
+				})
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "select-flowpage__body",
+				children: [/* @__PURE__ */ c("div", {
+					className: "select-flowpage__canvas",
+					children: p
+				}), /* @__PURE__ */ l("aside", {
+					className: "select-flowpage__inspector",
+					"aria-label": g,
+					children: [
+						y && v && /* @__PURE__ */ l("button", {
+							type: "button",
+							className: "select-flowpage__sheetclose",
+							onClick: v,
+							children: [/* @__PURE__ */ c("span", {
+								className: "select-flowpage__sheetgrip",
+								"aria-hidden": "true"
+							}), /* @__PURE__ */ l("span", {
+								className: "select-flowpage__sheetlabel",
+								children: [/* @__PURE__ */ c(t, {}), "Fechar"]
+							})]
+						}),
+						m != null && /* @__PURE__ */ c("div", {
+							className: "select-flowpage__inspectorhead",
+							children: m
+						}),
+						/* @__PURE__ */ c("div", {
+							className: "select-flowpage__inspectorbody",
+							children: h
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { d as SelectFlowCanvas, p as SelectFlowLayout, f as SelectFlowNode };
+
+//# sourceMappingURL=SelectFlowCanvas.js.map

package/dist/SelectFormLayout.js

@@ -0,0 +1,21 @@
+/* empty css           */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/SelectFormLayout.tsx
+function t({ children: t }) {
+	return /* @__PURE__ */ e("div", {
+		className: "select-formlayout",
+		children: t
+	});
+}
+function n({ children: t, columns: n = 2 }) {
+	return /* @__PURE__ */ e("div", {
+		className: "select-formlayout__group",
+		style: { "--cols": String(n) },
+		children: t
+	});
+}
+var r = Object.assign(t, { Group: n });
+//#endregion
+export { r as SelectFormLayout };
+
+//# sourceMappingURL=SelectFormLayout.js.map

package/dist/SelectFormModal.js

@@ -0,0 +1,53 @@
+import { SelectButton as e } from "./SelectButton.js";
+import { useSelectMessages as t } from "./SelectLocale.js";
+import { SelectAlert as n } from "./SelectAlert.js";
+import { detectSelectTheme as r } from "./detectSelectTheme.js";
+import { SelectModal as i } from "./SelectModal.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/SelectFormModal.tsx
+function s({ open: s, onClose: c, onSubmit: l, title: u, subtitle: d, children: f, submitLabel: p, cancelLabel: m, submitting: h = !1, submitDisabled: g = !1, submitVariant: _ = "primary", error: v, size: y = "md", theme: b }) {
+	let x = t().common, S = p ?? x.save, C = m ?? x.cancel;
+	return /* @__PURE__ */ o(i, {
+		open: s,
+		onClose: c,
+		title: u,
+		subtitle: d,
+		size: y,
+		theme: b ?? r(),
+		footer: /* @__PURE__ */ o("div", {
+			className: "select-modal__actions",
+			children: [/* @__PURE__ */ a(e, {
+				variant: "secondary",
+				size: "sm",
+				inline: !0,
+				onClick: c,
+				disabled: h,
+				children: C
+			}), /* @__PURE__ */ a(e, {
+				variant: _,
+				size: "sm",
+				inline: !0,
+				loading: h,
+				disabled: g,
+				onClick: () => l(),
+				children: S
+			})]
+		}),
+		children: [v != null && v !== !1 && /* @__PURE__ */ a("div", {
+			className: "select-formmodal__error",
+			children: /* @__PURE__ */ a(n, {
+				tone: "critical",
+				children: v
+			})
+		}), /* @__PURE__ */ a("form", {
+			onSubmit: (e) => {
+				e.preventDefault(), l();
+			},
+			children: f
+		})]
+	});
+}
+//#endregion
+export { s as SelectFormModal };
+
+//# sourceMappingURL=SelectFormModal.js.map

package/dist/SelectFunnel.js

@@ -0,0 +1,49 @@
+/* empty css           */
+import { chartColor as e, formatCompact as t } from "./chartUtils.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/SelectFunnel.tsx
+var a = n(function({ stages: n, format: a = t, palette: o = "ramp", convLabel: s, className: c, ...l }, u) {
+	let d = Math.max(1, ...n.map((e) => e.value));
+	return /* @__PURE__ */ r("div", {
+		ref: u,
+		...l,
+		className: `select-funnel select-funnel--${o}${c ? " " + c : ""}`,
+		children: n.map((t, c) => {
+			let l = c > 0 ? n[c - 1].value || 1 : t.value || 1, u = c > 0 ? t.value / l * 100 : 100, f = o === "mono", p = t.color ?? (f ? c === n.length - 1 ? "var(--select-chart-paid)" : "var(--select-chart-1)" : e(c));
+			return /* @__PURE__ */ i("div", {
+				className: "select-funnel__row",
+				children: [
+					/* @__PURE__ */ r("div", {
+						className: "select-funnel__label",
+						children: t.label
+					}),
+					/* @__PURE__ */ r("div", {
+						className: "select-funnel__track",
+						children: /* @__PURE__ */ r("div", {
+							className: "select-funnel__bar",
+							style: {
+								width: `${t.value / d * 100}%`,
+								background: f ? p : `linear-gradient(90deg, ${p}, color-mix(in srgb, ${p} 50%, transparent))`
+							}
+						})
+					}),
+					/* @__PURE__ */ i("div", {
+						className: "select-funnel__meta",
+						children: [/* @__PURE__ */ r("span", {
+							className: "select-funnel__value",
+							children: a(t.value)
+						}), c > 0 && /* @__PURE__ */ i("span", {
+							className: `select-funnel__conv${t.flag ? " is-flagged" : ""}`,
+							children: [t.flag ? "▼ " : "", s ? s(u, c) : `${u.toFixed(0)}%`]
+						})]
+					})
+				]
+			}, c);
+		})
+	});
+});
+//#endregion
+export { a as SelectFunnel };
+
+//# sourceMappingURL=SelectFunnel.js.map

package/dist/SelectGauge.js

@@ -0,0 +1,74 @@
+/* empty css           */
+import { useCountUp as e } from "./internal/useSelectReveal.js";
+import { forwardRef as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/SelectGauge.tsx
+function i(e) {
+	return Number.isFinite(e) ? Math.max(0, Math.min(100, e)) : 0;
+}
+function a(e, t, n, r) {
+	let i = Math.PI + r * Math.PI;
+	return [e + n * Math.cos(i), t + n * Math.sin(i)];
+}
+function o(e, t, n, r, i) {
+	let [o, s] = a(e, t, n, r), [c, l] = a(e, t, n, i);
+	return `M ${o.toFixed(2)} ${s.toFixed(2)} A ${n} ${n} 0 0 1 ${c.toFixed(2)} ${l.toFixed(2)}`;
+}
+var s = (e) => `${e.toLocaleString("pt-BR", { maximumFractionDigits: +(e < 10) })}%`, c = t(function({ value: t, label: a, caption: c, size: l = 220, thickness: u, color: d, format: f = s, className: p, ...m }, h) {
+	let g = i(t), _ = u ?? Math.max(8, Math.round(l * .075)), v = _ / 2 + 2, y = l / 2 - v, b = l / 2, x = l / 2, S = x + v, C = e({
+		value: g,
+		format: f
+	});
+	return /* @__PURE__ */ r("div", {
+		ref: h,
+		...m,
+		className: `select-gauge${p ? " " + p : ""}`,
+		style: { width: `${l / 16}rem` },
+		children: [/* @__PURE__ */ r("div", {
+			className: "select-gauge__ring",
+			style: {
+				width: "100%",
+				aspectRatio: `${l} / ${S}`
+			},
+			children: [/* @__PURE__ */ r("svg", {
+				width: "100%",
+				height: "100%",
+				viewBox: `0 0 ${l} ${S}`,
+				className: "select-chart",
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ n("path", {
+					className: "select-gauge__track",
+					d: o(b, x, y, 0, 1),
+					fill: "none",
+					strokeWidth: _,
+					strokeLinecap: "round"
+				}), g > 0 && /* @__PURE__ */ n("path", {
+					className: "select-gauge__arc",
+					d: o(b, x, y, 0, g / 100),
+					fill: "none",
+					stroke: d ?? "var(--select-chart-1)",
+					strokeWidth: _,
+					strokeLinecap: "round",
+					pathLength: 1
+				})]
+			}), /* @__PURE__ */ r("div", {
+				className: "select-gauge__center",
+				children: [/* @__PURE__ */ n("span", {
+					className: "select-gauge__value",
+					ref: C,
+					children: f(g)
+				}), a != null && /* @__PURE__ */ n("span", {
+					className: "select-gauge__label",
+					children: a
+				})]
+			})]
+		}), c != null && /* @__PURE__ */ n("div", {
+			className: "select-gauge__caption",
+			children: c
+		})]
+	});
+});
+//#endregion
+export { c as SelectGauge };
+
+//# sourceMappingURL=SelectGauge.js.map

package/dist/SelectGaugeBands.js

@@ -0,0 +1,78 @@
+/* empty css           */
+import { forwardRef as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/SelectGaugeBands.tsx
+var r = e(function({ value: e, max: r = 100, bands: i, size: a = 220, thickness: o, label: s, format: c = (e) => `${Math.round(e)}`, className: l, ...u }, d) {
+	let f = o ?? Math.max(10, Math.round(a * .08)), p = f / 2 + 2, m = a / 2 - p, h = a / 2, g = a / 2, _ = g + p, v = (e) => Math.max(0, Math.min(r, e)), y = (e) => {
+		let t = Math.PI + e * Math.PI;
+		return [h + m * Math.cos(t), g + m * Math.sin(t)];
+	}, b = (e, t) => {
+		let [n, r] = y(e), [i, a] = y(t);
+		return `M ${n.toFixed(2)} ${r.toFixed(2)} A ${m} ${m} 0 0 1 ${i.toFixed(2)} ${a.toFixed(2)}`;
+	}, x = 0, S = i.map((e) => {
+		let t = v(x) / r, n = v(e.upTo) / r;
+		return x = e.upTo, {
+			t0: t,
+			t1: n,
+			color: e.color
+		};
+	}), C = v(e) / r, w = Math.PI + C * Math.PI, T = m * .82, E = h + T * Math.cos(w), D = g + T * Math.sin(w);
+	return /* @__PURE__ */ t("div", {
+		ref: d,
+		...u,
+		className: `select-gauge${l ? " " + l : ""}`,
+		style: { width: `${a / 16}rem` },
+		children: /* @__PURE__ */ n("div", {
+			className: "select-gauge__ring",
+			style: {
+				width: "100%",
+				aspectRatio: `${a} / ${_}`
+			},
+			children: [/* @__PURE__ */ n("svg", {
+				width: "100%",
+				height: "100%",
+				viewBox: `0 0 ${a} ${_}`,
+				className: "select-chart",
+				"aria-hidden": "true",
+				children: [
+					S.map((e, n) => /* @__PURE__ */ t("path", {
+						d: b(e.t0, e.t1),
+						fill: "none",
+						stroke: e.color,
+						strokeWidth: f,
+						strokeLinecap: "butt"
+					}, n)),
+					/* @__PURE__ */ t("line", {
+						x1: h,
+						y1: g,
+						x2: E,
+						y2: D,
+						stroke: "var(--select-text)",
+						strokeWidth: 3,
+						strokeLinecap: "round",
+						className: "select-gaugeband__needle"
+					}),
+					/* @__PURE__ */ t("circle", {
+						cx: h,
+						cy: g,
+						r: 5,
+						fill: "var(--select-text)"
+					})
+				]
+			}), /* @__PURE__ */ n("div", {
+				className: "select-gauge__center",
+				children: [/* @__PURE__ */ t("span", {
+					className: "select-gauge__value",
+					children: c(v(e))
+				}), s != null && /* @__PURE__ */ t("span", {
+					className: "select-gauge__label",
+					children: s
+				})]
+			})]
+		})
+	});
+});
+//#endregion
+export { r as SelectGaugeBands };
+
+//# sourceMappingURL=SelectGaugeBands.js.map