Input

type input = input

type InputAction = {
  /**
   * The action's accessible name, and its visible `type-button` label from
   * `--md-n-above` when `labelled`. Title case, no tracking [D160].
   */
  label: string;
  /**
   * Shows `label` in the cell from `--md-n-above` (with `--size-px-5`
   * padding). It stays the icon-only 64 × 48 px cell at base, below
   * `--xs-n-below` and below 360 px of Form width. Default `false`.
   */
  labelled?: boolean;
  /** Busy: the cell is inert and reads `busyLabel`; an icon-only cell shows "…" [D84]. */
  busy?: boolean;
  /** The "-ing…" wording while busy, e.g. "Sending…". Default "Sending…". */
  busyLabel?: string;
  /** Default `submit`. */
  type?: 'submit' | 'button';
  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  disabled?: boolean;
}

type inputParts = {
  control: string;
  icon: string;
  affix: string;
  actionSlot: string;
  actionIcon: string;
  actionText: string;
  edge: string;
  edgeLine: string;
}

type InputProps = (
  | {
      variant?: 'outline';
      plate?: boolean;
      multiline?: false;
      rows?: undefined;
      limit?: undefined;
      reveal?: boolean;
      revealLabels?: [string, string];
      labelInside: true;
      label: React.ReactNode;
      butted: 'end';
      action: InputAction;
    }
  | {
      variant?: 'outline';
      plate?: boolean;
      multiline?: false;
      rows?: undefined;
      limit?: undefined;
      reveal?: boolean;
      revealLabels?: [string, string];
      labelInside: true;
      label: React.ReactNode;
      butted?: undefined;
      action?: undefined;
    }
  | {
      variant?: 'outline';
      plate?: boolean;
      multiline?: false;
      rows?: undefined;
      limit?: undefined;
      reveal?: boolean;
      revealLabels?: [string, string];
      labelInside?: false;
      label?: undefined;
      butted: 'end';
      action: InputAction;
    }
  | {
      variant?: 'outline';
      plate?: boolean;
      multiline?: false;
      rows?: undefined;
      limit?: undefined;
      reveal?: boolean;
      revealLabels?: [string, string];
      labelInside?: false;
      label?: undefined;
      butted?: undefined;
      action?: undefined;
    }
  | {
      variant?: 'outline';
      plate?: boolean;
      multiline: true;
      rows?: number;
      limit?: number;
      reveal?: undefined;
      revealLabels?: undefined;
      labelInside?: false;
      label?: undefined;
      butted?: undefined;
      action?: undefined;
    }
  | {
      variant: 'underline';
      plate?: false;
      multiline?: false;
      rows?: undefined;
      limit?: undefined;
      reveal?: boolean;
      revealLabels?: [string, string];
      labelInside?: false;
      label?: undefined;
      butted?: undefined;
      action?: undefined;
    }
  | {
      variant: 'underline';
      plate?: false;
      multiline: true;
      rows?: number;
      limit?: number;
      reveal?: undefined;
      revealLabels?: undefined;
      labelInside?: false;
      label?: undefined;
      butted?: undefined;
      action?: undefined;
    }
) & {
  /** Class names for the box (the root), added after the module's own. */
  className?: string;
  /** Inline style for the box: set its width to the expected answer (postcode `8ch`). */
  style?: React.CSSProperties;
  /**
   * Primary Radix scale: box edge, value, placeholder, icon and focus ring.
   * Never defaulted; omitted, it inherits the scope [D133].
   */
  primary?:
    | 'ruby'
    | 'olive'
    | 'sage'
    | 'slate'
    | 'sand'
    | 'gray'
    | 'mauve'
    | 'brown'
    | 'bronze'
    | 'gold'
    | 'red'
    | 'crimson'
    | 'tomato'
    | 'pink'
    | 'plum'
    | 'indigo'
    | 'iris'
    | 'violet'
    | 'purple'
    | null;
  /**
   * Secondary Radix scale. Unused at rest; while the Field is invalid it is
   * the danger scale (the error edge).
   */
  secondary?:
    | 'ruby'
    | 'olive'
    | 'sage'
    | 'slate'
    | 'sand'
    | 'gray'
    | 'mauve'
    | 'brown'
    | 'bronze'
    | 'gold'
    | 'red'
    | 'crimson'
    | 'tomato'
    | 'pink'
    | 'plum'
    | 'indigo'
    | 'iris'
    | 'violet'
    | 'purple'
    | 'amber'
    | 'blue'
    | 'cyan'
    | 'grass'
    | 'green'
    | 'jade'
    | 'lime'
    | 'mint'
    | 'orange'
    | 'sky'
    | 'teal'
    | 'yellow'
    | null;
  /** A leading icon: Material Symbols Rounded, inline tier (§6.10). */
  icon?:
    | 'menu'
    | 'search'
    | 'circle'
    | 'arrow_forward'
    | 'arrow_upward'
    | 'expand_more'
    | 'close'
    | 'remove'
    | 'add'
    | 'check'
    | 'chevron_right'
    | 'chevron_left'
    | 'more_horiz'
    | 'play_arrow'
    | 'pause'
    | 'download'
    | 'zoom_in'
    | 'zoom_out'
    | 'recenter'
    | 'help'
    | 'mail';
  /** A prefix unit inside the box, in --role-muted ("$"). */
  prefix?: React.ReactNode;
  /** A suffix unit inside the box, in --role-muted ("USD"). Never the unit only in the placeholder. */
  suffix?: React.ReactNode;
}