@selectwin/kit 0.1.209 → 0.1.210

package/dist/SelectDetail.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode, ComponentPropsWithoutRef } from 'react';
-export declare function SelectDetailList({ children, stacked, compact, loading, }: {
+import { ReactNode, HTMLAttributes, ComponentPropsWithoutRef } from 'react';
+type SelectDetailListOwnProps = {
     children: ReactNode;
     stacked?: boolean;
     /**
@@ -10,7 +10,11 @@ export declare function SelectDetailList({ children, stacked, compact, loading,
     compact?: boolean;
     /** Shimmer every row's value. The labels stay — only the values are unknown. */
     loading?: boolean;
-}): import("react").JSX.Element;
+    /** 0.1.210: `dl` desenha a lista de definição (`<dl>`, `<dt>`, `<dd>`). Padrão `div`, como antes. */
+    as?: 'div' | 'dl';
+};
+export type SelectDetailListProps = SelectDetailListOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectDetailListOwnProps>;
+export declare function SelectDetailList({ children, stacked, compact, loading, as, className, ...rest }: SelectDetailListProps): import("react").JSX.Element;
 type SelectDetailRowOwnProps = {
     label: ReactNode;
     children: ReactNode;
@@ -21,5 +25,5 @@ type SelectDetailRowOwnProps = {
     loading?: boolean;
 };
 export type SelectDetailRowProps = SelectDetailRowOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectDetailRowOwnProps>;
-export declare const SelectDetailRow: import('react').ForwardRefExoticComponent<SelectDetailRowOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectDetailRowOwnProps> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectDetailRow: import('react').ForwardRefExoticComponent<SelectDetailRowOwnProps & Omit<Omit<import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectDetailRowOwnProps> & import('react').RefAttributes<HTMLDivElement>>;
 export {};

package/dist/SelectDetail.js

@@ -3,40 +3,44 @@ import { useSelectReveal as e } from "./internal/useSelectReveal.js";
 import { createContext as t, forwardRef as n, useContext as r } from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/SelectDetail.tsx
-var o = t(!1);
-function s({ children: t, stacked: n = !1, compact: r = !1, loading: a = !1 }) {
-	let s = e({
+var o = t(!1), s = t(!1);
+function c({ children: t, stacked: n = !1, compact: r = !1, loading: a = !1, as: c = "div", className: l, ...u }) {
+	let d = e({
 		selector: ".select-detail",
 		y: 8,
 		duration: .45,
 		stagger: .05,
 		scroll: !0
-	});
+	}), f = `select-detaillist${n ? " select-detaillist--stacked" : ""}${r ? " select-detaillist--compact" : ""}${l ? " " + l : ""}`;
 	return /* @__PURE__ */ i(o.Provider, {
 		value: a,
-		children: /* @__PURE__ */ i("div", {
-			className: `select-detaillist${n ? " select-detaillist--stacked" : ""}${r ? " select-detaillist--compact" : ""}`,
-			ref: s,
-			children: t
+		children: /* @__PURE__ */ i(s.Provider, {
+			value: c === "dl",
+			children: i(c === "dl" ? "dl" : "div", {
+				...u,
+				className: f,
+				ref: d,
+				children: t
+			})
 		})
 	});
 }
-var c = n(function({ label: e, children: t, action: n, align: s = "center", loading: c, className: l, ...u }, d) {
-	let f = r(o), p = c ?? f;
+var l = n(function({ label: e, children: t, action: n, align: c = "center", loading: l, className: u, ...d }, f) {
+	let p = r(o), m = l ?? p, h = r(s), g = h ? "dt" : "div", _ = h ? "dd" : "div";
 	return /* @__PURE__ */ a("div", {
-		ref: d,
-		...u,
-		className: `select-detail select-detail--${s}${l ? " " + l : ""}`,
+		ref: f,
+		...d,
+		className: `select-detail select-detail--${c}${u ? " " + u : ""}`,
 		children: [
-			/* @__PURE__ */ i("div", {
+			/* @__PURE__ */ i(g, {
 				className: "select-detail__label",
 				children: e
 			}),
-			/* @__PURE__ */ i("div", {
+			/* @__PURE__ */ i(_, {
 				className: "select-detail__value",
-				children: p ? /* @__PURE__ */ i("span", { className: "select-skeleton select-detail__skel" }) : t
+				children: m ? /* @__PURE__ */ i("span", { className: "select-skeleton select-detail__skel" }) : t
 			}),
-			n && /* @__PURE__ */ i("div", {
+			n && /* @__PURE__ */ i(_, {
 				className: "select-detail__action",
 				children: n
 			})
@@ -44,6 +48,6 @@ var c = n(function({ label: e, children: t, action: n, align: s = "center", load
 	});
 });
 //#endregion
-export { s as SelectDetailList, c as SelectDetailRow };
+export { c as SelectDetailList, l as SelectDetailRow };
 
 //# sourceMappingURL=SelectDetail.js.map

package/dist/SelectKpiBand.d.ts

@@ -1,7 +1,9 @@
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, HTMLAttributes } from 'react';
 type SelectKpiBandOwnProps = {
     children: ReactNode;
+    /** 0.1.210: `dl` para a faixa de números só de leitura (os `SelectKpiCard` viram `<dt>` e `<dd>`). Padrão `div`. */
+    as?: 'div' | 'dl';
 };
 export type SelectKpiBandProps = SelectKpiBandOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectKpiBandOwnProps>;
-export declare const SelectKpiBand: import('react').ForwardRefExoticComponent<SelectKpiBandOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectKpiBand: import('react').ForwardRefExoticComponent<SelectKpiBandOwnProps & Omit<Omit<import('react').DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectKpiBandOwnProps> & import('react').RefAttributes<HTMLDivElement>>;
 export {};

package/dist/SelectKpiBand.js

@@ -1,17 +1,28 @@
 /* empty css           */
-import { forwardRef as e } from "react";
-import { jsx as t } from "react/jsx-runtime";
+import { useInsideFrame as e } from "./internal/frame.js";
+import { KpiListContext as t } from "./internal/kpiList.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/SelectKpiBand.tsx
-var n = e(function({ children: e, className: n, ...r }, i) {
-	return /* @__PURE__ */ t("div", {
-		ref: i,
+var i = n(function({ children: n, as: i = "div", className: a, ...o }, s) {
+	let c = `select-kpiband${e() ? " select-kpiband--nested" : ""}${a ? " " + a : ""}`;
+	return i === "dl" ? /* @__PURE__ */ r(t.Provider, {
+		value: !0,
+		children: /* @__PURE__ */ r("dl", {
+			ref: s,
+			...o,
+			className: c,
+			children: n
+		})
+	}) : /* @__PURE__ */ r("div", {
+		ref: s,
 		role: "group",
-		...r,
-		className: `select-kpiband${n ? " " + n : ""}`,
-		children: e
+		...o,
+		className: c,
+		children: n
 	});
 });
 //#endregion
-export { n as SelectKpiBand };
+export { i as SelectKpiBand };
 
 //# sourceMappingURL=SelectKpiBand.js.map

package/dist/SelectKpiCard.js

@@ -1,54 +1,59 @@
 import { SelectInfoTip as e } from "./SelectInfoTip.js";
-import { forwardRef as t } from "react";
-import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useKpiList as t } from "./internal/kpiList.js";
+import { forwardRef as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/SelectKpiCard.tsx
-var a = t(function({ label: t, value: a, caption: o, chart: s, help: c, tone: l, bare: u = !1, onClick: d, selected: f = !1, loading: p = !1, className: m, ...h }, g) {
-	let _ = d != null, v = _ ? {
+var o = n(function({ label: n, value: o, caption: s, chart: c, help: l, tone: u, bare: d = !1, onClick: f, selected: p = !1, loading: m = !1, className: h, ...g }, _) {
+	let v = f != null, y = t(), b = y ? "dt" : "span", x = y ? "dd" : "span", S = y ? "dd" : "div", C = v ? {
 		role: "button",
 		tabIndex: 0,
-		"aria-pressed": f,
-		onClick: d,
+		"aria-pressed": p,
+		onClick: f,
 		onKeyDown: (e) => {
-			e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), d());
+			e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), f());
 		}
-	} : {}, y = "select-kpi" + (u ? " select-kpi--bare" : "") + (_ ? " select-kpi--interactive" : "") + (_ && f ? " select-kpi--selected" : "") + (m ? " " + m : "");
-	return /* @__PURE__ */ i("div", {
-		ref: g,
-		...h,
-		...v,
-		className: y,
-		children: [/* @__PURE__ */ i("span", {
-			className: `select-kpi__label${c == null ? "" : " select-kpi__label--help"}`,
-			children: [c == null ? t : /* @__PURE__ */ r("span", {
+	} : {}, w = "select-kpi" + (d ? " select-kpi--bare" : "") + (v ? " select-kpi--interactive" : "") + (v && p ? " select-kpi--selected" : "") + (h ? " " + h : "");
+	return /* @__PURE__ */ a("div", {
+		ref: _,
+		...g,
+		...C,
+		className: w,
+		children: [/* @__PURE__ */ a(b, {
+			className: `select-kpi__label${l == null ? "" : " select-kpi__label--help"}`,
+			children: [l == null ? n : /* @__PURE__ */ i("span", {
 				className: "select-kpi__labeltext",
-				children: t
-			}), c != null && /* @__PURE__ */ r(e, {
-				content: c,
+				children: n
+			}), l != null && /* @__PURE__ */ i(e, {
+				content: l,
 				placement: "top-end"
 			})]
-		}), p ? /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("span", {
+		}), m ? y ? /* @__PURE__ */ a("dd", {
+			className: "select-kpi__loading",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ i("span", { className: "select-skeleton select-kpi__skelvalue" }), /* @__PURE__ */ i("span", { className: "select-skeleton select-kpi__skelcaption" })]
+		}) : /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("span", {
 			className: "select-skeleton select-kpi__skelvalue",
 			"aria-hidden": "true"
-		}), /* @__PURE__ */ r("span", {
+		}), /* @__PURE__ */ i("span", {
 			className: "select-skeleton select-kpi__skelcaption",
 			"aria-hidden": "true"
-		})] }) : /* @__PURE__ */ i(n, { children: [
-			/* @__PURE__ */ r("span", {
-				className: `select-kpi__value${l ? ` select-kpi__value--${l}` : ""}`,
-				children: a
+		})] }) : /* @__PURE__ */ a(r, { children: [
+			/* @__PURE__ */ i(x, {
+				className: `select-kpi__value${u ? ` select-kpi__value--${u}` : ""}`,
+				children: o
 			}),
-			s != null && /* @__PURE__ */ r("div", {
+			c != null && /* @__PURE__ */ i(S, {
 				className: "select-kpi__chart",
-				children: s
+				children: c
 			}),
-			o != null && /* @__PURE__ */ r("span", {
+			s != null && /* @__PURE__ */ i(x, {
 				className: "select-kpi__caption",
-				children: o
+				children: s
 			})
 		] })]
 	});
 });
 //#endregion
-export { a as SelectKpiCard };
+export { o as SelectKpiCard };
 
 //# sourceMappingURL=SelectKpiCard.js.map

package/dist/SelectPagination.d.ts

@@ -19,5 +19,10 @@ export interface SelectPaginationProps {
     onPage?: (page: number) => void;
     /** Noun for the count label, e.g. "produtos". Defaults to "resultados" ("results" in English, `SelectLocaleProvider`). */
     noun?: string;
+    /**
+     * 0.1.210: a próxima página está chegando (a lista por cursor pede ao servidor). O "próxima" gira e fica
+     * `aria-busy`/`aria-disabled` sem perder o foco (o `disabled` o jogaria no `<body>`), e não aceita outro clique.
+     */
+    loading?: boolean;
 }
 export declare const SelectPagination: import('react').ForwardRefExoticComponent<SelectPaginationProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, keyof SelectPaginationProps> & import('react').RefAttributes<HTMLElement>>;

package/dist/SelectPagination.js

@@ -1,10 +1,11 @@
 /* empty css           */
-import { ChevronLeftIcon as e, ChevronRightIcon as t } from "./icons.js";
-import { formatSelectNumber as n, useSelectLocale as r, useSelectMessages as i } from "./SelectLocale.js";
-import { forwardRef as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { SelectSpinner as e } from "./SelectSpinner.js";
+import { ChevronLeftIcon as t, ChevronRightIcon as n } from "./icons.js";
+import { formatSelectNumber as r, useSelectLocale as i, useSelectMessages as a } from "./SelectLocale.js";
+import { forwardRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/SelectPagination.tsx
-function c(e, t) {
+function l(e, t) {
 	let n = [.../* @__PURE__ */ new Set([
 		1,
 		t,
@@ -15,7 +16,7 @@ function c(e, t) {
 	for (let e of n) e - i > 1 && r.push("gap"), r.push(e), i = e;
 	return r;
 }
-function l(e, t, n, r, i, a, o, s) {
+function u(e, t, n, r, i, a, o, s) {
 	let c = [];
 	if (e != null) {
 		if (e === 0) c.push(o.count(s(0), i));
@@ -26,50 +27,53 @@ function l(e, t, n, r, i, a, o, s) {
 	}
 	return a && r != null && r > 0 && c.push(o.pageOf(s(n), s(r))), c;
 }
-var u = a(function({ page: a, pageCount: u, total: d, pageSize: f, hasPrevious: p, hasNext: m, onPrevious: h, onNext: g, onPage: _, noun: v, className: y, ...b }, x) {
-	let S = i().pagination, C = r(), w = (e) => n(e, C), T = v ?? S.noun, E = p ?? a > 1, D = m ?? (u == null || a < u), O = h ?? (_ ? () => _(a - 1) : void 0), k = g ?? (_ ? () => _(a + 1) : void 0), A = u != null && u > 1 && _ != null, j = A ? c(a, u) : [], M = l(d, f, a, u, T, A, S, w);
-	return /* @__PURE__ */ s("nav", {
-		ref: x,
-		...b,
-		className: `select-pagination${y ? " " + y : ""}`,
-		"aria-label": S.label,
-		children: [/* @__PURE__ */ s("div", {
+var d = o(function({ page: o, pageCount: d, total: f, pageSize: p, hasPrevious: m, hasNext: h, onPrevious: g, onNext: _, onPage: v, noun: y, loading: b = !1, className: x, ...S }, C) {
+	let w = a().pagination, T = i(), E = (e) => r(e, T), D = y ?? w.noun, O = m ?? o > 1, k = h ?? (d == null || o < d), A = g ?? (v ? () => v(o - 1) : void 0), j = _ ?? (v ? () => v(o + 1) : void 0), M = d != null && d > 1 && v != null, N = M ? l(o, d) : [], P = u(f, p, o, d, D, M, w, E);
+	return /* @__PURE__ */ c("nav", {
+		ref: C,
+		...S,
+		className: `select-pagination${x ? " " + x : ""}`,
+		"aria-label": w.label,
+		children: [/* @__PURE__ */ c("div", {
 			className: "select-pagination__controls",
 			children: [
-				/* @__PURE__ */ o("button", {
+				/* @__PURE__ */ s("button", {
 					type: "button",
 					className: "select-pagination__nav",
-					onClick: O,
-					disabled: !E || !O,
-					"aria-label": S.previous,
-					children: /* @__PURE__ */ o(e, {})
+					onClick: A,
+					disabled: !O || !A,
+					"aria-label": w.previous,
+					children: /* @__PURE__ */ s(t, {})
 				}),
-				A ? j.map((e, t) => e === "gap" ? /* @__PURE__ */ o("span", {
+				M ? N.map((e, t) => e === "gap" ? /* @__PURE__ */ s("span", {
 					className: "select-pagination__gap",
 					"aria-hidden": "true",
 					children: "…"
-				}, `gap-${t}`) : /* @__PURE__ */ o("button", {
+				}, `gap-${t}`) : /* @__PURE__ */ s("button", {
 					type: "button",
-					className: `select-pagination__page${e === a ? " is-active" : ""}`,
-					onClick: () => _ == null ? void 0 : _(e),
-					"aria-current": e === a ? "page" : void 0,
+					className: `select-pagination__page${e === o ? " is-active" : ""}`,
+					onClick: () => v == null ? void 0 : v(e),
+					"aria-current": e === o ? "page" : void 0,
 					children: e
-				}, e)) : /* @__PURE__ */ o("span", {
+				}, e)) : /* @__PURE__ */ s("span", {
 					className: "select-pagination__current",
-					children: u == null ? S.page(w(a)) : `${w(a)} / ${w(u)}`
+					"aria-live": "polite",
+					children: d == null ? w.page(E(o)) : `${E(o)} / ${E(d)}`
 				}),
-				/* @__PURE__ */ o("button", {
+				/* @__PURE__ */ s("button", {
 					type: "button",
 					className: "select-pagination__nav",
-					onClick: k,
-					disabled: !D || !k,
-					"aria-label": S.next,
-					children: /* @__PURE__ */ o(t, {})
+					onClick: b ? void 0 : j,
+					disabled: !k || !j,
+					"aria-disabled": b || void 0,
+					"aria-busy": b || void 0,
+					"aria-label": w.next,
+					children: b ? /* @__PURE__ */ s(e, { size: "sm" }) : /* @__PURE__ */ s(n, {})
 				})
 			]
-		}), M.length > 0 && /* @__PURE__ */ o("p", {
+		}), P.length > 0 && /* @__PURE__ */ s("p", {
 			className: "select-pagination__count",
-			children: M.map((e, t) => /* @__PURE__ */ o("span", {
+			children: P.map((e, t) => /* @__PURE__ */ s("span", {
 				className: "select-pagination__part",
 				children: t > 0 ? ` · ${e}` : e
 			}, t))
@@ -77,6 +81,6 @@ var u = a(function({ page: a, pageCount: u, total: d, pageSize: f, hasPrevious:
 	});
 });
 //#endregion
-export { u as SelectPagination };
+export { d as SelectPagination };
 
 //# sourceMappingURL=SelectPagination.js.map

package/dist/index.d.ts

@@ -305,6 +305,7 @@ export type { SelectOfferPriceProps } from './SelectOfferPrice';
 export type { SelectRatingQuoteProps } from './SelectRatingQuote';
 export type { SelectMarkStackProps, SelectMark } from './SelectMarkStack';
 export type { SelectListPagination } from './internal/listChrome';
+export { SelectListFooter } from './internal/listChrome';
 export type { SelectPaginationProps } from './SelectPagination';
 export type { SelectFilterDef } from './SelectFilterBar';
 export type { SelectTagOption } from './SelectTagSelect';