@12-apps/ui 6.20.0 → 6.22.0

package/src/components/form/Select/Select.tsx

@@ -6,8 +6,17 @@ import MuiSelect from '@mui/material/Select/index.js';
 import { alpha, type CSSObject, keyframes, styled, type Theme } from '@mui/material/styles/index.js';
 import React from 'react';
 
+import {
+  SELECT_BORDER,
+  SELECT_GLASS,
+  SELECT_GLOW,
+  SELECT_GRADIENT,
+  SELECT_PULSE,
+  selectInputSize,
+} from './Select.metrics';
 import type { SelectProps } from './Select.types';
 
+import { splitTestId } from '../../../platform/test-id';
 import { fieldEdge } from '../../../tokens/field-edge';
 
 // Define pulse animation
@@ -17,7 +26,7 @@ const pulseAnimation = keyframes`
     opacity: 1;
   }
   70% {
-    box-shadow: 0 0 0 10px currentColor;
+    box-shadow: 0 0 0 ${SELECT_PULSE.spread}px currentColor;
     opacity: 0;
   }
   100% {
@@ -29,9 +38,9 @@ const pulseAnimation = keyframes`
 /** Glow ring on the outlined input, keyed off the `glow` prop. */
 const glowStyles = (theme: Theme): CSSObject => ({
   '& .MuiOutlinedInput-root': {
-    boxShadow: `0 0 15px ${alpha(theme.palette.primary.main, 0.3)}`,
+    boxShadow: `0 0 ${SELECT_GLOW.rest.blur}px ${alpha(theme.palette.primary.main, SELECT_GLOW.rest.alpha)}`,
     '&.Mui-focused': {
-      boxShadow: `0 0 20px ${alpha(theme.palette.primary.main, 0.5)}`,
+      boxShadow: `0 0 ${SELECT_GLOW.focused.blur}px ${alpha(theme.palette.primary.main, SELECT_GLOW.focused.alpha)}`,
     },
   },
 });
@@ -44,12 +53,12 @@ const pulseStyles = (theme: Theme): CSSObject => ({
     top: '50%',
     left: '0',
     right: '0',
-    height: '56px',
+    height: `${SELECT_PULSE.height}px`,
     transform: 'translateY(-50%)',
-    borderRadius: theme.spacing(0.5),
+    borderRadius: theme.spacing(SELECT_PULSE.radiusUnits),
     backgroundColor: theme.palette.primary.main,
-    opacity: 0.3,
-    animation: `${pulseAnimation} 2s infinite`,
+    opacity: SELECT_PULSE.opacity,
+    animation: `${pulseAnimation} ${SELECT_PULSE.ms / 1000}s infinite`,
     pointerEvents: 'none',
     zIndex: -1,
   },
@@ -57,25 +66,28 @@ const pulseStyles = (theme: Theme): CSSObject => ({
 
 /** `glass` variant: translucent, blurred background. */
 const glassVariant = (theme: Theme): CSSObject => ({
-  backgroundColor: alpha(theme.palette.background.paper, 0.1),
-  backdropFilter: 'blur(20px)',
-  border: `1px solid ${fieldEdge(theme)}`,
+  backgroundColor: alpha(theme.palette.background.paper, SELECT_GLASS.background.rest),
+  backdropFilter: `blur(${SELECT_GLASS.blur}px)`,
+  border: `${SELECT_BORDER.rest}px solid ${fieldEdge(theme)}`,
   '& fieldset': { border: 'none' },
   '&:hover': {
-    backgroundColor: alpha(theme.palette.background.paper, 0.15),
-    borderColor: alpha(theme.palette.primary.main, 0.3),
+    backgroundColor: alpha(theme.palette.background.paper, SELECT_GLASS.background.hover),
+    borderColor: alpha(theme.palette.primary.main, SELECT_GLASS.hoverBorderAlpha),
   },
   '&.Mui-focused': {
-    backgroundColor: alpha(theme.palette.background.paper, 0.2),
+    backgroundColor: alpha(theme.palette.background.paper, SELECT_GLASS.background.focused),
     borderColor: theme.palette.primary.main,
-    boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.1)}`,
+    boxShadow: `0 0 0 ${SELECT_GLASS.focusRing.width}px ${alpha(theme.palette.primary.main, SELECT_GLASS.focusRing.alpha)}`,
   },
 });
 
 /** `gradient` variant: gradient fill with a masked gradient border. */
+const gradientFill = (theme: Theme, strength: number): string =>
+  `linear-gradient(${SELECT_GRADIENT.angleDeg}deg, ${alpha(theme.palette.primary.main, strength)}, ${alpha(theme.palette.secondary.main, strength)})`;
+
 const gradientVariant = (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, SELECT_GRADIENT.fill.rest),
+  border: `${SELECT_GRADIENT.borderWidth}px solid transparent`,
   backgroundOrigin: 'border-box',
   backgroundClip: 'padding-box, border-box',
   position: 'relative',
@@ -88,19 +100,19 @@ const gradientVariant = (theme: Theme): CSSObject => ({
     right: 0,
     bottom: 0,
     borderRadius: 'inherit',
-    background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
+    background: `linear-gradient(${SELECT_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: `${SELECT_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, SELECT_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, SELECT_GRADIENT.fill.focused),
     '&::before': {
-      background: `linear-gradient(135deg, ${theme.palette.primary.dark}, ${theme.palette.secondary.dark})`,
+      background: `linear-gradient(${SELECT_GRADIENT.angleDeg}deg, ${theme.palette.primary.dark}, ${theme.palette.secondary.dark})`,
     },
   },
 });
@@ -109,7 +121,7 @@ const gradientVariant = (theme: Theme): CSSObject => ({
 const defaultVariant = (theme: Theme): CSSObject => ({
   '& fieldset': { borderColor: fieldEdge(theme) },
   '&:hover fieldset': { borderColor: theme.palette.primary.main },
-  '&.Mui-focused fieldset': { borderColor: theme.palette.primary.main, borderWidth: 2 },
+  '&.Mui-focused fieldset': { borderColor: theme.palette.primary.main, borderWidth: SELECT_BORDER.focused },
   '&.Mui-error fieldset': { borderColor: theme.palette.error.main },
 });
 
@@ -177,7 +189,7 @@ function renderMenuItems(
  */
 const formControlSize = (size: SelectProps['size']): 'small' | 'medium' | undefined => {
   if (size === undefined) return undefined;
-  return size === 'sm' ? 'small' : 'medium';
+  return selectInputSize(size) === 'sm' ? 'small' : 'medium';
 };
 
 export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
@@ -196,13 +208,13 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
       placeholder,
       glow,
       pulse,
-      'data-testid': dataTestId,
       value,
       'aria-label': ariaLabel,
-      ...props
+      ...rest
     },
     ref,
   ) => {
+    const { testId: dataTestId, rest: props } = splitTestId(rest);
     const labelId = React.useId();
     const helperTextId = React.useId();
     const selectId = React.useId();

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

@@ -0,0 +1,30 @@
+import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
+
+import type { SelectBaseProps, SelectOption, SelectValue } from './Select.base';
+
+export type { SelectBaseProps, SelectOption, SelectValue, SelectVariant } from './Select.base';
+
+/**
+ * The change a native `Select` reports.
+ *
+ * Shaped as `{ target: { value } }` on purpose: that is what MUI's
+ * `SelectChangeEvent` gives the 40-odd `onChange={(e) => set(e.target.value)}`
+ * handlers in the origin apps, and a screen shared between the renderers
+ * should not have to read the value out of two different places. The chosen
+ * option arrives as the second argument, where MUI passes the menu item.
+ */
+export interface SelectChangeEvent {
+  target: { value: SelectValue; name?: string };
+}
+
+/** The native `Select`: the shared contract, plus a `View`'s own props. */
+export type SelectProps = SelectBaseProps &
+  Omit<ViewProps, keyof SelectBaseProps | 'style'> & {
+    value?: SelectValue;
+    defaultValue?: SelectValue;
+    onChange?: (event: SelectChangeEvent, option: SelectOption) => void;
+    /** Fired when the option list opens and closes, as MUI's `Select` does. */
+    onOpen?: () => void;
+    onClose?: () => void;
+    style?: StyleProp<ViewStyle>;
+  };

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

@@ -1,58 +1,21 @@
-import type { SizeValue } from '../../../tokens/scales';
 import type { SelectProps as MuiSelectProps } from '@mui/material/Select/index.js';
 
-export type SelectVariant = 'default' | 'glass' | 'gradient';
+import type { SelectBaseProps } from './Select.base';
 
-export interface SelectOption {
-  value: string | number;
-  label: string;
-  disabled?: boolean;
-}
+export type { SelectBaseProps, SelectOption, SelectValue, SelectVariant } from './Select.base';
 
-// `size` is omitted alongside `variant`: MUI declares it in its own words
-// (`small | medium`), and this component speaks the house scale.
-export interface SelectProps extends Omit<MuiSelectProps, 'variant' | 'size'> {
-  /**
-   * Visual variant of the select component
-   * @default 'default'
-   */
-  variant?: SelectVariant;
-  /**
-   * Array of options to display in the select
-   */
-  options: SelectOption[];
-  /**
-   * Label for the select field
-   */
-  label?: string;
-  /**
-   * Helper text to display below the select
-   */
-  helperText?: string;
-  /**
-   * Whether the select should take full width
-   * @default true
-   */
-  fullWidth?: boolean;
-  /**
-   * Size of the select component
-   * @default 'medium'
-   */
-  size?: SizeValue;
-  /**
-   * Placeholder text when no option is selected
-   */
-  placeholder?: string;
-  /**
-   * Whether to show a glow effect
-   * @default false
-   */
-  glow?: boolean;
-  /**
-   * Whether to show a pulse animation
-   * @default false
-   */
-  pulse?: boolean;
+/**
+ * The web `Select`: the shared contract, plus everything MUI's `Select`
+ * accepts that the contract does not already name — `value`, `onChange`,
+ * `MenuProps`, `renderValue`.
+ *
+ * `variant` and `size` are omitted from MUI's half alongside the rest of the
+ * contract: MUI declares both in its own words (`small | medium`), and this
+ * component speaks the house scale.
+ */
+export interface SelectProps
+  extends SelectBaseProps,
+    Omit<MuiSelectProps, 'variant' | 'size' | keyof SelectBaseProps> {
   /**
    * Test ID for testing purposes
    */

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

@@ -0,0 +1,9 @@
+export { Select } from './Select.native';
+export type {
+  SelectBaseProps,
+  SelectChangeEvent,
+  SelectOption,
+  SelectProps,
+  SelectValue,
+  SelectVariant,
+} from './Select.types.native';

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

@@ -1,2 +1,8 @@
 export { Select } from './Select';
-export type { SelectOption, SelectProps, SelectVariant } from './Select.types';
+export type {
+  SelectBaseProps,
+  SelectOption,
+  SelectProps,
+  SelectValue,
+  SelectVariant,
+} from './Select.types';

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

@@ -0,0 +1,12 @@
+# Switch on React Native
+
+Known rendering gaps, one bullet each; `pnpm native:ledger` reads them.
+
+- The control is drawn here rather than handed to React Native's own `Switch`, which is the platform control at the platform's size: no size scale, no track geometry, no thumb radius per look, no room for an icon or a word inside the track. What that costs is the platform's own switch on a device — this one is a pressable carrying `role="checkbox"` and `aria-checked`, which is what the web's hidden `<input type="checkbox">` announces, but a `role="switch"` would announce better where nothing needs `getByRole('checkbox')` to find it.
+- Hover has no touch equivalent, so the thumb does not lift or take its halo, and `ripple` — a wash that expands from the thumb under the pointer on the web — is not drawn at all.
+- `glow` paints its halo and inner wash as a static shadow rather than breathing every two seconds, and `gradient` paints the gradient's first stop flat (`light` checked, `alpha(light, 0.3)` at rest): React Native core has no gradient fill, no keyframes on a shadow and no shimmer sweep.
+- `glass` washes the track and the thumb at MUI's alphas without the 20px and 10px backdrop blurs — React Native has no backdrop filter.
+- `loading` turns the platform's `ActivityIndicator` inside the thumb at MUI's 0.6 of the thumb's size, where the web draws its own 2px ring with one transparent quarter.
+- An `onIcon` or `offIcon` is rendered as given, centred in its box. The web sets `color` and `fontSize` on the wrapper and an MUI glyph inherits both; React Native has no inheritance, so pass an `<Icon size color>` that is already the size and colour you want.
+- The keyboard reaches the control only through react-native-web: `Enter` presses it (react-native-web's `Pressable` answers it), the space bar toggles it through a DOM key handler, and neither exists on a device.
+- `checked`, the label, the description and the helper text are set in MUI's own numbers (`body2` at 14px, `caption` at 12px, the 300ms `cubic-bezier(0.4, 0, 0.2, 1)`); a host that re-themes MUI's typography or its elevations moves the web only.

package/src/components/form/Switch/Switch.base.ts

@@ -0,0 +1,136 @@
+import type { ReactNode } from 'react';
+
+import type { ColorValue, SizeValue } from '../../../tokens/vocabulary';
+
+/**
+ * THE CONTRACT BOTH RENDERERS HONOUR — and nothing else.
+ *
+ * No MUI and no react-native here: this file is in BOTH declaration outputs,
+ * and a native consumer has no `@mui/material` to resolve a type import
+ * against. See `Button.base.ts`.
+ */
+export type SwitchVariant = 'default' | 'ios' | 'android' | 'label' | 'material';
+export type SwitchLabelPosition = 'start' | 'end' | 'top' | 'bottom';
+
+/**
+ * The contract both renderers honour.
+ *
+ * `checked`, `defaultChecked` and `onChange` are NOT here: MUI types the
+ * change as a DOM `ChangeEvent` and the native side synthesises the
+ * `{ target: { checked } }` shape those handlers already read.
+ */
+export interface SwitchBaseProps {
+  /**
+   * The variant of the switch
+   */
+  variant?: SwitchVariant;
+
+  /**
+   * The color theme of the switch
+   */
+  color?: ColorValue;
+
+  /**
+   * The size of the switch
+   */
+  size?: SizeValue;
+
+  /**
+   * Label text for the switch
+   */
+  label?: string;
+
+  /**
+   * Description text below the label
+   */
+  description?: string;
+
+  /**
+   * Whether the switch should have a glow effect
+   */
+  glow?: boolean;
+
+  /**
+   * Whether the switch should have glass morphism effect
+   */
+  glass?: boolean;
+
+  /**
+   * Whether the switch should have gradient effects
+   */
+  gradient?: boolean;
+
+  /**
+   * Position of the label relative to the switch
+   */
+  labelPosition?: SwitchLabelPosition;
+
+  /**
+   * Icon to show when switch is on
+   */
+  onIcon?: ReactNode;
+
+  /**
+   * Icon to show when switch is off
+   */
+  offIcon?: ReactNode;
+
+  /**
+   * Text to show when switch is on
+   */
+  onText?: string;
+
+  /**
+   * Text to show when switch is off
+   */
+  offText?: string;
+
+  /**
+   * Whether the switch has an error state
+   */
+  error?: boolean;
+
+  /**
+   * Help text to display
+   */
+  helperText?: string;
+
+  /**
+   * Custom width for the switch track
+   */
+  trackWidth?: number;
+
+  /**
+   * Custom height for the switch track
+   */
+  trackHeight?: number;
+
+  /**
+   * Whether to enable animations
+   */
+  animated?: boolean;
+
+  /**
+   * Whether the switch is in loading state
+   */
+  loading?: boolean;
+
+  /**
+   * Whether to show ripple effect
+   */
+  ripple?: boolean;
+
+  /**
+   * Whether the switch should have pulse animation
+   */
+  pulse?: boolean;
+
+  disabled?: boolean;
+
+  testID?: string;
+
+  /**
+   * Custom test ID for testing
+   */
+  dataTestId?: string;
+}

package/src/components/form/Switch/Switch.helpers.ts

@@ -0,0 +1,61 @@
+import type { SwitchBaseProps } from './Switch.base';
+import { withDefaults } from '../../../utils/withDefaults';
+
+type SwitchDefaultedKeys =
+  | 'variant'
+  | 'color'
+  | 'size'
+  | 'glow'
+  | 'glass'
+  | 'gradient'
+  | 'labelPosition'
+  | 'error'
+  | 'animated'
+  | 'loading'
+  | 'ripple'
+  | 'pulse'
+  | 'disabled';
+
+export type ResolvedSwitchProps<P extends SwitchBaseProps = SwitchBaseProps> = P &
+  Required<Pick<SwitchBaseProps, SwitchDefaultedKeys>>;
+
+/** `Switch.tsx`'s own `DEFAULTS`, plus the `disabled` MUI would have defaulted. */
+const SWITCH_DEFAULTS: Required<Pick<SwitchBaseProps, SwitchDefaultedKeys>> = {
+  variant: 'default',
+  color: 'primary',
+  size: 'md',
+  glow: false,
+  glass: false,
+  gradient: false,
+  labelPosition: 'end',
+  error: false,
+  animated: true,
+  loading: false,
+  ripple: false,
+  pulse: false,
+  disabled: false,
+};
+
+export const resolveSwitchProps = <P extends SwitchBaseProps>(props: P): ResolvedSwitchProps<P> =>
+  withDefaults(props, SWITCH_DEFAULTS as Partial<P>) as ResolvedSwitchProps<P>;
+
+/**
+ * Every prop the switch consumes itself.
+ *
+ * Listed so what is left over — `aria-label`, `aria-describedby`, an `id` — can
+ * be spread onto the control without the component's own props riding along.
+ * react-native-web would drop them and React Native ignore them, but a prop
+ * that reaches an element it means nothing to is a prop nobody can explain.
+ */
+export const SWITCH_BASE_KEYS = [
+  'variant', 'color', 'size', 'label', 'description', 'glow', 'glass', 'gradient',
+  'labelPosition', 'onIcon', 'offIcon', 'onText', 'offText', 'error', 'helperText',
+  'trackWidth', 'trackHeight', 'animated', 'loading', 'ripple', 'pulse', 'disabled',
+  'testID', 'dataTestId', 'data-testid',
+] as const satisfies ReadonlyArray<keyof SwitchBaseProps | 'data-testid'>;
+
+/** `props` without any of them, for spreading onto the control. */
+export function withoutSwitchProps(props: object): Record<string, unknown> {
+  const own = new Set<string>(SWITCH_BASE_KEYS);
+  return Object.fromEntries(Object.entries(props).filter(([key]) => !own.has(key)));
+}

package/src/components/form/Switch/Switch.look.native.ts

@@ -0,0 +1,187 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+
+import type { SwitchBaseProps } from './Switch.base';
+import {
+  DISABLED,
+  IOS_THUMB_SHADOW,
+  MUI_SHADOWS,
+  NEUTRAL_CONTRAST,
+  NEUTRAL_FALLBACK,
+  NEUTRAL_GREY,
+  SWITCH_BLACK,
+  SWITCH_DESCRIPTION,
+  SWITCH_GLASS,
+  SWITCH_GLOW,
+  SWITCH_GRADIENT,
+  SWITCH_HELPER,
+  SWITCH_LABEL,
+  THUMB_ELEVATION,
+  TRACK_RADIUS,
+  thumbRadius,
+  trackColor,
+  type SwitchGeometry,
+  type SwitchLook,
+} from './Switch.metrics';
+import { alpha } from '../../../tokens/color';
+import type { UiTheme } from '../../../tokens/theme';
+import type { ColorValue } from '../../../tokens/vocabulary';
+
+/**
+ * WHAT A NATIVE `Switch` PAINTS.
+ *
+ * The web hands MUI's `Switch` a style object and MUI draws the track and the
+ * thumb; React Native has no such control at this size, so the native half
+ * draws both itself — from this file, off the same table.
+ */
+export interface SwitchPalette {
+  main: string;
+  dark: string;
+  light: string;
+  contrastText: string;
+}
+
+export interface SwitchState {
+  checked: boolean;
+  disabled: boolean;
+}
+
+/** The web's `getColorFromTheme`: `danger` is the error palette, `neutral` three greys. */
+export function switchPalette(theme: UiTheme, color: ColorValue): SwitchPalette {
+  if (color === 'neutral') {
+    return {
+      main: theme.palette.grey[NEUTRAL_GREY.main] || NEUTRAL_FALLBACK.main,
+      dark: theme.palette.grey[NEUTRAL_GREY.dark] || NEUTRAL_FALLBACK.dark,
+      light: theme.palette.grey[NEUTRAL_GREY.light] || NEUTRAL_FALLBACK.light,
+      contrastText: NEUTRAL_CONTRAST,
+    };
+  }
+  const palette = theme.palette[color];
+  return {
+    main: palette.main,
+    dark: palette.dark,
+    light: palette.light,
+    contrastText: palette.contrastText || NEUTRAL_CONTRAST,
+  };
+}
+
+/** Which of the switch's own flags change how it paints. */
+export type SwitchFlagKeys = 'glow' | 'glass' | 'gradient' | 'loading' | 'pulse';
+export type SwitchPaint = Pick<SwitchBaseProps, SwitchFlagKeys>;
+
+/**
+ * The bar behind the thumb.
+ *
+ * `gradient` paints the gradient's FIRST stop flat — React Native core has no
+ * gradient fill — and `glass` its paper wash without the blur.
+ */
+export function trackStyle(
+  theme: UiTheme,
+  paint: SwitchPaint,
+  palette: SwitchPalette,
+  geometry: SwitchGeometry,
+  look: SwitchLook,
+  state: SwitchState,
+): ViewStyle {
+  const base: ViewStyle = {
+    ...StyleSheetAbsoluteFill,
+    borderRadius: TRACK_RADIUS[look](geometry.height),
+    backgroundColor: state.checked
+      ? palette.main
+      : trackColor({ black: SWITCH_BLACK, disabled: theme.palette.action.disabled }, look),
+    opacity: disabledTrackOpacity(state),
+  };
+
+  if (paint.glass) {
+    return {
+      ...base,
+      backgroundColor: alpha(theme.palette.background.paper, SWITCH_GLASS.trackAlpha),
+      borderWidth: 1,
+      borderColor: alpha(theme.palette.divider, SWITCH_GLASS.borderAlpha),
+    };
+  }
+  if (paint.gradient) {
+    return { ...base, backgroundColor: gradientFirstStop(palette, state.checked) };
+  }
+  if (paint.glow && state.checked) {
+    return {
+      ...base,
+      boxShadow: `0 0 ${SWITCH_GLOW.blur}px ${alpha(palette.main, SWITCH_GLOW.alpha)}, inset 0 0 ${SWITCH_GLOW.insetBlur}px ${alpha(palette.main, SWITCH_GLOW.insetAlpha)}`,
+    };
+  }
+  return base;
+}
+
+/** The web's two gradients, at the stop a flat fill can show. */
+function gradientFirstStop(palette: SwitchPalette, checked: boolean): string {
+  if (checked) return palette.light || palette.main;
+  return alpha(palette.light || palette.main, SWITCH_GRADIENT.resting.lightAlpha);
+}
+
+const disabledTrackOpacity = (state: SwitchState): number => {
+  if (!state.disabled) return 1;
+  return state.checked ? DISABLED.checkedTrackOpacity : DISABLED.trackOpacity;
+};
+
+/** React Native has no `StyleSheet.absoluteFillObject` constant worth importing for four keys. */
+const StyleSheetAbsoluteFill = { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 } as const;
+
+/** The knob: white, round for iOS and the default, squarer for Android and Material. */
+export function thumbStyle(
+  theme: UiTheme,
+  paint: SwitchPaint,
+  geometry: SwitchGeometry,
+  look: SwitchLook,
+  state: SwitchState,
+): ViewStyle {
+  const base: ViewStyle = {
+    position: 'absolute',
+    width: geometry.thumbSize,
+    height: geometry.thumbSize,
+    borderRadius: thumbRadius(look, geometry.thumbSize),
+    backgroundColor: state.disabled ? theme.palette.grey[DISABLED.thumbGrey] : '#fff',
+    boxShadow: look === 'ios' ? IOS_THUMB_SHADOW : (MUI_SHADOWS[THUMB_ELEVATION[look]] ?? 'none'),
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+
+  if (!paint.glass) return base;
+  return {
+    ...base,
+    backgroundColor: alpha(theme.palette.background.paper, SWITCH_GLASS.thumbAlpha),
+    borderWidth: 1,
+    borderColor: alpha(theme.palette.divider, SWITCH_GLASS.borderAlpha),
+  };
+}
+
+/** MUI's `body2` at 500, in the error hue when the row is in error. */
+export function labelTextStyle(theme: UiTheme, error: boolean): TextStyle {
+  return {
+    color: error ? theme.palette.danger.main : theme.palette.text.primary,
+    fontFamily: theme.typography.fontFamily,
+    fontSize: SWITCH_LABEL.fontSize,
+    lineHeight: SWITCH_LABEL.fontSize * SWITCH_LABEL.lineHeight,
+    fontWeight: String(SWITCH_LABEL.fontWeight) as TextStyle['fontWeight'],
+  };
+}
+
+/** MUI's `caption`, 4px under the label. */
+export function descriptionTextStyle(theme: UiTheme, error: boolean): TextStyle {
+  return {
+    color: error ? theme.palette.danger.main : theme.palette.text.secondary,
+    fontFamily: theme.typography.fontFamily,
+    fontSize: SWITCH_DESCRIPTION.fontSize,
+    lineHeight: SWITCH_DESCRIPTION.fontSize * SWITCH_DESCRIPTION.lineHeight,
+    marginTop: theme.spacing(SWITCH_DESCRIPTION.marginTopUnits),
+  };
+}
+
+/** `FormHelperText`, 8px under the whole control. */
+export function helperTextStyle(theme: UiTheme, error: boolean): TextStyle {
+  return {
+    color: error ? theme.palette.danger.main : theme.palette.text.secondary,
+    fontFamily: theme.typography.fontFamily,
+    fontSize: SWITCH_HELPER.fontSize,
+    lineHeight: SWITCH_HELPER.fontSize * SWITCH_HELPER.lineHeight,
+    marginTop: theme.spacing(SWITCH_HELPER.marginTopUnits),
+  };
+}