@12-apps/ui 6.20.0 → 6.22.0

package/src/components/form/Input/Input.native.tsx

@@ -0,0 +1,240 @@
+import * as React from 'react';
+import {
+  ActivityIndicator,
+  Platform,
+  StyleSheet,
+  Text as RNText,
+  TextInput as RNTextInput,
+  View,
+  type GestureResponderEvent,
+  type InputModeOptions,
+  type StyleProp,
+  type TextInputProps as RNTextInputProps,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+
+import { resolveInputProps } from './Input.helpers';
+import { FieldPulse } from '../field-pulse.native';
+import { fieldLook, helperStyle, labelStyle, type FieldState } from './Input.look.native';
+import { ADORNMENT_GAP, INPUT_GLOW, INPUT_LOADING, INPUT_PULSE } from './Input.metrics';
+import type { InputProps } from './Input.types.native';
+import { webAria, webClick, webDisabled } from '../../../platform/aria';
+import { childTestId, resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
+import { useUiTheme } from '../../../provider/use-ui-theme.native';
+
+/**
+ * The keyboard an HTML input `type` asks for.
+ *
+ * `password` is the only one that is not a keyboard at all — it is React
+ * Native's `secureTextEntry`, which react-native-web turns back into
+ * `type="password"`. Everything the map does not name (`date`, `file`, `color`)
+ * has no React Native equivalent and falls through to a plain text field.
+ */
+const INPUT_MODE_FOR: Record<string, InputModeOptions> = {
+  text: 'text',
+  search: 'search',
+  email: 'email',
+  tel: 'tel',
+  url: 'url',
+  number: 'numeric',
+};
+
+export function typeProps(type: string | undefined): {
+  inputMode?: InputModeOptions;
+  secureTextEntry?: boolean;
+} {
+  if (type === 'password') return { secureTextEntry: true };
+  const mode = type === undefined ? undefined : INPUT_MODE_FOR[type];
+  return mode === undefined ? {} : { inputMode: mode };
+}
+
+/** MUI's `0 0 15px` halo, 20px and stronger once the field is focused. */
+function glowStyle(color: string, focused: boolean): ViewStyle {
+  const glow = focused ? INPUT_GLOW.focused : INPUT_GLOW.rest;
+  return Platform.select<ViewStyle>({
+    android: { elevation: glow.blur / 2 },
+    default: {
+      shadowColor: color,
+      shadowOpacity: glow.alpha,
+      shadowRadius: glow.blur,
+      shadowOffset: { width: 0, height: 0 },
+    },
+  });
+}
+
+/**
+ * An adornment in its own slot, 8px from the value as `InputAdornment` puts it.
+ *
+ * No `testID`: the web field names ONE element, the `<input>` itself, so the
+ * native one names the same element and nothing else. A shared story that
+ * counts fields by a test-id prefix (`getAllByTestId(/perf-input-/)`) counts
+ * the same number on both renderers only if this holds — the two decorations
+ * below keep an id because they exist only while asked for.
+ */
+function Slot({
+  children,
+  side,
+}: {
+  children: React.ReactNode;
+  side: 'start' | 'end';
+}): React.JSX.Element | null {
+  if (children == null) return null;
+  return (
+    <View style={[styles.slot, side === 'start' ? { marginRight: ADORNMENT_GAP } : { marginLeft: ADORNMENT_GAP }]}>
+      {children}
+    </View>
+  );
+}
+
+/** One line of text under or over the field, or nothing at all. */
+function Line({
+  text,
+  style,
+}: {
+  text: string | undefined;
+  style: StyleProp<TextStyle>;
+}): React.JSX.Element | null {
+  if (text === undefined) return null;
+  return <RNText style={style}>{text}</RNText>;
+}
+
+/** MUI's 20px `CircularProgress` in the end slot; the platform's own arc on a device. */
+function Spinner({ color, testID }: { color: string; testID: string }): React.JSX.Element {
+  return (
+    <ActivityIndicator
+      testID={testID}
+      size={Platform.OS === 'ios' ? 'small' : INPUT_LOADING.spinnerSize}
+      color={color}
+      accessibilityLabel="loading"
+    />
+  );
+}
+
+/** MUI's `FormLabel` appends an asterisk to a required field's label. */
+function labelText(label: string | undefined, required: boolean): string | undefined {
+  if (label === undefined) return undefined;
+  return required ? `${label} *` : label;
+}
+
+/** The focus flag the border and the label are drawn from, and the handlers that keep it. */
+function useFocusState(
+  onFocus: RNTextInputProps['onFocus'],
+  onBlur: RNTextInputProps['onBlur'],
+): {
+  focused: boolean;
+  handleFocus: NonNullable<RNTextInputProps['onFocus']>;
+  handleBlur: NonNullable<RNTextInputProps['onBlur']>;
+} {
+  const [focused, setFocused] = React.useState(false);
+  return {
+    focused,
+    handleFocus: (event) => {
+      setFocused(true);
+      onFocus?.(event);
+    },
+    handleBlur: (event) => {
+      setFocused(false);
+      onBlur?.(event);
+    },
+  };
+}
+
+/**
+ * The native `Input`.
+ *
+ * The label sits ABOVE the field rather than floating into a notch in its
+ * border, because React Native cannot cut a notch in a border — see
+ * `NATIVE-NOTES.md`. Everything else is the web field's arithmetic:
+ * `Input.look.native.ts` decides the paint, `Input.metrics.ts` holds the
+ * numbers, and both renderers read the same table.
+ */
+export const Input = React.forwardRef<RNTextInput, InputProps>((rawProps, ref) => {
+  const {
+    variant, size, type, label, error, helperText, startAdornment, endAdornment,
+    fullWidth, floating: _floating, glow, pulse, loading, disabled, required,
+    style, inputStyle, onClick, onPress, onFocus, onBlur, ...others
+  } = resolveInputProps(rawProps);
+
+  const theme = useUiTheme();
+  const { focused, handleFocus, handleBlur } = useFocusState(onFocus, onBlur);
+  const inactive = disabled || loading;
+  const state: FieldState = { focused: focused && !inactive, error, disabled: inactive };
+  const look = fieldLook(theme, variant, size, state);
+
+  const idFor = (suffix: string): string => childTestId(others, suffix, 'input');
+  const handlePress = (event: GestureResponderEvent): void => {
+    onClick?.(event);
+    onPress?.(event);
+  };
+
+  return (
+    <View
+      style={[
+        styles.root,
+        fullWidth ? styles.fullWidth : styles.auto,
+        loading ? styles.loading : null,
+        style,
+      ]}
+    >
+      {pulse ? (
+        <FieldPulse
+          color={theme.palette.primary.main}
+          radius={theme.spacing(INPUT_PULSE.radiusUnits)}
+          testID={idFor('pulse')}
+        />
+      ) : null}
+      <Line text={labelText(label, required)} style={labelStyle(theme, variant, size, state)} />
+      <View style={[look.box, glow ? glowStyle(theme.palette.primary.main, state.focused) : null]}>
+        <Slot side="start">{startAdornment}</Slot>
+        <RNTextInput
+          ref={ref}
+          testID={resolveTestId(others, 'input')}
+          style={[look.value, inputStyle]}
+          placeholderTextColor={look.placeholder}
+          editable={!inactive}
+          // The web input keeps focus on Enter (a form submits, the caret stays);
+          // React Native dismisses the keyboard for a single-line field. A
+          // caller wanting the platform behaviour passes its own.
+          blurOnSubmit={false}
+          aria-label={label}
+          aria-disabled={inactive}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onPressIn={handlePress}
+          {...webClick(handlePress)}
+          {...webDisabled(inactive)}
+          {...webAria({ 'aria-invalid': error, 'aria-required': required })}
+          {...typeProps(type)}
+          {...withoutTestIdProps(others)}
+        />
+        <Slot side="end">
+          {loading ? <Spinner color={theme.palette.primary.main} testID={idFor('loading')} /> : endAdornment}
+        </Slot>
+      </View>
+      <Line text={helperText} style={helperStyle(theme, variant, size, state)} />
+    </View>
+  );
+});
+
+Input.displayName = 'Input';
+
+const styles = StyleSheet.create({
+  root: {
+    position: 'relative',
+  },
+  fullWidth: {
+    alignSelf: 'stretch',
+    width: '100%',
+  },
+  auto: {
+    alignSelf: 'flex-start',
+  },
+  loading: {
+    opacity: INPUT_LOADING.opacity,
+  },
+  slot: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});

package/src/components/form/Input/Input.styles.ts

@@ -1,12 +1,25 @@
 import { alpha, keyframes } from '@mui/material/styles/index.js';
 import type { CSSObject, Theme } from '@mui/material/styles/index.js';
 
+import {
+  FILLED_WASH,
+  FLOATING_LABEL,
+  INPUT_BORDER,
+  INPUT_GLASS,
+  INPUT_GLOW,
+  INPUT_GRADIENT,
+  INPUT_PULSE,
+} from './Input.metrics';
 import type { InputProps } from './Input.types';
 
 import { fieldEdge } from '../../../tokens/field-edge';
 
 type InputVariant = NonNullable<InputProps['variant']>;
 
+// The numbers below all come from `./Input.metrics`, which the native renderer
+// reads too — see its header for why MUI's own values are in there as well.
+export { muiVariantFor, SIZE_MAP } from './Input.metrics';
+
 // Define pulse animation
 const pulseAnimation = keyframes`
   0% {
@@ -14,7 +27,7 @@ const pulseAnimation = keyframes`
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 10px currentColor;
+    box-shadow: 0 0 0 ${INPUT_PULSE.spread}px currentColor;
     opacity: 0;
   }
   100% {
@@ -23,34 +36,11 @@ const pulseAnimation = keyframes`
   }
 `;
 
-/** Our four variants map onto MUI's three; `glass` and `gradient` restyle an outline. */
-export const muiVariantFor = (variant: InputVariant): 'outlined' | 'filled' | 'standard' => {
-  switch (variant) {
-    case 'underline':
-      return 'standard';
-    case 'glass':
-    case 'gradient':
-      return 'outlined';
-    default:
-      return variant as 'outlined' | 'filled' | 'standard';
-  }
-};
-
-// MUI gives a text field two heights, so the five house stops are drawn as two
-// plus padding: `xs` tightens below small, `lg`/`xl` open up above medium.
-export const SIZE_MAP = {
-  xs: { size: 'small' as const, sx: { '& .MuiInputBase-input': { padding: '6px 10px' } } },
-  sm: { size: 'small' as const },
-  md: { size: 'medium' as const },
-  lg: { size: 'medium' as const, sx: { '& .MuiInputBase-input': { padding: '16px 14px' } } },
-  xl: { size: 'medium' as const, sx: { '& .MuiInputBase-input': { padding: '20px 16px' } } },
-};
-
 export const glowStyles = (theme: Theme): CSSObject => ({
   '& .MuiInputBase-root': {
-    boxShadow: `0 0 15px ${alpha(theme.palette.primary.main, 0.3)}`,
+    boxShadow: `0 0 ${INPUT_GLOW.rest.blur}px ${alpha(theme.palette.primary.main, INPUT_GLOW.rest.alpha)}`,
     '&.Mui-focused': {
-      boxShadow: `0 0 20px ${alpha(theme.palette.primary.main, 0.5)}`,
+      boxShadow: `0 0 ${INPUT_GLOW.focused.blur}px ${alpha(theme.palette.primary.main, INPUT_GLOW.focused.alpha)}`,
     },
   },
 });
@@ -64,12 +54,12 @@ export const pulseStyles = (theme: Theme): CSSObject => ({
     top: '50%',
     left: '0',
     right: '0',
-    height: '56px',
+    height: `${INPUT_PULSE.height}px`,
     transform: 'translateY(-50%)',
-    borderRadius: theme.spacing(0.5),
+    borderRadius: theme.spacing(INPUT_PULSE.radiusUnits),
     backgroundColor: theme.palette.primary.main,
-    opacity: 0.3,
-    animation: `${pulseAnimation} 2s infinite`,
+    opacity: INPUT_PULSE.opacity,
+    animation: `${pulseAnimation} ${INPUT_PULSE.ms / 1000}s infinite`,
     pointerEvents: 'none',
     zIndex: -1,
   },
@@ -77,11 +67,11 @@ export const pulseStyles = (theme: Theme): CSSObject => ({
 
 export const floatingLabelStyles = (theme: Theme): CSSObject => ({
   '& .MuiInputLabel-root': {
-    transform: 'translate(14px, 16px) scale(1)',
+    transform: `translate(${FLOATING_LABEL.rest.x}px, ${FLOATING_LABEL.rest.y}px) scale(1)`,
     '&.MuiInputLabel-shrink': {
-      transform: 'translate(14px, -9px) scale(0.75)',
+      transform: `translate(${FLOATING_LABEL.shrink.x}px, ${FLOATING_LABEL.shrink.y}px) scale(${FLOATING_LABEL.scale})`,
       backgroundColor: theme.palette.background.paper,
-      padding: '0 4px',
+      padding: `0 ${FLOATING_LABEL.paddingX}px`,
     },
   },
 });
@@ -90,17 +80,17 @@ export const inputBaseStyles = (theme: Theme, variant?: InputVariant): CSSObject
   switch (variant) {
     case 'glass':
       return {
-        backgroundColor: alpha(theme.palette.background.paper, 0.1),
-        backdropFilter: 'blur(20px)',
-        border: `1px solid ${fieldEdge(theme)}`,
+        backgroundColor: alpha(theme.palette.background.paper, INPUT_GLASS.background.rest),
+        backdropFilter: `blur(${INPUT_GLASS.blur}px)`,
+        border: `${INPUT_BORDER.rest}px solid ${fieldEdge(theme)}`,
         '&:hover': {
-          backgroundColor: alpha(theme.palette.background.paper, 0.15),
-          borderColor: alpha(theme.palette.primary.main, 0.3),
+          backgroundColor: alpha(theme.palette.background.paper, INPUT_GLASS.background.hover),
+          borderColor: alpha(theme.palette.primary.main, INPUT_GLASS.hoverBorderAlpha),
         },
         '&.Mui-focused': {
-          backgroundColor: alpha(theme.palette.background.paper, 0.2),
+          backgroundColor: alpha(theme.palette.background.paper, INPUT_GLASS.background.focused),
           borderColor: theme.palette.primary.main,
-          boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.1)}`,
+          boxShadow: `0 0 0 ${INPUT_GLASS.focusRing.width}px ${alpha(theme.palette.primary.main, INPUT_GLASS.focusRing.alpha)}`,
         },
       };
     case 'underline':
@@ -122,11 +112,15 @@ export const inputBaseStyles = (theme: Theme, variant?: InputVariant): CSSObject
   }
 };
 
+/** The 135° fill between the two brand hues, at one of its three strengths. */
+const gradientFill = (theme: Theme, strength: number): string =>
+  `linear-gradient(${INPUT_GRADIENT.angleDeg}deg, ${alpha(theme.palette.primary.main, strength)}, ${alpha(theme.palette.secondary.main, strength)})`;
+
 // The border is a gradient painted behind the field and masked to a 2px ring,
 // since CSS cannot put a gradient on `border-color` directly.
 const gradientStyles = (theme: Theme): CSSObject => ({
-  background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.1)}, ${alpha(theme.palette.secondary.main, 0.1)})`,
-  border: `2px solid transparent`,
+  background: gradientFill(theme, INPUT_GRADIENT.fill.rest),
+  border: `${INPUT_GRADIENT.borderWidth}px solid transparent`,
   backgroundOrigin: 'border-box',
   backgroundClip: 'padding-box, border-box',
   position: 'relative',
@@ -138,19 +132,19 @@ const gradientStyles = (theme: Theme): CSSObject => ({
     right: 0,
     bottom: 0,
     borderRadius: 'inherit',
-    background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
+    background: `linear-gradient(${INPUT_GRADIENT.angleDeg}deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
     mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
     maskComposite: 'exclude',
-    padding: '2px',
+    padding: `${INPUT_GRADIENT.borderWidth}px`,
     zIndex: -1,
   },
   '&:hover': {
-    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.15)}, ${alpha(theme.palette.secondary.main, 0.15)})`,
+    background: gradientFill(theme, INPUT_GRADIENT.fill.hover),
   },
   '&.Mui-focused': {
-    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.2)}, ${alpha(theme.palette.secondary.main, 0.2)})`,
+    background: gradientFill(theme, INPUT_GRADIENT.fill.focused),
     '&::before': {
-      background: `linear-gradient(135deg, ${theme.palette.primary.dark}, ${theme.palette.secondary.dark})`,
+      background: `linear-gradient(${INPUT_GRADIENT.angleDeg}deg, ${theme.palette.primary.dark}, ${theme.palette.secondary.dark})`,
     },
   },
 });
@@ -164,7 +158,7 @@ export const outlinedStyles = (theme: Theme): CSSObject => ({
   },
   '&.Mui-focused fieldset': {
     borderColor: theme.palette.primary.main,
-    borderWidth: 2,
+    borderWidth: INPUT_BORDER.focused,
   },
   '&.Mui-error fieldset': {
     borderColor: theme.palette.error.main,
@@ -172,11 +166,11 @@ export const outlinedStyles = (theme: Theme): CSSObject => ({
 });
 
 export const filledStyles = (theme: Theme): CSSObject => ({
-  backgroundColor: alpha(theme.palette.action.hover, 0.04),
+  backgroundColor: alpha(theme.palette.action.hover, FILLED_WASH.rest),
   '&:hover': {
-    backgroundColor: alpha(theme.palette.action.hover, 0.08),
+    backgroundColor: alpha(theme.palette.action.hover, FILLED_WASH.hover),
   },
   '&.Mui-focused': {
-    backgroundColor: alpha(theme.palette.action.hover, 0.12),
+    backgroundColor: alpha(theme.palette.action.hover, FILLED_WASH.focused),
   },
 });

package/src/components/form/Input/Input.tsx

@@ -3,6 +3,7 @@ import InputAdornment from '@mui/material/InputAdornment/index.js';
 import { styled } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import { INPUT_LOADING } from './Input.metrics';
 import { TextFieldSlim } from './text-field-slim';
 
 import {
@@ -16,6 +17,7 @@ import {
   SIZE_MAP,
 } from './Input.styles';
 import type { InputProps } from './Input.types';
+import { splitTestId } from '../../../platform/test-id';
 
 /**
  * `TextFieldSlim`, not `TextField` — see `text-field-slim.tsx`. MUI's own
@@ -35,7 +37,7 @@ const StyledTextField = styled(TextFieldSlim, {
   loading?: boolean;
 }>(({ theme, customVariant, floating, glow, pulse, loading }) => ({
   position: 'relative',
-  opacity: loading ? 0.7 : 1,
+  opacity: loading ? INPUT_LOADING.opacity : 1,
 
   ...(glow ? glowStyles(theme) : {}),
   ...(pulse ? pulseStyles(theme) : {}),
@@ -58,7 +60,7 @@ const EndAdornment: React.FC<{ loading: boolean; endAdornment?: React.ReactNode
   if (loading) {
     return (
       <InputAdornment position="end">
-        <CircularProgress size={20} />
+        <CircularProgress size={INPUT_LOADING.spinnerSize} />
       </InputAdornment>
     );
   }
@@ -96,49 +98,51 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       onClick,
       onFocus,
       onBlur,
-      'data-testid': dataTestId,
       'aria-label': ariaLabel,
-      ...props
+      ...rest
     },
     ref,
-  ) => (
-    <StyledTextField
-      ref={ref}
-      variant={muiVariantFor(variant)}
-      customVariant={variant}
-      floating={floating}
-      glow={glow}
-      pulse={pulse}
-      loading={loading}
-      label={label}
-      error={error}
-      helperText={helperText}
-      fullWidth={fullWidth}
-      {...interactionProps(loading, onClick, props.disabled)}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      /*
-       * `aria-label` has to ride `inputProps` to reach the `<input>` (FUT-755).
-       * Spread with the rest it lands on the FormControl DIV that the text
-       * field renders as its root, which carries no role — so the field kept
-       * no accessible name, and a source grep saying "this input is labelled"
-       * disagreed with the DOM. The reports search box and the block-title
-       * inputs were both named in source and anonymous to a screen reader.
-       */
-      inputProps={{
-        'data-testid': dataTestId,
-        ...(ariaLabel === undefined ? {} : { 'aria-label': ariaLabel }),
-      }}
-      InputProps={{
-        startAdornment: startAdornment && (
-          <InputAdornment position="start">{startAdornment}</InputAdornment>
-        ),
-        endAdornment: <EndAdornment loading={loading} endAdornment={endAdornment} />,
-      }}
-      {...SIZE_MAP[size]}
-      {...props}
-    />
-  ),
+  ) => {
+    const { testId: dataTestId, rest: props } = splitTestId(rest);
+    return (
+      <StyledTextField
+        ref={ref}
+        variant={muiVariantFor(variant)}
+        customVariant={variant}
+        floating={floating}
+        glow={glow}
+        pulse={pulse}
+        loading={loading}
+        label={label}
+        error={error}
+        helperText={helperText}
+        fullWidth={fullWidth}
+        {...interactionProps(loading, onClick, props.disabled)}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        /*
+         * `aria-label` has to ride `inputProps` to reach the `<input>` (FUT-755).
+         * Spread with the rest it lands on the FormControl DIV that the text
+         * field renders as its root, which carries no role — so the field kept
+         * no accessible name, and a source grep saying "this input is labelled"
+         * disagreed with the DOM. The reports search box and the block-title
+         * inputs were both named in source and anonymous to a screen reader.
+         */
+        inputProps={{
+          'data-testid': dataTestId,
+          ...(ariaLabel === undefined ? {} : { 'aria-label': ariaLabel }),
+        }}
+        InputProps={{
+          startAdornment: startAdornment && (
+            <InputAdornment position="start">{startAdornment}</InputAdornment>
+          ),
+          endAdornment: <EndAdornment loading={loading} endAdornment={endAdornment} />,
+        }}
+        {...SIZE_MAP[size]}
+        {...props}
+      />
+    );
+  },
 );
 
 Input.displayName = 'Input';

package/src/components/form/Input/Input.types.native.ts

@@ -0,0 +1,29 @@
+import type {
+  GestureResponderEvent,
+  StyleProp,
+  TextInputProps as RNTextInputProps,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
+
+import type { InputBaseProps } from './Input.base';
+
+export type { InputBaseProps, InputSize, InputVariant } from './Input.base';
+
+/**
+ * The native `Input`: the shared contract, plus a react-native `TextInput`'s
+ * own props — `value`, `onChangeText`, `keyboardType`, `selection` and the
+ * rest — where the contract does not already name them.
+ *
+ * `onClick` keeps its web name so a shared screen does not have to know which
+ * renderer it is on, and `onPress` is accepted too; both fire when the field is
+ * pressed. `style` reaches the box the border is drawn on, which is what `sx`
+ * dresses on the web; `inputStyle` reaches the `TextInput` inside it.
+ */
+export type InputProps = InputBaseProps &
+  Omit<RNTextInputProps, keyof InputBaseProps | 'style'> & {
+    onClick?: (event: GestureResponderEvent) => void;
+    onPress?: (event: GestureResponderEvent) => void;
+    style?: StyleProp<ViewStyle>;
+    inputStyle?: StyleProp<TextStyle>;
+  };

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

@@ -1,24 +1,22 @@
-import type { SizeValue } from '../../../tokens/scales';
 import type { InputLabelProps as MuiInputLabelProps } from '@mui/material/InputLabel/index.js';
-import type { InputHTMLAttributes, ReactNode } from 'react';
+import type { InputHTMLAttributes } from 'react';
 import type React from 'react';
 
-export type InputVariant = 'outlined' | 'filled' | 'glass' | 'underline' | 'gradient';
-export type InputSize = SizeValue;
+import type { InputBaseProps } from './Input.base';
 
-export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'color'> {
-  variant?: InputVariant;
-  size?: InputSize;
-  label?: string;
-  error?: boolean;
-  helperText?: string;
-  startAdornment?: ReactNode;
-  endAdornment?: ReactNode;
-  fullWidth?: boolean;
-  floating?: boolean;
-  glow?: boolean;
-  pulse?: boolean;
-  loading?: boolean;
+export type { InputBaseProps, InputSize, InputVariant } from './Input.base';
+
+/**
+ * The web `Input`: the shared contract, plus everything an `<input>` accepts
+ * that the contract does not already name.
+ *
+ * `value`, `defaultValue` and `onChange` keep the DOM's own types — they are
+ * not in the base, because a web `value` is `string | number | readonly
+ * string[]` and a React Native one is a `string`.
+ */
+export interface InputProps
+  extends InputBaseProps,
+    Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'color' | keyof InputBaseProps> {
   onClick?: React.MouseEventHandler<HTMLInputElement>;
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
   onBlur?: React.FocusEventHandler<HTMLInputElement>;

package/src/components/form/Input/NATIVE-NOTES.md

@@ -0,0 +1,14 @@
+# Input on React Native
+
+Known rendering gaps, one bullet each; `pnpm native:ledger` reads them.
+
+- The label sits ABOVE the field at its shrunk size (12px, aligned with the value's own left inset) instead of floating into a notch in the border: React Native can neither cut a notch in a border nor animate a label into one, so `floating` has nothing left to move.
+- `filled` keeps MUI's lopsided `25px 12px 8px` inset, which on the web is where the floating label sits inside the box — so a native filled field reads low in its box, with the label above it.
+- `glass` paints its 0.1 paper wash and hairline without the 20px backdrop blur (React Native has no backdrop filter), and draws ONE border where the web draws two — its own on the field root, plus the outlined fieldset's underneath.
+- `gradient` paints the first stop of its 135° fill flat and gives the 2px ring the gradient's first hue: React Native core has no gradient fill and no masked pseudo-element border.
+- Hover has no touch equivalent, so the web's hover border, its brighter glass wash and its deeper filled wash are not drawn; focus is, and it carries the same colours.
+- `pulse` grows by scaling the bar rather than spreading a box-shadow, which React Native does not have; `glow` is a shadow on iOS and an elevation on Android, so its halo is not symmetrical there.
+- `onClick` fires from the DOM click under react-native-web and from `onPressIn` on a device — react-native-web forwards only the first and React Native only the second, so exactly one runs and never both.
+- Enter keeps focus (`blurOnSubmit={false}`), as it does in a web `<input>`; React Native's own default for a single-line field is to dismiss the keyboard, and a caller wanting that passes its own.
+- An HTML `type` React Native has no keyboard for (`date`, `time`, `file`, `color`) renders a plain text field; `text`, `search`, `email`, `tel`, `url` and `number` pick the keyboard and `password` sets secure entry.
+- The value, label and helper text are set in MUI's own numbers (`body1` at 16px on a 23px line, the 0.75 shrunk label, `caption` at 12px); a host that re-themes MUI's typography variants moves the web only.

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

@@ -0,0 +1,2 @@
+export { Input } from './Input.native';
+export type { InputBaseProps, InputProps, InputSize, InputVariant } from './Input.types.native';

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

@@ -1,2 +1,2 @@
 export { Input } from './Input';
-export type { InputProps, InputSize,InputVariant } from './Input.types';
+export type { InputBaseProps, InputProps, InputSize, InputVariant } from './Input.types';