@selectwin/kit 0.1.196 → 0.1.198

package/dist/SelectStreamGraph.js

@@ -0,0 +1,99 @@
+/* empty css           */
+import { chartColor as e, formatCompact as t, smoothBandPath as n, useChartSize as r } from "./chartUtils.js";
+import { ChartTooltip as i, useChartTooltip as a } from "./chartTip.js";
+import { useId as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/SelectStreamGraph.tsx
+function u({ series: u, labels: d, height: f = 240, format: p = t, className: m, ...h }) {
+	let { ref: g, width: _ } = r(f), v = a(), y = o(), [b, x] = s(null), S = d.length, C = {
+		top: 14,
+		right: 14,
+		bottom: 28,
+		left: 14
+	}, w = Math.max(0, _ - C.left - C.right), T = f - C.top - C.bottom, E = d.map((e, t) => u.reduce((e, n) => e + (n.data[t] ?? 0), 0)), D = T / Math.max(1, ...E), O = (e) => C.left + (S <= 1 ? w / 2 : e / (S - 1) * w), k = d.map(() => 0), A = u.map((t, n) => {
+		let r = [], i = [];
+		return d.forEach((e, n) => {
+			let a = C.top + (T - E[n] * D) / 2 + k[n] * D, o = a + (t.data[n] ?? 0) * D;
+			r.push([O(n), a]), i.push([O(n), o]), k[n] = k[n] + (t.data[n] ?? 0);
+		}), {
+			upper: r,
+			lower: i,
+			color: t.color ?? e(n),
+			name: t.name
+		};
+	});
+	return /* @__PURE__ */ l("div", {
+		...h,
+		className: `select-chart-wrap${m ? " " + m : ""}`,
+		ref: g,
+		children: [_ > 0 && /* @__PURE__ */ l("svg", {
+			width: _,
+			height: f,
+			className: "select-chart",
+			children: [
+				/* @__PURE__ */ c("defs", { children: A.map((e, t) => /* @__PURE__ */ l("linearGradient", {
+					id: `${y}-st${t}`,
+					x1: "0",
+					y1: "0",
+					x2: "0",
+					y2: "1",
+					children: [/* @__PURE__ */ c("stop", {
+						offset: "0%",
+						stopColor: e.color,
+						stopOpacity: .95
+					}), /* @__PURE__ */ c("stop", {
+						offset: "100%",
+						stopColor: e.color,
+						stopOpacity: .6
+					})]
+				}, t)) }),
+				A.map((e, t) => /* @__PURE__ */ c("path", {
+					d: n(e.upper, e.lower),
+					fill: `url(#${y}-st${t})`,
+					className: "select-chart__area"
+				}, t)),
+				b != null && /* @__PURE__ */ c("line", {
+					x1: O(b),
+					x2: O(b),
+					y1: C.top,
+					y2: C.top + T,
+					className: "select-chart__crosshair"
+				}),
+				d.map((e, t) => t % Math.max(1, Math.ceil(S / 7)) === 0 || t === S - 1 ? /* @__PURE__ */ c("text", {
+					x: O(t),
+					y: f - C.bottom + 16,
+					className: "select-chart__xlabel",
+					textAnchor: "middle",
+					children: e
+				}, t) : null),
+				d.map((t, n) => /* @__PURE__ */ c("rect", {
+					x: O(n) - w / Math.max(1, S) / 2,
+					y: C.top,
+					width: w / Math.max(1, S),
+					height: T,
+					fill: "transparent",
+					onMouseEnter: () => {
+						x(n), v.show({
+							x: O(n),
+							y: C.top + T / 2,
+							place: "top",
+							title: t,
+							rows: u.map((t, r) => ({
+								label: t.name,
+								value: p(t.data[n] ?? 0),
+								color: t.color ?? e(r)
+							}))
+						});
+					},
+					onMouseLeave: () => {
+						x(null), v.hide();
+					}
+				}, `h${n}`))
+			]
+		}), /* @__PURE__ */ c(i, { tip: v.tip })]
+	});
+}
+//#endregion
+export { u as SelectStreamGraph };
+
+//# sourceMappingURL=SelectStreamGraph.js.map

package/dist/SelectSunburst.js

@@ -0,0 +1,101 @@
+/* empty css           */
+import { chartColor as e, donutSegment as t, formatCompact as n } from "./chartUtils.js";
+import { ChartTooltip as r, useChartTooltip as i } from "./chartTip.js";
+import { forwardRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/SelectSunburst.tsx
+var c = a(function({ data: a, size: c = 220, format: l = n, legend: u = !0, className: d, ...f }, p) {
+	let m = i(), h = c / 2, g = c / 2, _ = c / 2 - 2, v = _ * .62, y = _ * .32, b = a.map((e) => {
+		var t;
+		return (t = e.children) != null && t.length ? e.children.reduce((e, t) => e + t.value, 0) : e.value ?? 0;
+	}), x = b.reduce((e, t) => e + t, 0) || 1, S = 0;
+	return /* @__PURE__ */ s("div", {
+		ref: p,
+		...f,
+		className: `select-donut-wrap${d ? " " + d : ""}`,
+		children: [/* @__PURE__ */ s("div", {
+			className: "select-radial",
+			style: {
+				width: c,
+				aspectRatio: "1"
+			},
+			children: [/* @__PURE__ */ o("svg", {
+				width: c,
+				height: c,
+				viewBox: `0 0 ${c} ${c}`,
+				className: "select-chart select-donut",
+				"aria-hidden": "true",
+				children: a.map((n, r) => {
+					let i = b[r], a = S / x * 360;
+					S += i;
+					let c = S / x * 360, u = n.color ?? e(r), d = a;
+					return /* @__PURE__ */ s("g", { children: [/* @__PURE__ */ o("path", {
+						d: t(h, g, v, y, a + .6, Math.max(a + .7, c - .6)),
+						fill: u,
+						className: "select-chart__seg",
+						onMouseEnter: () => m.show({
+							x: h,
+							y: g - v,
+							place: g - v < 44 ? "bottom" : "top",
+							title: n.label,
+							rows: [{
+								label: "Total",
+								value: l(i),
+								color: u
+							}]
+						}),
+						onMouseLeave: m.hide
+					}), (n.children ?? []).map((e, r) => {
+						let a = d;
+						d += e.value / x * 360;
+						let s = d, c = e.color ?? u, f = .45 + r % 3 * .2, p = ((a + s) / 2 - 90) * (Math.PI / 180);
+						return /* @__PURE__ */ o("path", {
+							d: t(h, g, _, v + 2, a + .5, Math.max(a + .6, s - .5)),
+							fill: c,
+							fillOpacity: f,
+							className: "select-chart__seg",
+							onMouseEnter: () => m.show({
+								x: h + (_ - 6) * Math.cos(p),
+								y: g + (_ - 6) * Math.sin(p),
+								place: g + (_ - 6) * Math.sin(p) < g ? "top" : "bottom",
+								title: `${n.label} · ${e.label}`,
+								rows: [{
+									label: "Valor",
+									value: l(e.value),
+									color: u
+								}, {
+									label: "Share",
+									value: `${Math.round(e.value / (i || 1) * 100)}%`
+								}]
+							}),
+							onMouseLeave: m.hide
+						}, r);
+					})] }, r);
+				})
+			}), /* @__PURE__ */ o(r, { tip: m.tip })]
+		}), u && /* @__PURE__ */ o("ul", {
+			className: "select-donut__legend",
+			children: a.map((t, n) => /* @__PURE__ */ s("li", {
+				className: "select-donut__legitem",
+				children: [
+					/* @__PURE__ */ o("span", {
+						className: "select-donut__dot",
+						style: { background: t.color ?? e(n) }
+					}),
+					/* @__PURE__ */ o("span", {
+						className: "select-donut__leglabel",
+						children: t.label
+					}),
+					/* @__PURE__ */ o("span", {
+						className: "select-donut__legval",
+						children: l(b[n])
+					})
+				]
+			}, n))
+		})]
+	});
+});
+//#endregion
+export { c as SelectSunburst };
+
+//# sourceMappingURL=SelectSunburst.js.map

package/dist/SelectSurface.js

@@ -0,0 +1,41 @@
+/* empty css           */
+import { forwardRef as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/SelectSurface.tsx
+var r = e(function({ title: e, description: r, headerAction: i, footer: a, children: o, flush: s = !1, className: c, ...l }, u) {
+	return /* @__PURE__ */ n("div", {
+		ref: u,
+		...l,
+		className: `select-surface${c ? " " + c : ""}`,
+		children: [
+			(e || r || i) && /* @__PURE__ */ n("div", {
+				className: "select-surface__header",
+				children: [/* @__PURE__ */ n("div", {
+					className: "select-surface__heading",
+					children: [e && /* @__PURE__ */ t("h3", {
+						className: "select-surface__title",
+						children: e
+					}), r && /* @__PURE__ */ t("p", {
+						className: "select-surface__desc",
+						children: r
+					})]
+				}), i && /* @__PURE__ */ t("div", {
+					className: "select-surface__headeraction",
+					children: i
+				})]
+			}),
+			/* @__PURE__ */ t("div", {
+				className: `select-surface__body${s ? " select-surface__body--flush" : ""}`,
+				children: o
+			}),
+			a && /* @__PURE__ */ t("div", {
+				className: "select-surface__footer",
+				children: a
+			})
+		]
+	});
+});
+//#endregion
+export { r as SelectSurface };
+
+//# sourceMappingURL=SelectSurface.js.map

package/dist/SelectSwitch.js

@@ -0,0 +1,24 @@
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/SelectSwitch.tsx
+var n = e(function({ checked: e, onChange: n, disabled: r = !1, label: i, className: a, ...o }, s) {
+	return /* @__PURE__ */ t("button", {
+		ref: s,
+		...o,
+		type: "button",
+		role: "switch",
+		"aria-checked": e,
+		"aria-label": i,
+		disabled: r,
+		className: `select-switch${e ? " select-switch--on" : ""}${a ? " " + a : ""}`,
+		onClick: () => n(!e),
+		children: /* @__PURE__ */ t("span", {
+			className: "select-switch__knob",
+			"aria-hidden": "true"
+		})
+	});
+});
+//#endregion
+export { n as SelectSwitch };
+
+//# sourceMappingURL=SelectSwitch.js.map

package/dist/SelectSwitchField.d.ts

@@ -1,12 +1,16 @@
 import { ReactNode } from 'react';
 export interface SelectSwitchFieldProps {
-    label: string;
+    /** 0.1.198: aceita um nó — o interruptor é nomeado pelo rótulo na tela (`aria-labelledby`), não por uma cópia. */
+    label: ReactNode;
     checked: boolean;
     onChange: (checked: boolean) => void;
     disabled?: boolean;
+    /** A explicação embaixo; desde a 0.1.198 ela é a descrição do interruptor (`aria-describedby`). */
     hint?: ReactNode;
     /** Ajuda contextual: vira o "!" (SelectInfoTip) ao lado do rotulo. Use para o que
      *  explica a plataforma; `hint` e so restricao/estado do proprio campo. */
     help?: ReactNode;
+    /** 0.1.198: o id do interruptor. */
+    switchId?: string;
 }
 export declare const SelectSwitchField: import('react').ForwardRefExoticComponent<SelectSwitchFieldProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectSwitchFieldProps> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/SelectSwitchField.js

@@ -0,0 +1,45 @@
+/* empty css           */
+import { SelectInfoTip as e } from "./SelectInfoTip.js";
+import { SelectSwitch as t } from "./SelectSwitch.js";
+import { forwardRef as n, useId as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/SelectSwitchField.tsx
+var o = n(function({ label: n, checked: o, onChange: s, disabled: c = !1, hint: l, help: u, switchId: d, className: f, ...p }, m) {
+	let h = r(), g = l != null && l !== "";
+	return /* @__PURE__ */ a("div", {
+		ref: m,
+		...p,
+		className: `select-switchfield${c ? " is-disabled" : ""}${f ? " " + f : ""}`,
+		children: [/* @__PURE__ */ a("div", {
+			className: "select-switchfield__row",
+			children: [
+				/* @__PURE__ */ i(t, {
+					id: d,
+					checked: o,
+					onChange: s,
+					disabled: c,
+					label: typeof n == "string" ? n : void 0,
+					"aria-labelledby": `${h}-label`,
+					"aria-describedby": g ? `${h}-hint` : void 0
+				}),
+				/* @__PURE__ */ i("span", {
+					id: `${h}-label`,
+					className: "select-switchfield__label",
+					onClick: () => {
+						c || s(!o);
+					},
+					children: n
+				}),
+				u != null && u !== "" && /* @__PURE__ */ i(e, { content: u })
+			]
+		}), g && /* @__PURE__ */ i("span", {
+			id: `${h}-hint`,
+			className: "select-switchfield__hint",
+			children: l
+		})]
+	});
+});
+//#endregion
+export { o as SelectSwitchField };
+
+//# sourceMappingURL=SelectSwitchField.js.map

package/dist/SelectTable.js

@@ -0,0 +1,243 @@
+import { ChevronDownIcon as e, ChevronRightIcon as t } from "./icons.js";
+import { useSelectReveal as n } from "./internal/useSelectReveal.js";
+import { FrameBody as r, useInsideFrame as i } from "./internal/frame.js";
+import { SelectAvatar as a } from "./SelectAvatar.js";
+import { SelectListChrome as o, listChromeShape as s } from "./internal/listChrome.js";
+import { Children as c, forwardRef as l, useCallback as u, useId as d, useLayoutEffect as f, useRef as p, useState as m } from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/SelectTable.tsx
+var v = 40, y = 1200, b = 8;
+function x(e) {
+	let t = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+	return `${Math.round(e / t * 1e3) / 1e3}rem`;
+}
+var S = l(function({ columns: t, children: a, empty: l, footer: h, title: S, help: w, description: T, action: E, filters: D, tools: O, onColumnResize: k, onColumnResizeReset: A, collapsible: j = !1, defaultOpen: M = !0, flush: N = !1, className: P, ...F }, I) {
+	let [L, R] = m(M), z = d(), B = j && S != null ? {
+		open: L,
+		onToggle: () => R((e) => !e),
+		controls: z
+	} : void 0, V = c.count(a) === 0, H = V && !!l, { hasFilters: U, hasTitleRow: W } = s({
+		title: S,
+		description: T,
+		action: E,
+		filters: D,
+		tools: O
+	}), G = H && !W && !U, K = i(), q = n({
+		selector: ".select-table__row",
+		y: 8,
+		duration: .45,
+		stagger: .05,
+		scroll: !0
+	}), J = t.length ? t.map((e) => e.width ?? `minmax(${e.minWidth ?? "var(--select-table-col-min, 6.5rem)"}, ${e.grow ?? 1}fr)`).join(" ") : "1fr", Y = p(null), X = u((e) => {
+		Y.current = e, typeof I == "function" ? I(e) : I && (I.current = e);
+	}, [I]);
+	f(() => {
+		var e;
+		(e = Y.current) == null || e.style.setProperty("--select-table-cols", J);
+	}, [J]);
+	let Z = (e, n) => {
+		let r = Y.current;
+		if (!r) return;
+		let i = t.map((t, r) => r === e ? `${n}px` : t.width ?? `minmax(${t.minWidth ?? "var(--select-table-col-min, 6.5rem)"}, ${t.grow ?? 1}fr)`);
+		r.style.setProperty("--select-table-cols", i.join(" "));
+	}, Q = (e) => (t) => {
+		var n;
+		if (!k || t.button !== 0) return;
+		let r = (n = t.currentTarget.parentElement) == null ? void 0 : n.getBoundingClientRect();
+		if (!r) return;
+		let i = t.clientX, a = r.width;
+		t.preventDefault(), t.stopPropagation(), t.currentTarget.setPointerCapture(t.pointerId);
+		let o = Y.current;
+		o == null || o.classList.add("select-table--resizing");
+		let s = a, c = (t) => {
+			s = Math.min(y, Math.max(v, a + (t.clientX - i))), Z(e, s);
+		}, l = () => {
+			window.removeEventListener("pointermove", c), window.removeEventListener("pointerup", l), window.removeEventListener("pointercancel", l), o == null || o.classList.remove("select-table--resizing"), k(e, x(s));
+		};
+		window.addEventListener("pointermove", c), window.addEventListener("pointerup", l), window.addEventListener("pointercancel", l);
+	}, $ = (e) => (t) => {
+		var n;
+		if (!k) return;
+		let r = t.key === "ArrowRight" ? 1 : t.key === "ArrowLeft" ? -1 : 0;
+		if (r === 0) return;
+		let i = (n = t.currentTarget.parentElement) == null ? void 0 : n.getBoundingClientRect();
+		if (!i) return;
+		t.preventDefault();
+		let a = b * (t.shiftKey ? 10 : 1), o = Math.min(y, Math.max(v, i.width + r * a));
+		Z(e, o), k(e, x(o));
+	};
+	return /* @__PURE__ */ _("div", {
+		ref: X,
+		...F,
+		className: `select-table${G ? " select-table--empty" : ""}${K && !N ? " select-table--nested" : ""}${N ? " select-table--flush" : ""}${B ? ` select-table--collapsible${L ? " is-open" : ""}` : ""}${P ? " " + P : ""}`,
+		style: { "--select-table-cols": J },
+		children: [/* @__PURE__ */ g(o, {
+			title: S,
+			help: B ? void 0 : w,
+			description: T,
+			action: E,
+			filters: B ? void 0 : D,
+			tools: B ? void 0 : O,
+			toggle: B
+		}), /* @__PURE__ */ _(C, {
+			enabled: !!B,
+			open: L,
+			id: z,
+			children: [
+				B && (D != null || O != null) ? /* @__PURE__ */ g(o, {
+					filters: D,
+					tools: O
+				}) : null,
+				/* @__PURE__ */ g("div", {
+					className: `select-table__scroll${H ? " select-table__scroll--empty" : ""}`,
+					children: /* @__PURE__ */ _("div", {
+						className: "select-table__scrollinner",
+						children: [!H && /* @__PURE__ */ g("div", {
+							className: "select-table__head",
+							role: "row",
+							children: t.map((n, r) => /* @__PURE__ */ _("div", {
+								role: "columnheader",
+								"aria-sort": n.sortable ? n.sortDir === "asc" ? "ascending" : n.sortDir === "desc" ? "descending" : "none" : void 0,
+								className: `select-table__th select-table__cell--${n.align ?? "start"}${n.tone ? ` select-table__th--${n.tone}` : ""}`,
+								children: [n.sortable ? /* @__PURE__ */ _("button", {
+									type: "button",
+									className: `select-table__sortbtn${n.sortDir === "asc" ? " select-table__sortbtn--asc" : ""}${n.sortDir == null ? "" : " select-table__sortbtn--active"}`,
+									onClick: n.onSort,
+									children: [n.label, /* @__PURE__ */ g(e, {})]
+								}) : n.label, k && n.resizable !== !1 && r < t.length - 1 && /* @__PURE__ */ g("span", {
+									role: "separator",
+									"aria-orientation": "vertical",
+									"aria-label": "Ajustar a largura da coluna",
+									tabIndex: 0,
+									className: "select-table__resizer",
+									onPointerDown: Q(r),
+									onKeyDown: $(r),
+									onDoubleClick: A ? () => A(r) : void 0
+								})]
+							}, r))
+						}), /* @__PURE__ */ g("div", {
+							className: "select-table__body",
+							children: /* @__PURE__ */ g("div", {
+								className: "select-table__rows",
+								ref: q,
+								children: /* @__PURE__ */ g(r, { children: V && l ? /* @__PURE__ */ g("div", {
+									className: "select-table__empty",
+									children: l
+								}) : a })
+							})
+						})]
+					})
+				}),
+				h && /* @__PURE__ */ g("div", {
+					className: "select-table__footer",
+					children: h
+				})
+			]
+		})]
+	});
+});
+function C({ enabled: e, open: t, id: n, children: r }) {
+	return e ? /* @__PURE__ */ g("div", {
+		className: "select-table__collapse",
+		id: n,
+		"data-open": t,
+		"aria-hidden": !t,
+		children: /* @__PURE__ */ g("div", {
+			className: "select-table__collapsewrap",
+			children: r
+		})
+	}) : /* @__PURE__ */ g(h, { children: r });
+}
+var w = l(function({ name: e, secondary: t, src: n, badge: r, className: i, ...o }, s) {
+	return /* @__PURE__ */ _("span", {
+		ref: s,
+		...o,
+		className: `select-usercell${i ? " " + i : ""}`,
+		children: [/* @__PURE__ */ g(a, {
+			name: typeof e == "string" ? e : void 0,
+			src: n
+		}), /* @__PURE__ */ _("span", {
+			className: "select-usercell__text",
+			children: [r ? /* @__PURE__ */ _("span", {
+				className: "select-usercell__line",
+				children: [/* @__PURE__ */ g("span", {
+					className: "select-usercell__name",
+					children: e
+				}), r]
+			}) : /* @__PURE__ */ g("span", {
+				className: "select-usercell__name",
+				children: e
+			}), t && /* @__PURE__ */ g("span", {
+				className: "select-usercell__secondary",
+				children: t
+			})]
+		})]
+	});
+});
+function T({ children: e, onClick: t, expanded: n, nested: r = !1 }) {
+	let i = `select-table__row${t ? " select-table__row--clickable" : ""}${r ? " select-table__row--nested" : ""}${n ? " is-expanded" : ""}`;
+	return t ? /* @__PURE__ */ g("div", {
+		className: i,
+		role: "row",
+		tabIndex: 0,
+		"aria-expanded": n,
+		onClick: (e) => {
+			D(e.target, e.currentTarget) || t();
+		},
+		onKeyDown: (e) => {
+			e.target !== e.currentTarget || e.key !== "Enter" && e.key !== " " || (e.preventDefault(), t());
+		},
+		children: e
+	}) : /* @__PURE__ */ g("div", {
+		className: i,
+		role: "row",
+		children: e
+	});
+}
+var E = "button, a[href], input, select, textarea, label, summary, [role=\"button\"], [role=\"menuitem\"], [role=\"checkbox\"], [role=\"switch\"], [data-row-click=\"ignore\"]";
+function D(e, t) {
+	if (!(e instanceof Element) || !t.contains(e)) return !0;
+	let n = e.closest(E);
+	return n !== null && n !== t && t.contains(n);
+}
+var O = l(function({ children: e, align: n = "start", disclosure: r, className: i, ...a }, o) {
+	return /* @__PURE__ */ _("div", {
+		ref: o,
+		...a,
+		role: "cell",
+		className: `select-table__td select-table__cell--${n}${i ? " " + i : ""}`,
+		children: [r ? /* @__PURE__ */ g("span", {
+			className: `select-table__disclosure${r === "open" ? " is-open" : ""}`,
+			"aria-hidden": "true",
+			children: r !== "none" && /* @__PURE__ */ g(t, {})
+		}) : null, e]
+	});
+}), k = l(function({ icon: e, title: t, subtitle: n, action: r, className: i, ...a }, o) {
+	return /* @__PURE__ */ _("div", {
+		ref: o,
+		...a,
+		className: `select-table-empty${i ? " " + i : ""}`,
+		children: [
+			e && /* @__PURE__ */ g("span", {
+				className: "select-table-empty__icon",
+				children: e
+			}),
+			/* @__PURE__ */ g("p", {
+				className: "select-table-empty__title",
+				children: t
+			}),
+			n && /* @__PURE__ */ g("p", {
+				className: "select-table-empty__subtitle",
+				children: n
+			}),
+			r && /* @__PURE__ */ g("div", {
+				className: "select-table-empty__action",
+				children: r
+			})
+		]
+	});
+});
+//#endregion
+export { S as SelectTable, O as SelectTableCell, k as SelectTableEmpty, T as SelectTableRow, w as SelectUserCell };
+
+//# sourceMappingURL=SelectTable.js.map

package/dist/SelectTabs.js

@@ -0,0 +1,63 @@
+import { useLayoutEffect as e, useRef as t, useState as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/SelectTabs.tsx
+function a({ tabs: a, value: o, onChange: s, end: c, className: l, ...u }) {
+	let d = t(null), [f, p] = n({
+		left: 0,
+		width: 0
+	});
+	e(() => {
+		let e = d.current;
+		if (!e) return;
+		let t = () => {
+			let t = e.querySelector(".select-tab--active");
+			if (!t) {
+				p((e) => e.width === 0 ? e : {
+					left: e.left,
+					width: 0
+				});
+				return;
+			}
+			let n = t.offsetLeft, r = t.offsetWidth;
+			p((e) => e.left === n && e.width === r ? e : {
+				left: n,
+				width: r
+			});
+		};
+		t();
+		let n = typeof ResizeObserver < "u" ? new ResizeObserver(t) : null;
+		return n == null || n.observe(e), () => n == null ? void 0 : n.disconnect();
+	}, [o, a.length]);
+	let m = {
+		"--tab-ind-left": `${f.left}px`,
+		"--tab-ind-width": `${f.width}px`
+	};
+	return /* @__PURE__ */ i("div", {
+		...u,
+		className: `select-tabs${l ? " " + l : ""}`,
+		role: "tablist",
+		ref: d,
+		style: m,
+		children: [a.map((e) => {
+			let t = e.id === o;
+			return /* @__PURE__ */ i("button", {
+				type: "button",
+				role: "tab",
+				"aria-selected": t,
+				className: `select-tab${t ? " select-tab--active" : ""}`,
+				onClick: () => s(e.id),
+				children: [e.dot && /* @__PURE__ */ r("span", {
+					className: `select-tab__dot select-tab__dot--${e.dot}`,
+					"aria-hidden": "true"
+				}), e.label]
+			}, e.id);
+		}), c != null && /* @__PURE__ */ r("div", {
+			className: "select-tabs__end",
+			children: c
+		})]
+	});
+}
+//#endregion
+export { a as SelectTabs };
+
+//# sourceMappingURL=SelectTabs.js.map