@12-apps/ui 6.73.1 → 6.74.0

package/src/components/form/Input/outlined/index.ts

@@ -0,0 +1,27 @@
+import { createInput } from '../Input.factory';
+import type { InputComponent } from '../Input.factory';
+import type { InputProps as GenericInputProps, InputVariant } from '../Input.types';
+import { OutlinedTextFieldSlim } from './text-field-slim-outlined';
+
+/**
+ * The house variants MUI draws as `outlined`: `muiVariantFor` maps `glass` and
+ * `gradient` onto an outline (`Input.metrics.ts`). `filled` and `underline`
+ * need the inputs this entry exists to leave out, so they are a type error here
+ * rather than a silent fallback.
+ */
+export type OutlinedInputVariant = Extract<InputVariant, 'outlined' | 'glass' | 'gradient'>;
+
+export type InputProps = Omit<GenericInputProps, 'variant'> & { variant?: OutlinedInputVariant };
+
+/**
+ * `@12-apps/ui/form/Input/outlined` — the same `Input`, with the same props,
+ * styles and DOM, built on a field that imports `OutlinedInput` and no other
+ * MUI input (FUT-1054). For a control that only ever renders the outlined
+ * family and sits where its bytes matter: a storefront header, a first screen.
+ *
+ * Not re-exported from `form/Input` or the `form` barrel: a second `Input`
+ * there would collide. Reach it only through this subpath.
+ */
+export const Input = createInput(OutlinedTextFieldSlim) as InputComponent<InputProps>;
+
+export type { InputSize } from '../Input.types';

package/src/components/form/Input/outlined/text-field-slim-outlined.tsx

@@ -0,0 +1,13 @@
+import OutlinedInput from '@mui/material/OutlinedInput/index.js';
+
+import { createTextFieldSlim } from '../text-field-slim.factory';
+import type { TextFieldSlimComponent } from '../text-field-slim.factory';
+
+/**
+ * `TextFieldSlim` pinned to MUI's outlined input (FUT-1054). The generic field
+ * picks its input from a three-way table at runtime, so a bundler has to keep
+ * `FilledInput` and `Input` for every caller; this one imports `OutlinedInput`
+ * alone. Every variant it can be asked for renders outlined, which is what the
+ * outlined `Input` entry ever asks for.
+ */
+export const OutlinedTextFieldSlim: TextFieldSlimComponent = createTextFieldSlim(() => OutlinedInput);

package/src/components/form/Input/text-field-slim.factory.tsx

@@ -0,0 +1,248 @@
+'use client';
+
+/**
+ * `TextFieldSlim`'s body, with the input implementation left to the caller
+ * (FUT-1054). Why the field exists at all, and what it transcribes from MUI's
+ * `TextField`, is in `text-field-slim.tsx`.
+ */
+import FormControl from '@mui/material/FormControl/index.js';
+import FormHelperText from '@mui/material/FormHelperText/index.js';
+import InputLabel from '@mui/material/InputLabel/index.js';
+import { styled } from '@mui/material/styles/index.js';
+import type { FilledInputProps } from '@mui/material/FilledInput/index.js';
+import type { FormControlProps } from '@mui/material/FormControl/index.js';
+import type { FormHelperTextProps } from '@mui/material/FormHelperText/index.js';
+import type { InputProps as MuiInputProps } from '@mui/material/Input/index.js';
+import type { InputBaseComponentProps } from '@mui/material/InputBase/index.js';
+import type { InputLabelProps } from '@mui/material/InputLabel/index.js';
+import type { OutlinedInputProps } from '@mui/material/OutlinedInput/index.js';
+import React from 'react';
+
+import { withDefaults } from '../../../utils/withDefaults';
+
+/** MUI's three input variants, by the name `TextField` gives them. */
+export type MuiFieldVariant = 'standard' | 'filled' | 'outlined';
+
+/**
+ * Which input renders a variant. The generic `TextFieldSlim` maps all three;
+ * a pinned field maps the one it renders, so the other two are never imported
+ * (FUT-1054).
+ */
+export type InputForVariant = (variant: MuiFieldVariant) => React.ElementType;
+
+/** What `createTextFieldSlim` returns, and what `createInput` composes. */
+export type TextFieldSlimComponent = React.ForwardRefExoticComponent<
+  TextFieldSlimProps & React.RefAttributes<HTMLDivElement>
+>;
+
+/**
+ * `MuiTextField-root`, by hand.
+ *
+ * `@mui/material` does not re-export `textFieldClasses` from its root barrel,
+ * and the deep path that does would import `TextField` — the whole thing this
+ * file exists to avoid. So the class name is written out, and the parity test
+ * asserts it against a REAL `TextField`'s root rather than against itself.
+ *
+ * It has to be there at all because it is part of MUI's public surface: two of
+ * this package's own suites reach for `.closest('.MuiTextField-root')`, and a
+ * consumer's stylesheet may too.
+ */
+const TEXT_FIELD_ROOT_CLASS = 'MuiTextField-root';
+
+/**
+ * Named `MuiTextField` so a theme's `components.MuiTextField.styleOverrides`
+ * keeps applying. Nothing in this repo sets one today; a consumer's theme is
+ * not this package's to break.
+ */
+const TextFieldSlimRoot = styled(FormControl, {
+  name: 'MuiTextField',
+  slot: 'Root',
+  overridesResolver: (_props, styles) => styles.root,
+})({});
+
+export interface TextFieldSlimProps
+  extends Omit<FormControlProps, 'onChange' | 'onBlur' | 'onFocus' | 'defaultValue'> {
+  autoComplete?: string;
+  autoFocus?: boolean;
+  defaultValue?: unknown;
+  helperText?: React.ReactNode;
+  label?: React.ReactNode;
+  maxRows?: number | string;
+  minRows?: number | string;
+  multiline?: boolean;
+  name?: string;
+  placeholder?: string;
+  rows?: number | string;
+  type?: React.InputHTMLAttributes<HTMLInputElement>['type'];
+  value?: unknown;
+  inputRef?: React.Ref<unknown>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  /** Props for the rendered input variant. */
+  InputProps?: Partial<MuiInputProps & FilledInputProps & OutlinedInputProps>;
+  /**
+   * Props for the `<input>` itself — where an `aria-label` has to ride.
+   *
+   * MUI's own type, because it is deliberately open: a caller puts `data-*`
+   * and `aria-*` here precisely because the root would swallow them, and
+   * `InputHTMLAttributes` alone rejects both.
+   */
+  inputProps?: InputBaseComponentProps;
+  InputLabelProps?: Partial<InputLabelProps>;
+  FormHelperTextProps?: Partial<FormHelperTextProps>;
+}
+
+/**
+ * `TextField`'s own defaults, as a table.
+ *
+ * One `= default` per destructured prop is one branch per prop, and eight of
+ * them put this component over the complexity bar before it rendered anything —
+ * which is the same reason `AppHeader` keeps its defaults in a table. The values
+ * are `TextField`'s, unchanged; the parity test would fail if any drifted.
+ */
+const DEFAULTS: Partial<TextFieldSlimProps> = {
+  autoFocus: false,
+  color: 'primary',
+  disabled: false,
+  error: false,
+  fullWidth: false,
+  multiline: false,
+  required: false,
+  variant: 'outlined',
+};
+
+/** The two ids a labelled, described field needs, and the input's own. */
+function idsOf(props: TextFieldSlimProps, generated: string): {
+  id: string;
+  helperTextId: string | undefined;
+  inputLabelId: string | undefined;
+} {
+  const id = props.id ?? generated;
+  return {
+    id,
+    helperTextId: props.helperText && id ? `${id}-helper-text` : undefined,
+    inputLabelId: props.label && id ? `${id}-label` : undefined,
+  };
+}
+
+/**
+ * What only the OUTLINED variant needs: it draws its own notch around the
+ * label, so it has to be told the label and whether the caller pinned it shrunk
+ * (FUT-729's `shrink` case).
+ */
+function outlinedPropsOf(props: TextFieldSlimProps): Record<string, unknown> {
+  if (props.variant !== 'outlined') return {};
+  const shrink = props.InputLabelProps?.shrink;
+  return { label: props.label, ...(shrink === undefined ? {} : { notched: shrink }) };
+}
+
+interface FieldIds {
+  id: string;
+  helperTextId: string | undefined;
+  inputLabelId: string | undefined;
+}
+
+/**
+ * Everything the input (or this component) consumes by name.
+ *
+ * A key LIST rather than the omit-by-destructuring idiom, which would name
+ * twenty-four bindings only to leave every one of them unused — twenty-four
+ * lint warnings, in a package that allows none.
+ *
+ * `fullWidth`, `disabled`, `error`, `required`, `color` and `variant` are
+ * deliberately absent: `TextField` hands those to the root, and `fullWidth` to
+ * both.
+ */
+const CONSUMED_BY_FIELD: ReadonlySet<string> = new Set([
+  'autoComplete', 'autoFocus', 'children', 'className', 'defaultValue',
+  'FormHelperTextProps', 'helperText', 'id', 'InputLabelProps', 'inputProps',
+  'InputProps', 'inputRef', 'label', 'maxRows', 'minRows', 'multiline', 'name',
+  'onBlur', 'onChange', 'onFocus', 'placeholder', 'rows', 'type', 'value',
+]);
+
+/**
+ * What the ROOT `FormControl` gets: the props `TextField` hands it by name,
+ * plus everything it did not recognise.
+ *
+ * That second half is `TextField`'s behaviour and not a choice made here: an
+ * unrecognised HTML attribute lands on the root `div`, which is why `Input` has
+ * to route `aria-label` through `inputProps`. The parity test pins it.
+ */
+function rootPropsOf(props: TextFieldSlimProps): Record<string, unknown> {
+  return Object.fromEntries(
+    Object.entries(props).filter(([key]) => !CONSUMED_BY_FIELD.has(key)),
+  );
+}
+
+/** What the INPUT gets, by name, exactly as `TextField` names them. */
+function fieldPropsOf(props: TextFieldSlimProps, ids: FieldIds): Record<string, unknown> {
+  return {
+    'aria-describedby': ids.helperTextId,
+    autoComplete: props.autoComplete,
+    autoFocus: props.autoFocus,
+    defaultValue: props.defaultValue,
+    fullWidth: props.fullWidth,
+    multiline: props.multiline,
+    name: props.name,
+    rows: props.rows,
+    maxRows: props.maxRows,
+    minRows: props.minRows,
+    type: props.type,
+    value: props.value,
+    id: ids.id,
+    inputRef: props.inputRef,
+    onBlur: props.onBlur,
+    onChange: props.onChange,
+    onFocus: props.onFocus,
+    placeholder: props.placeholder,
+    inputProps: props.inputProps,
+    ...outlinedPropsOf(props),
+    ...props.InputProps,
+  };
+}
+
+/**
+ * The field, with the input implementation chosen by `inputFor`.
+ *
+ * A factory rather than a component so the variant table lives in the CALLER's
+ * module: this module imports none of `Input`, `FilledInput` or
+ * `OutlinedInput`, so what `inputFor` returns is the only input a caller's
+ * bundle keeps. The caller's own module-scope `createTextFieldSlim(...)` call
+ * is kept by the bundler, and with it every module its argument reaches
+ * (FUT-3402), so that argument must name only the variants it serves.
+ */
+export function createTextFieldSlim(inputFor: InputForVariant): TextFieldSlimComponent {
+  return React.forwardRef<HTMLDivElement, TextFieldSlimProps>(
+    function TextFieldSlim(rawProps, ref) {
+      const props = withDefaults(rawProps, DEFAULTS);
+      // `TextField` uses `@mui/utils`'s `useId`, which is React's with a fallback
+      // for React 17. The peer here is React 19, so React's own is the same thing
+      // without the dependency. The override still wins, exactly as it did — and
+      // it is read from the RAW props, before `withDefaults` could supply one.
+      const ids = idsOf(rawProps, React.useId());
+      const InputComponent = inputFor(props.variant ?? 'outlined');
+      const { label, helperText } = props;
+
+      return (
+        <TextFieldSlimRoot
+          className={[TEXT_FIELD_ROOT_CLASS, props.className].filter(Boolean).join(' ')}
+          ref={ref}
+          {...rootPropsOf(props)}
+        >
+          {label !== null && label !== undefined && label !== '' ? (
+            <InputLabel htmlFor={ids.id} id={ids.inputLabelId} {...props.InputLabelProps}>
+              {label}
+            </InputLabel>
+          ) : null}
+          <InputComponent {...fieldPropsOf(props, ids)} />
+          {helperText ? (
+            <FormHelperText id={ids.helperTextId} {...props.FormHelperTextProps}>
+              {helperText}
+            </FormHelperText>
+          ) : null}
+        </TextFieldSlimRoot>
+      );
+    },
+  );
+}

package/src/components/form/Input/text-field-slim.tsx

@@ -33,22 +33,13 @@
  * dev-only warning about `children` that only the select branch could emit.
  */
 import FilledInput from '@mui/material/FilledInput/index.js';
-import FormControl from '@mui/material/FormControl/index.js';
-import FormHelperText from '@mui/material/FormHelperText/index.js';
 import StandardInput from '@mui/material/Input/index.js';
-import InputLabel from '@mui/material/InputLabel/index.js';
 import OutlinedInput from '@mui/material/OutlinedInput/index.js';
-import { styled } from '@mui/material/styles/index.js';
-import type { FilledInputProps } from '@mui/material/FilledInput/index.js';
-import type { FormControlProps } from '@mui/material/FormControl/index.js';
-import type { FormHelperTextProps } from '@mui/material/FormHelperText/index.js';
-import type { InputProps as MuiInputProps } from '@mui/material/Input/index.js';
-import type { InputBaseComponentProps } from '@mui/material/InputBase/index.js';
-import type { InputLabelProps } from '@mui/material/InputLabel/index.js';
-import type { OutlinedInputProps } from '@mui/material/OutlinedInput/index.js';
-import React from 'react';
 
-import { withDefaults } from '../../../utils/withDefaults';
+import { createTextFieldSlim } from './text-field-slim.factory';
+import type { TextFieldSlimComponent } from './text-field-slim.factory';
+
+export type { TextFieldSlimProps } from './text-field-slim.factory';
 
 const VARIANT_COMPONENT = {
   standard: StandardInput,
@@ -57,201 +48,10 @@ const VARIANT_COMPONENT = {
 } as const;
 
 /**
- * `MuiTextField-root`, by hand.
- *
- * `@mui/material` does not re-export `textFieldClasses` from its root barrel,
- * and the deep path that does would import `TextField` — the whole thing this
- * file exists to avoid. So the class name is written out, and the parity test
- * asserts it against a REAL `TextField`'s root rather than against itself.
- *
- * It has to be there at all because it is part of MUI's public surface: two of
- * this package's own suites reach for `.closest('.MuiTextField-root')`, and a
- * consumer's stylesheet may too.
- */
-const TEXT_FIELD_ROOT_CLASS = 'MuiTextField-root';
-
-/**
- * Named `MuiTextField` so a theme's `components.MuiTextField.styleOverrides`
- * keeps applying. Nothing in this repo sets one today; a consumer's theme is
- * not this package's to break.
- */
-const TextFieldSlimRoot = styled(FormControl, {
-  name: 'MuiTextField',
-  slot: 'Root',
-  overridesResolver: (_props, styles) => styles.root,
-})({});
-
-export interface TextFieldSlimProps
-  extends Omit<FormControlProps, 'onChange' | 'onBlur' | 'onFocus' | 'defaultValue'> {
-  autoComplete?: string;
-  autoFocus?: boolean;
-  defaultValue?: unknown;
-  helperText?: React.ReactNode;
-  label?: React.ReactNode;
-  maxRows?: number | string;
-  minRows?: number | string;
-  multiline?: boolean;
-  name?: string;
-  placeholder?: string;
-  rows?: number | string;
-  type?: React.InputHTMLAttributes<HTMLInputElement>['type'];
-  value?: unknown;
-  inputRef?: React.Ref<unknown>;
-  onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  /** Props for the rendered input variant. */
-  InputProps?: Partial<MuiInputProps & FilledInputProps & OutlinedInputProps>;
-  /**
-   * Props for the `<input>` itself — where an `aria-label` has to ride.
-   *
-   * MUI's own type, because it is deliberately open: a caller puts `data-*`
-   * and `aria-*` here precisely because the root would swallow them, and
-   * `InputHTMLAttributes` alone rejects both.
-   */
-  inputProps?: InputBaseComponentProps;
-  InputLabelProps?: Partial<InputLabelProps>;
-  FormHelperTextProps?: Partial<FormHelperTextProps>;
-}
-
-/**
- * `TextField`'s own defaults, as a table.
- *
- * One `= default` per destructured prop is one branch per prop, and eight of
- * them put this component over the complexity bar before it rendered anything —
- * which is the same reason `AppHeader` keeps its defaults in a table. The values
- * are `TextField`'s, unchanged; the parity test would fail if any drifted.
- */
-const DEFAULTS: Partial<TextFieldSlimProps> = {
-  autoFocus: false,
-  color: 'primary',
-  disabled: false,
-  error: false,
-  fullWidth: false,
-  multiline: false,
-  required: false,
-  variant: 'outlined',
-};
-
-/** The two ids a labelled, described field needs, and the input's own. */
-function idsOf(props: TextFieldSlimProps, generated: string): {
-  id: string;
-  helperTextId: string | undefined;
-  inputLabelId: string | undefined;
-} {
-  const id = props.id ?? generated;
-  return {
-    id,
-    helperTextId: props.helperText && id ? `${id}-helper-text` : undefined,
-    inputLabelId: props.label && id ? `${id}-label` : undefined,
-  };
-}
-
-/**
- * What only the OUTLINED variant needs: it draws its own notch around the
- * label, so it has to be told the label and whether the caller pinned it shrunk
- * (FUT-729's `shrink` case).
- */
-function outlinedPropsOf(props: TextFieldSlimProps): Record<string, unknown> {
-  if (props.variant !== 'outlined') return {};
-  const shrink = props.InputLabelProps?.shrink;
-  return { label: props.label, ...(shrink === undefined ? {} : { notched: shrink }) };
-}
-
-interface FieldIds {
-  id: string;
-  helperTextId: string | undefined;
-  inputLabelId: string | undefined;
-}
-
-/**
- * Everything the input (or this component) consumes by name.
- *
- * A key LIST rather than the omit-by-destructuring idiom, which would name
- * twenty-four bindings only to leave every one of them unused — twenty-four
- * lint warnings, in a package that allows none.
- *
- * `fullWidth`, `disabled`, `error`, `required`, `color` and `variant` are
- * deliberately absent: `TextField` hands those to the root, and `fullWidth` to
- * both.
- */
-const CONSUMED_BY_FIELD: ReadonlySet<string> = new Set([
-  'autoComplete', 'autoFocus', 'children', 'className', 'defaultValue',
-  'FormHelperTextProps', 'helperText', 'id', 'InputLabelProps', 'inputProps',
-  'InputProps', 'inputRef', 'label', 'maxRows', 'minRows', 'multiline', 'name',
-  'onBlur', 'onChange', 'onFocus', 'placeholder', 'rows', 'type', 'value',
-]);
-
-/**
- * What the ROOT `FormControl` gets: the props `TextField` hands it by name,
- * plus everything it did not recognise.
- *
- * That second half is `TextField`'s behaviour and not a choice made here: an
- * unrecognised HTML attribute lands on the root `div`, which is why `Input` has
- * to route `aria-label` through `inputProps`. The parity test pins it.
+ * The generic field: any of MUI's three variants, chosen at runtime. A field
+ * that only ever renders outlined uses `./outlined` instead, which never
+ * imports the other two (FUT-1054).
  */
-function rootPropsOf(props: TextFieldSlimProps): Record<string, unknown> {
-  return Object.fromEntries(
-    Object.entries(props).filter(([key]) => !CONSUMED_BY_FIELD.has(key)),
-  );
-}
-
-/** What the INPUT gets, by name, exactly as `TextField` names them. */
-function fieldPropsOf(props: TextFieldSlimProps, ids: FieldIds): Record<string, unknown> {
-  return {
-    'aria-describedby': ids.helperTextId,
-    autoComplete: props.autoComplete,
-    autoFocus: props.autoFocus,
-    defaultValue: props.defaultValue,
-    fullWidth: props.fullWidth,
-    multiline: props.multiline,
-    name: props.name,
-    rows: props.rows,
-    maxRows: props.maxRows,
-    minRows: props.minRows,
-    type: props.type,
-    value: props.value,
-    id: ids.id,
-    inputRef: props.inputRef,
-    onBlur: props.onBlur,
-    onChange: props.onChange,
-    onFocus: props.onFocus,
-    placeholder: props.placeholder,
-    inputProps: props.inputProps,
-    ...outlinedPropsOf(props),
-    ...props.InputProps,
-  };
-}
-
-export const TextFieldSlim = React.forwardRef<HTMLDivElement, TextFieldSlimProps>(
-  function TextFieldSlim(rawProps, ref) {
-    const props = withDefaults(rawProps, DEFAULTS);
-    // `TextField` uses `@mui/utils`'s `useId`, which is React's with a fallback
-    // for React 17. The peer here is React 19, so React's own is the same thing
-    // without the dependency. The override still wins, exactly as it did — and
-    // it is read from the RAW props, before `withDefaults` could supply one.
-    const ids = idsOf(rawProps, React.useId());
-    const InputComponent = VARIANT_COMPONENT[props.variant ?? 'outlined'];
-    const { label, helperText } = props;
-
-    return (
-      <TextFieldSlimRoot
-        className={[TEXT_FIELD_ROOT_CLASS, props.className].filter(Boolean).join(' ')}
-        ref={ref}
-        {...rootPropsOf(props)}
-      >
-        {label !== null && label !== undefined && label !== '' ? (
-          <InputLabel htmlFor={ids.id} id={ids.inputLabelId} {...props.InputLabelProps}>
-            {label}
-          </InputLabel>
-        ) : null}
-        <InputComponent {...fieldPropsOf(props, ids)} />
-        {helperText ? (
-          <FormHelperText id={ids.helperTextId} {...props.FormHelperTextProps}>
-            {helperText}
-          </FormHelperText>
-        ) : null}
-      </TextFieldSlimRoot>
-    );
-  },
+export const TextFieldSlim: TextFieldSlimComponent = createTextFieldSlim(
+  (variant) => VARIANT_COMPONENT[variant],
 );

package/dist/chunk-2ZHF5VE4.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/Input/Input.tsx"],"sourcesContent":["import CircularProgress from '@mui/material/CircularProgress/index.js';\nimport InputAdornment from '@mui/material/InputAdornment/index.js';\nimport { styled, useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { INPUT_LOADING } from './Input.metrics';\nimport { TextFieldSlim } from './text-field-slim';\n\nimport {\n  filledStyles,\n  floatingLabelStyles,\n  glowStyles,\n  inputBaseStyles,\n  inputRadiusStyles,\n  muiVariantFor,\n  outlinedStyles,\n  pulseStyles,\n  SIZE_MAP,\n} from './Input.styles';\nimport type { InputProps } from './Input.types';\nimport { splitTestId } from '../../../platform/test-id';\nimport { fieldControlStyles } from '../../../tokens/field-height';\nimport { rem } from '../../../tokens/relative';\nimport type { SizeValue } from '../../../tokens/vocabulary';\n\n/**\n * `TextFieldSlim`, not `TextField` — see `text-field-slim.tsx`. MUI's own\n * `TextField` imports `Select` unconditionally, and through it `Menu`,\n * `Popover`, `Modal` and seven more component modules, so every screen with one\n * text box shipped a dropdown it can never render. Same composition, same DOM,\n * same prop routing; the select branch is the only thing missing.\n */\nconst StyledTextField = styled(TextFieldSlim, {\n  shouldForwardProp: (prop) =>\n    !['customVariant', 'fieldSize', 'floating', 'glow', 'pulse', 'loading'].includes(prop as string),\n})<{\n  customVariant?: InputProps['variant'];\n  fieldSize: SizeValue;\n  floating?: boolean;\n  glow?: boolean;\n  pulse?: boolean;\n  loading?: boolean;\n}>(({ theme, customVariant, fieldSize, floating, glow, pulse, loading }) => ({\n  position: 'relative',\n  // The theme's field height for this size (outlined family, one line).\n  ...fieldControlStyles(theme, fieldSize),\n  opacity: loading ? INPUT_LOADING.opacity : 1,\n\n  ...(glow ? glowStyles(theme) : {}),\n  ...(pulse ? pulseStyles(theme, fieldSize) : {}),\n  ...(floating ? floatingLabelStyles(theme) : {}),\n\n  '& .MuiInputBase-root': {\n    transition: 'all 0.3s ease',\n    ...inputRadiusStyles(theme, customVariant),\n    ...inputBaseStyles(theme, customVariant),\n  },\n\n  '& .MuiOutlinedInput-root': outlinedStyles(theme),\n  '& .MuiFilledInput-root': filledStyles(theme),\n}));\n\n/** Only one adornment shows at a time: the spinner replaces the caller's while loading. */\nconst EndAdornment: React.FC<{ loading: boolean; endAdornment?: React.ReactNode }> = ({\n  loading,\n  endAdornment,\n}) => {\n  const theme = useTheme();\n  if (loading) {\n    return (\n      <InputAdornment position=\"end\">\n        <CircularProgress size={rem(theme, INPUT_LOADING.spinnerSize)} />\n      </InputAdornment>\n    );\n  }\n\n  if (!endAdornment) return null;\n\n  return <InputAdornment position=\"end\">{endAdornment}</InputAdornment>;\n};\n\n/** While loading the field is inert: no clicks, and disabled to assistive tech. */\nconst interactionProps = (\n  loading: boolean,\n  onClick: InputProps['onClick'],\n  disabled?: boolean,\n) => ({\n  disabled: loading || disabled,\n  onClick: loading ? undefined : onClick,\n});\n\n/**\n * The ARIA that describes the field has to sit on the `<input>`: the text\n * field puts every attribute it does not recognise on its root `FormControl`,\n * a `<div>` with no role, where a screen reader never reads it.\n *\n * `aria-label` has ridden `inputProps` since FUT-755. `aria-describedby` and\n * `aria-busy` fell through to the div until FUT-2619, so CepField's input\n * pointed at nothing while its lookup status lived in a live region beside it.\n *\n * `inputProps` are spread onto the `<input>` AFTER the `aria-describedby` MUI\n * writes for helper text, so a caller's ids REPLACE the helper text's: MUI's\n * `TextField` on its own keeps only one of the two. This joins both, helper\n * text first. The helper id is MUI's `<id>-helper-text` (the parity test pins\n * that spelling), which is why the field's id is fixed here rather than left\n * to the text field.\n */\nfunction inputAriaOf(a: {\n  id: string;\n  helperText: React.ReactNode;\n  label?: string;\n  describedBy?: string;\n  busy?: InputProps['aria-busy'];\n}): Record<string, unknown> {\n  const describedBy = [a.helperText ? `${a.id}-helper-text` : undefined, a.describedBy]\n    .filter(Boolean)\n    .join(' ');\n  return {\n    ...(a.label === undefined ? {} : { 'aria-label': a.label }),\n    ...(a.describedBy === undefined ? {} : { 'aria-describedby': describedBy }),\n    ...(a.busy === undefined ? {} : { 'aria-busy': a.busy }),\n  };\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      variant = 'outlined',\n      size = 'md',\n      label,\n      error,\n      helperText,\n      startAdornment,\n      endAdornment,\n      fullWidth = true,\n      floating = false,\n      glow = false,\n      pulse = false,\n      loading = false,\n      onClick,\n      onFocus,\n      onBlur,\n      'aria-label': ariaLabel,\n      'aria-describedby': ariaDescribedBy,\n      'aria-busy': ariaBusy,\n      inputProps,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { testId: dataTestId, rest: props } = splitTestId(rest);\n    const generatedId = React.useId();\n    const id = props.id ?? generatedId;\n    return (\n      <StyledTextField\n        ref={ref}\n        variant={muiVariantFor(variant)}\n        customVariant={variant}\n        fieldSize={size}\n        floating={floating}\n        glow={glow}\n        pulse={pulse}\n        loading={loading}\n        label={label}\n        error={error}\n        helperText={helperText}\n        fullWidth={fullWidth}\n        {...interactionProps(loading, onClick, props.disabled)}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        /*\n         * `aria-label` has to ride `inputProps` to reach the `<input>` (FUT-755).\n         * Spread with the rest it lands on the FormControl DIV that the text\n         * field renders as its root, which carries no role — so the field kept\n         * no accessible name, and a source grep saying \"this input is labelled\"\n         * disagreed with the DOM. The reports search box and the block-title\n         * inputs were both named in source and anonymous to a screen reader.\n         * `aria-describedby` and `aria-busy` are the same case: `inputAriaOf`.\n         */\n        inputProps={{\n          'data-testid': dataTestId,\n          ...inputProps,\n          ...inputAriaOf({ id, helperText, label: ariaLabel, describedBy: ariaDescribedBy, busy: ariaBusy }),\n        }}\n        InputProps={{\n          startAdornment: startAdornment && (\n            <InputAdornment position=\"start\">{startAdornment}</InputAdornment>\n          ),\n          endAdornment: <EndAdornment loading={loading} endAdornment={endAdornment} />,\n        }}\n        {...SIZE_MAP[size]}\n        {...props}\n        id={id}\n      />\n    );\n  },\n);\n\nInput.displayName = 'Input';\n"],"mappings":"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","names":[]}

package/dist/chunk-EQK3K65G.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/CepField/CepField.tsx"],"sourcesContent":["'use client';\n\nimport type { CepFieldCopy } from \"../../../copy\";\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { cepDigits, formatCep, isValidCep } from '@12-apps/forms-core';\n\nimport { FormControl, FormLabel, FormMessage } from '../Form';\nimport { Input } from '../Input';\nimport type { CepAddress, CepFieldProps, CepLookupStatus } from './CepField.types';\n\n/** Everything {@link useCepLookup} needs, so the hook signature stays flat. */\ninterface LookupOptions {\n  digits: string;\n  complete: boolean;\n  disabled: boolean;\n  debounceMs: number;\n  onLookup?: (cep: string) => Promise<CepAddress | null>;\n  onResolved?: (address: CepAddress) => void;\n  onNotFound?: () => void;\n}\n\n/**\n * Debounced, race-safe CEP resolution.\n *\n * Two guards earn their keep here: a monotonic sequence id, bumped\n * synchronously on every new query, so a slow response for a since-edited CEP\n * can never land; and a \"last queried\" marker, so re-rendering (or the caller\n * re-masking the same value) never re-hits the provider.\n */\nfunction useCepLookup({\n  digits,\n  complete,\n  disabled,\n  debounceMs,\n  onLookup,\n  onResolved,\n  onNotFound,\n}: LookupOptions): CepLookupStatus {\n  const [status, setStatus] = useState<CepLookupStatus>('idle');\n  const lastQueriedRef = useRef('');\n  const seqRef = useRef(0);\n  // Latest callbacks, read at call time — keeps them out of the effect deps so\n  // an inline arrow from the caller doesn't re-trigger the lookup every render.\n  const lookupRef = useRef(onLookup);\n  const resolvedRef = useRef(onResolved);\n  const notFoundRef = useRef(onNotFound);\n  lookupRef.current = onLookup;\n  resolvedRef.current = onResolved;\n  notFoundRef.current = onNotFound;\n\n  useEffect(() => {\n    if (!complete || disabled || !lookupRef.current) {\n      // Editing away from a complete CEP drops any stale status and forgets the\n      // last query, so re-typing the same CEP resolves again.\n      seqRef.current += 1;\n      setStatus('idle');\n      lastQueriedRef.current = '';\n      return;\n    }\n    if (lastQueriedRef.current === digits) return;\n\n    const mySeq = (seqRef.current += 1);\n    const handle = setTimeout(() => {\n      lastQueriedRef.current = digits;\n      setStatus('loading');\n      void (async () => {\n        // A failing lookup is treated exactly like \"not found\" — the user types\n        // the address instead. Never surfaced as a crash. Going through\n        // `Promise.resolve().then` rather than calling directly covers the two\n        // failure modes an `await … .catch()` misses: a lookup that throws\n        // SYNCHRONOUSLY, and one that returns something other than a promise.\n        const address = await Promise.resolve()\n          .then(() => lookupRef.current?.(digits))\n          .catch(() => null);\n        if (seqRef.current !== mySeq) return;\n        setStatus(address ? 'found' : 'notfound');\n        // A miss is reported too, so a caller that filled from a PREVIOUS CEP\n        // can undo it rather than leaving that address under this CEP.\n        if (address) resolvedRef.current?.(address);\n        else notFoundRef.current?.();\n      })();\n    }, debounceMs);\n\n    return () => clearTimeout(handle);\n  }, [digits, complete, disabled, debounceMs]);\n\n  return status;\n}\n\n/**\n * The lookup outcome as a live region, so screen readers announce it without\n * stealing focus. Silent while idle, and while the caller is showing its own\n * validation error (which would otherwise stack two messages).\n */\nfunction CepStatus({\n  status,\n  testId,\n  suppressed,\n  copy,\n}: {\n  status: CepLookupStatus;\n  testId: string;\n  suppressed: boolean;\n  copy: CepFieldCopy;\n}): React.ReactElement {\n  const visible = !suppressed && status !== 'idle';\n  return (\n    <span id={`${testId}-status`} role=\"status\" aria-live=\"polite\">\n      {visible && (\n        <FormMessage error={status === 'notfound'} dataTestId={`${testId}-${status}`}>\n          {copy[status as Exclude<CepLookupStatus, 'idle'>]}\n        </FormMessage>\n      )}\n    </span>\n  );\n}\n\n/**\n * A CEP input that fills the rest of the address in.\n *\n * The pattern every Brazilian form has used for twenty years: type eight\n * digits, and logradouro/bairro/cidade/UF arrive on their own. This is the\n * reusable half — masking, validation, debouncing, race-safety and status —\n * with the actual lookup injected via `onLookup`, so the same component serves\n * a supplier form, a store-location form or a delivery checkout without\n * knowing anything about providers or auth.\n *\n * Resolution is best-effort by design. A provider outage, an unknown CEP or a\n * timeout leaves the field exactly as usable as a plain text input — the user\n * types the address themselves. Autofill never blocks.\n *\n * @example\n * ```tsx\n * <CepField\n *   value={cep}\n *   onChange={setCep}\n *   onLookup={(c) => fetch(`/api/…/lookup/cep/${c}`).then((r) => r.json()).then((b) => b.data)}\n *   onResolved={(a) => { setStreet(a.street ?? ''); setCity(a.city ?? ''); }}\n * />\n * ```\n */\nexport function CepField({\n  value,\n  onChange,\n  onLookup,\n  onResolved,\n  onNotFound,\n  label = 'CEP',\n  placeholder = '00000-000',\n  error,\n  disabled = false,\n  debounceMs = 500,\n  name = 'postalCode',\n  dataTestId,\n  copy,\n}: CepFieldProps): React.ReactElement {\n  const testId = dataTestId ?? `cep-field-${name}`;\n\n  const status = useCepLookup({\n    digits: cepDigits(value),\n    complete: isValidCep(value),\n    disabled,\n    debounceMs,\n    onLookup,\n    onResolved,\n    onNotFound,\n  });\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => onChange(formatCep(event.target.value)),\n    [onChange],\n  );\n\n  return (\n    <FormControl fullWidth>\n      {label && (\n        <FormLabel htmlFor={name} error={Boolean(error)}>\n          {label}\n        </FormLabel>\n      )}\n      <Input\n        id={name}\n        name={name}\n        type=\"text\"\n        inputMode=\"numeric\"\n        autoComplete=\"postal-code\"\n        placeholder={placeholder}\n        value={value}\n        error={Boolean(error)}\n        disabled={disabled}\n        loading={status === 'loading'}\n        onChange={handleChange}\n        data-testid={testId}\n        aria-describedby={`${testId}-status`}\n        aria-busy={status === 'loading'}\n      />\n      {error && (\n        <FormMessage error dataTestId={`${testId}-message`}>\n          {error}\n        </FormMessage>\n      )}\n      <CepStatus status={status} testId={testId} suppressed={Boolean(error)} copy={copy} />\n    </FormControl>\n  );\n}\n\nexport default CepField;\n"],"mappings":"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","names":[]}

package/dist/chunk-SL6454K7.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/Input/text-field-slim.tsx"],"sourcesContent":["'use client';\n\n/**\n * `TextField`, minus the branch nobody in a text field takes.\n *\n * MUI's `TextField` is a small composition — a `FormControl` root, an optional\n * `InputLabel`, one of the three input variants, an optional `FormHelperText` —\n * around one branch: `select`. That branch is worth a fortune. `TextField`\n * imports `Select` unconditionally, and `Select` reaches `Menu`, `MenuList`,\n * `Popover`, `NativeSelect`, `List`, `Modal`, `Paper`, `Portal` and `Grow`. Every\n * one of those ships to anyone who renders one text box.\n *\n * Measured in one adopter's storefront, whose header search box is the eager\n * caller: taking that ONE box off `TextField` is worth 35.8 KiB raw and 13\n * fewer `@mui/material` component modules on the critical path — more than any\n * other single item in that bundle.\n *\n * `Input` has never supported `select`: its props are `InputHTMLAttributes`, so\n * no caller can even pass one. The branch was pure cost.\n *\n * ## This is a TRANSCRIPTION, not a redesign\n *\n * Every routing decision below is `TextField`'s, deliberately, down to which\n * props land on the ROOT rather than on the input — including the one that is\n * arguably wrong (an unrecognised HTML attribute goes to the root `div`, which\n * is why `Input` has to route `aria-label` through `inputProps`). Changing any\n * of that here would be a behaviour change wearing a performance change's\n * clothes. `__tests__/text-field-slim.test.tsx` renders this and the real\n * `TextField` side by side and compares the DOM they produce.\n *\n * What is NOT carried over: the `select` branch, the `slots`/`slotProps` API\n * (unreachable through `InputProps`, which is `InputHTMLAttributes`), and the\n * dev-only warning about `children` that only the select branch could emit.\n */\nimport FilledInput from '@mui/material/FilledInput/index.js';\nimport FormControl from '@mui/material/FormControl/index.js';\nimport FormHelperText from '@mui/material/FormHelperText/index.js';\nimport StandardInput from '@mui/material/Input/index.js';\nimport InputLabel from '@mui/material/InputLabel/index.js';\nimport OutlinedInput from '@mui/material/OutlinedInput/index.js';\nimport { styled } from '@mui/material/styles/index.js';\nimport type { FilledInputProps } from '@mui/material/FilledInput/index.js';\nimport type { FormControlProps } from '@mui/material/FormControl/index.js';\nimport type { FormHelperTextProps } from '@mui/material/FormHelperText/index.js';\nimport type { InputProps as MuiInputProps } from '@mui/material/Input/index.js';\nimport type { InputBaseComponentProps } from '@mui/material/InputBase/index.js';\nimport type { InputLabelProps } from '@mui/material/InputLabel/index.js';\nimport type { OutlinedInputProps } from '@mui/material/OutlinedInput/index.js';\nimport React from 'react';\n\nimport { withDefaults } from '../../../utils/withDefaults';\n\nconst VARIANT_COMPONENT = {\n  standard: StandardInput,\n  filled: FilledInput,\n  outlined: OutlinedInput,\n} as const;\n\n/**\n * `MuiTextField-root`, by hand.\n *\n * `@mui/material` does not re-export `textFieldClasses` from its root barrel,\n * and the deep path that does would import `TextField` — the whole thing this\n * file exists to avoid. So the class name is written out, and the parity test\n * asserts it against a REAL `TextField`'s root rather than against itself.\n *\n * It has to be there at all because it is part of MUI's public surface: two of\n * this package's own suites reach for `.closest('.MuiTextField-root')`, and a\n * consumer's stylesheet may too.\n */\nconst TEXT_FIELD_ROOT_CLASS = 'MuiTextField-root';\n\n/**\n * Named `MuiTextField` so a theme's `components.MuiTextField.styleOverrides`\n * keeps applying. Nothing in this repo sets one today; a consumer's theme is\n * not this package's to break.\n */\nconst TextFieldSlimRoot = styled(FormControl, {\n  name: 'MuiTextField',\n  slot: 'Root',\n  overridesResolver: (_props, styles) => styles.root,\n})({});\n\nexport interface TextFieldSlimProps\n  extends Omit<FormControlProps, 'onChange' | 'onBlur' | 'onFocus' | 'defaultValue'> {\n  autoComplete?: string;\n  autoFocus?: boolean;\n  defaultValue?: unknown;\n  helperText?: React.ReactNode;\n  label?: React.ReactNode;\n  maxRows?: number | string;\n  minRows?: number | string;\n  multiline?: boolean;\n  name?: string;\n  placeholder?: string;\n  rows?: number | string;\n  type?: React.InputHTMLAttributes<HTMLInputElement>['type'];\n  value?: unknown;\n  inputRef?: React.Ref<unknown>;\n  onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /** Props for the rendered input variant. */\n  InputProps?: Partial<MuiInputProps & FilledInputProps & OutlinedInputProps>;\n  /**\n   * Props for the `<input>` itself — where an `aria-label` has to ride.\n   *\n   * MUI's own type, because it is deliberately open: a caller puts `data-*`\n   * and `aria-*` here precisely because the root would swallow them, and\n   * `InputHTMLAttributes` alone rejects both.\n   */\n  inputProps?: InputBaseComponentProps;\n  InputLabelProps?: Partial<InputLabelProps>;\n  FormHelperTextProps?: Partial<FormHelperTextProps>;\n}\n\n/**\n * `TextField`'s own defaults, as a table.\n *\n * One `= default` per destructured prop is one branch per prop, and eight of\n * them put this component over the complexity bar before it rendered anything —\n * which is the same reason `AppHeader` keeps its defaults in a table. The values\n * are `TextField`'s, unchanged; the parity test would fail if any drifted.\n */\nconst DEFAULTS: Partial<TextFieldSlimProps> = {\n  autoFocus: false,\n  color: 'primary',\n  disabled: false,\n  error: false,\n  fullWidth: false,\n  multiline: false,\n  required: false,\n  variant: 'outlined',\n};\n\n/** The two ids a labelled, described field needs, and the input's own. */\nfunction idsOf(props: TextFieldSlimProps, generated: string): {\n  id: string;\n  helperTextId: string | undefined;\n  inputLabelId: string | undefined;\n} {\n  const id = props.id ?? generated;\n  return {\n    id,\n    helperTextId: props.helperText && id ? `${id}-helper-text` : undefined,\n    inputLabelId: props.label && id ? `${id}-label` : undefined,\n  };\n}\n\n/**\n * What only the OUTLINED variant needs: it draws its own notch around the\n * label, so it has to be told the label and whether the caller pinned it shrunk\n * (FUT-729's `shrink` case).\n */\nfunction outlinedPropsOf(props: TextFieldSlimProps): Record<string, unknown> {\n  if (props.variant !== 'outlined') return {};\n  const shrink = props.InputLabelProps?.shrink;\n  return { label: props.label, ...(shrink === undefined ? {} : { notched: shrink }) };\n}\n\ninterface FieldIds {\n  id: string;\n  helperTextId: string | undefined;\n  inputLabelId: string | undefined;\n}\n\n/**\n * Everything the input (or this component) consumes by name.\n *\n * A key LIST rather than the omit-by-destructuring idiom, which would name\n * twenty-four bindings only to leave every one of them unused — twenty-four\n * lint warnings, in a package that allows none.\n *\n * `fullWidth`, `disabled`, `error`, `required`, `color` and `variant` are\n * deliberately absent: `TextField` hands those to the root, and `fullWidth` to\n * both.\n */\nconst CONSUMED_BY_FIELD: ReadonlySet<string> = new Set([\n  'autoComplete', 'autoFocus', 'children', 'className', 'defaultValue',\n  'FormHelperTextProps', 'helperText', 'id', 'InputLabelProps', 'inputProps',\n  'InputProps', 'inputRef', 'label', 'maxRows', 'minRows', 'multiline', 'name',\n  'onBlur', 'onChange', 'onFocus', 'placeholder', 'rows', 'type', 'value',\n]);\n\n/**\n * What the ROOT `FormControl` gets: the props `TextField` hands it by name,\n * plus everything it did not recognise.\n *\n * That second half is `TextField`'s behaviour and not a choice made here: an\n * unrecognised HTML attribute lands on the root `div`, which is why `Input` has\n * to route `aria-label` through `inputProps`. The parity test pins it.\n */\nfunction rootPropsOf(props: TextFieldSlimProps): Record<string, unknown> {\n  return Object.fromEntries(\n    Object.entries(props).filter(([key]) => !CONSUMED_BY_FIELD.has(key)),\n  );\n}\n\n/** What the INPUT gets, by name, exactly as `TextField` names them. */\nfunction fieldPropsOf(props: TextFieldSlimProps, ids: FieldIds): Record<string, unknown> {\n  return {\n    'aria-describedby': ids.helperTextId,\n    autoComplete: props.autoComplete,\n    autoFocus: props.autoFocus,\n    defaultValue: props.defaultValue,\n    fullWidth: props.fullWidth,\n    multiline: props.multiline,\n    name: props.name,\n    rows: props.rows,\n    maxRows: props.maxRows,\n    minRows: props.minRows,\n    type: props.type,\n    value: props.value,\n    id: ids.id,\n    inputRef: props.inputRef,\n    onBlur: props.onBlur,\n    onChange: props.onChange,\n    onFocus: props.onFocus,\n    placeholder: props.placeholder,\n    inputProps: props.inputProps,\n    ...outlinedPropsOf(props),\n    ...props.InputProps,\n  };\n}\n\nexport const TextFieldSlim = React.forwardRef<HTMLDivElement, TextFieldSlimProps>(\n  function TextFieldSlim(rawProps, ref) {\n    const props = withDefaults(rawProps, DEFAULTS);\n    // `TextField` uses `@mui/utils`'s `useId`, which is React's with a fallback\n    // for React 17. The peer here is React 19, so React's own is the same thing\n    // without the dependency. The override still wins, exactly as it did — and\n    // it is read from the RAW props, before `withDefaults` could supply one.\n    const ids = idsOf(rawProps, React.useId());\n    const InputComponent = VARIANT_COMPONENT[props.variant ?? 'outlined'];\n    const { label, helperText } = props;\n\n    return (\n      <TextFieldSlimRoot\n        className={[TEXT_FIELD_ROOT_CLASS, props.className].filter(Boolean).join(' ')}\n        ref={ref}\n        {...rootPropsOf(props)}\n      >\n        {label !== null && label !== undefined && label !== '' ? (\n          <InputLabel htmlFor={ids.id} id={ids.inputLabelId} {...props.InputLabelProps}>\n            {label}\n          </InputLabel>\n        ) : null}\n        <InputComponent {...fieldPropsOf(props, ids)} />\n        {helperText ? (\n          <FormHelperText id={ids.helperTextId} {...props.FormHelperTextProps}>\n            {helperText}\n          </FormHelperText>\n        ) : null}\n      </TextFieldSlimRoot>\n    );\n  },\n);\n"],"mappings":"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","names":["TextFieldSlim"]}