@selectwin/kit 0.1.206 → 0.1.208

package/dist/SelectCombobox.d.ts

@@ -35,6 +35,11 @@ type SelectComboboxOwnProps = {
     allowCustom?: boolean;
     /** Rótulo da linha do valor livre. Padrão: `Usar "…"`. */
     customLabel?: (query: string) => ReactNode;
+    /**
+     * 0.1.208: a largura mínima do campo. O combobox mede pelo valor escolhido; numa barra de filtros ele pularia a cada
+     * troca e empurraria o resto da barra. Um comprimento CSS (`'16rem'`).
+     */
+    minWidth?: string;
 };
 export type SelectComboboxProps = SelectComboboxOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectComboboxOwnProps>;
 export declare const SelectCombobox: import('react').ForwardRefExoticComponent<SelectComboboxOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectComboboxOwnProps> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/SelectCombobox.js

@@ -19,26 +19,30 @@ function f({ count: e, children: t }) {
 		children: t
 	});
 }
-var p = o(function({ label: i, value: o, onChange: p, options: m, placeholder: h, searchPlaceholder: g, labelAction: _, help: v, hint: y, error: b, emptyText: x, disabled: S, required: C, size: w = "md", searchable: T = !0, allowCustom: E = !1, customLabel: D, className: O, ...k }, A) {
-	let j = n(), M = h ?? j.common.selectPlaceholder, N = g ?? j.common.searchPlaceholder, P = x ?? j.common.noResults, F = s(), [I, L] = l(!1), [R, z] = l(""), B = m.find((e) => e.value === o), V = B ? B.label : E && o ? o : null, H = c(() => {
-		let e = R.trim().toLowerCase();
+var p = o(function({ label: i, value: o, onChange: p, options: m, placeholder: h, searchPlaceholder: g, labelAction: _, help: v, hint: y, error: b, emptyText: x, disabled: S, required: C, size: w = "md", searchable: T = !0, allowCustom: E = !1, customLabel: D, minWidth: O, className: k, style: A, ...j }, M) {
+	let N = n(), P = h ?? N.common.selectPlaceholder, F = g ?? N.common.searchPlaceholder, I = x ?? N.common.noResults, L = s(), [R, z] = l(!1), [B, V] = l(""), H = m.find((e) => e.value === o), U = H ? H.label : E && o ? o : null, W = c(() => {
+		let e = B.trim().toLowerCase();
 		return !T || !e ? m : m.filter((t) => {
 			var n;
 			return t.label.toLowerCase().includes(e) || ((n = t.secondary) == null ? void 0 : n.toLowerCase().includes(e));
 		});
 	}, [
 		m,
-		R,
+		B,
 		T
-	]), U = R.trim(), W = U ? m.find((e) => e.label.toLowerCase() === U.toLowerCase()) : void 0, G = E && T && U !== "" && !W, K = () => {
-		L(!1), z("");
-	}, q = (e) => {
-		p(e), K();
-	}, J = b ? `${F}-err` : y ? `${F}-hint` : void 0;
+	]), G = B.trim(), K = G ? m.find((e) => e.label.toLowerCase() === G.toLowerCase()) : void 0, q = E && T && G !== "" && !K, J = () => {
+		z(!1), V("");
+	}, Y = (e) => {
+		p(e), J();
+	}, X = b ? `${L}-err` : y ? `${L}-hint` : void 0;
 	return /* @__PURE__ */ d("div", {
-		ref: A,
-		...k,
-		className: `select-field${w === "sm" ? " select-field--sm" : ""}${O ? " " + O : ""}`,
+		ref: M,
+		...j,
+		style: O ? {
+			minWidth: O,
+			...A
+		} : A,
+		className: `select-field${w === "sm" ? " select-field--sm" : ""}${k ? " " + k : ""}`,
 		children: [
 			(i || v || _) && /* @__PURE__ */ d("div", {
 				className: "select-field__labelrow",
@@ -46,7 +50,7 @@ var p = o(function({ label: i, value: o, onChange: p, options: m, placeholder: h
 					className: "select-field__labelwrap",
 					children: [i && /* @__PURE__ */ u("label", {
 						className: "select-field__label",
-						htmlFor: F,
+						htmlFor: L,
 						children: i
 					}), v != null && v !== "" && /* @__PURE__ */ u(r, { content: v })]
 				}), _]
@@ -54,24 +58,24 @@ var p = o(function({ label: i, value: o, onChange: p, options: m, placeholder: h
 			/* @__PURE__ */ u("div", {
 				className: "select-combobox",
 				children: /* @__PURE__ */ u(a, {
-					active: I,
-					onClose: K,
+					active: R,
+					onClose: J,
 					placement: "bottom-start",
 					role: "listbox",
 					matchWidth: !0,
 					activator: /* @__PURE__ */ d("button", {
-						id: F,
+						id: L,
 						type: "button",
-						className: `select-combobox__trigger${b ? " select-input--error" : ""}${I ? " is-open" : ""}`,
-						onClick: () => I ? K() : L(!0),
+						className: `select-combobox__trigger${b ? " select-input--error" : ""}${R ? " is-open" : ""}`,
+						onClick: () => R ? J() : z(!0),
 						disabled: S,
 						"aria-haspopup": "listbox",
-						"aria-expanded": I,
+						"aria-expanded": R,
 						"aria-required": C || void 0,
-						"aria-describedby": J,
+						"aria-describedby": X,
 						children: [/* @__PURE__ */ u("span", {
-							className: `select-combobox__value${V == null ? " is-placeholder" : ""}`,
-							children: V ?? M
+							className: `select-combobox__value${U == null ? " is-placeholder" : ""}`,
+							children: U ?? P
 						}), /* @__PURE__ */ u("span", {
 							className: "select-combobox__caret",
 							"aria-hidden": "true",
@@ -85,33 +89,33 @@ var p = o(function({ label: i, value: o, onChange: p, options: m, placeholder: h
 							children: /* @__PURE__ */ u("input", {
 								className: "select-combobox__searchinput",
 								type: "text",
-								value: R,
-								onChange: (e) => z(e.target.value),
+								value: B,
+								onChange: (e) => V(e.target.value),
 								onKeyDown: (e) => {
-									e.key === "Enter" && E && U !== "" && (e.preventDefault(), q(W ? W.value : U));
+									e.key === "Enter" && E && G !== "" && (e.preventDefault(), Y(K ? K.value : G));
 								},
-								placeholder: N,
+								placeholder: F,
 								autoFocus: !0
 							})
 						}), /* @__PURE__ */ d(f, {
-							count: H.length + +!!G,
-							children: [G && /* @__PURE__ */ u("button", {
+							count: W.length + +!!q,
+							children: [q && /* @__PURE__ */ u("button", {
 								type: "button",
 								role: "option",
 								"aria-selected": !1,
 								className: "select-combobox__option select-combobox__option--custom",
-								onClick: () => q(U),
+								onClick: () => Y(G),
 								children: /* @__PURE__ */ u("span", {
 									className: "select-combobox__optiontext",
 									children: /* @__PURE__ */ u("span", {
 										className: "select-combobox__optionlabel",
-										children: D ? D(U) : `Usar “${U}”`
+										children: D ? D(G) : `Usar “${G}”`
 									})
 								})
-							}), H.length === 0 ? G ? null : /* @__PURE__ */ u("div", {
+							}), W.length === 0 ? q ? null : /* @__PURE__ */ u("div", {
 								className: "select-combobox__empty",
-								children: P
-							}) : H.map((t) => {
+								children: I
+							}) : W.map((t) => {
 								let n = t.value === o;
 								return /* @__PURE__ */ d("button", {
 									type: "button",
@@ -119,7 +123,7 @@ var p = o(function({ label: i, value: o, onChange: p, options: m, placeholder: h
 									"aria-selected": n,
 									disabled: t.disabled,
 									className: `select-combobox__option${n ? " is-selected" : ""}`,
-									onClick: () => q(t.value),
+									onClick: () => Y(t.value),
 									children: [/* @__PURE__ */ d("span", {
 										className: "select-combobox__optiontext",
 										children: [/* @__PURE__ */ u("span", {
@@ -141,11 +145,11 @@ var p = o(function({ label: i, value: o, onChange: p, options: m, placeholder: h
 				})
 			}),
 			b ? /* @__PURE__ */ u("p", {
-				id: `${F}-err`,
+				id: `${L}-err`,
 				className: "select-field__error",
 				children: b
 			}) : y ? /* @__PURE__ */ u("p", {
-				id: `${F}-hint`,
+				id: `${L}-hint`,
 				className: "select-field__hint",
 				children: y
 			}) : null

package/dist/SelectSkeleton.d.ts

@@ -8,10 +8,13 @@ declare function SkeletonThumbnail({ size }: {
     size?: 'small' | 'medium' | 'large';
 }): import("react").JSX.Element;
 /** Área de conteúdo não-textual carregando (chart, mapa, imagem, preview): retângulo
- *  shimmer com 100% da largura do pai e a altura dada. */
-declare function SkeletonBlock({ height, aspectRatio }: {
+ *  shimmer com 100% da largura do pai e a altura dada. 0.1.207: `width` (o número grande
+ *  de um cartão, a bolha de uma conversa) e `className` (o alinhamento no pai). */
+declare function SkeletonBlock({ height, aspectRatio, width, className, }: {
     height?: number | string;
     aspectRatio?: string;
+    width?: number | string;
+    className?: string;
 }): import("react").JSX.Element;
 /** Um campo de formulário carregando: o rótulo curto e a caixa do controle na altura real. */
 declare function SkeletonField({ tall }: {
@@ -23,6 +26,12 @@ declare function SkeletonRow({ media, action, boxed }: {
     action?: boolean;
     boxed?: boolean;
 }): import("react").JSX.Element;
+/** As linhas de uma tabela carregando (0.1.207), fora do SelectDataTable: `columns` colunas (a primeira mais larga, a
+ *  última à direita), `rows` linhas, os tamanhos variando de uma linha para a outra. A forma da tabela que vem. */
+declare function SkeletonTable({ columns, rows }: {
+    columns?: number;
+    rows?: number;
+}): import("react").JSX.Element;
 export declare const SelectSkeleton: (({ lines }: {
     lines?: number;
 }) => import("react").JSX.Element) & {
@@ -32,5 +41,6 @@ export declare const SelectSkeleton: (({ lines }: {
     Block: typeof SkeletonBlock;
     Field: typeof SkeletonField;
     Row: typeof SkeletonRow;
+    Table: typeof SkeletonTable;
 };
 export {};

package/dist/SelectSkeleton.js

@@ -4,19 +4,33 @@ import { jsx as e, jsxs as t } from "react/jsx-runtime";
 function n({ lines: t = 3 }) {
 	return /* @__PURE__ */ e("div", {
 		className: "select-skel-body",
+		"aria-hidden": "true",
 		children: Array.from({ length: Math.max(1, t) }, (t, n) => /* @__PURE__ */ e("div", { className: "select-skeleton select-skel-line" }, n))
 	});
 }
 function r({ size: t = "medium" }) {
-	return /* @__PURE__ */ e("div", { className: `select-skeleton select-skel-display select-skel-display--${t}` });
+	return /* @__PURE__ */ e("div", {
+		className: `select-skeleton select-skel-display select-skel-display--${t}`,
+		"aria-hidden": "true"
+	});
 }
 function i({ size: t = "medium" }) {
-	return /* @__PURE__ */ e("div", { className: `select-skeleton select-skel-thumb select-skel-thumb--${t}` });
+	return /* @__PURE__ */ e("div", {
+		className: `select-skeleton select-skel-thumb select-skel-thumb--${t}`,
+		"aria-hidden": "true"
+	});
 }
-function a({ height: t = 240, aspectRatio: n }) {
+function a({ height: t = 240, aspectRatio: n, width: r, className: i }) {
 	return /* @__PURE__ */ e("div", {
-		className: "select-skeleton select-skel-block",
-		style: n ? { aspectRatio: n } : { height: t }
+		className: `select-skeleton select-skel-block${i ? " " + i : ""}`,
+		style: n ? {
+			aspectRatio: n,
+			width: r
+		} : {
+			height: t,
+			width: r
+		},
+		"aria-hidden": "true"
 	});
 }
 function o({ tall: n = !1 }) {
@@ -40,7 +54,19 @@ function s({ media: n = !0, action: r = !0, boxed: i = !1 }) {
 		]
 	});
 }
-var c = Object.assign(function({ lines: t }) {
+function c({ columns: t = 4, rows: n = 4 }) {
+	let r = Math.max(1, Math.floor(t)), i = { gridTemplateColumns: r === 1 ? "minmax(0, 1fr)" : `minmax(0, 2fr) repeat(${r - 1}, minmax(0, 1fr))` };
+	return /* @__PURE__ */ e("div", {
+		className: "select-skel-table",
+		"aria-hidden": "true",
+		children: Array.from({ length: Math.max(1, Math.floor(n)) }, (t, n) => /* @__PURE__ */ e("div", {
+			className: "select-skel-table__row",
+			style: i,
+			children: Array.from({ length: r }, (t, n) => /* @__PURE__ */ e("div", { className: "select-skeleton select-skel-table__cell" }, n))
+		}, n))
+	});
+}
+var l = Object.assign(function({ lines: t }) {
 	return /* @__PURE__ */ e(n, { lines: t });
 }, {
 	Body: n,
@@ -48,9 +74,10 @@ var c = Object.assign(function({ lines: t }) {
 	Thumbnail: i,
 	Block: a,
 	Field: o,
-	Row: s
+	Row: s,
+	Table: c
 });
 //#endregion
-export { c as SelectSkeleton };
+export { l as SelectSkeleton };
 
 //# sourceMappingURL=SelectSkeleton.js.map

package/dist/SelectTable.d.ts

@@ -117,8 +117,15 @@ type SelectTableEmptyOwnProps = {
     icon?: ReactNode;
     title: ReactNode;
     subtitle?: ReactNode;
-    /** Optional CTA below the text (e.g. "Enable Billing") — for standalone empty cards. */
+    /** Optional CTA below the text (e.g. "Enable Billing") — for standalone empty cards. Várias ações ficam lado a lado. */
     action?: ReactNode;
+    /** 0.1.207: o vazio que é um ERRO (a lista não carregou): o ícone no tom crítico. O `role="alert"` é de quem usa. */
+    tone?: 'critical';
+    /**
+     * 0.1.208: a altura mínima, com o texto centrado nela — o vazio que fica no LUGAR de um gráfico ocupa a altura do
+     * gráfico, e o cartão não encolhe quando o período não tem dado. Um comprimento CSS (`'11.25rem'`).
+     */
+    minHeight?: string;
 };
 export type SelectTableEmptyProps = SelectTableEmptyOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectTableEmptyOwnProps>;
 export declare const SelectTableEmpty: import('react').ForwardRefExoticComponent<SelectTableEmptyOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectTableEmptyOwnProps> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/SelectTable.js

@@ -212,11 +212,15 @@ var O = l(function({ children: e, align: n = "start", disclosure: r, className:
 			children: r !== "none" && /* @__PURE__ */ g(t, {})
 		}) : null, e]
 	});
-}), k = l(function({ icon: e, title: t, subtitle: n, action: r, className: i, ...a }, o) {
+}), k = l(function({ icon: e, title: t, subtitle: n, action: r, tone: i, minHeight: a, className: o, style: s, ...c }, l) {
 	return /* @__PURE__ */ _("div", {
-		ref: o,
-		...a,
-		className: `select-table-empty${i ? " " + i : ""}`,
+		ref: l,
+		...c,
+		style: a ? {
+			minHeight: a,
+			...s
+		} : s,
+		className: `select-table-empty${i === "critical" ? " select-table-empty--critical" : ""}${a ? " select-table-empty--fill" : ""}${o ? " " + o : ""}`,
 		children: [
 			e && /* @__PURE__ */ g("span", {
 				className: "select-table-empty__icon",