@expo/ui 56.0.18 → 56.0.20

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/CLAUDE.md

@@ -1,54 +0,0 @@
-# expo-ui component guidelines
-
-expo-ui is a library of native UI components for React Native, bridging SwiftUI views on iOS and Jetpack Compose components on Android. Each platform has its own set of components exported from `@expo/ui/swift-ui` and `@expo/ui/jetpack-compose` respectively.
-
-## Core principle
-
-Bridge native components to JavaScript with as little abstraction as possible. Native views should be thin wrappers — no added logic, state management, or behavior beyond what the platform component provides. Everything that can be set or controlled from JavaScript should be controlled from JavaScript.
-
-Mirror the native API shape. If the underlying SwiftUI / Compose component exposes imperative methods (e.g. SwiftUI's `ScrollViewProxy.scrollTo`, Compose's `PagerState.animateScrollToPage`), expose them as imperative methods in JS — don't paper them over with a controlled prop + sync layer just for the sake of a "React-y" API.
-
-## Naming
-
-- The JavaScript API must mirror the native APIs closely.
-- Exported components must have the same name as the underlying native component (e.g. SwiftUI `TabView` -> export `TabView`, Jetpack Compose `HorizontalPager` -> export `HorizontalPager`).
-- Don't turn native-layer modifiers into props in the JS layer — modifiers stay as modifiers.
-- Use `export function ComponentName` (the dominant pattern in this codebase). Use `export const` only for non-component values like modifiers or constants. Avoid the `export { LocalName as ExportName }` rename pattern unless the local name must differ.
-- Props, constants, and enum values must use the same names as the native API. If SwiftUI calls it `scrollEnabled`, the JS prop is `scrollEnabled`. If Compose calls it `userScrollEnabled`, the JS prop is `userScrollEnabled`.
-- Ensure components have the correct display name in React DevTools. Either name the function directly (e.g. `function TabView`) or set `.displayName`.
-
-## Props and events
-
-- Include JSDoc for every supported prop.
-- Events follow the expo-ui `ViewEvent` pattern: the public JS callback receives unwrapped values (e.g. `onPageSelected?: (position: number) => void`), and the component internally adapts to/from the native event shape.
-
-## Native code
-
-- Expose all configurable properties of the underlying native component as props. Don't hardcode values that the user might want to change.
-- Use `@Field` (iOS) and data class fields (Android) for props, `EventDispatcher` for events, and `AsyncFunction` for imperative methods when unavoidable.
-
-## File structure
-
-- iOS (SwiftUI): `packages/expo-ui/ios/<ComponentName>/<ComponentName>View.swift` (or `ios/<ComponentName>View.swift` for simple components)
-- Android (Compose): `packages/expo-ui/android/src/main/java/expo/modules/ui/<ComponentName>View.kt`
-- TypeScript (SwiftUI): `packages/expo-ui/src/swift-ui/<ComponentName>/index.tsx`
-- TypeScript (Compose): `packages/expo-ui/src/jetpack-compose/<ComponentName>/index.tsx`
-- Register views in `ios/ExpoUIModule.swift` and `android/.../ExpoUIModule.kt`
-- Export from `src/swift-ui/index.tsx` and `src/jetpack-compose/index.ts`
-
-## Example screens
-
-For every component added, create example screens in NCL (native-component-list):
-
-- `apps/native-component-list/src/screens/UI/<ComponentName>Screen.ios.tsx` — imports from `@expo/ui/swift-ui`
-- `apps/native-component-list/src/screens/UI/<ComponentName>Screen.android.tsx` — imports from `@expo/ui/jetpack-compose`
-- Register in both `UIScreen.ios.tsx` and `UIScreen.android.tsx`
-- Keep the minimum set of examples needed to cover available features.
-
-## Before committing
-
-1. Run `pnpm build` in the package directory — the `build/` output must be committed alongside source changes. CI will fail otherwise.
-2. Run `pnpm lint --max-warnings 0`.
-3. Add a changelog entry to `CHANGELOG.md` under the "Unpublished" section.
-4. When adding a new component, add documentation for it. When adding a new feature to an existing component, update its documentation accordingly. Docs are MDX files in `docs/pages/versions/unversioned/sdk/ui/swift-ui/` and `docs/pages/versions/unversioned/sdk/ui/jetpack-compose/`.
-5. Regenerate API docs data by running `et gdad -p @expo/ui`. If the change is to be cherry-picked to an already-released SDK version, also run `et gdad -p @expo/ui -s <version>` (e.g. `et gdad -p @expo/ui -s 55` for SDK 55). Changes are very likely to be picked to the latest stable of expo-ui (`npm view @expo/ui version`).

package/CONTRIBUTING.md

@@ -1,30 +0,0 @@
-# Contributing to `@expo/ui`
-
-`@expo/ui` maps native UI frameworks (SwiftUI on iOS, Jetpack Compose on Android) to React Native.
-
-## Before opening a PR
-
-- [ ] Rebuilt JS output: `yarn build` (from `packages/expo-ui/`) and committed the `build/` output.
-
-### When adding or updating a component
-
-- [ ] Added an example to the relevant screen in `apps/native-component-list/src/screens/UI/`
-- [ ] Regenerated docs (from repo root): `et gdad -p "expo-ui/swift-ui/<component>"` and/or `et gdad -p "expo-ui/jetpack-compose/<component>"`
-- [ ] Added an example in the relevant docs page
-
-### When adding or updating a modifier
-
-- [ ] Added an example to the relevant screen in `apps/native-component-list/src/screens/UI/`
-- [ ] Regenerated docs (from repo root): `et gdad -p "expo-ui/swift-ui/modifiers"` and/or `et gdad -p "expo-ui/jetpack-compose/modifiers"`
-
-## Project structure
-
-- `packages/expo-ui/ios/` - Swift/SwiftUI source files
-- `packages/expo-ui/android/` - Kotlin/Jetpack Compose source files
-- `packages/expo-ui/src/swift-ui/` - TypeScript components and types for the SwiftUI side
-- `packages/expo-ui/src/jetpack-compose/` - TypeScript components and types for the Compose side
-
-## General guidelines
-
-- **Match the native APIs** — prop names, types, and behavior should mirror their SwiftUI / Jetpack Compose counterparts as closely as possible.
-- **Reuse existing types** — before creating a new Record or TypeScript type, check if one already exists.

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