expo-interface 0.1.1 → 0.2.0

package/src/gauge/index.tsx

@@ -0,0 +1,165 @@
+import './gauge.css';
+import type {CSSProperties} from 'react';
+import type {GaugeProps} from './types';
+import {StyleSheet, type TextStyle} from 'react-native';
+import {flatten} from '../theme';
+import {fraction, gauge, markerOffset} from './shared';
+
+const polar = (angle: number, radius: number, center: number) => ({
+  x: center + radius * Math.cos((angle * Math.PI) / 180),
+  y: center + radius * Math.sin((angle * Math.PI) / 180),
+});
+
+/**
+ * On web each SwiftUI gauge style is redrawn with DOM elements (the bars)
+ * and inline SVG (the rings), sized in CSS pixels to the geometry measured
+ * from iOS. Colors flow through custom properties: the accent tints the
+ * indicator and the value labels, the descriptive label keeps the label
+ * color, and the marker knockout paints the scheme background.
+ */
+export function Gauge({
+  value,
+  min = 0,
+  max = 1,
+  variant = 'automatic',
+  label,
+  currentValueLabel,
+  minimumValueLabel,
+  maximumValueLabel,
+  accentColor,
+  testID,
+  style,
+}: GaugeProps) {
+  const f = fraction(value, min, max);
+  const vars = {
+    ...(accentColor ? {'--ui-gauge-accent': accentColor} : null),
+    ...flatten(StyleSheet.flatten(style) as TextStyle),
+  } as CSSProperties;
+  const meter = {
+    role: 'meter',
+    'aria-label': label,
+    'aria-valuemin': min,
+    'aria-valuemax': max,
+    'aria-valuenow': Math.min(max, Math.max(min, value)),
+    'aria-valuetext': currentValueLabel,
+  } as const;
+  const bounds = {
+    min: minimumValueLabel != null ? <span className="ui-gauge__bound">{minimumValueLabel}</span> : null,
+    max: maximumValueLabel != null ? <span className="ui-gauge__bound">{maximumValueLabel}</span> : null,
+  };
+
+  if (variant === 'circular' || variant === 'circularCapacity') {
+    const {size, stroke, arcStart, arcSweep, dot, knockout} = gauge.ring;
+    const center = size / 2;
+    const radius = (size - stroke) / 2;
+    const start = polar(arcStart, radius, center);
+    const end = polar(arcStart + arcSweep, radius, center);
+    const marker = markerOffset(f);
+    const circumference = 2 * Math.PI * radius;
+    const text = currentValueLabel ?? label;
+    return (
+      <div
+        {...meter}
+        className={`ui-gauge-ring ui-gauge-ring--${variant}`}
+        style={{...vars, width: size, height: size}}
+        data-testid={testID}>
+        <svg className="ui-gauge-ring__svg" width={size} height={size} viewBox={`0 0 ${size} ${size}`} aria-hidden="true">
+          {variant === 'circular' ? (
+            <>
+              <path
+                className="ui-gauge-ring__arc"
+                // The 240° sweep is always the large arc, drawn clockwise.
+                d={`M ${start.x} ${start.y} A ${radius} ${radius} 0 1 1 ${end.x} ${end.y}`}
+                fill="none"
+                strokeWidth={stroke}
+                strokeLinecap="round"
+              />
+              <circle className="ui-gauge-ring__knockout" cx={center + marker.x} cy={center + marker.y} r={knockout / 2}/>
+              <circle className="ui-gauge-ring__dot" cx={center + marker.x} cy={center + marker.y} r={dot / 2}/>
+            </>
+          ) : (
+            <>
+              <circle className="ui-gauge-ring__track" cx={center} cy={center} r={radius} fill="none" strokeWidth={stroke}/>
+              {f > 0 ? (
+                <circle
+                  className="ui-gauge-ring__fill"
+                  cx={center}
+                  cy={center}
+                  r={radius}
+                  fill="none"
+                  strokeWidth={stroke}
+                  strokeLinecap="round"
+                  strokeDasharray={`${f * circumference} ${circumference}`}
+                  transform={`rotate(-90 ${center} ${center})`}
+                />
+              ) : null}
+            </>
+          )}
+        </svg>
+        {text != null ? (
+          <span className={['ui-gauge-ring__center', currentValueLabel == null && 'ui-gauge-ring__center--label'].filter(Boolean).join(' ')}>
+            {text}
+          </span>
+        ) : null}
+        {variant === 'circular' && (bounds.min || bounds.max) ? (
+          <span className="ui-gauge-ring__bounds">
+            {bounds.min ?? <span/>}
+            {bounds.max ?? <span/>}
+          </span>
+        ) : null}
+      </div>
+    );
+  }
+
+  if (variant === 'linear') {
+    return (
+      <div {...meter} className="ui-gauge ui-gauge--linear" style={vars} data-testid={testID}>
+        {bounds.min}
+        <span className="ui-gauge__track">
+          <span className="ui-gauge__marker" style={{left: `calc(${gauge.linear.dot / 2}px + ${f} * (100% - ${gauge.linear.dot}px))`}}>
+            <span className="ui-gauge__dot"/>
+          </span>
+        </span>
+        {bounds.max}
+      </div>
+    );
+  }
+
+  const fill = <span className="ui-gauge__fill" style={{width: `${f * 100}%`}}/>;
+
+  if (variant === 'linearCapacity') {
+    // A grid whose columns exist only for the bounds that are set, so the
+    // stacked label and current value start exactly at the bar's leading edge.
+    const columns = [bounds.min && 'auto', 'minmax(0, 1fr)', bounds.max && 'auto'].filter(Boolean).join(' ');
+    const barColumn = bounds.min ? 2 : 1;
+    const barRow = label != null ? 2 : 1;
+    const stacked = {gridColumn: barColumn} as const;
+    return (
+      <div
+        {...meter}
+        className="ui-gauge ui-gauge--linear-capacity"
+        style={{...vars, gridTemplateColumns: columns}}
+        data-testid={testID}>
+        {label != null ? <span className="ui-gauge__label" style={{...stacked, gridRow: 1}}>{label}</span> : null}
+        {bounds.min ? <span className="ui-gauge__bound" style={{gridColumn: 1, gridRow: barRow}}>{minimumValueLabel}</span> : null}
+        <span className="ui-gauge__track" style={{...stacked, gridRow: barRow}}>{fill}</span>
+        {bounds.max ? <span className="ui-gauge__bound" style={{gridColumn: barColumn + 1, gridRow: barRow}}>{maximumValueLabel}</span> : null}
+        {currentValueLabel != null ? (
+          <span className="ui-gauge__current" style={{...stacked, gridRow: barRow + 1}}>{currentValueLabel}</span>
+        ) : null}
+      </div>
+    );
+  }
+
+  return (
+    <div {...meter} className="ui-gauge ui-gauge--automatic" style={vars} data-testid={testID}>
+      {label != null ? <span className="ui-gauge__label">{label}</span> : null}
+      <span className="ui-gauge__row">
+        {bounds.min}
+        <span className="ui-gauge__track">{fill}</span>
+        {bounds.max}
+      </span>
+      {currentValueLabel != null ? <span className="ui-gauge__current">{currentValueLabel}</span> : null}
+    </div>
+  );
+}

package/src/gauge/shared.ts

@@ -0,0 +1,79 @@
+/**
+ * Geometry of the SwiftUI gauge styles, in points, measured from iOS
+ * screenshots so the Android and web redraws match the native control.
+ */
+export const gauge = {
+  /** Body text of the labels (the SwiftUI default font). */
+  fontSize: 17,
+  lineHeight: 22,
+  /** Space between a bounds label and the bar. */
+  rowGap: 8,
+
+  /** `automatic`: capacity bar height and the gaps to the labels above/below. */
+  automatic: {bar: 15, gapAbove: 14, gapBelow: 9},
+
+  /** `linear`: bar height, marker dot (same size) and its background knockout. */
+  linear: {bar: 7.5, dot: 7.5, knockout: 15},
+
+  /** `linearCapacity`: bar height, stack spacing and the current value font. */
+  linearCapacity: {bar: 4, gap: 4, currentFontSize: 12, currentLineHeight: 16},
+
+  /** Circular styles: ring diameter/stroke, arc, marker and label metrics. */
+  ring: {
+    size: 58,
+    stroke: 5.5,
+    /** Open ring (`circular`): arc start angle (degrees, clockwise from 3 o'clock) and sweep. */
+    arcStart: 150,
+    arcSweep: 240,
+    dot: 5.5,
+    knockout: 10,
+    centerFontSize: 24,
+    centerLineHeight: 29,
+    boundsFontSize: 10,
+    boundsLineHeight: 12,
+    /**
+     * Width of the bounds row and the offset of its center below the ring
+     * center: clear of the 24pt value above it and inside the arc's gap.
+     */
+    boundsWidth: 34,
+    boundsOffset: 17,
+    /** Opacity of the unfilled track in `circularCapacity`. */
+    trackOpacity: 0.3,
+  },
+} as const;
+
+/**
+ * Unfilled track fills, as `#RRGGBBAA` per scheme: iOS `tertiarySystemFill`
+ * behind the `automatic` bar and `systemFill` behind the `linearCapacity` bar.
+ */
+export const track = {
+  automatic: {light: '#7676801F', dark: '#7676803D'},
+  linearCapacity: {light: '#78788033', dark: '#7878805C'},
+} as const;
+
+/** Position of `value` within `[min, max]`, clamped to `0…1`. */
+export function fraction(value: number, min: number, max: number): number {
+  if (max <= min) return 0;
+  return Math.min(1, Math.max(0, (value - min) / (max - min)));
+}
+
+/**
+ * Center of the `circular` marker for a fraction, relative to the ring center
+ * (y grows downwards), on the stroke's center line.
+ */
+export function markerOffset(f: number): {x: number; y: number} {
+  const angle = ((gauge.ring.arcStart + f * gauge.ring.arcSweep) * Math.PI) / 180;
+  const radius = (gauge.ring.size - gauge.ring.stroke) / 2;
+  return {x: radius * Math.cos(angle), y: radius * Math.sin(angle)};
+}
+
+/**
+ * `#RRGGBB` (or `#RGB`/`#RRGGBBAA`) color with its alpha replaced. Other
+ * color syntaxes are returned unchanged.
+ */
+export function withAlpha(color: string, alpha: number): string {
+  const hex = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.exec(color.trim())?.[1];
+  if (!hex) return color;
+  const rgb = hex.length === 3 ? hex.split('').map(c => c + c).join('') : hex.slice(0, 6);
+  return `#${rgb}${Math.round(alpha * 255).toString(16).padStart(2, '0')}`.toUpperCase();
+}

package/src/gauge/types.ts

@@ -0,0 +1,64 @@
+import type {StyleProp, ViewStyle} from 'react-native';
+
+/**
+ * Visual style of the gauge, named after the SwiftUI `GaugeStyle` it renders
+ * (the `gaugeStyle` modifier names in `@expo/ui`):
+ * - `automatic` — the default in-app style: a capacity bar with the label
+ *   centered above and the current value centered below.
+ * - `linear` — `accessoryLinear`: a bar with a point marker at the current
+ *   value (no label).
+ * - `linearCapacity` — `accessoryLinearCapacity`: a thin capacity bar with
+ *   the label above and the current value below, aligned to its leading edge.
+ * - `circular` — `accessoryCircular`: an open ring with a point marker, the
+ *   current value in the center and the bounds under the ring.
+ * - `circularCapacity` — `accessoryCircularCapacity`: a closed ring filled to
+ *   the current value with the current value in the center.
+ */
+export type GaugeVariant = 'automatic' | 'linear' | 'linearCapacity' | 'circular' | 'circularCapacity';
+
+/**
+ * Cross-platform gauge showing a value within a range.
+ *
+ * Bridges the SwiftUI `Gauge` (iOS 16+) on iOS; Android (Jetpack Compose) and
+ * web (DOM/SVG) redraw each SwiftUI style with the same geometry: the
+ * bounds and current value labels take the accent, the descriptive label
+ * keeps the label color, exactly as a tinted SwiftUI gauge does.
+ */
+export interface GaugeProps {
+  /** Current value, between `min` and `max`. */
+  value: number;
+  /**
+   * Lower bound of the range.
+   * @default 0
+   */
+  min?: number;
+  /**
+   * Upper bound of the range.
+   * @default 1
+   */
+  max?: number;
+  /**
+   * SwiftUI gauge style to render.
+   * @default 'automatic'
+   */
+  variant?: GaugeVariant;
+  /**
+   * Text describing the gauge's purpose. Shown above the bar in the linear
+   * capacity styles and in the center of the circular styles when there is
+   * no `currentValueLabel`; the `linear` style only exposes it to assistive
+   * technology.
+   */
+  label?: string;
+  /** Text showing the current value. */
+  currentValueLabel?: string;
+  /** Text showing the lower bound. */
+  minimumValueLabel?: string;
+  /** Text showing the upper bound. */
+  maximumValueLabel?: string;
+  /** Tint of the indicator and the value labels (overrides the theme accent). */
+  accentColor?: string;
+  /** Identifier used to locate the component in end-to-end tests. */
+  testID?: string;
+  /** Style applied to the container (web only). */
+  style?: StyleProp<ViewStyle>;
+}

package/src/index.ts

@@ -24,12 +24,16 @@ export {Checkbox} from './checkbox';
 export type {CheckboxProps} from './checkbox/types';
 export {Collapsible} from './collapsible';
 export type {CollapsibleProps} from './collapsible/types';
+export {ColorPicker} from './color-picker';
+export type {ColorPickerProps} from './color-picker/types';
 export {ContextMenu} from './context-menu';
 export {DateTimePicker} from './date-time';
 export type {DateTimeMode, DateTimePickerProps} from './date-time/types';
 export {Divider} from './divider';
 export type {DividerProps} from './divider/types';
 export {FieldGroup, type FieldGroupProps} from './field-group';
+export {Gauge} from './gauge';
+export type {GaugeProps, GaugeVariant} from './gauge/types';
 export {ListItem} from './list-item';
 export type {ListItemProps} from './list-item/types';
 export {Menu} from './menu';
@@ -38,7 +42,6 @@ export {Picker} from './picker';
 export type {PickerItemProps, PickerOption, PickerProps, PickerValue} from './picker/types';
 export {Progress} from './progress';
 export type {ProgressProps, ProgressVariant} from './progress/types';
-export {QRCode, type QRCodeProps} from './qr';
 export {SegmentedControl} from './segmented';
 export type {SegmentedControlProps} from './segmented/types';
 export {Slider} from './slider';

package/src/progress/progress.css

@@ -8,6 +8,15 @@
   -webkit-appearance: none;
 }
 
+/*
+ * With `appearance: none` Chromium lays the bar out as an inline-block on a
+ * line box, so the value only paints about half the track height. Flex
+ * stretches the bar (and its value) to the full 6px.
+ */
+.ui-progress::-webkit-meter-inner-element {
+  display: flex;
+}
+
 .ui-progress::-webkit-meter-bar {
   border: none;
   border-radius: 999px;

package/src/screen/header.tsx

@@ -21,6 +21,7 @@ export function ScreenHeader({title, onBack, trailing}: ScreenHeaderProps) {
         {onBack ? (
           <Pressable
             onPress={onBack}
+            role="button"
             accessibilityLabel="Go back"
             style={styles.back}>
             <SymbolView

package/src/segmented/index.tsx

@@ -24,7 +24,7 @@ function SegmentedControlComponent<T extends PickerValue>({
 }: SegmentedControlProps<T>) {
   const items = extractItems<T>(children);
   const [current, setValue] = useSelectedValue(selectedValue, onValueChange, items[0]?.value);
-  const vars = flatten((StyleSheet.flatten(style) ?? undefined) as TextStyle | undefined) as CSSProperties;
+  const vars = flatten(StyleSheet.flatten(style) as TextStyle) as CSSProperties;
   return (
     <div
       className={['ui-segmented', disabled && 'ui-segmented--disabled'].filter(Boolean).join(' ')}

package/src/segmented/segmented.css

@@ -35,18 +35,17 @@
   transition: background-color 0.15s ease, box-shadow 0.15s ease;
 }
 
+/*
+ * Raised segment (iOS: white light / systemGray2-ish dark). `light-dark()`
+ * follows the element's `color-scheme`, which the theme CSS sets from the OS
+ * and which a host can force (Storybook's scheme toolbar does).
+ */
 .ui-segmented__item[aria-checked='true'] {
-  background: #ffffff;
+  background: light-dark(#ffffff, #636366);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
   font-weight: 600;
 }
 
-@media (prefers-color-scheme: dark) {
-  .ui-segmented__item[aria-checked='true'] {
-    background: #636366;
-  }
-}
-
 .ui-segmented__item:disabled {
   cursor: default;
 }

package/src/slider/index.tsx

@@ -26,7 +26,7 @@ export function Slider({
 }: SliderProps) {
   const vars = {
     ...(accentColor ? {'--ui-slider-accent': accentColor} : null),
-    ...flatten((StyleSheet.flatten(style) ?? undefined) as TextStyle | undefined),
+    ...flatten(StyleSheet.flatten(style) as TextStyle),
   } as CSSProperties;
   const read = (event: ChangeEvent<HTMLInputElement>) => Number(event.target.value);
   return (

package/src/stepper/index.tsx

@@ -14,7 +14,7 @@ import {clampStep, stepBounds} from './shared';
 export function Stepper(props: StepperProps) {
   const {label, value, onValueChange, step = 1, min, max, formatValue, disabled, testID, style} = props;
   const {canDecrement, canIncrement} = stepBounds(props);
-  const vars = flatten((StyleSheet.flatten(style) ?? undefined) as TextStyle | undefined) as CSSProperties;
+  const vars = flatten(StyleSheet.flatten(style) as TextStyle) as CSSProperties;
   return (
     <div
       className={['ui-stepper', disabled && 'ui-stepper--disabled'].filter(Boolean).join(' ')}

package/src/switch/index.tsx

@@ -28,6 +28,8 @@ export function Switch({
       value={value}
       onValueChange={onValueChange}
       disabled={disabled}
+      // The label is a sibling, not a <label>, so name the input directly.
+      accessibilityLabel={label}
       thumbColor={THUMB}
       trackColor={{true: onColor, false: offColor}}
       testID={label == null ? testID : undefined}

package/src/qr/index.tsx

@@ -1,26 +0,0 @@
-import {useMemo} from 'react';
-import {Image} from 'expo-image';
-import createQR from 'qrcode-generator';
-
-export interface QRCodeProps {
-  /** Value encoded in the QR code. */
-  value: string;
-  /** Rendered width/height in points. */
-  size?: number;
-}
-
-export function QRCode({value, size = 200}: QRCodeProps) {
-  const uri = useMemo(() => {
-    const qr = createQR(0, 'M');
-    qr.addData(value);
-    qr.make();
-    return qr.createDataURL(8, 2);
-  }, [value]);
-  return (
-    <Image
-      source={{uri}}
-      style={{width: size, height: size, borderRadius: 12}}
-      contentFit="contain"
-    />
-  );
-}