@12-apps/ui 6.19.1 → 6.21.0

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

@@ -0,0 +1,12 @@
+# Select on React Native
+
+Known rendering gaps, one bullet each; `pnpm native:ledger` reads them.
+
+- The option list is an absolutely positioned panel under the field, not a portal over the screen: React Native's `Modal` traps focus and covers the viewport, which is right for a dialog and wrong for a dropdown. So the list is clipped by any ancestor that hides its overflow, it cannot escape a `ScrollView`, and there is no backdrop — the list closes on a pick, on Escape, or when the field is pressed again, never by a tap elsewhere.
+- Arrow keys open the list and Escape closes it, through react-native-web's DOM key events; `Enter` toggles it, because react-native-web's `Pressable` already answers `Enter` as a press. None of the three exists on a device, where the list is a touch surface — so there is no highlighted option to walk.
+- The label sits above the field rather than floating into a notch in its border, and the arrow is laid out in flow rather than absolutely at `right: 7`; the 1px difference that costs is taken out of the gap before the glyph, so the value still stops 32px from the edge. Both follow from React Native having no notched outline and no `position: absolute` inside a text run.
+- `glass` paints its 0.1 paper wash without the 20px backdrop blur (React Native has no backdrop filter), and `gradient` paints the first stop of its 135° fill flat inside a 2px ring of the gradient's first hue — React Native core has no gradient fill and no masked pseudo-element border.
+- Hover has no touch equivalent: the web's hover border, its brighter glass wash and the `action.hover` wash under a menu row are not drawn. `glow` is a shadow on iOS and an elevation on Android, so its halo is not symmetrical there, and it does not brighten on focus the way the web's does.
+- `defaultValue` selects an option here and does nothing on the web, where `Select.tsx` passes `value={value ?? ''}` and MUI's controlled value wins over it. Fixing that is a web change.
+- The list is rendered in full inside a `ScrollView` capped at the window height less 96px, where MUI's `Menu` measures the anchor and flips or shifts to stay on screen; a list opened near the bottom of a device screen runs off it.
+- The display slot, the option labels, the label and the helper text are set in MUI's own numbers (`body1` at 16px on a 23px line, the 0.75 shrunk label, `caption` at 12px); a host that re-themes MUI's typography variants moves the web only.

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

@@ -0,0 +1,78 @@
+import type { 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 SelectVariant = 'default' | 'glass' | 'gradient';
+
+/** What a value can be. The DOM stringifies either, so the two are compared as strings. */
+export type SelectValue = string | number;
+
+export interface SelectOption {
+  value: SelectValue;
+  label: string;
+  disabled?: boolean;
+}
+
+/**
+ * The contract both renderers honour.
+ *
+ * `value`, `defaultValue` and `onChange` are NOT here: MUI types the value as
+ * `unknown` and the change as its own `SelectChangeEvent`, while the native
+ * side takes a `SelectValue` and synthesises the `{ target: { value } }` shape
+ * the web handlers already read.
+ */
+export interface SelectBaseProps {
+  /**
+   * 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;
+  /**
+   * Paints the field, the label and the helper text in the danger hue
+   */
+  error?: boolean;
+  /**
+   * Whether to show a glow effect
+   * @default false
+   */
+  glow?: boolean;
+  /**
+   * Whether to show a pulse animation
+   * @default false
+   */
+  pulse?: boolean;
+  disabled?: boolean;
+  testID?: string;
+  dataTestId?: string;
+}

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

@@ -0,0 +1,82 @@
+import type { SelectBaseProps, SelectOption, SelectValue } from './Select.base';
+import { withDefaults } from '../../../utils/withDefaults';
+
+type SelectDefaultedKeys = 'variant' | 'size' | 'fullWidth' | 'error' | 'glow' | 'pulse' | 'disabled';
+
+export type ResolvedSelectProps<P extends SelectBaseProps> = P &
+  Required<Pick<SelectBaseProps, SelectDefaultedKeys>>;
+
+/**
+ * `Select.tsx` leaves `variant`, `size`, `glow` and `pulse` undefined on
+ * purpose — undefined resolves to the default variant, MUI's medium and no
+ * effects, which keeps its render function under the complexity budget. The
+ * native renderer has to name them, so the same resolution happens here.
+ */
+const SELECT_DEFAULTS: Required<Pick<SelectBaseProps, SelectDefaultedKeys>> = {
+  variant: 'default',
+  size: 'md',
+  fullWidth: true,
+  error: false,
+  glow: false,
+  pulse: false,
+  disabled: false,
+};
+
+export const resolveSelectProps = <P extends SelectBaseProps>(props: P): ResolvedSelectProps<P> =>
+  withDefaults(props, SELECT_DEFAULTS as Partial<P>) as ResolvedSelectProps<P>;
+
+/** One row of the list: an option, or the disabled placeholder above them. */
+export interface SelectItem {
+  value: SelectValue;
+  label: string;
+  disabled: boolean;
+  /** The placeholder is not an option: it carries no test id and cannot be chosen. */
+  placeholder: boolean;
+  option?: SelectOption;
+}
+
+/**
+ * The list MUI renders: the placeholder first when there is one, then the
+ * options, in the order `renderMenuItems` builds them.
+ */
+export function selectItems(options: SelectOption[], placeholder?: string): SelectItem[] {
+  const items: SelectItem[] = options.map((option) => ({
+    value: option.value,
+    label: option.label,
+    disabled: option.disabled === true,
+    placeholder: false,
+    option,
+  }));
+  if (placeholder === undefined || placeholder === '') return items;
+  return [{ value: '', label: placeholder, disabled: true, placeholder: true }, ...items];
+}
+
+/**
+ * What the display slot shows.
+ *
+ * The LAST match wins, which is MUI's own answer: `SelectInput` walks its
+ * children and overwrites the display for every child whose value matches, so
+ * a list carrying both an empty placeholder and a real empty-valued option
+ * shows the option. Values are compared as strings because the DOM stringifies
+ * them anyway (MUI's `areEqualValues`).
+ */
+export function displayLabel(items: SelectItem[], value: SelectValue): string {
+  let label = '';
+  for (const item of items) {
+    if (String(item.value) === String(value)) label = item.label;
+  }
+  return label;
+}
+
+/** The three ids the web puts on the control, spelled exactly as it spells them. */
+export function selectTestIds(id: string | undefined): {
+  root: string | undefined;
+  trigger: string;
+  option: (value: SelectValue) => string;
+} {
+  return {
+    root: id,
+    trigger: id ? `${id}-select` : 'select',
+    option: (value) => (id ? `${id}-option-${value}` : `option-${value}`),
+  };
+}

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

@@ -0,0 +1,99 @@
+import type { TextStyle, ViewStyle } from 'react-native';
+
+import {
+  MUI_MENU_SHADOW,
+  SELECT_DISPLAY_MIN_HEIGHT,
+  SELECT_ICON,
+  SELECT_ICON_GAP,
+  SELECT_MENU,
+  inputVariantFor,
+  selectedWashAlpha,
+} from './Select.metrics';
+import type { SelectVariant } from './Select.base';
+import { INPUT_FONT_SIZE, INPUT_LINE_HEIGHT } from '../Input/Input.metrics';
+import { fieldLook, horizontalBorderInset, type FieldState } from '../Input/Input.look.native';
+import { alpha } from '../../../tokens/color';
+import type { UiTheme } from '../../../tokens/theme';
+import type { SizeValue } from '../../../tokens/vocabulary';
+
+/**
+ * WHAT A NATIVE `Select` PAINTS.
+ *
+ * The box is the `Input`'s box: a select on the web is an `OutlinedInput` with
+ * a display slot where the value would be typed, so `fieldLook` decides the
+ * fill, the edges and the inset, and this file only says what a select adds —
+ * room for the arrow, and the list under it.
+ */
+export interface SelectLook {
+  box: ViewStyle;
+  display: TextStyle;
+  iconGap: number;
+}
+
+export function selectLook(
+  theme: UiTheme,
+  variant: SelectVariant,
+  size: SizeValue,
+  state: FieldState,
+): SelectLook {
+  const inputVariant = inputVariantFor(variant);
+  const look = fieldLook(theme, inputVariant, size, state);
+  const inset = horizontalBorderInset(inputVariant, state.focused);
+
+  return {
+    box: {
+      ...look.box,
+      // MUI's arrow is absolute at `right: 7`; laid out in flow it takes the
+      // row's right inset instead, and {@link SELECT_ICON_GAP} makes up the
+      // difference so the value still stops 32px from the edge.
+      paddingRight: SELECT_ICON.right - inset,
+    },
+    display: {
+      ...look.value,
+      minHeight: SELECT_DISPLAY_MIN_HEIGHT,
+      fontSize: INPUT_FONT_SIZE,
+      lineHeight: INPUT_LINE_HEIGHT,
+    },
+    iconGap: SELECT_ICON_GAP,
+  };
+}
+
+/** The option list's paper: MUI's `Menu`, at elevation 8 on the theme's radius. */
+export function menuStyle(theme: UiTheme, maxHeight: number): ViewStyle {
+  return {
+    position: 'absolute',
+    top: '100%',
+    left: 0,
+    right: 0,
+    zIndex: theme.zIndex.modal,
+    maxHeight,
+    paddingVertical: SELECT_MENU.listPaddingVertical,
+    backgroundColor: theme.palette.background.paper,
+    borderRadius: theme.radius.md,
+    boxShadow: MUI_MENU_SHADOW,
+  };
+}
+
+/** One `MenuItem`: 48px tall at least, 6px by 16px of padding, washed when selected. */
+export function optionStyle(theme: UiTheme, selected: boolean, disabled: boolean): ViewStyle {
+  return {
+    minHeight: SELECT_MENU.itemMinHeight,
+    justifyContent: 'center',
+    paddingVertical: SELECT_MENU.itemPaddingVertical,
+    paddingHorizontal: SELECT_MENU.itemPaddingHorizontal,
+    backgroundColor: selected
+      ? alpha(theme.palette.primary.main, selectedWashAlpha(theme))
+      : 'transparent',
+    opacity: disabled ? SELECT_MENU.disabledOpacity : 1,
+  };
+}
+
+/** A `MenuItem`'s label: MUI's `body1`, the same type the display slot sets. */
+export function optionTextStyle(theme: UiTheme): TextStyle {
+  return {
+    color: theme.palette.text.primary,
+    fontFamily: theme.typography.fontFamily,
+    fontSize: INPUT_FONT_SIZE,
+    lineHeight: INPUT_LINE_HEIGHT,
+  };
+}

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

@@ -0,0 +1,90 @@
+import type { SelectVariant } from './Select.base';
+import type { InputVariant } from '../Input/Input.base';
+import { ICON_SIZES } from '../../../icons/Icon.types';
+import type { UiTheme } from '../../../tokens/theme';
+import type { SizeValue } from '../../../tokens/vocabulary';
+
+/**
+ * THE NUMBERS BOTH `Select` RENDERERS DRAW WITH.
+ *
+ * A `Select` on the web IS an `OutlinedInput` with a display slot and an arrow
+ * where the value would be typed, so the box's own numbers — the padding, the
+ * border, the radius, the field edge — are `Input.metrics.ts`'s, read through
+ * {@link inputVariantFor} rather than restated. What is here is what a select
+ * has and a text field does not: the arrow, the option list, and the two
+ * heights MUI's `FormControl` offers.
+ */
+
+/** Our three variants onto the `Input` variant that draws the same box. */
+export const inputVariantFor = (variant: SelectVariant): InputVariant =>
+  variant === 'default' ? 'outlined' : variant;
+
+/**
+ * The house scale as a `FormControl` size.
+ *
+ * Not `muiSize`: that collapses five onto MUI's three, and a FormControl takes
+ * only two — `sm` draws small and EVERY other step, `xs` included, draws
+ * medium. Restated from `Select.tsx`'s `formControlSize` so the native side
+ * reads the same lossy map rather than inventing a kinder one.
+ */
+export const selectInputSize = (size: SizeValue | undefined): 'sm' | 'md' =>
+  size === 'sm' ? 'sm' : 'md';
+
+/**
+ * The arrow: MUI's `ArrowDropDown` at `SvgIcon`'s medium size, 7px from the
+ * right edge, turned over while the list is open. The display slot reserves
+ * 32px for it, so the flow-laid glyph takes the difference as a margin.
+ */
+export const SELECT_ICON = {
+  size: ICON_SIZES.md,
+  right: 7,
+  displayPaddingRight: 32,
+  openRotateDeg: 180,
+} as const;
+
+/** What the glyph leaves between itself and the value: 32 - 24 - 7. */
+export const SELECT_ICON_GAP =
+  SELECT_ICON.displayPaddingRight - SELECT_ICON.size - SELECT_ICON.right;
+
+/** `.MuiSelect-select`'s floor, MUI's `1.4375em` at the 16px body size. */
+export const SELECT_DISPLAY_MIN_HEIGHT = 23;
+
+/**
+ * The option list: MUI's `Menu` over a `MenuList` of `MenuItem`s.
+ *
+ * `selectedAlpha` is `palette.action.selectedOpacity`, which MUI doubles in
+ * dark mode; `disabledOpacity` is `palette.action.disabledOpacity`. Neither is
+ * on `UiTheme`, whose `action` carries colours rather than opacities.
+ */
+export const SELECT_MENU = {
+  itemMinHeight: 48,
+  itemPaddingVertical: 6,
+  itemPaddingHorizontal: 16,
+  listPaddingVertical: 8,
+  selectedAlpha: { light: 0.08, dark: 0.16 },
+  disabledOpacity: 0.38,
+  /** MUI's `Menu` paper is `calc(100% - 96px)` tall at most. */
+  maxHeightInset: 96,
+} as const;
+
+/** MUI's `theme.shadows[8]`, the elevation a `Menu` paper rests at. */
+export const 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)';
+
+/** The wash behind the option the value currently names. */
+export const selectedWashAlpha = (theme: UiTheme): number =>
+  theme.mode === 'dark' ? SELECT_MENU.selectedAlpha.dark : SELECT_MENU.selectedAlpha.light;
+
+/**
+ * The box a select draws IS the input's box, so these are the input's tables
+ * under this component's names — the border widths, the glass and gradient
+ * alphas, the halo and the pulse. Restating them here is how the two controls
+ * would come to disagree about what an outlined field looks like.
+ */
+export {
+  INPUT_BORDER as SELECT_BORDER,
+  INPUT_GLASS as SELECT_GLASS,
+  INPUT_GLOW as SELECT_GLOW,
+  INPUT_GRADIENT as SELECT_GRADIENT,
+  INPUT_PULSE as SELECT_PULSE,
+} from '../Input/Input.metrics';

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

@@ -0,0 +1,264 @@
+import * as React from 'react';
+import {
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text as RNText,
+  View,
+  useWindowDimensions,
+  type ViewStyle,
+} from 'react-native';
+
+import {
+  displayLabel,
+  resolveSelectProps,
+  selectItems,
+  selectTestIds,
+  type SelectItem,
+} from './Select.helpers';
+import { menuStyle, optionStyle, optionTextStyle, selectLook, type SelectLook } from './Select.look.native';
+import {
+  SELECT_GLOW,
+  SELECT_ICON,
+  SELECT_MENU,
+  SELECT_PULSE,
+  inputVariantFor,
+  selectInputSize,
+} from './Select.metrics';
+import type { SelectProps, SelectValue } from './Select.types.native';
+import { Icon } from '../../../icons/Icon.native';
+import { webAria, webKeyDown, webRole, type WebKeyEvent } from '../../../platform/aria';
+import { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';
+import { useUiTheme } from '../../../provider/use-ui-theme.native';
+import { FieldPulse } from '../field-pulse.native';
+import { helperStyle, labelStyle, type FieldState } from '../Input/Input.look.native';
+
+/** MUI's halo on the outlined input, painted as a shadow. */
+function glowStyle(color: string): ViewStyle {
+  return Platform.select<ViewStyle>({
+    android: { elevation: SELECT_GLOW.rest.blur / 2 },
+    default: {
+      shadowColor: color,
+      shadowOpacity: SELECT_GLOW.rest.alpha,
+      shadowRadius: SELECT_GLOW.rest.blur,
+      shadowOffset: { width: 0, height: 0 },
+    },
+  });
+}
+
+interface MenuProps {
+  items: SelectItem[];
+  value: SelectValue;
+  testIdFor: (value: SelectValue) => string;
+  onPick: (item: SelectItem) => void;
+}
+
+/** The option list: MUI's `Menu`, under the field rather than portalled over it. */
+function SelectMenu({ items, value, testIdFor, onPick }: MenuProps): React.JSX.Element {
+  const theme = useUiTheme();
+  const { height } = useWindowDimensions();
+  const textStyle = optionTextStyle(theme);
+
+  return (
+    <View style={menuStyle(theme, height - SELECT_MENU.maxHeightInset)} {...webRole('listbox')}>
+      <ScrollView>
+        {items.map((item) => {
+          const selected = String(item.value) === String(value);
+          return (
+            <Pressable
+              key={`${item.placeholder ? 'placeholder' : 'option'}-${item.value}`}
+              role="option"
+              aria-selected={selected}
+              aria-disabled={item.disabled}
+              disabled={item.disabled}
+              testID={item.placeholder ? undefined : testIdFor(item.value)}
+              onPress={() => onPick(item)}
+              style={optionStyle(theme, selected, item.disabled)}
+            >
+              <RNText style={textStyle}>{item.label}</RNText>
+            </Pressable>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+}
+
+interface TriggerProps {
+  testID: string;
+  look: SelectLook;
+  open: boolean;
+  disabled: boolean;
+  error: boolean;
+  glow: boolean;
+  display: string;
+  labelId?: string;
+  helperId?: string;
+  onToggle: () => void;
+  onKey: (event: WebKeyEvent) => void;
+}
+
+/**
+ * The field itself: MUI's display slot and its arrow, under one `combobox`.
+ *
+ * `tabIndex` is spelled out because react-native-web only makes a handful of
+ * roles focusable on its own, and `combobox` is not one of them — without it
+ * the control would not be a tab stop. It goes to -1 when disabled, which is
+ * what the web does by leaving the attribute off a disabled field entirely.
+ */
+function SelectTrigger(props: TriggerProps): React.JSX.Element {
+  const theme = useUiTheme();
+  const { testID, look, open, disabled, error, glow, display, labelId, helperId } = props;
+
+  return (
+    <Pressable
+      testID={testID}
+      role="combobox"
+      tabIndex={disabled ? -1 : 0}
+      aria-expanded={open}
+      aria-disabled={disabled}
+      disabled={disabled}
+      onPress={props.onToggle}
+      style={[look.box, glow ? glowStyle(theme.palette.primary.main) : null]}
+      {...webAria({
+        'aria-haspopup': 'listbox',
+        'aria-invalid': error,
+        ...(labelId === undefined ? {} : { 'aria-labelledby': labelId }),
+        ...(helperId === undefined ? {} : { 'aria-describedby': helperId }),
+      })}
+      {...webKeyDown(props.onKey)}
+    >
+      <RNText style={look.display} numberOfLines={1}>
+        {display}
+      </RNText>
+      <Icon
+        name="ArrowDropDown"
+        size={SELECT_ICON.size}
+        color={disabled ? theme.palette.action.disabled : theme.palette.action.active}
+        testID={`${testID}-icon`}
+        style={[
+          { marginLeft: look.iconGap },
+          open ? { transform: [{ rotate: `${SELECT_ICON.openRotateDeg}deg` }] } : null,
+        ]}
+      />
+    </Pressable>
+  );
+}
+
+/** The value the control shows, controlled by the caller or held here. */
+function useSelectValue(
+  value: SelectValue | undefined,
+  defaultValue: SelectValue | undefined,
+): [SelectValue, (next: SelectValue) => void] {
+  const [own, setOwn] = React.useState<SelectValue>(defaultValue ?? '');
+  return [value ?? own, setOwn];
+}
+
+/**
+ * The native `Select`.
+ *
+ * The list is an absolutely positioned panel under the field rather than a
+ * portal over the screen: React Native's `Modal` traps focus, which is right
+ * for a dialog and wrong for a dropdown — and wrong for the shared stories,
+ * which expect the trigger to keep focus while the list is open. The trade is
+ * recorded in `NATIVE-NOTES.md`.
+ */
+export const Select = React.forwardRef<View, SelectProps>((rawProps, ref) => {
+  const {
+    variant, options, label, helperText, fullWidth, size, placeholder, error, glow, pulse,
+    disabled, value, defaultValue, onChange, onOpen, onClose, style, ...others
+  } = resolveSelectProps(rawProps);
+
+  const theme = useUiTheme();
+  const [open, setOpen] = React.useState(false);
+  const [current, setCurrent] = useSelectValue(value, defaultValue);
+  const labelId = React.useId();
+  const helperId = React.useId();
+
+  const items = selectItems(options, placeholder);
+  const ids = selectTestIds(resolveTestId(others));
+  const state: FieldState = { focused: open && !disabled, error, disabled };
+  const look = selectLook(theme, variant, size, state);
+
+  const setOpenState = (next: boolean): void => {
+    if (next === open) return;
+    setOpen(next);
+    (next ? onOpen : onClose)?.();
+  };
+
+  const handleKey = (event: WebKeyEvent): void => {
+    if (event.key === 'Escape') setOpenState(false);
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') setOpenState(true);
+  };
+
+  const pick = (item: SelectItem): void => {
+    setOpenState(false);
+    if (item.option === undefined) return;
+    setCurrent(item.value);
+    onChange?.({ target: { value: item.value } }, item.option);
+  };
+
+  return (
+    <View
+      ref={ref}
+      testID={ids.root}
+      style={[styles.root, fullWidth ? styles.fullWidth : styles.auto, style]}
+      {...withoutTestIdProps(others)}
+    >
+      {pulse ? (
+        <FieldPulse
+          color={theme.palette.primary.main}
+          radius={theme.spacing(SELECT_PULSE.radiusUnits)}
+          testID={`${ids.trigger}-pulse`}
+        />
+      ) : null}
+      {label === undefined ? null : (
+        <RNText id={labelId} style={labelStyle(theme, inputVariantFor(variant), size, state)}>
+          {label}
+        </RNText>
+      )}
+      <View style={[styles.anchor, open ? { zIndex: theme.zIndex.modal } : null]}>
+        <SelectTrigger
+          testID={ids.trigger}
+          look={look}
+          open={open}
+          disabled={disabled}
+          error={error}
+          glow={glow}
+          display={displayLabel(items, current)}
+          labelId={label === undefined ? undefined : labelId}
+          helperId={helperText === undefined ? undefined : helperId}
+          onToggle={() => setOpenState(!open)}
+          onKey={handleKey}
+        />
+        {open ? (
+          <SelectMenu items={items} value={current} testIdFor={ids.option} onPick={pick} />
+        ) : null}
+      </View>
+      {helperText === undefined ? null : (
+        <RNText id={helperId} style={helperStyle(theme, inputVariantFor(variant), selectInputSize(size), state)}>
+          {helperText}
+        </RNText>
+      )}
+    </View>
+  );
+});
+
+Select.displayName = 'Select';
+
+const styles = StyleSheet.create({
+  root: {
+    position: 'relative',
+  },
+  anchor: {
+    position: 'relative',
+  },
+  fullWidth: {
+    alignSelf: 'stretch',
+    width: '100%',
+  },
+  auto: {
+    alignSelf: 'flex-start',
+  },
+});