expo-interface 0.1.0 → 0.2.0

package/src/divider/types.ts

@@ -0,0 +1,20 @@
+/**
+ * Cross-platform hairline separator.
+ *
+ * Bridges the SwiftUI `Divider` on iOS, the Jetpack Compose Material 3
+ * `HorizontalDivider` / `VerticalDivider` on Android, and the HTML `<hr>`
+ * element on web.
+ */
+export interface DividerProps {
+  /** Draw a vertical rule (for use inside a row) instead of a horizontal one. */
+  vertical?: boolean;
+  /** Line color. Defaults to the theme `separator` token. */
+  color?: string;
+  /**
+   * Leading inset in points/dp, e.g. to align the rule with row content that
+   * sits after a leading icon.
+   */
+  inset?: number;
+  /** Identifier used to locate the component in end-to-end tests. */
+  testID?: string;
+}

package/src/field-group/field-group.css

@@ -7,12 +7,28 @@
 }
 
 /*
- * @expo/ui hardcodes inverted iOS grouped-list colors on web (#f2f2f7 page,
- * #ffffff cards). Light mode should match native: white page, grey cards.
- * Target only section cards — not nested pills/controls inside rows.
+ * @expo/ui paints inverted iOS grouped-list colors on web (grey page, white
+ * cards in light mode). Match native instead: the page is the screen
+ * background and the cards the raised element color, in both schemes, so the
+ * cards follow the kit palette rather than @expo/ui's own (which switches on
+ * `prefers-color-scheme` and can disagree with a forced scheme).
+ *
+ * The section card reads `--expo-ui-background`, so remap that variable here
+ * rather than matching react-native-web class names: those carry the property
+ * name (`r-borderRadius-…`) only in development and are hashed to `r-…` in a
+ * production build. Nothing else the kit renders inside a group reads it.
  */
-@media (prefers-color-scheme: light) {
-  .field-group [class*='r-borderRadius-']:not([class*='r-borderRadius-'] [class*='r-borderRadius-']) {
-    background-color: var(--color-background-element) !important;
-  }
+.field-group {
+  --expo-ui-background: var(--color-background-element);
+}
+
+/*
+ * Row dividers: @expo/ui paints them in its gray-100, which is within a few
+ * shades of the card color above in both schemes. The selected-background
+ * token is one step away from the card in either scheme: visible, not heavy.
+ * `role="separator"` is the only stable hook; kit overlays inside a row (a
+ * Menu's own separator) carry `ui-*` classes and keep their color.
+ */
+.field-group [role='separator']:not([class^='ui-']) {
+  background-color: var(--color-background-selected);
 }

package/src/field-group/index.android.tsx

@@ -59,9 +59,10 @@ function SectionFooter(props: FieldSectionFooterProps) {
 function Section({children, title, titleUppercase = false, hidden}: FieldSectionProps) {
   const card = useColor('backgroundElement');
   const subtle = useColor('secondaryLabel');
+  const label = useColor('label');
   if (hidden) return null;
 
-  const {header, footer, rows} = extractSlots(children);
+  const {header, footer, rows} = extractSlots(children, label);
   const headerNode = header ?? (title ? (
     <Text
       color={subtle}
@@ -118,33 +119,33 @@ function cornerRadii(index: number, total: number) {
   return {topStart: top, topEnd: top, bottomStart: bottom, bottomEnd: bottom};
 }
 
-/** Pulls `SectionHeader`/`SectionFooter` slots out of a section's children. */
-function extractSlots(children: ReactNode) {
+/**
+ * Pulls `SectionHeader`/`SectionFooter` slots out of a section's children.
+ * Empty children (`null`, booleans) are dropped, and raw strings or numbers
+ * become a `Text` row, since Compose slots cannot render them directly.
+ */
+function extractSlots(children: ReactNode, textColor: string) {
   let header: ReactNode | undefined;
   let footer: ReactNode | undefined;
   const rows: ReactNode[] = [];
 
   const walk = (node: ReactNode) => {
-    Children.forEach(node, child => {
+    for (const child of Children.toArray(node)) {
       if (!isValidElement(child)) {
-        rows.push(child);
-        return;
+        rows.push(<Text color={textColor}>{String(child)}</Text>);
+        continue;
       }
       const props = child.props as {children?: ReactNode};
       if (child.type === SectionHeader) {
         header = props.children;
-        return;
-      }
-      if (child.type === SectionFooter) {
+      } else if (child.type === SectionFooter) {
         footer = props.children;
-        return;
-      }
-      if (child.type === Fragment) {
+      } else if (child.type === Fragment) {
         walk(props.children);
-        return;
+      } else {
+        rows.push(child);
       }
-      rows.push(child);
-    });
+    }
   };
 
   walk(children);
@@ -175,13 +176,12 @@ function groupChildren(children: ReactNode): ReactNode[] {
       return;
     }
     if (isValidElement(child) && child.type === Fragment) {
-      for (const nested of groupChildren((child.props as {children?: ReactNode}).children)) {
-        if (isSection(nested)) {
-          flush();
-          result.push(nested);
-        } else {
-          buffered.push(nested);
-        }
+      // The recursion yields sections only (loose rows come back wrapped in
+      // their own implicit section), so they close any open implicit section.
+      const nested = groupChildren((child.props as {children?: ReactNode}).children);
+      if (nested.length > 0) {
+        flush();
+        result.push(...nested);
       }
       return;
     }

package/src/field-group/index.web.tsx

@@ -3,8 +3,8 @@ import {FieldGroup as BaseFieldGroup, type FieldGroupProps} from '@expo/ui';
 
 /**
  * Web hook for `field-group.css`. Clears the universal component's hardcoded
- * scroll background so the wrapper supplies the app palette; section cards are
- * recolored in CSS (light mode only — dark matches @expo/ui).
+ * scroll background so the wrapper supplies the app palette; section cards
+ * and row dividers are recolored to the kit tokens in the CSS.
  */
 function FieldGroup({style, ...props}: FieldGroupProps) {
   return (

package/src/gauge/gauge.css

@@ -0,0 +1,200 @@
+/*
+ * SwiftUI gauge styles redrawn on web. Sizes are the points measured from
+ * iOS (see shared.ts); the unfilled tracks are iOS `tertiarySystemFill`
+ * (automatic) and `systemFill` (linearCapacity), which `light-dark()`
+ * resolves per scheme.
+ */
+.ui-gauge,
+.ui-gauge-ring {
+  --ui-gauge-accent: var(--color-tint);
+  --ui-gauge-knockout: var(--color-background);
+  --ui-gauge-track: light-dark(rgba(118, 118, 128, 0.12), rgba(118, 118, 128, 0.24));
+  --ui-gauge-fill-track: light-dark(rgba(120, 120, 128, 0.2), rgba(120, 120, 128, 0.36));
+  box-sizing: border-box;
+  font-family: var(--font-display);
+  font-size: 17px;
+  line-height: 22px;
+  color: var(--color-label);
+}
+
+.ui-gauge {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.ui-gauge__label {
+  color: var(--color-label);
+}
+
+.ui-gauge__bound,
+.ui-gauge__current {
+  color: var(--ui-gauge-accent);
+  white-space: nowrap;
+}
+
+.ui-gauge__row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.ui-gauge__track {
+  position: relative;
+  display: block;
+  flex: 1;
+  min-width: 0;
+  border-radius: 999px;
+  overflow: hidden;
+}
+
+.ui-gauge__fill {
+  display: block;
+  height: 100%;
+  border-radius: 999px;
+  background: var(--ui-gauge-accent);
+}
+
+/* automatic: thick capacity bar, label centered above, value centered below */
+.ui-gauge--automatic .ui-gauge__label {
+  margin-bottom: 14px;
+}
+
+.ui-gauge--automatic .ui-gauge__track {
+  height: 15px;
+  background: var(--ui-gauge-track);
+}
+
+.ui-gauge--automatic .ui-gauge__current {
+  margin-top: 9px;
+}
+
+/* linear (accessoryLinear): tinted bar with a knocked-out point marker */
+.ui-gauge--linear {
+  flex-direction: row;
+  gap: 8px;
+}
+
+/* The track is as tall as the marker so the knockout can overhang the bar. */
+.ui-gauge--linear .ui-gauge__track {
+  height: 15px;
+  border-radius: 0;
+  overflow: visible;
+}
+
+.ui-gauge--linear .ui-gauge__track::before {
+  content: '';
+  position: absolute;
+  inset: 3.75px 0;
+  border-radius: 999px;
+  background: var(--ui-gauge-accent);
+}
+
+.ui-gauge__marker {
+  position: absolute;
+  top: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: var(--ui-gauge-knockout);
+  transform: translate(-50%, -50%);
+}
+
+.ui-gauge__dot {
+  width: 7.5px;
+  height: 7.5px;
+  border-radius: 50%;
+  background: var(--ui-gauge-accent);
+}
+
+/*
+ * linearCapacity (accessoryLinearCapacity): thin bar in a label/bar/value
+ * stack. The grid columns and rows are set inline per rendered label.
+ */
+.ui-gauge--linear-capacity {
+  display: grid;
+  align-items: center;
+  column-gap: 8px;
+  row-gap: 4px;
+}
+
+.ui-gauge--linear-capacity .ui-gauge__label,
+.ui-gauge--linear-capacity .ui-gauge__current {
+  justify-self: start;
+}
+
+.ui-gauge--linear-capacity .ui-gauge__track {
+  height: 4px;
+  background: var(--ui-gauge-fill-track);
+}
+
+.ui-gauge--linear-capacity .ui-gauge__current {
+  font-size: 12px;
+  line-height: 16px;
+}
+
+/* circular styles: 58pt ring drawn in SVG with HTML labels over it */
+.ui-gauge-ring {
+  position: relative;
+  flex-shrink: 0;
+  display: inline-block;
+}
+
+.ui-gauge-ring__svg {
+  position: absolute;
+  inset: 0;
+  display: block;
+}
+
+.ui-gauge-ring__arc,
+.ui-gauge-ring__fill {
+  stroke: var(--ui-gauge-accent);
+}
+
+.ui-gauge-ring__track {
+  stroke: var(--ui-gauge-accent);
+  opacity: 0.3;
+}
+
+.ui-gauge-ring__knockout {
+  fill: var(--ui-gauge-knockout);
+}
+
+.ui-gauge-ring__dot {
+  fill: var(--ui-gauge-accent);
+}
+
+.ui-gauge-ring__center {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  line-height: 29px;
+  color: var(--ui-gauge-accent);
+  white-space: nowrap;
+}
+
+.ui-gauge-ring__center--label {
+  color: var(--color-label);
+}
+
+/* Centered 17px below the ring center (29 + 17 - half the 12px line). */
+.ui-gauge-ring__bounds {
+  position: absolute;
+  top: 40px;
+  left: 12px;
+  display: flex;
+  justify-content: space-between;
+  width: 34px;
+  font-size: 10px;
+  line-height: 12px;
+  color: var(--ui-gauge-accent);
+}

package/src/gauge/index.android.tsx

@@ -0,0 +1,212 @@
+import type {GaugeProps} from './types';
+import type {ModifierConfig} from '@expo/ui/jetpack-compose/modifiers';
+
+import {useColorScheme} from 'react-native';
+import {Box, CircularProgressIndicator, Column, Row, Spacer, Text, useMaterialColors} from '@expo/ui/jetpack-compose';
+import {
+  alpha,
+  background,
+  clip,
+  fillMaxHeight,
+  fillMaxWidth,
+  height,
+  offset,
+  padding,
+  rotate,
+  Shapes,
+  size,
+  testID as testIDModifier,
+  weight,
+  width,
+} from '@expo/ui/jetpack-compose/modifiers';
+import {useColor} from '../theme';
+import {fraction, gauge, markerOffset, track, withAlpha} from './shared';
+
+const pill = Shapes.RoundedCorner(999);
+const circle = Shapes.Circle;
+const body = {fontSize: gauge.fontSize, lineHeight: gauge.lineHeight};
+
+/**
+ * Android redraws each SwiftUI gauge style out of Compose primitives (the
+ * rings are Material 3 `CircularProgressIndicator`s, the bars clipped
+ * `Box`es) with the geometry measured from iOS. The live accent seed tints
+ * the indicator and the value labels, matching the iOS tint cascade; the
+ * descriptive label keeps the surface text color.
+ */
+export function Gauge({
+  value,
+  min = 0,
+  max = 1,
+  variant = 'automatic',
+  label,
+  currentValueLabel,
+  minimumValueLabel,
+  maximumValueLabel,
+  accentColor,
+  testID,
+}: GaugeProps) {
+  const colors = useMaterialColors();
+  const scheme = useColorScheme() === 'dark' ? 'dark' : 'light';
+  const tint = useColor('tint');
+  const knockout = useColor('background');
+  const accent = accentColor ?? tint;
+  const f = fraction(value, min, max);
+  const testMods: ModifierConfig[] = testID ? [testIDModifier(testID)] : [];
+
+  const minText = minimumValueLabel != null
+    ? <Text color={accent} style={body}>{minimumValueLabel}</Text>
+    : null;
+  const maxText = maximumValueLabel != null
+    ? <Text color={accent} style={body}>{maximumValueLabel}</Text>
+    : null;
+
+  if (variant === 'circular' || variant === 'circularCapacity') {
+    const {size: ring, stroke} = gauge.ring;
+    const center = currentValueLabel ?? label;
+    const marker = markerOffset(f);
+    return (
+      <Box contentAlignment="center" modifiers={[size(ring, ring), ...testMods]}>
+        {variant === 'circular' ? (
+          <CircularProgressIndicator
+            progress={gauge.ring.arcSweep / 360}
+            color={accent}
+            trackColor="#00000000"
+            strokeWidth={stroke}
+            strokeCap="round"
+            gapSize={0}
+            modifiers={[size(ring, ring), rotate(gauge.ring.arcStart - 270)]}
+          />
+        ) : (
+          <CircularProgressIndicator
+            progress={f}
+            color={accent}
+            trackColor={withAlpha(accent, gauge.ring.trackOpacity)}
+            strokeWidth={stroke}
+            strokeCap="round"
+            gapSize={0}
+            modifiers={[size(ring, ring)]}
+          />
+        )}
+        {variant === 'circular' ? (
+          <Box
+            contentAlignment="center"
+            modifiers={[
+              offset(marker.x, marker.y),
+              size(gauge.ring.knockout, gauge.ring.knockout),
+              clip(circle),
+              background(knockout),
+            ]}>
+            <Box modifiers={[size(gauge.ring.dot, gauge.ring.dot), clip(circle), background(accent)]}/>
+          </Box>
+        ) : null}
+        {center != null ? (
+          <Text
+            color={currentValueLabel != null ? accent : colors.onSurface}
+            style={{fontSize: gauge.ring.centerFontSize, lineHeight: gauge.ring.centerLineHeight}}>
+            {center}
+          </Text>
+        ) : null}
+        {variant === 'circular' && (minText || maxText) ? (
+          <Row
+            horizontalArrangement="spaceBetween"
+            verticalAlignment="center"
+            modifiers={[offset(0, gauge.ring.boundsOffset), width(gauge.ring.boundsWidth)]}>
+            {minimumValueLabel != null ? (
+              <Text color={accent} style={{fontSize: gauge.ring.boundsFontSize, lineHeight: gauge.ring.boundsLineHeight}}>
+                {minimumValueLabel}
+              </Text>
+            ) : <Spacer/>}
+            {maximumValueLabel != null ? (
+              <Text color={accent} style={{fontSize: gauge.ring.boundsFontSize, lineHeight: gauge.ring.boundsLineHeight}}>
+                {maximumValueLabel}
+              </Text>
+            ) : <Spacer/>}
+          </Row>
+        ) : null}
+      </Box>
+    );
+  }
+
+  if (variant === 'linear') {
+    const {bar, dot, knockout: knock} = gauge.linear;
+    return (
+      <Row verticalAlignment="center" horizontalArrangement={{spacedBy: gauge.rowGap}} modifiers={[fillMaxWidth(), ...testMods]}>
+        {minText}
+        <Box contentAlignment="centerStart" modifiers={[weight(1), height(knock)]}>
+          <Box modifiers={[fillMaxWidth(), height(bar), clip(pill), background(accent)]}/>
+          <Box modifiers={[fillMaxWidth(), fillMaxHeight(), padding(dot / 2, 0, dot / 2, 0)]}>
+            <Box contentAlignment="centerEnd" modifiers={[fillMaxWidth(f), fillMaxHeight()]}>
+              <Box
+                contentAlignment="center"
+                modifiers={[offset(knock / 2, 0), size(knock, knock), clip(circle), background(knockout)]}>
+                <Box modifiers={[size(dot, dot), clip(circle), background(accent)]}/>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+        {maxText}
+      </Row>
+    );
+  }
+
+  if (variant === 'linearCapacity') {
+    const {bar, gap} = gauge.linearCapacity;
+    // Invisible copy of the bounds label so the stacked label and current
+    // value start at the bar's leading edge, as the SwiftUI layout does.
+    const ghost = minimumValueLabel != null
+      ? <Text style={body} modifiers={[alpha(0)]}>{minimumValueLabel}</Text>
+      : null;
+    return (
+      <Column verticalArrangement={{spacedBy: gap}} modifiers={[fillMaxWidth(), ...testMods]}>
+        {label != null ? (
+          <Row horizontalArrangement={{spacedBy: gauge.rowGap}}>
+            {ghost}
+            <Text color={colors.onSurface} style={body}>{label}</Text>
+          </Row>
+        ) : null}
+        <Row verticalAlignment="center" horizontalArrangement={{spacedBy: gauge.rowGap}} modifiers={[fillMaxWidth()]}>
+          {minText}
+          <Box contentAlignment="centerStart" modifiers={[weight(1), height(bar), clip(pill), background(track.linearCapacity[scheme])]}>
+            <Box modifiers={[fillMaxWidth(f), fillMaxHeight(), clip(pill), background(accent)]}/>
+          </Box>
+          {maxText}
+        </Row>
+        {currentValueLabel != null ? (
+          <Row horizontalArrangement={{spacedBy: gauge.rowGap}}>
+            {ghost}
+            <Text
+              color={accent}
+              style={{fontSize: gauge.linearCapacity.currentFontSize, lineHeight: gauge.linearCapacity.currentLineHeight}}>
+              {currentValueLabel}
+            </Text>
+          </Row>
+        ) : null}
+      </Column>
+    );
+  }
+
+  const {bar, gapAbove, gapBelow} = gauge.automatic;
+  return (
+    <Column horizontalAlignment="center" modifiers={[fillMaxWidth(), ...testMods]}>
+      {label != null ? (
+        <>
+          <Text color={colors.onSurface} style={body}>{label}</Text>
+          <Spacer modifiers={[height(gapAbove)]}/>
+        </>
+      ) : null}
+      <Row verticalAlignment="center" horizontalArrangement={{spacedBy: gauge.rowGap}} modifiers={[fillMaxWidth()]}>
+        {minText}
+        <Box contentAlignment="centerStart" modifiers={[weight(1), height(bar), clip(pill), background(track.automatic[scheme])]}>
+          <Box modifiers={[fillMaxWidth(f), fillMaxHeight(), clip(pill), background(accent)]}/>
+        </Box>
+        {maxText}
+      </Row>
+      {currentValueLabel != null ? (
+        <>
+          <Spacer modifiers={[height(gapBelow)]}/>
+          <Text color={accent} style={body}>{currentValueLabel}</Text>
+        </>
+      ) : null}
+    </Column>
+  );
+}

package/src/gauge/index.ios.tsx

@@ -0,0 +1,40 @@
+import type {GaugeProps} from './types';
+import type {ViewModifier} from '@expo/ui/swift-ui/modifiers';
+
+import {Gauge as SwiftUIGauge, Text} from '@expo/ui/swift-ui';
+import {gaugeStyle, tint} from '@expo/ui/swift-ui/modifiers';
+
+/**
+ * iOS renders SwiftUI's `Gauge` (iOS 16+) in the requested `gaugeStyle`. The
+ * Host-level `tint` cascade colors it with the accent seed; `accentColor`
+ * overrides that per instance. Each text label is a SwiftUI `Text` in the
+ * matching gauge slot, so SwiftUI picks the fonts and placement.
+ */
+export function Gauge({
+  value,
+  min = 0,
+  max = 1,
+  variant = 'automatic',
+  label,
+  currentValueLabel,
+  minimumValueLabel,
+  maximumValueLabel,
+  accentColor,
+  testID,
+}: GaugeProps) {
+  const modifiers: ViewModifier[] = [gaugeStyle(variant)];
+  if (accentColor) modifiers.push(tint(accentColor));
+  return (
+    <SwiftUIGauge
+      value={value}
+      min={min}
+      max={max}
+      currentValueLabel={currentValueLabel != null ? <Text>{currentValueLabel}</Text> : undefined}
+      minimumValueLabel={minimumValueLabel != null ? <Text>{minimumValueLabel}</Text> : undefined}
+      maximumValueLabel={maximumValueLabel != null ? <Text>{maximumValueLabel}</Text> : undefined}
+      modifiers={modifiers}
+      testID={testID}>
+      {label != null ? <Text>{label}</Text> : undefined}
+    </SwiftUIGauge>
+  );
+}