expo-interface 0.1.1 → 0.2.0

package/README.md

@@ -107,17 +107,18 @@ positioning and `<dialog>`.
 | [TextField](src/text-field/types.ts) | Single or multiline text input with keyboard type, capitalization and secure entry | ✓ | ✓ | ✓ |
 | [Switch](src/switch/types.ts) | On/off toggle with a leading label | ✓ | ✓ | ✓ |
 | [Checkbox](src/checkbox/types.ts) | Checked/unchecked box with a leading label | ✓ | ✓ | ✓ |
+| [ColorPicker](src/color-picker/types.ts) | Label with a rainbow-ringed color well that opens the iOS-style color picker (Grid, Spectrum, Sliders, opacity) | ✓ | ✓ | ✓ |
 | [Slider](src/slider/types.ts) | Thumb dragged along a continuous or stepped range | ✓ | ✓ | ✓ |
 | [Stepper](src/stepper/types.ts) | Number adjusted with increment and decrement buttons | ✓ | ✓ | ✓ |
 | [Picker](src/picker/types.ts) | Dropdown that selects one option from a list | ✓ | ✓ | ✓ |
 | [SegmentedControl](src/segmented/types.ts) | Row of segments that selects one option | ✓ | ✓ | ✓ |
 | [DateTimePicker](src/date-time/types.ts) | Picks a date, a time or both, with optional bounds | ✓ | ✓ | ✓ |
 | [Progress](src/progress/types.ts) | Linear bar or circular ring, determinate or indeterminate | ✓ | ✓ | ✓ |
+| [Gauge](src/gauge/types.ts) | Value within a range in the SwiftUI gauge styles: capacity bars, marker bar, open or closed ring | ✓ | ✓ | ✓ |
 | [Menu](src/menu/types.ts) | Dropdown menu of actions opened from a button | ✓ | ✓ | ✓ |
 | [ContextMenu](src/menu/types.ts) | Menu of actions opened by long-pressing (or right-clicking) its content | ✓ | ✓ | ✓ |
 | [Tooltip](src/tooltip/types.ts) | Short hint shown on hover, focus or long-press; an accessibility hint on iOS | | ✓ | ✓ |
 | [Alert](src/alert/types.ts) | Modal dialog or action sheet with a title, message and actions | ✓ | ✓ | ✓ |
-| [QRCode](src/qr/index.tsx) | Renders a value as a QR code image | ✓ | ✓ | ✓ |
 | [ExternalLink](src/router/external-link.tsx) | Link that opens in an in-app browser on native and a new tab on web | ✓ | ✓ | ✓ |
 | [Typography](src/typography/types.ts) | Text in the platform type scale, with `Title`, `Body`, `Caption` and other variants as shortcuts | ✓ | ✓ | ✓ |
 
@@ -242,27 +243,37 @@ package from `../src`, so it doubles as the development harness.
 bun install        # bun >= 1.4
 bun run web        # or ios, android
 bun run typecheck  # package, example and storybook
-bun run lint       # eslint (eslint-config-expo)
+bun run lint       # oxlint
 bun run test       # vitest, once per platform (ios, android, web)
 bun run test:ui    # vitest watch mode with the browser UI
 ```
 
 ### Storybook
 
-Stories live next to each component (`src/<name>/<name>.stories.tsx`) and run
-in the [storybook](./storybook) app, an Expo project built on
-`@storybook/react-native`, so every story renders the real SwiftUI, Compose
-or DOM control through Metro.
+Stories live next to each component (`src/<name>/<name>.stories.tsx`) and are
+shared by two Storybooks in the [storybook](./storybook) workspace:
+
+- **Web** (`storybook/.storybook`): `@storybook/react-native-web-vite`, so the
+  site has the full Storybook manager — MDX guides in `storybook/docs/`, an
+  autogenerated docs page with a props table per component, controls, a
+  black/white theme that follows the OS scheme and a toolbar to force light or
+  dark. This is the documentation site published to GitHub Pages.
+- **On-device** (`storybook/.rnstorybook`): `@storybook/react-native` through
+  Metro, rendering the real SwiftUI and Compose controls on iOS and Android.
 
 ```sh
-bun run storybook:web      # storybook in the browser
+bun run storybook:web      # web storybook + docs site (Vite)
 bun run storybook:ios      # or storybook:android — on-device storybook
-bun run storybook:build    # static web export in storybook/dist
+bun run storybook:build    # static web build in storybook/dist
+bun run storybook:test     # every story as a Vitest test in headless Chromium
 ```
 
-The global decorator (`storybook/.rnstorybook/preview.tsx`) wraps stories in
+The shared decorator (`storybook/src/frame.tsx`) wraps stories in
 `AccentProvider` and an accent-seeded `@expo/ui` `Host`. Stories built from
-plain React Native views opt out with `parameters: {native: false}`.
+plain React Native views opt out with `parameters: {native: false}`; a story
+can pick an accent with `parameters: {accent: '#8959EA'}`. The web build runs
+the kit through Vite with the same Metro-compat plugin as the Vitest web
+project (`vitest/metro-compat.ts`).
 
 ### Tests
 
@@ -285,6 +296,16 @@ props are the payload sent to SwiftUI/Compose, and `src/__tests__/native.ts`
 has helpers to assert on them. `bun run test:coverage` writes an interactive
 HTML test report to `test-report/` and coverage to `coverage/`.
 
+The stories double as tests: `@storybook/addon-vitest`
+(`storybook/vitest.config.mts`) renders every web story in headless Chromium
+through Vitest browser mode, so a story that throws while mounting fails the
+run, and `@storybook/addon-a11y` runs axe-core on each rendered story as part
+of it (`parameters.a11y.test: 'error'`; the `color-contrast` rule is off
+because the palette follows the iOS system colors). `bun run storybook:test` runs them from the CLI (Playwright's Chromium
+must be installed: `bunx playwright install chromium` in `storybook/`); in
+`storybook:web` the testing widget at the bottom of the sidebar runs them
+live.
+
 ### CI
 
 GitHub Actions ([.github/workflows](./.github/workflows)):
@@ -293,7 +314,8 @@ GitHub Actions ([.github/workflows](./.github/workflows)):
   (HTML report and coverage as artifacts), a Metro export of the example app
   for ios, android and web (proves every platform file and
   `@expo/material-symbols` asset resolves without Xcode or Gradle), and a web
-  Storybook build uploaded as an artifact.
+  Storybook build uploaded as an artifact after its stories pass as Vitest
+  browser tests.
 - **Storybook** (`storybook.yml`) — on push to `master`: publishes the web
   Storybook to GitHub Pages, with the Vitest HTML report at `/tests` and
   coverage at `/coverage`. Enable Pages with the "GitHub Actions" source in

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-interface",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Native-first universal UI kit for Expo — SwiftUI on iOS, Jetpack Compose on Android, real DOM on web — built on @expo/ui.",
   "license": "MIT",
   "author": "kat-tax",
@@ -48,7 +48,7 @@
   ],
   "scripts": {
     "typecheck": "tsc --noEmit && bun run --cwd example typecheck && bun run --cwd storybook typecheck",
-    "lint": "eslint . --max-warnings 0",
+    "lint": "oxlint --max-warnings 0",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
@@ -61,11 +61,9 @@
     "storybook:ios": "bun run --cwd storybook ios",
     "storybook:android": "bun run --cwd storybook android",
     "storybook:build": "bun run --cwd storybook build",
+    "storybook:test": "bun run --cwd storybook test",
     "test:ui": "vitest --ui"
   },
-  "dependencies": {
-    "qrcode-generator": "^2.0.4"
-  },
   "peerDependencies": {
     "@expo/material-symbols": "*",
     "@expo/ui": "^57.0.0",
@@ -91,13 +89,10 @@
     "@testing-library/react": "^16.3.3",
     "@testing-library/react-native": "^14.0.1",
     "@types/react": "~19.2.2",
-    "@typescript-eslint/parser": "8.59.0",
     "@vitest/coverage-v8": "^4.1.11",
     "@vitest/ui": "^4.1.11",
-    "eslint": "^9.39.5",
-    "eslint-config-expo": "~57.0.2",
-    "globals": "^16.0.0",
     "jsdom": "^30.0.1",
+    "oxlint": "^1.81.0",
     "test-renderer": "^1.2.0",
     "typescript": "~6.0.3",
     "vite": "^8.2.2",

package/src/alert/alert.css

@@ -23,9 +23,9 @@
 .ui-alert__body {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  text-align: center;
+  align-items: flex-start;
+  gap: 16px;
+  text-align: left;
 }
 
 .ui-alert__actions {

package/src/alert/index.tsx

@@ -17,8 +17,7 @@ export function Alert({title, message, visible, onDismiss, actions = DEFAULT_ACT
   const {cancel, others} = splitActions(actions);
 
   useEffect(() => {
-    const dialog = ref.current;
-    if (!dialog) return;
+    const dialog = ref.current!;
     if (visible && !dialog.open) dialog.showModal();
     else if (!visible && dialog.open) dialog.close();
   }, [visible]);

package/src/button/button.css

@@ -6,6 +6,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  /* Hug the content even inside a flex column that stretches its children. */
+  width: fit-content;
   border-radius: 999px;
   border: 1px solid transparent;
   padding: 10px 18px;
@@ -90,6 +92,10 @@
   padding-inline: 14px;
 }
 
+.ui-button--fill {
+  width: 100%;
+}
+
 .ui-button--destructive {
   --ui-button-accent: var(--color-destructive);
   --ui-button-on-accent: var(--color-on-destructive);

package/src/button/index.android.tsx

@@ -1,5 +1,5 @@
 import type {ButtonProps, ButtonShape, ButtonVariant} from './types';
-import {testID as testIDModifier, width} from '@expo/ui/jetpack-compose/modifiers';
+import {fillMaxWidth, testID as testIDModifier, width, wrapContentHeight, wrapContentWidth} from '@expo/ui/jetpack-compose/modifiers';
 import {Button as ComposeButton, OutlinedButton, TextButton, Icon, IconButton, FilledIconButton, OutlinedIconButton, Spacer, Shape, Text} from '@expo/ui/jetpack-compose';
 import {SIZE_ICON, SIZE_TEXT, androidContentPadding} from './shared';
 import {onAccent as contrastOf} from '../accent';
@@ -47,6 +47,7 @@ export function Button({
   suffixIcon,
   hideLabel = false,
   disabled,
+  fillWidth = false,
   testID,
 }: ButtonProps) {
   const themeTint = useColor('tint');
@@ -63,7 +64,13 @@ export function Button({
   const iconSize = SIZE_ICON[size];
   const textSize = SIZE_TEXT[size];
   const resolvedShape = resolveShape(shape);
-  const modifiers = testID ? [testIDModifier(testID)] : [];
+  // A `Host` measures a direct child with its own (tight) constraints, which
+  // a Compose button would fill on both axes; wrap to the content instead.
+  const modifiers = [
+    fillWidth ? fillMaxWidth() : wrapContentWidth('start'),
+    wrapContentHeight('top'),
+  ];
+  if (testID) modifiers.push(testIDModifier(testID));
   const iconOnly = hideLabel && !!prefixIcon?.drawable;
 
   if (iconOnly) {

package/src/button/index.ios.tsx

@@ -4,6 +4,7 @@ import {Button as SwiftUIButton, HStack, Image, Text} from '@expo/ui/swift-ui';
 import {buttonStyle, buttonBorderShape, controlSize, labelStyle, tint, disabled as disabledMod} from '@expo/ui/swift-ui/modifiers';
 import {ICON_GAP, SIZE_ICON, iosSymbol, swiftBorderShape, swiftControlSize} from './shared';
 import {onAccent as contrastOf} from '../accent';
+import {fillWidth as fillWidthModifiers} from '../fill';
 import {useColor} from '../theme';
 
 const VARIANT_STYLE: Record<ButtonVariant, 'borderedProminent' | 'bordered' | 'plain'> = {
@@ -29,6 +30,7 @@ export function Button({
   suffixIcon,
   hideLabel = false,
   disabled,
+  fillWidth = false,
   testID,
 }: ButtonProps) {
   const themeTint = useColor('tint');
@@ -49,17 +51,20 @@ export function Button({
   if (shape) modifiers.push(buttonBorderShape(swiftBorderShape(shape)));
   if (disabled) modifiers.push(disabledMod(true));
   if (iconOnly) modifiers.push(labelStyle('iconOnly'));
-  if (hasSuffix) {
+  // SwiftUI has no trailing-icon `Label`, and a bordered style only paints
+  // behind the label, so both cases compose the label by hand: the frame
+  // that fills the width goes on the label, not the button.
+  if ((hasSuffix || fillWidth) && !iconOnly) {
     return (
       <SwiftUIButton
         role={role === 'destructive' ? 'destructive' : 'default'}
         onPress={onPress}
         modifiers={modifiers}
         testID={testID}>
-        <HStack spacing={ICON_GAP}>
+        <HStack spacing={ICON_GAP} modifiers={fillWidth ? fillWidthModifiers : undefined}>
           {prefixIcon ? <Image systemName={iosSymbol(prefixIcon)} color={iconColor} size={SIZE_ICON[size]}/> : null}
           <Text>{label}</Text>
-          <Image systemName={iosSymbol(suffixIcon!)} color={iconColor} size={SIZE_ICON[size]}/>
+          {hasSuffix ? <Image systemName={iosSymbol(suffixIcon!)} color={iconColor} size={SIZE_ICON[size]}/> : null}
         </HStack>
       </SwiftUIButton>
     );

package/src/button/index.tsx

@@ -35,6 +35,7 @@ export function Button({
   suffixIcon,
   hideLabel = false,
   disabled = false,
+  fillWidth = false,
   testID,
   popoverTarget,
   popoverTargetAction,
@@ -58,6 +59,7 @@ export function Button({
     !shape && 'ui-button--pill',
     iconOnly && 'ui-button--icon-only',
     role === 'destructive' && 'ui-button--destructive',
+    fillWidth && 'ui-button--fill',
   ].filter(Boolean).join(' ');
 
   return (

package/src/button/types.ts

@@ -67,6 +67,13 @@ export interface ButtonProps {
   hideLabel?: boolean;
   /** Disables interaction and dims the button. */
   disabled?: boolean;
+  /**
+   * Stretch the button to its container's full width. By default the button
+   * hugs its content, even when the parent would stretch it (a flex column on
+   * web, a `Host` on Android).
+   * @default false
+   */
+  fillWidth?: boolean;
   /** Identifier used to locate the component in end-to-end tests. */
   testID?: string;
 }

package/src/checkbox/index.tsx

@@ -22,7 +22,7 @@ export function Checkbox({
 }: CheckboxProps) {
   const vars = {
     ...(accentColor ? {'--ui-checkbox-accent': accentColor} : null),
-    ...flatten((StyleSheet.flatten(style) ?? undefined) as TextStyle | undefined),
+    ...flatten(StyleSheet.flatten(style) as TextStyle),
   } as CSSProperties;
   const input = (
     <input

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

@@ -0,0 +1,66 @@
+/*
+ * 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;
+}

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

@@ -0,0 +1,117 @@
+import type {ColorPickerProps} from './types';
+import type {ModifierConfig} from '@expo/ui/jetpack-compose/modifiers';
+
+import {useEffect, useRef, useState} from 'react';
+import {StyleSheet, useWindowDimensions, View} from 'react-native';
+import {Image} from 'expo-image';
+import {
+  Column,
+  Host,
+  ModalBottomSheet,
+  RNHostView,
+  Row,
+  Spacer,
+  Text,
+  useMaterialColors,
+  type ModalBottomSheetRef,
+} from '@expo/ui/jetpack-compose';
+import {alpha, clickable, fillMaxWidth, padding, testID as testIDModifier} from '@expo/ui/jetpack-compose/modifiers';
+import {ColorPickerSheet} from './sheet';
+import {parseColor, ringSvg, svgDataUri, toCss, toHex, useColorValue, well} from './shared';
+
+const RING = svgDataUri(ringSvg());
+/** Horizontal inset of the sheet content (the `@expo/ui` `BottomSheet` default). */
+const SHEET_INSET = 16;
+
+/**
+ * Android redraws the iOS row: a Compose `Row` with the label and, hosted as
+ * a React Native view, the 28dp color well (rainbow ring, transparent gap,
+ * color swatch). 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 the same hosted subtree as the well, so the row stays a
+ * plain Compose child of its `Host`.
+ */
+export function ColorPicker({
+  label,
+  value,
+  onValueChange,
+  supportsOpacity = true,
+  disabled,
+  testID,
+}: ColorPickerProps) {
+  const colors = useMaterialColors();
+  const {width} = useWindowDimensions();
+  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));
+
+  return (
+    <Row verticalAlignment="center" horizontalArrangement="spaceBetween" modifiers={modifiers}>
+      {label != null ? (
+        <Text color={disabled ? colors.onSurfaceVariant : colors.onSurface}>{label}</Text>
+      ) : <Spacer/>}
+      <RNHostView matchContents modifiers={disabled ? [alpha(0.4)] : []}>
+        {/* `box-none` lets the tap fall through to the Compose row's `clickable`. */}
+        <View style={styles.well} pointerEvents="box-none" accessibilityLabel={`Selected color ${toHex(current, supportsOpacity)}`}>
+          <View style={styles.face} pointerEvents="none">
+            <Image source={{uri: RING}} style={StyleSheet.absoluteFill} contentFit="fill"/>
+            <View style={[styles.swatch, {backgroundColor: toCss(current)}]}/>
+          </View>
+          <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>
+        </View>
+      </RNHostView>
+    </Row>
+  );
+}
+
+/**
+ * The Material bottom sheet hosting the picker, mounted while `open` and
+ * unmounted after its hide animation (the `@expo/ui` `BottomSheet` pattern).
+ */
+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 (
+    <Host style={styles.sheetHost} pointerEvents="none">
+      <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>
+    </Host>
+  );
+}
+
+const inner = well.size - 2 * (well.ring + well.gap);
+
+const styles = StyleSheet.create({
+  well: {width: well.size, height: well.size},
+  face: {position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, alignItems: 'center', justifyContent: 'center'},
+  swatch: {width: inner, height: inner, borderRadius: inner / 2},
+  sheetHost: {position: 'absolute'},
+});

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

@@ -0,0 +1,33 @@
+import type {ColorPickerProps} from './types';
+import type {ViewModifier} from '@expo/ui/swift-ui/modifiers';
+
+import {ColorPicker as SwiftUIColorPicker} from '@expo/ui/swift-ui';
+import {disabled as disabledMod} from '@expo/ui/swift-ui/modifiers';
+
+/**
+ * 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.
+ */
+export function ColorPicker({
+  label,
+  value,
+  onValueChange,
+  supportsOpacity = true,
+  disabled,
+  testID,
+}: ColorPickerProps) {
+  const modifiers: ViewModifier[] = [];
+  if (disabled) modifiers.push(disabledMod(true));
+  return (
+    <SwiftUIColorPicker
+      label={label}
+      selection={value}
+      supportsOpacity={supportsOpacity}
+      onSelectionChange={onValueChange}
+      modifiers={modifiers}
+      testID={testID}
+    />
+  );
+}

package/src/color-picker/index.tsx

@@ -0,0 +1,62 @@
+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`.
+ */
+export function ColorPicker({
+  label,
+  value,
+  onValueChange,
+  supportsOpacity = true,
+  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;
+  return (
+    <>
+      <button
+        type="button"
+        className={['ui-color-picker', disabled && 'ui-color-picker--disabled'].filter(Boolean).join(' ')}
+        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}
+        <span className="ui-color-picker__well" aria-hidden="true">
+          <span className="ui-color-picker__swatch"/>
+        </span>
+      </button>
+      <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>
+    </>
+  );
+}