@selectwin/kit 0.1.210 → 0.1.212

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

@@ -74,8 +74,16 @@ export interface SelectFlowNodeProps {
     invalid?: boolean;
     onClick?: () => void;
     ariaLabel?: string;
+    /**
+     * Remover o bloco: com ele, o nó ganha uma lixeira no canto de cima, à direita. Ela aparece com o mouse em cima, com
+     * o foco dentro (Tab do nó para ela) ou com o nó selecionado; no toque, só com o nó selecionado. Escondida, não
+     * recebe clique nem foco: um toque no canto do nó não apaga o que não se via. Confirmar ou desfazer é de quem chama.
+     */
+    onRemove?: () => void;
+    /** Nome acessível e dica da lixeira, com o que sai (ex.: "Remover o envio por SMS"). Padrão: "Remover". */
+    removeLabel?: string;
 }
-export declare function SelectFlowNode({ x, y, width, height, shape, tone, icon, order, eyebrow, title, subtitle, tags, titleTone, selected, active, muted, invalid, onClick, ariaLabel, }: SelectFlowNodeProps): import("react").JSX.Element;
+export declare function SelectFlowNode({ x, y, width, height, shape, tone, icon, order, eyebrow, title, subtitle, tags, titleTone, selected, active, muted, invalid, onClick, ariaLabel, onRemove, removeLabel, }: SelectFlowNodeProps): import("react").JSX.Element;
 export interface SelectFlowLayoutProps {
     title: ReactNode;
     subtitle?: ReactNode;

package/dist/SelectFlowCanvas.js

@@ -1,34 +1,34 @@
 /* empty css           */
-import { ArrowLeftIcon as e, CloseIcon as t, MinusCircleIcon as n, PlusIcon as r } from "./icons.js";
-import { SelectAlert as i } from "./SelectAlert.js";
-import { SelectIconButton as a } from "./SelectIconButton.js";
-import { useId as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { ArrowLeftIcon as e, CloseIcon as t, MinusCircleIcon as n, PlusIcon as r, TrashIcon as i } from "./icons.js";
+import { SelectAlert as a } from "./SelectAlert.js";
+import { SelectIconButton as o } from "./SelectIconButton.js";
+import { useId as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/SelectFlowCanvas.tsx
-var u = (e) => Math.round(e * 100) / 100;
-function d({ width: e, height: t, edges: i, labels: d = [], pluses: f = [], children: p, zoom: m, defaultZoom: h = 1, onZoomChange: g, minZoom: _ = .5, maxZoom: v = 1.3, onBackgroundClick: y, ariaLabel: b }) {
-	let x = o().replace(/:/g, ""), [S, C] = s(h), w = m ?? S, T = (e) => {
-		let t = u(Math.min(v, Math.max(_, e)));
+var d = (e) => Math.round(e * 100) / 100;
+function f({ width: e, height: t, edges: i, labels: a = [], pluses: f = [], children: p, zoom: m, defaultZoom: h = 1, onZoomChange: g, minZoom: _ = .5, maxZoom: v = 1.3, onBackgroundClick: y, ariaLabel: b }) {
+	let x = s().replace(/:/g, ""), [S, C] = c(h), w = m ?? S, T = (e) => {
+		let t = d(Math.min(v, Math.max(_, e)));
 		m === void 0 && C(t), g == null || g(t);
 	}, E = `select-flow-arrow-${x}`, D = `select-flow-arrow-on-${x}`;
-	return /* @__PURE__ */ l("div", {
+	return /* @__PURE__ */ u("div", {
 		className: "select-flow",
 		role: "region",
 		"aria-label": b,
-		children: [/* @__PURE__ */ c("div", {
+		children: [/* @__PURE__ */ l("div", {
 			className: "select-flow__scroll",
 			onClick: (e) => {
 				e.target.dataset.flowBackground === "true" && (y == null || y());
 			},
 			"data-flow-background": "true",
-			children: /* @__PURE__ */ c("div", {
+			children: /* @__PURE__ */ l("div", {
 				className: "select-flow__sizer",
 				style: {
 					width: e * w,
 					height: t * w
 				},
 				"data-flow-background": "true",
-				children: /* @__PURE__ */ l("div", {
+				children: /* @__PURE__ */ u("div", {
 					className: "select-flow__stage",
 					style: {
 						width: e,
@@ -37,12 +37,12 @@ function d({ width: e, height: t, edges: i, labels: d = [], pluses: f = [], chil
 					},
 					"data-flow-background": "true",
 					children: [
-						/* @__PURE__ */ l("svg", {
+						/* @__PURE__ */ u("svg", {
 							className: "select-flow__edges",
 							width: e,
 							height: t,
 							"aria-hidden": "true",
-							children: [/* @__PURE__ */ l("defs", { children: [/* @__PURE__ */ c("marker", {
+							children: [/* @__PURE__ */ u("defs", { children: [/* @__PURE__ */ l("marker", {
 								id: E,
 								viewBox: "0 0 10 10",
 								refX: "8",
@@ -50,11 +50,11 @@ function d({ width: e, height: t, edges: i, labels: d = [], pluses: f = [], chil
 								markerWidth: "7",
 								markerHeight: "7",
 								orient: "auto-start-reverse",
-								children: /* @__PURE__ */ c("path", {
+								children: /* @__PURE__ */ l("path", {
 									className: "select-flow__arrow",
 									d: "M 0 0 L 10 5 L 0 10 z"
 								})
-							}), /* @__PURE__ */ c("marker", {
+							}), /* @__PURE__ */ l("marker", {
 								id: D,
 								viewBox: "0 0 10 10",
 								refX: "8",
@@ -62,17 +62,17 @@ function d({ width: e, height: t, edges: i, labels: d = [], pluses: f = [], chil
 								markerWidth: "7",
 								markerHeight: "7",
 								orient: "auto-start-reverse",
-								children: /* @__PURE__ */ c("path", {
+								children: /* @__PURE__ */ l("path", {
 									className: "select-flow__arrow select-flow__arrow--on",
 									d: "M 0 0 L 10 5 L 0 10 z"
 								})
-							})] }), i.map((e) => /* @__PURE__ */ c("path", {
+							})] }), i.map((e) => /* @__PURE__ */ l("path", {
 								d: e.d,
 								className: `select-flow__edge${e.state === "on" ? " select-flow__edge--on" : e.state === "muted" ? " select-flow__edge--muted" : ""}`,
 								markerEnd: `url(#${e.state === "on" ? D : E})`
 							}, e.id))]
 						}),
-						d.map((e) => /* @__PURE__ */ c("span", {
+						a.map((e) => /* @__PURE__ */ l("span", {
 							className: `select-flow__label${e.tone === "yes" ? " select-flow__label--yes" : ""}${e.active ? " select-flow__label--on" : ""}`,
 							style: {
 								left: e.x,
@@ -81,7 +81,7 @@ function d({ width: e, height: t, edges: i, labels: d = [], pluses: f = [], chil
 							children: e.text
 						}, e.id)),
 						p,
-						f.map((e) => /* @__PURE__ */ c("button", {
+						f.map((e) => /* @__PURE__ */ l("button", {
 							type: "button",
 							className: "select-flow__plus",
 							style: {
@@ -91,30 +91,30 @@ function d({ width: e, height: t, edges: i, labels: d = [], pluses: f = [], chil
 							title: e.label,
 							"aria-label": e.label,
 							onClick: e.onClick,
-							children: /* @__PURE__ */ c(r, {})
+							children: /* @__PURE__ */ l(r, {})
 						}, e.id))
 					]
 				})
 			})
-		}), /* @__PURE__ */ l("div", {
+		}), /* @__PURE__ */ u("div", {
 			className: "select-flow__zoom",
 			children: [
-				/* @__PURE__ */ c(a, {
-					icon: /* @__PURE__ */ c(n, {}),
+				/* @__PURE__ */ l(o, {
+					icon: /* @__PURE__ */ l(n, {}),
 					label: "Diminuir o zoom",
 					size: "sm",
 					disabled: w <= _,
 					onClick: () => T(w - .1)
 				}),
-				/* @__PURE__ */ l("button", {
+				/* @__PURE__ */ u("button", {
 					type: "button",
 					className: "select-flow__zoomvalue",
 					onClick: () => T(1),
 					title: "Voltar a 100%",
 					children: [Math.round(w * 100), "%"]
 				}),
-				/* @__PURE__ */ c(a, {
-					icon: /* @__PURE__ */ c(r, {}),
+				/* @__PURE__ */ l(o, {
+					icon: /* @__PURE__ */ l(r, {}),
 					label: "Aumentar o zoom",
 					size: "sm",
 					disabled: w >= v,
@@ -124,149 +124,192 @@ function d({ width: e, height: t, edges: i, labels: d = [], pluses: f = [], chil
 		})]
 	});
 }
-function f({ x: e, y: t, width: n, height: r, shape: i = "card", tone: a = "neutral", icon: o, order: s, eyebrow: u, title: d, subtitle: f, tags: p, titleTone: m = "default", selected: h = !1, active: g = !1, muted: _ = !1, invalid: v = !1, onClick: y, ariaLabel: b }) {
-	let x = `${h ? " is-selected" : v ? " is-invalid" : g ? " is-on" : ""}${_ ? " is-muted" : ""}`, S = {
+function p({ x: e, y: t, width: n, height: r, shape: a = "card", tone: o = "neutral", icon: s, order: c, eyebrow: d, title: f, subtitle: p, tags: h, titleTone: g = "default", selected: _ = !1, active: v = !1, muted: y = !1, invalid: b = !1, onClick: x, ariaLabel: S, onRemove: C, removeLabel: w = "Remover" }) {
+	let T = m({
+		shape: a,
+		tone: o,
+		icon: s,
+		order: c,
+		eyebrow: d,
+		title: f,
+		subtitle: p,
+		tags: h,
+		titleTone: g,
+		selected: _,
+		active: v,
+		muted: y,
+		invalid: b,
+		onClick: x,
+		ariaLabel: S
+	}, C ? {
+		left: 0,
+		top: 0,
+		width: n,
+		height: r
+	} : {
 		left: e,
 		top: t,
 		width: n,
 		height: r
-	}, C = d != null && /* @__PURE__ */ c("span", {
-		className: `select-flownode__title${m === "warning" ? " select-flownode__title--warning" : ""}`,
-		children: d
 	});
-	return i === "decision" ? /* @__PURE__ */ c("button", {
+	return C ? /* @__PURE__ */ u("div", {
+		className: `select-flownode-slot select-flownode-slot--${a}${_ ? " is-selected" : ""}`,
+		style: {
+			left: e,
+			top: t,
+			width: n,
+			height: r
+		},
+		children: [T, /* @__PURE__ */ l("button", {
+			type: "button",
+			className: "select-flownode__remove",
+			"aria-label": w,
+			title: w,
+			onClick: (e) => {
+				e.stopPropagation(), C();
+			},
+			children: /* @__PURE__ */ l(i, {})
+		})]
+	}) : T;
+}
+function m({ shape: e = "card", tone: t = "neutral", icon: n, order: r, eyebrow: i, title: a, subtitle: o, tags: s, titleTone: c = "default", selected: d = !1, active: f = !1, muted: p = !1, invalid: m = !1, onClick: h, ariaLabel: g }, _) {
+	let v = `${d ? " is-selected" : m ? " is-invalid" : f ? " is-on" : ""}${p ? " is-muted" : ""}`, y = a != null && /* @__PURE__ */ l("span", {
+		className: `select-flownode__title${c === "warning" ? " select-flownode__title--warning" : ""}`,
+		children: a
+	});
+	return e === "decision" ? /* @__PURE__ */ l("button", {
 		type: "button",
-		className: `select-flownode select-flownode--decision${x}`,
-		style: S,
-		onClick: y,
-		"aria-label": b,
-		children: /* @__PURE__ */ l("span", {
+		className: `select-flownode select-flownode--decision${v}`,
+		style: _,
+		onClick: h,
+		"aria-label": g,
+		children: /* @__PURE__ */ u("span", {
 			className: "select-flownode__inner",
-			children: [s != null && /* @__PURE__ */ c("span", {
+			children: [r != null && /* @__PURE__ */ l("span", {
 				className: "select-flownode__order",
-				children: s
-			}), /* @__PURE__ */ l("span", {
+				children: r
+			}), /* @__PURE__ */ u("span", {
 				className: "select-flownode__text",
 				children: [
-					u != null && /* @__PURE__ */ c("span", {
+					i != null && /* @__PURE__ */ l("span", {
 						className: "select-flownode__eyebrow",
-						children: u
+						children: i
 					}),
-					C,
-					f != null && /* @__PURE__ */ c("span", {
+					y,
+					o != null && /* @__PURE__ */ l("span", {
 						className: "select-flownode__sub",
-						children: f
+						children: o
 					}),
-					p != null && /* @__PURE__ */ c("span", {
+					s != null && /* @__PURE__ */ l("span", {
 						className: "select-flownode__tags",
-						children: p
+						children: s
 					})
 				]
 			})]
 		})
-	}) : i === "pill" ? /* @__PURE__ */ l("button", {
+	}) : e === "pill" ? /* @__PURE__ */ u("button", {
 		type: "button",
-		className: `select-flownode select-flownode--pill${x}`,
-		style: S,
-		onClick: y,
-		"aria-label": b,
-		children: [o, d]
-	}) : /* @__PURE__ */ l("button", {
+		className: `select-flownode select-flownode--pill${v}`,
+		style: _,
+		onClick: h,
+		"aria-label": g,
+		children: [n, a]
+	}) : /* @__PURE__ */ u("button", {
 		type: "button",
-		className: `select-flownode select-flownode--${i === "terminal" ? "terminal" : "card"}${x}`,
-		style: S,
-		onClick: y,
-		"aria-label": b,
-		children: [i === "card" && o != null && /* @__PURE__ */ c("span", {
-			className: `select-flownode__chip select-flownode__chip--${a}`,
-			children: o
-		}), /* @__PURE__ */ l("span", {
+		className: `select-flownode select-flownode--${e === "terminal" ? "terminal" : "card"}${v}`,
+		style: _,
+		onClick: h,
+		"aria-label": g,
+		children: [e === "card" && n != null && /* @__PURE__ */ l("span", {
+			className: `select-flownode__chip select-flownode__chip--${t}`,
+			children: n
+		}), /* @__PURE__ */ u("span", {
 			className: "select-flownode__text",
 			children: [
-				u != null && /* @__PURE__ */ c("span", {
+				i != null && /* @__PURE__ */ l("span", {
 					className: "select-flownode__eyebrow",
-					children: u
+					children: i
 				}),
-				C,
-				f != null && /* @__PURE__ */ c("span", {
+				y,
+				o != null && /* @__PURE__ */ l("span", {
 					className: "select-flownode__sub",
-					children: f
+					children: o
 				}),
-				p != null && /* @__PURE__ */ c("span", {
+				s != null && /* @__PURE__ */ l("span", {
 					className: "select-flownode__tags",
-					children: p
+					children: s
 				})
 			]
 		})]
 	});
 }
-function p({ title: n, subtitle: r, onBack: o, backLabel: s = "Voltar", toolbar: u, actions: d, error: f, canvas: p, inspectorHead: m, inspector: h, inspectorLabel: g = "Painel", inspectorOpen: _, onInspectorClose: v }) {
+function h({ title: n, subtitle: r, onBack: i, backLabel: s = "Voltar", toolbar: c, actions: d, error: f, canvas: p, inspectorHead: m, inspector: h, inspectorLabel: g = "Painel", inspectorOpen: _, onInspectorClose: v }) {
 	let y = _ !== void 0;
-	return /* @__PURE__ */ l("div", {
+	return /* @__PURE__ */ u("div", {
 		className: `select-flowpage${y ? " select-flowpage--sheet" : ""}${y && _ ? " is-inspecting" : ""}`,
 		children: [
-			/* @__PURE__ */ l("header", {
+			/* @__PURE__ */ u("header", {
 				className: "select-flowpage__bar",
 				children: [
-					o && /* @__PURE__ */ c(a, {
-						icon: /* @__PURE__ */ c(e, {}),
+					i && /* @__PURE__ */ l(o, {
+						icon: /* @__PURE__ */ l(e, {}),
 						label: s,
 						variant: "outline",
-						onClick: o
+						onClick: i
 					}),
-					/* @__PURE__ */ l("div", {
+					/* @__PURE__ */ u("div", {
 						className: "select-flowpage__ident",
-						children: [/* @__PURE__ */ c("span", {
+						children: [/* @__PURE__ */ l("span", {
 							className: "select-flowpage__title",
 							children: n
-						}), r != null && /* @__PURE__ */ c("span", {
+						}), r != null && /* @__PURE__ */ l("span", {
 							className: "select-flowpage__sub",
 							children: r
 						})]
 					}),
-					u != null && /* @__PURE__ */ c("div", {
+					c != null && /* @__PURE__ */ l("div", {
 						className: "select-flowpage__tools",
-						children: u
+						children: c
 					}),
-					d != null && /* @__PURE__ */ c("div", {
+					d != null && /* @__PURE__ */ l("div", {
 						className: "select-flowpage__actions",
 						children: d
 					})
 				]
 			}),
-			f != null && f !== "" && /* @__PURE__ */ c("div", {
+			f != null && f !== "" && /* @__PURE__ */ l("div", {
 				className: "select-flowpage__error",
-				children: /* @__PURE__ */ c(i, {
+				children: /* @__PURE__ */ l(a, {
 					tone: "critical",
 					children: f
 				})
 			}),
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ u("div", {
 				className: "select-flowpage__body",
-				children: [/* @__PURE__ */ c("div", {
+				children: [/* @__PURE__ */ l("div", {
 					className: "select-flowpage__canvas",
 					children: p
-				}), /* @__PURE__ */ l("aside", {
+				}), /* @__PURE__ */ u("aside", {
 					className: "select-flowpage__inspector",
 					"aria-label": g,
 					children: [
-						y && v && /* @__PURE__ */ l("button", {
+						y && v && /* @__PURE__ */ u("button", {
 							type: "button",
 							className: "select-flowpage__sheetclose",
 							onClick: v,
-							children: [/* @__PURE__ */ c("span", {
+							children: [/* @__PURE__ */ l("span", {
 								className: "select-flowpage__sheetgrip",
 								"aria-hidden": "true"
-							}), /* @__PURE__ */ l("span", {
+							}), /* @__PURE__ */ u("span", {
 								className: "select-flowpage__sheetlabel",
-								children: [/* @__PURE__ */ c(t, {}), "Fechar"]
+								children: [/* @__PURE__ */ l(t, {}), "Fechar"]
 							})]
 						}),
-						m != null && /* @__PURE__ */ c("div", {
+						m != null && /* @__PURE__ */ l("div", {
 							className: "select-flowpage__inspectorhead",
 							children: m
 						}),
-						/* @__PURE__ */ c("div", {
+						/* @__PURE__ */ l("div", {
 							className: "select-flowpage__inspectorbody",
 							children: h
 						})
@@ -277,6 +320,6 @@ function p({ title: n, subtitle: r, onBack: o, backLabel: s = "Voltar", toolbar:
 	});
 }
 //#endregion
-export { d as SelectFlowCanvas, p as SelectFlowLayout, f as SelectFlowNode };
+export { f as SelectFlowCanvas, h as SelectFlowLayout, p as SelectFlowNode };
 
 //# sourceMappingURL=SelectFlowCanvas.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