tempest-react-sdk 0.52.0 → 0.54.0

package/dist/components/VirtualTable/VirtualTable.js

@@ -1,109 +1,119 @@
 import { cn as e } from "../../utils/cn.js";
 import { compareValues as t } from "../../utils/compare-values.js";
 import n from "./VirtualTable.module.js";
-import { useCallback as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { memo as r, useCallback as i, useEffect as a, useMemo as o, useRef as s, useState as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/VirtualTable/VirtualTable.tsx
-function d(e) {
+function f(e) {
 	if (e === "right") return n.alignRight;
 	if (e === "center") return n.alignCenter;
 }
-function f({ data: f, columns: p, rowHeight: m, height: h, overscan: g = 4, rowKey: _, initialSort: v, onRowClick: y, emptyMessage: b = "Nenhum registro encontrado.", caption: x, scrollToIndex: S, className: C, ...w }) {
-	let T = o(null), [E, D] = s(0), [O, k] = s(0), [A, j] = s(v ?? null);
-	i(() => {
-		let e = T.current;
-		if (!e || (k(e.clientHeight), typeof ResizeObserver > "u")) return;
-		let t = new ResizeObserver(() => k(e.clientHeight));
+function p({ row: t, index: r, rowHeight: i, columns: a, onRowClick: o }) {
+	return /* @__PURE__ */ u("tr", {
+		"aria-rowindex": r + 1,
+		className: e(n.tr, o && n.clickable),
+		style: { height: i },
+		tabIndex: o ? 0 : void 0,
+		onClick: o ? () => o(t, r) : void 0,
+		onKeyDown: o ? (e) => {
+			(e.key === "Enter" || e.key === " ") && (e.preventDefault(), o(t, r));
+		} : void 0,
+		children: a.map((i) => /* @__PURE__ */ u("td", {
+			className: e(n.td, f(i.align)),
+			style: { width: i.width },
+			children: i.render ? i.render(t, r) : t[i.key] ?? null
+		}, String(i.key)))
+	});
+}
+var m = r(p);
+function h({ data: r, columns: p, rowHeight: h, height: g, overscan: _ = 4, rowKey: v, initialSort: y, onRowClick: b, emptyMessage: x = "Nenhum registro encontrado.", caption: S, scrollToIndex: C, className: w, ...T }) {
+	let E = s(null), [D, O] = c(0), [k, A] = c(0), [j, M] = c(y ?? null);
+	a(() => {
+		let e = E.current;
+		if (!e || (A(e.clientHeight), typeof ResizeObserver > "u")) return;
+		let t = new ResizeObserver(() => A(e.clientHeight));
 		return t.observe(e), () => t.disconnect();
-	}, []), i(() => {
-		let e = T.current;
-		!e || S == null || (e.scrollTop = Math.max(0, Math.min(S, f.length - 1)) * m);
+	}, []), a(() => {
+		let e = E.current;
+		!e || C == null || (e.scrollTop = Math.max(0, Math.min(C, r.length - 1)) * h);
 	}, [
-		S,
-		m,
-		f.length
+		C,
+		h,
+		r.length
 	]);
-	let M = a(() => {
-		if (!A) return f;
-		let e = A.direction === "asc" ? 1 : -1;
-		return [...f].sort((n, r) => t(n[A.key], r[A.key]) * e);
-	}, [f, A]), N = Math.max(0, Math.floor(E / m) - g), P = Math.ceil(O / m) + g * 2, F = Math.min(M.length, N + P), I = M.slice(N, F), L = r((e) => {
-		j((t) => !t || t.key !== e ? {
+	let N = o(() => {
+		if (!j) return r;
+		let e = j.direction === "asc" ? 1 : -1;
+		return [...r].sort((n, r) => t(n[j.key], r[j.key]) * e);
+	}, [r, j]), P = Math.max(0, Math.floor(D / h) - _), F = Math.ceil(k / h) + _ * 2, I = Math.min(N.length, P + F), L = N.slice(P, I), R = i((e) => {
+		M((t) => !t || t.key !== e ? {
 			key: e,
 			direction: "asc"
 		} : t.direction === "asc" ? {
 			key: e,
 			direction: "desc"
 		} : null);
-		let t = T.current;
-		t && (t.scrollTop = 0), D(0);
+		let t = E.current;
+		t && (t.scrollTop = 0), O(0);
 	}, []);
-	return /* @__PURE__ */ l("div", {
-		ref: T,
-		className: e(n.scroll, C),
-		style: { height: h },
-		onScroll: (e) => D(e.currentTarget.scrollTop),
-		...w,
-		children: /* @__PURE__ */ u("table", {
+	return /* @__PURE__ */ u("div", {
+		ref: E,
+		className: e(n.scroll, w),
+		style: { height: g },
+		onScroll: (e) => O(e.currentTarget.scrollTop),
+		...T,
+		children: /* @__PURE__ */ d("table", {
 			className: n.table,
-			"aria-rowcount": M.length,
+			"aria-rowcount": N.length,
 			children: [
-				x ? /* @__PURE__ */ l("caption", {
+				S ? /* @__PURE__ */ u("caption", {
 					className: n.caption,
-					children: x
+					children: S
 				}) : null,
-				/* @__PURE__ */ l("thead", {
+				/* @__PURE__ */ u("thead", {
 					className: n.head,
-					children: /* @__PURE__ */ l("tr", { children: p.map((t) => {
-						let r = A?.key === t.key;
-						return /* @__PURE__ */ l("th", {
+					children: /* @__PURE__ */ u("tr", { children: p.map((t) => {
+						let r = j?.key === t.key;
+						return /* @__PURE__ */ u("th", {
 							scope: "col",
-							className: e(n.th, d(t.align)),
+							className: e(n.th, f(t.align)),
 							style: { width: t.width },
-							"aria-sort": r ? A?.direction === "asc" ? "ascending" : "descending" : t.sortable ? "none" : void 0,
-							children: t.sortable ? /* @__PURE__ */ u("button", {
+							"aria-sort": r ? j?.direction === "asc" ? "ascending" : "descending" : t.sortable ? "none" : void 0,
+							children: t.sortable ? /* @__PURE__ */ d("button", {
 								type: "button",
 								className: n.sortButton,
-								onClick: () => L(t.key),
-								children: [t.header, /* @__PURE__ */ l("span", {
+								onClick: () => R(t.key),
+								children: [t.header, /* @__PURE__ */ u("span", {
 									className: n.sortIndicator,
 									"aria-hidden": !0,
-									children: r ? A?.direction === "asc" ? "▲" : "▼" : "↕"
+									children: r ? j?.direction === "asc" ? "▲" : "▼" : "↕"
 								})]
 							}) : t.header
 						}, String(t.key));
 					}) })
 				}),
-				/* @__PURE__ */ l("tbody", { children: M.length === 0 ? /* @__PURE__ */ l("tr", { children: /* @__PURE__ */ l("td", {
+				/* @__PURE__ */ u("tbody", { children: N.length === 0 ? /* @__PURE__ */ u("tr", { children: /* @__PURE__ */ u("td", {
 					className: n.emptyRow,
 					colSpan: p.length,
-					children: b
-				}) }) : /* @__PURE__ */ u(c, { children: [
-					N > 0 && /* @__PURE__ */ l("tr", {
+					children: x
+				}) }) : /* @__PURE__ */ d(l, { children: [
+					P > 0 && /* @__PURE__ */ u("tr", {
 						"aria-hidden": !0,
-						style: { height: N * m }
+						style: { height: P * h }
 					}),
-					I.map((t, r) => {
-						let i = N + r;
-						return /* @__PURE__ */ l("tr", {
-							"aria-rowindex": i + 1,
-							className: e(n.tr, y && n.clickable),
-							style: { height: m },
-							tabIndex: y ? 0 : void 0,
-							onClick: y ? () => y(t, i) : void 0,
-							onKeyDown: y ? (e) => {
-								(e.key === "Enter" || e.key === " ") && (e.preventDefault(), y(t, i));
-							} : void 0,
-							children: p.map((r) => /* @__PURE__ */ l("td", {
-								className: e(n.td, d(r.align)),
-								style: { width: r.width },
-								children: r.render ? r.render(t, i) : t[r.key] ?? null
-							}, String(r.key)))
-						}, _ ? _(t, i) : i);
+					L.map((e, t) => {
+						let n = P + t;
+						return /* @__PURE__ */ u(m, {
+							row: e,
+							index: n,
+							rowHeight: h,
+							columns: p,
+							onRowClick: b
+						}, v ? v(e, n) : n);
 					}),
-					F < M.length && /* @__PURE__ */ l("tr", {
+					I < N.length && /* @__PURE__ */ u("tr", {
 						"aria-hidden": !0,
-						style: { height: (M.length - F) * m }
+						style: { height: (N.length - I) * h }
 					})
 				] }) })
 			]
@@ -111,6 +121,6 @@ function f({ data: f, columns: p, rowHeight: m, height: h, overscan: g = 4, rowK
 	});
 }
 //#endregion
-export { f as VirtualTable };
+export { h as VirtualTable };
 
 //# sourceMappingURL=VirtualTable.js.map

package/dist/components/VirtualTable/VirtualTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualTable.js","names":[],"sources":["../../../src/components/VirtualTable/VirtualTable.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count — windowing needs its own measurements\n * (rowHeight, height, overscan, scrollToIndex) on top of everything a table already\n * takes (data, columns, rowKey, initialSort, onRowClick, emptyMessage, caption). The\n * caption is not optional chrome — a virtualised grid without one is unreadable to a\n * screen reader.\n */\nimport {\n    type HTMLAttributes,\n    type ReactNode,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport { compareValues } from \"@/utils/compare-values\";\n\nimport type { TableAlign } from \"../Table\";\nimport styles from \"./VirtualTable.module.css\";\n\nexport type VirtualTableSortDirection = \"asc\" | \"desc\";\n\nexport interface VirtualTableSort<T> {\n    key: keyof T;\n    direction: VirtualTableSortDirection;\n}\n\nexport interface VirtualTableColumn<T> {\n    /** Property of the row this column reads from. Doubles as the cell key. */\n    key: keyof T;\n    /** Column heading. */\n    header: ReactNode;\n    /** Custom cell renderer. Defaults to `row[key]`. */\n    render?: (row: T, index: number) => ReactNode;\n    /** Enable click-to-sort on this column's header. */\n    sortable?: boolean;\n    /** Text alignment. */\n    align?: TableAlign;\n    /**\n     * Column width. Recommended for every column: virtualized rows enter and\n     * leave the DOM as you scroll, so letting the browser auto-size columns from\n     * whatever is currently rendered makes them jump mid-scroll.\n     */\n    width?: string | number;\n}\n\nexport interface VirtualTableProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** Full dataset. Every row is accounted for; only the visible ones render. */\n    data: T[];\n    /** Column definitions. */\n    columns: VirtualTableColumn<T>[];\n    /**\n     * Row height in px. Must be uniform and must match what the CSS produces,\n     * because it is what maps scroll offset to row index.\n     */\n    rowHeight: number;\n    /** Height of the scroll viewport — a number of px or any CSS length. */\n    height: number | string;\n    /** Rows rendered above and below the viewport. Default `4`. */\n    overscan?: number;\n    /** Stable key extractor. Defaults to the row's index in `data`. */\n    rowKey?: (row: T, index: number) => string | number;\n    /** Sort applied before any header interaction. */\n    initialSort?: VirtualTableSort<T>;\n    /** Called when a row is activated by click, `Enter` or `Space`. */\n    onRowClick?: (row: T, index: number) => void;\n    /** Content shown when `data` is empty. */\n    emptyMessage?: ReactNode;\n    /** Accessible name for the table. Rendered as a visually hidden `<caption>`. */\n    caption?: ReactNode;\n    /** Scroll this row into view whenever it changes. */\n    scrollToIndex?: number;\n}\n\n/** Resolve a column's alignment to its CSS module class. */\nfunction alignClass(align: TableAlign | undefined): string | undefined {\n    if (align === \"right\") return styles.alignRight;\n    if (align === \"center\") return styles.alignCenter;\n    return undefined;\n}\n\n/**\n * A table that stays responsive at 10k+ rows by rendering only the visible window.\n *\n * `Table` renders every row it is given and `DataTable` paginates to keep that\n * count small; neither has an answer for \"show me all 40 000 rows in one\n * scrollable grid\". This does, at the cost of one constraint: **`rowHeight` must\n * be uniform**, since mapping a scroll offset to a row index is what makes the\n * window computable without measuring anything.\n *\n * It stays a real `<table>`. The window is produced by two spacer rows — one\n * above the visible slice, one below — instead of absolutely positioning rows.\n * That is deliberate: `position: absolute` on `<tr>` collapses table layout, so\n * every column width would have to be computed by hand, and the element would\n * stop being a table for assistive technology. With spacer rows the browser keeps\n * doing column layout and screen readers keep announcing a grid.\n *\n * Because only a slice is in the DOM, `aria-rowcount` on the table and\n * `aria-rowindex` on each row carry the real numbers — without them a screen\n * reader announces \"row 3 of 20\" while the user is on row 5003 of 40 000.\n *\n * @example\n * <VirtualTable\n *     data={rows}\n *     columns={[\n *         { key: \"id\", header: \"#\", width: 80, sortable: true },\n *         { key: \"name\", header: \"Nome\", width: 240, sortable: true },\n *         { key: \"total\", header: \"Total\", align: \"right\", width: 120, sortable: true },\n *     ]}\n *     rowHeight={40}\n *     height={480}\n *     rowKey={(row) => row.id}\n * />\n */\nexport function VirtualTable<T>({\n    data,\n    columns,\n    rowHeight,\n    height,\n    overscan = 4,\n    rowKey,\n    initialSort,\n    onRowClick,\n    emptyMessage = \"Nenhum registro encontrado.\",\n    caption,\n    scrollToIndex,\n    className,\n    ...rest\n}: VirtualTableProps<T>) {\n    const scrollRef = useRef<HTMLDivElement>(null);\n    const [scrollTop, setScrollTop] = useState<number>(0);\n    const [viewport, setViewport] = useState<number>(0);\n    const [sort, setSort] = useState<VirtualTableSort<T> | null>(initialSort ?? null);\n\n    useEffect(() => {\n        const element = scrollRef.current;\n        if (!element) return;\n        setViewport(element.clientHeight);\n        if (typeof ResizeObserver === \"undefined\") return;\n        const observer = new ResizeObserver(() => setViewport(element.clientHeight));\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, []);\n\n    useEffect(() => {\n        const element = scrollRef.current;\n        if (!element || scrollToIndex == null) return;\n        element.scrollTop = Math.max(0, Math.min(scrollToIndex, data.length - 1)) * rowHeight;\n    }, [scrollToIndex, rowHeight, data.length]);\n\n    const sorted = useMemo<T[]>(() => {\n        if (!sort) return data;\n        const factor = sort.direction === \"asc\" ? 1 : -1;\n        return [...data].sort((a, b) => compareValues(a[sort.key], b[sort.key]) * factor);\n    }, [data, sort]);\n\n    const start = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);\n    const windowSize = Math.ceil(viewport / rowHeight) + overscan * 2;\n    const end = Math.min(sorted.length, start + windowSize);\n    const slice = sorted.slice(start, end);\n\n    /**\n     * Advance a column through asc → desc → unsorted, and jump back to the top.\n     *\n     * The scroll reset happens here rather than in an effect keyed on the sort\n     * state for two reasons: this is the actual event that invalidates the offset\n     * (keeping it would leave the user at the same pixel of a different dataset,\n     * which reads as the table having jumped somewhere random), and an effect would\n     * also fire on mount — clobbering an initial `scrollToIndex`.\n     */\n    const toggleSort = useCallback((key: keyof T): void => {\n        setSort((current) => {\n            if (!current || current.key !== key) return { key, direction: \"asc\" };\n            if (current.direction === \"asc\") return { key, direction: \"desc\" };\n            return null;\n        });\n        const element = scrollRef.current;\n        if (element) element.scrollTop = 0;\n        setScrollTop(0);\n    }, []);\n\n    return (\n        <div\n            ref={scrollRef}\n            className={cn(styles.scroll, className)}\n            style={{ height }}\n            onScroll={(event) => setScrollTop(event.currentTarget.scrollTop)}\n            {...rest}\n        >\n            <table className={styles.table} aria-rowcount={sorted.length}>\n                {caption ? <caption className={styles.caption}>{caption}</caption> : null}\n                <thead className={styles.head}>\n                    <tr>\n                        {columns.map((column) => {\n                            const isSorted = sort?.key === column.key;\n                            return (\n                                <th\n                                    key={String(column.key)}\n                                    scope=\"col\"\n                                    className={cn(styles.th, alignClass(column.align))}\n                                    style={{ width: column.width }}\n                                    aria-sort={\n                                        isSorted\n                                            ? sort?.direction === \"asc\"\n                                                ? \"ascending\"\n                                                : \"descending\"\n                                            : column.sortable\n                                              ? \"none\"\n                                              : undefined\n                                    }\n                                >\n                                    {column.sortable ? (\n                                        <button\n                                            type=\"button\"\n                                            className={styles.sortButton}\n                                            onClick={() => toggleSort(column.key)}\n                                        >\n                                            {column.header}\n                                            <span className={styles.sortIndicator} aria-hidden>\n                                                {isSorted\n                                                    ? sort?.direction === \"asc\"\n                                                        ? \"▲\"\n                                                        : \"▼\"\n                                                    : \"↕\"}\n                                            </span>\n                                        </button>\n                                    ) : (\n                                        column.header\n                                    )}\n                                </th>\n                            );\n                        })}\n                    </tr>\n                </thead>\n                <tbody>\n                    {sorted.length === 0 ? (\n                        <tr>\n                            <td className={styles.emptyRow} colSpan={columns.length}>\n                                {emptyMessage}\n                            </td>\n                        </tr>\n                    ) : (\n                        <>\n                            {start > 0 && <tr aria-hidden style={{ height: start * rowHeight }} />}\n                            {slice.map((row, offset) => {\n                                const index = start + offset;\n                                return (\n                                    <tr\n                                        key={rowKey ? rowKey(row, index) : index}\n                                        aria-rowindex={index + 1}\n                                        className={cn(styles.tr, onRowClick && styles.clickable)}\n                                        style={{ height: rowHeight }}\n                                        tabIndex={onRowClick ? 0 : undefined}\n                                        onClick={\n                                            onRowClick ? () => onRowClick(row, index) : undefined\n                                        }\n                                        onKeyDown={\n                                            onRowClick\n                                                ? (event) => {\n                                                      if (\n                                                          event.key === \"Enter\" ||\n                                                          event.key === \" \"\n                                                      ) {\n                                                          event.preventDefault();\n                                                          onRowClick(row, index);\n                                                      }\n                                                  }\n                                                : undefined\n                                        }\n                                    >\n                                        {columns.map((column) => (\n                                            <td\n                                                key={String(column.key)}\n                                                className={cn(styles.td, alignClass(column.align))}\n                                                style={{ width: column.width }}\n                                            >\n                                                {column.render\n                                                    ? column.render(row, index)\n                                                    : ((row[column.key] as ReactNode) ?? null)}\n                                            </td>\n                                        ))}\n                                    </tr>\n                                );\n                            })}\n                            {end < sorted.length && (\n                                <tr\n                                    aria-hidden\n                                    style={{ height: (sorted.length - end) * rowHeight }}\n                                />\n                            )}\n                        </>\n                    )}\n                </tbody>\n            </table>\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"VirtualTable.js","names":[],"sources":["../../../src/components/VirtualTable/VirtualTable.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count — windowing needs its own measurements\n * (rowHeight, height, overscan, scrollToIndex) on top of everything a table already\n * takes (data, columns, rowKey, initialSort, onRowClick, emptyMessage, caption). The\n * caption is not optional chrome — a virtualised grid without one is unreadable to a\n * screen reader.\n */\nimport {\n    type HTMLAttributes,\n    type ReactNode,\n    memo,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport { compareValues } from \"@/utils/compare-values\";\n\nimport type { TableAlign } from \"../Table\";\nimport styles from \"./VirtualTable.module.css\";\n\nexport type VirtualTableSortDirection = \"asc\" | \"desc\";\n\nexport interface VirtualTableSort<T> {\n    key: keyof T;\n    direction: VirtualTableSortDirection;\n}\n\nexport interface VirtualTableColumn<T> {\n    /** Property of the row this column reads from. Doubles as the cell key. */\n    key: keyof T;\n    /** Column heading. */\n    header: ReactNode;\n    /** Custom cell renderer. Defaults to `row[key]`. */\n    render?: (row: T, index: number) => ReactNode;\n    /** Enable click-to-sort on this column's header. */\n    sortable?: boolean;\n    /** Text alignment. */\n    align?: TableAlign;\n    /**\n     * Column width. Recommended for every column: virtualized rows enter and\n     * leave the DOM as you scroll, so letting the browser auto-size columns from\n     * whatever is currently rendered makes them jump mid-scroll.\n     */\n    width?: string | number;\n}\n\nexport interface VirtualTableProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** Full dataset. Every row is accounted for; only the visible ones render. */\n    data: T[];\n    /** Column definitions. */\n    columns: VirtualTableColumn<T>[];\n    /**\n     * Row height in px. Must be uniform and must match what the CSS produces,\n     * because it is what maps scroll offset to row index.\n     */\n    rowHeight: number;\n    /** Height of the scroll viewport — a number of px or any CSS length. */\n    height: number | string;\n    /** Rows rendered above and below the viewport. Default `4`. */\n    overscan?: number;\n    /** Stable key extractor. Defaults to the row's index in `data`. */\n    rowKey?: (row: T, index: number) => string | number;\n    /** Sort applied before any header interaction. */\n    initialSort?: VirtualTableSort<T>;\n    /** Called when a row is activated by click, `Enter` or `Space`. */\n    onRowClick?: (row: T, index: number) => void;\n    /** Content shown when `data` is empty. */\n    emptyMessage?: ReactNode;\n    /** Accessible name for the table. Rendered as a visually hidden `<caption>`. */\n    caption?: ReactNode;\n    /** Scroll this row into view whenever it changes. */\n    scrollToIndex?: number;\n}\n\n/** Resolve a column's alignment to its CSS module class. */\nfunction alignClass(align: TableAlign | undefined): string | undefined {\n    if (align === \"right\") return styles.alignRight;\n    if (align === \"center\") return styles.alignCenter;\n    return undefined;\n}\n\ninterface VirtualTableRowProps<T> {\n    row: T;\n    index: number;\n    rowHeight: number;\n    columns: VirtualTableColumn<T>[];\n    onRowClick: ((row: T, index: number) => void) | undefined;\n}\n\n/**\n * One windowed table row, rendered on its own so React can skip it.\n *\n * Scrolling changes state that lives inside `VirtualTable`, so without this\n * boundary every scroll event re-rendered every visible row and every cell in\n * them — including whatever `column.render` builds — rather than the one row\n * that entered the window.\n *\n * `columns` and `onRowClick` take part in the comparison because a cell renderer\n * closes over the app's state: leaving them out would freeze a row showing a\n * stale cell. An app that keeps its `columns` array stable (a module constant, or\n * `useMemo`) therefore gets the skip, and one that rebuilds it every render gets\n * exactly today's behaviour.\n *\n * @param props - The row, its position and the column contract.\n * @returns The table row element.\n */\nfunction VirtualTableRowImpl<T>({\n    row,\n    index,\n    rowHeight,\n    columns,\n    onRowClick,\n}: VirtualTableRowProps<T>) {\n    return (\n        <tr\n            aria-rowindex={index + 1}\n            className={cn(styles.tr, onRowClick && styles.clickable)}\n            style={{ height: rowHeight }}\n            tabIndex={onRowClick ? 0 : undefined}\n            onClick={onRowClick ? () => onRowClick(row, index) : undefined}\n            onKeyDown={\n                onRowClick\n                    ? (event) => {\n                          if (event.key === \"Enter\" || event.key === \" \") {\n                              event.preventDefault();\n                              onRowClick(row, index);\n                          }\n                      }\n                    : undefined\n            }\n        >\n            {columns.map((column) => (\n                <td\n                    key={String(column.key)}\n                    className={cn(styles.td, alignClass(column.align))}\n                    style={{ width: column.width }}\n                >\n                    {column.render\n                        ? column.render(row, index)\n                        : ((row[column.key] as ReactNode) ?? null)}\n                </td>\n            ))}\n        </tr>\n    );\n}\n\n/**\n * `memo` erases the generic, so the memoised component is re-typed as the\n * function it wraps. The runtime value is unchanged; only the signature is\n * restored.\n */\nconst VirtualTableRow = memo(VirtualTableRowImpl) as typeof VirtualTableRowImpl;\n\n/**\n * A table that stays responsive at 10k+ rows by rendering only the visible window.\n *\n * `Table` renders every row it is given and `DataTable` paginates to keep that\n * count small; neither has an answer for \"show me all 40 000 rows in one\n * scrollable grid\". This does, at the cost of one constraint: **`rowHeight` must\n * be uniform**, since mapping a scroll offset to a row index is what makes the\n * window computable without measuring anything.\n *\n * It stays a real `<table>`. The window is produced by two spacer rows — one\n * above the visible slice, one below — instead of absolutely positioning rows.\n * That is deliberate: `position: absolute` on `<tr>` collapses table layout, so\n * every column width would have to be computed by hand, and the element would\n * stop being a table for assistive technology. With spacer rows the browser keeps\n * doing column layout and screen readers keep announcing a grid.\n *\n * Because only a slice is in the DOM, `aria-rowcount` on the table and\n * `aria-rowindex` on each row carry the real numbers — without them a screen\n * reader announces \"row 3 of 20\" while the user is on row 5003 of 40 000.\n *\n * @example\n * <VirtualTable\n *     data={rows}\n *     columns={[\n *         { key: \"id\", header: \"#\", width: 80, sortable: true },\n *         { key: \"name\", header: \"Nome\", width: 240, sortable: true },\n *         { key: \"total\", header: \"Total\", align: \"right\", width: 120, sortable: true },\n *     ]}\n *     rowHeight={40}\n *     height={480}\n *     rowKey={(row) => row.id}\n * />\n */\nexport function VirtualTable<T>({\n    data,\n    columns,\n    rowHeight,\n    height,\n    overscan = 4,\n    rowKey,\n    initialSort,\n    onRowClick,\n    emptyMessage = \"Nenhum registro encontrado.\",\n    caption,\n    scrollToIndex,\n    className,\n    ...rest\n}: VirtualTableProps<T>) {\n    const scrollRef = useRef<HTMLDivElement>(null);\n    const [scrollTop, setScrollTop] = useState<number>(0);\n    const [viewport, setViewport] = useState<number>(0);\n    const [sort, setSort] = useState<VirtualTableSort<T> | null>(initialSort ?? null);\n\n    useEffect(() => {\n        const element = scrollRef.current;\n        if (!element) return;\n        setViewport(element.clientHeight);\n        if (typeof ResizeObserver === \"undefined\") return;\n        const observer = new ResizeObserver(() => setViewport(element.clientHeight));\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, []);\n\n    useEffect(() => {\n        const element = scrollRef.current;\n        if (!element || scrollToIndex == null) return;\n        element.scrollTop = Math.max(0, Math.min(scrollToIndex, data.length - 1)) * rowHeight;\n    }, [scrollToIndex, rowHeight, data.length]);\n\n    const sorted = useMemo<T[]>(() => {\n        if (!sort) return data;\n        const factor = sort.direction === \"asc\" ? 1 : -1;\n        return [...data].sort((a, b) => compareValues(a[sort.key], b[sort.key]) * factor);\n    }, [data, sort]);\n\n    const start = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);\n    const windowSize = Math.ceil(viewport / rowHeight) + overscan * 2;\n    const end = Math.min(sorted.length, start + windowSize);\n    const slice = sorted.slice(start, end);\n\n    /**\n     * Advance a column through asc → desc → unsorted, and jump back to the top.\n     *\n     * The scroll reset happens here rather than in an effect keyed on the sort\n     * state for two reasons: this is the actual event that invalidates the offset\n     * (keeping it would leave the user at the same pixel of a different dataset,\n     * which reads as the table having jumped somewhere random), and an effect would\n     * also fire on mount — clobbering an initial `scrollToIndex`.\n     */\n    const toggleSort = useCallback((key: keyof T): void => {\n        setSort((current) => {\n            if (!current || current.key !== key) return { key, direction: \"asc\" };\n            if (current.direction === \"asc\") return { key, direction: \"desc\" };\n            return null;\n        });\n        const element = scrollRef.current;\n        if (element) element.scrollTop = 0;\n        setScrollTop(0);\n    }, []);\n\n    return (\n        <div\n            ref={scrollRef}\n            className={cn(styles.scroll, className)}\n            style={{ height }}\n            onScroll={(event) => setScrollTop(event.currentTarget.scrollTop)}\n            {...rest}\n        >\n            <table className={styles.table} aria-rowcount={sorted.length}>\n                {caption ? <caption className={styles.caption}>{caption}</caption> : null}\n                <thead className={styles.head}>\n                    <tr>\n                        {columns.map((column) => {\n                            const isSorted = sort?.key === column.key;\n                            return (\n                                <th\n                                    key={String(column.key)}\n                                    scope=\"col\"\n                                    className={cn(styles.th, alignClass(column.align))}\n                                    style={{ width: column.width }}\n                                    aria-sort={\n                                        isSorted\n                                            ? sort?.direction === \"asc\"\n                                                ? \"ascending\"\n                                                : \"descending\"\n                                            : column.sortable\n                                              ? \"none\"\n                                              : undefined\n                                    }\n                                >\n                                    {column.sortable ? (\n                                        <button\n                                            type=\"button\"\n                                            className={styles.sortButton}\n                                            onClick={() => toggleSort(column.key)}\n                                        >\n                                            {column.header}\n                                            <span className={styles.sortIndicator} aria-hidden>\n                                                {isSorted\n                                                    ? sort?.direction === \"asc\"\n                                                        ? \"▲\"\n                                                        : \"▼\"\n                                                    : \"↕\"}\n                                            </span>\n                                        </button>\n                                    ) : (\n                                        column.header\n                                    )}\n                                </th>\n                            );\n                        })}\n                    </tr>\n                </thead>\n                <tbody>\n                    {sorted.length === 0 ? (\n                        <tr>\n                            <td className={styles.emptyRow} colSpan={columns.length}>\n                                {emptyMessage}\n                            </td>\n                        </tr>\n                    ) : (\n                        <>\n                            {start > 0 && <tr aria-hidden style={{ height: start * rowHeight }} />}\n                            {slice.map((row, offset) => {\n                                const index = start + offset;\n                                return (\n                                    <VirtualTableRow\n                                        key={rowKey ? rowKey(row, index) : index}\n                                        row={row}\n                                        index={index}\n                                        rowHeight={rowHeight}\n                                        columns={columns}\n                                        onRowClick={onRowClick}\n                                    />\n                                );\n                            })}\n                            {end < sorted.length && (\n                                <tr\n                                    aria-hidden\n                                    style={{ height: (sorted.length - end) * rowHeight }}\n                                />\n                            )}\n                        </>\n                    )}\n                </tbody>\n            </table>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/forms/FormField.cjs

@@ -1,2 +1,2 @@
-let e=require("react"),t=require("react/jsx-runtime"),n=require("react-hook-form");function r({name:r,label:i,helperText:a,required:o,control:s,children:c}){let l=(0,n.useFormContext)(),u=s??l?.control;if(!u)throw Error("FormField requires either a `control` prop or a <FormProvider> in the tree.");return(0,t.jsx)(n.Controller,{name:r,control:u,render:({field:t,fieldState:n})=>{if(!(0,e.isValidElement)(c))return c;let r=n.error?.message;return(0,e.cloneElement)(c,{name:t.name,value:t.value,onChange:t.onChange,onBlur:t.onBlur,ref:t.ref,label:i,helperText:r?void 0:a,error:r,required:o,"aria-invalid":!!r})}})}exports.FormField=r;
+const e=require("../utils/duplicate-instance.cjs");let t=require("react"),n=require("react/jsx-runtime"),r=require("react-hook-form");var i="FormField found no form to bind to. Either pass a `control` prop, or mount a <FormProvider> above it. If a <FormProvider> IS mounted above it, the app and the SDK are resolving two copies of react-hook-form: the provider publishes on one copy's context and this field reads the other's. "+e.DUPLICATE_COPY_REMEDY;function a({name:e,label:a,helperText:o,required:s,control:c,children:l}){let u=(0,r.useFormContext)(),d=c??u?.control;if(!d)throw Error(i);return(0,n.jsx)(r.Controller,{name:e,control:d,render:({field:e,fieldState:n})=>{if(!(0,t.isValidElement)(l))return l;let r=n.error?.message;return(0,t.cloneElement)(l,{name:e.name,value:e.value,onChange:e.onChange,onBlur:e.onBlur,ref:e.ref,label:a,helperText:r?void 0:o,error:r,required:s,"aria-invalid":!!r})}})}exports.FormField=a;
 //# sourceMappingURL=FormField.cjs.map

package/dist/forms/FormField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.cjs","names":[],"sources":["../../src/forms/FormField.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — FormFieldChildProps is not a component's props — it\n * is the contract handed to whatever control the field wraps, and it is exactly what\n * react-hook-form's register returns (name, value, onChange, onBlur, ref) plus what\n * the field adds around it (error, label, helperText, required, id). Trimming it\n * breaks the wiring it exists to describe.\n */\nimport { cloneElement, isValidElement } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport {\n    Controller,\n    useFormContext,\n    type Control,\n    type ControllerRenderProps,\n    type FieldPath,\n    type FieldValues,\n} from \"react-hook-form\";\n\nexport interface FormFieldChildProps {\n    name: string;\n    value: unknown;\n    onChange: (...args: unknown[]) => void;\n    onBlur: () => void;\n    ref: ControllerRenderProps[\"ref\"];\n    error?: string;\n    \"aria-invalid\"?: boolean;\n    \"aria-describedby\"?: string;\n    label?: ReactNode;\n    helperText?: ReactNode;\n    required?: boolean;\n    id?: string;\n}\n\nexport interface FormFieldProps<\n    TValues extends FieldValues = FieldValues,\n    TName extends FieldPath<TValues> = FieldPath<TValues>,\n> {\n    /** Field name (dot path supported, e.g. `\"address.city\"`). */\n    name: TName;\n    /** Field label rendered by the wrapped control. */\n    label?: ReactNode;\n    /** Helper text rendered by the wrapped control when there is no error. */\n    helperText?: ReactNode;\n    /** When `true`, marks the control as required (visual hint + native attribute). */\n    required?: boolean;\n    /**\n     * Explicit `control` from `useForm()` / `useZodForm()`. Optional when a\n     * `FormProvider` is in the tree.\n     */\n    control?: Control<TValues>;\n    /**\n     * The control to render. Receives `{ value, onChange, onBlur, ref, error, ... }`\n     * via `cloneElement`. Pass `<Input />`, `<Select />`, masked inputs, etc.\n     */\n    children: ReactElement;\n}\n\n/**\n * Glue between `react-hook-form` `Controller` and the SDK's controlled\n * components. Wraps any control that accepts `{ value, onChange, label,\n * error }` and routes RHF state into it — eliminating the per-field\n * `<Controller render={...} />` boilerplate.\n *\n * @example\n * const form = useZodForm(schema);\n * <FormProvider {...form}>\n *     <Form>\n *         <FormField name=\"email\" label=\"Email\" required>\n *             <Input type=\"email\" />\n *         </FormField>\n *         <FormField name=\"cep\" label=\"CEP\">\n *             <CEPInput />\n *         </FormField>\n *     </Form>\n * </FormProvider>;\n */\nexport function FormField<\n    TValues extends FieldValues = FieldValues,\n    TName extends FieldPath<TValues> = FieldPath<TValues>,\n>({ name, label, helperText, required, control, children }: FormFieldProps<TValues, TName>) {\n    const context = useFormContext<TValues>();\n    const resolvedControl = control ?? context?.control;\n    if (!resolvedControl) {\n        throw new Error(\n            \"FormField requires either a `control` prop or a <FormProvider> in the tree.\",\n        );\n    }\n\n    return (\n        <Controller\n            name={name}\n            control={resolvedControl}\n            render={({ field, fieldState }) => {\n                if (!isValidElement(children)) return children;\n                const errorMessage = fieldState.error?.message;\n                return cloneElement(children as ReactElement<FormFieldChildProps>, {\n                    name: field.name,\n                    value: field.value,\n                    onChange: field.onChange,\n                    onBlur: field.onBlur,\n                    ref: field.ref,\n                    label,\n                    helperText: errorMessage ? undefined : helperText,\n                    error: errorMessage,\n                    required,\n                    \"aria-invalid\": !!errorMessage,\n                });\n            }}\n        />\n    );\n}\n"],"mappings":"mFA4EA,SAAgB,EAGd,CAAE,OAAM,QAAO,aAAY,WAAU,UAAS,YAA4C,CACxF,IAAM,GAAA,EAAU,EAAA,eAAA,CAAwB,EAClC,EAAkB,GAAW,GAAS,QAC5C,GAAI,CAAC,EACD,MAAU,MACN,6EACJ,EAGJ,OACI,EAAA,EAAA,IAAA,CAAC,EAAA,WAAD,CACU,OACN,QAAS,EACT,QAAS,CAAE,QAAO,gBAAiB,CAC/B,GAAI,EAAA,EAAC,EAAA,eAAA,CAAe,CAAQ,EAAG,OAAO,EACtC,IAAM,EAAe,EAAW,OAAO,QACvC,OAAA,EAAO,EAAA,aAAA,CAAa,EAA+C,CAC/D,KAAM,EAAM,KACZ,MAAO,EAAM,MACb,SAAU,EAAM,SAChB,OAAQ,EAAM,OACd,IAAK,EAAM,IACX,QACA,WAAY,EAAe,IAAA,GAAY,EACvC,MAAO,EACP,WACA,eAAgB,CAAC,CAAC,CACtB,CAAC,CACL,CACH,CAAA,CAET"}
+{"version":3,"file":"FormField.cjs","names":[],"sources":["../../src/forms/FormField.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — FormFieldChildProps is not a component's props — it\n * is the contract handed to whatever control the field wraps, and it is exactly what\n * react-hook-form's register returns (name, value, onChange, onBlur, ref) plus what\n * the field adds around it (error, label, helperText, required, id). Trimming it\n * breaks the wiring it exists to describe.\n */\nimport { cloneElement, isValidElement } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport {\n    Controller,\n    useFormContext,\n    type Control,\n    type ControllerRenderProps,\n    type FieldPath,\n    type FieldValues,\n} from \"react-hook-form\";\n\nimport { DUPLICATE_COPY_REMEDY } from \"../utils/duplicate-instance\";\n\nexport interface FormFieldChildProps {\n    name: string;\n    value: unknown;\n    onChange: (...args: unknown[]) => void;\n    onBlur: () => void;\n    ref: ControllerRenderProps[\"ref\"];\n    error?: string;\n    \"aria-invalid\"?: boolean;\n    \"aria-describedby\"?: string;\n    label?: ReactNode;\n    helperText?: ReactNode;\n    required?: boolean;\n    id?: string;\n}\n\nexport interface FormFieldProps<\n    TValues extends FieldValues = FieldValues,\n    TName extends FieldPath<TValues> = FieldPath<TValues>,\n> {\n    /** Field name (dot path supported, e.g. `\"address.city\"`). */\n    name: TName;\n    /** Field label rendered by the wrapped control. */\n    label?: ReactNode;\n    /** Helper text rendered by the wrapped control when there is no error. */\n    helperText?: ReactNode;\n    /** When `true`, marks the control as required (visual hint + native attribute). */\n    required?: boolean;\n    /**\n     * Explicit `control` from `useForm()` / `useZodForm()`. Optional when a\n     * `FormProvider` is in the tree.\n     */\n    control?: Control<TValues>;\n    /**\n     * The control to render. Receives `{ value, onChange, onBlur, ref, error, ... }`\n     * via `cloneElement`. Pass `<Input />`, `<Select />`, masked inputs, etc.\n     */\n    children: ReactElement;\n}\n\n/**\n * Glue between `react-hook-form` `Controller` and the SDK's controlled\n * components. Wraps any control that accepts `{ value, onChange, label,\n * error }` and routes RHF state into it — eliminating the per-field\n * `<Controller render={...} />` boilerplate.\n *\n * @example\n * const form = useZodForm(schema);\n * <FormProvider {...form}>\n *     <Form>\n *         <FormField name=\"email\" label=\"Email\" required>\n *             <Input type=\"email\" />\n *         </FormField>\n *         <FormField name=\"cep\" label=\"CEP\">\n *             <CEPInput />\n *         </FormField>\n *     </Form>\n * </FormProvider>;\n */\n/**\n * What is thrown when no `control` can be resolved.\n *\n * It names **two** causes, because the throw cannot tell them apart and the\n * second one is the expensive one. The obvious reading — no provider, no prop —\n * is usually right. But the identical throw happens with a `<FormProvider>`\n * mounted directly above, when the app and the SDK resolve two different copies\n * of `react-hook-form`: the provider publishes on the app copy's context and\n * `useFormContext` here reads the SDK copy's, which is empty. Someone looking at\n * a provider they can see, being told it is missing, does not go looking at\n * `node_modules` — so the message has to send them there.\n */\nconst NO_CONTROL_MESSAGE =\n    \"FormField found no form to bind to. Either pass a `control` prop, or mount a \" +\n    \"<FormProvider> above it. If a <FormProvider> IS mounted above it, the app and the \" +\n    \"SDK are resolving two copies of react-hook-form: the provider publishes on one \" +\n    \"copy's context and this field reads the other's. \" +\n    DUPLICATE_COPY_REMEDY;\n\nexport function FormField<\n    TValues extends FieldValues = FieldValues,\n    TName extends FieldPath<TValues> = FieldPath<TValues>,\n>({ name, label, helperText, required, control, children }: FormFieldProps<TValues, TName>) {\n    const context = useFormContext<TValues>();\n    const resolvedControl = control ?? context?.control;\n    if (!resolvedControl) {\n        throw new Error(NO_CONTROL_MESSAGE);\n    }\n\n    return (\n        <Controller\n            name={name}\n            control={resolvedControl}\n            render={({ field, fieldState }) => {\n                if (!isValidElement(children)) return children;\n                const errorMessage = fieldState.error?.message;\n                return cloneElement(children as ReactElement<FormFieldChildProps>, {\n                    name: field.name,\n                    value: field.value,\n                    onChange: field.onChange,\n                    onBlur: field.onBlur,\n                    ref: field.ref,\n                    label,\n                    helperText: errorMessage ? undefined : helperText,\n                    error: errorMessage,\n                    required,\n                    \"aria-invalid\": !!errorMessage,\n                });\n            }}\n        />\n    );\n}\n"],"mappings":"sIA0FA,IAAM,EACF,kSAIA,EAAA,sBAEJ,SAAgB,EAGd,CAAE,OAAM,QAAO,aAAY,WAAU,UAAS,YAA4C,CACxF,IAAM,GAAA,EAAU,EAAA,eAAA,CAAwB,EAClC,EAAkB,GAAW,GAAS,QAC5C,GAAI,CAAC,EACD,MAAU,MAAM,CAAkB,EAGtC,OACI,EAAA,EAAA,IAAA,CAAC,EAAA,WAAD,CACU,OACN,QAAS,EACT,QAAS,CAAE,QAAO,gBAAiB,CAC/B,GAAI,EAAA,EAAC,EAAA,eAAA,CAAe,CAAQ,EAAG,OAAO,EACtC,IAAM,EAAe,EAAW,OAAO,QACvC,OAAA,EAAO,EAAA,aAAA,CAAa,EAA+C,CAC/D,KAAM,EAAM,KACZ,MAAO,EAAM,MACb,SAAU,EAAM,SAChB,OAAQ,EAAM,OACd,IAAK,EAAM,IACX,QACA,WAAY,EAAe,IAAA,GAAY,EACvC,MAAO,EACP,WACA,eAAgB,CAAC,CAAC,CACtB,CAAC,CACL,CACH,CAAA,CAET"}

package/dist/forms/FormField.js

@@ -1,32 +1,34 @@
-import { cloneElement as e, isValidElement as t } from "react";
-import { jsx as n } from "react/jsx-runtime";
-import { Controller as r, useFormContext as i } from "react-hook-form";
+import { DUPLICATE_COPY_REMEDY as e } from "../utils/duplicate-instance.js";
+import { cloneElement as t, isValidElement as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { Controller as i, useFormContext as a } from "react-hook-form";
 //#region src/forms/FormField.tsx
-function a({ name: a, label: o, helperText: s, required: c, control: l, children: u }) {
-	let d = i(), f = l ?? d?.control;
-	if (!f) throw Error("FormField requires either a `control` prop or a <FormProvider> in the tree.");
-	return /* @__PURE__ */ n(r, {
-		name: a,
-		control: f,
-		render: ({ field: n, fieldState: r }) => {
-			if (!t(u)) return u;
+var o = "FormField found no form to bind to. Either pass a `control` prop, or mount a <FormProvider> above it. If a <FormProvider> IS mounted above it, the app and the SDK are resolving two copies of react-hook-form: the provider publishes on one copy's context and this field reads the other's. " + e;
+function s({ name: e, label: s, helperText: c, required: l, control: u, children: d }) {
+	let f = a(), p = u ?? f?.control;
+	if (!p) throw Error(o);
+	return /* @__PURE__ */ r(i, {
+		name: e,
+		control: p,
+		render: ({ field: e, fieldState: r }) => {
+			if (!n(d)) return d;
 			let i = r.error?.message;
-			return e(u, {
-				name: n.name,
-				value: n.value,
-				onChange: n.onChange,
-				onBlur: n.onBlur,
-				ref: n.ref,
-				label: o,
-				helperText: i ? void 0 : s,
+			return t(d, {
+				name: e.name,
+				value: e.value,
+				onChange: e.onChange,
+				onBlur: e.onBlur,
+				ref: e.ref,
+				label: s,
+				helperText: i ? void 0 : c,
 				error: i,
-				required: c,
+				required: l,
 				"aria-invalid": !!i
 			});
 		}
 	});
 }
 //#endregion
-export { a as FormField };
+export { s as FormField };
 
 //# sourceMappingURL=FormField.js.map

package/dist/forms/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","names":[],"sources":["../../src/forms/FormField.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — FormFieldChildProps is not a component's props — it\n * is the contract handed to whatever control the field wraps, and it is exactly what\n * react-hook-form's register returns (name, value, onChange, onBlur, ref) plus what\n * the field adds around it (error, label, helperText, required, id). Trimming it\n * breaks the wiring it exists to describe.\n */\nimport { cloneElement, isValidElement } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport {\n    Controller,\n    useFormContext,\n    type Control,\n    type ControllerRenderProps,\n    type FieldPath,\n    type FieldValues,\n} from \"react-hook-form\";\n\nexport interface FormFieldChildProps {\n    name: string;\n    value: unknown;\n    onChange: (...args: unknown[]) => void;\n    onBlur: () => void;\n    ref: ControllerRenderProps[\"ref\"];\n    error?: string;\n    \"aria-invalid\"?: boolean;\n    \"aria-describedby\"?: string;\n    label?: ReactNode;\n    helperText?: ReactNode;\n    required?: boolean;\n    id?: string;\n}\n\nexport interface FormFieldProps<\n    TValues extends FieldValues = FieldValues,\n    TName extends FieldPath<TValues> = FieldPath<TValues>,\n> {\n    /** Field name (dot path supported, e.g. `\"address.city\"`). */\n    name: TName;\n    /** Field label rendered by the wrapped control. */\n    label?: ReactNode;\n    /** Helper text rendered by the wrapped control when there is no error. */\n    helperText?: ReactNode;\n    /** When `true`, marks the control as required (visual hint + native attribute). */\n    required?: boolean;\n    /**\n     * Explicit `control` from `useForm()` / `useZodForm()`. Optional when a\n     * `FormProvider` is in the tree.\n     */\n    control?: Control<TValues>;\n    /**\n     * The control to render. Receives `{ value, onChange, onBlur, ref, error, ... }`\n     * via `cloneElement`. Pass `<Input />`, `<Select />`, masked inputs, etc.\n     */\n    children: ReactElement;\n}\n\n/**\n * Glue between `react-hook-form` `Controller` and the SDK's controlled\n * components. Wraps any control that accepts `{ value, onChange, label,\n * error }` and routes RHF state into it — eliminating the per-field\n * `<Controller render={...} />` boilerplate.\n *\n * @example\n * const form = useZodForm(schema);\n * <FormProvider {...form}>\n *     <Form>\n *         <FormField name=\"email\" label=\"Email\" required>\n *             <Input type=\"email\" />\n *         </FormField>\n *         <FormField name=\"cep\" label=\"CEP\">\n *             <CEPInput />\n *         </FormField>\n *     </Form>\n * </FormProvider>;\n */\nexport function FormField<\n    TValues extends FieldValues = FieldValues,\n    TName extends FieldPath<TValues> = FieldPath<TValues>,\n>({ name, label, helperText, required, control, children }: FormFieldProps<TValues, TName>) {\n    const context = useFormContext<TValues>();\n    const resolvedControl = control ?? context?.control;\n    if (!resolvedControl) {\n        throw new Error(\n            \"FormField requires either a `control` prop or a <FormProvider> in the tree.\",\n        );\n    }\n\n    return (\n        <Controller\n            name={name}\n            control={resolvedControl}\n            render={({ field, fieldState }) => {\n                if (!isValidElement(children)) return children;\n                const errorMessage = fieldState.error?.message;\n                return cloneElement(children as ReactElement<FormFieldChildProps>, {\n                    name: field.name,\n                    value: field.value,\n                    onChange: field.onChange,\n                    onBlur: field.onBlur,\n                    ref: field.ref,\n                    label,\n                    helperText: errorMessage ? undefined : helperText,\n                    error: errorMessage,\n                    required,\n                    \"aria-invalid\": !!errorMessage,\n                });\n            }}\n        />\n    );\n}\n"],"mappings":";;;;AA4EA,SAAgB,EAGd,EAAE,SAAM,UAAO,eAAY,aAAU,YAAS,eAA4C;CACxF,IAAM,IAAU,EAAwB,GAClC,IAAkB,KAAW,GAAS;CAC5C,IAAI,CAAC,GACD,MAAU,MACN,6EACJ;CAGJ,OACI,kBAAC,GAAD;EACU;EACN,SAAS;EACT,SAAS,EAAE,UAAO,oBAAiB;GAC/B,IAAI,CAAC,EAAe,CAAQ,GAAG,OAAO;GACtC,IAAM,IAAe,EAAW,OAAO;GACvC,OAAO,EAAa,GAA+C;IAC/D,MAAM,EAAM;IACZ,OAAO,EAAM;IACb,UAAU,EAAM;IAChB,QAAQ,EAAM;IACd,KAAK,EAAM;IACX;IACA,YAAY,IAAe,KAAA,IAAY;IACvC,OAAO;IACP;IACA,gBAAgB,CAAC,CAAC;GACtB,CAAC;EACL;CACH,CAAA;AAET"}
+{"version":3,"file":"FormField.js","names":[],"sources":["../../src/forms/FormField.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — FormFieldChildProps is not a component's props — it\n * is the contract handed to whatever control the field wraps, and it is exactly what\n * react-hook-form's register returns (name, value, onChange, onBlur, ref) plus what\n * the field adds around it (error, label, helperText, required, id). Trimming it\n * breaks the wiring it exists to describe.\n */\nimport { cloneElement, isValidElement } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport {\n    Controller,\n    useFormContext,\n    type Control,\n    type ControllerRenderProps,\n    type FieldPath,\n    type FieldValues,\n} from \"react-hook-form\";\n\nimport { DUPLICATE_COPY_REMEDY } from \"../utils/duplicate-instance\";\n\nexport interface FormFieldChildProps {\n    name: string;\n    value: unknown;\n    onChange: (...args: unknown[]) => void;\n    onBlur: () => void;\n    ref: ControllerRenderProps[\"ref\"];\n    error?: string;\n    \"aria-invalid\"?: boolean;\n    \"aria-describedby\"?: string;\n    label?: ReactNode;\n    helperText?: ReactNode;\n    required?: boolean;\n    id?: string;\n}\n\nexport interface FormFieldProps<\n    TValues extends FieldValues = FieldValues,\n    TName extends FieldPath<TValues> = FieldPath<TValues>,\n> {\n    /** Field name (dot path supported, e.g. `\"address.city\"`). */\n    name: TName;\n    /** Field label rendered by the wrapped control. */\n    label?: ReactNode;\n    /** Helper text rendered by the wrapped control when there is no error. */\n    helperText?: ReactNode;\n    /** When `true`, marks the control as required (visual hint + native attribute). */\n    required?: boolean;\n    /**\n     * Explicit `control` from `useForm()` / `useZodForm()`. Optional when a\n     * `FormProvider` is in the tree.\n     */\n    control?: Control<TValues>;\n    /**\n     * The control to render. Receives `{ value, onChange, onBlur, ref, error, ... }`\n     * via `cloneElement`. Pass `<Input />`, `<Select />`, masked inputs, etc.\n     */\n    children: ReactElement;\n}\n\n/**\n * Glue between `react-hook-form` `Controller` and the SDK's controlled\n * components. Wraps any control that accepts `{ value, onChange, label,\n * error }` and routes RHF state into it — eliminating the per-field\n * `<Controller render={...} />` boilerplate.\n *\n * @example\n * const form = useZodForm(schema);\n * <FormProvider {...form}>\n *     <Form>\n *         <FormField name=\"email\" label=\"Email\" required>\n *             <Input type=\"email\" />\n *         </FormField>\n *         <FormField name=\"cep\" label=\"CEP\">\n *             <CEPInput />\n *         </FormField>\n *     </Form>\n * </FormProvider>;\n */\n/**\n * What is thrown when no `control` can be resolved.\n *\n * It names **two** causes, because the throw cannot tell them apart and the\n * second one is the expensive one. The obvious reading — no provider, no prop —\n * is usually right. But the identical throw happens with a `<FormProvider>`\n * mounted directly above, when the app and the SDK resolve two different copies\n * of `react-hook-form`: the provider publishes on the app copy's context and\n * `useFormContext` here reads the SDK copy's, which is empty. Someone looking at\n * a provider they can see, being told it is missing, does not go looking at\n * `node_modules` — so the message has to send them there.\n */\nconst NO_CONTROL_MESSAGE =\n    \"FormField found no form to bind to. Either pass a `control` prop, or mount a \" +\n    \"<FormProvider> above it. If a <FormProvider> IS mounted above it, the app and the \" +\n    \"SDK are resolving two copies of react-hook-form: the provider publishes on one \" +\n    \"copy's context and this field reads the other's. \" +\n    DUPLICATE_COPY_REMEDY;\n\nexport function FormField<\n    TValues extends FieldValues = FieldValues,\n    TName extends FieldPath<TValues> = FieldPath<TValues>,\n>({ name, label, helperText, required, control, children }: FormFieldProps<TValues, TName>) {\n    const context = useFormContext<TValues>();\n    const resolvedControl = control ?? context?.control;\n    if (!resolvedControl) {\n        throw new Error(NO_CONTROL_MESSAGE);\n    }\n\n    return (\n        <Controller\n            name={name}\n            control={resolvedControl}\n            render={({ field, fieldState }) => {\n                if (!isValidElement(children)) return children;\n                const errorMessage = fieldState.error?.message;\n                return cloneElement(children as ReactElement<FormFieldChildProps>, {\n                    name: field.name,\n                    value: field.value,\n                    onChange: field.onChange,\n                    onBlur: field.onBlur,\n                    ref: field.ref,\n                    label,\n                    helperText: errorMessage ? undefined : helperText,\n                    error: errorMessage,\n                    required,\n                    \"aria-invalid\": !!errorMessage,\n                });\n            }}\n        />\n    );\n}\n"],"mappings":";;;;;AA0FA,IAAM,IACF,oSAIA;AAEJ,SAAgB,EAGd,EAAE,SAAM,UAAO,eAAY,aAAU,YAAS,eAA4C;CACxF,IAAM,IAAU,EAAwB,GAClC,IAAkB,KAAW,GAAS;CAC5C,IAAI,CAAC,GACD,MAAU,MAAM,CAAkB;CAGtC,OACI,kBAAC,GAAD;EACU;EACN,SAAS;EACT,SAAS,EAAE,UAAO,oBAAiB;GAC/B,IAAI,CAAC,EAAe,CAAQ,GAAG,OAAO;GACtC,IAAM,IAAe,EAAW,OAAO;GACvC,OAAO,EAAa,GAA+C;IAC/D,MAAM,EAAM;IACZ,OAAO,EAAM;IACb,UAAU,EAAM;IAChB,QAAQ,EAAM;IACd,KAAK,EAAM;IACX;IACA,YAAY,IAAe,KAAA,IAAY;IACvC,OAAO;IACP;IACA,gBAAgB,CAAC,CAAC;GACtB,CAAC;EACL;CACH,CAAA;AAET"}

package/dist/forms/masked-inputs.cjs

@@ -1,2 +1,2 @@
-const e=require("../components/Input/Input.cjs"),t=require("../utils/format.cjs"),n=require("./br-validators.cjs");let r=require("react"),i=require("react/jsx-runtime");function a(t,n=`numeric`){return(0,r.forwardRef)(function({value:r,onChange:a,...o},s){return(0,i.jsx)(e.Input,{...o,ref:s,value:t(r??``),inputMode:n,onChange:e=>a?.(t(e.target.value))})})}var o=a(t.formatCPF),s=a(n.formatCNPJ),c=a(t.formatPhone,`tel`),l=a(n.formatCEP);function u(e,t,n){return new Intl.NumberFormat(t,{style:`currency`,currency:n}).format(e/100)}function d(e){let t=e.replace(/\D/g,``);return t?Number.parseInt(t,10):0}var f=(0,r.forwardRef)(function({value:t,onChange:n,currency:r=`BRL`,locale:a=`pt-BR`,...o},s){return(0,i.jsx)(e.Input,{...o,ref:s,type:`text`,inputMode:`numeric`,value:u(t||0,a,r),onChange:e=>n(d(e.target.value))})});exports.CEPInput=l,exports.CNPJInput=s,exports.CPFInput=o,exports.MoneyInput=f,exports.PhoneInput=c;
+const e=require("../components/Input/Input.cjs"),t=require("../utils/intl-cache.cjs"),n=require("../utils/format.cjs"),r=require("./br-validators.cjs");let i=require("react"),a=require("react/jsx-runtime");function o(t,n=`numeric`){return(0,i.forwardRef)(function({value:r,onChange:i,...o},s){return(0,a.jsx)(e.Input,{...o,ref:s,value:t(r??``),inputMode:n,onChange:e=>i?.(t(e.target.value))})})}var s=o(n.formatCPF),c=o(r.formatCNPJ),l=o(n.formatPhone,`tel`),u=o(r.formatCEP);function d(e,n,r){return t.numberFormat(n,{style:`currency`,currency:r}).format(e/100)}function f(e){let t=e.replace(/\D/g,``);return t?Number.parseInt(t,10):0}var p=(0,i.forwardRef)(function({value:t,onChange:n,currency:r=`BRL`,locale:i=`pt-BR`,...o},s){return(0,a.jsx)(e.Input,{...o,ref:s,type:`text`,inputMode:`numeric`,value:d(t||0,i,r),onChange:e=>n(f(e.target.value))})});exports.CEPInput=u,exports.CNPJInput=c,exports.CPFInput=s,exports.MoneyInput=p,exports.PhoneInput=l;
 //# sourceMappingURL=masked-inputs.cjs.map

package/dist/forms/masked-inputs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"masked-inputs.cjs","names":[],"sources":["../../src/forms/masked-inputs.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { Input, type InputProps } from \"@/components/Input\";\nimport { formatCEP, formatCNPJ } from \"./br-validators\";\nimport { formatCPF, formatPhone } from \"@/utils/format\";\n\n/**\n * Props of every masked input.\n *\n * `value` and `onChange` are optional because the primary documented usage is\n * inside `<FormField>`, which supplies both through `cloneElement` — declaring\n * them required made `<FormField name=\"cpf\"><CPFInput /></FormField>` fail to\n * type-check while working perfectly at runtime. Standalone usage still passes\n * both; an uncontrolled input without `onChange` simply reports nothing.\n */\ntype MaskedFieldProps = Omit<InputProps, \"value\" | \"onChange\"> & {\n    value?: string;\n    onChange?: (value: string) => void;\n};\n\nfunction maskedInput(\n    mask: (input: string) => string,\n    inputMode: InputHTMLAttributes<HTMLInputElement>[\"inputMode\"] = \"numeric\",\n) {\n    return forwardRef<HTMLInputElement, MaskedFieldProps>(function MaskedInput(\n        { value, onChange, ...props },\n        ref,\n    ) {\n        return (\n            <Input\n                {...props}\n                ref={ref}\n                value={mask(value ?? \"\")}\n                inputMode={inputMode}\n                onChange={(event) => onChange?.(mask(event.target.value))}\n            />\n        );\n    });\n}\n\nexport const CPFInput = maskedInput(formatCPF);\nexport const CNPJInput = maskedInput(formatCNPJ);\nexport const PhoneInput = maskedInput(formatPhone, \"tel\");\nexport const CEPInput = maskedInput(formatCEP);\n\nexport interface MoneyInputProps extends Omit<InputProps, \"value\" | \"onChange\" | \"type\"> {\n    /** Cents (integer). Internally treated as 1/100 of the currency unit. */\n    value: number;\n    onChange: (cents: number) => void;\n    /** Currency code for `Intl.NumberFormat`. Default: `\"BRL\"`. */\n    currency?: string;\n    /** Locale for `Intl.NumberFormat`. Default: `\"pt-BR\"`. */\n    locale?: string;\n}\n\nfunction formatCents(cents: number, locale: string, currency: string): string {\n    return new Intl.NumberFormat(locale, { style: \"currency\", currency }).format(cents / 100);\n}\n\nfunction parseCents(text: string): number {\n    const digits = text.replace(/\\D/g, \"\");\n    if (!digits) return 0;\n    return Number.parseInt(digits, 10);\n}\n\n/**\n * Currency-masked input. Stores the value as an integer number of cents to\n * avoid floating-point error. Suitable for `react-hook-form` once you adapt\n * the field to expose cents.\n */\nexport const MoneyInput = forwardRef<HTMLInputElement, MoneyInputProps>(function MoneyInput(\n    { value, onChange, currency = \"BRL\", locale = \"pt-BR\", ...props },\n    ref,\n) {\n    return (\n        <Input\n            {...props}\n            ref={ref}\n            type=\"text\"\n            inputMode=\"numeric\"\n            value={formatCents(value || 0, locale, currency)}\n            onChange={(event) => onChange(parseCents(event.target.value))}\n        />\n    );\n});\n"],"mappings":"yKAoBA,SAAS,EACL,EACA,EAAgE,UAClE,CACE,OAAA,EAAO,EAAA,WAAA,CAA+C,SAClD,CAAE,QAAO,WAAU,GAAG,GACtB,EACF,CACE,OACI,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CACI,GAAI,EACC,MACL,MAAO,EAAK,GAAS,EAAE,EACZ,YACX,SAAW,GAAU,IAAW,EAAK,EAAM,OAAO,KAAK,CAAC,CAC3D,CAAA,CAET,CAAC,CACL,CAEA,IAAa,EAAW,EAAY,EAAA,SAAS,EAChC,EAAY,EAAY,EAAA,UAAU,EAClC,EAAa,EAAY,EAAA,YAAa,KAAK,EAC3C,EAAW,EAAY,EAAA,SAAS,EAY7C,SAAS,EAAY,EAAe,EAAgB,EAA0B,CAC1E,OAAO,IAAI,KAAK,aAAa,EAAQ,CAAE,MAAO,WAAY,UAAS,CAAC,CAAC,CAAC,OAAO,EAAQ,GAAG,CAC5F,CAEA,SAAS,EAAW,EAAsB,CACtC,IAAM,EAAS,EAAK,QAAQ,MAAO,EAAE,EAErC,OADK,EACE,OAAO,SAAS,EAAQ,EAAE,EADb,CAExB,CAOA,IAAa,GAAA,EAAa,EAAA,WAAA,CAA8C,SACpE,CAAE,QAAO,WAAU,WAAW,MAAO,SAAS,QAAS,GAAG,GAC1D,EACF,CACE,OACI,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CACI,GAAI,EACC,MACL,KAAK,OACL,UAAU,UACV,MAAO,EAAY,GAAS,EAAG,EAAQ,CAAQ,EAC/C,SAAW,GAAU,EAAS,EAAW,EAAM,OAAO,KAAK,CAAC,CAC/D,CAAA,CAET,CAAC"}
+{"version":3,"file":"masked-inputs.cjs","names":[],"sources":["../../src/forms/masked-inputs.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { Input, type InputProps } from \"@/components/Input\";\nimport { formatCEP, formatCNPJ } from \"./br-validators\";\nimport { formatCPF, formatPhone } from \"@/utils/format\";\nimport { numberFormat } from \"@/utils/intl-cache\";\n\n/**\n * Props of every masked input.\n *\n * `value` and `onChange` are optional because the primary documented usage is\n * inside `<FormField>`, which supplies both through `cloneElement` — declaring\n * them required made `<FormField name=\"cpf\"><CPFInput /></FormField>` fail to\n * type-check while working perfectly at runtime. Standalone usage still passes\n * both; an uncontrolled input without `onChange` simply reports nothing.\n */\ntype MaskedFieldProps = Omit<InputProps, \"value\" | \"onChange\"> & {\n    value?: string;\n    onChange?: (value: string) => void;\n};\n\nfunction maskedInput(\n    mask: (input: string) => string,\n    inputMode: InputHTMLAttributes<HTMLInputElement>[\"inputMode\"] = \"numeric\",\n) {\n    return forwardRef<HTMLInputElement, MaskedFieldProps>(function MaskedInput(\n        { value, onChange, ...props },\n        ref,\n    ) {\n        return (\n            <Input\n                {...props}\n                ref={ref}\n                value={mask(value ?? \"\")}\n                inputMode={inputMode}\n                onChange={(event) => onChange?.(mask(event.target.value))}\n            />\n        );\n    });\n}\n\nexport const CPFInput = maskedInput(formatCPF);\nexport const CNPJInput = maskedInput(formatCNPJ);\nexport const PhoneInput = maskedInput(formatPhone, \"tel\");\nexport const CEPInput = maskedInput(formatCEP);\n\nexport interface MoneyInputProps extends Omit<InputProps, \"value\" | \"onChange\" | \"type\"> {\n    /** Cents (integer). Internally treated as 1/100 of the currency unit. */\n    value: number;\n    onChange: (cents: number) => void;\n    /** Currency code for `Intl.NumberFormat`. Default: `\"BRL\"`. */\n    currency?: string;\n    /** Locale for `Intl.NumberFormat`. Default: `\"pt-BR\"`. */\n    locale?: string;\n}\n\nfunction formatCents(cents: number, locale: string, currency: string): string {\n    return numberFormat(locale, { style: \"currency\", currency }).format(cents / 100);\n}\n\nfunction parseCents(text: string): number {\n    const digits = text.replace(/\\D/g, \"\");\n    if (!digits) return 0;\n    return Number.parseInt(digits, 10);\n}\n\n/**\n * Currency-masked input. Stores the value as an integer number of cents to\n * avoid floating-point error. Suitable for `react-hook-form` once you adapt\n * the field to expose cents.\n */\nexport const MoneyInput = forwardRef<HTMLInputElement, MoneyInputProps>(function MoneyInput(\n    { value, onChange, currency = \"BRL\", locale = \"pt-BR\", ...props },\n    ref,\n) {\n    return (\n        <Input\n            {...props}\n            ref={ref}\n            type=\"text\"\n            inputMode=\"numeric\"\n            value={formatCents(value || 0, locale, currency)}\n            onChange={(event) => onChange(parseCents(event.target.value))}\n        />\n    );\n});\n"],"mappings":"8MAqBA,SAAS,EACL,EACA,EAAgE,UAClE,CACE,OAAA,EAAO,EAAA,WAAA,CAA+C,SAClD,CAAE,QAAO,WAAU,GAAG,GACtB,EACF,CACE,OACI,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CACI,GAAI,EACC,MACL,MAAO,EAAK,GAAS,EAAE,EACZ,YACX,SAAW,GAAU,IAAW,EAAK,EAAM,OAAO,KAAK,CAAC,CAC3D,CAAA,CAET,CAAC,CACL,CAEA,IAAa,EAAW,EAAY,EAAA,SAAS,EAChC,EAAY,EAAY,EAAA,UAAU,EAClC,EAAa,EAAY,EAAA,YAAa,KAAK,EAC3C,EAAW,EAAY,EAAA,SAAS,EAY7C,SAAS,EAAY,EAAe,EAAgB,EAA0B,CAC1E,OAAO,EAAA,aAAa,EAAQ,CAAE,MAAO,WAAY,UAAS,CAAC,CAAC,CAAC,OAAO,EAAQ,GAAG,CACnF,CAEA,SAAS,EAAW,EAAsB,CACtC,IAAM,EAAS,EAAK,QAAQ,MAAO,EAAE,EAErC,OADK,EACE,OAAO,SAAS,EAAQ,EAAE,EADb,CAExB,CAOA,IAAa,GAAA,EAAa,EAAA,WAAA,CAA8C,SACpE,CAAE,QAAO,WAAU,WAAW,MAAO,SAAS,QAAS,GAAG,GAC1D,EACF,CACE,OACI,EAAA,EAAA,IAAA,CAAC,EAAA,MAAD,CACI,GAAI,EACC,MACL,KAAK,OACL,UAAU,UACV,MAAO,EAAY,GAAS,EAAG,EAAQ,CAAQ,EAC/C,SAAW,GAAU,EAAS,EAAW,EAAM,OAAO,KAAK,CAAC,CAC/D,CAAA,CAET,CAAC"}

package/dist/forms/masked-inputs.js

@@ -1,42 +1,43 @@
 import { Input as e } from "../components/Input/Input.js";
-import { formatCPF as t, formatPhone as n } from "../utils/format.js";
-import { formatCEP as r, formatCNPJ as i } from "./br-validators.js";
-import { forwardRef as a } from "react";
-import { jsx as o } from "react/jsx-runtime";
+import { numberFormat as t } from "../utils/intl-cache.js";
+import { formatCPF as n, formatPhone as r } from "../utils/format.js";
+import { formatCEP as i, formatCNPJ as a } from "./br-validators.js";
+import { forwardRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
 //#region src/forms/masked-inputs.tsx
-function s(t, n = "numeric") {
-	return a(function({ value: r, onChange: i, ...a }, s) {
-		return /* @__PURE__ */ o(e, {
+function c(t, n = "numeric") {
+	return o(function({ value: r, onChange: i, ...a }, o) {
+		return /* @__PURE__ */ s(e, {
 			...a,
-			ref: s,
+			ref: o,
 			value: t(r ?? ""),
 			inputMode: n,
 			onChange: (e) => i?.(t(e.target.value))
 		});
 	});
 }
-var c = s(t), l = s(i), u = s(n, "tel"), d = s(r);
-function f(e, t, n) {
-	return new Intl.NumberFormat(t, {
+var l = c(n), u = c(a), d = c(r, "tel"), f = c(i);
+function p(e, n, r) {
+	return t(n, {
 		style: "currency",
-		currency: n
+		currency: r
 	}).format(e / 100);
 }
-function p(e) {
+function m(e) {
 	let t = e.replace(/\D/g, "");
 	return t ? Number.parseInt(t, 10) : 0;
 }
-var m = a(function({ value: t, onChange: n, currency: r = "BRL", locale: i = "pt-BR", ...a }, s) {
-	return /* @__PURE__ */ o(e, {
+var h = o(function({ value: t, onChange: n, currency: r = "BRL", locale: i = "pt-BR", ...a }, o) {
+	return /* @__PURE__ */ s(e, {
 		...a,
-		ref: s,
+		ref: o,
 		type: "text",
 		inputMode: "numeric",
-		value: f(t || 0, i, r),
-		onChange: (e) => n(p(e.target.value))
+		value: p(t || 0, i, r),
+		onChange: (e) => n(m(e.target.value))
 	});
 });
 //#endregion
-export { d as CEPInput, l as CNPJInput, c as CPFInput, m as MoneyInput, u as PhoneInput };
+export { f as CEPInput, u as CNPJInput, l as CPFInput, h as MoneyInput, d as PhoneInput };
 
 //# sourceMappingURL=masked-inputs.js.map

package/dist/forms/masked-inputs.js.map

@@ -1 +1 @@
-{"version":3,"file":"masked-inputs.js","names":[],"sources":["../../src/forms/masked-inputs.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { Input, type InputProps } from \"@/components/Input\";\nimport { formatCEP, formatCNPJ } from \"./br-validators\";\nimport { formatCPF, formatPhone } from \"@/utils/format\";\n\n/**\n * Props of every masked input.\n *\n * `value` and `onChange` are optional because the primary documented usage is\n * inside `<FormField>`, which supplies both through `cloneElement` — declaring\n * them required made `<FormField name=\"cpf\"><CPFInput /></FormField>` fail to\n * type-check while working perfectly at runtime. Standalone usage still passes\n * both; an uncontrolled input without `onChange` simply reports nothing.\n */\ntype MaskedFieldProps = Omit<InputProps, \"value\" | \"onChange\"> & {\n    value?: string;\n    onChange?: (value: string) => void;\n};\n\nfunction maskedInput(\n    mask: (input: string) => string,\n    inputMode: InputHTMLAttributes<HTMLInputElement>[\"inputMode\"] = \"numeric\",\n) {\n    return forwardRef<HTMLInputElement, MaskedFieldProps>(function MaskedInput(\n        { value, onChange, ...props },\n        ref,\n    ) {\n        return (\n            <Input\n                {...props}\n                ref={ref}\n                value={mask(value ?? \"\")}\n                inputMode={inputMode}\n                onChange={(event) => onChange?.(mask(event.target.value))}\n            />\n        );\n    });\n}\n\nexport const CPFInput = maskedInput(formatCPF);\nexport const CNPJInput = maskedInput(formatCNPJ);\nexport const PhoneInput = maskedInput(formatPhone, \"tel\");\nexport const CEPInput = maskedInput(formatCEP);\n\nexport interface MoneyInputProps extends Omit<InputProps, \"value\" | \"onChange\" | \"type\"> {\n    /** Cents (integer). Internally treated as 1/100 of the currency unit. */\n    value: number;\n    onChange: (cents: number) => void;\n    /** Currency code for `Intl.NumberFormat`. Default: `\"BRL\"`. */\n    currency?: string;\n    /** Locale for `Intl.NumberFormat`. Default: `\"pt-BR\"`. */\n    locale?: string;\n}\n\nfunction formatCents(cents: number, locale: string, currency: string): string {\n    return new Intl.NumberFormat(locale, { style: \"currency\", currency }).format(cents / 100);\n}\n\nfunction parseCents(text: string): number {\n    const digits = text.replace(/\\D/g, \"\");\n    if (!digits) return 0;\n    return Number.parseInt(digits, 10);\n}\n\n/**\n * Currency-masked input. Stores the value as an integer number of cents to\n * avoid floating-point error. Suitable for `react-hook-form` once you adapt\n * the field to expose cents.\n */\nexport const MoneyInput = forwardRef<HTMLInputElement, MoneyInputProps>(function MoneyInput(\n    { value, onChange, currency = \"BRL\", locale = \"pt-BR\", ...props },\n    ref,\n) {\n    return (\n        <Input\n            {...props}\n            ref={ref}\n            type=\"text\"\n            inputMode=\"numeric\"\n            value={formatCents(value || 0, locale, currency)}\n            onChange={(event) => onChange(parseCents(event.target.value))}\n        />\n    );\n});\n"],"mappings":";;;;;;AAoBA,SAAS,EACL,GACA,IAAgE,WAClE;CACE,OAAO,EAA+C,SAClD,EAAE,UAAO,aAAU,GAAG,KACtB,GACF;EACE,OACI,kBAAC,GAAD;GACI,GAAI;GACC;GACL,OAAO,EAAK,KAAS,EAAE;GACZ;GACX,WAAW,MAAU,IAAW,EAAK,EAAM,OAAO,KAAK,CAAC;EAC3D,CAAA;CAET,CAAC;AACL;AAEA,IAAa,IAAW,EAAY,CAAS,GAChC,IAAY,EAAY,CAAU,GAClC,IAAa,EAAY,GAAa,KAAK,GAC3C,IAAW,EAAY,CAAS;AAY7C,SAAS,EAAY,GAAe,GAAgB,GAA0B;CAC1E,OAAO,IAAI,KAAK,aAAa,GAAQ;EAAE,OAAO;EAAY;CAAS,CAAC,CAAC,CAAC,OAAO,IAAQ,GAAG;AAC5F;AAEA,SAAS,EAAW,GAAsB;CACtC,IAAM,IAAS,EAAK,QAAQ,OAAO,EAAE;CAErC,OADK,IACE,OAAO,SAAS,GAAQ,EAAE,IADb;AAExB;AAOA,IAAa,IAAa,EAA8C,SACpE,EAAE,UAAO,aAAU,cAAW,OAAO,YAAS,SAAS,GAAG,KAC1D,GACF;CACE,OACI,kBAAC,GAAD;EACI,GAAI;EACC;EACL,MAAK;EACL,WAAU;EACV,OAAO,EAAY,KAAS,GAAG,GAAQ,CAAQ;EAC/C,WAAW,MAAU,EAAS,EAAW,EAAM,OAAO,KAAK,CAAC;CAC/D,CAAA;AAET,CAAC"}
+{"version":3,"file":"masked-inputs.js","names":[],"sources":["../../src/forms/masked-inputs.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { InputHTMLAttributes } from \"react\";\nimport { Input, type InputProps } from \"@/components/Input\";\nimport { formatCEP, formatCNPJ } from \"./br-validators\";\nimport { formatCPF, formatPhone } from \"@/utils/format\";\nimport { numberFormat } from \"@/utils/intl-cache\";\n\n/**\n * Props of every masked input.\n *\n * `value` and `onChange` are optional because the primary documented usage is\n * inside `<FormField>`, which supplies both through `cloneElement` — declaring\n * them required made `<FormField name=\"cpf\"><CPFInput /></FormField>` fail to\n * type-check while working perfectly at runtime. Standalone usage still passes\n * both; an uncontrolled input without `onChange` simply reports nothing.\n */\ntype MaskedFieldProps = Omit<InputProps, \"value\" | \"onChange\"> & {\n    value?: string;\n    onChange?: (value: string) => void;\n};\n\nfunction maskedInput(\n    mask: (input: string) => string,\n    inputMode: InputHTMLAttributes<HTMLInputElement>[\"inputMode\"] = \"numeric\",\n) {\n    return forwardRef<HTMLInputElement, MaskedFieldProps>(function MaskedInput(\n        { value, onChange, ...props },\n        ref,\n    ) {\n        return (\n            <Input\n                {...props}\n                ref={ref}\n                value={mask(value ?? \"\")}\n                inputMode={inputMode}\n                onChange={(event) => onChange?.(mask(event.target.value))}\n            />\n        );\n    });\n}\n\nexport const CPFInput = maskedInput(formatCPF);\nexport const CNPJInput = maskedInput(formatCNPJ);\nexport const PhoneInput = maskedInput(formatPhone, \"tel\");\nexport const CEPInput = maskedInput(formatCEP);\n\nexport interface MoneyInputProps extends Omit<InputProps, \"value\" | \"onChange\" | \"type\"> {\n    /** Cents (integer). Internally treated as 1/100 of the currency unit. */\n    value: number;\n    onChange: (cents: number) => void;\n    /** Currency code for `Intl.NumberFormat`. Default: `\"BRL\"`. */\n    currency?: string;\n    /** Locale for `Intl.NumberFormat`. Default: `\"pt-BR\"`. */\n    locale?: string;\n}\n\nfunction formatCents(cents: number, locale: string, currency: string): string {\n    return numberFormat(locale, { style: \"currency\", currency }).format(cents / 100);\n}\n\nfunction parseCents(text: string): number {\n    const digits = text.replace(/\\D/g, \"\");\n    if (!digits) return 0;\n    return Number.parseInt(digits, 10);\n}\n\n/**\n * Currency-masked input. Stores the value as an integer number of cents to\n * avoid floating-point error. Suitable for `react-hook-form` once you adapt\n * the field to expose cents.\n */\nexport const MoneyInput = forwardRef<HTMLInputElement, MoneyInputProps>(function MoneyInput(\n    { value, onChange, currency = \"BRL\", locale = \"pt-BR\", ...props },\n    ref,\n) {\n    return (\n        <Input\n            {...props}\n            ref={ref}\n            type=\"text\"\n            inputMode=\"numeric\"\n            value={formatCents(value || 0, locale, currency)}\n            onChange={(event) => onChange(parseCents(event.target.value))}\n        />\n    );\n});\n"],"mappings":";;;;;;;AAqBA,SAAS,EACL,GACA,IAAgE,WAClE;CACE,OAAO,EAA+C,SAClD,EAAE,UAAO,aAAU,GAAG,KACtB,GACF;EACE,OACI,kBAAC,GAAD;GACI,GAAI;GACC;GACL,OAAO,EAAK,KAAS,EAAE;GACZ;GACX,WAAW,MAAU,IAAW,EAAK,EAAM,OAAO,KAAK,CAAC;EAC3D,CAAA;CAET,CAAC;AACL;AAEA,IAAa,IAAW,EAAY,CAAS,GAChC,IAAY,EAAY,CAAU,GAClC,IAAa,EAAY,GAAa,KAAK,GAC3C,IAAW,EAAY,CAAS;AAY7C,SAAS,EAAY,GAAe,GAAgB,GAA0B;CAC1E,OAAO,EAAa,GAAQ;EAAE,OAAO;EAAY;CAAS,CAAC,CAAC,CAAC,OAAO,IAAQ,GAAG;AACnF;AAEA,SAAS,EAAW,GAAsB;CACtC,IAAM,IAAS,EAAK,QAAQ,OAAO,EAAE;CAErC,OADK,IACE,OAAO,SAAS,GAAQ,EAAE,IADb;AAExB;AAOA,IAAa,IAAa,EAA8C,SACpE,EAAE,UAAO,aAAU,cAAW,OAAO,YAAS,SAAS,GAAG,KAC1D,GACF;CACE,OACI,kBAAC,GAAD;EACI,GAAI;EACC;EACL,MAAK;EACL,WAAU;EACV,OAAO,EAAY,KAAS,GAAG,GAAQ,CAAQ;EAC/C,WAAW,MAAU,EAAS,EAAW,EAAM,OAAO,KAAK,CAAC;CAC/D,CAAA;AAET,CAAC"}

package/dist/hooks/use-fullscreen-element.cjs

@@ -0,0 +1,2 @@
+let e=require("react");function t(){if(typeof document>`u`)return null;let e=document;return document.fullscreenElement??e.webkitFullscreenElement??null}function n(){let[n,r]=(0,e.useState)(t);return(0,e.useEffect)(()=>{let e=()=>r(t());return e(),document.addEventListener(`fullscreenchange`,e),document.addEventListener(`webkitfullscreenchange`,e),()=>{document.removeEventListener(`fullscreenchange`,e),document.removeEventListener(`webkitfullscreenchange`,e)}},[]),n}exports.getFullscreenElement=t,exports.useFullscreenElement=n;
+//# sourceMappingURL=use-fullscreen-element.cjs.map

package/dist/hooks/use-fullscreen-element.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-fullscreen-element.cjs","names":[],"sources":["../../src/hooks/use-fullscreen-element.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\n/**\n * Vendor-prefixed fullscreen member of `document`, still shipped by WebKit.\n *\n * Declared optional on purpose: the standard property is what every other engine\n * answers to, and Safari is the only reason the second read exists.\n */\ninterface WebkitFullscreenDocument {\n    webkitFullscreenElement?: Element | null;\n}\n\n/**\n * Read the element the browser is presenting fullscreen, standard property first.\n *\n * A plain function rather than a hook, because two very different callers need\n * the answer: `useFullscreenElement` below, which turns it into state, and the\n * action callbacks of `useFullscreen`, which need the value *at call time* and\n * cannot wait for a render to have happened since the last change.\n *\n * @returns The element being presented fullscreen, or `null` — including in any\n * environment without a `document` (a service worker, a build plugin, a Node\n * test), where the SDK must not throw.\n */\nexport function getFullscreenElement(): Element | null {\n    if (typeof document === \"undefined\") return null;\n    const prefixed = document as Document & WebkitFullscreenDocument;\n    return document.fullscreenElement ?? prefixed.webkitFullscreenElement ?? null;\n}\n\n/**\n * Track the element the browser is presenting fullscreen.\n *\n * The SDK's single subscription to `fullscreenchange` (and WebKit's\n * `webkitfullscreenchange`). Two features need exactly this fact and would\n * otherwise each carry their own copy of the prefix dance: `usePortalHost` asks\n * *where do I mount* — the fullscreen element paints its own subtree and nothing\n * else, so a dialog portalled to `document.body` is invisible while fullscreen is\n * on — and `useFullscreen` asks *is my element the one presented*. One\n * subscription, two questions.\n *\n * The event is the source of truth rather than the return of `requestFullscreen`\n * / `exitFullscreen`, because `Esc`, the browser's own exit affordance and F11\n * leave fullscreen without ever passing through those calls.\n *\n * The first value is resolved during render rather than in the effect, so a\n * consumer that mounts while fullscreen is already active is correct in its very\n * first commit instead of correcting itself one frame later.\n *\n * @returns The fullscreen element, or `null` when nothing is presented.\n */\nexport function useFullscreenElement(): Element | null {\n    const [element, setElement] = useState<Element | null>(getFullscreenElement);\n\n    useEffect(() => {\n        const sync = (): void => setElement(getFullscreenElement());\n        sync();\n        document.addEventListener(\"fullscreenchange\", sync);\n        document.addEventListener(\"webkitfullscreenchange\", sync);\n        return () => {\n            document.removeEventListener(\"fullscreenchange\", sync);\n            document.removeEventListener(\"webkitfullscreenchange\", sync);\n        };\n    }, []);\n\n    return element;\n}\n"],"mappings":"uBAwBA,SAAgB,GAAuC,CACnD,GAAI,OAAO,SAAa,IAAa,OAAO,KAC5C,IAAM,EAAW,SACjB,OAAO,SAAS,mBAAqB,EAAS,yBAA2B,IAC7E,CAuBA,SAAgB,GAAuC,CACnD,GAAM,CAAC,EAAS,IAAA,EAAc,EAAA,SAAA,CAAyB,CAAoB,EAa3E,OAXA,EAAA,EAAA,UAAA,KAAgB,CACZ,IAAM,MAAmB,EAAW,EAAqB,CAAC,EAI1D,OAHA,EAAK,EACL,SAAS,iBAAiB,mBAAoB,CAAI,EAClD,SAAS,iBAAiB,yBAA0B,CAAI,MAC3C,CACT,SAAS,oBAAoB,mBAAoB,CAAI,EACrD,SAAS,oBAAoB,yBAA0B,CAAI,CAC/D,CACJ,EAAG,CAAC,CAAC,EAEE,CACX"}

package/dist/hooks/use-fullscreen-element.js

@@ -0,0 +1,20 @@
+import { useEffect as e, useState as t } from "react";
+//#region src/hooks/use-fullscreen-element.ts
+function n() {
+	if (typeof document > "u") return null;
+	let e = document;
+	return document.fullscreenElement ?? e.webkitFullscreenElement ?? null;
+}
+function r() {
+	let [r, i] = t(n);
+	return e(() => {
+		let e = () => i(n());
+		return e(), document.addEventListener("fullscreenchange", e), document.addEventListener("webkitfullscreenchange", e), () => {
+			document.removeEventListener("fullscreenchange", e), document.removeEventListener("webkitfullscreenchange", e);
+		};
+	}, []), r;
+}
+//#endregion
+export { n as getFullscreenElement, r as useFullscreenElement };
+
+//# sourceMappingURL=use-fullscreen-element.js.map

package/dist/hooks/use-fullscreen-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-fullscreen-element.js","names":[],"sources":["../../src/hooks/use-fullscreen-element.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\n/**\n * Vendor-prefixed fullscreen member of `document`, still shipped by WebKit.\n *\n * Declared optional on purpose: the standard property is what every other engine\n * answers to, and Safari is the only reason the second read exists.\n */\ninterface WebkitFullscreenDocument {\n    webkitFullscreenElement?: Element | null;\n}\n\n/**\n * Read the element the browser is presenting fullscreen, standard property first.\n *\n * A plain function rather than a hook, because two very different callers need\n * the answer: `useFullscreenElement` below, which turns it into state, and the\n * action callbacks of `useFullscreen`, which need the value *at call time* and\n * cannot wait for a render to have happened since the last change.\n *\n * @returns The element being presented fullscreen, or `null` — including in any\n * environment without a `document` (a service worker, a build plugin, a Node\n * test), where the SDK must not throw.\n */\nexport function getFullscreenElement(): Element | null {\n    if (typeof document === \"undefined\") return null;\n    const prefixed = document as Document & WebkitFullscreenDocument;\n    return document.fullscreenElement ?? prefixed.webkitFullscreenElement ?? null;\n}\n\n/**\n * Track the element the browser is presenting fullscreen.\n *\n * The SDK's single subscription to `fullscreenchange` (and WebKit's\n * `webkitfullscreenchange`). Two features need exactly this fact and would\n * otherwise each carry their own copy of the prefix dance: `usePortalHost` asks\n * *where do I mount* — the fullscreen element paints its own subtree and nothing\n * else, so a dialog portalled to `document.body` is invisible while fullscreen is\n * on — and `useFullscreen` asks *is my element the one presented*. One\n * subscription, two questions.\n *\n * The event is the source of truth rather than the return of `requestFullscreen`\n * / `exitFullscreen`, because `Esc`, the browser's own exit affordance and F11\n * leave fullscreen without ever passing through those calls.\n *\n * The first value is resolved during render rather than in the effect, so a\n * consumer that mounts while fullscreen is already active is correct in its very\n * first commit instead of correcting itself one frame later.\n *\n * @returns The fullscreen element, or `null` when nothing is presented.\n */\nexport function useFullscreenElement(): Element | null {\n    const [element, setElement] = useState<Element | null>(getFullscreenElement);\n\n    useEffect(() => {\n        const sync = (): void => setElement(getFullscreenElement());\n        sync();\n        document.addEventListener(\"fullscreenchange\", sync);\n        document.addEventListener(\"webkitfullscreenchange\", sync);\n        return () => {\n            document.removeEventListener(\"fullscreenchange\", sync);\n            document.removeEventListener(\"webkitfullscreenchange\", sync);\n        };\n    }, []);\n\n    return element;\n}\n"],"mappings":";;AAwBA,SAAgB,IAAuC;CACnD,IAAI,OAAO,WAAa,KAAa,OAAO;CAC5C,IAAM,IAAW;CACjB,OAAO,SAAS,qBAAqB,EAAS,2BAA2B;AAC7E;AAuBA,SAAgB,IAAuC;CACnD,IAAM,CAAC,GAAS,KAAc,EAAyB,CAAoB;CAa3E,OAXA,QAAgB;EACZ,IAAM,UAAmB,EAAW,EAAqB,CAAC;EAI1D,OAHA,EAAK,GACL,SAAS,iBAAiB,oBAAoB,CAAI,GAClD,SAAS,iBAAiB,0BAA0B,CAAI,SAC3C;GAET,AADA,SAAS,oBAAoB,oBAAoB,CAAI,GACrD,SAAS,oBAAoB,0BAA0B,CAAI;EAC/D;CACJ,GAAG,CAAC,CAAC,GAEE;AACX"}

package/dist/hooks/use-fullscreen.cjs

@@ -0,0 +1,2 @@
+const e=require("./use-fullscreen-element.cjs");let t=require("react");function n(e){return typeof document>`u`?null:e?e.current:document.documentElement}function r(){if(typeof document>`u`)return!1;let e=document.documentElement,t=document;return(typeof e.requestFullscreen==`function`||typeof e.webkitRequestFullscreen==`function`)&&(t.fullscreenEnabled??t.webkitFullscreenEnabled??!0)}function i(i){let a=e.useFullscreenElement(),[o]=(0,t.useState)(r),[s,c]=(0,t.useState)(!1);(0,t.useEffect)(()=>{let e=n(i);c(e!==null&&a===e)},[a,i]);let l=(0,t.useCallback)(async()=>{let e=n(i);if(e===null)throw Error(`useFullscreen: nothing to present. Either this environment has no document, or the ref was never attached to a mounted element.`);let t=e;if(typeof t.requestFullscreen==`function`){await t.requestFullscreen();return}if(typeof t.webkitRequestFullscreen==`function`){await t.webkitRequestFullscreen();return}throw Error(`useFullscreen: this browser exposes no way to enter fullscreen.`)},[i]),u=(0,t.useCallback)(async()=>{if(e.getFullscreenElement()===null)return;let t=document;if(typeof t.exitFullscreen==`function`){await t.exitFullscreen();return}if(typeof t.webkitExitFullscreen==`function`){await t.webkitExitFullscreen();return}throw Error(`useFullscreen: this browser exposes no way to leave fullscreen.`)},[]);return{isFullscreen:s,supported:o,enter:l,exit:u,toggle:(0,t.useCallback)(async()=>{let t=n(i);if(t!==null&&e.getFullscreenElement()===t){await u();return}await l()},[l,u,i])}}exports.isFullscreenSupported=r,exports.useFullscreen=i;
+//# sourceMappingURL=use-fullscreen.cjs.map