@selectwin/kit 0.1.196 → 0.1.198

package/dist/SelectDotField.js

@@ -0,0 +1,134 @@
+import { useEffect as e, useRef as t } from "react";
+import n from "gsap";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/SelectDotField.tsx
+var i = (e, t, n) => e < t ? t : e > n ? n : e;
+function a(e, t, n) {
+	let r = e.getPropertyValue(t).match(/(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+	return r ? [
+		Number(r[1]),
+		Number(r[2]),
+		Number(r[3])
+	] : n;
+}
+function o(e, t) {
+	let n = e.trim();
+	if (n.startsWith("#")) {
+		let e = n.slice(1);
+		if (e.length === 3 && (e = e.split("").map((e) => e + e).join("")), e.length >= 6) {
+			let t = parseInt(e.slice(0, 6), 16);
+			return [
+				t >> 16 & 255,
+				t >> 8 & 255,
+				t & 255
+			];
+		}
+	}
+	let r = n.match(/(\d+)[,\s]+(\d+)[,\s]+(\d+)/);
+	return r ? [
+		Number(r[1]),
+		Number(r[2]),
+		Number(r[3])
+	] : t;
+}
+function s({ className: s, theme: c, glowTarget: l }) {
+	let u = t(null);
+	return e(() => {
+		var e, t;
+		let r = u.current;
+		if (!r) return;
+		let s = r.getContext("2d");
+		if (!s) return;
+		let d = ((e = (t = window).matchMedia) == null ? void 0 : e.call(t, "(prefers-reduced-motion: reduce)").matches) ?? !1, f = c === "dark", p = 1.2, m = .32, h = Math.PI * 2, g = getComputedStyle(r), [_, v, y] = a(g, "--select-dot", f ? [
+			235,
+			238,
+			255
+		] : [
+			64,
+			68,
+			92
+		]), [b, x, S] = o(g.getPropertyValue("--select-primary"), f ? [
+			255,
+			255,
+			255
+		] : [
+			33,
+			37,
+			41
+		]), C = 0, w = 0, T = [], E = 0, D = 0, O = null, k = 0, A = {
+			x: 0,
+			y: 0
+		}, j = 0, M = 0, N = -10, P = n.quickTo(A, "x", {
+			duration: .5,
+			ease: "power3.out"
+		}), F = n.quickTo(A, "y", {
+			duration: .5,
+			ease: "power3.out"
+		});
+		function I() {
+			let e = r.getBoundingClientRect();
+			E = e.left, D = e.top, C = e.width, w = e.height;
+			let t = Math.min(window.devicePixelRatio || 1, 2);
+			r.width = Math.round(C * t), r.height = Math.round(w * t), s.setTransform(t, 0, 0, t, 0, 0);
+			let n = r.closest(".select-auth") ?? document;
+			O = l ? n.querySelector(l) : null, T = [];
+			let i = Math.ceil(C / 30) + 1, a = Math.ceil(w / 30) + 1, o = (C - (i - 1) * 30) / 2, c = (w - (a - 1) * 30) / 2;
+			for (let e = 0; e < a; e++) for (let t = 0; t < i; t++) {
+				let n = o + t * 30, r = c + e * 30;
+				T.push({
+					x: n,
+					y: r,
+					phase: (n + r) * .013
+				});
+			}
+			A.x === 0 && A.y === 0 && (A.x = j = C / 2, A.y = M = w / 2);
+		}
+		function L(e, t, n, r, a) {
+			if (!O) return;
+			let o = O.getBoundingClientRect(), s = o.left - E + o.width / 2, c = o.top - D + o.height / 2, l = o.width / 2, u = o.height / 2, d = (e - s) / (l + 18), f = (t - c) / (u + 18), p = Math.sqrt(d * d + f * f), m = p < 1 ? 1 - p : 0, h = m * m * (3 - 2 * m);
+			if (h > .001 || k > .001) {
+				let o = i((e - s) / Math.max(l, 1), -1, 1) * 10 * h, d = i((t - c) / Math.max(u, 1), -1, 1) * 10 * h;
+				O.style.setProperty("--select-card-glow", h.toFixed(3)), O.style.setProperty("--select-card-glow-rgb", `${n}, ${r}, ${a}`), O.style.setProperty("--select-card-glow-x", `${o.toFixed(1)}px`), O.style.setProperty("--select-card-glow-y", `${d.toFixed(1)}px`);
+			}
+			k = h;
+		}
+		function R() {
+			s.clearRect(0, 0, C, w), s.fillStyle = `rgba(${_},${v},${y},${m})`;
+			for (let e of T) s.beginPath(), s.arc(e.x, e.y, p, 0, h), s.fill();
+			O == null || O.style.setProperty("--select-card-glow", "0");
+		}
+		function z(e) {
+			let t, n;
+			e - N < 1.4 ? (t = j, n = M) : (t = C * .5 + Math.cos(e * .45) * C * .3, n = w * .5 + Math.sin(e * .6) * w * .28), P(t), F(n);
+			let r = A.x, i = A.y;
+			s.clearRect(0, 0, C, w);
+			for (let t = 0; t < T.length; t++) {
+				let n = T[t], a = n.x - r, o = n.y - i, c = Math.sqrt(a * a + o * o), l = c < 160 ? 1 - c / 160 : 0, u = l * l, d = Math.sin(e * 1.4 + n.phase) * .5 + .5, f = u * 8, g = c > 1e-4 ? 1 / c : 0, C = n.x - a * g * f, w = n.y - o * g * f, E = 1 + u * 1.9 + d * .14, D = Math.min(1, m + d * .08 + u * .6799999999999999), O = _ + (b - _) * u | 0, k = v + (x - v) * u | 0, A = y + (S - y) * u | 0;
+				u > .12 ? (s.shadowColor = `rgba(${b},${x},${S},${.6 * u})`, s.shadowBlur = 12 * u) : s.shadowBlur = 0, s.beginPath(), s.arc(C, w, p * E, 0, h), s.fillStyle = `rgba(${O},${k},${A},${D})`, s.fill();
+			}
+			s.shadowBlur = 0, L(r, i, b, x, S);
+		}
+		function B(e) {
+			j = e.clientX - E, M = e.clientY - D, N = n.ticker.time;
+		}
+		function V() {
+			let e = r.getBoundingClientRect();
+			E = e.left, D = e.top;
+		}
+		I();
+		let H = new ResizeObserver(() => {
+			I(), d && R();
+		});
+		return H.observe(r), d ? (R(), () => H.disconnect()) : (window.addEventListener("pointermove", B, { passive: !0 }), window.addEventListener("scroll", V, { passive: !0 }), n.ticker.add(z), () => {
+			n.ticker.remove(z), n.killTweensOf(A), window.removeEventListener("pointermove", B), window.removeEventListener("scroll", V), H.disconnect(), O == null || O.style.removeProperty("--select-card-glow");
+		});
+	}, [c, l]), /* @__PURE__ */ r("canvas", {
+		ref: u,
+		className: s,
+		"aria-hidden": "true"
+	});
+}
+//#endregion
+export { s as SelectDotField };
+
+//# sourceMappingURL=SelectDotField.js.map

package/dist/SelectDumbbell.js

@@ -0,0 +1,100 @@
+/* empty css           */
+import { formatCompact as e, niceMax as t, ticks as n, useChartSize as r } from "./chartUtils.js";
+import { ChartTooltip as i, useChartTooltip as a } from "./chartTip.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/SelectDumbbell.tsx
+function c({ data: c, height: l, format: u = e, fromLabel: d = "Antes", toLabel: f = "Depois", labelWidth: p = 96, className: m, ...h }) {
+	let g = l ?? c.length * 34 + 6 + 26, { ref: _, width: v } = r(g), y = a(), b = "var(--select-chart-2)", x = "var(--select-chart-1)", S = t(Math.max(1, ...c.flatMap((e) => [e.from, e.to]))), C = p, w = Math.max(0, v - C - 14), T = g - 6 - 26, E = c.length ? T / c.length : 0, D = (e) => C + e / S * w;
+	return /* @__PURE__ */ s("div", {
+		...h,
+		className: `select-chart-wrap${m ? " " + m : ""}`,
+		ref: _,
+		children: [v > 0 && /* @__PURE__ */ s("svg", {
+			width: v,
+			height: g,
+			className: "select-chart",
+			children: [n(S).map((e, t) => /* @__PURE__ */ s("g", { children: [/* @__PURE__ */ o("line", {
+				x1: D(e),
+				x2: D(e),
+				y1: 6,
+				y2: 6 + T,
+				className: t === 0 ? "select-chart__axis" : "select-chart__grid"
+			}), /* @__PURE__ */ o("text", {
+				x: D(e),
+				y: g - 26 + 16,
+				className: "select-chart__xlabel",
+				textAnchor: "middle",
+				children: u(e)
+			})] }, t)), c.map((e, t) => {
+				let n = 6 + E * t + E / 2;
+				return /* @__PURE__ */ s("g", { children: [
+					/* @__PURE__ */ o("line", {
+						x1: D(e.from),
+						x2: D(e.to),
+						y1: n,
+						y2: n,
+						stroke: "var(--select-chart-track)",
+						strokeWidth: 4,
+						strokeLinecap: "round"
+					}),
+					/* @__PURE__ */ o("circle", {
+						cx: D(e.from),
+						cy: n,
+						r: 5,
+						fill: b,
+						className: "select-chart__dot"
+					}),
+					/* @__PURE__ */ o("circle", {
+						cx: D(e.to),
+						cy: n,
+						r: 5,
+						fill: x,
+						className: "select-chart__dot"
+					}),
+					/* @__PURE__ */ o("text", {
+						x: C - 8,
+						y: n,
+						className: "select-chart__ylabel",
+						dominantBaseline: "middle",
+						textAnchor: "end",
+						children: e.label
+					}),
+					/* @__PURE__ */ o("rect", {
+						x: C,
+						y: n - E / 2,
+						width: w,
+						height: E,
+						fill: "transparent",
+						onMouseEnter: () => y.show({
+							x: (D(e.from) + D(e.to)) / 2,
+							y: n - 8,
+							place: n - 8 < 50 ? "bottom" : "top",
+							title: e.label,
+							rows: [
+								{
+									label: d,
+									value: u(e.from),
+									color: b
+								},
+								{
+									label: f,
+									value: u(e.to),
+									color: x
+								},
+								{
+									label: "Δ",
+									value: `${e.to - e.from >= 0 ? "+" : ""}${u(e.to - e.from)}`
+								}
+							]
+						}),
+						onMouseLeave: y.hide
+					})
+				] }, t);
+			})]
+		}), /* @__PURE__ */ o(i, { tip: y.tip })]
+	});
+}
+//#endregion
+export { c as SelectDumbbell };
+
+//# sourceMappingURL=SelectDumbbell.js.map

package/dist/SelectFactStrip.js

@@ -0,0 +1,42 @@
+/* empty css           */
+import { CheckIcon as e } from "./icons.js";
+import { useSelectMessages as t } from "./SelectLocale.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/SelectFactStrip.tsx
+var a = n(function({ items: n, className: a, ...o }, s) {
+	let c = t().factStrip;
+	return /* @__PURE__ */ r("dl", {
+		ref: s,
+		...o,
+		className: `select-factstrip${a ? " " + a : ""}`,
+		children: n.map((t, n) => /* @__PURE__ */ i("div", {
+			className: `select-factstrip__item${t.state ? ` select-factstrip__item--step select-factstrip__item--${t.state}` : ""}`,
+			children: [t.state && /* @__PURE__ */ r("span", {
+				className: "select-factstrip__mark",
+				"aria-hidden": "true",
+				children: t.state === "done" ? /* @__PURE__ */ r(e, {}) : t.state === "wait" ? /* @__PURE__ */ r("span", { className: "select-factstrip__ring" }) : "!"
+			}), /* @__PURE__ */ i("div", {
+				className: "select-factstrip__text",
+				children: [/* @__PURE__ */ i("dt", {
+					className: "select-factstrip__label",
+					children: [t.label, t.state && /* @__PURE__ */ i("span", {
+						className: "select-factstrip__sr",
+						children: [
+							" (",
+							c[t.state],
+							")"
+						]
+					})]
+				}), t.value != null && t.value !== "" && /* @__PURE__ */ r("dd", {
+					className: `select-factstrip__value${t.tone ? ` select-factstrip__value--${t.tone}` : ""}`,
+					children: t.value
+				})]
+			})]
+		}, n))
+	});
+});
+//#endregion
+export { a as SelectFactStrip };
+
+//# sourceMappingURL=SelectFactStrip.js.map

package/dist/SelectFeeBreakdown.js

@@ -0,0 +1,88 @@
+import { SelectMoney as e } from "./SelectMoney.js";
+import { forwardRef as t } from "react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/SelectFeeBreakdown.tsx
+var a = t(function({ grossCents: t, fees: a, netCents: o, grossLabel: s = "Valor bruto", netLabel: c = "Valor líquido", bar: l = !1, barLabel: u, className: d, ...f }, p) {
+	let m = o ?? t - a.reduce((e, t) => e + t.cents, 0), h = Math.max(0, t - m), g = l && t > 0 && m >= 0, _ = t > 0 ? h / t * 100 : 0;
+	return /* @__PURE__ */ i("div", {
+		ref: p,
+		...f,
+		className: `select-fees${g ? " select-fees--bar" : ""}${d ? " " + d : ""}`,
+		children: [
+			g && /* @__PURE__ */ i("div", {
+				className: "select-fees__visual",
+				children: [/* @__PURE__ */ i("div", {
+					className: "select-fees__bar",
+					"aria-hidden": "true",
+					children: [/* @__PURE__ */ r("span", {
+						className: "select-fees__barnet",
+						style: { flexGrow: m },
+						children: /* @__PURE__ */ r("span", {
+							className: "select-fees__barlabel",
+							children: u ?? /* @__PURE__ */ i(n, { children: [
+								c,
+								" · ",
+								/* @__PURE__ */ r(e, { cents: m })
+							] })
+						})
+					}), h > 0 && /* @__PURE__ */ r("span", {
+						className: "select-fees__barfee",
+						style: { flexGrow: h }
+					})]
+				}), /* @__PURE__ */ i("div", {
+					className: "select-fees__legend",
+					children: [h > 0 && /* @__PURE__ */ i("span", {
+						className: "select-fees__legenditem",
+						children: [
+							/* @__PURE__ */ r("span", {
+								className: "select-fees__dot select-fees__dot--fee",
+								"aria-hidden": "true"
+							}),
+							"Taxas ",
+							/* @__PURE__ */ r(e, { cents: h }),
+							" (",
+							_.toLocaleString("pt-BR", {
+								maximumFractionDigits: 1,
+								minimumFractionDigits: 1
+							}),
+							"%)"
+						]
+					}), /* @__PURE__ */ i("span", {
+						className: "select-fees__legenditem",
+						children: [
+							/* @__PURE__ */ r("span", {
+								className: "select-fees__dot select-fees__dot--net",
+								"aria-hidden": "true"
+							}),
+							"Líquido ",
+							/* @__PURE__ */ r(e, { cents: m })
+						]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ i("div", {
+				className: "select-fees__row",
+				children: [/* @__PURE__ */ r("span", { children: s }), /* @__PURE__ */ r("span", { children: /* @__PURE__ */ r(e, { cents: t }) })]
+			}),
+			a.map((t) => /* @__PURE__ */ i("div", {
+				className: "select-fees__row",
+				children: [/* @__PURE__ */ r("span", { children: t.label }), /* @__PURE__ */ i("span", {
+					className: "select-fees__neg",
+					children: ["−\xA0", /* @__PURE__ */ r(e, { cents: t.cents })]
+				})]
+			}, t.label)),
+			/* @__PURE__ */ r("div", { className: "select-fees__divider" }),
+			/* @__PURE__ */ i("div", {
+				className: "select-fees__row select-fees__row--net",
+				children: [/* @__PURE__ */ r("span", { children: c }), /* @__PURE__ */ r("span", {
+					className: "select-fees__netvalue",
+					children: /* @__PURE__ */ r(e, { cents: m })
+				})]
+			})
+		]
+	});
+});
+//#endregion
+export { a as SelectFeeBreakdown };
+
+//# sourceMappingURL=SelectFeeBreakdown.js.map

package/dist/SelectField.d.ts

@@ -1,4 +1,4 @@
-import { KeyboardEvent, ReactNode, ComponentPropsWithoutRef } from 'react';
+import { ChangeEvent, InputHTMLAttributes, KeyboardEvent, ReactNode, Ref, ComponentPropsWithoutRef } from 'react';
 /** Shared label row: label text, an optional ⓘ info affordance, and a right action. */
 type SelectLabelRowOwnProps = {
     htmlFor: string;
@@ -8,6 +8,8 @@ type SelectLabelRowOwnProps = {
     /** @deprecated use `help` — este usa `title` nativo (sem tema, invisivel no touch). */
     info?: string;
     action?: ReactNode;
+    /** 0.1.198: o "(opcional)" depois do rótulo, dentro dele (o leitor de tela ouve "Nome (opcional)"). */
+    optional?: boolean;
 };
 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>>;
@@ -15,12 +17,24 @@ export declare const SelectLabelRow: import('react').ForwardRefExoticComponent<S
 export declare function charCount(value: string, maxLength: number | undefined): ReactNode;
 /** Junta o contador à ação do rótulo — os dois cabem na mesma ponta da linha. */
 export declare function withCount(action: ReactNode, count: ReactNode): ReactNode;
+/**
+ * Os atributos nativos do `<input>` que o campo repassa (0.1.198): `inputMode`, `spellCheck`, `form`, `pattern`,
+ * `aria-*`, `data-*`, os eventos… Os que o campo controla (o valor, o tipo, o id, a classe) ficam de fora.
+ */
+export type SelectNativeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'type' | 'id' | 'className' | 'size' | 'prefix'>;
 export interface SelectFieldProps {
-    /** Field label. Omit when an outer row already labels the field. */
-    label?: string;
+    /** Field label. Omit when an outer row already labels the field. 0.1.198: aceita um nó. */
+    label?: ReactNode;
     value: string;
-    onChange: (value: string) => void;
-    type?: 'text' | 'email' | 'password' | 'url' | 'tel' | 'date' | 'datetime-local' | 'number';
+    /** O valor novo e, desde a 0.1.198, o evento nativo (ausente quando quem muda é o passo do número). */
+    onChange: (value: string, event?: ChangeEvent<HTMLInputElement>) => void;
+    type?: 'text' | 'email' | 'password' | 'url' | 'tel' | 'date' | 'datetime-local' | 'number' | 'search' | 'time' | 'month' | 'week';
+    /** 0.1.198: o "(opcional)" depois do rótulo. */
+    optional?: boolean;
+    /** 0.1.198: os atributos nativos do `<input>` (ver `SelectNativeInputProps`). */
+    inputProps?: SelectNativeInputProps;
+    /** 0.1.198: a referência do `<input>` (o `ref` do componente é o da caixa). */
+    inputRef?: Ref<HTMLInputElement>;
     /** Right-aligned action next to the label (e.g. a recovery link). */
     labelAction?: ReactNode;
     /** Ajuda contextual: vira o "!" (SelectInfoTip) ao lado do rotulo. Use para o que
@@ -80,10 +94,14 @@ export declare const SelectField: import('react').ForwardRefExoticComponent<Sele
 type SelectCheckboxOwnProps = {
     label: ReactNode;
     checked: boolean;
-    onChange: (checked: boolean) => void;
+    /** O estado novo e, desde a 0.1.198, o evento nativo. */
+    onChange: (checked: boolean, event: ChangeEvent<HTMLInputElement>) => void;
     disabled?: boolean;
+    /** A explicação embaixo do rótulo; desde a 0.1.198 ela é a descrição da caixa (`aria-describedby`). */
     hint?: ReactNode;
     name?: string;
+    /** 0.1.198: os atributos nativos do `<input type="checkbox">` (o `value`, o `form`, o `aria-*`…). */
+    inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'defaultChecked' | 'onChange'>;
 };
 export type SelectCheckboxProps = SelectCheckboxOwnProps & Omit<ComponentPropsWithoutRef<'span'>, keyof SelectCheckboxOwnProps>;
 export declare const SelectCheckbox: import('react').ForwardRefExoticComponent<SelectCheckboxOwnProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, keyof SelectCheckboxOwnProps> & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/SelectField.js

@@ -0,0 +1,196 @@
+import { CheckIcon as e, ChevronDownIcon as t, ChevronUpIcon as n, EyeIcon as r, EyeOffIcon as i, InfoIcon as a } from "./icons.js";
+import { joinIds as o, mergeNative as s } from "./internal/nativeProps.js";
+import { useSelectMessages as c } from "./SelectLocale.js";
+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();
+	return /* @__PURE__ */ m("div", {
+		ref: d,
+		...u,
+		className: `select-field__labelrow${s ? " " + s : ""}`,
+		children: [/* @__PURE__ */ m("span", {
+			className: "select-field__labelwrap",
+			children: [/* @__PURE__ */ m("label", {
+				className: "select-field__label",
+				htmlFor: e,
+				children: [t, o && /* @__PURE__ */ m("span", {
+					className: "select-field__optional",
+					children: [" ", f.common.optional]
+				})]
+			}), n != null && n !== "" ? /* @__PURE__ */ p(l, { content: n }) : r && /* @__PURE__ */ p("span", {
+				className: "select-field__info",
+				title: r,
+				"aria-label": r,
+				children: /* @__PURE__ */ p(a, {})
+			})]
+		}), i]
+	});
+});
+function g(e, t) {
+	if (t == null) return null;
+	let n = e.length;
+	return /* @__PURE__ */ m("span", {
+		className: `select-field__count${n >= t ? " is-full" : ""}`,
+		"aria-hidden": "true",
+		children: [
+			n,
+			"/",
+			t
+		]
+	});
+}
+function _(e, t) {
+	return t == null ? e : e == null || e === !1 ? t : /* @__PURE__ */ m("span", {
+		className: "select-field__actions",
+		children: [t, e]
+	});
+}
+var v = u(function({ label: e, value: a, onChange: l, type: u = "text", labelAction: v, help: y, info: b, description: x, hint: S, error: C, prefix: w, suffix: T, trailingAction: E, mono: ee, autoComplete: te, placeholder: ne, required: D, disabled: O, readOnly: k, name: A, id: j, minLength: re, maxLength: M, showCount: N = !1, min: P, max: F, step: I, inputMode: ie, autoFocus: ae, onBlur: oe, onKeyDown: se, size: ce = "md", optional: le = !1, inputProps: L, inputRef: R, className: z, ...B }, V) {
+	let H = c(), U = d(), W = j ?? U, [G, ue] = f(!1), K = u === "password", de = K && G ? "text" : u, fe = C ? `${W}-err` : S ? `${W}-hint` : void 0, q = w != null || T != null, J = u === "number" && !q && !k, Y = a === "" ? null : Number(a), X = (e) => {
+		let t = Number(I ?? 1) || 1, n = (Y != null && Number.isFinite(Y) ? Y : 0) + e * t;
+		P != null && (n = Math.max(Number(P), n)), F != null && (n = Math.min(Number(F), n)), l(String(n));
+	}, pe = P != null && Y != null && Y <= Number(P), me = F != null && Y != null && Y >= Number(F), Z = s(L, {
+		onBlur: oe,
+		onKeyDown: se,
+		autoComplete: te,
+		placeholder: ne,
+		required: D,
+		disabled: O,
+		readOnly: k,
+		name: A,
+		minLength: re,
+		maxLength: M,
+		min: P,
+		max: F,
+		step: I,
+		inputMode: ie,
+		autoFocus: ae
+	}), he = /* @__PURE__ */ p("input", {
+		...Z,
+		ref: R,
+		id: W,
+		className: `select-input${K ? " select-input--has-suffix" : ""}${J ? " select-input--has-stepper" : ""}${ee ? " select-input--mono" : ""}${C ? " select-input--error" : ""}`,
+		type: de,
+		value: a,
+		onChange: (e) => l(e.target.value, e),
+		"aria-invalid": C ? !0 : Z["aria-invalid"],
+		"aria-describedby": o(fe, L == null ? void 0 : L["aria-describedby"])
+	}), Q = /* @__PURE__ */ m("div", {
+		className: `select-input-wrap${q ? " select-input-wrap--affixed" : ""}${C ? " select-input-wrap--error" : ""}`,
+		children: [
+			w != null && /* @__PURE__ */ p("span", {
+				className: "select-input__affix select-input__affix--prefix",
+				children: w
+			}),
+			he,
+			T != null && /* @__PURE__ */ p("span", {
+				className: "select-input__affix select-input__affix--suffix",
+				children: T
+			}),
+			K && /* @__PURE__ */ p("button", {
+				type: "button",
+				className: "select-input__reveal",
+				onClick: () => ue((e) => !e),
+				"aria-label": G ? H.common.hidePassword : H.common.showPassword,
+				children: p(G ? i : r, {})
+			}),
+			J && /* @__PURE__ */ m("span", {
+				className: "select-stepper",
+				children: [/* @__PURE__ */ p("button", {
+					type: "button",
+					tabIndex: -1,
+					className: "select-stepper__btn",
+					"aria-label": "Aumentar",
+					disabled: O || me,
+					onClick: () => X(1),
+					children: /* @__PURE__ */ p(n, {})
+				}), /* @__PURE__ */ p("button", {
+					type: "button",
+					tabIndex: -1,
+					className: "select-stepper__btn",
+					"aria-label": "Diminuir",
+					disabled: O || pe,
+					onClick: () => X(-1),
+					children: /* @__PURE__ */ p(t, {})
+				})]
+			})
+		]
+	}), $ = _(v, N ? g(a, M) : null);
+	return /* @__PURE__ */ m("div", {
+		ref: V,
+		...B,
+		className: `select-field${ce === "sm" ? " select-field--sm" : ""}${z ? " " + z : ""}`,
+		children: [
+			(e || y || b || $) && /* @__PURE__ */ p(h, {
+				htmlFor: W,
+				label: e,
+				help: y,
+				info: b,
+				action: $,
+				optional: le
+			}),
+			x && /* @__PURE__ */ p("p", {
+				className: "select-field__desc",
+				children: x
+			}),
+			E == null ? Q : /* @__PURE__ */ m("div", {
+				className: "select-field__control",
+				children: [Q, /* @__PURE__ */ p("span", {
+					className: "select-field__trailing",
+					children: E
+				})]
+			}),
+			C ? /* @__PURE__ */ p("p", {
+				id: `${W}-err`,
+				className: "select-field__error",
+				children: C
+			}) : S ? /* @__PURE__ */ p("p", {
+				id: `${W}-hint`,
+				className: "select-field__hint",
+				children: S
+			}) : null
+		]
+	});
+}), y = u(function({ label: t, checked: n, onChange: r, disabled: i, hint: a, name: c, inputProps: l, className: u, ...f }, h) {
+	let g = d(), _ = s(l, {
+		disabled: i,
+		name: c
+	});
+	return /* @__PURE__ */ m("span", {
+		ref: h,
+		...f,
+		className: `select-checkbox-field${i ? " select-checkbox-field--disabled" : ""}${u ? " " + u : ""}`,
+		children: [/* @__PURE__ */ m("label", {
+			className: "select-checkbox",
+			children: [
+				/* @__PURE__ */ p("input", {
+					..._,
+					type: "checkbox",
+					checked: n,
+					onChange: (e) => r(e.target.checked, e),
+					"aria-describedby": o(a ? g : void 0, l == null ? void 0 : l["aria-describedby"])
+				}),
+				/* @__PURE__ */ p("span", {
+					className: "select-checkbox__box",
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ p(e, {})
+				}),
+				/* @__PURE__ */ p("span", {
+					className: "select-checkbox__label",
+					children: t
+				})
+			]
+		}), a && /* @__PURE__ */ p("span", {
+			id: g,
+			className: "select-checkbox__hint",
+			children: a
+		})]
+	});
+});
+//#endregion
+export { y as SelectCheckbox, v as SelectField, h as SelectLabelRow, g as charCount, _ as withCount };
+
+//# sourceMappingURL=SelectField.js.map

package/dist/SelectFieldGrid.js

@@ -0,0 +1,15 @@
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/SelectFieldGrid.tsx
+var n = e(function({ children: e, columns: n = 2, className: r, ...i }, a) {
+	return /* @__PURE__ */ t("div", {
+		ref: a,
+		...i,
+		className: `select-fieldgrid select-fieldgrid--${n}${r ? " " + r : ""}`,
+		children: e
+	});
+});
+//#endregion
+export { n as SelectFieldGrid };
+
+//# sourceMappingURL=SelectFieldGrid.js.map