@selectwin/kit 0.1.196 → 0.1.198

package/dist/SelectTagSelect.js

@@ -0,0 +1,144 @@
+import { CheckIcon as e, ChevronDownIcon as t, CloseIcon as n } from "./icons.js";
+import { useSelectMessages as r } from "./SelectLocale.js";
+import { SelectInfoTip as i } from "./SelectInfoTip.js";
+import { SelectPopover as a } from "./SelectPopover.js";
+import { SelectSearchInput as o } from "./SelectSearchInput.js";
+import { forwardRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/SelectTagSelect.tsx
+var d = s(function({ label: s, options: d, selected: f, onChange: p, placeholder: m, hint: h, help: g, error: _, onBlur: v, size: y = "md", unknownLabel: b, loading: x = !1, loadingLabel: S, disabled: C = !1, className: w, ...T }, E) {
+	let D = r(), O = m ?? D.common.selectPlaceholder, k = S ?? D.common.loading, [A, j] = c(!1), M = x || C, [N, P] = c(""), F = d.filter((e) => e.label.toLowerCase().includes(N.trim().toLowerCase())), I = (e) => p(f.includes(e) ? f.filter((t) => t !== e) : [...f, e]), L = f.map((e) => {
+		let t = d.find((t) => t.value === e);
+		return t ? {
+			value: e,
+			label: t.label,
+			text: t.label,
+			unknown: !1
+		} : {
+			value: e,
+			label: b ? b(e) : e,
+			text: e,
+			unknown: !0
+		};
+	});
+	return /* @__PURE__ */ u("div", {
+		ref: E,
+		...T,
+		className: `select-field${y === "sm" ? " select-field--sm" : ""}${w ? " " + w : ""}`,
+		children: [
+			(s || g) && /* @__PURE__ */ l("div", {
+				className: "select-field__labelrow",
+				children: /* @__PURE__ */ u("span", {
+					className: "select-field__labelwrap",
+					children: [s && /* @__PURE__ */ l("span", {
+						className: "select-field__label",
+						children: s
+					}), g != null && g !== "" && /* @__PURE__ */ l(i, { content: g })]
+				})
+			}),
+			/* @__PURE__ */ l(a, {
+				active: A,
+				onClose: () => {
+					j(!1), v == null || v();
+				},
+				placement: "bottom-start",
+				role: "listbox",
+				matchWidth: !0,
+				activator: /* @__PURE__ */ u("div", {
+					className: `select-tagselect__control${A ? " is-open" : ""}${_ ? " is-error" : ""}${C ? " is-disabled" : ""}${x ? " is-loading" : ""}`,
+					"aria-invalid": _ ? !0 : void 0,
+					"aria-disabled": M || void 0,
+					"aria-busy": x || void 0,
+					role: "button",
+					tabIndex: M ? -1 : 0,
+					"aria-haspopup": "listbox",
+					"aria-expanded": A,
+					onClick: () => !M && j(!0),
+					onKeyDown: (e) => {
+						M || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), j(!0));
+					},
+					children: [x && L.length === 0 ? /* @__PURE__ */ l("span", {
+						className: "select-tagselect__placeholder",
+						children: k
+					}) : L.length === 0 ? /* @__PURE__ */ l("span", {
+						className: "select-tagselect__placeholder",
+						children: O
+					}) : L.map((e) => /* @__PURE__ */ u("span", {
+						className: `select-tagselect__chip${e.unknown ? " select-tagselect__chip--unknown" : ""}`,
+						children: [e.label, !C && /* @__PURE__ */ l("button", {
+							type: "button",
+							className: "select-tagselect__remove",
+							"aria-label": D.common.remove(e.text),
+							onClick: (t) => {
+								t.stopPropagation(), I(e.value);
+							},
+							children: /* @__PURE__ */ l(n, {})
+						})]
+					}, e.value)), /* @__PURE__ */ l("span", {
+						className: "select-tagselect__caret",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ l(t, {})
+					})]
+				}),
+				children: /* @__PURE__ */ u("div", {
+					className: "select-tagselect__menu",
+					children: [/* @__PURE__ */ l("div", {
+						className: "select-tagselect__search",
+						children: /* @__PURE__ */ l(o, {
+							value: N,
+							onChange: P,
+							placeholder: "Buscar…"
+						})
+					}), /* @__PURE__ */ l("div", {
+						className: "select-tagselect__options",
+						role: "presentation",
+						children: F.length === 0 ? /* @__PURE__ */ l("div", {
+							className: "select-tagselect__empty",
+							children: D.common.nothingFound
+						}) : F.map((t) => {
+							let n = f.includes(t.value);
+							return /* @__PURE__ */ u("button", {
+								type: "button",
+								role: "option",
+								"aria-selected": n,
+								className: `select-tagselect__option${n ? " is-selected" : ""}`,
+								onClick: () => I(t.value),
+								children: [
+									t.image && /* @__PURE__ */ l("img", {
+										className: "select-tagselect__optimg",
+										src: t.image,
+										alt: "",
+										loading: "lazy"
+									}),
+									/* @__PURE__ */ u("span", {
+										className: "select-tagselect__optlabel",
+										children: [t.label, t.secondary && /* @__PURE__ */ l("span", {
+											className: "select-tagselect__optsec",
+											children: t.secondary
+										})]
+									}),
+									n && /* @__PURE__ */ l("span", {
+										className: "select-tagselect__check",
+										"aria-hidden": "true",
+										children: /* @__PURE__ */ l(e, {})
+									})
+								]
+							}, t.value);
+						})
+					})]
+				})
+			}),
+			_ ? /* @__PURE__ */ l("p", {
+				className: "select-field__error",
+				children: _
+			}) : h ? /* @__PURE__ */ l("p", {
+				className: "select-field__hint",
+				children: h
+			}) : null
+		]
+	});
+});
+//#endregion
+export { d as SelectTagSelect };
+
+//# sourceMappingURL=SelectTagSelect.js.map

package/dist/SelectTaskCard.js

@@ -0,0 +1,44 @@
+/* empty css           */
+import { forwardRef as e } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/SelectTaskCard.tsx
+var r = e(function({ tone: e = "neutral", media: r, title: i, subtitle: a, meta: o, children: s, footer: c, className: l, ...u }, d) {
+	return /* @__PURE__ */ n("article", {
+		ref: d,
+		...u,
+		className: `select-taskcard select-taskcard--${e}${l ? " " + l : ""}`,
+		children: [/* @__PURE__ */ n("header", {
+			className: "select-taskcard__head",
+			children: [r != null && /* @__PURE__ */ t("div", {
+				className: "select-taskcard__media",
+				children: r
+			}), /* @__PURE__ */ n("div", {
+				className: "select-taskcard__heading",
+				children: [
+					/* @__PURE__ */ t("span", {
+						className: "select-taskcard__title",
+						children: i
+					}),
+					a != null && /* @__PURE__ */ t("span", {
+						className: "select-taskcard__subtitle",
+						children: a
+					}),
+					o != null && /* @__PURE__ */ t("span", {
+						className: "select-taskcard__meta",
+						children: o
+					})
+				]
+			})]
+		}), (s != null || c != null) && /* @__PURE__ */ n("div", {
+			className: "select-taskcard__body",
+			children: [s, c != null && /* @__PURE__ */ t("div", {
+				className: "select-taskcard__footer",
+				children: c
+			})]
+		})]
+	});
+});
+//#endregion
+export { r as SelectTaskCard };
+
+//# sourceMappingURL=SelectTaskCard.js.map

package/dist/SelectText.js

@@ -0,0 +1,25 @@
+/* empty css           */
+import { jsx as e } from "react/jsx-runtime";
+//#region src/SelectText.tsx
+function t({ children: t, as: n = "p", variant: r = "bodyMd", tone: i, fontWeight: a, alignment: o, truncate: s = !1, numeric: c = !1, mono: l = !1, className: u, ...d }) {
+	let f = n, p = [
+		"select-text",
+		`select-text--${r}`,
+		i && i !== "base" ? `select-text--${i}` : "",
+		a ? `select-text--w-${a}` : "",
+		s ? "select-text--truncate" : "",
+		c ? "select-text--numeric" : "",
+		l ? "select-text--mono" : "",
+		u ?? ""
+	].filter(Boolean).join(" "), m = o ? { textAlign: o } : void 0;
+	return /* @__PURE__ */ e(f, {
+		...d,
+		className: p,
+		style: m,
+		children: t
+	});
+}
+//#endregion
+export { t as SelectText };
+
+//# sourceMappingURL=SelectText.js.map

package/dist/SelectTextarea.d.ts

@@ -1,8 +1,18 @@
-import { ReactNode, ComponentPropsWithoutRef } from 'react';
+import { ChangeEvent, ReactNode, Ref, TextareaHTMLAttributes, ComponentPropsWithoutRef } from 'react';
 type SelectTextareaOwnProps = {
-    label?: string;
+    /** 0.1.198: aceita um nó. */
+    label?: ReactNode;
     value: string;
-    onChange: (value: string) => void;
+    /** O valor novo e, desde a 0.1.198, o evento nativo. */
+    onChange: (value: string, event: ChangeEvent<HTMLTextAreaElement>) => void;
+    /** 0.1.198: o "(opcional)" depois do rótulo. */
+    optional?: boolean;
+    /** 0.1.198: os atributos nativos da `<textarea>` (o `spellCheck`, o `readOnly`, o `autoFocus`, o `aria-*`…). */
+    textareaProps?: Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue' | 'onChange' | 'id' | 'className'>;
+    /** 0.1.198: a referência da `<textarea>`. */
+    textareaRef?: Ref<HTMLTextAreaElement>;
+    /** 0.1.198: o id da `<textarea>` (um rótulo de fora aponta para ele). */
+    id?: string;
     labelAction?: 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. */
@@ -10,7 +20,8 @@ type SelectTextareaOwnProps = {
     info?: string;
     /** Helper text shown under the label, above the textarea (Clerk pattern). */
     description?: ReactNode;
-    hint?: string;
+    /** 0.1.198: aceita um nó (um link). */
+    hint?: ReactNode;
     error?: string;
     placeholder?: string;
     rows?: number;

package/dist/SelectTextarea.js

@@ -0,0 +1,58 @@
+import { joinIds as e, mergeNative as t } from "./internal/nativeProps.js";
+import { SelectLabelRow as n, charCount as r, withCount as i } from "./SelectField.js";
+import { forwardRef as a, useId as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/SelectTextarea.tsx
+var l = a(function({ label: a, value: l, onChange: u, labelAction: d, help: f, info: p, description: m, hint: h, error: g, placeholder: _, rows: v = 4, mono: y, name: b, required: x, disabled: S, maxLength: C, showCount: w = !1, onBlur: T, size: E = "md", optional: D = !1, textareaProps: O, textareaRef: k, id: A, className: j, ...M }, N) {
+	let P = o(), F = A ?? P, I = g ? `${F}-err` : h ? `${F}-hint` : void 0, L = i(d, w ? r(l, C) : null), R = t(O, {
+		onBlur: T,
+		placeholder: _,
+		rows: v,
+		name: b,
+		required: x,
+		disabled: S,
+		maxLength: C
+	});
+	return /* @__PURE__ */ c("div", {
+		ref: N,
+		...M,
+		className: `select-field${E === "sm" ? " select-field--sm" : ""}${j ? " " + j : ""}`,
+		children: [
+			(a || f || p || L) && /* @__PURE__ */ s(n, {
+				htmlFor: F,
+				label: a,
+				help: f,
+				info: p,
+				action: L,
+				optional: D
+			}),
+			m && /* @__PURE__ */ s("p", {
+				className: "select-field__desc",
+				children: m
+			}),
+			/* @__PURE__ */ s("textarea", {
+				...R,
+				ref: k,
+				id: F,
+				className: `select-input select-textarea${y ? " select-textarea--mono" : ""}${g ? " select-input--error" : ""}`,
+				value: l,
+				onChange: (e) => u(e.target.value, e),
+				"aria-invalid": g ? !0 : R["aria-invalid"],
+				"aria-describedby": e(I, O == null ? void 0 : O["aria-describedby"])
+			}),
+			g ? /* @__PURE__ */ s("p", {
+				id: `${F}-err`,
+				className: "select-field__error",
+				children: g
+			}) : h ? /* @__PURE__ */ s("p", {
+				id: `${F}-hint`,
+				className: "select-field__hint",
+				children: h
+			}) : null
+		]
+	});
+});
+//#endregion
+export { l as SelectTextarea };
+
+//# sourceMappingURL=SelectTextarea.js.map

package/dist/SelectThemeSwitcher.js

@@ -0,0 +1,66 @@
+import { CheckIcon as e, MonitorIcon as t, MoonIcon as n, SunIcon as r } from "./icons.js";
+import { SelectMenu as i, SelectMenuButton as a, SelectMenuItem as o } from "./SelectMenu.js";
+import { useEffect as s, useRef as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/SelectThemeSwitcher.tsx
+var f = [
+	{
+		value: "light",
+		label: "Claro",
+		icon: /* @__PURE__ */ u(r, {})
+	},
+	{
+		value: "dark",
+		label: "Escuro",
+		icon: /* @__PURE__ */ u(n, {})
+	},
+	{
+		value: "system",
+		label: "Sistema",
+		icon: /* @__PURE__ */ u(t, {})
+	}
+];
+function p(e) {
+	if (e === "system") {
+		var t, n;
+		return (t = (n = window).matchMedia) != null && t.call(n, "(prefers-color-scheme: dark)").matches ? "dark" : "light";
+	}
+	return e;
+}
+function m({ value: t, onChange: n, className: r, ...p }) {
+	let [m, h] = l(!1), g = c(null), _ = f.find((e) => e.value === t) ?? f[2];
+	return s(() => {
+		if (!m) return;
+		let e = (e) => {
+			g.current && !g.current.contains(e.target) && h(!1);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [m]), /* @__PURE__ */ d("div", {
+		...p,
+		className: `select-themeswitcher${r ? " " + r : ""}`,
+		ref: g,
+		children: [/* @__PURE__ */ u(a, {
+			active: m,
+			onClick: () => h((e) => !e),
+			children: /* @__PURE__ */ d("span", {
+				className: "select-themeswitcher__current",
+				children: [_.icon, _.label]
+			})
+		}), m && /* @__PURE__ */ u("div", {
+			className: "select-themeswitcher__popover",
+			children: /* @__PURE__ */ u(i, { children: f.map((r) => /* @__PURE__ */ u(o, {
+				icon: r.icon,
+				active: r.value === t,
+				trailing: r.value === t ? /* @__PURE__ */ u(e, {}) : null,
+				onClick: () => {
+					n(r.value), h(!1);
+				},
+				children: r.label
+			}, r.value)) })
+		})]
+	});
+}
+//#endregion
+export { m as SelectThemeSwitcher, p as resolveSelectTheme };
+
+//# sourceMappingURL=SelectThemeSwitcher.js.map

package/dist/SelectThumbnail.js

@@ -0,0 +1,41 @@
+/* empty css           */
+import { CubeIcon as e } from "./icons.js";
+import { forwardRef as t, useEffect as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/SelectThumbnail.tsx
+var o = t(function({ src: t, alt: o = "", size: s = 40, count: c, className: l, ...u }, d) {
+	let [f, p] = r(!1);
+	n(() => p(!1), [t]);
+	let m = /* @__PURE__ */ i("span", {
+		ref: d,
+		...u,
+		className: `select-thumb${l ? " " + l : ""}`,
+		style: {
+			width: s,
+			height: s
+		},
+		children: t && !f ? /* @__PURE__ */ i("img", {
+			src: t,
+			alt: o,
+			loading: "lazy",
+			className: "select-thumb__img",
+			onError: () => p(!0)
+		}) : /* @__PURE__ */ i("span", {
+			className: "select-thumb__ph",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ i(e, {})
+		})
+	});
+	return !c || c <= 0 ? m : /* @__PURE__ */ a("span", {
+		className: "select-thumb-stack",
+		children: [m, /* @__PURE__ */ a("span", {
+			className: "select-thumb__count",
+			"aria-label": `mais ${c}`,
+			children: ["+", c]
+		})]
+	});
+});
+//#endregion
+export { o as SelectThumbnail };
+
+//# sourceMappingURL=SelectThumbnail.js.map

package/dist/SelectTicker.js

@@ -0,0 +1,69 @@
+/* empty css           */
+import { useMeasuredWidth as e } from "./chartUtils.js";
+import { useEffect as t, useRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/SelectTicker.tsx
+function a({ children: a, speed: o = 28, className: s, ...c }) {
+	let l = n(null), u = n(null), d = n(null), f = e(l, 0), p = e(d, 0), m = f > 0 && p > f + 1, h = n(0), g = n(null), _ = n(!1);
+	t(() => {
+		var e, t;
+		let n = u.current;
+		if (!n) return;
+		if (!m) {
+			h.current = 0, n.style.transform = "";
+			return;
+		}
+		let r = ((e = (t = window).matchMedia) == null ? void 0 : e.call(t, "(prefers-reduced-motion: reduce)").matches) ?? !1, i = 0, a = performance.now(), s = (e) => {
+			let t = Math.min(.1, (e - a) / 1e3);
+			a = e, !g.current && !_.current && !r && (h.current = (h.current + o * t) % Math.max(1, p)), n.style.transform = `translate3d(${(-h.current).toFixed(2)}px, 0, 0)`, i = requestAnimationFrame(s);
+		};
+		return i = requestAnimationFrame(s), () => cancelAnimationFrame(i);
+	}, [
+		m,
+		p,
+		o
+	]);
+	let v = (e) => {
+		m && (g.current = {
+			id: e.pointerId,
+			startX: e.clientX,
+			startOff: h.current
+		}, e.currentTarget.setPointerCapture(e.pointerId));
+	}, y = (e) => {
+		let t = g.current;
+		if (!t || e.pointerId !== t.id) return;
+		let n = Math.max(1, p);
+		h.current = ((t.startOff - (e.clientX - t.startX)) % n + n) % n;
+	}, b = (e) => {
+		var t;
+		((t = g.current) == null ? void 0 : t.id) === e.pointerId && (g.current = null);
+	};
+	return /* @__PURE__ */ r("div", {
+		...c,
+		ref: l,
+		className: `select-ticker${m ? " is-sliding" : ""}${s ? " " + s : ""}`,
+		onPointerDown: v,
+		onPointerMove: y,
+		onPointerUp: b,
+		onPointerCancel: b,
+		onPointerEnter: () => _.current = !0,
+		onPointerLeave: () => _.current = !1,
+		children: /* @__PURE__ */ i("div", {
+			ref: u,
+			className: "select-ticker__track",
+			children: [/* @__PURE__ */ r("div", {
+				ref: d,
+				className: "select-ticker__group",
+				children: a
+			}), m && /* @__PURE__ */ r("div", {
+				className: "select-ticker__group",
+				"aria-hidden": "true",
+				children: a
+			})]
+		})
+	});
+}
+//#endregion
+export { a as SelectTicker };
+
+//# sourceMappingURL=SelectTicker.js.map

package/dist/SelectTile.js

@@ -0,0 +1,62 @@
+import { PlusIcon as e } from "./icons.js";
+import { forwardRef as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/SelectTile.tsx
+var i = t(function({ media: e, sublabel: t, title: i, badge: a, meta: o, accent: s = !0, onClick: c, className: l, ...u }, d) {
+	return /* @__PURE__ */ r("button", {
+		ref: d,
+		...u,
+		type: "button",
+		className: `select-tile${l ? " " + l : ""}`,
+		onClick: c,
+		children: [
+			s && /* @__PURE__ */ n("span", {
+				className: "select-tile__accent",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "select-tile__main",
+				children: [/* @__PURE__ */ r("div", {
+					className: "select-tile__media",
+					children: [e, t && /* @__PURE__ */ n("span", {
+						className: "select-tile__sublabel",
+						children: t
+					})]
+				}), /* @__PURE__ */ r("div", {
+					className: "select-tile__titlegroup",
+					children: [/* @__PURE__ */ n("span", {
+						className: "select-tile__title",
+						children: i
+					}), a && /* @__PURE__ */ n("div", {
+						className: "select-tile__badge",
+						children: a
+					})]
+				})]
+			}),
+			o && /* @__PURE__ */ n("div", {
+				className: "select-tile__meta",
+				children: o
+			})
+		]
+	});
+}), a = t(function({ label: t, onClick: i, className: a, ...o }, s) {
+	return /* @__PURE__ */ r("button", {
+		ref: s,
+		...o,
+		type: "button",
+		className: `select-tile select-tile--create${a ? " " + a : ""}`,
+		onClick: i,
+		children: [/* @__PURE__ */ n("span", {
+			className: "select-tile__plus",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ n(e, {})
+		}), /* @__PURE__ */ n("span", {
+			className: "select-tile__createlabel",
+			children: t
+		})]
+	});
+});
+//#endregion
+export { i as SelectAppTile, a as SelectCreateTile };
+
+//# sourceMappingURL=SelectTile.js.map