@12-apps/ui 6.83.0 → 6.85.0

package/src/components/data-display/RegionMap/RegionMapList.tsx

@@ -0,0 +1,167 @@
+import Check from '@mui/icons-material/Check';
+import Box from '@mui/material/Box/index.js';
+import Button from '@mui/material/Button/index.js';
+import Chip from '@mui/material/Chip/index.js';
+import Typography from '@mui/material/Typography/index.js';
+import type { SxProps, Theme } from '@mui/material/styles/index.js';
+import React from 'react';
+
+import { rem } from '../../../tokens/relative';
+import { SR_ONLY_SX } from '../../form/Label/Label.styles';
+
+import type {
+  RegionMapCopy,
+  RegionMapListMode,
+  RegionMapListSort,
+  RegionMapProps,
+  RegionMapRegion,
+} from './RegionMap.types';
+
+/** The areas with a row: `listed`, defaulting to "not outside". */
+export function listedRegions(
+  regions: readonly RegionMapRegion[],
+  sort: RegionMapListSort,
+): RegionMapRegion[] {
+  const listed = regions.filter((region) => region.listed ?? region.outside !== true);
+  return sort === 'name' ? [...listed].sort((a, b) => a.name.localeCompare(b.name)) : listed;
+}
+
+/**
+ * Every listed area as a toggle button — the keyboard's and the screen
+ * reader's map, and the way to an area too small to tap. `collapsed` puts it
+ * behind one button that names the count; `shown` lays it out with a heading.
+ */
+export function RegionMapList({
+  regions,
+  copy,
+  mode,
+  sort,
+  onToggle,
+  testId,
+  theme,
+}: {
+  regions: readonly RegionMapRegion[];
+  copy: RegionMapCopy;
+  mode: Exclude<RegionMapListMode, 'none'>;
+  sort: RegionMapListSort;
+  onToggle: RegionMapProps['onToggle'];
+  testId: string;
+  theme: Theme;
+}): React.JSX.Element {
+  const [open, setOpen] = React.useState(false);
+  const listId = `${React.useId().replace(/:/g, '')}-list`;
+  const rows = listedRegions(regions, sort);
+  const visible = mode === 'shown' || open;
+  return (
+    <Box sx={{ mt: 1 }}>
+      {mode === 'collapsed' && (
+        <Button
+          variant="text"
+          size="small"
+          aria-expanded={open}
+          aria-controls={listId}
+          onClick={() => setOpen((current) => !current)}
+          data-testid={`${testId}-list-toggle`}
+          sx={{ px: 0 }}
+        >
+          {open ? copy.hideList : copy.showList(rows.length)}
+        </Button>
+      )}
+      {visible && (
+        <Box id={listId} role="group" aria-label={copy.listLabel} data-testid={`${testId}-list`} sx={{ mt: 1 }}>
+          {mode === 'shown' && (
+            <Typography variant="caption" component="p" sx={{ fontWeight: 700, color: 'text.secondary', mb: 0.5 }}>
+              {copy.listLabel}
+            </Typography>
+          )}
+          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+            {rows.map((region) => (
+              <RegionRow
+                key={region.id}
+                region={region}
+                states={copy.rowState}
+                onToggle={onToggle}
+                testId={testId}
+                theme={theme}
+              />
+            ))}
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+/** The focus ring every row shows from the keyboard, pressed or not. */
+function focusRing(theme: Theme): { outline: string; outlineOffset: string } {
+  return { outline: `${rem(theme, 2)} solid ${theme.palette.primary.main}`, outlineOffset: rem(theme, 2) };
+}
+
+/** A row's look: inverted when pressed, holding under hover and focus. */
+function rowSx(pressed: boolean, outside: boolean, theme: Theme): SxProps<Theme> {
+  const ring = focusRing(theme);
+  if (!pressed) {
+    return { color: outside ? 'text.secondary' : 'text.primary', '&.Mui-focusVisible': ring };
+  }
+  const inverted = { bgcolor: 'text.primary', color: 'background.paper' };
+  return {
+    ...inverted,
+    '& .MuiChip-icon': { color: 'inherit' },
+    '&:hover': inverted,
+    '&.Mui-focusVisible': { ...inverted, ...ring },
+  };
+}
+
+/** The state a screen reader hears after the name, if any. */
+function rowState(pressed: boolean, outside: boolean, states: RegionMapCopy['rowState']): string | null {
+  if (pressed) return states.excluded;
+  return outside ? states.outside : null;
+}
+
+/**
+ * One area: pressed, filled and checked when excluded — never colour alone —
+ * with its state spelled out for a screen reader. The inverted colours hold
+ * under hover and keyboard focus, where MUI's own would wash them out.
+ */
+function RegionRow({
+  region,
+  states,
+  onToggle,
+  testId,
+  theme,
+}: {
+  region: RegionMapRegion;
+  states: RegionMapCopy['rowState'];
+  onToggle: RegionMapProps['onToggle'];
+  testId: string;
+  theme: Theme;
+}): React.JSX.Element {
+  const pressed = region.excluded === true;
+  const sx = rowSx(pressed, region.outside === true, theme);
+  const state = rowState(pressed, region.outside === true, states);
+  return (
+    <Chip
+      data-testid={`${testId}-row-${region.id}`}
+      label={
+        <Box component="span" sx={{ display: 'inline-flex', gap: 0.75, alignItems: 'baseline' }}>
+          <span>{region.name}</span>
+          {region.detail && (
+            <Box component="span" sx={{ fontSize: rem(theme, 11), opacity: 0.75 }}>
+              {region.detail}
+            </Box>
+          )}
+          {state && (
+            <Box component="span" sx={SR_ONLY_SX}>
+              {state}
+            </Box>
+          )}
+        </Box>
+      }
+      icon={pressed ? <Check fontSize="small" /> : undefined}
+      variant={pressed ? 'filled' : 'outlined'}
+      aria-pressed={onToggle ? pressed : undefined}
+      onClick={onToggle ? () => onToggle(region.id) : undefined}
+      sx={sx}
+    />
+  );
+}

package/src/components/data-display/RegionMap/index.ts

@@ -0,0 +1,13 @@
+export { RegionMap } from './RegionMap';
+export { decodePolyline, hitRegion, projectionAt } from './RegionMap.helpers';
+export type { AreaGeometry, PlanePoint, PlaneRegion } from './RegionMap.helpers';
+export type {
+  RegionMapCircle,
+  RegionMapCopy,
+  RegionMapListMode,
+  RegionMapListSort,
+  RegionMapPoint,
+  RegionMapProps,
+  RegionMapRegion,
+  RegionMapRing,
+} from './RegionMap.types';

package/src/components/data-display/RegionMap/tests.md

@@ -0,0 +1,22 @@
+# RegionMap Test Status Tracking
+
+## Test Files Status
+
+- [x] `RegionMap.test.stories.tsx` created
+- [x] `__tests__/region-map-helpers.test.ts` — the geometry: even-odd with a
+      hole, distance, which area a tap means (hole, smallest, sliver within the
+      tolerance even from inside a big neighbour, nothing beyond it), the view,
+      label placement, `extent` on 200k values, the projection and the decoder
+- [x] `__tests__/region-map.test.tsx` — what is drawn (areas, hatch + name for
+      excluded only, several highlights, nothing with no centre and no areas),
+      what a tap reports, read-only, and the list (collapsed by default with its
+      count, `aria-expanded`, `aria-pressed`, state in words, outside areas off
+      the list and out of the count, `listed`, sort by name, detail, `none`)
+
+## Storybook Tests Status
+
+| Test Name | Status | Pass/Fail | Notes |
+| --- | --- | --- | --- |
+| A tap on an area reports its id | Written | — | `test-storybook` is not in this repo's CI; jsdom twin in `region-map.test.tsx` |
+| Excluded areas are hatched and named | Written | — | same |
+| The collapsed list opens and toggles from the keyboard | Written | — | same |

package/src/components/data-display/RegionMap/track.md

@@ -0,0 +1,13 @@
+# RegionMap
+
+A hand-drawn map of named areas around a centre; a tap toggles an area.
+Product-free — built for a delivery host's excluded neighbourhoods, named for
+what it draws.
+
+## Status
+
+- [x] Component, types, helpers, fixtures (real IBGE outlines, public data)
+- [x] Docs (`RegionMap.md`), stories, test stories, vitest suites
+- [x] Catalog entry, `data-display` export, `entries.json` subpath
+- [ ] React Native build — not planned until a native host needs it
+- [ ] Zoom and pan — the list covers areas too small to tap

package/src/components/data-display/index.ts

@@ -21,6 +21,7 @@ export * from './FleetMap';
 export * from './MapPreview';
 export * from './Popover';
 export * from './Progress';
+export * from './RegionMap';
 export * from './SectionOnboarding/SectionOnboarding';
 export * from './Sheet';
 export * from './StatCard';

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

@@ -48,6 +48,10 @@ serves a supplier form, a store-location form or a delivery checkout.
   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
 
@@ -154,7 +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
+- `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"` lets the browser's own autofill participate
+- `autoComplete="postal-code"` (the default) lets the browser's own autofill participate

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

@@ -118,6 +118,12 @@ 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,
@@ -181,6 +187,7 @@ export function CepField({
   copy,
   size, // undefined reaches `Input`, whose own default is `md`
   labelPlacement = 'above',
+  autoComplete,
 }: CepFieldProps): React.ReactElement {
   const testId = dataTestId ?? `cep-field-${name}`;
 
@@ -206,8 +213,12 @@ export function CepField({
         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.

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

@@ -89,4 +89,12 @@ export interface CepFieldProps {
    *   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

@@ -34,6 +34,11 @@ export interface CepFieldProps {
   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'];
@@ -114,6 +119,7 @@ export function CepField({
   copy,
   size,
   labelPlacement,
+  autoComplete,
 }: CepFieldProps): React.ReactElement {
   const { values, errors, setFieldValue } = useFormContext();
   const { write, clearOwned } = useOwnedAutofill();
@@ -151,6 +157,7 @@ export function CepField({
       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":[]}