@startsimpli/ui-native 0.0.0-stage → 0.1.0

package/src/charts-math.ts

@@ -0,0 +1,106 @@
+/**
+ * Pure chart geometry — no react-native-svg import, so it is unit-testable in
+ * plain Node and shared by the SVG components in ./components.
+ */
+
+export interface Box {
+  width: number;
+  height: number;
+  /** Inner padding so strokes/points aren't clipped at the edges. */
+  pad?: number;
+}
+
+/**
+ * Map a series of y-values to [x,y] pixel points inside a padded box. Pass an
+ * explicit `domain` ([min,max]) to scale several series on a SHARED axis so
+ * they're visually comparable (see {@link multiLinePaths}); omit it and each
+ * series is scaled to its own min/max.
+ */
+export function points(
+  values: number[],
+  box: Box,
+  domain?: [number, number]
+): Array<[number, number]> {
+  const { width, height } = box;
+  const pad = box.pad ?? 0;
+  const n = values.length;
+  if (n === 0) return [];
+  const min = domain ? domain[0] : Math.min(...values);
+  const max = domain ? domain[1] : Math.max(...values);
+  const span = max - min || 1;
+  const innerW = width - pad * 2;
+  const innerH = height - pad * 2;
+  return values.map((v, i) => {
+    const x = pad + (n === 1 ? innerW / 2 : (i / (n - 1)) * innerW);
+    const y = pad + innerH - ((v - min) / span) * innerH;
+    return [x, y];
+  });
+}
+
+/** SVG path for a polyline through the values (optionally on a shared domain). */
+export function linePath(values: number[], box: Box, domain?: [number, number]): string {
+  const pts = points(values, box, domain);
+  if (pts.length === 0) return '';
+  return pts.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(2)} ${y.toFixed(2)}`).join(' ');
+}
+
+/** Min/max across every value of every series. Finite even when empty. */
+export function sharedExtent(series: number[][]): [number, number] {
+  const flat = series.flat();
+  if (flat.length === 0) return [0, 1];
+  return [Math.min(...flat), Math.max(...flat)];
+}
+
+/** One line path per series, all scaled to a single shared y-domain so the
+ *  lines are directly comparable (compare-artists, period-over-period). */
+export function multiLinePaths(series: number[][], box: Box): string[] {
+  const domain = sharedExtent(series);
+  return series.map((s) => linePath(s, box, domain));
+}
+
+/** SVG path for the filled area under the line (closed to the baseline). */
+export function areaPath(values: number[], box: Box): string {
+  const pts = points(values, box);
+  if (pts.length === 0) return '';
+  const pad = box.pad ?? 0;
+  const baseline = box.height - pad;
+  const first = pts[0];
+  const last = pts[pts.length - 1];
+  const line = pts.map(([x, y]) => `L${x.toFixed(2)} ${y.toFixed(2)}`).join(' ');
+  return `M${first[0].toFixed(2)} ${baseline.toFixed(2)} ${line} L${last[0].toFixed(2)} ${baseline.toFixed(2)} Z`;
+}
+
+export interface DonutSlice {
+  value: number;
+  color: string;
+}
+
+export interface DonutDash {
+  color: string;
+  /** Length of the colored portion of the ring. */
+  dash: number;
+  /** Remaining (gap) length. */
+  gap: number;
+  /** Negative dashoffset that rotates this slice to start where the last ended. */
+  offset: number;
+  /** Fraction of the whole (0–1). */
+  fraction: number;
+}
+
+/**
+ * Turn slice values into stroke-dasharray/offset specs for a donut drawn as
+ * overlaid circles of the given circumference. Slices are laid out clockwise
+ * from the top (the caller rotates the group -90°).
+ */
+export function donutDashes(slices: DonutSlice[], circumference: number, gapPx = 0): DonutDash[] {
+  const total = slices.reduce((s, x) => s + Math.max(0, x.value), 0) || 1;
+  let acc = 0;
+  return slices.map(({ value, color }) => {
+    const fraction = Math.max(0, value) / total;
+    const len = fraction * circumference;
+    const dash = Math.max(0, len - gapPx);
+    const offset = -acc;
+    acc += len;
+    return { color, dash, gap: circumference - dash, offset, fraction };
+  });
+}

package/src/components/AccentContext.tsx

@@ -0,0 +1,22 @@
+/**
+ * Per-screen accent colour. Lets an app set a contextual brand colour (e.g.
+ * "the artist currently being viewed") that hero/badges/charts can pick up
+ * without prop-drilling. Defaults to theme.primary when no provider is mounted.
+ *
+ * Independent of ThemeProvider so apps can override the accent under any
+ * theme without rebuilding the whole theme object.
+ */
+import { createContext, useContext, type ReactNode } from 'react';
+import { useTheme } from './ThemeProvider';
+
+const AccentContext = createContext<string | null>(null);
+
+export function AccentProvider({ accent, children }: { accent: string; children: ReactNode }) {
+  return <AccentContext.Provider value={accent}>{children}</AccentContext.Provider>;
+}
+
+/** The current accent colour (or theme.primary if no provider is mounted). */
+export function useAccent(): string {
+  const theme = useTheme();
+  return useContext(AccentContext) ?? theme.colors.primary;
+}

package/src/components/Alert.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import { View, Text as RNText, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from './ThemeProvider';
+import { alertStyle, alertTitleStyle, alertTextStyle, type AlertVariant } from '../styles';
+
+export interface AlertProps {
+  title?: string;
+  children?: ReactNode;
+  variant?: AlertVariant;
+  /** Layout overrides (e.g. margins), merged after the themed alert style. */
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Callout box. Mirrors @startsimpli/ui alert (default / destructive). */
+export function Alert({ title, children, variant = 'default', style }: AlertProps) {
+  const theme = useTheme();
+  return (
+    <View style={[alertStyle(theme, variant), style]}>
+      {title ? <RNText style={alertTitleStyle(theme, variant)}>{title}</RNText> : null}
+      {typeof children === 'string' ? (
+        <RNText style={[alertTextStyle(theme, variant), { marginTop: title ? 4 : 0 }]}>{children}</RNText>
+      ) : (
+        children
+      )}
+    </View>
+  );
+}

package/src/components/Avatar.tsx

@@ -0,0 +1,42 @@
+import { View, Image, Text as RNText, type ViewProps, type ImageSourcePropType } from 'react-native';
+import { useTheme } from './ThemeProvider';
+import { avatarStyle, avatarTextStyle, type AvatarSize } from '../styles';
+
+export interface AvatarProps extends ViewProps {
+  /** Bundled/required image (e.g. a logo). Takes precedence over `uri`/`name`. */
+  source?: ImageSourcePropType;
+  /** Remote image URL. Used when no `source` is given. */
+  uri?: string;
+  /** Used to derive initials when no image is given. */
+  name?: string;
+  size?: AvatarSize;
+  /** Background color. Defaults to white behind an image, theme.secondary otherwise. */
+  color?: string;
+  /** Text color for initials (defaults to theme.secondaryForeground). */
+  textColor?: string;
+}
+
+/** Up to two uppercase initials from a name ("Amr Diab" -> "AD"). */
+function initials(name?: string): string {
+  if (!name) return '';
+  const parts = name.trim().split(/\s+/).slice(0, 2);
+  return parts.map((p) => p.charAt(0).toUpperCase()).join('');
+}
+
+/** Circular avatar: an image (`source` or `uri`) cover-filled into the circle,
+ *  otherwise the name's initials. */
+export function Avatar({ source, uri, name, size = 'md', color, textColor, style, ...rest }: AvatarProps) {
+  const theme = useTheme();
+  const hasImage = source != null || uri != null;
+  const bg = color ?? (hasImage ? '#FFFFFF' : undefined);
+  const imageSource = source ?? (uri != null ? { uri } : undefined);
+  return (
+    <View style={[avatarStyle(theme, size, bg), style]} {...rest}>
+      {imageSource ? (
+        <Image source={imageSource} style={{ width: '100%', height: '100%' }} resizeMode="cover" />
+      ) : (
+        <RNText style={avatarTextStyle(theme, size, textColor)}>{initials(name)}</RNText>
+      )}
+    </View>
+  );
+}

package/src/components/Badge.tsx

@@ -0,0 +1,18 @@
+import { View, Text as RNText, type ViewProps } from 'react-native';
+import { useTheme } from './ThemeProvider';
+import { badgeStyle, badgeTextStyle, type BadgeVariant } from '../styles';
+
+export interface BadgeProps extends ViewProps {
+  label: string;
+  variant?: BadgeVariant;
+}
+
+/** Small status pill. Mirrors @startsimpli/ui badge variants. */
+export function Badge({ label, variant = 'default', style, ...rest }: BadgeProps) {
+  const theme = useTheme();
+  return (
+    <View style={[badgeStyle(theme, variant), style]} {...rest}>
+      <RNText style={badgeTextStyle(theme, variant)}>{label}</RNText>
+    </View>
+  );
+}

package/src/components/Button.tsx

@@ -0,0 +1,40 @@
+import {
+  Pressable,
+  Text as RNText,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme } from './ThemeProvider';
+import { buttonContainerStyle, buttonTextStyle, type ButtonVariant, type ButtonSize } from '../styles';
+
+export interface ButtonProps extends Omit<PressableProps, 'children' | 'style'> {
+  title: string;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Themed pressable button. Dims slightly while pressed. */
+export function Button({
+  title,
+  variant = 'primary',
+  size = 'md',
+  style,
+  ...rest
+}: ButtonProps) {
+  const theme = useTheme();
+  return (
+    <Pressable
+      accessibilityRole="button"
+      style={({ pressed }) => [
+        buttonContainerStyle(theme, variant, size),
+        pressed ? { opacity: 0.85 } : null,
+        style,
+      ]}
+      {...rest}
+    >
+      <RNText style={buttonTextStyle(theme, variant, size)}>{title}</RNText>
+    </Pressable>
+  );
+}

package/src/components/Card.tsx

@@ -0,0 +1,30 @@
+import { View, Text as RNText, type ViewProps, type TextProps } from 'react-native';
+import { useTheme } from './ThemeProvider';
+import { cardStyle, cardTitleStyle, cardDescriptionStyle } from '../styles';
+
+/** Elevated surface: card background, lg radius, hairline border, padding. */
+export function Card({ style, ...rest }: ViewProps) {
+  const theme = useTheme();
+  return <View style={[cardStyle(theme), style]} {...rest} />;
+}
+
+/** Title + description grouping at the top of a Card. */
+export function CardHeader({ style, ...rest }: ViewProps) {
+  const theme = useTheme();
+  return <View style={[{ gap: theme.spacing.xs, marginBottom: theme.spacing.sm }, style]} {...rest} />;
+}
+
+export function CardTitle({ style, ...rest }: TextProps) {
+  const theme = useTheme();
+  return <RNText style={[cardTitleStyle(theme), style]} {...rest} />;
+}
+
+export function CardDescription({ style, ...rest }: TextProps) {
+  const theme = useTheme();
+  return <RNText style={[cardDescriptionStyle(theme), style]} {...rest} />;
+}
+
+export function CardContent({ style, ...rest }: ViewProps) {
+  const theme = useTheme();
+  return <View style={[{ gap: theme.spacing.xs }, style]} {...rest} />;
+}

package/src/components/Checkbox.tsx

@@ -0,0 +1,31 @@
+import { Pressable, Text as RNText, View } from 'react-native';
+import { useTheme } from './ThemeProvider';
+import { checkboxStyle, labelStyle } from '../styles';
+
+export interface CheckboxProps {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  label?: string;
+  disabled?: boolean;
+}
+
+/** Box checkbox with an optional inline label. Mirrors @startsimpli/ui checkbox. */
+export function Checkbox({ checked, onChange, label, disabled = false }: CheckboxProps) {
+  const theme = useTheme();
+  return (
+    <Pressable
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked, disabled }}
+      disabled={disabled}
+      onPress={() => onChange(!checked)}
+      style={{ flexDirection: 'row', alignItems: 'center', gap: theme.spacing.sm, opacity: disabled ? 0.5 : 1 }}
+    >
+      <View style={checkboxStyle(theme, checked)}>
+        {checked ? (
+          <RNText style={{ color: theme.colors.primaryForeground, fontSize: 14, fontWeight: '700' }}>✓</RNText>
+        ) : null}
+      </View>
+      {label ? <RNText style={labelStyle(theme)}>{label}</RNText> : null}
+    </Pressable>
+  );
+}

package/src/components/Chip.tsx

@@ -0,0 +1,26 @@
+import { Pressable, Text as RNText, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from './ThemeProvider';
+import { chipStyle, chipTextStyle } from '../styles';
+
+export interface ChipProps {
+  label: string;
+  selected?: boolean;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Selectable filter pill. Filled with the primary color when selected,
+ *  outlined otherwise. Compose a row of these for a filter bar. */
+export function Chip({ label, selected = false, onPress, style }: ChipProps) {
+  const theme = useTheme();
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ selected }}
+      onPress={onPress}
+      style={({ pressed }) => [chipStyle(theme, selected), pressed ? { opacity: 0.7 } : null, style]}
+    >
+      <RNText style={chipTextStyle(theme, selected)}>{label}</RNText>
+    </Pressable>
+  );
+}

package/src/components/CompareChart.tsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { View, type LayoutChangeEvent } from 'react-native';
+import Svg, { Path, Line } from 'react-native-svg';
+import { useTheme } from './ThemeProvider';
+import { multiLinePaths } from '../charts-math';
+
+export interface CompareSeries {
+  /** Daily/period values, same length across series for an honest comparison. */
+  values: number[];
+  color: string;
+  /** Optional label (the caller renders the legend, e.g. <MultiLineLegend />). */
+  label?: string;
+}
+
+export interface CompareChartProps {
+  series: CompareSeries[];
+  height?: number;
+  /** Number of horizontal gridlines. */
+  gridLines?: number;
+  strokeWidth?: number;
+}
+
+/** Several line series overlaid on a SHARED y-scale so they're directly
+ *  comparable — compare-artists, period-over-period. Lines only (no fill) to
+ *  keep multiple series legible. Measures its own width via onLayout. */
+export function CompareChart({ series, height = 150, gridLines = 3, strokeWidth = 2 }: CompareChartProps) {
+  const theme = useTheme();
+  const [width, setWidth] = useState(0);
+  const onLayout = (e: LayoutChangeEvent) => setWidth(e.nativeEvent.layout.width);
+  const box = { width, height, pad: strokeWidth + 1 };
+  const paths = width > 0 ? multiLinePaths(series.map((s) => s.values), box) : [];
+
+  return (
+    <View onLayout={onLayout}>
+      {width > 0 && (
+        <Svg width={width} height={height}>
+          {Array.from({ length: gridLines }).map((_, i) => {
+            const y = (height / (gridLines + 1)) * (i + 1);
+            return <Line key={i} x1={0} y1={y} x2={width} y2={y} stroke={theme.colors.border} strokeWidth={1} />;
+          })}
+          {paths.map((d, i) => (
+            <Path
+              key={series[i].label ?? i}
+              d={d}
+              stroke={series[i].color}
+              strokeWidth={strokeWidth}
+              fill="none"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          ))}
+        </Svg>
+      )}
+    </View>
+  );
+}

package/src/components/DataTable.tsx

@@ -0,0 +1,89 @@
+import { type ReactNode } from 'react';
+import { Pressable, View, Text as RNText } from 'react-native';
+import { useTheme } from './ThemeProvider';
+
+export interface DataColumn {
+  key: string;
+  title: string;
+  /** Flex weight for the column (default 1). */
+  flex?: number;
+  align?: 'left' | 'right';
+}
+
+export interface DataRow {
+  key: string;
+  cells: Record<string, ReactNode>;
+  /** When set, the row becomes pressable (opens a detail screen, etc.). */
+  onPress?: () => void;
+}
+
+export interface DataTableProps {
+  columns: DataColumn[];
+  rows: DataRow[];
+}
+
+/** Compact multi-column table: muted header, hairline row separators. String
+ *  cells are auto-styled; pass a node for anything richer (flags, badges). */
+export function DataTable({ columns, rows }: DataTableProps) {
+  const theme = useTheme();
+  const cellAlign = (c: DataColumn) => (c.align === 'right' ? 'flex-end' : 'flex-start');
+
+  return (
+    <View>
+      <View style={{ flexDirection: 'row', paddingVertical: theme.spacing.xs, gap: theme.spacing.sm }}>
+        {columns.map((c) => (
+          <RNText
+            key={c.key}
+            style={{
+              flex: c.flex ?? 1,
+              fontSize: theme.fontSizes.xs,
+              fontWeight: theme.fontWeights.medium as never,
+              color: theme.colors.mutedForeground,
+              textAlign: c.align === 'right' ? 'right' : 'left',
+            }}
+          >
+            {c.title}
+          </RNText>
+        ))}
+      </View>
+      {rows.map((row) => {
+        const Wrapper: typeof View | typeof Pressable = row.onPress ? Pressable : View;
+        return (
+        <Wrapper
+          key={row.key}
+          {...(row.onPress ? { onPress: row.onPress, accessibilityRole: 'button' as const } : {})}
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: theme.spacing.sm,
+            paddingVertical: theme.spacing.sm,
+            borderTopWidth: 1,
+            borderTopColor: theme.colors.border,
+          }}
+        >
+          {columns.map((c) => {
+            const cell = row.cells[c.key];
+            return (
+              <View key={c.key} style={{ flex: c.flex ?? 1, alignItems: cellAlign(c) }}>
+                {typeof cell === 'string' || typeof cell === 'number' ? (
+                  <RNText
+                    style={{
+                      fontSize: theme.fontSizes.sm,
+                      color: theme.colors.foreground,
+                      textAlign: c.align === 'right' ? 'right' : 'left',
+                    }}
+                  >
+                    {cell}
+                  </RNText>
+                ) : (
+                  cell
+                )}
+              </View>
+            );
+          })}
+        </Wrapper>
+        );
+      })}
+    </View>
+  );
+}

package/src/components/DemographicBars.tsx

@@ -0,0 +1,50 @@
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from './ThemeProvider';
+import { Text } from './Text';
+import { shareBarTrackStyle } from '../styles';
+
+export interface DemographicBar {
+  label: string;
+  /** Drives the bar width, scaled relative to the largest value in the set. */
+  value: number;
+  /** Pre-formatted trailing text (e.g. "38%") — kept locale-agnostic; the
+   *  caller formats it with its own number/i18n helpers. */
+  valueLabel?: string;
+  /** Bar color; defaults to the theme primary. */
+  color?: string;
+}
+
+export interface DemographicBarsProps {
+  data: DemographicBar[];
+  /** Bar thickness in px. */
+  height?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Labeled horizontal bars for audience breakdowns (age buckets, listening
+ *  behavior…). Bars are scaled to the row set's max so the biggest fills the
+ *  track and the rest read proportionally. */
+export function DemographicBars({ data, height = 8, style }: DemographicBarsProps) {
+  const theme = useTheme();
+  const max = data.reduce((m, d) => Math.max(m, d.value), 0) || 1;
+  return (
+    <View style={[{ gap: 12 }, style]}>
+      {data.map((d, i) => (
+        <View key={`${d.label}-${i}`} style={{ gap: 4 }}>
+          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+            <Text variant="muted">{d.label}</Text>
+            {d.valueLabel ? <Text variant="muted">{d.valueLabel}</Text> : null}
+          </View>
+          <View style={shareBarTrackStyle(theme, height)} accessibilityRole="image">
+            <View
+              style={{
+                flex: Math.max(0, d.value) / max,
+                backgroundColor: d.color ?? theme.colors.primary,
+              }}
+            />
+          </View>
+        </View>
+      ))}
+    </View>
+  );
+}

package/src/components/DonutChart.tsx

@@ -0,0 +1,57 @@
+import { type ReactNode } from 'react';
+import { View } from 'react-native';
+import Svg, { Circle, G } from 'react-native-svg';
+import { useTheme } from './ThemeProvider';
+import { donutDashes, type DonutSlice } from '../charts-math';
+
+export interface DonutChartProps {
+  segments: DonutSlice[];
+  size?: number;
+  /** Ring thickness in px. */
+  thickness?: number;
+  /** Gap between slices in px. */
+  gap?: number;
+  /** Track (unfilled) color. Defaults to theme.muted. */
+  trackColor?: string;
+  /** Content rendered centered in the hole (e.g. a total). */
+  children?: ReactNode;
+}
+
+/** Ring chart drawn as overlaid dash-array circles. Slices start at the top
+ *  and go clockwise. Center content fills the hole. */
+export function DonutChart({ segments, size = 150, thickness = 18, gap = 2, trackColor, children }: DonutChartProps) {
+  const theme = useTheme();
+  const r = (size - thickness) / 2;
+  const c = 2 * Math.PI * r;
+  const dashes = donutDashes(segments, c, gap);
+  const center = size / 2;
+
+  return (
+    <View style={{ width: size, height: size, alignItems: 'center', justifyContent: 'center' }}>
+      <Svg width={size} height={size}>
+        {/* Rotate so slices start at 12 o'clock. A transform string avoids the
+            rotation/origin props that map to a `transform-origin` DOM warning on web. */}
+        <G transform={`rotate(-90, ${center}, ${center})`}>
+          <Circle cx={center} cy={center} r={r} stroke={trackColor ?? theme.colors.muted} strokeWidth={thickness} fill="none" />
+          {dashes.map((d, i) => (
+            <Circle
+              key={i}
+              cx={center}
+              cy={center}
+              r={r}
+              stroke={d.color}
+              strokeWidth={thickness}
+              strokeLinecap="butt"
+              fill="none"
+              strokeDasharray={`${d.dash} ${d.gap}`}
+              strokeDashoffset={d.offset}
+            />
+          ))}
+        </G>
+      </Svg>
+      {children != null && (
+        <View style={{ position: 'absolute', alignItems: 'center', justifyContent: 'center' }}>{children}</View>
+      )}
+    </View>
+  );
+}

package/src/components/DonutLegend.tsx

@@ -0,0 +1,49 @@
+import { type ReactNode } from 'react';
+import { View } from 'react-native';
+import { DonutChart } from './DonutChart';
+import { Text } from './Text';
+
+export interface DonutLegendItem {
+  label: string;
+  /** Segment magnitude. */
+  value: number;
+  color: string;
+  /** Optional secondary line under the label. */
+  caption?: string;
+  /** Right-aligned content (formatted value, badge, sparkline…). */
+  trailing?: ReactNode;
+}
+
+export interface DonutLegendProps {
+  items: DonutLegendItem[];
+  size?: number;
+  thickness?: number;
+  /** Content rendered in the donut hole. */
+  center?: ReactNode;
+  /** Gap between the donut and the legend. */
+  gap?: number;
+}
+
+/** Donut chart beside a colored-dot legend. The common "breakdown" block
+ *  (revenue by source, fans by platform, …). */
+export function DonutLegend({ items, size = 130, thickness = 16, center, gap = 16 }: DonutLegendProps) {
+  return (
+    <View style={{ flexDirection: 'row', alignItems: 'center', gap }}>
+      <DonutChart size={size} thickness={thickness} segments={items.map((i) => ({ value: i.value, color: i.color }))}>
+        {center}
+      </DonutChart>
+      <View style={{ flex: 1, gap: 10 }}>
+        {items.map((it, idx) => (
+          <View key={`${it.label}-${idx}`} style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: it.color }} />
+            <View style={{ flex: 1 }}>
+              <Text variant="muted">{it.label}</Text>
+              {it.caption ? <Text variant="caption">{it.caption}</Text> : null}
+            </View>
+            {it.trailing ? <View>{it.trailing}</View> : null}
+          </View>
+        ))}
+      </View>
+    </View>
+  );
+}