@12-apps/ui 6.33.1 → 6.34.0

package/dist/native/form/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/form/Checkbox/Checkbox.native.tsx","../../../src/components/form/Checkbox/Checkbox.helpers.ts","../../../src/components/form/Checkbox/Checkbox.metrics.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  ActivityIndicator,\n  Platform,\n  Pressable,\n  StyleSheet,\n  Text as RNText,\n  View,\n  type GestureResponderEvent,\n  type TextStyle,\n  type ViewStyle,\n} from 'react-native';\n\nimport { makeTestId, resolveCheckboxProps } from './Checkbox.helpers';\nimport {\n  CHECKBOX_GLOW,\n  CHECKBOX_GLYPH,\n  CHECKBOX_HELPER,\n  CHECKBOX_LABEL,\n  CHECKBOX_PADDING,\n  CHECKBOX_SPINNER,\n  CHECKBOX_VARIANT,\n  effectInk,\n  glyphSize,\n} from './Checkbox.metrics';\nimport type { CheckboxProps } from './Checkbox.types.native';\nimport { Icon } from '../../../icons/Icon.native';\nimport type { IconName } from '../../../icons/Icon.types';\nimport { webKeyDown } from '../../../platform/aria';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { alpha } from '../../../tokens/color';\nimport type { UiTheme } from '../../../tokens/theme';\n\n/** Which of MUI's three glyphs the box is in right now. */\nfunction glyphFor(checked: boolean, indeterminate: boolean): IconName {\n  if (indeterminate) return CHECKBOX_GLYPH.indeterminate;\n  return checked ? CHECKBOX_GLYPH.checked : CHECKBOX_GLYPH.unchecked;\n}\n\n/**\n * The ink the box is drawn in.\n *\n * MUI's own rule paints a checked box in `palette[color].main`, but\n * `Checkbox.tsx` overrides `.Mui-checked` with `primary.main` and wins on\n * source order — so every colour checks blue on the web, and here too.\n */\nfunction glyphInk(theme: UiTheme, checked: boolean, indeterminate: boolean, disabled: boolean): string {\n  if (disabled) return theme.palette.action.disabled;\n  if (checked || indeterminate) return theme.palette.primary.main;\n  return theme.palette.text.secondary;\n}\n\n/** `glow` as a shadow; the web breathes it between two blurs, which needs keyframes. */\nfunction glowStyle(): ViewStyle {\n  return Platform.select<ViewStyle>({\n    android: { elevation: CHECKBOX_GLOW.blur.to / 2 },\n    default: {\n      shadowColor: effectInk(1),\n      shadowOpacity: CHECKBOX_GLOW.alpha.from,\n      shadowRadius: CHECKBOX_GLOW.blur.from,\n      shadowOffset: { width: 0, height: 0 },\n    },\n  });\n}\n\n/** The `rounded` and `toggle` variants' corner and scale, on the glyph's own box. */\nfunction variantStyle(variant: keyof typeof CHECKBOX_VARIANT, size: number): ViewStyle {\n  const treatment = CHECKBOX_VARIANT[variant];\n  if (treatment.radius === undefined) return {};\n  return {\n    overflow: 'hidden',\n    borderRadius: typeof treatment.radius === 'number' ? treatment.radius : size / 2,\n    ...(treatment.scale === undefined ? {} : { transform: [{ scale: treatment.scale }] }),\n  };\n}\n\ninterface BoxProps {\n  boxRef: React.ForwardedRef<View>;\n  testID: string;\n  checked: boolean;\n  indeterminate: boolean;\n  inactive: boolean;\n  loading: boolean;\n  glow: boolean;\n  ripple: boolean;\n  variant: keyof typeof CHECKBOX_VARIANT;\n  size: number;\n  label?: string;\n  onToggle: (event?: GestureResponderEvent) => void;\n  rest: Record<string, unknown>;\n}\n\n/** The box itself: MUI's glyph inside `SwitchBase`'s 9px of padding. */\nfunction CheckboxBox(props: BoxProps): React.JSX.Element {\n  const theme = useUiTheme();\n  const { checked, indeterminate, inactive, size, variant } = props;\n  const ink = glyphInk(theme, checked, indeterminate, inactive);\n\n  return (\n    <Pressable\n      ref={props.boxRef}\n      testID={props.testID}\n      role=\"checkbox\"\n      aria-checked={indeterminate ? 'mixed' : checked}\n      aria-disabled={inactive}\n      aria-label={props.label}\n      disabled={inactive}\n      onPress={props.onToggle}\n      android_ripple={\n        props.ripple && !inactive\n          ? { color: alpha(theme.palette.primary.main, 0.2), borderless: true }\n          : undefined\n      }\n      {...webKeyDown((event) => {\n        if (event.key === ' ' || event.key === 'Spacebar') props.onToggle();\n      })}\n      style={[styles.box, props.glow ? glowStyle() : null]}\n      {...props.rest}\n    >\n      <View style={variantStyle(variant, size)}>\n        <Icon name={glyphFor(checked, indeterminate)} size={size} color={ink} />\n      </View>\n      {props.loading ? (\n        <ActivityIndicator\n          style={styles.spinner}\n          size={CHECKBOX_SPINNER.size}\n          color={theme.palette.primary.main}\n          accessibilityLabel=\"loading\"\n        />\n      ) : null}\n    </Pressable>\n  );\n}\n\n/** MUI's `FormControlLabel` label, in `body2` and the error hue when it errs. */\nfunction labelStyle(theme: UiTheme, error: boolean): TextStyle {\n  return {\n    color: error ? theme.palette.danger.main : theme.palette.text.primary,\n    fontFamily: theme.typography.fontFamily,\n    fontSize: CHECKBOX_LABEL.fontSize,\n    marginLeft: CHECKBOX_LABEL.marginLeft,\n  };\n}\n\n/** `FormHelperText`, four spacing units in and half a unit down. */\nfunction helperStyle(theme: UiTheme, error: boolean): TextStyle {\n  return {\n    color: error ? theme.palette.danger.main : theme.palette.text.secondary,\n    fontFamily: theme.typography.fontFamily,\n    fontSize: CHECKBOX_HELPER.fontSize,\n    lineHeight: CHECKBOX_HELPER.fontSize * CHECKBOX_HELPER.lineHeight,\n    marginLeft: theme.spacing(CHECKBOX_HELPER.marginLeftUnits),\n    marginTop: theme.spacing(CHECKBOX_HELPER.marginTopUnits),\n  };\n}\n\n/**\n * The native `Checkbox`.\n *\n * The box is the glyph MUI's own `Checkbox` draws — `@12-apps/ui/icons`\n * generates its path from the same `@mui/icons-material` — inside\n * `SwitchBase`'s 9px of padding, under a pressable carrying `role=\"checkbox\"`\n * and `aria-checked`: the state the web's hidden `<input type=\"checkbox\">`\n * carries. See `NATIVE-NOTES.md`.\n */\nexport const Checkbox = React.forwardRef<View, CheckboxProps>((rawProps, ref) => {\n  const {\n    variant, label, error, helperText, loading, ripple, glow, pulse: _pulse,\n    indeterminate, disabled, size, checked, defaultChecked,\n    onChange, onClick, onPress, style, ...others\n  } = resolveCheckboxProps(rawProps);\n\n  const theme = useUiTheme();\n  // `Boolean()` rather than a destructuring default for each: every `= false`\n  // is a branch, and there are enough of them here to cost the size gate.\n  const [own, setOwn] = React.useState(Boolean(defaultChecked));\n  const current = checked ?? own;\n  const inactive = Boolean(disabled) || Boolean(loading);\n  const testId = makeTestId(resolveTestId(others));\n\n  const toggle = (event?: GestureResponderEvent): void => {\n    const next = !current;\n    setOwn(next);\n    onChange?.({ target: { checked: next } }, next);\n    if (event === undefined) return;\n    onClick?.(event);\n    onPress?.(event);\n  };\n\n  const box = (\n    <CheckboxBox\n      boxRef={ref}\n      testID={resolveTestId(others, 'checkbox') ?? 'checkbox'}\n      checked={current}\n      indeterminate={Boolean(indeterminate)}\n      inactive={inactive}\n      loading={Boolean(loading)}\n      glow={glow}\n      ripple={ripple}\n      variant={variant}\n      size={glyphSize(size)}\n      label={label}\n      onToggle={toggle}\n      rest={withoutTestIdProps(others) as Record<string, unknown>}\n    />\n  );\n\n  if (label === undefined) return box;\n\n  return (\n    <View testID={testId('container')} style={style}>\n      <View style={styles.row}>\n        {box}\n        <RNText style={labelStyle(theme, Boolean(error))}>{label}</RNText>\n      </View>\n      {helperText === undefined ? null : (\n        <RNText testID={testId('helper')} style={helperStyle(theme, Boolean(error))}>\n          {helperText}\n        </RNText>\n      )}\n    </View>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nconst styles = StyleSheet.create({\n  box: {\n    padding: CHECKBOX_PADDING,\n    alignItems: 'center',\n    justifyContent: 'center',\n    position: 'relative',\n  },\n  row: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  spinner: {\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    marginTop: CHECKBOX_SPINNER.offset,\n    marginLeft: CHECKBOX_SPINNER.offset,\n  },\n});\n","import type { CheckboxBaseProps } from './Checkbox.base';\nimport { withDefaults } from '../../../utils/withDefaults';\n\ntype CheckboxDefaultedKeys = 'variant' | 'ripple' | 'glow' | 'pulse';\n\n/**\n * Generic over the renderer's own props, as `resolveButtonProps` is: the web\n * and the native `Checkbox` pass different handler types through, and both come\n * back out untouched.\n */\nexport type ResolvedCheckboxProps<P extends CheckboxBaseProps = CheckboxBaseProps> = P &\n  Required<Pick<CheckboxBaseProps, CheckboxDefaultedKeys>>;\n\nconst CHECKBOX_DEFAULTS: Required<Pick<CheckboxBaseProps, CheckboxDefaultedKeys>> = {\n  variant: 'default',\n  ripple: true,\n  glow: false,\n  pulse: false,\n};\n\nexport const resolveCheckboxProps = <P extends CheckboxBaseProps>(props: P): ResolvedCheckboxProps<P> =>\n  withDefaults(props, CHECKBOX_DEFAULTS as Partial<P>) as ResolvedCheckboxProps<P>;\n\n/** `${dataTestId}-${suffix}`, or `checkbox-${suffix}` when the caller named nothing. */\nexport const makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `checkbox-${suffix}`;\n","import type { CheckboxVariant } from './Checkbox.base';\n\n/**\n * THE NUMBERS BOTH `Checkbox` RENDERERS DRAW WITH.\n *\n * `Checkbox.tsx` (web, emotion over MUI's `Checkbox`) and\n * `Checkbox.native.tsx` (React Native) read this one table. As with the other\n * fields, some of it is what the web writes itself — the two variants' corner\n * treatment, the glow and pulse keyframes, the helper text's inset — and some\n * is what MUI supplies underneath: `SwitchBase`'s 9px padding, `SvgIcon`'s\n * three sizes, and the ink a box is drawn in.\n */\n\n/** MUI's `SwitchBase`: 9px of padding around the glyph, at every size. */\nexport const CHECKBOX_PADDING = 9;\n\n/** `SvgIcon`'s own three steps. MUI passes the `size` prop straight to the glyph. */\nexport const CHECKBOX_GLYPH_SIZES = { small: 20, medium: 24, large: 35 } as const;\nexport type CheckboxSize = keyof typeof CHECKBOX_GLYPH_SIZES;\n\nexport const glyphSize = (size: CheckboxSize | undefined): number =>\n  CHECKBOX_GLYPH_SIZES[size ?? 'medium'] ?? CHECKBOX_GLYPH_SIZES.medium;\n\n/**\n * The three glyphs MUI draws, by state.\n *\n * `@12-apps/ui/icons` generates their paths from the same\n * `@mui/icons-material` package MUI's own `Checkbox` imports them from, so the\n * native box is the web box rather than a hand-drawn square.\n */\nexport const CHECKBOX_GLYPH = {\n  checked: 'CheckBox',\n  unchecked: 'CheckBoxOutlineBlank',\n  indeterminate: 'IndeterminateCheckBox',\n} as const;\n\n/**\n * The corner each variant gives the glyph's box.\n *\n * `rounded` is a circle and `toggle` a 12px radius at 1.2 scale — both applied\n * to the SVG's own box on the web, where they show only through what the box\n * clips. Native gives them the same radius and the same scale.\n */\nexport const CHECKBOX_VARIANT: Record<CheckboxVariant, { radius?: number | string; scale?: number }> = {\n  default: {},\n  rounded: { radius: '50%' },\n  toggle: { radius: 12, scale: 1.2 },\n};\n\n/** The wash a hovered box takes, and the 0.3s every state change runs over. */\nexport const CHECKBOX_HOVER_ALPHA = 0.1;\nexport const CHECKBOX_TRANSITION_MS = 300;\n\n/** `loading`: MUI's 20px `CircularProgress`, centred over the box. */\nexport const CHECKBOX_SPINNER = { size: 20, offset: -10 } as const;\n\n/**\n * `glow` and `pulse` are keyed to MUI's DEFAULT blue rather than the theme's\n * primary — the web writes the rgba out by hand — so both renderers do.\n */\nexport const CHECKBOX_EFFECT_INK = { r: 25, g: 118, b: 210 } as const;\nexport const CHECKBOX_GLOW = { blur: { from: 5, to: 20 }, alpha: { from: 0.5, to: 0.8 }, ms: 2000 } as const;\nexport const CHECKBOX_PULSE = { spread: 10, alpha: 0.7, ms: 2000 } as const;\n\n/** MUI's default blue at an alpha, as the web's keyframes spell it. */\nexport const effectInk = (alphaValue: number): string =>\n  `rgba(${CHECKBOX_EFFECT_INK.r}, ${CHECKBOX_EFFECT_INK.g}, ${CHECKBOX_EFFECT_INK.b}, ${alphaValue})`;\n\n/** `FormControlLabel`: flush left, its label at MUI's `body2` size. */\nexport const CHECKBOX_LABEL = { marginLeft: 0, fontSize: 14 } as const;\n\n/** `FormHelperText`: four spacing units in, half a unit down. */\nexport const CHECKBOX_HELPER = { marginLeftUnits: 4, marginTopUnits: 0.5, fontSize: 12, lineHeight: 1.66 } as const;\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/form/Checkbox/Checkbox.native.tsx","../../../src/components/form/Checkbox/Checkbox.helpers.ts","../../../src/components/form/Checkbox/Checkbox.metrics.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  ActivityIndicator,\n  Platform,\n  Pressable,\n  StyleSheet,\n  Text as RNText,\n  View,\n  type GestureResponderEvent,\n  type TextStyle,\n  type ViewStyle,\n} from 'react-native';\n\nimport { makeTestId, resolveCheckboxProps } from './Checkbox.helpers';\nimport {\n  CHECKBOX_GLOW,\n  CHECKBOX_GLYPH,\n  CHECKBOX_HELPER,\n  CHECKBOX_LABEL,\n  CHECKBOX_PADDING,\n  CHECKBOX_SPINNER,\n  CHECKBOX_VARIANT,\n  effectInk,\n  glyphSize,\n} from './Checkbox.metrics';\nimport type { CheckboxProps } from './Checkbox.types.native';\nimport { Icon } from '../../../icons/Icon.native';\nimport type { IconName } from '../../../icons/Icon.types';\nimport { webKeyDown } from '../../../platform/aria';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport { alpha } from '../../../tokens/color';\nimport type { UiTheme } from '../../../tokens/theme';\n\n/** Which of MUI's three glyphs the box is in right now. */\nfunction glyphFor(checked: boolean, indeterminate: boolean): IconName {\n  if (indeterminate) return CHECKBOX_GLYPH.indeterminate;\n  return checked ? CHECKBOX_GLYPH.checked : CHECKBOX_GLYPH.unchecked;\n}\n\n/**\n * The ink the box is drawn in.\n *\n * MUI's own rule paints a checked box in `palette[color].main`, but\n * `Checkbox.tsx` overrides `.Mui-checked` with `primary.main` and wins on\n * source order — so every colour checks blue on the web, and here too.\n */\nfunction glyphInk(theme: UiTheme, checked: boolean, indeterminate: boolean, disabled: boolean): string {\n  if (disabled) return theme.palette.action.disabled;\n  if (checked || indeterminate) return theme.palette.primary.main;\n  return theme.palette.text.secondary;\n}\n\n/** `glow` as a shadow; the web breathes it between two blurs, which needs keyframes. */\nfunction glowStyle(): ViewStyle {\n  return Platform.select<ViewStyle>({\n    android: { elevation: CHECKBOX_GLOW.blur.to / 2 },\n    default: {\n      shadowColor: effectInk(1),\n      shadowOpacity: CHECKBOX_GLOW.alpha.from,\n      shadowRadius: CHECKBOX_GLOW.blur.from,\n      shadowOffset: { width: 0, height: 0 },\n    },\n  });\n}\n\n/** The `rounded` and `toggle` variants' corner and scale, on the glyph's own box. */\nfunction variantStyle(variant: keyof typeof CHECKBOX_VARIANT, size: number): ViewStyle {\n  const treatment = CHECKBOX_VARIANT[variant];\n  if (treatment.radius === undefined) return {};\n  return {\n    overflow: 'hidden',\n    borderRadius: typeof treatment.radius === 'number' ? treatment.radius : size / 2,\n    ...(treatment.scale === undefined ? {} : { transform: [{ scale: treatment.scale }] }),\n  };\n}\n\ninterface BoxProps {\n  boxRef: React.ForwardedRef<View>;\n  testID: string;\n  checked: boolean;\n  indeterminate: boolean;\n  inactive: boolean;\n  loading: boolean;\n  glow: boolean;\n  ripple: boolean;\n  variant: keyof typeof CHECKBOX_VARIANT;\n  size: number;\n  label?: string;\n  onToggle: (event?: GestureResponderEvent) => void;\n  rest: Record<string, unknown>;\n}\n\n/** The box itself: MUI's glyph inside `SwitchBase`'s 9px of padding. */\nfunction CheckboxBox(props: BoxProps): React.JSX.Element {\n  const theme = useUiTheme();\n  const { checked, indeterminate, inactive, size, variant } = props;\n  const ink = glyphInk(theme, checked, indeterminate, inactive);\n\n  return (\n    <Pressable\n      ref={props.boxRef}\n      testID={props.testID}\n      role=\"checkbox\"\n      aria-checked={indeterminate ? 'mixed' : checked}\n      aria-disabled={inactive}\n      aria-label={props.label}\n      disabled={inactive}\n      onPress={props.onToggle}\n      android_ripple={\n        props.ripple && !inactive\n          ? { color: alpha(theme.palette.primary.main, 0.2), borderless: true }\n          : undefined\n      }\n      {...webKeyDown((event) => {\n        if (event.key === ' ' || event.key === 'Spacebar') props.onToggle();\n      })}\n      style={[styles.box, props.glow ? glowStyle() : null]}\n      {...props.rest}\n    >\n      <View style={variantStyle(variant, size)}>\n        <Icon name={glyphFor(checked, indeterminate)} size={size} color={ink} />\n      </View>\n      {props.loading ? (\n        <ActivityIndicator\n          style={styles.spinner}\n          size={CHECKBOX_SPINNER.size}\n          color={theme.palette.primary.main}\n          accessibilityLabel=\"loading\"\n        />\n      ) : null}\n    </Pressable>\n  );\n}\n\n/** MUI's `FormControlLabel` label, in `body2` and the error hue when it errs. */\nfunction labelStyle(theme: UiTheme, error: boolean): TextStyle {\n  return {\n    color: error ? theme.palette.danger.main : theme.palette.text.primary,\n    fontFamily: theme.typography.fontFamily,\n    fontSize: CHECKBOX_LABEL.fontSize,\n    marginLeft: CHECKBOX_LABEL.marginLeft,\n  };\n}\n\n/** `FormHelperText`, four spacing units in and half a unit down. */\nfunction helperStyle(theme: UiTheme, error: boolean): TextStyle {\n  return {\n    color: error ? theme.palette.danger.main : theme.palette.text.secondary,\n    fontFamily: theme.typography.fontFamily,\n    fontSize: CHECKBOX_HELPER.fontSize,\n    lineHeight: CHECKBOX_HELPER.fontSize * CHECKBOX_HELPER.lineHeight,\n    marginLeft: theme.spacing(CHECKBOX_HELPER.marginLeftUnits),\n    marginTop: theme.spacing(CHECKBOX_HELPER.marginTopUnits),\n  };\n}\n\n/**\n * The native `Checkbox`.\n *\n * The box is the glyph MUI's own `Checkbox` draws — `@12-apps/ui/icons`\n * generates its path from the same `@mui/icons-material` — inside\n * `SwitchBase`'s 9px of padding, under a pressable carrying `role=\"checkbox\"`\n * and `aria-checked`: the state the web's hidden `<input type=\"checkbox\">`\n * carries. See `NATIVE-NOTES.md`.\n */\nexport const Checkbox = React.forwardRef<View, CheckboxProps>((rawProps, ref) => {\n  const {\n    variant, label, error, helperText, loading, ripple, glow, pulse: _pulse,\n    indeterminate, disabled, size, checked, defaultChecked,\n    onChange, onClick, onPress, style, ...others\n  } = resolveCheckboxProps(rawProps);\n\n  const theme = useUiTheme();\n  // `Boolean()` rather than a destructuring default for each: every `= false`\n  // is a branch, and there are enough of them here to cost the size gate.\n  const [own, setOwn] = React.useState(Boolean(defaultChecked));\n  const current = checked ?? own;\n  const inactive = Boolean(disabled) || Boolean(loading);\n  const testId = makeTestId(resolveTestId(others));\n\n  const toggle = (event?: GestureResponderEvent): void => {\n    const next = !current;\n    setOwn(next);\n    onChange?.({ target: { checked: next } }, next);\n    if (event === undefined) return;\n    onClick?.(event);\n    onPress?.(event);\n  };\n\n  const box = (\n    <CheckboxBox\n      boxRef={ref}\n      testID={resolveTestId(others, 'checkbox') ?? 'checkbox'}\n      checked={current}\n      indeterminate={Boolean(indeterminate)}\n      inactive={inactive}\n      loading={Boolean(loading)}\n      glow={glow}\n      ripple={ripple}\n      variant={variant}\n      size={glyphSize(size)}\n      label={label}\n      onToggle={toggle}\n      rest={withoutTestIdProps(others) as Record<string, unknown>}\n    />\n  );\n\n  if (label === undefined) return box;\n\n  return (\n    <View testID={testId('container')} style={style}>\n      <View style={styles.row}>\n        {box}\n        <RNText style={labelStyle(theme, Boolean(error))}>{label}</RNText>\n      </View>\n      {helperText === undefined ? null : (\n        <RNText testID={testId('helper')} style={helperStyle(theme, Boolean(error))}>\n          {helperText}\n        </RNText>\n      )}\n    </View>\n  );\n});\n\nCheckbox.displayName = 'Checkbox';\n\nconst styles = StyleSheet.create({\n  box: {\n    padding: CHECKBOX_PADDING,\n    alignItems: 'center',\n    justifyContent: 'center',\n    position: 'relative',\n  },\n  row: {\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n  spinner: {\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    marginTop: CHECKBOX_SPINNER.offset,\n    marginLeft: CHECKBOX_SPINNER.offset,\n  },\n});\n","import type { CheckboxBaseProps } from './Checkbox.base';\nimport { withDefaults } from '../../../utils/withDefaults';\n\ntype CheckboxDefaultedKeys = 'variant' | 'ripple' | 'glow' | 'pulse';\n\n/**\n * Generic over the renderer's own props, as `resolveButtonProps` is: the web\n * and the native `Checkbox` pass different handler types through, and both come\n * back out untouched.\n */\nexport type ResolvedCheckboxProps<P extends CheckboxBaseProps = CheckboxBaseProps> = P &\n  Required<Pick<CheckboxBaseProps, CheckboxDefaultedKeys>>;\n\nconst CHECKBOX_DEFAULTS: Required<Pick<CheckboxBaseProps, CheckboxDefaultedKeys>> = {\n  variant: 'default',\n  ripple: true,\n  glow: false,\n  pulse: false,\n};\n\nexport const resolveCheckboxProps = <P extends CheckboxBaseProps>(props: P): ResolvedCheckboxProps<P> =>\n  withDefaults(props, CHECKBOX_DEFAULTS as Partial<P>) as ResolvedCheckboxProps<P>;\n\n/** `${dataTestId}-${suffix}`, or `checkbox-${suffix}` when the caller named nothing. */\nexport const makeTestId =\n  (dataTestId?: string) =>\n  (suffix: string): string =>\n    dataTestId ? `${dataTestId}-${suffix}` : `checkbox-${suffix}`;\n","import { alpha } from '../../../tokens/color';\nimport { EFFECT_GLOW } from '../../../tokens/ink.core';\n\nimport type { CheckboxVariant } from './Checkbox.base';\n\n/**\n * THE NUMBERS BOTH `Checkbox` RENDERERS DRAW WITH.\n *\n * `Checkbox.tsx` (web, emotion over MUI's `Checkbox`) and\n * `Checkbox.native.tsx` (React Native) read this one table. As with the other\n * fields, some of it is what the web writes itself — the two variants' corner\n * treatment, the glow and pulse keyframes, the helper text's inset — and some\n * is what MUI supplies underneath: `SwitchBase`'s 9px padding, `SvgIcon`'s\n * three sizes, and the ink a box is drawn in.\n */\n\n/** MUI's `SwitchBase`: 9px of padding around the glyph, at every size. */\nexport const CHECKBOX_PADDING = 9;\n\n/** `SvgIcon`'s own three steps. MUI passes the `size` prop straight to the glyph. */\nexport const CHECKBOX_GLYPH_SIZES = { small: 20, medium: 24, large: 35 } as const;\nexport type CheckboxSize = keyof typeof CHECKBOX_GLYPH_SIZES;\n\nexport const glyphSize = (size: CheckboxSize | undefined): number =>\n  CHECKBOX_GLYPH_SIZES[size ?? 'medium'] ?? CHECKBOX_GLYPH_SIZES.medium;\n\n/**\n * The three glyphs MUI draws, by state.\n *\n * `@12-apps/ui/icons` generates their paths from the same\n * `@mui/icons-material` package MUI's own `Checkbox` imports them from, so the\n * native box is the web box rather than a hand-drawn square.\n */\nexport const CHECKBOX_GLYPH = {\n  checked: 'CheckBox',\n  unchecked: 'CheckBoxOutlineBlank',\n  indeterminate: 'IndeterminateCheckBox',\n} as const;\n\n/**\n * The corner each variant gives the glyph's box.\n *\n * `rounded` is a circle and `toggle` a 12px radius at 1.2 scale — both applied\n * to the SVG's own box on the web, where they show only through what the box\n * clips. Native gives them the same radius and the same scale.\n */\nexport const CHECKBOX_VARIANT: Record<CheckboxVariant, { radius?: number | string; scale?: number }> = {\n  default: {},\n  rounded: { radius: '50%' },\n  toggle: { radius: 12, scale: 1.2 },\n};\n\n/** The wash a hovered box takes, and the 0.3s every state change runs over. */\nexport const CHECKBOX_HOVER_ALPHA = 0.1;\nexport const CHECKBOX_TRANSITION_MS = 300;\n\n/** `loading`: MUI's 20px `CircularProgress`, centred over the box. */\nexport const CHECKBOX_SPINNER = { size: 20, offset: -10 } as const;\n\n/**\n * `glow` and `pulse` are keyed to MUI's DEFAULT blue rather than the theme's\n * primary — `EFFECT_GLOW.muiBlue` (`tokens/ink.core`) — on both renderers.\n */\nexport const CHECKBOX_GLOW = { blur: { from: 5, to: 20 }, alpha: { from: 0.5, to: 0.8 }, ms: 2000 } as const;\nexport const CHECKBOX_PULSE = { spread: 10, alpha: 0.7, ms: 2000 } as const;\n\n/** MUI's default blue at an alpha, as the web's keyframes spell it. */\nexport const effectInk = (alphaValue: number): string => alpha(EFFECT_GLOW.muiBlue, alphaValue);\n\n/** `FormControlLabel`: flush left, its label at MUI's `body2` size. */\nexport const CHECKBOX_LABEL = { marginLeft: 0, fontSize: 14 } as const;\n\n/** `FormHelperText`: four spacing units in, half a unit down. */\nexport const CHECKBOX_HELPER = { marginLeftUnits: 4, marginTopUnits: 0.5, fontSize: 12, lineHeight: 1.66 } as const;\n"],"mappings":"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","names":[]}

package/dist/native/form/Input.js

@@ -6,11 +6,12 @@ import {
   fieldLook,
   helperStyle,
   labelStyle
-} from "../chunks/chunk-335WGKE6.js";
+} from "../chunks/chunk-4ZAULIDG.js";
 import {
   withDefaults
 } from "../chunks/chunk-OXHZDFJZ.js";
 import "../chunks/chunk-IMGBBIMT.js";
+import "../chunks/chunk-ZRQHLTYG.js";
 import {
   webAria,
   webClick,

package/dist/native/form/Input.js.map

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

package/dist/native/form/Select.js

@@ -7,11 +7,14 @@ import {
   helperStyle,
   horizontalBorderInset,
   labelStyle
-} from "../chunks/chunk-335WGKE6.js";
+} from "../chunks/chunk-4ZAULIDG.js";
 import {
   withDefaults
 } from "../chunks/chunk-OXHZDFJZ.js";
 import "../chunks/chunk-IMGBBIMT.js";
+import {
+  ELEVATION_SHADOWS
+} from "../chunks/chunk-ZRQHLTYG.js";
 import {
   webAria,
   webKeyDown,
@@ -104,7 +107,7 @@ var SELECT_MENU = {
   /** MUI's `Menu` paper is `calc(100% - 96px)` tall at most. */
   maxHeightInset: 96
 };
-var MUI_MENU_SHADOW = "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)";
+var MUI_MENU_SHADOW = ELEVATION_SHADOWS[8];
 var selectedWashAlpha = (theme) => theme.mode === "dark" ? SELECT_MENU.selectedAlpha.dark : SELECT_MENU.selectedAlpha.light;
 
 // src/components/form/Select/Select.look.native.ts

package/dist/native/form/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/form/Select/Select.native.tsx","../../../src/components/form/Select/Select.helpers.ts","../../../src/components/form/Select/Select.metrics.ts","../../../src/components/form/Select/Select.look.native.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  Platform,\n  Pressable,\n  ScrollView,\n  StyleSheet,\n  Text as RNText,\n  View,\n  useWindowDimensions,\n  type StyleProp,\n  type ViewStyle,\n} from 'react-native';\n\nimport {\n  displayLabel,\n  resolveSelectProps,\n  selectItems,\n  selectTestIds,\n  type SelectItem,\n} from './Select.helpers';\nimport { menuStyle, optionStyle, optionTextStyle, selectLook, type SelectLook } from './Select.look.native';\nimport {\n  SELECT_GLOW,\n  SELECT_ICON,\n  SELECT_MENU,\n  inputVariantFor,\n  selectInputSize,\n} from './Select.metrics';\nimport type { SelectProps, SelectValue } from './Select.types.native';\nimport { Icon } from '../../../icons/Icon.native';\nimport { webAria, webKeyDown, webRole, type WebKeyEvent } from '../../../platform/aria';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { fieldHeightPx } from '../../../tokens/field-height.core';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport type { UiTheme } from '../../../tokens/theme';\nimport { FieldPulse } from '../field-pulse.native';\nimport { helperStyle, labelStyle, type FieldState } from '../Input/Input.look.native';\n\n/** MUI's halo on the outlined input, painted as a shadow. */\nfunction glowStyle(color: string): ViewStyle {\n  return Platform.select<ViewStyle>({\n    android: { elevation: SELECT_GLOW.rest.blur / 2 },\n    default: {\n      shadowColor: color,\n      shadowOpacity: SELECT_GLOW.rest.alpha,\n      shadowRadius: SELECT_GLOW.rest.blur,\n      shadowOffset: { width: 0, height: 0 },\n    },\n  });\n}\n\ninterface MenuProps {\n  items: SelectItem[];\n  value: SelectValue;\n  testIdFor: (value: SelectValue) => string;\n  onPick: (item: SelectItem) => void;\n}\n\n/** The option list: MUI's `Menu`, under the field rather than portalled over it. */\nfunction SelectMenu({ items, value, testIdFor, onPick }: MenuProps): React.JSX.Element {\n  const theme = useUiTheme();\n  const { height } = useWindowDimensions();\n  const textStyle = optionTextStyle(theme);\n\n  return (\n    <View style={menuStyle(theme, height - SELECT_MENU.maxHeightInset)} {...webRole('listbox')}>\n      <ScrollView>\n        {items.map((item) => {\n          const selected = String(item.value) === String(value);\n          return (\n            <Pressable\n              key={`${item.placeholder ? 'placeholder' : 'option'}-${item.value}`}\n              role=\"option\"\n              aria-selected={selected}\n              aria-disabled={item.disabled}\n              disabled={item.disabled}\n              testID={item.placeholder ? undefined : testIdFor(item.value)}\n              onPress={() => onPick(item)}\n              style={optionStyle(theme, selected, item.disabled)}\n            >\n              <RNText style={textStyle}>{item.label}</RNText>\n            </Pressable>\n          );\n        })}\n      </ScrollView>\n    </View>\n  );\n}\n\ninterface TriggerProps {\n  testID: string;\n  look: SelectLook;\n  open: boolean;\n  disabled: boolean;\n  error: boolean;\n  glow: boolean;\n  display: string;\n  labelId?: string;\n  helperId?: string;\n  onToggle: () => void;\n  onKey: (event: WebKeyEvent) => void;\n}\n\n/**\n * The field itself: MUI's display slot and its arrow, under one `combobox`.\n *\n * `tabIndex` is spelled out because react-native-web only makes a handful of\n * roles focusable on its own, and `combobox` is not one of them — without it\n * the control would not be a tab stop. It goes to -1 when disabled, which is\n * what the web does by leaving the attribute off a disabled field entirely.\n */\nfunction SelectTrigger(props: TriggerProps): React.JSX.Element {\n  const theme = useUiTheme();\n  const { testID, look, open, disabled, error, glow, display, labelId, helperId } = props;\n\n  return (\n    <Pressable\n      testID={testID}\n      role=\"combobox\"\n      tabIndex={disabled ? -1 : 0}\n      aria-expanded={open}\n      aria-disabled={disabled}\n      disabled={disabled}\n      onPress={props.onToggle}\n      style={[look.box, glow ? glowStyle(theme.palette.primary.main) : null]}\n      {...webAria({\n        'aria-haspopup': 'listbox',\n        'aria-invalid': error,\n        ...(labelId === undefined ? {} : { 'aria-labelledby': labelId }),\n        ...(helperId === undefined ? {} : { 'aria-describedby': helperId }),\n      })}\n      {...webKeyDown(props.onKey)}\n    >\n      <RNText style={look.display} numberOfLines={1}>\n        {display}\n      </RNText>\n      <Icon\n        name=\"ArrowDropDown\"\n        size={SELECT_ICON.size}\n        color={disabled ? theme.palette.action.disabled : theme.palette.action.active}\n        testID={`${testID}-icon`}\n        style={[\n          { marginLeft: look.iconGap },\n          open ? { transform: [{ rotate: `${SELECT_ICON.openRotateDeg}deg` }] } : null,\n        ]}\n      />\n    </Pressable>\n  );\n}\n\n/** The value the control shows, controlled by the caller or held here. */\nfunction useSelectValue(\n  value: SelectValue | undefined,\n  defaultValue: SelectValue | undefined,\n): [SelectValue, (next: SelectValue) => void] {\n  const [own, setOwn] = React.useState<SelectValue>(defaultValue ?? '');\n  return [value ?? own, setOwn];\n}\n\n/** The pulse bar, at the field's own height and corner. */\nfunction SelectPulse({\n  theme,\n  size,\n  testID,\n}: {\n  theme: UiTheme;\n  size: SelectProps['size'];\n  testID: string;\n}): React.JSX.Element {\n  return (\n    <FieldPulse\n      color={theme.palette.primary.main}\n      radius={theme.radius.field}\n      height={fieldHeightPx(theme.fieldHeight, size ?? 'md')}\n      testID={testID}\n    />\n  );\n}\n\n/**\n * The field's own box. Raised while open: react-native-web gives every View\n * `z-index: 0`, so the anchor's z-index stays inside this root, and the next\n * field down would paint over the list and take its taps.\n */\nfunction rootStyle(theme: UiTheme, fullWidth: boolean | undefined, open: boolean): StyleProp<ViewStyle> {\n  return [styles.root, fullWidth ? styles.fullWidth : styles.auto, open ? { zIndex: theme.zIndex.modal } : null];\n}\n\n/**\n * The native `Select`.\n *\n * The list is an absolutely positioned panel under the field rather than a\n * portal over the screen: React Native's `Modal` traps focus, which is right\n * for a dialog and wrong for a dropdown — and wrong for the shared stories,\n * which expect the trigger to keep focus while the list is open. The trade is\n * recorded in `NATIVE-NOTES.md`.\n */\nexport const Select = React.forwardRef<View, SelectProps>((rawProps, ref) => {\n  const {\n    variant, options, label, helperText, fullWidth, size, placeholder, error, glow, pulse,\n    disabled, value, defaultValue, onChange, onOpen, onClose, style, ...others\n  } = resolveSelectProps(rawProps);\n\n  const theme = useUiTheme();\n  const [open, setOpen] = React.useState(false);\n  const [current, setCurrent] = useSelectValue(value, defaultValue);\n  const labelId = React.useId();\n  const helperId = React.useId();\n\n  const items = selectItems(options, placeholder);\n  const ids = selectTestIds(resolveTestId(others));\n  const state: FieldState = { focused: open && !disabled, error, disabled };\n  const look = selectLook(theme, variant, size, state);\n\n  const setOpenState = (next: boolean): void => {\n    if (next === open) return;\n    setOpen(next);\n    (next ? onOpen : onClose)?.();\n  };\n\n  const handleKey = (event: WebKeyEvent): void => {\n    if (event.key === 'Escape') setOpenState(false);\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') setOpenState(true);\n  };\n\n  const pick = (item: SelectItem): void => {\n    setOpenState(false);\n    if (item.option === undefined) return;\n    setCurrent(item.value);\n    onChange?.({ target: { value: item.value } }, item.option);\n  };\n\n  return (\n    <View\n      ref={ref}\n      testID={ids.root}\n      style={[rootStyle(theme, fullWidth, open), style]}\n      {...withoutTestIdProps(others)}\n    >\n      {pulse ? <SelectPulse theme={theme} size={size} testID={`${ids.trigger}-pulse`} /> : null}\n      {label === undefined ? null : (\n        <RNText id={labelId} style={labelStyle(theme, inputVariantFor(variant), size, state)}>\n          {label}\n        </RNText>\n      )}\n      <View style={[styles.anchor, open ? { zIndex: theme.zIndex.modal } : null]}>\n        <SelectTrigger\n          testID={ids.trigger}\n          look={look}\n          open={open}\n          disabled={disabled}\n          error={error}\n          glow={glow}\n          display={displayLabel(items, current)}\n          labelId={label === undefined ? undefined : labelId}\n          helperId={helperText === undefined ? undefined : helperId}\n          onToggle={() => setOpenState(!open)}\n          onKey={handleKey}\n        />\n        {open ? (\n          <SelectMenu items={items} value={current} testIdFor={ids.option} onPick={pick} />\n        ) : null}\n      </View>\n      {helperText === undefined ? null : (\n        <RNText id={helperId} style={helperStyle(theme, inputVariantFor(variant), selectInputSize(size), state)}>\n          {helperText}\n        </RNText>\n      )}\n    </View>\n  );\n});\n\nSelect.displayName = 'Select';\n\nconst styles = StyleSheet.create({\n  root: {\n    position: 'relative',\n  },\n  anchor: {\n    position: 'relative',\n  },\n  fullWidth: {\n    alignSelf: 'stretch',\n    width: '100%',\n  },\n  auto: {\n    alignSelf: 'flex-start',\n  },\n});\n","import type { SelectBaseProps, SelectOption, SelectValue } from './Select.base';\nimport { withDefaults } from '../../../utils/withDefaults';\n\ntype SelectDefaultedKeys = 'variant' | 'size' | 'fullWidth' | 'error' | 'glow' | 'pulse' | 'disabled';\n\nexport type ResolvedSelectProps<P extends SelectBaseProps> = P &\n  Required<Pick<SelectBaseProps, SelectDefaultedKeys>>;\n\n/**\n * `Select.tsx` leaves `variant`, `size`, `glow` and `pulse` undefined on\n * purpose — undefined resolves to the default variant, MUI's medium and no\n * effects, which keeps its render function under the complexity budget. The\n * native renderer has to name them, so the same resolution happens here.\n */\nconst SELECT_DEFAULTS: Required<Pick<SelectBaseProps, SelectDefaultedKeys>> = {\n  variant: 'default',\n  size: 'md',\n  fullWidth: true,\n  error: false,\n  glow: false,\n  pulse: false,\n  disabled: false,\n};\n\nexport const resolveSelectProps = <P extends SelectBaseProps>(props: P): ResolvedSelectProps<P> =>\n  withDefaults(props, SELECT_DEFAULTS as Partial<P>) as ResolvedSelectProps<P>;\n\n/** One row of the list: an option, or the disabled placeholder above them. */\nexport interface SelectItem {\n  value: SelectValue;\n  label: string;\n  disabled: boolean;\n  /** The placeholder is not an option: it carries no test id and cannot be chosen. */\n  placeholder: boolean;\n  option?: SelectOption;\n}\n\n/**\n * The list MUI renders: the placeholder first when there is one, then the\n * options, in the order `renderMenuItems` builds them.\n */\nexport function selectItems(options: SelectOption[], placeholder?: string): SelectItem[] {\n  const items: SelectItem[] = options.map((option) => ({\n    value: option.value,\n    label: option.label,\n    disabled: option.disabled === true,\n    placeholder: false,\n    option,\n  }));\n  if (placeholder === undefined || placeholder === '') return items;\n  return [{ value: '', label: placeholder, disabled: true, placeholder: true }, ...items];\n}\n\n/**\n * What the display slot shows.\n *\n * The LAST match wins, which is MUI's own answer: `SelectInput` walks its\n * children and overwrites the display for every child whose value matches, so\n * a list carrying both an empty placeholder and a real empty-valued option\n * shows the option. Values are compared as strings because the DOM stringifies\n * them anyway (MUI's `areEqualValues`).\n */\nexport function displayLabel(items: SelectItem[], value: SelectValue): string {\n  let label = '';\n  for (const item of items) {\n    if (String(item.value) === String(value)) label = item.label;\n  }\n  return label;\n}\n\n/** The three ids the web puts on the control, spelled exactly as it spells them. */\nexport function selectTestIds(id: string | undefined): {\n  root: string | undefined;\n  trigger: string;\n  option: (value: SelectValue) => string;\n} {\n  return {\n    root: id,\n    trigger: id ? `${id}-select` : 'select',\n    option: (value) => (id ? `${id}-option-${value}` : `option-${value}`),\n  };\n}\n","import type { SelectVariant } from './Select.base';\nimport type { InputVariant } from '../Input/Input.base';\nimport { ICON_SIZES } from '../../../icons/Icon.types';\nimport type { UiTheme } from '../../../tokens/theme';\nimport type { SizeValue } from '../../../tokens/vocabulary';\n\n/**\n * THE NUMBERS BOTH `Select` RENDERERS DRAW WITH.\n *\n * A `Select` on the web IS an `OutlinedInput` with a display slot and an arrow\n * where the value would be typed, so the box's own numbers — the padding, the\n * border, the radius, the field edge — are `Input.metrics.ts`'s, read through\n * {@link inputVariantFor} rather than restated. What is here is what a select\n * has and a text field does not: the arrow, the option list, and the two\n * heights MUI's `FormControl` offers.\n */\n\n/** Our three variants onto the `Input` variant that draws the same box. */\nexport const inputVariantFor = (variant: SelectVariant): InputVariant =>\n  variant === 'default' ? 'outlined' : variant;\n\n/**\n * The house scale as a `FormControl` size.\n *\n * Not `muiSize`: that collapses five onto MUI's three, and a FormControl takes\n * only two — `sm` draws small and EVERY other step, `xs` included, draws\n * medium. Restated from `Select.tsx`'s `formControlSize` so the native side\n * reads the same lossy map rather than inventing a kinder one.\n */\nexport const selectInputSize = (size: SizeValue | undefined): 'sm' | 'md' =>\n  size === 'sm' ? 'sm' : 'md';\n\n/**\n * The arrow: MUI's `ArrowDropDown` at `SvgIcon`'s medium size, 7px from the\n * right edge, turned over while the list is open. The display slot reserves\n * 32px for it, so the flow-laid glyph takes the difference as a margin.\n */\nexport const SELECT_ICON = {\n  size: ICON_SIZES.md,\n  right: 7,\n  displayPaddingRight: 32,\n  openRotateDeg: 180,\n} as const;\n\n/** What the glyph leaves between itself and the value: 32 - 24 - 7. */\nexport const SELECT_ICON_GAP =\n  SELECT_ICON.displayPaddingRight - SELECT_ICON.size - SELECT_ICON.right;\n\n/** `.MuiSelect-select`'s floor, MUI's `1.4375em` at the 16px body size. */\nexport const SELECT_DISPLAY_MIN_HEIGHT = 23;\n\n/**\n * The option list: MUI's `Menu` over a `MenuList` of `MenuItem`s.\n *\n * `selectedAlpha` is `palette.action.selectedOpacity`, which MUI doubles in\n * dark mode; `disabledOpacity` is `palette.action.disabledOpacity`. Neither is\n * on `UiTheme`, whose `action` carries colours rather than opacities.\n */\nexport const SELECT_MENU = {\n  itemMinHeight: 48,\n  itemPaddingVertical: 6,\n  itemPaddingHorizontal: 16,\n  listPaddingVertical: 8,\n  selectedAlpha: { light: 0.08, dark: 0.16 },\n  disabledOpacity: 0.38,\n  /** MUI's `Menu` paper is `calc(100% - 96px)` tall at most. */\n  maxHeightInset: 96,\n} as const;\n\n/** MUI's `theme.shadows[8]`, the elevation a `Menu` paper rests at. */\nexport const MUI_MENU_SHADOW =\n  '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)';\n\n/** The wash behind the option the value currently names. */\nexport const selectedWashAlpha = (theme: UiTheme): number =>\n  theme.mode === 'dark' ? SELECT_MENU.selectedAlpha.dark : SELECT_MENU.selectedAlpha.light;\n\n/**\n * The box a select draws IS the input's box, so these are the input's tables\n * under this component's names — the border widths, the glass and gradient\n * alphas, the halo and the pulse. Restating them here is how the two controls\n * would come to disagree about what an outlined field looks like.\n */\nexport {\n  INPUT_BORDER as SELECT_BORDER,\n  INPUT_GLASS as SELECT_GLASS,\n  INPUT_GLOW as SELECT_GLOW,\n  INPUT_GRADIENT as SELECT_GRADIENT,\n  INPUT_PULSE as SELECT_PULSE,\n} from '../Input/Input.metrics';\n","import type { TextStyle, ViewStyle } from 'react-native';\n\nimport {\n  MUI_MENU_SHADOW,\n  SELECT_DISPLAY_MIN_HEIGHT,\n  SELECT_ICON,\n  SELECT_ICON_GAP,\n  SELECT_MENU,\n  inputVariantFor,\n  selectedWashAlpha,\n} from './Select.metrics';\nimport type { SelectVariant } from './Select.base';\nimport { INPUT_FONT_SIZE, INPUT_LINE_HEIGHT } from '../Input/Input.metrics';\nimport { fieldLook, horizontalBorderInset, type FieldState } from '../Input/Input.look.native';\nimport { alpha } from '../../../tokens/color';\nimport type { UiTheme } from '../../../tokens/theme';\nimport type { SizeValue } from '../../../tokens/vocabulary';\n\n/**\n * WHAT A NATIVE `Select` PAINTS.\n *\n * The box is the `Input`'s box: a select on the web is an `OutlinedInput` with\n * a display slot where the value would be typed, so `fieldLook` decides the\n * fill, the edges and the inset, and this file only says what a select adds —\n * room for the arrow, and the list under it.\n */\nexport interface SelectLook {\n  box: ViewStyle;\n  display: TextStyle;\n  iconGap: number;\n}\n\nexport function selectLook(\n  theme: UiTheme,\n  variant: SelectVariant,\n  size: SizeValue,\n  state: FieldState,\n): SelectLook {\n  const inputVariant = inputVariantFor(variant);\n  const look = fieldLook(theme, inputVariant, size, state);\n  const inset = horizontalBorderInset(inputVariant, state.focused);\n\n  return {\n    box: {\n      ...look.box,\n      // MUI's arrow is absolute at `right: 7`; laid out in flow it takes the\n      // row's right inset instead, and {@link SELECT_ICON_GAP} makes up the\n      // difference so the value still stops 32px from the edge.\n      paddingRight: SELECT_ICON.right - inset,\n    },\n    display: {\n      ...look.value,\n      minHeight: SELECT_DISPLAY_MIN_HEIGHT,\n      fontSize: INPUT_FONT_SIZE,\n      lineHeight: INPUT_LINE_HEIGHT,\n    },\n    iconGap: SELECT_ICON_GAP,\n  };\n}\n\n/** The option list's paper: MUI's `Menu`, at elevation 8 on the theme's radius. */\nexport function menuStyle(theme: UiTheme, maxHeight: number): ViewStyle {\n  return {\n    position: 'absolute',\n    top: '100%',\n    left: 0,\n    right: 0,\n    zIndex: theme.zIndex.modal,\n    maxHeight,\n    paddingVertical: SELECT_MENU.listPaddingVertical,\n    backgroundColor: theme.palette.background.paper,\n    borderRadius: theme.radius.md,\n    boxShadow: MUI_MENU_SHADOW,\n  };\n}\n\n/** One `MenuItem`: 48px tall at least, 6px by 16px of padding, washed when selected. */\nexport function optionStyle(theme: UiTheme, selected: boolean, disabled: boolean): ViewStyle {\n  return {\n    minHeight: SELECT_MENU.itemMinHeight,\n    justifyContent: 'center',\n    paddingVertical: SELECT_MENU.itemPaddingVertical,\n    paddingHorizontal: SELECT_MENU.itemPaddingHorizontal,\n    backgroundColor: selected\n      ? alpha(theme.palette.primary.main, selectedWashAlpha(theme))\n      : 'transparent',\n    opacity: disabled ? SELECT_MENU.disabledOpacity : 1,\n  };\n}\n\n/** A `MenuItem`'s label: MUI's `body1`, the same type the display slot sets. */\nexport function optionTextStyle(theme: UiTheme): TextStyle {\n  return {\n    color: theme.palette.text.primary,\n    fontFamily: theme.typography.fontFamily,\n    fontSize: INPUT_FONT_SIZE,\n    lineHeight: INPUT_LINE_HEIGHT,\n  };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/form/Select/Select.native.tsx","../../../src/components/form/Select/Select.helpers.ts","../../../src/components/form/Select/Select.metrics.ts","../../../src/components/form/Select/Select.look.native.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  Platform,\n  Pressable,\n  ScrollView,\n  StyleSheet,\n  Text as RNText,\n  View,\n  useWindowDimensions,\n  type StyleProp,\n  type ViewStyle,\n} from 'react-native';\n\nimport {\n  displayLabel,\n  resolveSelectProps,\n  selectItems,\n  selectTestIds,\n  type SelectItem,\n} from './Select.helpers';\nimport { menuStyle, optionStyle, optionTextStyle, selectLook, type SelectLook } from './Select.look.native';\nimport {\n  SELECT_GLOW,\n  SELECT_ICON,\n  SELECT_MENU,\n  inputVariantFor,\n  selectInputSize,\n} from './Select.metrics';\nimport type { SelectProps, SelectValue } from './Select.types.native';\nimport { Icon } from '../../../icons/Icon.native';\nimport { webAria, webKeyDown, webRole, type WebKeyEvent } from '../../../platform/aria';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { fieldHeightPx } from '../../../tokens/field-height.core';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport type { UiTheme } from '../../../tokens/theme';\nimport { FieldPulse } from '../field-pulse.native';\nimport { helperStyle, labelStyle, type FieldState } from '../Input/Input.look.native';\n\n/** MUI's halo on the outlined input, painted as a shadow. */\nfunction glowStyle(color: string): ViewStyle {\n  return Platform.select<ViewStyle>({\n    android: { elevation: SELECT_GLOW.rest.blur / 2 },\n    default: {\n      shadowColor: color,\n      shadowOpacity: SELECT_GLOW.rest.alpha,\n      shadowRadius: SELECT_GLOW.rest.blur,\n      shadowOffset: { width: 0, height: 0 },\n    },\n  });\n}\n\ninterface MenuProps {\n  items: SelectItem[];\n  value: SelectValue;\n  testIdFor: (value: SelectValue) => string;\n  onPick: (item: SelectItem) => void;\n}\n\n/** The option list: MUI's `Menu`, under the field rather than portalled over it. */\nfunction SelectMenu({ items, value, testIdFor, onPick }: MenuProps): React.JSX.Element {\n  const theme = useUiTheme();\n  const { height } = useWindowDimensions();\n  const textStyle = optionTextStyle(theme);\n\n  return (\n    <View style={menuStyle(theme, height - SELECT_MENU.maxHeightInset)} {...webRole('listbox')}>\n      <ScrollView>\n        {items.map((item) => {\n          const selected = String(item.value) === String(value);\n          return (\n            <Pressable\n              key={`${item.placeholder ? 'placeholder' : 'option'}-${item.value}`}\n              role=\"option\"\n              aria-selected={selected}\n              aria-disabled={item.disabled}\n              disabled={item.disabled}\n              testID={item.placeholder ? undefined : testIdFor(item.value)}\n              onPress={() => onPick(item)}\n              style={optionStyle(theme, selected, item.disabled)}\n            >\n              <RNText style={textStyle}>{item.label}</RNText>\n            </Pressable>\n          );\n        })}\n      </ScrollView>\n    </View>\n  );\n}\n\ninterface TriggerProps {\n  testID: string;\n  look: SelectLook;\n  open: boolean;\n  disabled: boolean;\n  error: boolean;\n  glow: boolean;\n  display: string;\n  labelId?: string;\n  helperId?: string;\n  onToggle: () => void;\n  onKey: (event: WebKeyEvent) => void;\n}\n\n/**\n * The field itself: MUI's display slot and its arrow, under one `combobox`.\n *\n * `tabIndex` is spelled out because react-native-web only makes a handful of\n * roles focusable on its own, and `combobox` is not one of them — without it\n * the control would not be a tab stop. It goes to -1 when disabled, which is\n * what the web does by leaving the attribute off a disabled field entirely.\n */\nfunction SelectTrigger(props: TriggerProps): React.JSX.Element {\n  const theme = useUiTheme();\n  const { testID, look, open, disabled, error, glow, display, labelId, helperId } = props;\n\n  return (\n    <Pressable\n      testID={testID}\n      role=\"combobox\"\n      tabIndex={disabled ? -1 : 0}\n      aria-expanded={open}\n      aria-disabled={disabled}\n      disabled={disabled}\n      onPress={props.onToggle}\n      style={[look.box, glow ? glowStyle(theme.palette.primary.main) : null]}\n      {...webAria({\n        'aria-haspopup': 'listbox',\n        'aria-invalid': error,\n        ...(labelId === undefined ? {} : { 'aria-labelledby': labelId }),\n        ...(helperId === undefined ? {} : { 'aria-describedby': helperId }),\n      })}\n      {...webKeyDown(props.onKey)}\n    >\n      <RNText style={look.display} numberOfLines={1}>\n        {display}\n      </RNText>\n      <Icon\n        name=\"ArrowDropDown\"\n        size={SELECT_ICON.size}\n        color={disabled ? theme.palette.action.disabled : theme.palette.action.active}\n        testID={`${testID}-icon`}\n        style={[\n          { marginLeft: look.iconGap },\n          open ? { transform: [{ rotate: `${SELECT_ICON.openRotateDeg}deg` }] } : null,\n        ]}\n      />\n    </Pressable>\n  );\n}\n\n/** The value the control shows, controlled by the caller or held here. */\nfunction useSelectValue(\n  value: SelectValue | undefined,\n  defaultValue: SelectValue | undefined,\n): [SelectValue, (next: SelectValue) => void] {\n  const [own, setOwn] = React.useState<SelectValue>(defaultValue ?? '');\n  return [value ?? own, setOwn];\n}\n\n/** The pulse bar, at the field's own height and corner. */\nfunction SelectPulse({\n  theme,\n  size,\n  testID,\n}: {\n  theme: UiTheme;\n  size: SelectProps['size'];\n  testID: string;\n}): React.JSX.Element {\n  return (\n    <FieldPulse\n      color={theme.palette.primary.main}\n      radius={theme.radius.field}\n      height={fieldHeightPx(theme.fieldHeight, size ?? 'md')}\n      testID={testID}\n    />\n  );\n}\n\n/**\n * The field's own box. Raised while open: react-native-web gives every View\n * `z-index: 0`, so the anchor's z-index stays inside this root, and the next\n * field down would paint over the list and take its taps.\n */\nfunction rootStyle(theme: UiTheme, fullWidth: boolean | undefined, open: boolean): StyleProp<ViewStyle> {\n  return [styles.root, fullWidth ? styles.fullWidth : styles.auto, open ? { zIndex: theme.zIndex.modal } : null];\n}\n\n/**\n * The native `Select`.\n *\n * The list is an absolutely positioned panel under the field rather than a\n * portal over the screen: React Native's `Modal` traps focus, which is right\n * for a dialog and wrong for a dropdown — and wrong for the shared stories,\n * which expect the trigger to keep focus while the list is open. The trade is\n * recorded in `NATIVE-NOTES.md`.\n */\nexport const Select = React.forwardRef<View, SelectProps>((rawProps, ref) => {\n  const {\n    variant, options, label, helperText, fullWidth, size, placeholder, error, glow, pulse,\n    disabled, value, defaultValue, onChange, onOpen, onClose, style, ...others\n  } = resolveSelectProps(rawProps);\n\n  const theme = useUiTheme();\n  const [open, setOpen] = React.useState(false);\n  const [current, setCurrent] = useSelectValue(value, defaultValue);\n  const labelId = React.useId();\n  const helperId = React.useId();\n\n  const items = selectItems(options, placeholder);\n  const ids = selectTestIds(resolveTestId(others));\n  const state: FieldState = { focused: open && !disabled, error, disabled };\n  const look = selectLook(theme, variant, size, state);\n\n  const setOpenState = (next: boolean): void => {\n    if (next === open) return;\n    setOpen(next);\n    (next ? onOpen : onClose)?.();\n  };\n\n  const handleKey = (event: WebKeyEvent): void => {\n    if (event.key === 'Escape') setOpenState(false);\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') setOpenState(true);\n  };\n\n  const pick = (item: SelectItem): void => {\n    setOpenState(false);\n    if (item.option === undefined) return;\n    setCurrent(item.value);\n    onChange?.({ target: { value: item.value } }, item.option);\n  };\n\n  return (\n    <View\n      ref={ref}\n      testID={ids.root}\n      style={[rootStyle(theme, fullWidth, open), style]}\n      {...withoutTestIdProps(others)}\n    >\n      {pulse ? <SelectPulse theme={theme} size={size} testID={`${ids.trigger}-pulse`} /> : null}\n      {label === undefined ? null : (\n        <RNText id={labelId} style={labelStyle(theme, inputVariantFor(variant), size, state)}>\n          {label}\n        </RNText>\n      )}\n      <View style={[styles.anchor, open ? { zIndex: theme.zIndex.modal } : null]}>\n        <SelectTrigger\n          testID={ids.trigger}\n          look={look}\n          open={open}\n          disabled={disabled}\n          error={error}\n          glow={glow}\n          display={displayLabel(items, current)}\n          labelId={label === undefined ? undefined : labelId}\n          helperId={helperText === undefined ? undefined : helperId}\n          onToggle={() => setOpenState(!open)}\n          onKey={handleKey}\n        />\n        {open ? (\n          <SelectMenu items={items} value={current} testIdFor={ids.option} onPick={pick} />\n        ) : null}\n      </View>\n      {helperText === undefined ? null : (\n        <RNText id={helperId} style={helperStyle(theme, inputVariantFor(variant), selectInputSize(size), state)}>\n          {helperText}\n        </RNText>\n      )}\n    </View>\n  );\n});\n\nSelect.displayName = 'Select';\n\nconst styles = StyleSheet.create({\n  root: {\n    position: 'relative',\n  },\n  anchor: {\n    position: 'relative',\n  },\n  fullWidth: {\n    alignSelf: 'stretch',\n    width: '100%',\n  },\n  auto: {\n    alignSelf: 'flex-start',\n  },\n});\n","import type { SelectBaseProps, SelectOption, SelectValue } from './Select.base';\nimport { withDefaults } from '../../../utils/withDefaults';\n\ntype SelectDefaultedKeys = 'variant' | 'size' | 'fullWidth' | 'error' | 'glow' | 'pulse' | 'disabled';\n\nexport type ResolvedSelectProps<P extends SelectBaseProps> = P &\n  Required<Pick<SelectBaseProps, SelectDefaultedKeys>>;\n\n/**\n * `Select.tsx` leaves `variant`, `size`, `glow` and `pulse` undefined on\n * purpose — undefined resolves to the default variant, MUI's medium and no\n * effects, which keeps its render function under the complexity budget. The\n * native renderer has to name them, so the same resolution happens here.\n */\nconst SELECT_DEFAULTS: Required<Pick<SelectBaseProps, SelectDefaultedKeys>> = {\n  variant: 'default',\n  size: 'md',\n  fullWidth: true,\n  error: false,\n  glow: false,\n  pulse: false,\n  disabled: false,\n};\n\nexport const resolveSelectProps = <P extends SelectBaseProps>(props: P): ResolvedSelectProps<P> =>\n  withDefaults(props, SELECT_DEFAULTS as Partial<P>) as ResolvedSelectProps<P>;\n\n/** One row of the list: an option, or the disabled placeholder above them. */\nexport interface SelectItem {\n  value: SelectValue;\n  label: string;\n  disabled: boolean;\n  /** The placeholder is not an option: it carries no test id and cannot be chosen. */\n  placeholder: boolean;\n  option?: SelectOption;\n}\n\n/**\n * The list MUI renders: the placeholder first when there is one, then the\n * options, in the order `renderMenuItems` builds them.\n */\nexport function selectItems(options: SelectOption[], placeholder?: string): SelectItem[] {\n  const items: SelectItem[] = options.map((option) => ({\n    value: option.value,\n    label: option.label,\n    disabled: option.disabled === true,\n    placeholder: false,\n    option,\n  }));\n  if (placeholder === undefined || placeholder === '') return items;\n  return [{ value: '', label: placeholder, disabled: true, placeholder: true }, ...items];\n}\n\n/**\n * What the display slot shows.\n *\n * The LAST match wins, which is MUI's own answer: `SelectInput` walks its\n * children and overwrites the display for every child whose value matches, so\n * a list carrying both an empty placeholder and a real empty-valued option\n * shows the option. Values are compared as strings because the DOM stringifies\n * them anyway (MUI's `areEqualValues`).\n */\nexport function displayLabel(items: SelectItem[], value: SelectValue): string {\n  let label = '';\n  for (const item of items) {\n    if (String(item.value) === String(value)) label = item.label;\n  }\n  return label;\n}\n\n/** The three ids the web puts on the control, spelled exactly as it spells them. */\nexport function selectTestIds(id: string | undefined): {\n  root: string | undefined;\n  trigger: string;\n  option: (value: SelectValue) => string;\n} {\n  return {\n    root: id,\n    trigger: id ? `${id}-select` : 'select',\n    option: (value) => (id ? `${id}-option-${value}` : `option-${value}`),\n  };\n}\n","import type { SelectVariant } from './Select.base';\nimport type { InputVariant } from '../Input/Input.base';\nimport { ICON_SIZES } from '../../../icons/Icon.types';\nimport { ELEVATION_SHADOWS } from '../../../tokens/ink.core';\nimport type { UiTheme } from '../../../tokens/theme';\nimport type { SizeValue } from '../../../tokens/vocabulary';\n\n/**\n * THE NUMBERS BOTH `Select` RENDERERS DRAW WITH.\n *\n * A `Select` on the web IS an `OutlinedInput` with a display slot and an arrow\n * where the value would be typed, so the box's own numbers — the padding, the\n * border, the radius, the field edge — are `Input.metrics.ts`'s, read through\n * {@link inputVariantFor} rather than restated. What is here is what a select\n * has and a text field does not: the arrow, the option list, and the two\n * heights MUI's `FormControl` offers.\n */\n\n/** Our three variants onto the `Input` variant that draws the same box. */\nexport const inputVariantFor = (variant: SelectVariant): InputVariant =>\n  variant === 'default' ? 'outlined' : variant;\n\n/**\n * The house scale as a `FormControl` size.\n *\n * Not `muiSize`: that collapses five onto MUI's three, and a FormControl takes\n * only two — `sm` draws small and EVERY other step, `xs` included, draws\n * medium. Restated from `Select.tsx`'s `formControlSize` so the native side\n * reads the same lossy map rather than inventing a kinder one.\n */\nexport const selectInputSize = (size: SizeValue | undefined): 'sm' | 'md' =>\n  size === 'sm' ? 'sm' : 'md';\n\n/**\n * The arrow: MUI's `ArrowDropDown` at `SvgIcon`'s medium size, 7px from the\n * right edge, turned over while the list is open. The display slot reserves\n * 32px for it, so the flow-laid glyph takes the difference as a margin.\n */\nexport const SELECT_ICON = {\n  size: ICON_SIZES.md,\n  right: 7,\n  displayPaddingRight: 32,\n  openRotateDeg: 180,\n} as const;\n\n/** What the glyph leaves between itself and the value: 32 - 24 - 7. */\nexport const SELECT_ICON_GAP =\n  SELECT_ICON.displayPaddingRight - SELECT_ICON.size - SELECT_ICON.right;\n\n/** `.MuiSelect-select`'s floor, MUI's `1.4375em` at the 16px body size. */\nexport const SELECT_DISPLAY_MIN_HEIGHT = 23;\n\n/**\n * The option list: MUI's `Menu` over a `MenuList` of `MenuItem`s.\n *\n * `selectedAlpha` is `palette.action.selectedOpacity`, which MUI doubles in\n * dark mode; `disabledOpacity` is `palette.action.disabledOpacity`. Neither is\n * on `UiTheme`, whose `action` carries colours rather than opacities.\n */\nexport const SELECT_MENU = {\n  itemMinHeight: 48,\n  itemPaddingVertical: 6,\n  itemPaddingHorizontal: 16,\n  listPaddingVertical: 8,\n  selectedAlpha: { light: 0.08, dark: 0.16 },\n  disabledOpacity: 0.38,\n  /** MUI's `Menu` paper is `calc(100% - 96px)` tall at most. */\n  maxHeightInset: 96,\n} as const;\n\n/** MUI's `theme.shadows[8]`, the elevation a `Menu` paper rests at. */\nexport const MUI_MENU_SHADOW = ELEVATION_SHADOWS[8];\n\n/** The wash behind the option the value currently names. */\nexport const selectedWashAlpha = (theme: UiTheme): number =>\n  theme.mode === 'dark' ? SELECT_MENU.selectedAlpha.dark : SELECT_MENU.selectedAlpha.light;\n\n/**\n * The box a select draws IS the input's box, so these are the input's tables\n * under this component's names — the border widths, the glass and gradient\n * alphas, the halo and the pulse. Restating them here is how the two controls\n * would come to disagree about what an outlined field looks like.\n */\nexport {\n  INPUT_BORDER as SELECT_BORDER,\n  INPUT_GLASS as SELECT_GLASS,\n  INPUT_GLOW as SELECT_GLOW,\n  INPUT_GRADIENT as SELECT_GRADIENT,\n  INPUT_PULSE as SELECT_PULSE,\n} from '../Input/Input.metrics';\n","import type { TextStyle, ViewStyle } from 'react-native';\n\nimport {\n  MUI_MENU_SHADOW,\n  SELECT_DISPLAY_MIN_HEIGHT,\n  SELECT_ICON,\n  SELECT_ICON_GAP,\n  SELECT_MENU,\n  inputVariantFor,\n  selectedWashAlpha,\n} from './Select.metrics';\nimport type { SelectVariant } from './Select.base';\nimport { INPUT_FONT_SIZE, INPUT_LINE_HEIGHT } from '../Input/Input.metrics';\nimport { fieldLook, horizontalBorderInset, type FieldState } from '../Input/Input.look.native';\nimport { alpha } from '../../../tokens/color';\nimport type { UiTheme } from '../../../tokens/theme';\nimport type { SizeValue } from '../../../tokens/vocabulary';\n\n/**\n * WHAT A NATIVE `Select` PAINTS.\n *\n * The box is the `Input`'s box: a select on the web is an `OutlinedInput` with\n * a display slot where the value would be typed, so `fieldLook` decides the\n * fill, the edges and the inset, and this file only says what a select adds —\n * room for the arrow, and the list under it.\n */\nexport interface SelectLook {\n  box: ViewStyle;\n  display: TextStyle;\n  iconGap: number;\n}\n\nexport function selectLook(\n  theme: UiTheme,\n  variant: SelectVariant,\n  size: SizeValue,\n  state: FieldState,\n): SelectLook {\n  const inputVariant = inputVariantFor(variant);\n  const look = fieldLook(theme, inputVariant, size, state);\n  const inset = horizontalBorderInset(inputVariant, state.focused);\n\n  return {\n    box: {\n      ...look.box,\n      // MUI's arrow is absolute at `right: 7`; laid out in flow it takes the\n      // row's right inset instead, and {@link SELECT_ICON_GAP} makes up the\n      // difference so the value still stops 32px from the edge.\n      paddingRight: SELECT_ICON.right - inset,\n    },\n    display: {\n      ...look.value,\n      minHeight: SELECT_DISPLAY_MIN_HEIGHT,\n      fontSize: INPUT_FONT_SIZE,\n      lineHeight: INPUT_LINE_HEIGHT,\n    },\n    iconGap: SELECT_ICON_GAP,\n  };\n}\n\n/** The option list's paper: MUI's `Menu`, at elevation 8 on the theme's radius. */\nexport function menuStyle(theme: UiTheme, maxHeight: number): ViewStyle {\n  return {\n    position: 'absolute',\n    top: '100%',\n    left: 0,\n    right: 0,\n    zIndex: theme.zIndex.modal,\n    maxHeight,\n    paddingVertical: SELECT_MENU.listPaddingVertical,\n    backgroundColor: theme.palette.background.paper,\n    borderRadius: theme.radius.md,\n    boxShadow: MUI_MENU_SHADOW,\n  };\n}\n\n/** One `MenuItem`: 48px tall at least, 6px by 16px of padding, washed when selected. */\nexport function optionStyle(theme: UiTheme, selected: boolean, disabled: boolean): ViewStyle {\n  return {\n    minHeight: SELECT_MENU.itemMinHeight,\n    justifyContent: 'center',\n    paddingVertical: SELECT_MENU.itemPaddingVertical,\n    paddingHorizontal: SELECT_MENU.itemPaddingHorizontal,\n    backgroundColor: selected\n      ? alpha(theme.palette.primary.main, selectedWashAlpha(theme))\n      : 'transparent',\n    opacity: disabled ? SELECT_MENU.disabledOpacity : 1,\n  };\n}\n\n/** A `MenuItem`'s label: MUI's `body1`, the same type the display slot sets. */\nexport function optionTextStyle(theme: UiTheme): TextStyle {\n  return {\n    color: theme.palette.text.primary,\n    fontFamily: theme.typography.fontFamily,\n    fontSize: INPUT_FONT_SIZE,\n    lineHeight: INPUT_LINE_HEIGHT,\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/native/form/Switch.js

@@ -1,6 +1,11 @@
 import {
   withDefaults
 } from "../chunks/chunk-OXHZDFJZ.js";
+import {
+  ABSOLUTE_INK,
+  ELEVATION_SHADOWS,
+  NEUTRAL_RAMP
+} from "../chunks/chunk-ZRQHLTYG.js";
 import {
   webKeyDown
 } from "../chunks/chunk-DN73KYIZ.js";
@@ -79,7 +84,7 @@ function withoutSwitchProps(props) {
 }
 
 // src/components/form/Switch/Switch.metrics.ts
-var SWITCH_BLACK = "#000";
+var SWITCH_BLACK = ABSOLUTE_INK.black;
 var SWITCH_SIZES = {
   xs: { width: 34, height: 18, padding: 1, thumbSize: 14 },
   sm: { width: 42, height: 22, padding: 1, thumbSize: 18 },
@@ -115,8 +120,8 @@ var thumbRadius = (look, thumbSize) => {
 };
 var THUMB_ELEVATION = { ios: 0, android: 3, material: 2, default: 2 };
 var MUI_SHADOWS = {
-  2: "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-  3: "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)"
+  2: ELEVATION_SHADOWS[2],
+  3: ELEVATION_SHADOWS[3]
 };
 var IOS_THUMB_SHADOW = `0 3px 1px 0 ${alpha(SWITCH_BLACK, 0.04)}, 0 3px 8px 0 ${alpha(SWITCH_BLACK, 0.12)}, 0 1px 0 0 ${alpha(SWITCH_BLACK, 0.08)}`;
 var TRACK_ALPHA = { ios: 0.1, android: 0.2, other: 0.3 };
@@ -159,9 +164,13 @@ var SWITCH_DESCRIPTION = { fontSize: 12, lineHeight: 1.66, marginTopUnits: 0.5 }
 var SWITCH_HELPER = { fontSize: 12, lineHeight: 1.66, marginTopUnits: 1 };
 var LABEL_GAP_UNITS = { beside: 2, stacked: 1 };
 var NEUTRAL_GREY = { main: 700, dark: 800, light: 500 };
-var NEUTRAL_FALLBACK = { main: "#616161", dark: "#424242", light: "#9e9e9e" };
-var NEUTRAL_CONTRAST = "#fff";
-var RESTING_THUMB = "#fff";
+var NEUTRAL_FALLBACK = {
+  main: NEUTRAL_RAMP[NEUTRAL_GREY.main],
+  dark: NEUTRAL_RAMP[NEUTRAL_GREY.dark],
+  light: NEUTRAL_RAMP[NEUTRAL_GREY.light]
+};
+var NEUTRAL_CONTRAST = ABSOLUTE_INK.white;
+var RESTING_THUMB = ABSOLUTE_INK.white;
 var showsTrackLabels = (variant, onText, offText) => variant === "label" && Boolean(onText ?? offText);
 
 // src/components/form/Switch/Switch.look.native.ts