expo-interface 0.1.1 → 0.2.0

package/src/color-picker/shared.ts

@@ -0,0 +1,204 @@
+import {useCallback, useState} from 'react';
+
+/** Color channels: `r`, `g`, `b` in `0…255`, `a` in `0…1`. */
+export interface RGBA {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+}
+
+/** Geometry of the iOS color well, in points: a 28pt circle ringed by hues. */
+export const well = {size: 28, ring: 3, gap: 2} as const;
+
+/** iOS color grid: 12 hue columns, a gray row above 9 lightness rows. */
+export const grid = {columns: 12, rows: 10} as const;
+
+const HUES = [0, 30, 55, 80, 120, 160, 190, 210, 240, 270, 300, 330];
+
+const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n));
+const byte = (n: number) => clamp(Math.round(n), 0, 255);
+const hex2 = (n: number) => byte(n).toString(16).padStart(2, '0').toUpperCase();
+
+/** Parses `#RGB`, `#RGBA`, `#RRGGBB` or `#RRGGBBAA`; anything else is opaque black. */
+export function parseColor(input: string): RGBA {
+  const hex = /^#?([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.exec(input.trim())?.[1];
+  if (!hex) return {r: 0, g: 0, b: 0, a: 1};
+  const long = hex.length <= 4 ? hex.split('').map(c => c + c).join('') : hex;
+  const channel = (i: number) => parseInt(long.slice(i, i + 2), 16);
+  return {
+    r: channel(0),
+    g: channel(2),
+    b: channel(4),
+    a: long.length === 8 ? channel(6) / 255 : 1,
+  };
+}
+
+/** Formats as `#RRGGBBAA` when `alpha` is set, `#RRGGBB` otherwise (the iOS formats). */
+export function toHex({r, g, b, a}: RGBA, alpha: boolean): string {
+  const rgb = `#${hex2(r)}${hex2(g)}${hex2(b)}`;
+  return alpha ? `${rgb}${hex2(a * 255)}` : rgb;
+}
+
+/** CSS `rgba()` for the color, usable in DOM and React Native styles. */
+export function toCss({r, g, b, a}: RGBA): string {
+  return `rgba(${byte(r)}, ${byte(g)}, ${byte(b)}, ${Math.round(a * 1000) / 1000})`;
+}
+
+/** Hue `0…360`, saturation and value `0…1`. */
+export function rgbToHsv({r, g, b}: Pick<RGBA, 'r' | 'g' | 'b'>): {h: number; s: number; v: number} {
+  const max = Math.max(r, g, b) / 255;
+  const min = Math.min(r, g, b) / 255;
+  const delta = max - min;
+  let h = 0;
+  if (delta > 0) {
+    if (max === r / 255) h = ((g - b) / 255 / delta) % 6;
+    else if (max === g / 255) h = (b - r) / 255 / delta + 2;
+    else h = (r - g) / 255 / delta + 4;
+    h = (h * 60 + 360) % 360;
+  }
+  return {h, s: max === 0 ? 0 : delta / max, v: max};
+}
+
+export function hsvToRgb(h: number, s: number, v: number): Pick<RGBA, 'r' | 'g' | 'b'> {
+  const hue = ((h % 360) + 360) % 360;
+  const c = v * s;
+  const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
+  const m = v - c;
+  const sector = Math.floor(hue / 60);
+  const [r, g, b] = [
+    [c, x, 0],
+    [x, c, 0],
+    [0, c, x],
+    [0, x, c],
+    [x, 0, c],
+    [c, 0, x],
+  ][sector];
+  return {r: byte((r + m) * 255), g: byte((g + m) * 255), b: byte((b + m) * 255)};
+}
+
+export function hslToRgb(h: number, s: number, l: number): Pick<RGBA, 'r' | 'g' | 'b'> {
+  const v = l + s * Math.min(l, 1 - l);
+  return hsvToRgb(h, v === 0 ? 0 : 2 * (1 - l / v), v);
+}
+
+/** Color of a cell of the iOS grid: grays on the first row, then hues from light to dark. */
+export function gridColor(row: number, column: number): Pick<RGBA, 'r' | 'g' | 'b'> {
+  if (row === 0) {
+    const level = byte(255 * (1 - column / (grid.columns - 1)));
+    return {r: level, g: level, b: level};
+  }
+  const lightness = 0.9 - ((row - 1) / (grid.rows - 2)) * 0.75;
+  return hslToRgb(HUES[column], 1, lightness);
+}
+
+/**
+ * Color at a point of the iOS spectrum: hue runs down the vertical axis, and
+ * the horizontal axis goes from white through the pure hue to black.
+ */
+export function spectrumColor(x: number, y: number): Pick<RGBA, 'r' | 'g' | 'b'> {
+  const fx = clamp(x, 0, 1);
+  const h = clamp(y, 0, 1) * 360;
+  return fx <= 0.5 ? hsvToRgb(h, fx * 2, 1) : hsvToRgb(h, 1, (1 - fx) * 2);
+}
+
+/** Closest spectrum point (`0…1` each) for a color. */
+export function spectrumPosition(color: Pick<RGBA, 'r' | 'g' | 'b'>): {x: number; y: number} {
+  const {h, s, v} = rgbToHsv(color);
+  return {x: v < 1 ? 1 - v / 2 : s / 2, y: h / 360};
+}
+
+/** Base64 of an ASCII string (no `btoa` on every React Native runtime). */
+function base64(ascii: string): string {
+  const table = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+  let out = '';
+  for (let i = 0; i < ascii.length; i += 3) {
+    const a = ascii.charCodeAt(i);
+    const b = ascii.charCodeAt(i + 1);
+    const c = ascii.charCodeAt(i + 2);
+    const bits = (a << 16) | ((b || 0) << 8) | (c || 0);
+    out += table[bits >> 18] + table[(bits >> 12) & 63];
+    out += Number.isNaN(b) ? '=' : table[(bits >> 6) & 63];
+    out += Number.isNaN(c) ? '=' : table[bits & 63];
+  }
+  return out;
+}
+
+export function svgDataUri(svg: string): string {
+  return `data:image/svg+xml;base64,${base64(svg)}`;
+}
+
+/** Hue at a clockwise angle from the top of the well ring (yellow up, red right, blue down, green left). */
+export const ringHue = (angle: number) => (60 - angle + 360) % 360;
+
+/** The well's rainbow ring as an SVG: 60 arc segments around a transparent center. */
+export function ringSvg(): string {
+  const r = 50 - (well.ring / well.size) * 50;
+  const stroke = (well.ring / well.size) * 100;
+  const step = 6;
+  const point = (deg: number) => {
+    const a = ((deg - 90) * Math.PI) / 180;
+    return `${(50 + r * Math.cos(a)).toFixed(2)} ${(50 + r * Math.sin(a)).toFixed(2)}`;
+  };
+  let paths = '';
+  for (let deg = 0; deg < 360; deg += step) {
+    const {r: cr, g: cg, b: cb} = hsvToRgb(ringHue(deg + step / 2), 1, 1);
+    paths += `<path d="M${point(deg)}A${r} ${r} 0 0 1 ${point(deg + step + 0.5)}" stroke="rgb(${cr},${cg},${cb})"/>`;
+  }
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none" stroke-width="${stroke}">${paths}</svg>`;
+}
+
+/** The spectrum as an SVG: a vertical hue gradient under a white→clear→black one. */
+export function spectrumSvg(): string {
+  const hues = [0, 60, 120, 180, 240, 300, 360]
+    .map(h => {
+      const {r, g, b} = hsvToRgb(h, 1, 1);
+      return `<stop offset="${h / 3.6}%" stop-color="rgb(${r},${g},${b})"/>`;
+    })
+    .join('');
+  return (
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">' +
+    `<linearGradient id="h" x1="0" y1="0" x2="0" y2="1">${hues}</linearGradient>` +
+    '<linearGradient id="l" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#fff"/>' +
+    '<stop offset="0.5" stop-color="#fff" stop-opacity="0"/><stop offset="0.5" stop-color="#000" stop-opacity="0"/>' +
+    '<stop offset="1" stop-color="#000"/></linearGradient>' +
+    '<rect width="100" height="100" fill="url(#h)"/><rect width="100" height="100" fill="url(#l)"/></svg>'
+  );
+}
+
+/** Checkerboard shown behind translucent colors. */
+export function checkerSvg(): string {
+  return (
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">' +
+    '<rect width="16" height="16" fill="#fff"/><rect width="8" height="8" fill="#d9d9d9"/>' +
+    '<rect x="8" y="8" width="8" height="8" fill="#d9d9d9"/></svg>'
+  );
+}
+
+/**
+ * Controlled color state for the pickers: the picked color is kept locally so
+ * the sheet follows the user's drag even before the parent re-renders, and
+ * every change is reported in the iOS hex format.
+ */
+export function useColorValue(
+  value: string,
+  onValueChange: (hex: string) => void,
+  supportsOpacity: boolean,
+): [RGBA, (next: RGBA) => void] {
+  const [current, setCurrent] = useState(() => parseColor(value));
+  // Re-derive the local color when the controlling parent changes `value`.
+  const [seen, setSeen] = useState(value);
+  if (seen !== value) {
+    setSeen(value);
+    setCurrent(parseColor(value));
+  }
+  const update = useCallback(
+    (next: RGBA) => {
+      const color = supportsOpacity ? next : {...next, a: 1};
+      setCurrent(color);
+      onValueChange(toHex(color, supportsOpacity));
+    },
+    [onValueChange, supportsOpacity],
+  );
+  return [current, update];
+}

package/src/color-picker/sheet.tsx

@@ -0,0 +1,432 @@
+import type {GestureResponderEvent, LayoutChangeEvent} from 'react-native';
+import type {RGBA} from './shared';
+
+import {useCallback, useState} from 'react';
+import {Pressable, StyleSheet, Text, TextInput, useColorScheme, View} from 'react-native';
+import {Image} from 'expo-image';
+import {fonts, fontWeights, useColor} from '../theme';
+import {
+  checkerSvg,
+  grid,
+  gridColor,
+  parseColor,
+  spectrumColor,
+  spectrumPosition,
+  spectrumSvg,
+  svgDataUri,
+  toCss,
+  toHex,
+  useColorValue,
+} from './shared';
+
+/**
+ * The iOS system color picker (`UIColorPickerViewController`) redrawn with
+ * React Native views, shown in a bottom sheet on Android and web. A title
+ * row with a close button, a Grid / Spectrum / Sliders segmented control, an
+ * opacity slider and a footer with the preview swatch and saved colors.
+ * The spectrum and the checkerboard are static SVGs; the slider tracks are
+ * bands of solid segments, so dragging never decodes an image.
+ */
+export interface ColorPickerSheetProps {
+  /** Title of the picker, the row's label on iOS. */
+  title: string;
+  /** Selected color as `#RRGGBB` or `#RRGGBBAA`. */
+  value: string;
+  /** Shows the opacity slider. */
+  supportsOpacity: boolean;
+  /** Called with the new hex whenever the user picks a color. */
+  onValueChange: (hex: string) => void;
+  /** Called from the close button. */
+  onClose: () => void;
+  /** Fixed content width (Android sizes the hosted React Native tree from its content). */
+  width?: number;
+  /** Identifier used to locate the sheet in end-to-end tests. */
+  testID?: string;
+}
+
+export type ColorPickerTab = 'grid' | 'spectrum' | 'sliders';
+
+const TABS: {value: ColorPickerTab; label: string}[] = [
+  {value: 'grid', label: 'Grid'},
+  {value: 'spectrum', label: 'Spectrum'},
+  {value: 'sliders', label: 'Sliders'},
+];
+
+const SPECTRUM = svgDataUri(spectrumSvg());
+const CHECKER = svgDataUri(checkerSvg());
+const THUMB = 28;
+const TRACK = 36;
+const THUMB_INSET = (TRACK - THUMB) / 2;
+const SEGMENTS = 32;
+const HANDLE = 28;
+const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n));
+
+/** Colors the user saved with the `+` button, shared by every picker for the session. */
+let savedColors: RGBA[] = [];
+
+const responder = (handler: (x: number, y: number) => void) => ({
+  onStartShouldSetResponder: () => true,
+  onMoveShouldSetResponder: () => true,
+  onResponderTerminationRequest: () => false,
+  onResponderGrant: (event: GestureResponderEvent) => handler(event.nativeEvent.locationX, event.nativeEvent.locationY),
+  onResponderMove: (event: GestureResponderEvent) => handler(event.nativeEvent.locationX, event.nativeEvent.locationY),
+});
+
+export function ColorPickerSheet({title, value, supportsOpacity, onValueChange, onClose, width, testID}: ColorPickerSheetProps) {
+  const [tab, setTab] = useState<ColorPickerTab>('grid');
+  const [color, setColor] = useColorValue(value, onValueChange, supportsOpacity);
+  const [saved, setSaved] = useState(savedColors);
+  const label = useColor('label');
+  const secondary = useColor('secondaryLabel');
+  const fill = useColor('pillBackground');
+  const separator = useColor('separator');
+  const css = toCss(color);
+
+  const save = () => {
+    savedColors = [...savedColors, color];
+    setSaved(savedColors);
+  };
+
+  return (
+    <View style={[styles.sheet, width != null ? {width} : styles.fill]} testID={testID}>
+      <View style={styles.header}>
+        <Text style={[styles.title, {color: label}]} numberOfLines={1} role="heading" accessible>{title}</Text>
+        <Pressable
+          role="button"
+          aria-label="Close"
+          onPress={onClose}
+          style={[styles.close, {backgroundColor: fill}]}>
+          <Text style={[styles.closeGlyph, {color: secondary}]}>✕</Text>
+        </Pressable>
+      </View>
+      <Tabs value={tab} onChange={setTab}/>
+      <View style={styles.section}>
+        {tab === 'grid' ? <Grid color={color} onChange={setColor}/> : null}
+        {tab === 'spectrum' ? <Spectrum color={color} onChange={setColor}/> : null}
+        {tab === 'sliders' ? <Sliders color={color} onChange={setColor}/> : null}
+      </View>
+      {supportsOpacity ? (
+        <View style={styles.section}>
+          <Text style={[styles.caption, {color: secondary}]}>OPACITY</Text>
+          <View style={styles.sliderRow}>
+            <Slider
+              label="Opacity"
+              value={color.a}
+              checkered
+              colorAt={t => toCss({...color, a: t})}
+              onChange={a => setColor({...color, a})}
+            />
+            <Field
+              label="Opacity percent"
+              value={`${Math.round(color.a * 100)}%`}
+              onCommit={text => setColor({...color, a: clamp(parseFloat(text) || 0, 0, 100) / 100})}
+            />
+          </View>
+        </View>
+      ) : null}
+      <View style={[styles.divider, {backgroundColor: separator}]}/>
+      <View style={styles.footer}>
+        <View style={styles.preview} aria-label={`Selected color ${toHex(color, supportsOpacity)}`}>
+          {color.a < 1 ? <Image source={{uri: CHECKER}} style={StyleSheet.absoluteFill} contentFit="cover"/> : null}
+          <View style={[StyleSheet.absoluteFill, {backgroundColor: css}]}/>
+        </View>
+        <View style={styles.saved}>
+          {saved.map((entry, index) => (
+            <Pressable
+              key={`${toHex(entry, true)}-${index}`}
+              role="button"
+              aria-label={`Saved color ${toHex(entry, true)}`}
+              onPress={() => setColor(entry)}
+              style={[styles.swatch, {backgroundColor: toCss(entry)}]}
+            />
+          ))}
+          <Pressable
+            role="button"
+            aria-label="Save color"
+            onPress={save}
+            style={[styles.swatch, {backgroundColor: fill}]}>
+            <Text style={[styles.plus, {color: secondary}]}>+</Text>
+          </Pressable>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+function Tabs({value, onChange}: {value: ColorPickerTab; onChange: (tab: ColorPickerTab) => void}) {
+  const dark = useColorScheme() === 'dark';
+  const label = useColor('label');
+  const fill = useColor('pillBackground');
+  return (
+    <View style={[styles.tabs, {backgroundColor: fill}]} role="radiogroup" aria-label="Picker">
+      {TABS.map(tab => {
+        const selected = tab.value === value;
+        return (
+          <Pressable
+            key={tab.value}
+            role="radio"
+            aria-label={`${tab.label} tab`}
+            aria-checked={selected}
+            onPress={() => onChange(tab.value)}
+            style={[styles.tab, selected && [styles.tabSelected, {backgroundColor: dark ? '#636366' : '#ffffff'}]]}>
+            <Text style={[styles.tabLabel, {color: label}, selected && styles.tabLabelSelected]}>{tab.label}</Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+function Grid({color, onChange}: {color: RGBA; onChange: (next: RGBA) => void}) {
+  const rows = Array.from({length: grid.rows}, (_, row) =>
+    Array.from({length: grid.columns}, (_, column) => gridColor(row, column)),
+  );
+  return (
+    <View style={styles.grid}>
+      {rows.map((cells, row) => (
+        <View key={row} style={styles.gridRow}>
+          {cells.map((cell, column) => {
+            const selected = cell.r === color.r && cell.g === color.g && cell.b === color.b;
+            return (
+              <Pressable
+                key={column}
+                role="button"
+                aria-label={`Color ${toHex({...cell, a: 1}, false)}`}
+                aria-selected={selected}
+                onPress={() => onChange({...cell, a: color.a})}
+                style={[styles.gridCell, {backgroundColor: toCss({...cell, a: 1})}]}>
+                {selected ? <View style={styles.gridSelected}/> : null}
+              </Pressable>
+            );
+          })}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+function Spectrum({color, onChange}: {color: RGBA; onChange: (next: RGBA) => void}) {
+  const [size, setSize] = useState({width: 0, height: 0});
+  const position = spectrumPosition(color);
+  const pick = (x: number, y: number) => {
+    if (!size.width || !size.height) return;
+    onChange({...spectrumColor(x / size.width, y / size.height), a: color.a});
+  };
+  return (
+    <View
+      {...responder(pick)}
+      role="slider"
+      aria-label="Spectrum"
+      aria-valuetext={toHex(color, false)}
+      onLayout={(event: LayoutChangeEvent) => setSize(event.nativeEvent.layout)}
+      style={styles.spectrum}>
+      <Image source={{uri: SPECTRUM}} style={StyleSheet.absoluteFill} contentFit="fill"/>
+      {size.width > 0 ? (
+        <View
+          pointerEvents="none"
+          style={[
+            styles.handle,
+            {
+              left: clamp(position.x * size.width, HANDLE / 2, size.width - HANDLE / 2) - HANDLE / 2,
+              top: clamp(position.y * size.height, HANDLE / 2, size.height - HANDLE / 2) - HANDLE / 2,
+              backgroundColor: toCss({...color, a: 1}),
+            },
+          ]}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+const CHANNELS = ['r', 'g', 'b'] as const;
+const CHANNEL_NAMES = {r: 'Red', g: 'Green', b: 'Blue'} as const;
+
+function Sliders({color, onChange}: {color: RGBA; onChange: (next: RGBA) => void}) {
+  const secondary = useColor('secondaryLabel');
+  return (
+    <View style={styles.sliders}>
+      {CHANNELS.map(channel => (
+        <View key={channel}>
+          <Text style={[styles.caption, {color: secondary}]}>{CHANNEL_NAMES[channel].toUpperCase()}</Text>
+          <View style={styles.sliderRow}>
+            <Slider
+              label={CHANNEL_NAMES[channel]}
+              value={color[channel] / 255}
+              colorAt={t => toCss({...color, a: 1, [channel]: t * 255})}
+              onChange={t => onChange({...color, [channel]: Math.round(t * 255)})}
+            />
+            <Field
+              label={`${CHANNEL_NAMES[channel]} value`}
+              value={String(color[channel])}
+              onCommit={text => onChange({...color, [channel]: clamp(Math.round(Number(text)) || 0, 0, 255)})}
+            />
+          </View>
+        </View>
+      ))}
+      <View style={styles.hexRow}>
+        <Text style={[styles.caption, styles.hexCaption, {color: secondary}]}>Display P3 Hex Color #</Text>
+        <Field
+          label="Hex color"
+          value={toHex(color, false).slice(1)}
+          wide
+          onCommit={text => {
+            if (!/^[0-9a-f]{3}$|^[0-9a-f]{6}$/i.test(text)) return;
+            onChange({...parseColor(text), a: color.a});
+          }}
+        />
+      </View>
+    </View>
+  );
+}
+
+interface SliderProps {
+  label: string;
+  /** Position `0…1`. */
+  value: number;
+  /** Color of the track at a position `0…1`. */
+  colorAt: (t: number) => string;
+  /** Draws a checkerboard under the track (for translucent colors). */
+  checkered?: boolean;
+  onChange: (value: number) => void;
+}
+
+/** A pill track banded with `SEGMENTS` solid colors and a ringed thumb, like the iOS color sliders. */
+function Slider({label, value, colorAt, checkered, onChange}: SliderProps) {
+  const [width, setWidth] = useState(0);
+  // The thumb travels inside the pill, inset by the ring around it.
+  const travel = Math.max(0, width - THUMB - 2 * THUMB_INSET);
+  const pick = (x: number) => {
+    if (!travel) return;
+    onChange(clamp((x - THUMB_INSET - THUMB / 2) / travel, 0, 1));
+  };
+  return (
+    <View
+      {...responder(pick)}
+      role="slider"
+      aria-label={label}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-valuenow={Math.round(value * 100)}
+      onLayout={(event: LayoutChangeEvent) => setWidth(event.nativeEvent.layout.width)}
+      style={styles.track}>
+      {checkered ? <Image source={{uri: CHECKER}} style={StyleSheet.absoluteFill} contentFit="cover"/> : null}
+      <View style={styles.band} pointerEvents="none">
+        {Array.from({length: SEGMENTS}, (_, i) => (
+          <View key={i} style={[styles.segment, {backgroundColor: colorAt((i + 0.5) / SEGMENTS)}]}/>
+        ))}
+      </View>
+      {width > 0 ? (
+        <View
+          pointerEvents="none"
+          style={[styles.thumb, {left: THUMB_INSET + value * travel, backgroundColor: colorAt(value)}]}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+interface FieldProps {
+  label: string;
+  value: string;
+  wide?: boolean;
+  /** Called with the typed text when editing ends or the return key is pressed. */
+  onCommit: (text: string) => void;
+}
+
+/** Rounded value box that commits when editing ends, like the iOS picker's fields. */
+function Field({label, value, wide, onCommit}: FieldProps) {
+  const [text, setText] = useState(value);
+  // Follow the picked color while the field is not being edited.
+  const [seen, setSeen] = useState(value);
+  if (seen !== value) {
+    setSeen(value);
+    setText(value);
+  }
+  const fill = useColor('pillBackground');
+  const color = useColor('label');
+  const commit = useCallback(() => onCommit(text), [onCommit, text]);
+  return (
+    <TextInput
+      aria-label={label}
+      value={text}
+      onChangeText={setText}
+      onSubmitEditing={commit}
+      onBlur={commit}
+      selectTextOnFocus
+      style={[styles.field, wide && styles.fieldWide, {backgroundColor: fill, color}]}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  sheet: {gap: 16},
+  fill: {alignSelf: 'stretch'},
+  header: {height: 44, alignItems: 'center', justifyContent: 'center'},
+  title: {
+    fontFamily: fonts?.sans,
+    fontSize: 17,
+    lineHeight: 22,
+    fontWeight: fontWeights.semibold,
+    marginHorizontal: 40,
+    textAlign: 'center',
+  },
+  close: {position: 'absolute', right: 0, width: 30, height: 30, borderRadius: 15, alignItems: 'center', justifyContent: 'center'},
+  closeGlyph: {fontFamily: fonts?.sans, fontSize: 15, lineHeight: 18, fontWeight: fontWeights.bold},
+  tabs: {flexDirection: 'row', padding: 2, borderRadius: 9},
+  tab: {flex: 1, height: 28, borderRadius: 7, alignItems: 'center', justifyContent: 'center'},
+  tabSelected: {
+    boxShadow: '0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04)',
+  },
+  tabLabel: {fontFamily: fonts?.sans, fontSize: 13, lineHeight: 18, fontWeight: fontWeights.medium},
+  tabLabelSelected: {fontWeight: fontWeights.semibold},
+  section: {gap: 8},
+  caption: {fontFamily: fonts?.sans, fontSize: 13, lineHeight: 18, fontWeight: fontWeights.normal, letterSpacing: 0.3},
+  grid: {aspectRatio: grid.columns / grid.rows, borderRadius: 10, overflow: 'hidden'},
+  gridRow: {flex: 1, flexDirection: 'row'},
+  gridCell: {flex: 1},
+  gridSelected: {flex: 1, borderWidth: 3, borderColor: '#ffffff', outlineWidth: 1, outlineColor: 'rgba(0, 0, 0, 0.35)', outlineOffset: -1},
+  spectrum: {aspectRatio: 361 / 337, borderRadius: 10, overflow: 'hidden'},
+  handle: {
+    position: 'absolute',
+    width: HANDLE,
+    height: HANDLE,
+    borderRadius: HANDLE / 2,
+    borderWidth: 3,
+    borderColor: '#ffffff',
+    boxShadow: '0 1px 4px rgba(0, 0, 0, 0.25)',
+  },
+  sliders: {gap: 12},
+  sliderRow: {flexDirection: 'row', alignItems: 'center', gap: 12},
+  track: {flex: 1, height: TRACK, borderRadius: TRACK / 2, overflow: 'hidden'},
+  band: {position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, flexDirection: 'row'},
+  segment: {flex: 1},
+  thumb: {
+    position: 'absolute',
+    top: (TRACK - THUMB) / 2,
+    width: THUMB,
+    height: THUMB,
+    borderRadius: THUMB / 2,
+    borderWidth: 3,
+    borderColor: '#ffffff',
+    boxShadow: '0 1px 4px rgba(0, 0, 0, 0.25)',
+  },
+  field: {
+    width: 72,
+    height: TRACK,
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    paddingVertical: 0,
+    fontFamily: fonts?.sans,
+    fontSize: 17,
+    textAlign: 'center',
+  },
+  fieldWide: {width: 112},
+  hexRow: {flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 12},
+  hexCaption: {flexShrink: 1},
+  divider: {height: StyleSheet.hairlineWidth},
+  footer: {flexDirection: 'row', gap: 16},
+  preview: {width: 72, height: 72, borderRadius: 12, overflow: 'hidden'},
+  saved: {flex: 1, flexDirection: 'row', flexWrap: 'wrap', gap: 12, alignContent: 'flex-start'},
+  swatch: {width: 30, height: 30, borderRadius: 15, alignItems: 'center', justifyContent: 'center'},
+  plus: {fontFamily: fonts?.sans, fontSize: 20, lineHeight: 24, fontWeight: fontWeights.medium},
+});

package/src/color-picker/types.ts

@@ -0,0 +1,34 @@
+import type {StyleProp, ViewStyle} from 'react-native';
+
+/**
+ * Cross-platform color picker: a row with a label and a color well that
+ * opens the system color picker.
+ *
+ * Bridges the SwiftUI `ColorPicker` on iOS. Android (Jetpack Compose) and
+ * web (DOM) redraw the iOS row — the label and the rainbow-ringed well — and
+ * open a sheet that reproduces the iOS picker: Grid, Spectrum and Sliders
+ * tabs, the opacity slider and the preview swatch with saved colors.
+ * A controlled control: pair `value` with `onValueChange`.
+ */
+export interface ColorPickerProps {
+  /** Label rendered at the leading edge of the row, and the title of the picker. */
+  label?: string;
+  /** Selected color as `#RRGGBB` or `#RRGGBBAA`. */
+  value: string;
+  /**
+   * Called with the new color whenever the user picks one, as `#RRGGBBAA`
+   * when `supportsOpacity` is on and `#RRGGBB` otherwise.
+   */
+  onValueChange: (value: string) => void;
+  /**
+   * Shows the opacity slider and reports the alpha channel.
+   * @default true
+   */
+  supportsOpacity?: boolean;
+  /** Disables interaction. */
+  disabled?: boolean;
+  /** Identifier used to locate the component in end-to-end tests. */
+  testID?: string;
+  /** Style applied to the row container (web only). */
+  style?: StyleProp<ViewStyle>;
+}