@selectwin/kit 0.1.209 → 0.1.211

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/SelectField.d.ts

@@ -10,6 +10,8 @@ type SelectLabelRowOwnProps = {
     action?: ReactNode;
     /** 0.1.198: o "(opcional)" depois do rótulo, dentro dele (o leitor de tela ouve "Nome (opcional)"). */
     optional?: boolean;
+    /** 0.1.211: o `id` do `<label>` — para outro controle do mesmo campo tomar o nome dele (`aria-labelledby`). */
+    labelId?: string;
 };
 export type SelectLabelRowProps = SelectLabelRowOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectLabelRowOwnProps>;
 export declare const SelectLabelRow: import('react').ForwardRefExoticComponent<SelectLabelRowOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectLabelRowOwnProps> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/SelectField.js

@@ -5,20 +5,21 @@ import { SelectInfoTip as l } from "./SelectInfoTip.js";
 import { forwardRef as u, useId as d, useState as f } from "react";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/SelectField.tsx
-var h = u(function({ htmlFor: e, label: t, help: n, info: r, action: i, optional: o = !1, className: s, ...u }, d) {
-	let f = c();
+var h = u(function({ htmlFor: e, label: t, help: n, info: r, action: i, optional: o = !1, labelId: s, className: u, ...d }, f) {
+	let h = c();
 	return /* @__PURE__ */ m("div", {
-		ref: d,
-		...u,
-		className: `select-field__labelrow${s ? " " + s : ""}`,
+		ref: f,
+		...d,
+		className: `select-field__labelrow${u ? " " + u : ""}`,
 		children: [/* @__PURE__ */ m("span", {
 			className: "select-field__labelwrap",
 			children: [/* @__PURE__ */ m("label", {
 				className: "select-field__label",
 				htmlFor: e,
+				id: s,
 				children: [t, o && /* @__PURE__ */ m("span", {
 					className: "select-field__optional",
-					children: [" ", f.common.optional]
+					children: [" ", h.common.optional]
 				})]
 			}), n != null && n !== "" ? /* @__PURE__ */ p(l, { content: n }) : r && /* @__PURE__ */ p("span", {
 				className: "select-field__info",

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/SelectQuantityField.d.ts

@@ -0,0 +1,39 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+type SelectQuantityFieldOwnProps = {
+    label: ReactNode;
+    value: number | null;
+    /** O número digitado (sem prender a `min`/`max`) ou o da barra (na grade, entre `min` e `sliderMax`); vazio → `null`. */
+    onChange: (value: number | null) => void;
+    /** O menor número da barra (e o de partida da escala). Digitar menos não é bloqueado: diga o erro em `error`. */
+    min: number;
+    /** O maior número que se compra. Digitar mais não é bloqueado: diga o erro em `error`. */
+    max: number;
+    /** Onde a barra termina (padrão: `max`). Acima disso, só digitando. */
+    sliderMax?: number;
+    /** A escala da barra. `log` dá mais espaço aos números pequenos (de 1 mil a 200 mil). Padrão `linear`. */
+    scale?: 'linear' | 'log';
+    /** O passo da grade da barra e do teclado: um número, ou uma função do número (o passo muda com o tamanho). Padrão 1. */
+    step?: number | ((n: number) => number);
+    /** As marcas embaixo da barra (decorativas: o leitor de tela ouve o valor). A que encostaria na vizinha some. */
+    ticks?: number[];
+    /** O texto de cada marca. Padrão: o número compacto do idioma ("5 mil", "200 mil"; "5K" em inglês). */
+    formatTick?: (n: number) => string;
+    /** A unidade dentro da caixa, depois do número ("e-mails", "partes"). */
+    suffix?: ReactNode;
+    /** O valor por extenso para o leitor de tela. Padrão: o número formatado e a unidade, quando ela é texto. */
+    valueText?: (n: number) => string;
+    hint?: ReactNode;
+    /** O erro do número (fora dos limites, por exemplo). Pinta a caixa e toma o lugar do `hint`. */
+    error?: string;
+    disabled?: boolean;
+    /** O `id` da caixa (padrão: gerado). */
+    id?: string;
+    /** O `name` da caixa, para o formulário. */
+    name?: string;
+    onBlur?: () => void;
+    /** Ajuda contextual: o "!" ao lado do rótulo. */
+    help?: ReactNode;
+};
+export type SelectQuantityFieldProps = SelectQuantityFieldOwnProps & Omit<ComponentPropsWithoutRef<'div'>, keyof SelectQuantityFieldOwnProps>;
+export declare const SelectQuantityField: import('react').ForwardRefExoticComponent<SelectQuantityFieldOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SelectQuantityFieldOwnProps> & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/SelectQuantityField.js

@@ -0,0 +1,145 @@
+/* empty css           */
+import { formatSelectNumber as e, selectIntlLocale as t, useSelectLocale as n } from "./SelectLocale.js";
+import { SelectLabelRow as r } from "./SelectField.js";
+import { forwardRef as i, useId as a, useLayoutEffect as o, useRef as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/SelectQuantityField.tsx
+var d = 1e3, f = 8;
+function p(e) {
+	let t = [...e.querySelectorAll(".select-qtyfield__tick")];
+	t.forEach((e) => e.removeAttribute("data-hidden"));
+	let n = t.map((e) => e.getBoundingClientRect());
+	if (t.length < 3 || n.every((e) => e.width === 0)) return;
+	let r = n[n.length - 1], i = n[0];
+	for (let e = 1; e < t.length - 1; e++) {
+		let a = n[e];
+		a.left >= i.right + f && a.right + f <= r.left ? i = a : t[e].setAttribute("data-hidden", "");
+	}
+}
+var m = i(function({ label: i, value: f, onChange: m, min: h, max: g, sliderMax: ee, scale: _ = "linear", step: v = 1, ticks: y, formatTick: b, suffix: x, valueText: S, hint: C, error: w, disabled: T = !1, id: E, name: te, onBlur: D, help: ne, className: O, ...k }, A) {
+	let j = n(), M = a(), N = E ?? M, P = `${N}-label`, F = w ? `${N}-err` : C ? `${N}-hint` : void 0, I = Math.max(h, ee ?? g), L = _ === "log" && h > 0, R = (e) => Math.max(1, typeof v == "function" ? v(e) : v), z = (e) => Math.min(I, Math.max(h, e)), B = (e) => {
+		let t = z(e);
+		if (I === h) return 0;
+		let n = L ? (Math.log(t) - Math.log(h)) / (Math.log(I) - Math.log(h)) : (t - h) / (I - h);
+		return Math.round(n * d);
+	}, V = (e) => {
+		let t = e / d, n = L ? Math.exp(Math.log(h) + t * (Math.log(I) - Math.log(h))) : h + t * (I - h), r = R(n);
+		return z(Math.round(n / r) * r);
+	}, H = (e) => {
+		let t = R(e);
+		return z((Math.floor(e / t) + 1) * t);
+	}, U = (e) => {
+		let t = R(e - 1);
+		return z((Math.ceil(e / t) - 1) * t);
+	}, [W, G] = c(!1), [K, q] = c(""), J = f == null ? "" : e(f, j), Y = W ? K : J, X = (e) => {
+		if (/[^\d.,\s  ]/.test(e)) return;
+		q(e);
+		let t = e.replace(/\D/g, "");
+		m(t === "" ? null : Number(t));
+	}, Z = f == null ? 0 : B(f), re = (t) => (S == null ? void 0 : S(t)) ?? `${e(t, j)}${typeof x == "string" ? ` ${x}` : ""}`, ie = (e) => {
+		let t = z(f ?? h), n = null;
+		if (e.key === "ArrowRight" || e.key === "ArrowUp") n = H(t);
+		else if (e.key === "ArrowLeft" || e.key === "ArrowDown") n = U(t);
+		else if (e.key === "PageUp" || e.key === "PageDown") {
+			n = t;
+			for (let t = 0; t < 10; t++) n = e.key === "PageUp" ? H(n) : U(n);
+		} else e.key === "Home" ? n = h : e.key === "End" && (n = I);
+		n != null && (e.preventDefault(), n !== f && m(n));
+	}, Q = (e) => (b == null ? void 0 : b(e)) ?? new Intl.NumberFormat(t(j), {
+		notation: "compact",
+		maximumFractionDigits: 1
+	}).format(e), $ = s(null), ae = (y == null ? void 0 : y.map((e) => `${e}:${Q(e)}`).join("|")) ?? "";
+	return o(() => {
+		let e = $.current;
+		if (!e || (p(e), typeof ResizeObserver > "u")) return;
+		let t = new ResizeObserver(() => p(e));
+		return t.observe(e), () => t.disconnect();
+	}, [
+		ae,
+		h,
+		I,
+		L
+	]), /* @__PURE__ */ u("div", {
+		ref: A,
+		...k,
+		className: `select-field select-qtyfield${w ? " is-error" : ""}${T ? " is-disabled" : ""}${O ? " " + O : ""}`,
+		children: [
+			/* @__PURE__ */ l(r, {
+				htmlFor: N,
+				labelId: P,
+				label: i,
+				help: ne
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "select-qtyfield__box",
+				children: [/* @__PURE__ */ l("input", {
+					id: N,
+					name: te,
+					className: "select-qtyfield__input",
+					type: "text",
+					inputMode: "numeric",
+					autoComplete: "off",
+					disabled: T,
+					value: Y,
+					onChange: (e) => X(e.target.value),
+					onFocus: () => {
+						G(!0), q(J);
+					},
+					onBlur: () => {
+						G(!1), D == null || D();
+					},
+					"aria-invalid": w ? !0 : void 0,
+					"aria-describedby": F
+				}), x != null && /* @__PURE__ */ l("span", {
+					className: "select-qtyfield__suffix",
+					"aria-hidden": "true",
+					children: x
+				})]
+			}),
+			/* @__PURE__ */ l("div", {
+				className: "select-qtyfield__slider",
+				style: { "--select-qty-pct": `${Z / d * 100}%` },
+				children: /* @__PURE__ */ l("input", {
+					className: "select-qtyfield__range",
+					type: "range",
+					min: 0,
+					max: d,
+					step: 1,
+					value: Z,
+					disabled: T,
+					onChange: (e) => {
+						let t = V(Number(e.target.value));
+						t !== f && m(t);
+					},
+					onKeyDown: ie,
+					"aria-labelledby": P,
+					"aria-describedby": F,
+					"aria-valuetext": f == null ? void 0 : re(f)
+				})
+			}),
+			y && y.length > 0 && /* @__PURE__ */ l("div", {
+				ref: $,
+				className: "select-qtyfield__ticks",
+				"aria-hidden": "true",
+				children: y.map((e, t) => /* @__PURE__ */ l("span", {
+					className: `select-qtyfield__tick${t === 0 ? " is-first" : ""}${t === y.length - 1 ? " is-last" : ""}`,
+					style: { left: `calc(var(--select-qty-thumb) / 2 + (100% - var(--select-qty-thumb)) * ${B(e) / d})` },
+					children: Q(e)
+				}, e))
+			}),
+			w ? /* @__PURE__ */ l("p", {
+				id: `${N}-err`,
+				className: "select-field__error",
+				children: w
+			}) : C ? /* @__PURE__ */ l("p", {
+				id: `${N}-hint`,
+				className: "select-field__hint",
+				children: C
+			}) : null
+		]
+	});
+});
+//#endregion
+export { m as SelectQuantityField };
+
+//# sourceMappingURL=SelectQuantityField.js.map

package/dist/index.d.ts

@@ -240,6 +240,8 @@ export { SelectDateField } from './SelectDateField';
 export type { SelectDateFieldProps } from './SelectDateField';
 export { SelectRating } from './SelectRating';
 export { SelectNumberField } from './SelectNumberField';
+export { SelectQuantityField } from './SelectQuantityField';
+export type { SelectQuantityFieldProps } from './SelectQuantityField';
 export { SelectRepeatingFieldArray } from './SelectRepeatingFieldArray';
 export { SelectBuilderLayout } from './SelectBuilderLayout';
 export { SelectBuilderWorkspace } from './SelectBuilderWorkspace';
@@ -305,6 +307,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';