@elvora/react-native 1.0.0-rc.1

package/src/Stepper.tsx

@@ -0,0 +1,113 @@
+import { useState, type ReactNode } from 'react';
+import { Pressable, Text, View, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+import { Button } from './Button';
+
+export interface StepperStep {
+  key: string;
+  label: ReactNode;
+  description?: ReactNode;
+  content?: ReactNode;
+  optional?: boolean;
+}
+
+export interface StepperProps extends Omit<ViewProps, 'children'> {
+  steps: StepperStep[];
+  active?: number;
+  defaultActive?: number;
+  onChange?: (index: number) => void;
+  orientation?: 'horizontal' | 'vertical';
+  showNavigation?: boolean;
+  nextLabel?: string;
+  prevLabel?: string;
+  finishLabel?: string;
+  onFinish?: () => void;
+}
+
+export function Stepper(props: StepperProps) {
+  const {
+    steps,
+    active: activeProp,
+    defaultActive = 0,
+    onChange,
+    orientation = 'vertical',
+    showNavigation = true,
+    nextLabel = 'Next',
+    prevLabel = 'Back',
+    finishLabel = 'Finish',
+    onFinish,
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const [internal, setInternal] = useState(defaultActive);
+  const active = activeProp ?? internal;
+  const total = steps.length;
+  const go = (idx: number) => {
+    const clamped = Math.max(0, Math.min(total - 1, idx));
+    if (activeProp === undefined) setInternal(clamped);
+    onChange?.(clamped);
+  };
+  const isVertical = orientation === 'vertical';
+
+  return (
+    <View style={style} {...rest}>
+      <View style={{ flexDirection: isVertical ? 'column' : 'row', alignItems: 'flex-start', gap: 8 }}>
+        {steps.map((step, idx) => {
+          const done = idx < active;
+          const isActive = idx === active;
+          const circleBg = done || isActive ? theme.colors.intent.primary.solid : theme.colors.intent.neutral.subtle;
+          const circleFg = done || isActive ? theme.colors.intent.primary.solidFg : theme.colors.fg;
+          return (
+            <View key={step.key} style={{ flexDirection: 'row', flex: isVertical ? undefined : 1, gap: 8 }}>
+              <Pressable
+                accessibilityRole="button"
+                accessibilityLabel={`Go to step ${idx + 1}`}
+                onPress={() => go(idx)}
+                style={{
+                  width: 28,
+                  height: 28,
+                  borderRadius: 14,
+                  backgroundColor: circleBg,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Text style={{ color: circleFg, fontWeight: '600', fontSize: 12 }}>{done ? '✓' : idx + 1}</Text>
+              </Pressable>
+              <View style={{ flex: 1 }}>
+                <Text style={{ fontWeight: '500', color: isActive ? theme.colors.fg : theme.colors.fgSubtle }}>
+                  {step.label}
+                  {step.optional ? <Text style={{ color: theme.colors.fgSubtle, fontSize: 11 }}>  (optional)</Text> : null}
+                </Text>
+                {step.description ? (
+                  <Text style={{ color: theme.colors.fgSubtle, fontSize: 12 }}>{step.description}</Text>
+                ) : null}
+                {isVertical && isActive && step.content ? <View style={{ marginTop: 8 }}>{step.content}</View> : null}
+              </View>
+            </View>
+          );
+        })}
+      </View>
+      {!isVertical && steps[active]?.content ? <View style={{ marginTop: 12 }}>{steps[active]!.content}</View> : null}
+      {showNavigation ? (
+        <View style={{ flexDirection: 'row', justifyContent: 'flex-end', gap: 8, marginTop: 12 }}>
+          {active > 0 ? (
+            <Button variant="outline" size="sm" onPress={() => go(active - 1)}>
+              {prevLabel}
+            </Button>
+          ) : null}
+          {active < total - 1 ? (
+            <Button size="sm" onPress={() => go(active + 1)}>
+              {nextLabel}
+            </Button>
+          ) : (
+            <Button size="sm" onPress={onFinish}>
+              {finishLabel}
+            </Button>
+          )}
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/Steps.tsx

@@ -0,0 +1,146 @@
+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 Step {
+  title: ReactNode;
+  description?: ReactNode;
+  status?: 'wait' | 'process' | 'finish' | 'error';
+}
+
+export interface StepsProps extends Omit<ViewProps, 'onChange'> {
+  steps: Step[];
+  current?: number;
+  orientation?: 'horizontal' | 'vertical';
+  onChange?: (index: number) => void;
+}
+
+/** Steps — multi-step progress indicator for RN. */
+export function Steps(props: StepsProps) {
+  const { steps, current = 0, orientation = 'horizontal', onChange, style, ...rest } = props;
+  const theme = useTheme();
+  const intent = theme.colors.intent.primary;
+  const isHorizontal = orientation === 'horizontal';
+
+  const resolveStatus = (i: number, override?: Step['status']) => {
+    if (override) return override;
+    if (i < current) return 'finish';
+    if (i === current) return 'process';
+    return 'wait';
+  };
+
+  const dotStyle = (s: ReturnType<typeof resolveStatus>) => {
+    switch (s) {
+      case 'finish':
+        return { backgroundColor: intent.solid, color: intent.solidFg, borderColor: intent.solid };
+      case 'process':
+        return { backgroundColor: theme.colors.surfaceElevated, color: intent.solid, borderColor: intent.solid };
+      case 'error':
+        return {
+          backgroundColor: theme.colors.surfaceElevated,
+          color: theme.colors.intent.danger.solid,
+          borderColor: theme.colors.intent.danger.solid,
+        };
+      default:
+        return {
+          backgroundColor: theme.colors.surfaceElevated,
+          color: theme.colors.fgMuted,
+          borderColor: theme.colors.border,
+        };
+    }
+  };
+
+  return (
+    <View
+      style={[
+        {
+          flexDirection: isHorizontal ? 'row' : 'column',
+          alignItems: isHorizontal ? 'flex-start' : 'stretch',
+          gap: isHorizontal ? 0 : 12,
+        },
+        style,
+      ]}
+      {...rest}
+    >
+      {steps.map((step, i) => {
+        const status = resolveStatus(i, step.status);
+        const dot = dotStyle(status);
+        const isLast = i === steps.length - 1;
+        return (
+          <Fragment key={i}>
+            <Pressable
+              accessibilityRole={onChange ? 'button' : undefined}
+              accessibilityState={{ selected: status === 'process' }}
+              onPress={() => onChange?.(i)}
+              disabled={!onChange}
+              style={{
+                flex: isHorizontal ? 1 : undefined,
+                flexDirection: isHorizontal ? 'column' : 'row',
+                alignItems: isHorizontal ? 'center' : 'flex-start',
+                gap: 8,
+              }}
+            >
+              <View
+                style={{
+                  width: 28,
+                  height: 28,
+                  borderRadius: 14,
+                  borderWidth: 2,
+                  borderColor: dot.borderColor,
+                  backgroundColor: dot.backgroundColor,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                {status === 'finish' ? (
+                  <Icon name="check" size={14} color={dot.color} />
+                ) : status === 'error' ? (
+                  <Icon name="x" size={14} color={dot.color} />
+                ) : (
+                  <Text style={{ color: dot.color, fontSize: 13, fontWeight: '600' }}>{i + 1}</Text>
+                )}
+              </View>
+              <View style={{ alignItems: isHorizontal ? 'center' : 'flex-start' }}>
+                <Text
+                  style={{
+                    fontSize: 14,
+                    fontWeight: '600',
+                    color: status === 'wait' ? theme.colors.fgMuted : theme.colors.fg,
+                  }}
+                >
+                  {step.title}
+                </Text>
+                {step.description ? (
+                  <Text style={{ fontSize: 12, color: theme.colors.fgMuted, marginTop: 2 }}>{step.description}</Text>
+                ) : null}
+              </View>
+            </Pressable>
+            {!isLast ? (
+              isHorizontal ? (
+                <View
+                  style={{
+                    flex: 1,
+                    height: 2,
+                    backgroundColor: status === 'finish' ? intent.solid : theme.colors.border,
+                    alignSelf: 'center',
+                    marginTop: 13,
+                  }}
+                />
+              ) : (
+                <View
+                  style={{
+                    width: 2,
+                    minHeight: 18,
+                    backgroundColor: status === 'finish' ? intent.solid : theme.colors.border,
+                    marginLeft: 13,
+                  }}
+                />
+              )
+            ) : null}
+          </Fragment>
+        );
+      })}
+    </View>
+  );
+}

package/src/Switch.tsx

@@ -0,0 +1,52 @@
+import { forwardRef, type ReactNode } from 'react';
+import {
+  Pressable,
+  Switch as RNSwitch,
+  Text,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { useControllableState } from '@elvora/core/react';
+import { useTheme } from './ElvoraProvider';
+
+export interface SwitchProps extends Omit<PressableProps, 'onPress' | 'children'> {
+  isDisabled?: boolean;
+  isChecked?: boolean;
+  defaultChecked?: boolean;
+  onChange?: (checked: boolean) => void;
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const Switch = forwardRef<View, SwitchProps>(function Switch(props, ref) {
+  const { isDisabled = false, isChecked, defaultChecked = false, onChange, children, style, ...rest } = props;
+  const theme = useTheme();
+  const [checked, setChecked] = useControllableState({
+    value: isChecked,
+    defaultValue: defaultChecked,
+    onChange,
+  });
+
+  return (
+    <Pressable
+      ref={ref}
+      accessibilityRole="switch"
+      accessibilityState={{ checked: Boolean(checked), disabled: isDisabled }}
+      disabled={isDisabled}
+      onPress={() => setChecked(!checked)}
+      style={[{ flexDirection: 'row', alignItems: 'center', gap: 8 }, style]}
+      {...rest}
+    >
+      <RNSwitch
+        value={Boolean(checked)}
+        disabled={isDisabled}
+        onValueChange={setChecked}
+        trackColor={{ false: theme.colors.intent.neutral.subtle, true: theme.colors.intent.primary.solid }}
+        thumbColor="#fff"
+      />
+      {children ? <Text style={{ color: theme.colors.fg, fontSize: 14 }}>{children}</Text> : null}
+    </Pressable>
+  );
+});

package/src/Table.tsx

@@ -0,0 +1,178 @@
+import { useMemo, useState, type ReactNode } from 'react';
+import { Pressable, ScrollView, View, Text, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export type SortOrder = 'asc' | 'desc' | null;
+
+export interface TableColumn<Row = Record<string, unknown>> {
+  key: string;
+  title: ReactNode;
+  dataIndex?: keyof Row | string;
+  render?: (value: unknown, row: Row, index: number) => ReactNode;
+  sortable?: boolean;
+  sorter?: (a: Row, b: Row) => number;
+  width?: number;
+  align?: 'left' | 'center' | 'right';
+}
+
+export interface TableProps<Row = Record<string, unknown>> extends Omit<ViewProps, 'children'> {
+  columns: TableColumn<Row>[];
+  dataSource: Row[];
+  rowKey?: keyof Row | ((row: Row, index: number) => string | number);
+  size?: 'sm' | 'md' | 'lg';
+  bordered?: boolean;
+  striped?: boolean;
+  emptyState?: ReactNode;
+  onRowPress?: (row: Row, index: number) => void;
+}
+
+function defaultCompare(a: unknown, b: unknown): number {
+  if (a == null && b == null) return 0;
+  if (a == null) return -1;
+  if (b == null) return 1;
+  if (typeof a === 'number' && typeof b === 'number') return a - b;
+  return String(a).localeCompare(String(b));
+}
+
+export function Table<Row extends Record<string, unknown>>(props: TableProps<Row>) {
+  const {
+    columns,
+    dataSource,
+    rowKey,
+    size = 'md',
+    bordered,
+    striped,
+    emptyState,
+    onRowPress,
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const [sortKey, setSortKey] = useState<string | null>(null);
+  const [sortOrder, setSortOrder] = useState<SortOrder>(null);
+
+  const sortedRows = useMemo(() => {
+    if (!sortKey || !sortOrder) return dataSource;
+    const col = columns.find((c) => c.key === sortKey);
+    if (!col || !col.sortable) return dataSource;
+    const arr = [...dataSource];
+    const compare = col.sorter
+      ? col.sorter
+      : (a: Row, b: Row) => defaultCompare(a[col.dataIndex as keyof Row], b[col.dataIndex as keyof Row]);
+    arr.sort((a, b) => (sortOrder === 'asc' ? compare(a, b) : -compare(a, b)));
+    return arr;
+  }, [columns, dataSource, sortKey, sortOrder]);
+
+  const toggleSort = (key: string) => {
+    if (sortKey !== key) {
+      setSortKey(key);
+      setSortOrder('asc');
+      return;
+    }
+    if (sortOrder === 'asc') setSortOrder('desc');
+    else if (sortOrder === 'desc') {
+      setSortKey(null);
+      setSortOrder(null);
+    } else setSortOrder('asc');
+  };
+
+  const cellPadding = size === 'sm' ? 8 : size === 'lg' ? 16 : 12;
+  const borderColor = theme.colors.border;
+
+  const getRowKey = (row: Row, idx: number): string | number => {
+    if (typeof rowKey === 'function') return rowKey(row, idx);
+    if (rowKey) return String((row as Record<string, unknown>)[rowKey as string] ?? idx);
+    return idx;
+  };
+
+  if (dataSource.length === 0 && emptyState) {
+    return <View accessibilityRole="text">{typeof emptyState === 'string' ? <Text>{emptyState}</Text> : emptyState}</View>;
+  }
+
+  return (
+    <ScrollView horizontal showsHorizontalScrollIndicator={false} style={style} {...rest}>
+      <View
+        style={{
+          borderWidth: bordered ? 1 : 0,
+          borderColor,
+          borderRadius: 8,
+          backgroundColor: theme.colors.surfaceElevated,
+          overflow: 'hidden',
+        }}
+      >
+        <View
+          style={{
+            flexDirection: 'row',
+            backgroundColor: theme.colors.intent.neutral.subtle,
+            borderBottomWidth: 1,
+            borderBottomColor: borderColor,
+          }}
+        >
+          {columns.map((col) => (
+            <Pressable
+              key={col.key}
+              accessibilityRole={col.sortable ? 'button' : undefined}
+              onPress={col.sortable ? () => toggleSort(col.key) : undefined}
+              style={{
+                width: col.width ?? 120,
+                padding: cellPadding,
+                alignItems: col.align === 'center' ? 'center' : col.align === 'right' ? 'flex-end' : 'flex-start',
+              }}
+            >
+              <Text style={{ color: theme.colors.fg, fontWeight: '600', fontSize: 14 }}>
+                {typeof col.title === 'string' ? col.title : null}
+                {col.sortable
+                  ? sortKey === col.key
+                    ? sortOrder === 'asc'
+                      ? ' ↑'
+                      : sortOrder === 'desc'
+                        ? ' ↓'
+                        : ''
+                    : ' ⇅'
+                  : ''}
+              </Text>
+            </Pressable>
+          ))}
+        </View>
+        <ScrollView>
+          {sortedRows.map((row, rowIndex) => {
+            const isStriped = striped && rowIndex % 2 === 1;
+            return (
+              <Pressable
+                key={getRowKey(row, rowIndex)}
+                onPress={onRowPress ? () => onRowPress(row, rowIndex) : undefined}
+                style={{
+                  flexDirection: 'row',
+                  backgroundColor: isStriped ? theme.colors.intent.neutral.subtle : 'transparent',
+                  borderBottomWidth: 1,
+                  borderBottomColor: borderColor,
+                }}
+              >
+                {columns.map((col) => {
+                  const value = col.dataIndex !== undefined ? (row as Record<string, unknown>)[col.dataIndex as string] : undefined;
+                  const content = col.render ? col.render(value, row, rowIndex) : (value as ReactNode);
+                  return (
+                    <View
+                      key={col.key}
+                      style={{
+                        width: col.width ?? 120,
+                        padding: cellPadding,
+                        alignItems: col.align === 'center' ? 'center' : col.align === 'right' ? 'flex-end' : 'flex-start',
+                      }}
+                    >
+                      {typeof content === 'string' || typeof content === 'number' ? (
+                        <Text style={{ color: theme.colors.fg, fontSize: 14 }}>{String(content)}</Text>
+                      ) : (
+                        content
+                      )}
+                    </View>
+                  );
+                })}
+              </Pressable>
+            );
+          })}
+        </ScrollView>
+      </View>
+    </ScrollView>
+  );
+}

package/src/Tabs.tsx

@@ -0,0 +1,122 @@
+import { useState, type ReactNode } from 'react';
+import { Pressable, View, Text, ScrollView, type ViewProps, type ViewStyle } from 'react-native';
+import type { Orientation } from '@elvora/core';
+import { useTheme } from './ElvoraProvider';
+
+export interface TabsTab {
+  value: string;
+  label: ReactNode;
+  isDisabled?: boolean;
+}
+
+export interface TabsProps extends ViewProps {
+  tabs: TabsTab[];
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  variant?: 'underline' | 'pill' | 'solid';
+  orientation?: Orientation;
+  /** Render function for each tab's panel content. */
+  renderPanel: (value: string) => ReactNode;
+}
+
+/**
+ * Tabs — RN-friendly tab strip + panel renderer. Doesn't need WAI-ARIA roles,
+ * uses native accessibility roles. Composition is data-driven rather than
+ * via slot components.
+ */
+export function Tabs(props: TabsProps) {
+  const {
+    tabs,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    variant = 'underline',
+    orientation = 'horizontal',
+    renderPanel,
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const intent = theme.colors.intent.primary;
+  const [internal, setInternal] = useState<string>(defaultValue ?? tabs[0]?.value ?? '');
+  const current = valueProp ?? internal;
+
+  const setValue = (v: string) => {
+    if (valueProp === undefined) setInternal(v);
+    onChange?.(v);
+  };
+
+  const horizontal = orientation === 'horizontal';
+
+  const tabStyle = (active: boolean, disabled?: boolean): ViewStyle => {
+    if (variant === 'pill') {
+      return {
+        backgroundColor: active ? intent.subtle : 'transparent',
+        borderRadius: theme.radii.full,
+        paddingHorizontal: 14,
+        paddingVertical: 8,
+        opacity: disabled ? 0.5 : 1,
+      };
+    }
+    if (variant === 'solid') {
+      return {
+        backgroundColor: active ? intent.solid : 'transparent',
+        borderRadius: theme.radii.md,
+        paddingHorizontal: 14,
+        paddingVertical: 8,
+        opacity: disabled ? 0.5 : 1,
+      };
+    }
+    return {
+      borderBottomWidth: horizontal ? 2 : 0,
+      borderRightWidth: !horizontal ? 2 : 0,
+      borderColor: active ? intent.solid : 'transparent',
+      paddingHorizontal: 14,
+      paddingVertical: 10,
+      opacity: disabled ? 0.5 : 1,
+    };
+  };
+
+  return (
+    <View style={style} {...rest}>
+      <ScrollView
+        horizontal={horizontal}
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{
+          flexDirection: horizontal ? 'row' : 'column',
+          gap: 4,
+          borderBottomWidth: variant === 'underline' && horizontal ? 1 : 0,
+          borderBottomColor: theme.colors.border,
+        }}
+      >
+        {tabs.map((t) => {
+          const active = t.value === current;
+          const labelColor =
+            variant === 'solid' && active
+              ? intent.solidFg
+              : variant === 'pill' && active
+                ? intent.fg
+                : active
+                  ? theme.colors.fg
+                  : theme.colors.fgMuted;
+          return (
+            <Pressable
+              key={t.value}
+              accessibilityRole="tab"
+              accessibilityState={{ selected: active, disabled: t.isDisabled }}
+              disabled={t.isDisabled}
+              onPress={() => setValue(t.value)}
+              style={tabStyle(active, t.isDisabled)}
+            >
+              <Text style={{ color: labelColor, fontSize: 14, fontWeight: '500' }}>{t.label}</Text>
+            </Pressable>
+          );
+        })}
+      </ScrollView>
+      <View accessibilityRole="none" style={{ paddingVertical: 12 }}>
+        {renderPanel(current)}
+      </View>
+    </View>
+  );
+}

package/src/Tag.tsx

@@ -0,0 +1,83 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Pressable, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import type { ElvoraSize, ElvoraStatus, ElvoraTone } from '@elvora/core';
+import { useTheme } from './ElvoraProvider';
+import { Icon } from './Icon';
+
+export interface TagProps {
+  status?: ElvoraStatus;
+  size?: Exclude<ElvoraSize, 'xl'>;
+  tone?: ElvoraTone;
+  onClose?: () => void;
+  closeLabel?: string;
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+const sizeMap = {
+  xs: { padX: 6, padY: 2, font: 11 },
+  sm: { padX: 8, padY: 3, font: 12 },
+  md: { padX: 10, padY: 4, font: 13 },
+  lg: { padX: 12, padY: 6, font: 14 },
+};
+
+const statusIntent = {
+  neutral: 'neutral',
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  error: 'danger',
+} as const;
+
+export const Tag = forwardRef<View, TagProps>(function Tag(props, ref) {
+  const { status = 'neutral', size = 'sm', tone = 'subtle', onClose, closeLabel = 'Remove', children, style } = props;
+  const theme = useTheme();
+  const intent = theme.colors.intent[statusIntent[status]];
+  const dims = sizeMap[size];
+
+  let bg = intent.subtle;
+  let fg = intent.fg;
+  let border = 'transparent';
+  if (tone === 'solid') {
+    bg = intent.solid;
+    fg = intent.solidFg;
+  } else if (tone === 'outline') {
+    bg = 'transparent';
+    fg = intent.fg;
+    border = intent.border;
+  }
+
+  return (
+    <View
+      ref={ref}
+      style={[
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingHorizontal: dims.padX,
+          paddingVertical: dims.padY,
+          backgroundColor: bg,
+          borderRadius: Number(theme.radii.md),
+          borderWidth: tone === 'outline' ? 1 : 0,
+          borderColor: border,
+          alignSelf: 'flex-start',
+          gap: 6,
+        },
+        style,
+      ]}
+    >
+      <Text style={{ color: fg, fontSize: dims.font, fontWeight: '500' }}>{children}</Text>
+      {onClose ? (
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={closeLabel}
+          onPress={onClose}
+          hitSlop={6}
+          style={{ marginLeft: 2 }}
+        >
+          <Icon name="x" size={dims.font} color={fg} />
+        </Pressable>
+      ) : null}
+    </View>
+  );
+});