expo-interface 0.1.1 → 0.3.0

package/src/color-picker/color-picker.css

@@ -0,0 +1,136 @@
+/*
+ * The iOS ColorPicker row: label on the leading edge, the 28pt color well on
+ * the trailing edge. The well is a 3pt rainbow ring (yellow up, red right,
+ * blue down, green left), a 2pt transparent gap and an 18pt swatch.
+ */
+.ui-color-picker {
+  -webkit-appearance: none;
+  appearance: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-label);
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.ui-color-picker:disabled {
+  cursor: default;
+}
+
+.ui-color-picker--disabled {
+  opacity: 0.4;
+}
+
+.ui-color-picker__well {
+  position: relative;
+  flex-shrink: 0;
+  display: block;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: conic-gradient(
+    from 0deg,
+    hsl(60 100% 50%),
+    hsl(0 100% 50%) 60deg,
+    hsl(300 100% 50%) 120deg,
+    hsl(240 100% 50%) 180deg,
+    hsl(180 100% 50%) 240deg,
+    hsl(120 100% 50%) 300deg,
+    hsl(60 100% 50%)
+  );
+  -webkit-mask: radial-gradient(circle, transparent 10.5px, #000 11px);
+  mask: radial-gradient(circle, transparent 10.5px, #000 11px);
+}
+
+.ui-color-picker__swatch {
+  position: absolute;
+  inset: 5px;
+  display: block;
+  border-radius: 50%;
+  background: var(--ui-color-picker-value);
+}
+
+.ui-color-picker:focus-visible {
+  outline: 2px solid var(--color-tint);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+/*
+ * With presets the row is a `<div>`; the swatches and the well are buttons of
+ * their own. A preset is a 28px circle in its color; the selected one shrinks
+ * inside a 30px ring in the label color.
+ */
+.ui-color-picker--presets {
+  cursor: default;
+}
+
+.ui-color-picker__presets {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 8px;
+}
+
+.ui-color-picker__preset {
+  -webkit-appearance: none;
+  appearance: none;
+  position: relative;
+  width: 30px;
+  height: 30px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  cursor: pointer;
+}
+
+.ui-color-picker__preset::after {
+  content: '';
+  position: absolute;
+  inset: 1px;
+  border-radius: 50%;
+  background: var(--ui-color-picker-preset);
+}
+
+.ui-color-picker__preset--selected {
+  background: var(--color-label);
+}
+
+.ui-color-picker__preset--selected::after {
+  inset: 4px;
+}
+
+.ui-color-picker__open {
+  -webkit-appearance: none;
+  appearance: none;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.ui-color-picker__preset:disabled,
+.ui-color-picker__open:disabled {
+  cursor: default;
+}
+
+.ui-color-picker__preset:focus-visible,
+.ui-color-picker__open:focus-visible {
+  outline: 2px solid var(--color-tint);
+  outline-offset: 2px;
+  border-radius: 50%;
+}

package/src/color-picker/index.android.tsx

@@ -0,0 +1,145 @@
+import type {ColorPickerProps} from './types';
+import type {ModifierConfig} from '@expo/ui/jetpack-compose/modifiers';
+
+import {useEffect, useRef, useState} from 'react';
+import {useWindowDimensions} from 'react-native';
+import {
+  Box,
+  Column,
+  ModalBottomSheet,
+  RNHostView,
+  Row,
+  Spacer,
+  Text,
+  useMaterialColors,
+  type ModalBottomSheetRef,
+} from '@expo/ui/jetpack-compose';
+import {alpha, background, clickable, clip, fillMaxWidth, padding, Shapes, size, testID as testIDModifier} from '@expo/ui/jetpack-compose/modifiers';
+import {useColor} from '../theme';
+import {ColorPickerSheet} from './sheet';
+import {parseColor, toCss, toHex, useColorValue, well} from './shared';
+
+/** Horizontal inset of the sheet content (the `@expo/ui` `BottomSheet` default). */
+const SHEET_INSET = 16;
+/** Diameter of a preset swatch, and of its ring when selected. */
+const SWATCH = 30;
+const SWATCH_INNER = 28;
+const SWATCH_SELECTED = 22;
+const NONE = '#00000000';
+
+/**
+ * Android redraws the iOS row in Compose through and through: a `Row` with
+ * the label and, at the trailing edge, the preset swatches and the 28dp
+ * color well (a circle in the color, ringed in `separator`). Tapping the row
+ * opens the iOS picker redrawn in a Material `ModalBottomSheet`, fully
+ * expanded and with the sheet's own swipe gestures off so that dragging
+ * across the spectrum and sliders stays with the picker; the sheet lives in
+ * its own window, so the row is a plain Compose child of its host and hosts
+ * no React Native view of its own (which a recomposing list would re-add).
+ */
+export function ColorPicker({
+  label,
+  value,
+  onValueChange,
+  supportsOpacity = true,
+  swatches,
+  disabled,
+  testID,
+}: ColorPickerProps) {
+  const colors = useMaterialColors();
+  const {width} = useWindowDimensions();
+  const ring = useColor('separator');
+  const labelColor = useColor('label');
+  const [open, setOpen] = useState(false);
+  const [current, setCurrent] = useColorValue(value, onValueChange, supportsOpacity);
+  const modifiers: ModifierConfig[] = [fillMaxWidth()];
+  if (!disabled) modifiers.push(clickable(() => setOpen(true)));
+  if (testID) modifiers.push(testIDModifier(testID));
+  const currentHex = toHex({...current, a: 1}, false);
+
+  return (
+    <Row verticalAlignment="center" horizontalArrangement="spaceBetween" modifiers={modifiers}>
+      {label != null ? (
+        <Text color={disabled ? colors.onSurfaceVariant : colors.onSurface}>{label}</Text>
+      ) : <Spacer/>}
+      <Row verticalAlignment="center" horizontalArrangement={{spacedBy: 8}} modifiers={disabled ? [alpha(0.4)] : []}>
+        {swatches?.map(seed => {
+          const selected = toHex(parseColor(seed), false) === currentHex;
+          const inner = selected ? SWATCH_SELECTED : SWATCH_INNER;
+          return (
+            // The ring is a circle behind a smaller circle: a border modifier would be square.
+            <Box
+              key={seed}
+              contentAlignment="center"
+              modifiers={[
+                size(SWATCH, SWATCH),
+                clip(Shapes.Circle),
+                background(selected ? labelColor : NONE),
+                ...(disabled ? [] : [clickable(() => setCurrent({...parseColor(seed), a: current.a}))]),
+                ...(testID ? [testIDModifier(`${testID}-swatch-${seed}`)] : []),
+              ]}>
+              <Box modifiers={[size(inner, inner), clip(Shapes.Circle), background(seed)]}/>
+            </Box>
+          );
+        })}
+        <Box
+          contentAlignment="center"
+          modifiers={[
+            size(well.size, well.size),
+            clip(Shapes.Circle),
+            background(ring),
+            ...(testID ? [testIDModifier(`${testID}-well`)] : []),
+          ]}>
+          <Box
+            modifiers={[
+              size(well.size - 2 * well.ring, well.size - 2 * well.ring),
+              clip(Shapes.Circle),
+              background(toCss(current)),
+            ]}
+          />
+        </Box>
+        <PickerSheet open={open} onClose={() => setOpen(false)}>
+          <ColorPickerSheet
+            title={label ?? 'Colors'}
+            value={toHex(current, true)}
+            supportsOpacity={supportsOpacity}
+            onValueChange={hex => setCurrent(parseColor(hex))}
+            onClose={() => setOpen(false)}
+            width={width - SHEET_INSET * 2}
+            testID={testID ? `${testID}-sheet` : undefined}
+          />
+        </PickerSheet>
+      </Row>
+    </Row>
+  );
+}
+
+/**
+ * The Material bottom sheet hosting the picker, mounted while `open` and
+ * unmounted after its hide animation (the `@expo/ui` `BottomSheet` pattern).
+ * A Compose child of the row: the sheet presents in its own window, so the
+ * React Native picker inside it is hosted there, outside the form.
+ */
+function PickerSheet({open, onClose, children}: React.PropsWithChildren<{open: boolean; onClose: () => void}>) {
+  const ref = useRef<ModalBottomSheetRef>(null);
+  const [mounted, setMounted] = useState(open);
+  if (open && !mounted) setMounted(true);
+  useEffect(() => {
+    if (open) return;
+    let cancelled = false;
+    ref.current?.hide().then(() => {
+      if (!cancelled) setMounted(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [open]);
+  if (!mounted) return null;
+  return (
+    <ModalBottomSheet ref={ref} onDismissRequest={onClose} skipPartiallyExpanded sheetGesturesEnabled={false}>
+      <Column modifiers={[padding(SHEET_INSET, 0, SHEET_INSET, 0)]}>
+        <RNHostView matchContents>{children as React.ReactElement}</RNHostView>
+      </Column>
+    </ModalBottomSheet>
+  );
+}

package/src/color-picker/index.ios.tsx

@@ -0,0 +1,80 @@
+import type {ColorPickerProps} from './types';
+import type {ViewModifier} from '@expo/ui/swift-ui/modifiers';
+
+import {Button, ColorPicker as SwiftUIColorPicker, HStack, Spacer, Text, ZStack} from '@expo/ui/swift-ui';
+import {accessibilityLabel, background, buttonStyle, disabled as disabledMod, frame, labelsHidden, shapes} from '@expo/ui/swift-ui/modifiers';
+import {useColor} from '../theme';
+import {parseColor, toHex} from './shared';
+
+/** Diameter of a preset swatch, and of its ring when selected. */
+const SWATCH = 30;
+const SWATCH_INNER = 28;
+const SWATCH_SELECTED = 22;
+const NONE = '#00000000';
+
+/**
+ * iOS renders SwiftUI's `ColorPicker`: the label with the rainbow-ringed
+ * color well at the trailing edge, which opens the system color picker.
+ * SwiftUI reports the selection as `#RRGGBBAA` when opacity is supported and
+ * `#RRGGBB` otherwise; the other platforms mirror both formats. With
+ * `swatches` the row is composed by hand: the label, a spacer, the preset
+ * circles (the selected one ringed in the label color) and the picker's
+ * well with its own label hidden.
+ */
+export function ColorPicker({
+  label,
+  value,
+  onValueChange,
+  supportsOpacity = true,
+  swatches,
+  disabled,
+  testID,
+}: ColorPickerProps) {
+  const labelColor = useColor('label');
+  const modifiers: ViewModifier[] = [];
+  if (disabled) modifiers.push(disabledMod(true));
+  if (!swatches?.length) {
+    return (
+      <SwiftUIColorPicker
+        label={label}
+        selection={value}
+        supportsOpacity={supportsOpacity}
+        onSelectionChange={onValueChange}
+        modifiers={modifiers}
+        testID={testID}
+      />
+    );
+  }
+  const current = parseColor(value);
+  const currentHex = toHex({...current, a: 1}, false);
+  return (
+    <HStack spacing={8} modifiers={modifiers} testID={testID}>
+      {label != null ? <Text>{label}</Text> : null}
+      <Spacer/>
+      {swatches.map(seed => {
+        const selected = toHex(parseColor(seed), false) === currentHex;
+        const inner = selected ? SWATCH_SELECTED : SWATCH_INNER;
+        return (
+          <Button
+            key={seed}
+            onPress={() => onValueChange(toHex({...parseColor(seed), a: current.a}, supportsOpacity))}
+            modifiers={[buttonStyle('plain'), accessibilityLabel(`Color ${seed}`)]}>
+            <ZStack modifiers={[frame({width: SWATCH, height: SWATCH}), background(selected ? labelColor : NONE, shapes.circle())]}>
+              <ZStack modifiers={[frame({width: inner, height: inner}), background(seed, shapes.circle())]}>
+                <Spacer/>
+              </ZStack>
+            </ZStack>
+          </Button>
+        );
+      })}
+      <SwiftUIColorPicker
+        label={label}
+        selection={value}
+        supportsOpacity={supportsOpacity}
+        onSelectionChange={onValueChange}
+        modifiers={[labelsHidden()]}
+        testID={testID ? `${testID}-well` : undefined}
+      />
+    </HStack>
+  );
+}

package/src/color-picker/index.tsx

@@ -0,0 +1,112 @@
+import './color-picker.css';
+import type {CSSProperties} from 'react';
+import type {ColorPickerProps} from './types';
+
+import {useState} from 'react';
+import {StyleSheet, type TextStyle} from 'react-native';
+import {Label} from '../typography';
+import {Sheet} from '../sheet';
+import {flatten} from '../theme';
+import {ColorPickerSheet} from './sheet';
+import {parseColor, toCss, toHex, useColorValue} from './shared';
+
+/**
+ * On web the row is a native `<button>` holding the label and the color
+ * well — a conic rainbow ring around the selected color, as on iOS — which
+ * opens the iOS picker redrawn in the kit's `Sheet`. With `swatches` the row
+ * is a `<div>` instead, so each preset and the well are buttons of their
+ * own (buttons cannot nest).
+ */
+export function ColorPicker({
+  label,
+  value,
+  onValueChange,
+  supportsOpacity = true,
+  swatches,
+  disabled,
+  testID,
+  style,
+}: ColorPickerProps) {
+  const [open, setOpen] = useState(false);
+  const [current, setCurrent] = useColorValue(value, onValueChange, supportsOpacity);
+  const vars = {
+    '--ui-color-picker-value': toCss(current),
+    ...flatten(StyleSheet.flatten(style) as TextStyle),
+  } as CSSProperties;
+  const className = ['ui-color-picker', disabled && 'ui-color-picker--disabled'].filter(Boolean).join(' ');
+  const well = (
+    <span className="ui-color-picker__well" aria-hidden="true">
+      <span className="ui-color-picker__swatch"/>
+    </span>
+  );
+  const sheet = (
+    <Sheet isPresented={open} onDismiss={() => setOpen(false)}>
+      <ColorPickerSheet
+        title={label ?? 'Colors'}
+        value={toHex(current, true)}
+        supportsOpacity={supportsOpacity}
+        onValueChange={hex => setCurrent(parseColor(hex))}
+        onClose={() => setOpen(false)}
+        testID={testID ? `${testID}-sheet` : undefined}
+      />
+    </Sheet>
+  );
+
+  if (swatches?.length) {
+    const currentHex = toHex({...current, a: 1}, false);
+    return (
+      <>
+        <div className={`${className} ui-color-picker--presets`} style={vars} data-testid={testID}>
+          {label != null ? <Label color="label" style={{flexShrink: 1}}>{label}</Label> : null}
+          <span className="ui-color-picker__presets">
+            {swatches.map(seed => {
+              const selected = toHex(parseColor(seed), false) === currentHex;
+              return (
+                <button
+                  key={seed}
+                  type="button"
+                  className={['ui-color-picker__preset', selected && 'ui-color-picker__preset--selected'].filter(Boolean).join(' ')}
+                  style={{'--ui-color-picker-preset': seed} as CSSProperties}
+                  aria-label={`Color ${seed}`}
+                  aria-pressed={selected}
+                  disabled={disabled}
+                  onClick={() => setCurrent({...parseColor(seed), a: current.a})}
+                />
+              );
+            })}
+            <button
+              type="button"
+              className="ui-color-picker__open"
+              aria-label={label ?? 'Color'}
+              aria-haspopup="dialog"
+              aria-expanded={open}
+              disabled={disabled}
+              onClick={() => setOpen(true)}>
+              {well}
+            </button>
+          </span>
+        </div>
+        {sheet}
+      </>
+    );
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        className={className}
+        style={vars}
+        disabled={disabled}
+        aria-label={label == null ? 'Color' : undefined}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        onClick={() => setOpen(true)}
+        data-testid={testID}>
+        {label != null ? <Label color="label" style={{flexShrink: 1}}>{label}</Label> : null}
+        {well}
+      </button>
+      {sheet}
+    </>
+  );
+}

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];
+}