@elvora/react-native 1.0.0-rc.1

package/src/Box.tsx

@@ -0,0 +1,67 @@
+import { forwardRef } from 'react';
+import { View, type ViewProps, type ViewStyle, type StyleProp } from 'react-native';
+
+export interface BoxProps extends ViewProps {
+  p?: number;
+  px?: number;
+  py?: number;
+  pt?: number;
+  pr?: number;
+  pb?: number;
+  pl?: number;
+  m?: number;
+  mx?: number;
+  my?: number;
+  mt?: number;
+  mr?: number;
+  mb?: number;
+  ml?: number;
+  w?: number | string;
+  h?: number | string;
+  bg?: string;
+  rounded?: number;
+  shadow?: ViewStyle;
+}
+
+function resolveStyle(props: BoxProps): ViewStyle {
+  const s: ViewStyle = {};
+  if (props.p !== undefined) s.padding = props.p;
+  if (props.px !== undefined) s.paddingHorizontal = props.px;
+  if (props.py !== undefined) s.paddingVertical = props.py;
+  if (props.pt !== undefined) s.paddingTop = props.pt;
+  if (props.pr !== undefined) s.paddingRight = props.pr;
+  if (props.pb !== undefined) s.paddingBottom = props.pb;
+  if (props.pl !== undefined) s.paddingLeft = props.pl;
+  if (props.m !== undefined) s.margin = props.m;
+  if (props.mx !== undefined) s.marginHorizontal = props.mx;
+  if (props.my !== undefined) s.marginVertical = props.my;
+  if (props.mt !== undefined) s.marginTop = props.mt;
+  if (props.mr !== undefined) s.marginRight = props.mr;
+  if (props.mb !== undefined) s.marginBottom = props.mb;
+  if (props.ml !== undefined) s.marginLeft = props.ml;
+  if (props.w !== undefined) s.width = props.w as ViewStyle['width'];
+  if (props.h !== undefined) s.height = props.h as ViewStyle['height'];
+  if (props.bg !== undefined) s.backgroundColor = props.bg;
+  if (props.rounded !== undefined) s.borderRadius = props.rounded;
+  if (props.shadow !== undefined) Object.assign(s, props.shadow);
+  return s;
+}
+
+/** Box — universal layout primitive for RN. Accepts shorthand style props. */
+export const Box = forwardRef<View, BoxProps>(function Box(props, ref) {
+  const { style, children, ...rest } = props;
+  const resolved = resolveStyle(rest);
+  const passthrough: ViewProps = { ...rest };
+  for (const k of [
+    'p','px','py','pt','pr','pb','pl','m','mx','my','mt','mr','mb','ml',
+    'w','h','bg','rounded','shadow',
+  ] as const) {
+    delete (passthrough as Record<string, unknown>)[k];
+  }
+  const composed: StyleProp<ViewStyle> = [resolved, style];
+  return (
+    <View ref={ref} style={composed} {...passthrough}>
+      {children}
+    </View>
+  );
+});

package/src/Breadcrumb.tsx

@@ -0,0 +1,46 @@
+import { Fragment, type ReactNode } from 'react';
+import { Pressable, Text, View, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+import { Icon } from './Icon';
+
+export interface BreadcrumbItem {
+  label: string;
+  onPress?: () => void;
+  isCurrent?: boolean;
+}
+
+export interface BreadcrumbProps extends ViewProps {
+  items: BreadcrumbItem[];
+  separator?: ReactNode;
+}
+
+/** Breadcrumb — navigation trail for RN. */
+export function Breadcrumb(props: BreadcrumbProps) {
+  const { items, separator, style, ...rest } = props;
+  const theme = useTheme();
+  const sep = separator ?? <Icon name="chevronRight" size={14} color={theme.colors.fgSubtle} />;
+  return (
+    <View
+      accessibilityRole="header"
+      style={[{ flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 6 }, style]}
+      {...rest}
+    >
+      {items.map((item, idx) => {
+        const isLast = idx === items.length - 1;
+        const current = item.isCurrent ?? isLast;
+        const color = current ? theme.colors.fg : theme.colors.fgMuted;
+        const labelEl = (
+          <Text accessibilityRole={current ? 'text' : 'link'} style={{ color, fontSize: 14 }}>
+            {item.label}
+          </Text>
+        );
+        return (
+          <Fragment key={idx}>
+            {item.onPress && !current ? <Pressable onPress={item.onPress}>{labelEl}</Pressable> : labelEl}
+            {!isLast ? <View accessibilityElementsHidden>{sep}</View> : null}
+          </Fragment>
+        );
+      })}
+    </View>
+  );
+}

package/src/Button.test.tsx

@@ -0,0 +1,39 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { ElvoraProvider } from './ElvoraProvider';
+import { Button } from './Button';
+
+function wrap(node: ReactNode) {
+  return render(<ElvoraProvider>{node}</ElvoraProvider>);
+}
+
+describe('<Button> (RN)', () => {
+  it('renders its label', () => {
+    wrap(<Button>Save</Button>);
+    expect(screen.getByText('Save')).toBeInTheDocument();
+  });
+
+  it('fires onPress on click', () => {
+    const onPress = vi.fn();
+    wrap(<Button onPress={onPress}>Tap</Button>);
+    fireEvent.click(screen.getByRole('button'));
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('respects isDisabled', () => {
+    const onPress = vi.fn();
+    wrap(
+      <Button onPress={onPress} isDisabled>
+        Disabled
+      </Button>,
+    );
+    fireEvent.click(screen.getByRole('button'));
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it('announces loading state', () => {
+    wrap(<Button isLoading>Saving</Button>);
+    expect(screen.getByRole('button')).toHaveAttribute('aria-busy', 'true');
+  });
+});

package/src/Button.tsx

@@ -0,0 +1,127 @@
+import { forwardRef, useState, type ReactNode } from 'react';
+import {
+  Pressable,
+  Text,
+  ActivityIndicator,
+  View,
+  type GestureResponderEvent,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import { defaultButtonProps, getButtonStyle, type ButtonOwnProps } from '@elvora/core';
+import { useTheme } from './ElvoraProvider';
+
+export interface ButtonProps extends ButtonOwnProps, Omit<PressableProps, 'children' | 'disabled' | 'style'> {
+  children?: ReactNode;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+  onPress?: (event: GestureResponderEvent) => void;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}
+
+/**
+ * React Native Button. Same headless contract as the web Button, rendered
+ * with `Pressable`. Identical variants/sizes/states.
+ */
+export const Button = forwardRef<View, ButtonProps>(function Button(props, ref) {
+  const {
+    variant = defaultButtonProps.variant,
+    size = defaultButtonProps.size,
+    intent,
+    fullWidth = defaultButtonProps.fullWidth,
+    isLoading = defaultButtonProps.isLoading,
+    isDisabled = defaultButtonProps.isDisabled,
+    loadingText = defaultButtonProps.loadingText,
+    children,
+    leftIcon,
+    rightIcon,
+    onPress,
+    style,
+    textStyle,
+    ...rest
+  } = props;
+
+  const theme = useTheme();
+  const [isPressed, setPressed] = useState(false);
+
+  const inert = isDisabled || isLoading;
+
+  const styleResult = getButtonStyle({
+    theme,
+    variant,
+    size,
+    fullWidth,
+    isLoading,
+    isDisabled,
+    isPressed,
+    isHovered: false,
+    isFocusVisible: false,
+    intent,
+  });
+
+  // Translate the headless web-style descriptor into RN-friendly ViewStyle.
+  const rootStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: Number(styleResult.root.gap) || 8,
+    paddingHorizontal: Number(styleResult.root.paddingLeft) || 16,
+    paddingVertical: Number(styleResult.root.paddingTop) || 8,
+    minHeight: Number(styleResult.root.minHeight) || 40,
+    borderRadius: parseInt(String(styleResult.root.borderRadius), 10) || 6,
+    borderWidth: Number(styleResult.root.borderWidth) || 0,
+    borderColor: String(styleResult.root.borderColor || 'transparent'),
+    backgroundColor: String(styleResult.root.backgroundColor || 'transparent'),
+    opacity: Number(styleResult.root.opacity) || 1,
+    alignSelf: fullWidth ? 'stretch' : 'flex-start',
+  };
+
+  return (
+    <Pressable
+      ref={ref}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: inert, busy: isLoading }}
+      accessibilityLabel={isLoading ? loadingText : undefined}
+      disabled={inert}
+      onPressIn={(e) => {
+        setPressed(true);
+        rest.onPressIn?.(e);
+      }}
+      onPressOut={(e) => {
+        setPressed(false);
+        rest.onPressOut?.(e);
+      }}
+      onPress={(e) => {
+        if (inert) return;
+        onPress?.(e);
+      }}
+      style={[rootStyle, style]}
+      {...rest}
+    >
+      {isLoading ? (
+        <View style={{ position: 'absolute', alignItems: 'center', justifyContent: 'center' }}>
+          <ActivityIndicator size="small" color={styleResult.spinnerColor} />
+        </View>
+      ) : null}
+      {leftIcon}
+      <Text
+        accessible={false}
+        style={[
+          {
+            color: String(styleResult.label.color),
+            fontSize: Number(styleResult.label.fontSize) || 14,
+            fontWeight: String(styleResult.label.fontWeight) as TextStyle['fontWeight'],
+            opacity: Number(styleResult.label.opacity) ?? 1,
+          },
+          textStyle,
+        ]}
+      >
+        {children}
+      </Text>
+      {rightIcon}
+    </Pressable>
+  );
+});

package/src/ButtonGroup.tsx

@@ -0,0 +1,74 @@
+import { Children, cloneElement, isValidElement, useCallback, useState, type ReactElement, type ReactNode } from 'react';
+import { View, type ViewStyle } from 'react-native';
+import type { ToggleButtonProps } from './ToggleButton';
+
+export type ButtonGroupOrientation = 'horizontal' | 'vertical';
+export type ButtonGroupSelectionMode = 'none' | 'single' | 'multiple';
+
+export interface ButtonGroupProps {
+  orientation?: ButtonGroupOrientation;
+  mode?: ButtonGroupSelectionMode;
+  value?: string | string[] | null;
+  defaultValue?: string | string[] | null;
+  onChange?: (value: string | string[] | null) => void;
+  allowDeselect?: boolean;
+  style?: ViewStyle;
+  children?: ReactNode;
+}
+
+export function ButtonGroup(props: ButtonGroupProps) {
+  const {
+    orientation = 'horizontal',
+    mode = 'none',
+    value: valueProp,
+    defaultValue,
+    onChange,
+    allowDeselect = true,
+    style,
+    children,
+  } = props;
+  const [internal, setInternal] = useState<string | string[] | null>(
+    defaultValue ?? (mode === 'multiple' ? [] : null),
+  );
+  const value = valueProp !== undefined ? valueProp : internal;
+  const setValue = useCallback(
+    (next: string | string[] | null) => {
+      if (valueProp === undefined) setInternal(next);
+      onChange?.(next);
+    },
+    [valueProp, onChange],
+  );
+
+  const handleToggle = useCallback(
+    (btnValue: string, selected: boolean) => {
+      if (mode === 'single') {
+        if (selected) setValue(btnValue);
+        else if (allowDeselect) setValue(null);
+      } else if (mode === 'multiple') {
+        const arr = Array.isArray(value) ? value : [];
+        if (selected) setValue([...new Set([...arr, btnValue])]);
+        else setValue(arr.filter((v) => v !== btnValue));
+      }
+    },
+    [mode, value, allowDeselect, setValue],
+  );
+
+  return (
+    <View
+      style={[{ flexDirection: orientation === 'horizontal' ? 'row' : 'column', gap: 4 }, style]}
+    >
+      {Children.map(children, (child) => {
+        if (!isValidElement(child)) return child;
+        const props = child.props as ToggleButtonProps;
+        if (mode === 'none' || props.value === undefined) return child;
+        const btnValue = props.value;
+        const isSelected =
+          mode === 'single' ? value === btnValue : Array.isArray(value) && value.includes(btnValue);
+        return cloneElement(child as ReactElement<ToggleButtonProps>, {
+          selected: isSelected,
+          onChange: (s: boolean) => handleToggle(btnValue, s),
+        });
+      })}
+    </View>
+  );
+}

package/src/Calendar.tsx

@@ -0,0 +1,165 @@
+import { useState, type ReactNode } from 'react';
+import { Pressable, View, Text, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface CalendarProps extends Omit<ViewProps, 'children'> {
+  value?: Date;
+  defaultValue?: Date;
+  onChange?: (date: Date) => void;
+  viewMonth?: Date;
+  onViewMonthChange?: (date: Date) => void;
+  dateCellRender?: (date: Date) => ReactNode;
+  isDateDisabled?: (date: Date) => boolean;
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  locale?: string;
+}
+
+function startOfMonth(d: Date): Date {
+  return new Date(d.getFullYear(), d.getMonth(), 1);
+}
+
+function addMonths(d: Date, n: number): Date {
+  return new Date(d.getFullYear(), d.getMonth() + n, 1);
+}
+
+function isSameDay(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+
+function isSameMonth(a: Date, b: Date): boolean {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+
+function buildMonthMatrix(view: Date, weekStartsOn: number): Date[][] {
+  const first = startOfMonth(view);
+  const offset = (first.getDay() - weekStartsOn + 7) % 7;
+  const start = new Date(first);
+  start.setDate(first.getDate() - offset);
+  const weeks: Date[][] = [];
+  let cursor = new Date(start);
+  for (let w = 0; w < 6; w++) {
+    const row: Date[] = [];
+    for (let d = 0; d < 7; d++) {
+      row.push(new Date(cursor));
+      cursor.setDate(cursor.getDate() + 1);
+    }
+    weeks.push(row);
+  }
+  return weeks;
+}
+
+export function Calendar(props: CalendarProps) {
+  const {
+    value: valueProp,
+    defaultValue,
+    onChange,
+    viewMonth: viewMonthProp,
+    onViewMonthChange,
+    dateCellRender,
+    isDateDisabled,
+    weekStartsOn = 0,
+    locale,
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const today = new Date();
+  const [internalValue, setInternalValue] = useState<Date | undefined>(defaultValue);
+  const [internalView, setInternalView] = useState<Date>(startOfMonth(valueProp ?? defaultValue ?? today));
+  const value = valueProp ?? internalValue;
+  const view = viewMonthProp ?? internalView;
+
+  const setView = (next: Date) => {
+    const start = startOfMonth(next);
+    if (viewMonthProp === undefined) setInternalView(start);
+    onViewMonthChange?.(start);
+  };
+
+  const setValue = (next: Date) => {
+    if (isDateDisabled?.(next)) return;
+    if (valueProp === undefined) setInternalValue(next);
+    onChange?.(next);
+  };
+
+  const dayLabels: string[] = [];
+  for (let i = 0; i < 7; i++) {
+    const d = new Date(2024, 0, 7 + i + weekStartsOn);
+    dayLabels.push(d.toLocaleDateString(locale, { weekday: 'short' }));
+  }
+
+  const monthLabel = view.toLocaleDateString(locale, { month: 'long', year: 'numeric' });
+  const weeks = buildMonthMatrix(view, weekStartsOn);
+
+  return (
+    <View
+      style={[
+        {
+          backgroundColor: theme.colors.surfaceElevated,
+          borderRadius: 8,
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+          padding: 16,
+          minWidth: 280,
+        },
+        style,
+      ]}
+      {...rest}
+    >
+      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
+        <Pressable accessibilityRole="button" accessibilityLabel="Previous month" onPress={() => setView(addMonths(view, -1))} style={{ padding: 8 }}>
+          <Text style={{ color: theme.colors.fg }}>{'<'}</Text>
+        </Pressable>
+        <Text style={{ color: theme.colors.fg, fontWeight: '600' }}>{monthLabel}</Text>
+        <Pressable accessibilityRole="button" accessibilityLabel="Next month" onPress={() => setView(addMonths(view, 1))} style={{ padding: 8 }}>
+          <Text style={{ color: theme.colors.fg }}>{'>'}</Text>
+        </Pressable>
+      </View>
+      <View style={{ flexDirection: 'row' }}>
+        {dayLabels.map((label) => (
+          <View key={label} style={{ flex: 1, alignItems: 'center', paddingVertical: 4 }}>
+            <Text style={{ color: theme.colors.fgSubtle, fontSize: 12, fontWeight: '500' }}>{label}</Text>
+          </View>
+        ))}
+      </View>
+      {weeks.map((week, wi) => (
+        <View key={wi} style={{ flexDirection: 'row' }}>
+          {week.map((d) => {
+            const inMonth = isSameMonth(d, view);
+            const selected = value ? isSameDay(d, value) : false;
+            const isToday = isSameDay(d, today);
+            const disabled = isDateDisabled?.(d);
+            const bg = selected
+              ? theme.colors.intent.primary.solid
+              : isToday
+                ? theme.colors.intent.primary.subtle
+                : 'transparent';
+            const color = selected
+              ? theme.colors.intent.primary.solidFg
+              : !inMonth
+                ? theme.colors.fgSubtle
+                : theme.colors.fg;
+            return (
+              <Pressable
+                key={d.toISOString()}
+                disabled={disabled}
+                onPress={() => setValue(d)}
+                style={{
+                  flex: 1,
+                  alignItems: 'center',
+                  paddingVertical: 8,
+                  margin: 1,
+                  borderRadius: 6,
+                  backgroundColor: bg,
+                  opacity: disabled ? 0.5 : 1,
+                }}
+              >
+                <Text style={{ color }}>{d.getDate()}</Text>
+                {dateCellRender ? <Text style={{ fontSize: 10, color }}>{dateCellRender(d) as string}</Text> : null}
+              </Pressable>
+            );
+          })}
+        </View>
+      ))}
+    </View>
+  );
+}

package/src/Card.tsx

@@ -0,0 +1,69 @@
+import { forwardRef, type ReactNode } from 'react';
+import { View, type ViewProps, type ViewStyle } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface CardProps extends ViewProps {
+  variant?: 'outline' | 'elevated' | 'filled';
+  padding?: number;
+  children?: ReactNode;
+}
+
+const elevatedShadow: ViewStyle = {
+  shadowColor: '#000',
+  shadowOpacity: 0.08,
+  shadowRadius: 6,
+  shadowOffset: { width: 0, height: 2 },
+  elevation: 3,
+};
+
+/** Card — content container for RN. */
+export const Card = forwardRef<View, CardProps>(function Card(props, ref) {
+  const { variant = 'outline', padding = 16, style, children, ...rest } = props;
+  const theme = useTheme();
+  const base: ViewStyle = {
+    backgroundColor: variant === 'filled' ? theme.colors.intent.neutral.subtle : theme.colors.surfaceElevated,
+    borderColor: theme.colors.border,
+    borderWidth: variant === 'outline' ? 1 : 0,
+    borderRadius: theme.radii.lg,
+    padding,
+  };
+  return (
+    <View ref={ref} style={[base, variant === 'elevated' ? elevatedShadow : null, style]} {...rest}>
+      {children}
+    </View>
+  );
+});
+
+export const CardHeader = forwardRef<View, ViewProps>(function CardHeader({ style, children, ...rest }, ref) {
+  const theme = useTheme();
+  return (
+    <View
+      ref={ref}
+      style={[{ paddingBottom: 12, borderBottomWidth: 1, borderBottomColor: theme.colors.border, marginBottom: 12 }, style]}
+      {...rest}
+    >
+      {children}
+    </View>
+  );
+});
+
+export const CardBody = forwardRef<View, ViewProps>(function CardBody({ style, children, ...rest }, ref) {
+  return (
+    <View ref={ref} style={style} {...rest}>
+      {children}
+    </View>
+  );
+});
+
+export const CardFooter = forwardRef<View, ViewProps>(function CardFooter({ style, children, ...rest }, ref) {
+  const theme = useTheme();
+  return (
+    <View
+      ref={ref}
+      style={[{ paddingTop: 12, borderTopWidth: 1, borderTopColor: theme.colors.border, marginTop: 12 }, style]}
+      {...rest}
+    >
+      {children}
+    </View>
+  );
+});

package/src/Carousel.tsx

@@ -0,0 +1,99 @@
+import { useCallback, useEffect, useRef, useState, type ReactNode } from 'react';
+import { Pressable, ScrollView, View, Text, useWindowDimensions, type NativeScrollEvent, type NativeSyntheticEvent, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface CarouselProps extends Omit<ViewProps, 'onChange'> {
+  items: ReactNode[];
+  current?: number;
+  defaultCurrent?: number;
+  onChange?: (index: number) => void;
+  autoplay?: number;
+  dots?: boolean;
+  loop?: boolean;
+  height?: number;
+  width?: number;
+}
+
+export function Carousel(props: CarouselProps) {
+  const {
+    items,
+    current: currentProp,
+    defaultCurrent = 0,
+    onChange,
+    autoplay = 0,
+    dots = true,
+    loop = true,
+    height = 200,
+    width: widthProp,
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const { width: windowWidth } = useWindowDimensions();
+  const width = widthProp ?? windowWidth - 32;
+  const [internal, setInternal] = useState(defaultCurrent);
+  const current = currentProp ?? internal;
+  const scrollRef = useRef<ScrollView>(null);
+
+  const setCurrent = useCallback(
+    (next: number) => {
+      const total = items.length;
+      const wrapped = loop ? (next + total) % total : Math.max(0, Math.min(total - 1, next));
+      if (currentProp === undefined) setInternal(wrapped);
+      onChange?.(wrapped);
+      scrollRef.current?.scrollTo({ x: wrapped * width, animated: true });
+    },
+    [items.length, loop, currentProp, onChange, width],
+  );
+
+  useEffect(() => {
+    if (!autoplay || items.length < 2) return;
+    const id = setInterval(() => setCurrent(current + 1), autoplay);
+    return () => clearInterval(id);
+  }, [autoplay, current, items.length, setCurrent]);
+
+  const handleMomentumScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const next = Math.round(e.nativeEvent.contentOffset.x / width);
+    if (next !== current) {
+      if (currentProp === undefined) setInternal(next);
+      onChange?.(next);
+    }
+  };
+
+  return (
+    <View style={[{ width, borderRadius: 8, overflow: 'hidden' }, style]} {...rest}>
+      <ScrollView
+        ref={scrollRef}
+        horizontal
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        onMomentumScrollEnd={handleMomentumScrollEnd}
+        style={{ height }}
+      >
+        {items.map((item, idx) => (
+          <View key={idx} style={{ width, height, alignItems: 'center', justifyContent: 'center' }}>
+            {typeof item === 'string' ? <Text style={{ color: theme.colors.fg }}>{item}</Text> : item}
+          </View>
+        ))}
+      </ScrollView>
+      {dots ? (
+        <View style={{ flexDirection: 'row', justifyContent: 'center', paddingVertical: 8, gap: 6 }}>
+          {items.map((_, idx) => (
+            <Pressable
+              key={idx}
+              accessibilityRole="button"
+              accessibilityLabel={`Go to slide ${idx + 1}`}
+              onPress={() => setCurrent(idx)}
+              style={{
+                width: 8,
+                height: 8,
+                borderRadius: 4,
+                backgroundColor: idx === current ? theme.colors.intent.primary.solid : theme.colors.intent.neutral.subtle,
+              }}
+            />
+          ))}
+        </View>
+      ) : null}
+    </View>
+  );
+}