@12-apps/ui 6.82.0 → 6.84.0

package/src/components/data-display/DataViews/data-views-range-reset.ts

@@ -0,0 +1,34 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+import type { RangeValue } from './data-views-range-types';
+
+/** One string per range CONTENT: `{}` is rebuilt on every render upstream. */
+const rangeKeyOf = (range: RangeValue): string => `${range.min ?? ''}|${range.max ?? ''}`;
+
+/**
+ * Remounts the two bound fields when the range is moved from OUTSIDE them — a
+ * "Limpar", a preset, a saved view — and never for the fields' own writes.
+ *
+ * A field keeps a day it refuses (`31/02/2026`) on screen until the APPLIED
+ * bound moves. When a clear empties the other bound, or a bound that was open
+ * already, this field's bound does not move, so without a remount the refused
+ * day would sit red under a filter that had just been cleared (FUT-4144).
+ * Remounting only for outside writes keeps the caret where it is while typing.
+ */
+export function useOutsideResetKey(value: RangeValue): { key: number; emitted: (next: RangeValue) => RangeValue } {
+  const [key, setKey] = useState(0);
+  const lastWritten = useRef(rangeKeyOf(value));
+  const current = rangeKeyOf(value);
+  useEffect(() => {
+    if (current === lastWritten.current) return;
+    lastWritten.current = current;
+    setKey((n) => n + 1);
+  }, [current]);
+  const emitted = (next: RangeValue) => {
+    lastWritten.current = rangeKeyOf(next);
+    return next;
+  };
+  return { key, emitted };
+}

package/src/components/data-display/DataViews/data-views-writers.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { type Dispatch, type SetStateAction } from "react";
+import { type Dispatch, type SetStateAction, useState } from "react";
 
 import { type DataViewState, type DataViewStatePatch } from "./data-views-types";
 
@@ -43,3 +43,26 @@ export function useStateWriters(setState: Dispatch<SetStateAction<DataViewState>
       })),
   };
 }
+
+/**
+ * "Limpar filtros", from ANY surface — the bar, the slide-in panel, the modal,
+ * the empty state — plus a key that changes with every click of it.
+ *
+ * The filter controls are keyed on `clearKey`, so a clear remounts them. That
+ * is what empties a field holding text the filter never applied: a refused day
+ * (`31/02/2026`) under a range that was open already. Clearing `{}` to `{}`
+ * changes no state, so nothing else would reach that field (FUT-4144).
+ */
+export function useClearFilters(patch: (next: DataViewStatePatch) => void): {
+  clearKey: number;
+  clearFilters: () => void;
+} {
+  const [clearKey, setClearKey] = useState(0);
+  return {
+    clearKey,
+    clearFilters: () => {
+      patch({ search: "", pills: {}, ranges: {} });
+      setClearKey((n) => n + 1);
+    },
+  };
+}

package/src/components/data-display/DataViews/use-data-views-state.ts

@@ -16,7 +16,7 @@ import { computeActiveFilterCount, defaultSortFields } from "./data-views-grid-h
 import { resolveScope, useScopeConfigChecks, type ScopeConfig } from "./data-views-scopes";
 import { serverDerived, useServerQuery } from "./data-views-server-query";
 import { useSelection } from "./data-views-selection";
-import { useStateWriters } from "./data-views-writers";
+import { useClearFilters, useStateWriters } from "./data-views-writers";
 import {
   emptyViewState,
   type DataViewColumn,
@@ -85,6 +85,10 @@ export interface DataViewsController<T extends Record<string, unknown>> {
    * its patch from the same render-scoped snapshot and the last write would win.
    */
   patch: (next: DataViewStatePatch) => void;
+  /** Drop every filter — search, pills, ranges — from any surface that offers it. */
+  clearFilters: () => void;
+  /** Changes on every {@link clearFilters}; the filter controls are keyed on it. */
+  clearKey: number;
   matched: T[];
   gridColumns: GridColumn<T>[];
   /** Columns eligible for the show/hide menu (hideable, with a text header). */
@@ -355,6 +359,7 @@ export function useDataViewsState<T extends Record<string, unknown>>({
     state,
     ranges: state.ranges ?? {},
     patch,
+    ...useClearFilters(patch),
     matched,
     gridColumns,
     hideableColumns,

package/src/components/form/CepField/CepField.md

@@ -20,6 +20,7 @@ serves a supplier form, a store-location form or a delivery checkout.
 - Race-safe: a slow response for a since-edited CEP can never overwrite a newer one
 - Degrades to a plain masked input when the lookup fails, throws, or is absent
 - Accessible status via `role="status"` / `aria-live="polite"` and `aria-busy`
+- Takes `Input`'s `size`, and can float its label inside the box like `Input`
 - Works uncontrolled-by-a-form (props) or bound to `total-form` (`Fields.CepField`)
 
 ## Props Documentation
@@ -42,6 +43,15 @@ serves a supplier form, a store-location form or a delivery checkout.
 - `placeholder`: Placeholder text (default `00000-000`)
 - `name`: Field name / input id (default `postalCode`)
 - `dataTestId`: Test id for the input (default `cep-field-<name>`)
+- `size`: A step of the `Input` size scale (`xs` | `sm` | `md` | `lg` | `xl`, default
+  `md`). Same values and same box heights as `Input`, so a `CepField` at `size="sm"`
+  stands level with `sm` `Input`s
+- `labelPlacement`: `above` (default) stacks the label over the box; `inside` draws it
+  in the box and floats it up on focus or a value, exactly as `Input`'s label does
+- `autoComplete`: the `<input>`'s `autocomplete` (default `postal-code`). Pass `off` on a
+  form for somebody else's address (a supplier), or the browser offers the signed-in
+  person's own CEP and the lookup then fills their street (FUT-4140). Same prop on
+  `Fields.CepField`
 
 ### State Props
 
@@ -83,6 +93,20 @@ const [cep, setCep] = useState('');
 />
 ```
 
+### Beside compact `Input`s
+
+An address form made of `Input`s draws every label inside its box. Opt the CEP in to
+the same treatment, and give it the form's `size`, so the CEP block is no taller than
+its neighbours:
+
+```tsx
+<CepField size="sm" labelPlacement="inside" value={cep} onChange={setCep} copy={copy} />
+<Input size="sm" label="Rua" />
+```
+
+`labelPlacement` defaults to `above` so a form that never asked keeps the stacked label
+it has always had. `Fields.CepField` takes the same two props.
+
 ### Bound to `total-form`
 
 `Fields.CepField` wires the field to the surrounding `FormContainer` and writes
@@ -134,5 +158,8 @@ the lookup. The pure helpers (`formatCep`, `isValidCep`) live in
   "Buscando endereço…" / "Endereço preenchido pelo CEP" without stealing focus
 - `aria-busy` reflects the in-flight lookup
 - `aria-describedby` links the input to its status region
-- `inputMode="numeric"` brings up the numeric keypad on mobile
-- `autoComplete="postal-code"` lets the browser's own autofill participate
+- `inputMode="numeric"` sits on the `<input>` (through `inputProps`), so it brings up the
+  numeric keypad on mobile; at the top level it landed on the wrapper `div` and did nothing
+- With `labelPlacement="inside"` the label is the `Input`'s own, associated to the input
+  by `for`/`id`, so `getByLabelText` and screen readers name the field the same way
+- `autoComplete="postal-code"` (the default) lets the browser's own autofill participate

package/src/components/form/CepField/CepField.tsx

@@ -118,6 +118,35 @@ function CepStatus({
   );
 }
 
+/** What only the `<input>` can act on. Hoisted: one object for every render. */
+const CEP_INPUT_PROPS = { inputMode: 'numeric' } as const;
+
+/** `postal-code` unless the caller said otherwise (`off` for somebody else's address). */
+const autoCompleteOf = (autoComplete: string | undefined): string => autoComplete ?? 'postal-code';
+
+/** The stacked label over the box (`labelPlacement="above"`), or nothing when there is no label. */
+function AboveLabel({
+  name,
+  label,
+  error,
+}: {
+  name: string;
+  label?: string;
+  error?: string;
+}): React.ReactElement | null {
+  if (!label) return null;
+  return (
+    <FormLabel htmlFor={name} error={Boolean(error)}>
+      {label}
+    </FormLabel>
+  );
+}
+
+/** The label handed to the `Input`, which draws it in the box: only for `inside`. */
+function insideLabel(label: string | undefined, placement: 'above' | 'inside'): string | undefined {
+  return placement === 'inside' ? label : undefined;
+}
+
 /**
  * A CEP input that fills the rest of the address in.
  *
@@ -156,6 +185,9 @@ export function CepField({
   name = 'postalCode',
   dataTestId,
   copy,
+  size, // undefined reaches `Input`, whose own default is `md`
+  labelPlacement = 'above',
+  autoComplete,
 }: CepFieldProps): React.ReactElement {
   const testId = dataTestId ?? `cep-field-${name}`;
 
@@ -176,17 +208,22 @@ export function CepField({
 
   return (
     <FormControl fullWidth>
-      {label && (
-        <FormLabel htmlFor={name} error={Boolean(error)}>
-          {label}
-        </FormLabel>
-      )}
+      {labelPlacement === 'above' && <AboveLabel name={name} label={label} error={error} />}
       <Input
         id={name}
         name={name}
         type="text"
-        inputMode="numeric"
-        autoComplete="postal-code"
+        // On the `<input>`, through `inputProps`: a top-level `inputMode` is a
+        // prop `Input` does not recognise, so it landed on the wrapper `div`
+        // and the phone kept opening the letter keyboard for eight digits
+        // (FUT-1440's CepField row).
+        inputProps={CEP_INPUT_PROPS}
+        autoComplete={autoCompleteOf(autoComplete)}
+        size={size}
+        // `inside`: the label is the Input's own, drawn in the box and floating
+        // up on focus or a value — what every other `Input` in the form does.
+        // `above` keeps the stacked `FormLabel`, for callers that never opted in.
+        label={insideLabel(label, labelPlacement)}
         placeholder={placeholder}
         value={value}
         error={Boolean(error)}

package/src/components/form/CepField/CepField.types.ts

@@ -1,4 +1,5 @@
 import type { CepFieldCopy } from "../../../copy";
+import type { InputSize } from "../Input/Input.base";
 /**
  * Types for {@link CepField} — the reusable CEP auto-completer.
  */
@@ -73,4 +74,27 @@ export interface CepFieldProps {
   name?: string;
   /** Test id for the input. Defaults to `cep-field-<name>`. */
   dataTestId?: string;
+  /**
+   * A step of the house size scale — the same values, and the same box
+   * heights, as {@link Input}'s `size`. Defaults to `md`.
+   */
+  size?: InputSize;
+  /**
+   * Where the label is drawn.
+   *
+   * - `above` (default): a stacked label over the box, as the field has always
+   *   rendered. Every existing caller keeps it.
+   * - `inside`: the label sits in the box and floats up on focus or a value,
+   *   exactly as `Input`'s label does. Use it beside `Input`s so the CEP block
+   *   is the same height as its neighbours.
+   */
+  labelPlacement?: 'above' | 'inside';
+  /**
+   * The `<input>`'s `autocomplete`. Defaults to `postal-code`, which lets the
+   * browser offer the signed-in person's own CEP — right on their own address
+   * form, wrong on a form for somebody else's (a supplier): pass `off` there,
+   * or the owner's CEP goes in and the lookup fills the owner's street
+   * (FUT-4140).
+   */
+  autoComplete?: string;
 }

package/src/components/form/InputOTP/InputOTP.hooks.ts

@@ -17,6 +17,36 @@ const isAllowed = (variant: string, text: string) => (PATTERNS[variant] ?? /.*/)
 const padTo = (digits: string[], length: number) =>
   Array.from({ length }, (_, i) => digits[i] ?? '');
 
+/**
+ * What a change to the numeric FIRST slot is, now that its `maxLength` is the
+ * code's length rather than 1 (FUT-4144).
+ *
+ * That slot carries `one-time-code`, and the phone's SMS fill (or a password
+ * manager) writes the WHOLE code into it as one change, not a paste — kept to
+ * one character, the code lost every digit but the last. So:
+ *
+ * - `overtype`: a keystroke into the already-filled slot (its old character
+ *   plus the new one). Ignored, exactly as `maxLength={1}` refused it before.
+ * - `code`: anything else longer than one character, written in one go.
+ *   Spread across the slots like a paste.
+ *
+ * Every other slot and variant keeps `maxLength={1}` and never gets here.
+ */
+function firstSlotFill(variant: string, index: number, inputValue: string, current: string) {
+  if (variant !== 'numeric' || index !== 0 || inputValue.length < 2) return null;
+  const overtype = inputValue.length === 2 && current !== '' && inputValue.includes(current);
+  return overtype ? 'overtype' : 'code';
+}
+
+/**
+ * The code inside a first-slot fill. A phone that INSERTS the SMS code at the
+ * caret rather than replacing the slot leaves the digit already there in
+ * front: `4` + `482913` arrives as `4482913`, which spread as-is would give
+ * `448291`. Longer than the code and led by that digit: the digit is dropped.
+ */
+const codeOfFill = (inputValue: string, current: string, length: number): string =>
+  inputValue.length > length && current !== '' && inputValue.startsWith(current) ? inputValue.slice(1) : inputValue;
+
 interface OtpInput {
   variant: string;
   length: number;
@@ -55,8 +85,23 @@ export const useOtpDigits = ({ variant, length, value, onChange, onComplete }: O
     [length, onChange, onComplete],
   );
 
+  /** Lays a whole code across the slots from the first: a paste, or an OS/SMS fill. */
+  const spread = useCallback(
+    (text: string) => {
+      const code = text.slice(0, length);
+      // An empty code is not a rejection, but it is nothing to apply either.
+      if (!code || !isAllowed(variant, code)) return;
+
+      setDigits(padTo(code.split(''), length));
+      publish(code);
+    },
+    [variant, length, publish],
+  );
+
   const handleInputChange = useCallback(
     (index: number, inputValue: string) => {
+      const fill = firstSlotFill(variant, index, inputValue, digits[0] ?? '');
+      if (fill) return fill === 'code' ? spread(codeOfFill(inputValue, digits[0] ?? '', length)) : undefined;
       if (!isAllowed(variant, inputValue)) return;
 
       const next = [...digits];
@@ -68,7 +113,7 @@ export const useOtpDigits = ({ variant, length, value, onChange, onComplete }: O
         focusSlot(index + 1);
       }
     },
-    [variant, digits, length, publish, focusSlot],
+    [variant, digits, length, publish, focusSlot, spread],
   );
 
   const handleKeyDown = useCallback(
@@ -89,15 +134,9 @@ export const useOtpDigits = ({ variant, length, value, onChange, onComplete }: O
   const handlePaste = useCallback(
     (e: React.ClipboardEvent) => {
       e.preventDefault();
-      const pasted = e.clipboardData.getData('text').slice(0, length);
-
-      // An empty paste is not a rejection, but it is nothing to apply either.
-      if (!pasted || !isAllowed(variant, pasted)) return;
-
-      setDigits(padTo(pasted.split(''), length));
-      publish(pasted);
+      spread(e.clipboardData.getData('text'));
     },
-    [variant, length, publish],
+    [spread],
   );
 
   return { digits, inputRefs, handleInputChange, handleKeyDown, handlePaste };

package/src/components/form/InputOTP/InputOTP.md

@@ -161,7 +161,12 @@ function CodeVerification() {
 
 The InputOTP component is designed with accessibility in mind:
 
-- **ARIA Labels**: Each input field has proper ARIA attributes
+- **ARIA Labels**: The container is a `role="group"`, so the `aria-label` you pass names
+  the slots together
+- **Phone keypad** (`variant="numeric"`, FUT-4144): every slot `<input>` carries
+  `inputmode="numeric"` and `pattern="[0-9]*"`, and the first slot
+  `autocomplete="one-time-code"` so the phone can offer a code from an SMS. The
+  `alphanumeric` and `masked` variants carry none of the three
 - **Keyboard Navigation**: Full keyboard support for all interactions
 - **Focus Management**: Clear focus indicators and logical tab order
 - **Screen Reader Support**: Announces field positions and values

package/src/components/form/InputOTP/InputOTP.tsx

@@ -15,6 +15,41 @@ const StyledOTPInput = styled(TextField, {
     !['customColor', 'customSize', 'glass', 'gradient'].includes(prop as string),
 })<OtpSlotFlags>(({ theme, ...flags }) => ({ ...otpSlotSx(theme, flags) }));
 
+/**
+ * What tells a phone that a `numeric` code is digits (FUT-4144).
+ *
+ * The hook already refused letters, but nothing reached the `<input>` to say
+ * so, and the courier's six-digit join code opened the letter keyboard.
+ * `inputMode` picks the keypad; `pattern` is what iOS reads for the same; and
+ * `one-time-code` on the FIRST slot lets the phone offer a code from an SMS —
+ * the first slot, because it is the one that takes a paste and spreads it.
+ * `alphanumeric` and `masked` are left exactly as they were.
+ */
+function keypadProps(variant: InputOTPProps['variant'], index: number): Record<string, string> {
+  if (variant !== 'numeric') return {};
+  return {
+    inputMode: 'numeric',
+    pattern: '[0-9]*',
+    ...(index === 0 ? { autoComplete: 'one-time-code' } : {}),
+  };
+}
+
+/**
+ * One character per slot — except the numeric FIRST slot, which carries
+ * `one-time-code`: the phone's SMS fill writes the whole code there in one
+ * change, and a `maxLength` of 1 would cut it to one digit before the hook
+ * could spread it.
+ *
+ * The code's length PLUS ONE: a phone that INSERTS the code at the caret keeps
+ * the digit already there in front (`4` + `482913`), and the browser caps that
+ * insertion at `maxlength` BEFORE the hook sees it. At the bare length it
+ * arrived as `448291` — a wrong code that looks whole. One more character lets
+ * the hook see the leading digit and drop it. A keystroke into the slot once
+ * filled is still refused, by the hook, as `maxLength={1}` refused it.
+ */
+const slotMaxLength = (variant: InputOTPProps['variant'], index: number, length: number): number =>
+  variant === 'numeric' && index === 0 ? length + 1 : 1;
+
 const DEFAULTS = {
   variant: 'numeric',
   color: 'primary',
@@ -49,6 +84,9 @@ export const InputOTP = forwardRef<HTMLDivElement, InputOTPProps>((props, ref) =
     <Box
       ref={ref}
       data-testid={dataTestId}
+      // A group, so the `aria-label` a caller gives the code names the six
+      // slots together: on a plain `div` it named nothing anyone could reach.
+      role="group"
       sx={{ display: 'flex', gap: 1, justifyContent: 'center', alignItems: 'center' }}
       {...rest}
     >
@@ -72,9 +110,10 @@ export const InputOTP = forwardRef<HTMLDivElement, InputOTPProps>((props, ref) =
           error={error}
           disabled={disabled}
           inputProps={{
-            maxLength: 1,
+            maxLength: slotMaxLength(variant, index, length),
             style: { textAlign: 'center' },
             'data-testid': dataTestId ? `${dataTestId}-slot-${index}` : undefined,
+            ...keypadProps(variant, index),
           }}
         />
       ))}

package/src/components/form/total-form/Fields/CepField.tsx

@@ -3,6 +3,7 @@
 import type { CepFieldCopy } from "../../../../copy";
 import React, { useCallback, useMemo, useRef } from 'react';
 
+import type { InputSize } from '../../Input/Input.base';
 import { CepField as BaseCepField, type CepAddress } from '../../CepField';
 import { useFormContext } from '../FormContext';
 
@@ -29,6 +30,15 @@ export interface CepFieldProps {
   fills?: CepFills;
   /** Milliseconds to wait after the last keystroke before looking up. */
   debounceMs?: number;
+  /** The input's size — the same scale, and box heights, as `Input`. Defaults to `md`. */
+  size?: InputSize;
+  /** `above` (default) stacks the label over the box; `inside` floats it in the box like `Input`. */
+  labelPlacement?: 'above' | 'inside';
+  /**
+   * The `<input>`'s `autocomplete`. Defaults to `postal-code`; pass `off` when
+   * the form holds somebody else's address (FUT-4140).
+   */
+  autoComplete?: string;
 }
 
 const PARTS: readonly CepPart[] = ['street', 'neighborhood', 'city', 'state'];
@@ -107,6 +117,9 @@ export function CepField({
   fills,
   debounceMs,
   copy,
+  size,
+  labelPlacement,
+  autoComplete,
 }: CepFieldProps): React.ReactElement {
   const { values, errors, setFieldValue } = useFormContext();
   const { write, clearOwned } = useOwnedAutofill();
@@ -142,6 +155,9 @@ export function CepField({
       onResolved={handleResolved}
       onNotFound={clearOwned}
       debounceMs={debounceMs}
+      size={size}
+      labelPlacement={labelPlacement}
+      autoComplete={autoComplete}
       dataTestId={`total-form-field-${name}`}
     />
   );

package/src/components/form/total-form/Fields/TextField.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import type { InputHTMLAttributes } from 'react';
 import React from 'react';
 
 import { FormControl, FormLabel, FormMessage } from '../../Form';
@@ -16,6 +17,59 @@ export interface TextFieldProps {
   type?: string;
   /** Placeholder shown when the field is empty. */
   placeholder?: string;
+  /**
+   * The `autocomplete` attribute of the `<input>`. Omitted, the browser decides
+   * from the `name` — which is how a supplier's `name`/`phone`/`email` gets
+   * offered the signed-in owner's own (FUT-4140). Pass `off` for somebody
+   * else's data, `new-password` for a secret the password manager must not
+   * fill. An `inputProps.autoComplete` wins over this one.
+   */
+  autoComplete?: string;
+  /**
+   * Attributes for the `<input>` element itself — `inputMode`, `autoCapitalize`,
+   * `autoCorrect`, `spellCheck`, `maxLength`, `pattern`, `enterKeyHint`…
+   *
+   * They reach the `<input>`, never the wrapper `div`, where a keypad hint does
+   * nothing. What the field owns — `id`, `name`, `type`, `value`, `onChange`,
+   * `placeholder` and the `total-form-field-<name>` test id — is not
+   * overridable here.
+   */
+  inputProps?: TextFieldInputProps;
+}
+
+/** The `<input>` attributes {@link TextField} lets a caller set (see `inputProps`). */
+export type TextFieldInputProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'id' | 'name' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'placeholder' | 'size' | 'color'
+>;
+
+/** The keys {@link TextFieldInputProps} leaves out, also dropped at runtime. */
+const FIELD_OWNED = [
+  'id',
+  'name',
+  'type',
+  'value',
+  'defaultValue',
+  'onChange',
+  'placeholder',
+  'size',
+  'color',
+  'data-testid',
+];
+
+/**
+ * The caller's `<input>` attributes, minus what the field owns.
+ *
+ * The type already refuses those keys; plain JS or a cast does not, and a
+ * renamed id, name or test id would silently unbind the label, the form value
+ * or every spec that finds the field by it. So they are dropped here too, and
+ * the field's own test id is written last.
+ */
+function callerInputProps(inputProps: TextFieldInputProps | undefined, testId: string): Record<string, unknown> {
+  const kept = Object.fromEntries(
+    Object.entries(inputProps ?? {}).filter(([key]) => !FIELD_OWNED.includes(key)),
+  );
+  return { ...kept, 'data-testid': testId };
 }
 
 /**
@@ -26,7 +80,14 @@ export interface TextFieldProps {
  * Renders its error via `total-form-field-<name>-message` and the input via
  * `total-form-field-<name>`.
  */
-export function TextField({ name, label, type = 'text', placeholder }: TextFieldProps): React.ReactElement {
+export function TextField({
+  name,
+  label,
+  type = 'text',
+  placeholder,
+  autoComplete,
+  inputProps,
+}: TextFieldProps): React.ReactElement {
   const { values, errors, setFieldValue } = useFormContext();
   const error = errors[name];
   const testId = `total-form-field-${name}`;
@@ -45,6 +106,8 @@ export function TextField({ name, label, type = 'text', placeholder }: TextField
         placeholder={placeholder}
         value={values[name] ?? ''}
         error={Boolean(error)}
+        autoComplete={autoComplete}
+        inputProps={callerInputProps(inputProps, testId)}
         data-testid={testId}
         onChange={(event) => setFieldValue(name, event.target.value)}
       />

package/src/components/form/total-form/Fields/index.ts

@@ -3,7 +3,7 @@ export type { CategoryFieldProps } from './CategoryField';
 export { CepField } from './CepField';
 export type { CepFieldProps, CepFills } from './CepField';
 export { TextField } from './TextField';
-export type { TextFieldProps } from './TextField';
+export type { TextFieldInputProps, TextFieldProps } from './TextField';
 export { SelectField } from './SelectField';
 export type { SelectFieldProps } from './SelectField';
 export { ToggleField } from './ToggleField';

package/src/components/form/total-form/index.ts

@@ -9,4 +9,4 @@ export type { SubmitButtonProps } from './SubmitButton';
 
 export * as Fields from './Fields';
 export { CategoryField, TextField, SelectField } from './Fields';
-export type { CategoryFieldProps, TextFieldProps, SelectFieldProps } from './Fields';
+export type { CategoryFieldProps, TextFieldInputProps, TextFieldProps, SelectFieldProps } from './Fields';

package/src/en-US.data-display.ts

@@ -219,6 +219,7 @@ export const EN_US_DATA_VIEWS_COPY: DataViewsCopy = {
     // rather than being carried over. A translated label above an unchanged
     // mask is the shape that gets a date entered backwards.
     dayMask: "mm/dd/yyyy",
+    dayInvalid: "That date does not exist.",
     clearAllFilters: "Clear all filters",
     // The KEYS are the package's own preset ids and stay as they are — the
     // surface matches on them. Only the labels beside them are words.

package/src/pt-BR.data-display.ts

@@ -213,6 +213,7 @@ export const PT_BR_DATA_VIEWS_COPY: DataViewsCopy = {
     rangeInclusiveNote: "Ambas as datas entram no resultado.",
     rangeStart: "De",
     dayMask: "dd/mm/aaaa",
+    dayInvalid: "Essa data não existe.",
     clearAllFilters: "Limpar todos os filtros",
     rangePresets: {
       hoje: "Hoje",

package/dist/chunk-4OTJ66ID.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/InputOTP/InputOTP.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport TextField from '@mui/material/TextField/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport React, { forwardRef } from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nimport { useOtpDigits } from './InputOTP.hooks';\nimport { otpSlotSx } from './InputOTP.styles';\nimport type { OtpSlotFlags } from './InputOTP.styles';\nimport type { InputOTPProps } from './InputOTP.types';\n\nconst StyledOTPInput = styled(TextField, {\n  shouldForwardProp: (prop) =>\n    !['customColor', 'customSize', 'glass', 'gradient'].includes(prop as string),\n})<OtpSlotFlags>(({ theme, ...flags }) => ({ ...otpSlotSx(theme, flags) }));\n\nconst DEFAULTS = {\n  variant: 'numeric',\n  color: 'primary',\n  size: 'md',\n  length: 6,\n  value: '',\n  glass: false,\n  gradient: false,\n  autoFocus: false,\n  error: false,\n  disabled: false,\n} satisfies Partial<InputOTPProps>;\n\ntype ResolvedProps = InputOTPProps & Required<Pick<InputOTPProps, keyof typeof DEFAULTS>>;\n\nexport const InputOTP = forwardRef<HTMLDivElement, InputOTPProps>((props, ref) => {\n  const {\n    variant, color, size, length, value, onChange, onComplete,\n    glass, gradient, autoFocus, error, disabled, dataTestId,\n    ...rest\n  } = withDefaults(props, DEFAULTS) as ResolvedProps;\n\n  const { digits, inputRefs, handleInputChange, handleKeyDown, handlePaste } = useOtpDigits({\n    variant,\n    length,\n    value,\n    onChange,\n    onComplete,\n  });\n\n  return (\n    <Box\n      ref={ref}\n      data-testid={dataTestId}\n      sx={{ display: 'flex', gap: 1, justifyContent: 'center', alignItems: 'center' }}\n      {...rest}\n    >\n      {digits.map((digit, index) => (\n        <StyledOTPInput\n          key={index}\n          ref={(el: HTMLDivElement | null) => {\n            inputRefs.current[index] = el?.querySelector('input') || null;\n          }}\n          customColor={color}\n          customSize={size}\n          glass={glass}\n          gradient={gradient}\n          // `masked` keeps the digit in state and shows a bullet in its place.\n          value={variant === 'masked' ? (digit ? '•' : '') : digit}\n          onChange={(e) => handleInputChange(index, e.target.value)}\n          onKeyDown={(e) => handleKeyDown(index, e)}\n          // Only the first slot takes a paste; it fills the rest itself.\n          onPaste={index === 0 ? handlePaste : undefined}\n          autoFocus={autoFocus && index === 0}\n          error={error}\n          disabled={disabled}\n          inputProps={{\n            maxLength: 1,\n            style: { textAlign: 'center' },\n            'data-testid': dataTestId ? `${dataTestId}-slot-${index}` : undefined,\n          }}\n        />\n      ))}\n    </Box>\n  );\n});\n\nInputOTP.displayName = 'InputOTP';\n"],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,OAAO,eAAe;AACtB,SAAS,cAAc;AACvB,SAAgB,kBAAkB;AAoD1B;AA3CR,IAAM,iBAAiB,OAAO,WAAW;AAAA,EACvC,mBAAmB,CAAC,SAClB,CAAC,CAAC,eAAe,cAAc,SAAS,UAAU,EAAE,SAAS,IAAc;AAC/E,CAAC,EAAgB,CAAC,EAAE,OAAO,GAAG,MAAM,OAAO,EAAE,GAAG,UAAU,OAAO,KAAK,EAAE,EAAE;AAE1E,IAAM,WAAW;AAAA,EACf,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,OAAO;AAAA,EACP,UAAU;AACZ;AAIO,IAAM,WAAW,WAA0C,CAAC,OAAO,QAAQ;AAChF,QAAM;AAAA,IACJ;AAAA,IAAS;AAAA,IAAO;AAAA,IAAM;AAAA,IAAQ;AAAA,IAAO;AAAA,IAAU;AAAA,IAC/C;AAAA,IAAO;AAAA,IAAU;AAAA,IAAW;AAAA,IAAO;AAAA,IAAU;AAAA,IAC7C,GAAG;AAAA,EACL,IAAI,aAAa,OAAO,QAAQ;AAEhC,QAAM,EAAE,QAAQ,WAAW,mBAAmB,eAAe,YAAY,IAAI,aAAa;AAAA,IACxF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAa;AAAA,MACb,IAAI,EAAE,SAAS,QAAQ,KAAK,GAAG,gBAAgB,UAAU,YAAY,SAAS;AAAA,MAC7E,GAAG;AAAA,MAEH,iBAAO,IAAI,CAAC,OAAO,UAClB;AAAA,QAAC;AAAA;AAAA,UAEC,KAAK,CAAC,OAA8B;AAClC,sBAAU,QAAQ,KAAK,IAAI,IAAI,cAAc,OAAO,KAAK;AAAA,UAC3D;AAAA,UACA,aAAa;AAAA,UACb,YAAY;AAAA,UACZ;AAAA,UACA;AAAA,UAEA,OAAO,YAAY,WAAY,QAAQ,WAAM,KAAM;AAAA,UACnD,UAAU,CAAC,MAAM,kBAAkB,OAAO,EAAE,OAAO,KAAK;AAAA,UACxD,WAAW,CAAC,MAAM,cAAc,OAAO,CAAC;AAAA,UAExC,SAAS,UAAU,IAAI,cAAc;AAAA,UACrC,WAAW,aAAa,UAAU;AAAA,UAClC;AAAA,UACA;AAAA,UACA,YAAY;AAAA,YACV,WAAW;AAAA,YACX,OAAO,EAAE,WAAW,SAAS;AAAA,YAC7B,eAAe,aAAa,GAAG,UAAU,SAAS,KAAK,KAAK;AAAA,UAC9D;AAAA;AAAA,QArBK;AAAA,MAsBP,CACD;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,SAAS,cAAc;","names":[]}

package/dist/chunk-4UCXJYOO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/DataViews/data-views-filter-panel.tsx"],"sourcesContent":["\"use client\";\n\nimport Box from \"@mui/material/Box/index.js\";\nimport Link from \"@mui/material/Link/index.js\";\n\nimport { StackedModal, StackedModalContent } from \"../../feedback/StackedModal\";\nimport { TableFilter } from \"../../layout/TableFilter\";\n\nimport { PillControl } from \"./data-views-category-pill\";\nimport { PanelRangeField } from \"./data-views-range-pill\";\nimport { useDataViewsCopy } from \"./data-views-copy-context\";\nimport type {\n  FilterFieldConfig,\n  RangeFieldConfig,\n  RangeValue,\n} from \"./data-views-types\";\nimport { sxRem } from \"../../../tokens/relative\";\n\n/* ── Filter panel ────────────────────────────────────────────────────────── */\n\nexport interface GridFilterPanelProps<T extends Record<string, unknown>> {\n  testIdPrefix: string;\n  search: string;\n  fields: FilterFieldConfig<T>[];\n  rangeFields: RangeFieldConfig<T>[];\n  pills: Record<string, string[]>;\n  ranges: Record<string, RangeValue>;\n  onSearchChange: (value: string) => void;\n  onTogglePill: (fieldId: string, value: string, checked: boolean) => void;\n  onChangeRange: (fieldId: string, range: RangeValue) => void;\n  onClearField: (fieldId: string) => void;\n  onClearAll: () => void;\n}\n\n/** One pill field: a compact multi-select for long lists, else a checkbox list. */\nfunction PillField<T extends Record<string, unknown>>({\n  field,\n  selected,\n  testIdPrefix,\n  onTogglePill,\n  onClearField,\n}: {\n  field: FilterFieldConfig<T>;\n  selected: string[];\n  testIdPrefix: string;\n  onTogglePill: (fieldId: string, value: string, checked: boolean) => void;\n  onClearField: (fieldId: string) => void;\n}): React.JSX.Element {\n  const testId = `${testIdPrefix}-filter-${field.id}`;\n  // `searchEnabled` forces the searchable multi-select; a plain `multiselect`\n  // keeps the auto \"search only when the list is long\" rule. `category` is the\n  // hierarchical tree — see PillControl.\n  if (field.searchEnabled || field.control === \"multiselect\" || field.control === \"category\") {\n    return (\n      <PillControl\n        fieldId={field.id}\n        pill={field}\n        selected={selected}\n        onTogglePill={onTogglePill}\n        onClearField={onClearField}\n        testIdPrefix={testIdPrefix}\n        layout=\"stacked\"\n      />\n    );\n  }\n  return (\n    <TableFilter.CheckboxField\n      label={field.label}\n      options={field.options}\n      selected={new Set(selected)}\n      onToggle={(value, checked) => onTogglePill(field.id, value, checked)}\n      testId={testId}\n    />\n  );\n}\n\n/** The filter controls (keyword + pill facets + numeric ranges), surface-agnostic. */\nfunction FilterControls<T extends Record<string, unknown>>({\n  testIdPrefix,\n  search,\n  fields,\n  rangeFields,\n  pills,\n  ranges,\n  onSearchChange,\n  onTogglePill,\n  onChangeRange,\n  onClearField,\n}: Omit<GridFilterPanelProps<T>, \"onClearAll\">): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <>\n      <TableFilter.Keyword\n        value={search}\n        onChange={onSearchChange}\n        label={copy.search.allColumnsLabel}\n        placeholder={copy.search.keywordPlaceholder}\n        testId={`${testIdPrefix}-search-all`}\n      />\n      {(fields.length > 0 || rangeFields.length > 0) && (\n        <TableFilter.Section title={copy.filters.panelTitle}>\n          {fields.map((field) => (\n            <PillField\n              key={field.id}\n              field={field}\n              selected={pills[field.id] ?? []}\n              testIdPrefix={testIdPrefix}\n              onTogglePill={onTogglePill}\n              onClearField={onClearField}\n            />\n          ))}\n          {rangeFields.map((field) => (\n            <PanelRangeField\n              key={field.id}\n              field={field}\n              value={ranges[field.id] ?? {}}\n              onChange={(range) => onChangeRange(field.id, range)}\n              testId={`${testIdPrefix}-range-${field.id}`}\n            />\n          ))}\n        </TableFilter.Section>\n      )}\n    </>\n  );\n}\n\n/** The slide-in filter panel: keyword + checkbox facets + numeric ranges. */\nexport function GridFilterPanel<T extends Record<string, unknown>>(\n  props: GridFilterPanelProps<T>,\n): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <TableFilter.Panel\n      onClearAll={props.onClearAll}\n      clearTestId={`${props.testIdPrefix}-clear-filters`}\n      ariaLabel={copy.filters.panelTitle}\n    >\n      <FilterControls {...props} />\n    </TableFilter.Panel>\n  );\n}\n\n/** Props for the modal filter surface used below the inline breakpoint. */\ninterface FilterDialogProps<T extends Record<string, unknown>> extends GridFilterPanelProps<T> {\n  open: boolean;\n  onClose: () => void;\n}\n\n/**\n * The same filter controls in a centered modal — used on smaller screens where the\n * slide-in panel would overlap the table. The \"Filtros\" toolbar button opens it.\n */\nexport function FilterDialog<T extends Record<string, unknown>>({\n  open,\n  onClose,\n  ...props\n}: FilterDialogProps<T>): React.JSX.Element {\n  const copy = useDataViewsCopy();\n  return (\n    <StackedModal\n      open={open}\n      onClose={onClose}\n      navigationTitle={copy.filters.panelTitle}\n      backLabel={copy.nav.goBack}\n      modalId={`${props.testIdPrefix}-filters`}\n      maxWidth=\"xs\"\n      dataTestId={`${props.testIdPrefix}-filter-dialog`}\n    >\n      <StackedModalContent>\n        <Box sx={{ display: \"flex\", flexDirection: \"column\", gap: 2.5 }}>\n          <Box sx={{ display: \"flex\", justifyContent: \"flex-end\" }}>\n            <Link\n              component=\"button\"\n              type=\"button\"\n              underline=\"hover\"\n              onClick={props.onClearAll}\n              data-testid={`${props.testIdPrefix}-clear-filters`}\n              sx={{ fontSize: sxRem(12), color: \"text.secondary\" }}\n            >\n              {copy.filters.clearAllFilters}\n            </Link>\n          </Box>\n          <FilterControls {...props} />\n        </Box>\n      </StackedModalContent>\n    </StackedModal>\n  );\n}\n"],"mappings":"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","names":[]}