expo-interface 0.1.0 → 0.1.1

package/src/menu/types.ts

@@ -0,0 +1,60 @@
+import type {ReactNode} from 'react';
+import type {IconToken} from '../icons';
+import type {ButtonProps} from '../button/types';
+
+/** One entry of a `Menu` / `ContextMenu`. */
+export interface MenuItem {
+  /** Item text. */
+  label: string;
+  /** Leading icon. */
+  icon?: IconToken;
+  /**
+   * `destructive` renders the item in the danger color.
+   * @default 'default'
+   */
+  role?: 'default' | 'destructive';
+  /** Greys the item out and ignores presses. */
+  disabled?: boolean;
+  /** Draw a separator above this item. */
+  separator?: boolean;
+  /** Called when the item is selected; the menu then closes. */
+  onPress?: () => void;
+}
+
+/**
+ * Cross-platform dropdown menu opened from a button.
+ *
+ * Bridges the SwiftUI `Menu` on iOS, the Jetpack Compose Material 3
+ * `DropdownMenu` on Android, and a `role="menu"` popup on web. The trigger
+ * looks like the kit's `Button` and takes the same styling props.
+ */
+export interface MenuProps extends Pick<ButtonProps, 'variant' | 'size' | 'shape' | 'color' | 'hideLabel' | 'disabled'> {
+  /** Trigger text (kept for accessibility when `hideLabel` is set). */
+  label: string;
+  /** Trigger icon. */
+  icon?: IconToken;
+  /** Entries shown when the menu opens. */
+  items: MenuItem[];
+  /** Identifier used to locate the trigger in end-to-end tests. */
+  testID?: string;
+}
+
+/**
+ * Cross-platform context menu attached to arbitrary content.
+ *
+ * Opens on long-press (iOS `contextMenu`, Android `DropdownMenu` anchored by
+ * `combinedClickable`) or right-click / long-press on web. `children` must
+ * be native (`@expo/ui`) content on iOS/Android.
+ */
+export interface ContextMenuProps {
+  /** Entries shown when the menu opens. */
+  items: MenuItem[];
+  /** Content that triggers the menu. */
+  children: ReactNode;
+  /** Called on a plain tap of the content (Android/web; iOS taps pass through). */
+  onPress?: () => void;
+  /** Disables the menu. */
+  disabled?: boolean;
+  /** Identifier used to locate the trigger in end-to-end tests. */
+  testID?: string;
+}

package/src/picker/index.android.tsx

@@ -3,7 +3,7 @@ import type {PickerProps, PickerValue} from './types';
 import {useState} from 'react';
 import unfoldMore from '@expo/material-symbols/unfold_more.xml';
 import {useMaterialColors, DropdownMenu, DropdownMenuItem, Column, Row, Text, Icon} from '@expo/ui/jetpack-compose';
-import {background, clickable, clip, fillMaxWidth, padding, Shapes} from '@expo/ui/jetpack-compose/modifiers';
+import {background, clickable, clip, fillMaxWidth, padding, Shapes, testID as testIDModifier} from '@expo/ui/jetpack-compose/modifiers';
 import {extractItems, labelFor, PickerItem, useSelectedValue} from './shared';
 
 /**
@@ -20,6 +20,7 @@ function PickerComponent<T extends PickerValue>({
   accentColor,
   selectedValue,
   onValueChange,
+  testID,
 }: PickerProps<T>) {
   const colors = useMaterialColors();
   const items = extractItems<T>(children);
@@ -30,7 +31,7 @@ function PickerComponent<T extends PickerValue>({
   // a Form, and the web pill uses `secondaryLabel` to match.
   const colorValue = accentColor && !disabled ? accentColor : colors.onSurfaceVariant;
   return (
-    <Column modifiers={[fillMaxWidth()]}>
+    <Column modifiers={[fillMaxWidth(), ...(testID ? [testIDModifier(testID)] : [])]}>
       <Row
         verticalAlignment="center"
         horizontalArrangement="spaceBetween"

package/src/progress/index.android.tsx

@@ -1,24 +1,38 @@
 import type {ProgressProps} from './types';
-import {LinearProgressIndicator} from '@expo/ui/jetpack-compose';
-import {fillMaxWidth, testID as testIDModifier} from '@expo/ui/jetpack-compose/modifiers';
+import {CircularProgressIndicator, LinearProgressIndicator} from '@expo/ui/jetpack-compose';
+import {fillMaxWidth, size as sizeMod, testID as testIDModifier} from '@expo/ui/jetpack-compose/modifiers';
 import {useColor} from '../theme';
 
+const STROKE = 3;
+
 /**
- * Android renders the Material 3 `LinearProgressIndicator`. It fills the row
- * width so it matches the iOS and web bars.
+ * Android renders the Material 3 `LinearProgressIndicator` (filling the row
+ * width to match the iOS and web bars) or `CircularProgressIndicator` sized
+ * to `size`.
  */
-export function Progress({value, color, trackColor, testID}: ProgressProps) {
+export function Progress({value, variant = 'linear', size = 24, color, trackColor, testID}: ProgressProps) {
   const accent = useColor('tint');
   const track = useColor('backgroundSelected');
+  const testMods = testID ? [testIDModifier(testID)] : [];
+
+  if (variant === 'circular') {
+    return (
+      <CircularProgressIndicator
+        progress={value ?? null}
+        color={color ?? accent}
+        trackColor={trackColor ?? track}
+        strokeWidth={STROKE}
+        modifiers={[sizeMod(size, size), ...testMods]}
+      />
+    );
+  }
+
   return (
     <LinearProgressIndicator
       progress={value ?? null}
       color={color ?? accent}
       trackColor={trackColor ?? track}
-      modifiers={[
-        fillMaxWidth(),
-        ...(testID ? [testIDModifier(testID)] : []),
-      ]}
+      modifiers={[fillMaxWidth(), ...testMods]}
     />
   );
 }

package/src/progress/index.ios.tsx

@@ -1,19 +1,20 @@
 import type {ProgressProps} from './types';
 import {ProgressView} from '@expo/ui/swift-ui';
-import {tint} from '@expo/ui/swift-ui/modifiers';
+import {progressViewStyle, tint} from '@expo/ui/swift-ui/modifiers';
 import {useColor} from '../theme';
 
 /**
- * iOS renders SwiftUI's `ProgressView` in its linear style (the default for a
- * determinate `value`). The bar is flexible-width and fills the available space
- * of its parent layout. `trackColor` has no SwiftUI equivalent and is ignored.
+ * iOS renders SwiftUI's `ProgressView` in its linear style (a flexible-width
+ * bar that fills its parent) or circular style (the system ring / activity
+ * spinner, at its native size). `trackColor` has no SwiftUI equivalent and is
+ * ignored.
  */
-export function Progress({value, color, testID}: ProgressProps) {
+export function Progress({value, variant = 'linear', color, testID}: ProgressProps) {
   const accent = useColor('tint');
   return (
     <ProgressView
       value={value ?? null}
-      modifiers={[tint(color ?? accent)]}
+      modifiers={[progressViewStyle(variant), tint(color ?? accent)]}
       testID={testID}
     />
   );

package/src/progress/index.tsx

@@ -3,20 +3,57 @@ import type {CSSProperties} from 'react';
 import type {ProgressProps} from './types';
 import {useColor} from '../theme';
 
+const STROKE = 3;
+
 /**
- * On web the bar is a native `<meter>` element. Its bar/track colors are driven
- * by the `--ui-progress-*` custom properties consumed in `global.css`, since the
- * meter pseudo-elements can't be styled inline. Indeterminate meters don't
- * exist on the web platform, so an undefined `value` renders an empty bar.
+ * On web the linear bar is a native `<meter>` element whose bar/track colors
+ * are driven by the `--ui-progress-*` custom properties (meter pseudo-elements
+ * can't be styled inline). Indeterminate meters don't exist on the web
+ * platform, so an undefined `value` renders an empty bar. The circular
+ * variant is an SVG ring; without a `value` it spins as an activity indicator.
  */
-export function Progress({value, color, trackColor, testID}: ProgressProps) {
+export function Progress({value, variant = 'linear', size = 24, color, trackColor, testID}: ProgressProps) {
   const tint = useColor('tint');
   const track = useColor('backgroundSelected');
-  const clamped = Math.max(0, Math.min(1, value ?? 0));
   const vars = {
     '--ui-progress-bar': color ?? tint,
     '--ui-progress-track': trackColor ?? track,
   } as CSSProperties;
+
+  if (variant === 'circular') {
+    const indeterminate = value == null;
+    const clamped = indeterminate ? 0.25 : Math.max(0, Math.min(1, value));
+    const radius = (size - STROKE) / 2;
+    const circumference = 2 * Math.PI * radius;
+    return (
+      <svg
+        className={['ui-progress-ring', indeterminate && 'ui-progress-ring--indeterminate'].filter(Boolean).join(' ')}
+        width={size}
+        height={size}
+        viewBox={`0 0 ${size} ${size}`}
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={1}
+        aria-valuenow={indeterminate ? undefined : clamped}
+        data-testid={testID}
+        style={vars}>
+        <circle className="ui-progress-ring__track" cx={size / 2} cy={size / 2} r={radius} fill="none" strokeWidth={STROKE}/>
+        <circle
+          className="ui-progress-ring__bar"
+          cx={size / 2}
+          cy={size / 2}
+          r={radius}
+          fill="none"
+          strokeWidth={STROKE}
+          strokeLinecap="round"
+          strokeDasharray={circumference}
+          strokeDashoffset={circumference * (1 - clamped)}
+        />
+      </svg>
+    );
+  }
+
+  const clamped = Math.max(0, Math.min(1, value ?? 0));
   return (
     <meter
       className="ui-progress"

package/src/progress/progress.css

@@ -25,3 +25,27 @@
   border-radius: 999px;
   background: var(--ui-progress-bar);
 }
+
+.ui-progress-ring {
+  flex-shrink: 0;
+  display: inline-block;
+  transform: rotate(-90deg);
+}
+
+.ui-progress-ring__track {
+  stroke: var(--ui-progress-track);
+}
+
+.ui-progress-ring__bar {
+  stroke: var(--ui-progress-bar);
+  transition: stroke-dashoffset 0.2s ease;
+}
+
+.ui-progress-ring--indeterminate {
+  animation: ui-progress-spin 0.9s linear infinite;
+}
+
+@keyframes ui-progress-spin {
+  from { transform: rotate(-90deg); }
+  to { transform: rotate(270deg); }
+}

package/src/progress/types.ts

@@ -1,18 +1,35 @@
+/** Shape of the indicator. */
+export type ProgressVariant = 'linear' | 'circular';
+
 /**
- * Cross-platform determinate progress bar.
+ * Cross-platform progress indicator.
  *
- * Bridges the SwiftUI `ProgressView` on iOS, the Jetpack Compose
- * `LinearProgressIndicator` on Android, and the HTML `<meter>` element on web.
+ * Bridges the SwiftUI `ProgressView` (linear or circular style) on iOS, the
+ * Jetpack Compose `LinearProgressIndicator` / `CircularProgressIndicator` on
+ * Android, and the HTML `<meter>` element (linear) or an SVG ring (circular)
+ * on web.
  */
 export interface ProgressProps {
   /**
    * Progress value between `0` and `1`.
-   * Omit for an indeterminate indicator (native only; web falls back to `0`).
+   * Omit for an indeterminate indicator (a spinner when `circular`; the linear
+   * web bar has no indeterminate state and renders empty).
    */
   value?: number;
-  /** Color of the filled portion of the bar. Defaults to the theme tint. */
+  /**
+   * Bar or ring.
+   * @default 'linear'
+   */
+  variant?: ProgressVariant;
+  /**
+   * Diameter of the circular indicator in points/dp. Ignored for `linear`,
+   * and on iOS where the system spinner keeps its native size.
+   * @default 24
+   */
+  size?: number;
+  /** Color of the filled portion. Defaults to the theme tint. */
   color?: string;
-  /** Color of the unfilled track behind the bar. */
+  /** Color of the unfilled track behind the bar/ring. */
   trackColor?: string;
   /** Identifier used to locate the component in end-to-end tests. */
   testID?: string;

package/src/qr/index.tsx

@@ -1,6 +1,6 @@
 import {useMemo} from 'react';
 import {Image} from 'expo-image';
-import qrcode from 'qrcode-generator';
+import createQR from 'qrcode-generator';
 
 export interface QRCodeProps {
   /** Value encoded in the QR code. */
@@ -11,7 +11,7 @@ export interface QRCodeProps {
 
 export function QRCode({value, size = 200}: QRCodeProps) {
   const uri = useMemo(() => {
-    const qr = qrcode(0, 'M');
+    const qr = createQR(0, 'M');
     qr.addData(value);
     qr.make();
     return qr.createDataURL(8, 2);

package/src/segmented/index.android.tsx

@@ -0,0 +1,67 @@
+import type {PickerValue} from '../picker/types';
+import type {SegmentedControlProps} from './types';
+
+import {Row, SegmentedButton, SingleChoiceSegmentedButtonRow, Text, useMaterialColors} from '@expo/ui/jetpack-compose';
+import {fillMaxWidth, testID as testIDModifier} from '@expo/ui/jetpack-compose/modifiers';
+import {onAccent} from '../accent';
+import {useColor} from '../theme';
+import {extractItems, PickerItem, useSelectedValue} from '../picker/shared';
+
+/**
+ * Android renders the Material 3 `SingleChoiceSegmentedButtonRow`. The
+ * selected segment is filled with the live accent seed (matching the iOS
+ * tint cascade and the web accent) and the row pins the control to the
+ * trailing edge, mirroring the iOS Form row.
+ */
+function SegmentedControlComponent<T extends PickerValue>({
+  label,
+  children,
+  selectedValue,
+  onValueChange,
+  disabled,
+  accentColor,
+  testID,
+}: SegmentedControlProps<T>) {
+  const colors = useMaterialColors();
+  const tint = useColor('tint');
+  const accent = accentColor ?? tint;
+  const items = extractItems<T>(children);
+  const [current, setValue] = useSelectedValue(selectedValue, onValueChange, items[0]?.value);
+  const segmentColors = {
+    activeContainerColor: accent,
+    activeContentColor: onAccent(accent),
+    activeBorderColor: colors.outline,
+    inactiveContainerColor: '#00000000',
+    inactiveContentColor: colors.onSurface,
+    inactiveBorderColor: colors.outline,
+  };
+
+  return (
+    <Row
+      verticalAlignment="center"
+      horizontalArrangement="spaceBetween"
+      modifiers={[fillMaxWidth(), ...(testID ? [testIDModifier(testID)] : [])]}>
+      {label != null ? (
+        <Text color={disabled ? colors.onSurfaceVariant : colors.onSurface}>{label}</Text>
+      ) : null}
+      <SingleChoiceSegmentedButtonRow>
+        {items.map(item => (
+          <SegmentedButton
+            key={String(item.value)}
+            selected={item.value === current}
+            enabled={!disabled}
+            colors={segmentColors}
+            onClick={disabled ? undefined : () => setValue(item.value)}>
+            <SegmentedButton.Label>
+              <Text>{item.label}</Text>
+            </SegmentedButton.Label>
+          </SegmentedButton>
+        ))}
+      </SingleChoiceSegmentedButtonRow>
+    </Row>
+  );
+}
+
+SegmentedControlComponent.Item = PickerItem;
+
+export {SegmentedControlComponent as SegmentedControl};

package/src/segmented/index.ios.tsx

@@ -0,0 +1,47 @@
+import type {PickerValue} from '../picker/types';
+import type {SegmentedControlProps} from './types';
+import type {ViewModifier} from '@expo/ui/swift-ui/modifiers';
+
+import {Picker as SwiftUIPicker, Text} from '@expo/ui/swift-ui';
+import {pickerStyle, tag, tint, disabled as disabledMod} from '@expo/ui/swift-ui/modifiers';
+import {extractItems, PickerItem, useSelectedValue} from '../picker/shared';
+
+/**
+ * iOS renders SwiftUI's `Picker` in the `segmented` style — the system
+ * `UISegmentedControl` — with the label leading inside a Form row. Drop it
+ * straight into a `FieldGroup.Section`.
+ */
+function SegmentedControlComponent<T extends PickerValue>({
+  label,
+  children,
+  selectedValue,
+  onValueChange,
+  disabled,
+  accentColor,
+  testID,
+}: SegmentedControlProps<T>) {
+  const items = extractItems<T>(children);
+  const [current, setValue] = useSelectedValue(selectedValue, onValueChange, items[0]?.value);
+  const modifiers: ViewModifier[] = [pickerStyle('segmented')];
+  if (accentColor) modifiers.push(tint(accentColor));
+  if (disabled) modifiers.push(disabledMod(true));
+
+  return (
+    <SwiftUIPicker
+      label={label}
+      selection={current}
+      onSelectionChange={value => setValue(value as T)}
+      modifiers={modifiers}
+      testID={testID}>
+      {items.map(item => (
+        <Text key={String(item.value)} modifiers={[tag(item.value)]}>
+          {item.label}
+        </Text>
+      ))}
+    </SwiftUIPicker>
+  );
+}
+
+SegmentedControlComponent.Item = PickerItem;
+
+export {SegmentedControlComponent as SegmentedControl};

package/src/segmented/index.tsx

@@ -0,0 +1,58 @@
+import './segmented.css';
+import type {CSSProperties} from 'react';
+import type {PickerValue} from '../picker/types';
+import type {SegmentedControlProps} from './types';
+import {StyleSheet, type TextStyle} from 'react-native';
+import {Label} from '../typography';
+import {flatten} from '../theme';
+import {extractItems, PickerItem, useSelectedValue} from '../picker/shared';
+
+/**
+ * On web the control is a `radiogroup` of native `<button>`s styled after the
+ * iOS segmented control (grey pill, raised selected segment). The row mirrors
+ * the native layout: label on the leading edge, control on the trailing edge.
+ */
+function SegmentedControlComponent<T extends PickerValue>({
+  label,
+  children,
+  selectedValue,
+  onValueChange,
+  disabled,
+  accentColor,
+  testID,
+  style,
+}: 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;
+  return (
+    <div
+      className={['ui-segmented', disabled && 'ui-segmented--disabled'].filter(Boolean).join(' ')}
+      style={vars}
+      data-testid={testID}>
+      {label != null ? <Label color="label" style={{flexShrink: 1}}>{label}</Label> : null}
+      <div className="ui-segmented__group" role="radiogroup" aria-label={label}>
+        {items.map(item => {
+          const selected = item.value === current;
+          return (
+            <button
+              key={String(item.value)}
+              type="button"
+              role="radio"
+              className="ui-segmented__item"
+              aria-checked={selected}
+              disabled={disabled}
+              style={selected && accentColor ? {color: accentColor} : undefined}
+              onClick={() => setValue(item.value)}>
+              {item.label}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+SegmentedControlComponent.Item = PickerItem;
+
+export {SegmentedControlComponent as SegmentedControl};

package/src/segmented/segmented.css

@@ -0,0 +1,56 @@
+.ui-segmented {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+}
+
+.ui-segmented__group {
+  display: inline-flex;
+  flex-shrink: 0;
+  flex-direction: row;
+  padding: 2px;
+  border-radius: 9px;
+  background: var(--color-pill-background);
+}
+
+.ui-segmented__item {
+  -webkit-appearance: none;
+  appearance: none;
+  min-width: 48px;
+  margin: 0;
+  padding: 4px 12px;
+  border: none;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--color-label);
+  font-family: var(--font-display);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.ui-segmented__item[aria-checked='true'] {
+  background: #ffffff;
+  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;
+}
+
+.ui-segmented--disabled {
+  opacity: 0.4;
+}

package/src/segmented/types.ts

@@ -0,0 +1,31 @@
+import type {ReactNode} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
+import type {PickerValue} from '../picker/types';
+
+/**
+ * Cross-platform segmented control: a single-choice row of segments.
+ *
+ * Bridges the SwiftUI `Picker` in its `segmented` style on iOS, the Jetpack
+ * Compose Material 3 `SingleChoiceSegmentedButtonRow` on Android, and a
+ * `radiogroup` of native `<button>`s on web. Options are declared with
+ * `SegmentedControl.Item` children, exactly like `Picker`. May be used
+ * controlled (`selectedValue` + `onValueChange`) or uncontrolled.
+ */
+export interface SegmentedControlProps<T extends PickerValue = PickerValue> {
+  /** Label rendered at the leading edge of the row, mirroring an iOS Form row. */
+  label?: string;
+  /** `SegmentedControl.Item` children that define the segments. */
+  children?: ReactNode;
+  /** Current value (controlled). When omitted the component keeps its own state. */
+  selectedValue?: T;
+  /** Called whenever the user selects a segment. */
+  onValueChange?: (value: T) => void;
+  /** Disables interaction. */
+  disabled?: boolean;
+  /** Tint of the selected segment (Android/web) or the picker (iOS). */
+  accentColor?: string;
+  /** Identifier used to locate the component in end-to-end tests. */
+  testID?: string;
+  /** Style applied to the row container (web only). */
+  style?: StyleProp<ViewStyle>;
+}

package/src/slider/index.android.tsx

@@ -0,0 +1,87 @@
+import type {SliderProps} from './types';
+
+import {useEffect, useRef} from 'react';
+import {Row, Slider as ComposeSlider, Text, useMaterialColors} from '@expo/ui/jetpack-compose';
+import {fillMaxWidth, testID as testIDModifier, weight} from '@expo/ui/jetpack-compose/modifiers';
+import {useColor} from '../theme';
+
+/**
+ * Android renders the Material 3 `Slider`, colored with the live accent seed
+ * (matching the iOS `tint` cascade and the web `accent-color`) instead of the
+ * host's tonal M3 primary. With a `label` the row fills the available width
+ * and the slider takes the remaining space, mirroring the iOS Form row.
+ */
+export function Slider({
+  label,
+  value,
+  onValueChange,
+  onSlidingComplete,
+  min = 0,
+  max = 1,
+  step,
+  disabled,
+  accentColor,
+  testID,
+}: SliderProps) {
+  const colors = useMaterialColors();
+  const tint = useColor('tint');
+  const track = useColor('backgroundSelected');
+  const accent = accentColor ?? tint;
+
+  // Compose `steps` is the number of discrete intervals between min and max
+  // (exclusive); the universal `step` is an increment size.
+  let steps: number | undefined;
+  if (step != null && step > 0) {
+    steps = Math.max(0, Math.round((max - min) / step) - 1);
+  }
+  const snap = (next: number) =>
+    step != null && step > 0 ? Math.round((next - min) / step) * step + min : next;
+
+  // The value the drag last reported: `onValueChangeFinished` fires on
+  // release, which can be before a controlling parent re-renders `value`.
+  const latest = useRef(value);
+  useEffect(() => {
+    latest.current = value;
+  }, [value]);
+
+  const slider = (
+    <ComposeSlider
+      value={value}
+      min={min}
+      max={max}
+      steps={steps}
+      enabled={!disabled}
+      onValueChange={
+        disabled ? undefined : next => {
+          const snapped = snap(next);
+          latest.current = snapped;
+          onValueChange(snapped);
+        }
+      }
+      onValueChangeFinished={onSlidingComplete ? () => onSlidingComplete(latest.current) : undefined}
+      colors={{
+        thumbColor: accent,
+        activeTrackColor: accent,
+        inactiveTrackColor: track,
+        activeTickColor: track,
+        inactiveTickColor: accent,
+      }}
+      modifiers={[
+        ...(label != null ? [weight(1)] : [fillMaxWidth()]),
+        ...(testID ? [testIDModifier(testID)] : []),
+      ]}
+    />
+  );
+
+  if (label == null) return slider;
+
+  return (
+    <Row
+      verticalAlignment="center"
+      horizontalArrangement={{spacedBy: 12}}
+      modifiers={[fillMaxWidth()]}>
+      <Text color={disabled ? colors.onSurfaceVariant : colors.onSurface}>{label}</Text>
+      {slider}
+    </Row>
+  );
+}