@elvora/react-native 1.0.0-rc.1

package/src/Textarea.tsx

@@ -0,0 +1,22 @@
+import { forwardRef } from 'react';
+import { type TextInput } from 'react-native';
+import { Input, type InputProps } from './Input';
+
+export interface TextareaProps extends InputProps {
+  rows?: number;
+}
+
+/** Multi-line input. Sets `multiline` and numberOfLines on the RN TextInput. */
+export const Textarea = forwardRef<TextInput, TextareaProps>(function Textarea(props, ref) {
+  const { rows = 3, style, ...rest } = props;
+  return (
+    <Input
+      ref={ref}
+      multiline
+      numberOfLines={rows}
+      textAlignVertical="top"
+      style={[{ minHeight: rows * 24 + 16 }, style]}
+      {...rest}
+    />
+  );
+});

package/src/TimePicker.tsx

@@ -0,0 +1,187 @@
+import { useState } from 'react';
+import { Modal, Pressable, ScrollView, View, Text, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface TimeValue {
+  hours: number;
+  minutes: number;
+  seconds?: number;
+}
+
+export interface TimePickerProps extends Omit<ViewProps, 'onChange'> {
+  value?: TimeValue | null;
+  defaultValue?: TimeValue | null;
+  onChange?: (value: TimeValue | null) => void;
+  showSeconds?: boolean;
+  use12Hours?: boolean;
+  minuteStep?: number;
+  placeholder?: string;
+  isDisabled?: boolean;
+}
+
+const pad = (n: number) => String(n).padStart(2, '0');
+
+function formatTime(t: TimeValue | null, use12: boolean, showSec: boolean): string {
+  if (!t) return '';
+  const h = use12 ? ((t.hours + 11) % 12) + 1 : t.hours;
+  const main = `${pad(h)}:${pad(t.minutes)}${showSec ? `:${pad(t.seconds ?? 0)}` : ''}`;
+  return use12 ? `${main} ${t.hours >= 12 ? 'PM' : 'AM'}` : main;
+}
+
+interface ColProps {
+  values: number[];
+  current?: number;
+  format?: (v: number) => string;
+  onSelect: (v: number) => void;
+}
+
+function Col({ values, current, format, onSelect }: ColProps) {
+  const theme = useTheme();
+  return (
+    <ScrollView style={{ height: 168, width: 56, borderRightWidth: 1, borderRightColor: theme.colors.border }}>
+      {values.map((v) => {
+        const active = v === current;
+        return (
+          <Pressable
+            key={v}
+            onPress={() => onSelect(v)}
+            style={{
+              paddingVertical: 6,
+              paddingHorizontal: 10,
+              alignItems: 'center',
+              backgroundColor: active ? theme.colors.intent.primary.solid : 'transparent',
+              borderRadius: Number(theme.radii.sm),
+            }}
+          >
+            <Text style={{ fontSize: 13, color: active ? theme.colors.intent.primary.solidFg : theme.colors.fg }}>
+              {format ? format(v) : pad(v)}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </ScrollView>
+  );
+}
+
+export function TimePicker(props: TimePickerProps) {
+  const {
+    value: valueProp,
+    defaultValue = null,
+    onChange,
+    showSeconds = false,
+    use12Hours = false,
+    minuteStep = 1,
+    placeholder,
+    isDisabled,
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const [internal, setInternal] = useState<TimeValue | null>(defaultValue);
+  const value = valueProp !== undefined ? valueProp : internal;
+  const [isOpen, setOpen] = useState(false);
+
+  const set = (next: TimeValue | null) => {
+    if (valueProp === undefined) setInternal(next);
+    onChange?.(next);
+  };
+
+  const hours = Array.from({ length: use12Hours ? 12 : 24 }, (_, i) => (use12Hours ? i + 1 : i));
+  const minutes = Array.from({ length: Math.ceil(60 / minuteStep) }, (_, i) => i * minuteStep);
+  const seconds = Array.from({ length: 60 }, (_, i) => i);
+
+  const display = formatTime(value, use12Hours, showSeconds);
+  const currentHourCol = value ? (use12Hours ? ((value.hours + 11) % 12) + 1 : value.hours) : undefined;
+
+  return (
+    <View style={style} {...rest}>
+      <Pressable
+        accessibilityRole="button"
+        disabled={isDisabled}
+        onPress={() => setOpen(true)}
+        style={({ pressed }) => ({
+          paddingHorizontal: 12,
+          paddingVertical: 8,
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+          borderRadius: Number(theme.radii.md),
+          backgroundColor: pressed ? theme.colors.intent.neutral.subtle : theme.colors.surfaceElevated,
+          opacity: isDisabled ? 0.6 : 1,
+        })}
+      >
+        <Text style={{ color: display ? theme.colors.fg : theme.colors.fgMuted, fontSize: 14 }}>
+          {display || placeholder || (showSeconds ? 'HH:MM:SS' : 'HH:MM')}
+        </Text>
+      </Pressable>
+      <Modal transparent visible={isOpen} animationType="fade" onRequestClose={() => setOpen(false)}>
+        <Pressable
+          style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.4)' }}
+          onPress={() => setOpen(false)}
+        >
+          <Pressable
+            onPress={() => undefined}
+            style={{
+              backgroundColor: theme.colors.surfaceElevated,
+              borderRadius: Number(theme.radii.md),
+              flexDirection: 'row',
+              padding: 8,
+            }}
+          >
+            <Col
+              values={hours}
+              current={currentHourCol}
+              format={(v) => (use12Hours ? pad(v) : pad(v))}
+              onSelect={(h) => {
+                let actual = h;
+                if (use12Hours) {
+                  const isPM = (value?.hours ?? 0) >= 12;
+                  actual = (h % 12) + (isPM ? 12 : 0);
+                }
+                set({ hours: actual, minutes: value?.minutes ?? 0, seconds: showSeconds ? value?.seconds ?? 0 : undefined });
+              }}
+            />
+            <Col
+              values={minutes}
+              current={value?.minutes}
+              onSelect={(m) => set({ hours: value?.hours ?? 0, minutes: m, seconds: showSeconds ? value?.seconds ?? 0 : undefined })}
+            />
+            {showSeconds ? (
+              <Col
+                values={seconds}
+                current={value?.seconds}
+                onSelect={(s) => set({ hours: value?.hours ?? 0, minutes: value?.minutes ?? 0, seconds: s })}
+              />
+            ) : null}
+            {use12Hours ? (
+              <View style={{ paddingHorizontal: 4 }}>
+                {(['AM', 'PM'] as const).map((p) => {
+                  const isPM = (value?.hours ?? 0) >= 12;
+                  const active = p === 'PM' ? isPM : !isPM;
+                  return (
+                    <Pressable
+                      key={p}
+                      onPress={() => {
+                        const base = value?.hours ?? 0;
+                        const next = p === 'PM' && base < 12 ? base + 12 : p === 'AM' && base >= 12 ? base - 12 : base;
+                        set({ hours: next, minutes: value?.minutes ?? 0, seconds: showSeconds ? value?.seconds ?? 0 : undefined });
+                      }}
+                      style={{
+                        paddingHorizontal: 10,
+                        paddingVertical: 6,
+                        marginVertical: 4,
+                        borderRadius: Number(theme.radii.sm),
+                        backgroundColor: active ? theme.colors.intent.primary.solid : 'transparent',
+                      }}
+                    >
+                      <Text style={{ color: active ? theme.colors.intent.primary.solidFg : theme.colors.fg, fontSize: 13 }}>{p}</Text>
+                    </Pressable>
+                  );
+                })}
+              </View>
+            ) : null}
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </View>
+  );
+}

package/src/Timeline.tsx

@@ -0,0 +1,92 @@
+import { type ReactNode } from 'react';
+import { View, Text, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export type TimelineItemStatus = 'default' | 'success' | 'danger' | 'warning' | 'info' | 'primary';
+
+export interface TimelineItem {
+  key: string;
+  children: ReactNode;
+  label?: ReactNode;
+  status?: TimelineItemStatus;
+  dot?: ReactNode;
+}
+
+export interface TimelineProps extends Omit<ViewProps, 'children'> {
+  items: TimelineItem[];
+  pending?: ReactNode;
+  reverse?: boolean;
+}
+
+function colorFor(status: TimelineItemStatus | undefined, theme: ReturnType<typeof useTheme>): string {
+  switch (status) {
+    case 'success':
+      return theme.colors.intent.success.solid;
+    case 'danger':
+      return theme.colors.intent.danger.solid;
+    case 'warning':
+      return theme.colors.intent.warning.solid;
+    case 'info':
+      return theme.colors.intent.info.solid;
+    case 'primary':
+      return theme.colors.intent.primary.solid;
+    default:
+      return theme.colors.intent.neutral.solid;
+  }
+}
+
+export function Timeline(props: TimelineProps) {
+  const { items, pending, reverse, style, ...rest } = props;
+  const theme = useTheme();
+  const list = reverse ? [...items].reverse() : items;
+
+  return (
+    <View style={style} {...rest}>
+      {list.map((item, idx) => {
+        const isLast = idx === list.length - 1 && !pending;
+        return (
+          <View key={item.key} style={{ flexDirection: 'row', paddingBottom: isLast ? 0 : 16, gap: 12 }}>
+            <View style={{ alignItems: 'center' }}>
+              <View
+                style={{
+                  width: 12,
+                  height: 12,
+                  borderRadius: 6,
+                  backgroundColor: colorFor(item.status, theme),
+                }}
+              />
+              {!isLast ? <View style={{ flex: 1, width: 2, backgroundColor: theme.colors.border, marginTop: 4 }} /> : null}
+            </View>
+            <View style={{ flex: 1 }}>
+              {item.label ? (
+                <Text style={{ color: theme.colors.fgSubtle, marginBottom: 2 }}>
+                  {typeof item.label === 'string' ? item.label : null}
+                </Text>
+              ) : null}
+              {typeof item.children === 'string' || typeof item.children === 'number' ? (
+                <Text style={{ color: theme.colors.fg }}>{String(item.children)}</Text>
+              ) : (
+                item.children
+              )}
+            </View>
+          </View>
+        );
+      })}
+      {pending ? (
+        <View style={{ flexDirection: 'row', gap: 12 }}>
+          <View
+            style={{
+              width: 12,
+              height: 12,
+              borderRadius: 6,
+              backgroundColor: theme.colors.intent.primary.solid,
+            }}
+          />
+          <Text style={{ color: theme.colors.fgSubtle }}>
+            {typeof pending === 'string' ? pending : ''}
+          </Text>
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/Toast.tsx

@@ -0,0 +1,140 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
+import { View, type ViewStyle } from 'react-native';
+import { generateId } from '@elvora/core';
+import type { ElvoraStatus } from '@elvora/core';
+import { useTheme } from './ElvoraProvider';
+import { Alert } from './Alert';
+
+export interface ToastOptions {
+  id?: string;
+  status?: ElvoraStatus;
+  title?: ReactNode;
+  description?: ReactNode;
+  /** Duration in ms. `null` for sticky. */
+  duration?: number | null;
+  action?: ReactNode;
+}
+
+interface ToastInstance {
+  id: string;
+  status: ElvoraStatus;
+  title?: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+  duration: number | null;
+}
+
+export interface ToastApi {
+  show: (opts: ToastOptions) => string;
+  dismiss: (id: string) => void;
+  dismissAll: () => void;
+}
+
+const ToastContext = createContext<ToastApi | null>(null);
+
+export interface ToastProviderProps {
+  children: ReactNode;
+  defaultDuration?: number;
+  placement?: 'top' | 'bottom';
+}
+
+/** ToastProvider — mount once at the root of the RN app. */
+export function ToastProvider({ children, defaultDuration = 4000, placement = 'top' }: ToastProviderProps) {
+  const [toasts, setToasts] = useState<ToastInstance[]>([]);
+  const timersRef = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
+  const theme = useTheme();
+
+  const dismiss = useCallback((id: string) => {
+    setToasts((curr) => curr.filter((t) => t.id !== id));
+    const timer = timersRef.current[id];
+    if (timer) {
+      clearTimeout(timer);
+      delete timersRef.current[id];
+    }
+  }, []);
+
+  const show = useCallback<ToastApi['show']>(
+    (opts) => {
+      const id = opts.id ?? generateId('toast');
+      const inst: ToastInstance = {
+        id,
+        status: opts.status ?? 'info',
+        title: opts.title,
+        description: opts.description,
+        action: opts.action,
+        duration: opts.duration === undefined ? defaultDuration : opts.duration,
+      };
+      setToasts((curr) => [...curr, inst]);
+      if (inst.duration !== null && inst.duration > 0) {
+        timersRef.current[id] = setTimeout(() => dismiss(id), inst.duration);
+      }
+      return id;
+    },
+    [defaultDuration, dismiss],
+  );
+
+  const dismissAll = useCallback(() => {
+    setToasts([]);
+    for (const t of Object.values(timersRef.current)) clearTimeout(t);
+    timersRef.current = {};
+  }, []);
+
+  useEffect(
+    () => () => {
+      for (const t of Object.values(timersRef.current)) clearTimeout(t);
+    },
+    [],
+  );
+
+  const api = useMemo<ToastApi>(() => ({ show, dismiss, dismissAll }), [show, dismiss, dismissAll]);
+
+  const overlay: ViewStyle = {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    pointerEvents: 'box-none',
+    zIndex: theme.tokens.zIndex.toast,
+    ...(placement === 'top' ? { top: 24 } : { bottom: 24 }),
+  };
+
+  return (
+    <ToastContext.Provider value={api}>
+      {children}
+      {toasts.length > 0 ? (
+        <View style={overlay}>
+          {toasts.map((t) => (
+            <View key={t.id} style={{ marginVertical: 4, width: '100%', maxWidth: 420 }}>
+              <Alert
+                status={t.status}
+                tone="solid"
+                title={t.title}
+                description={t.description}
+                onClose={() => dismiss(t.id)}
+              >
+                {t.action}
+              </Alert>
+            </View>
+          ))}
+        </View>
+      ) : null}
+    </ToastContext.Provider>
+  );
+}
+
+/** useToast — must be inside ToastProvider. */
+export function useToast(): ToastApi {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error('useToast must be used inside <ToastProvider>');
+  return ctx;
+}

package/src/ToggleButton.tsx

@@ -0,0 +1,66 @@
+import { useState, type ReactNode } from 'react';
+import { Pressable, Text, type ViewStyle } from 'react-native';
+import type { ElvoraSize } from '@elvora/core';
+import { useTheme } from './ElvoraProvider';
+
+export interface ToggleButtonProps {
+  selected?: boolean;
+  defaultSelected?: boolean;
+  onChange?: (selected: boolean) => void;
+  isDisabled?: boolean;
+  size?: ElvoraSize;
+  value?: string;
+  children?: ReactNode;
+  style?: ViewStyle;
+}
+
+const sizePadding: Record<ElvoraSize, { padX: number; padY: number; font: number }> = {
+  xs: { padX: 8, padY: 4, font: 11 },
+  sm: { padX: 10, padY: 6, font: 12 },
+  md: { padX: 14, padY: 8, font: 13 },
+  lg: { padX: 18, padY: 10, font: 14 },
+  xl: { padX: 22, padY: 12, font: 16 },
+};
+
+export function ToggleButton(props: ToggleButtonProps) {
+  const { selected: selectedProp, defaultSelected = false, onChange, isDisabled, size = 'md', children, style } = props;
+  const theme = useTheme();
+  const [internal, setInternal] = useState(defaultSelected);
+  const selected = selectedProp ?? internal;
+  const intent = theme.colors.intent.primary;
+  const pad = sizePadding[size];
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ selected, disabled: isDisabled }}
+      disabled={isDisabled}
+      onPress={() => {
+        if (selectedProp === undefined) setInternal(!selected);
+        onChange?.(!selected);
+      }}
+      style={({ pressed }) => [
+        {
+          paddingHorizontal: pad.padX,
+          paddingVertical: pad.padY,
+          borderRadius: 6,
+          borderWidth: 1,
+          borderColor: selected ? intent.solid : theme.colors.border,
+          backgroundColor: selected ? intent.subtle : theme.colors.surfaceElevated,
+          opacity: isDisabled ? 0.5 : pressed ? 0.9 : 1,
+        },
+        style,
+      ]}
+    >
+      {typeof children === 'string' ? (
+        <Text
+          style={{ color: selected ? intent.fg : theme.colors.fg, fontSize: pad.font, fontWeight: '500' }}
+        >
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </Pressable>
+  );
+}

package/src/Tooltip.tsx

@@ -0,0 +1,56 @@
+import { Children, cloneElement, isValidElement, useState, type ReactElement, type ReactNode } from 'react';
+import { Modal, Pressable, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import type { Placement } from '@elvora/core';
+import { useTheme } from './ElvoraProvider';
+
+export interface TooltipProps {
+  label: ReactNode;
+  placement?: Placement;
+  /** Single child element. On long-press, the tooltip opens; tap dismisses. */
+  children: ReactElement;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * React Native Tooltip — opens on long-press with a centered overlay (most
+ * accessible cross-platform pattern; mobile has no hover state). For
+ * positioning relative to the trigger, use a dedicated popover library.
+ */
+export function Tooltip({ label, children, style }: TooltipProps) {
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+  const onlyChild = Children.only(children);
+  if (!isValidElement(onlyChild)) return onlyChild;
+
+  const trigger = cloneElement(onlyChild as ReactElement<Record<string, unknown>>, {
+    onLongPress: () => setOpen(true),
+  });
+
+  return (
+    <>
+      {trigger}
+      <Modal visible={open} transparent animationType="fade" onRequestClose={() => setOpen(false)}>
+        <Pressable
+          onPress={() => setOpen(false)}
+          style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.4)' }}
+        >
+          <View
+            accessibilityRole="alert"
+            style={[
+              {
+                backgroundColor: theme.colors.fg,
+                paddingHorizontal: 12,
+                paddingVertical: 8,
+                borderRadius: Number(theme.radii.md),
+                maxWidth: '80%',
+              },
+              style,
+            ]}
+          >
+            <Text style={{ color: theme.colors.background, fontSize: 13 }}>{label}</Text>
+          </View>
+        </Pressable>
+      </Modal>
+    </>
+  );
+}

package/src/Tour.tsx

@@ -0,0 +1,118 @@
+import { useState, type ReactNode } from 'react';
+import { Modal, Pressable, View, Text } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface TourStep {
+  title: ReactNode;
+  description?: ReactNode;
+  nextLabel?: ReactNode;
+  prevLabel?: ReactNode;
+}
+
+export interface TourProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  steps: TourStep[];
+  current?: number;
+  defaultCurrent?: number;
+  onChange?: (index: number) => void;
+  onClose?: () => void;
+  finishLabel?: ReactNode;
+}
+
+/**
+ * Tour (native) — full-screen modal walkthrough. The web variant supports a
+ * spotlight on a DOM element; on native we render each step in a centered
+ * card since there is no DOM to highlight by selector.
+ */
+export function Tour(props: TourProps) {
+  const {
+    open: openProp,
+    defaultOpen,
+    steps,
+    current: currentProp,
+    defaultCurrent = 0,
+    onChange,
+    onClose,
+    finishLabel = 'Finish',
+  } = props;
+  const theme = useTheme();
+  const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+  const [internalCurrent, setInternalCurrent] = useState(defaultCurrent);
+  const open = openProp ?? internalOpen;
+  const current = currentProp ?? internalCurrent;
+  const step = steps[current];
+
+  if (!open || !step) return null;
+
+  const close = () => {
+    if (openProp === undefined) setInternalOpen(false);
+    onClose?.();
+  };
+
+  const goTo = (next: number) => {
+    if (next < 0 || next >= steps.length) return;
+    if (currentProp === undefined) setInternalCurrent(next);
+    onChange?.(next);
+  };
+
+  return (
+    <Modal visible transparent animationType="fade" onRequestClose={close}>
+      <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.55)', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
+        <View
+          style={{
+            width: '100%',
+            maxWidth: 360,
+            backgroundColor: theme.colors.surfaceElevated,
+            borderRadius: 12,
+            padding: 16,
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+          }}
+        >
+          <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
+            <Text style={{ color: theme.colors.fg, fontWeight: '600', fontSize: 16 }}>
+              {typeof step.title === 'string' ? step.title : ''}
+            </Text>
+            <Pressable accessibilityRole="button" accessibilityLabel="Close tour" onPress={close} style={{ padding: 6 }}>
+              <Text style={{ color: theme.colors.fg, fontSize: 18 }}>×</Text>
+            </Pressable>
+          </View>
+          {step.description ? (
+            <Text style={{ color: theme.colors.fgSubtle, marginBottom: 12 }}>
+              {typeof step.description === 'string' ? step.description : ''}
+            </Text>
+          ) : null}
+          <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+            <Text style={{ color: theme.colors.fgSubtle, fontSize: 12 }}>{`${current + 1} / ${steps.length}`}</Text>
+            <View style={{ flexDirection: 'row', gap: 8 }}>
+              {current > 0 ? (
+                <Pressable
+                  onPress={() => goTo(current - 1)}
+                  style={{ paddingVertical: 8, paddingHorizontal: 12, borderRadius: 6, borderWidth: 1, borderColor: theme.colors.border }}
+                >
+                  <Text style={{ color: theme.colors.fg }}>{typeof step.prevLabel === 'string' ? step.prevLabel : 'Previous'}</Text>
+                </Pressable>
+              ) : null}
+              {current < steps.length - 1 ? (
+                <Pressable
+                  onPress={() => goTo(current + 1)}
+                  style={{ paddingVertical: 8, paddingHorizontal: 12, borderRadius: 6, backgroundColor: theme.colors.intent.primary.solid }}
+                >
+                  <Text style={{ color: theme.colors.intent.primary.solidFg }}>{typeof step.nextLabel === 'string' ? step.nextLabel : 'Next'}</Text>
+                </Pressable>
+              ) : (
+                <Pressable
+                  onPress={close}
+                  style={{ paddingVertical: 8, paddingHorizontal: 12, borderRadius: 6, backgroundColor: theme.colors.intent.primary.solid }}
+                >
+                  <Text style={{ color: theme.colors.intent.primary.solidFg }}>{typeof finishLabel === 'string' ? finishLabel : 'Finish'}</Text>
+                </Pressable>
+              )}
+            </View>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+}