@expo/ui 56.0.18 → 56.0.19

package/src/universal/Switch/index.tsx

@@ -1,19 +1,66 @@
-import { Switch as RNSwitch, View, Text, StyleSheet, useColorScheme } from 'react-native';
+import { View, Text, StyleSheet } from 'react-native';
 
 import type { SwitchProps } from './types';
+import { useFocusVisible } from '../hooks';
+import { colors, createWebComponent, durations, easings, shadows } from '../webUtils';
+
+const Input = createWebComponent('input');
 
 const styles = StyleSheet.create({
   view: {
-    flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: 8,
+    cursor: 'pointer',
+    display: 'inline-flex',
+    flexDirection: 'row',
+    gap: 10,
   },
-  disabled: {
+  viewDisabled: {
+    cursor: 'auto',
     opacity: 0.5,
   },
-  darkText: {
-    color: '#fff',
+  input: {
+    position: 'absolute',
+    opacity: 0,
+    pointerEvents: 'none',
+    margin: 0,
+    width: 0,
+    height: 0,
+  },
+  text: {
+    color: colors.foreground,
+    userSelect: 'none',
+  },
+  track: {
+    backgroundColor: colors.gray[300],
+    borderRadius: 22 / 2,
+    height: 22,
+    position: 'relative',
+    transitionDuration: durations.base,
+    transitionProperty: 'background-color',
+    transitionTimingFunction: easings.standard,
+    width: 36,
+  },
+  trackChecked: {
+    backgroundColor: colors.primary[500],
+  },
+  focused: {
+    boxShadow: shadows.focus,
+  },
+  thumb: {
+    position: 'absolute',
+    top: 2,
+    left: 2,
+    backgroundColor: '#fff',
+    borderRadius: 18 / 2,
+    boxShadow: '0 1px 2px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1)',
+    height: 18,
+    width: 18,
+    transitionDuration: durations.base,
+    transitionProperty: 'transform',
+    transitionTimingFunction: easings.standard,
+  },
+  thumbChecked: {
+    transform: 'translateX(14px)',
   },
 });
 
@@ -21,19 +68,31 @@ const styles = StyleSheet.create({
  * A toggle control that switches between on and off states.
  */
 export function Switch({ value, onValueChange, label, disabled = false, testID }: SwitchProps) {
-  const isDark = useColorScheme() === 'dark';
-
-  if (label) {
-    return (
-      <View style={[styles.view, disabled && styles.disabled]}>
-        <Text style={isDark && styles.darkText}>{label}</Text>
-        <RNSwitch value={value} onValueChange={onValueChange} disabled={disabled} testID={testID} />
-      </View>
-    );
-  }
+  const { focusVisible, onFocus, onBlur } = useFocusVisible();
 
   return (
-    <RNSwitch value={value} onValueChange={onValueChange} disabled={disabled} testID={testID} />
+    <View
+      aria-disabled={disabled}
+      role="label"
+      style={[styles.view, disabled && styles.viewDisabled]}>
+      <Input
+        type="checkbox"
+        role="switch"
+        onFocus={onFocus}
+        onBlur={onBlur}
+        checked={value}
+        disabled={disabled}
+        testID={testID}
+        style={styles.input}
+        onChange={({ target: { checked } }) => onValueChange(checked)}
+      />
+
+      {label != null && <Text style={styles.text}>{label}</Text>}
+
+      <View style={[styles.track, value && styles.trackChecked, focusVisible && styles.focused]}>
+        <View style={[styles.thumb, value && styles.thumbChecked]} />
+      </View>
+    </View>
   );
 }
 

package/src/universal/TextInput/index.tsx

@@ -1,11 +1,39 @@
-import { useImperativeHandle, useRef } from 'react';
-import { TextInput as RNTextInput, StyleSheet, useColorScheme } from 'react-native';
+import { useImperativeHandle, useRef, useState } from 'react';
+import { TextInput as RNTextInput, StyleSheet } from 'react-native';
 
 import { useNativeState } from '../State';
 import type { TextInputProps } from './types';
+import { colors, durations, easings, shadows } from '../webUtils';
 
 const styles = StyleSheet.create({
-  darkInput: { color: '#fff' },
+  input: {
+    backgroundColor: colors.background,
+    borderColor: colors.gray[200],
+    borderRadius: 8,
+    borderStyle: 'solid',
+    borderWidth: 1,
+    boxShadow: shadows.input,
+    boxSizing: 'border-box',
+    color: colors.gray[900],
+    display: 'flex',
+    fontSize: 14,
+    height: 40,
+    outlineStyle: 'solid',
+    outlineWidth: 0,
+    paddingHorizontal: 12,
+    paddingVertical: 0,
+    transitionDuration: durations.fast,
+    transitionProperty: 'border-color, box-shadow, background-color',
+    transitionTimingFunction: easings.standard,
+  },
+  focused: {
+    borderColor: colors.primary[500],
+    boxShadow: shadows.focus,
+  },
+  multiline: {
+    height: 'auto',
+    paddingVertical: 11,
+  },
 });
 
 export function TextInput({
@@ -45,7 +73,7 @@ export function TextInput({
   onSelectionChange,
   selectTextOnFocus,
 }: TextInputProps) {
-  const isDark = useColorScheme() === 'dark';
+  const [focused, setFocused] = useState(false);
   const initialFallbackRef = useRef(defaultValue ?? '');
   const fallback = useNativeState<string>(initialFallbackRef.current);
   const state = value ?? fallback;
@@ -79,7 +107,7 @@ export function TextInput({
       ref={innerRef}
       value={state.value}
       placeholder={placeholder}
-      placeholderTextColor={placeholderTextColor}
+      placeholderTextColor={placeholderTextColor ?? colors.gray[500]}
       autoFocus={autoFocus}
       editable={editable}
       readOnly={readOnly}
@@ -98,15 +126,15 @@ export function TextInput({
       returnKeyType={returnKeyType}
       enterKeyHint={enterKeyHint}
       cursorColor={cursorColor}
-      style={[
-        isDark && styles.darkInput,
-        style,
-        textStyle,
-        textAlign && textAlign !== 'auto' ? { textAlign } : null,
-      ]}
       onSubmitEditing={onSubmitEditing ? (e) => onSubmitEditing(e.nativeEvent.text) : undefined}
-      onFocus={onFocus ? () => onFocus() : undefined}
-      onBlur={onBlur ? () => onBlur() : undefined}
+      onFocus={() => {
+        setFocused(true);
+        onFocus?.();
+      }}
+      onBlur={() => {
+        setFocused(false);
+        onBlur?.();
+      }}
       onChangeText={(text) => {
         state.value = text;
         onChangeText?.(text);
@@ -129,6 +157,14 @@ export function TextInput({
               }
             : undefined
       }
+      style={[
+        styles.input,
+        focused && styles.focused,
+        multiline && styles.multiline,
+        style,
+        textStyle,
+        textAlign && textAlign !== 'auto' ? { textAlign } : null,
+      ]}
     />
   );
 }

package/src/universal/hooks.ts

@@ -1,4 +1,6 @@
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { wasLastInputKeyboard } from './keyboardEvent.fx';
 
 /**
  * Shared hook for onAppear/onDisappear lifecycle callbacks.
@@ -18,3 +20,25 @@ export function useUniversalLifecycle(onAppear?: () => void, onDisappear?: () =>
     };
   }, []);
 }
+
+/**
+ * Tracks whether the element should display a keyboard focus indicator,
+ * mirroring the browser's `:focus-visible` heuristic. Spread the returned
+ * `onFocus`/`onBlur` onto a focusable element (e.g. `Pressable`) and read
+ * `focusVisible` to conditionally apply focus styles.
+ */
+export function useFocusVisible() {
+  const [focusVisible, setFocusVisible] = useState(false);
+
+  const onFocus = useCallback(() => {
+    if (wasLastInputKeyboard()) {
+      setFocusVisible(true);
+    }
+  }, []);
+
+  const onBlur = useCallback(() => {
+    setFocusVisible(false);
+  }, []);
+
+  return { focusVisible, onFocus, onBlur };
+}

package/src/universal/keyboardEvent.fx.ts

@@ -0,0 +1,28 @@
+import { Platform } from 'react-native';
+
+// Default to true on other platforms than web (native, SSR) so any focus
+// event registers as keyboard-driven there. On web, a pointer event flips this
+// to false before the focus event fires.
+let lastInputWasKeyboard = Platform.OS !== 'web';
+
+export const wasLastInputKeyboard = () => lastInputWasKeyboard;
+
+if (Platform.OS === 'web' && typeof window !== 'undefined') {
+  window.addEventListener(
+    'keydown',
+    (event) => {
+      if (!event.altKey && !event.ctrlKey && !event.metaKey) {
+        lastInputWasKeyboard = true;
+      }
+    },
+    true
+  );
+
+  const listener = () => {
+    lastInputWasKeyboard = false;
+  };
+
+  window.addEventListener('mousedown', listener, true);
+  window.addEventListener('pointerdown', listener, true);
+  window.addEventListener('touchstart', listener, true);
+}

package/src/universal/webUtils.ts

@@ -0,0 +1,245 @@
+import type { ComponentProps, ElementType } from 'react';
+import {
+  processColor,
+  unstable_createElement,
+  type ColorValue,
+  type ImageStyle,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+
+type Simplify<T> = { [K in keyof T]: T[K] };
+type Merge<A, B> = Simplify<Omit<A, keyof B> & B>;
+
+type WebComponentProps<T extends ElementType> = Merge<
+  ComponentProps<T>,
+  {
+    dataSet?: Record<string, string | undefined>;
+    focusable?: boolean;
+    style?: StyleProp<ImageStyle | TextStyle | ViewStyle>;
+    testID?: string;
+  }
+>;
+
+export const createWebComponent =
+  <T extends ElementType>(type: T) =>
+  (props: WebComponentProps<T>) =>
+    unstable_createElement(type, props);
+
+export const css = (strings: TemplateStringsArray, ...values: unknown[]): string =>
+  strings
+    .reduce((acc, s, i) => acc + s + (i < values.length ? String(values[i]) : ''), '')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+const lightVariables = css`
+  --expo-ui-background: #ffffff;
+  --expo-ui-foreground: #000000;
+
+  --expo-ui-gray-50: #f9fafb;
+  --expo-ui-gray-100: #f0f1f2;
+  --expo-ui-gray-150: #eaecf0;
+  --expo-ui-gray-200: #e1e4e8;
+  --expo-ui-gray-300: #d7dbdf;
+  --expo-ui-gray-400: #c9d1d9;
+  --expo-ui-gray-500: #687076;
+  --expo-ui-gray-600: #596068;
+  --expo-ui-gray-700: #37414a;
+  --expo-ui-gray-800: #25292e;
+  --expo-ui-gray-900: #11181c;
+
+  --expo-ui-shadow-button: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
+`;
+
+const darkVariables = css`
+  --expo-ui-background: #0b0f14;
+  --expo-ui-foreground: #ffffff;
+
+  --expo-ui-gray-50: #111418;
+  --expo-ui-gray-100: #1d2128;
+  --expo-ui-gray-150: #252932;
+  --expo-ui-gray-200: #1f242c;
+  --expo-ui-gray-300: #30363d;
+  --expo-ui-gray-400: #484f58;
+  --expo-ui-gray-500: #6e7781;
+  --expo-ui-gray-600: #9aa4ae;
+  --expo-ui-gray-700: #4b5560;
+  --expo-ui-gray-800: #c0c8d0;
+  --expo-ui-gray-900: #e6edf3;
+
+  --expo-ui-shadow-button: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+`;
+
+export const colors = {
+  background: 'var(--expo-ui-background)',
+  foreground: 'var(--expo-ui-foreground)',
+
+  red: '#cf222e',
+
+  primary: {
+    foreground: 'var(--expo-ui-primary-foreground)',
+    50: 'var(--expo-ui-primary-50)',
+    100: 'var(--expo-ui-primary-100)',
+    200: 'var(--expo-ui-primary-200)',
+    300: 'var(--expo-ui-primary-300)',
+    400: 'var(--expo-ui-primary-400)',
+    500: 'var(--expo-ui-primary-500)',
+    600: 'var(--expo-ui-primary-600)',
+    700: 'var(--expo-ui-primary-700)',
+    800: 'var(--expo-ui-primary-800)',
+    900: 'var(--expo-ui-primary-900)',
+  },
+
+  gray: {
+    50: 'var(--expo-ui-gray-50)',
+    100: 'var(--expo-ui-gray-100)',
+    200: 'var(--expo-ui-gray-200)',
+    300: 'var(--expo-ui-gray-300)',
+    400: 'var(--expo-ui-gray-400)',
+    500: 'var(--expo-ui-gray-500)',
+    600: 'var(--expo-ui-gray-600)',
+    700: 'var(--expo-ui-gray-700)',
+    800: 'var(--expo-ui-gray-800)',
+    900: 'var(--expo-ui-gray-900)',
+  },
+};
+
+export const durations = {
+  fast: '120ms',
+  base: '120ms',
+  slow: '280ms',
+};
+
+export const easings = {
+  standard: 'cubic-bezier(0.4, 0, 0.2, 1)',
+};
+
+export const shadows = {
+  button: 'var(--expo-ui-shadow-button)',
+  focus: '0 0 0 3px color-mix(in oklab, var(--expo-ui-primary-500) 35%, transparent)',
+  input: '0 1px 0 rgba(0, 0, 0, 0.02)',
+};
+
+export const globalCss = css`
+  :root {
+    ${lightVariables}
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme]) {
+      ${darkVariables}
+    }
+  }
+
+  [data-theme='dark'] {
+    ${darkVariables}
+  }
+`;
+
+// Color utils
+
+const DEFAULT_PRIMARY_COLOR = '#007aff';
+
+type Lch = [number, number, number];
+
+const srgbToLinear = (c: number): number =>
+  c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+
+const linearToSrgb = (c: number): number =>
+  c <= 0.0031308 ? 12.92 * c : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
+
+const hexToLch = (hex: string): Lch => {
+  const raw = hex.replace('#', '');
+  const body = raw.length === 3 ? Array.from(raw, (c) => c + c).join('') : raw;
+
+  const r = srgbToLinear(Number.parseInt(body.slice(0, 2), 16) / 255);
+  const g = srgbToLinear(Number.parseInt(body.slice(2, 4), 16) / 255);
+  const b = srgbToLinear(Number.parseInt(body.slice(4, 6), 16) / 255);
+
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+
+  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+  const labA = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const labB = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+
+  return [L, Math.sqrt(labA * labA + labB * labB), Math.atan2(labB, labA)];
+};
+
+const lchToHex = ([L, chroma, hue]: Lch): string => {
+  const a = chroma * Math.cos(hue);
+  const b = chroma * Math.sin(hue);
+
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+
+  const r = +4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
+  const g = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
+  const bl = -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s;
+
+  const cl = (c: number): number => Math.max(0, Math.min(255, Math.round(linearToSrgb(c) * 255)));
+  return '#' + [cl(r), cl(g), cl(bl)].map((x) => x.toString(16).padStart(2, '0')).join('');
+};
+
+// Steps tuned for sensible UI scale. Lightness targets are perceptual (OKLCH).
+// Chroma multiplier softens lightest and darkest stops so they don't read neon.
+const PRIMARY_STOPS = [
+  { step: 50, L: 0.975, cMul: 0.08 },
+  { step: 100, L: 0.945, cMul: 0.2 },
+  { step: 200, L: 0.89, cMul: 0.45 },
+  { step: 300, L: 0.81, cMul: 0.7 },
+  { step: 400, L: 0.7, cMul: 0.9 },
+  { step: 500, L: null, cMul: 1.0 }, // anchor at user input
+  { step: 600, L: 0.5, cMul: 1.0 },
+  { step: 700, L: 0.42, cMul: 0.95 },
+  { step: 800, L: 0.34, cMul: 0.85 },
+  { step: 900, L: 0.25, cMul: 0.7 },
+] as const;
+
+type PrimaryColorScale = Record<
+  `--expo-ui-primary-${'foreground' | (typeof PRIMARY_STOPS)[number]['step']}`,
+  string
+>;
+
+// Normalize any `ColorValue` (named color, `rgb()` / `rgba()`, hex string, or
+// processed number) to a `#RRGGBB` string. `processColor` returns an
+// `0xAARRGGBB` integer (or `null`/`undefined` for invalid input); alpha is
+// dropped since the scale only needs the base hue.
+const colorValueToHex = (color: ColorValue): string | null => {
+  const argb = processColor(color);
+
+  if (typeof argb !== 'number') {
+    return null;
+  }
+
+  const r = (argb >> 16) & 0xff;
+  const g = (argb >> 8) & 0xff;
+  const b = argb & 0xff;
+  return '#' + [r, g, b].map((c) => c.toString(16).padStart(2, '0')).join('');
+};
+
+export const generatePrimaryColorScale = (
+  color: ColorValue | undefined = DEFAULT_PRIMARY_COLOR
+): Record<string, string> => {
+  const [L, C, H] = hexToLch(colorValueToHex(color) ?? DEFAULT_PRIMARY_COLOR);
+
+  const scale = {
+    // Contrast for filled buttons: pick white or a hue-tinted near-black based on L of 500
+    '--expo-ui-primary-foreground': L < 0.74 ? '#ffffff' : lchToHex([0.18, C * 0.1, H]),
+  } as PrimaryColorScale;
+
+  for (const { step, L: tgtL, cMul } of PRIMARY_STOPS) {
+    const newL = tgtL == null ? L : tgtL;
+    const newC = C * cMul;
+    scale[`--expo-ui-primary-${step}`] = lchToHex([newL, newC, H]);
+  }
+
+  return scale;
+};

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.18/expo.modules.ui-56.0.18-sources.jar.md5

@@ -1 +0,0 @@
-22f57bb7a0ea0016c8efa6cde687934b

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.18/expo.modules.ui-56.0.18-sources.jar.sha1

@@ -1 +0,0 @@
-071ba8aee8e6056c59d7f18aa247e536e110f493

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.18/expo.modules.ui-56.0.18-sources.jar.sha256

@@ -1 +0,0 @@
-e456560887c0d9471dbddf4b7f5c232432a588ecb6b531120c9ce193f8d2f07d

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.18/expo.modules.ui-56.0.18-sources.jar.sha512

@@ -1 +0,0 @@
-a3762cf9549225df1a60ad90cdf83586c4bb6358cecaa627f78a299a8aa5bd23ebebc740d6c0cc7acbf75d134e3c45ca8059459c6fcbc796beeeb4cb5d9dbfb8

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.18/expo.modules.ui-56.0.18.aar.md5

@@ -1 +0,0 @@
-e06c3debed9c38c907f69263825babb0

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.18/expo.modules.ui-56.0.18.aar.sha1

@@ -1 +0,0 @@
-b229f74d58ec12ae4375dc666928d118938e19e4

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.18/expo.modules.ui-56.0.18.aar.sha256

@@ -1 +0,0 @@
-c5040a0bd6a33de8ffca965c4d5e5953897f6776a239283b146d677e2e7221ed

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.18/expo.modules.ui-56.0.18.aar.sha512

@@ -1 +0,0 @@
-d10bffe2657a8f7e5e1886eec9a1404d7b6d5bcef4a50b6db763986302cbad9ae02c61a0f1996d52c2d558cc5dbc989f3ef5ad53cfc2370df88e643b377b19ee

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.18/expo.modules.ui-56.0.18.module.md5

@@ -1 +0,0 @@
-cfb5d19b5d8c8d355790d7d444b4a45e

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.18/expo.modules.ui-56.0.18.module.sha1

@@ -1 +0,0 @@
-0988151e459560e5e43657673bd44622ec339e10

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.18/expo.modules.ui-56.0.18.module.sha256

@@ -1 +0,0 @@
-daa61c8a7fb9d0f2e326c3018e5a459a828cde6430210274c43903bc38717d61

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.18/expo.modules.ui-56.0.18.module.sha512

@@ -1 +0,0 @@
-ab8cb4cd46417dda5090e5be5e92283e74982782289b297bb067b957bea5cfc8e2ee968da086be2a599dee0f85580dbc4686e06e15150b629c6e3e670eb44483

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.18/expo.modules.ui-56.0.18.pom.md5

@@ -1 +0,0 @@
-4b309ef8bee0c327f5959b979471a865

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.18/expo.modules.ui-56.0.18.pom.sha1

@@ -1 +0,0 @@
-8ebee813de77620f097bd91d83faf80624ff860d

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.18/expo.modules.ui-56.0.18.pom.sha256

@@ -1 +0,0 @@
-4d652208d530e23197763eb2f3b32fd084e6065ca63b29da0c3b454a07d586be

package/local-maven-repo/expo/modules/ui/expo.modules.ui/56.0.18/expo.modules.ui-56.0.18.pom.sha512

@@ -1 +0,0 @@
-8c2c74ce7cfe2b19bb8bf9999c7e9ab968616a25b6419741f99e93e8d15adde4d8e6fb59bd6eeb58b0b6293b21a17d6449438f960524ff163065d28b475b3140