@elvora/react-native 1.0.0-rc.1

package/src/NumberInput.tsx

@@ -0,0 +1,156 @@
+import { forwardRef, useCallback, useState } from 'react';
+import { Pressable, TextInput, View, Text, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface NumberInputProps extends Omit<ViewProps, 'children'> {
+  value?: number | null;
+  defaultValue?: number | null;
+  onChangeValue?: (value: number | null) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  precision?: number;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  isInvalid?: boolean;
+  placeholder?: string;
+}
+
+function clamp(v: number, min?: number, max?: number): number {
+  let out = v;
+  if (typeof min === 'number') out = Math.max(out, min);
+  if (typeof max === 'number') out = Math.min(out, max);
+  return out;
+}
+
+function format(v: number, precision: number | undefined): string {
+  if (precision === undefined) return String(v);
+  return v.toFixed(precision);
+}
+
+export const NumberInput = forwardRef<View, NumberInputProps>(function NumberInput(props, ref) {
+  const {
+    value: valueProp,
+    defaultValue,
+    onChangeValue,
+    min,
+    max,
+    step = 1,
+    precision,
+    isDisabled,
+    isReadOnly,
+    isInvalid,
+    placeholder,
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const [internal, setInternal] = useState<number | null>(defaultValue ?? null);
+  const value = valueProp !== undefined ? valueProp : internal;
+  const [text, setText] = useState<string>(value == null ? '' : format(value, precision));
+
+  const setValue = useCallback(
+    (next: number | null) => {
+      if (valueProp === undefined) setInternal(next);
+      onChangeValue?.(next);
+      setText(next == null ? '' : format(next, precision));
+    },
+    [onChangeValue, precision, valueProp],
+  );
+
+  const increment = (delta: number) => {
+    if (isDisabled || isReadOnly) return;
+    const current = typeof value === 'number' ? value : 0;
+    setValue(clamp(parseFloat(format(current + delta, precision ?? 6)), min, max));
+  };
+
+  const onChangeText = (raw: string) => {
+    setText(raw);
+    if (raw === '' || raw === '-') {
+      if (valueProp === undefined) setInternal(null);
+      onChangeValue?.(null);
+      return;
+    }
+    const parsed = Number(raw);
+    if (!Number.isNaN(parsed)) {
+      const c = clamp(parsed, min, max);
+      if (valueProp === undefined) setInternal(c);
+      onChangeValue?.(c);
+    }
+  };
+
+  const onBlur = () => {
+    if (text === '' || text === '-') return;
+    const parsed = Number(text);
+    if (Number.isNaN(parsed)) {
+      setText(value == null ? '' : format(value, precision));
+      return;
+    }
+    setValue(clamp(parsed, min, max));
+  };
+
+  const borderColor = isInvalid ? theme.colors.intent.danger.solid : theme.colors.border;
+
+  return (
+    <View
+      ref={ref}
+      style={[
+        {
+          flexDirection: 'row',
+          alignItems: 'stretch',
+          borderRadius: Number(theme.radii.md),
+          borderWidth: 1,
+          borderColor,
+          overflow: 'hidden',
+          backgroundColor: isDisabled ? theme.colors.surface : theme.colors.surfaceElevated,
+          opacity: isDisabled ? 0.6 : 1,
+        },
+        style,
+      ]}
+      {...rest}
+    >
+      <TextInput
+        value={text}
+        keyboardType="numeric"
+        editable={!isDisabled && !isReadOnly}
+        placeholder={placeholder}
+        placeholderTextColor={theme.colors.fgMuted}
+        onChangeText={onChangeText}
+        onBlur={onBlur}
+        style={{ flex: 1, paddingHorizontal: 12, paddingVertical: 8, color: theme.colors.fg, fontSize: 14, minWidth: 80 }}
+      />
+      <View style={{ borderLeftWidth: 1, borderLeftColor: borderColor }}>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel="Increment"
+          disabled={isDisabled || isReadOnly}
+          onPress={() => increment(step)}
+          style={({ pressed }) => ({
+            paddingHorizontal: 10,
+            flex: 1,
+            justifyContent: 'center',
+            backgroundColor: pressed ? theme.colors.intent.neutral.subtle : theme.colors.surface,
+            borderBottomWidth: 1,
+            borderBottomColor: borderColor,
+          })}
+        >
+          <Text style={{ color: theme.colors.fg, fontSize: 12 }}>+</Text>
+        </Pressable>
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel="Decrement"
+          disabled={isDisabled || isReadOnly}
+          onPress={() => increment(-step)}
+          style={({ pressed }) => ({
+            paddingHorizontal: 10,
+            flex: 1,
+            justifyContent: 'center',
+            backgroundColor: pressed ? theme.colors.intent.neutral.subtle : theme.colors.surface,
+          })}
+        >
+          <Text style={{ color: theme.colors.fg, fontSize: 12 }}>-</Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+});

package/src/Pagination.tsx

@@ -0,0 +1,148 @@
+import { Pressable, Text, View, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+import { Icon } from './Icon';
+
+export interface PaginationProps extends ViewProps {
+  total: number;
+  pageSize?: number;
+  current?: number;
+  defaultCurrent?: number;
+  onChange?: (page: number) => void;
+  siblingCount?: number;
+  showFirstLast?: boolean;
+  hideOnSinglePage?: boolean;
+}
+
+function range(start: number, end: number): number[] {
+  const out: number[] = [];
+  for (let i = start; i <= end; i++) out.push(i);
+  return out;
+}
+
+function buildPages(current: number, totalPages: number, siblingCount: number): Array<number | 'gap'> {
+  const totalNumbers = siblingCount * 2 + 5;
+  if (totalPages <= totalNumbers) return range(1, totalPages);
+  const left = Math.max(current - siblingCount, 1);
+  const right = Math.min(current + siblingCount, totalPages);
+  const out: Array<number | 'gap'> = [1];
+  if (left > 2) out.push('gap');
+  else if (left === 2) out.push(2);
+  out.push(...range(Math.max(left, left > 2 ? left : 2), Math.min(right, totalPages - 1)));
+  if (right < totalPages - 1) out.push('gap');
+  else if (right === totalPages - 1) out.push(totalPages - 1);
+  if (totalPages > 1) out.push(totalPages);
+  const seen = new Set<number | 'gap'>();
+  return out.filter((v) => {
+    if (v === 'gap') return true;
+    if (seen.has(v)) return false;
+    seen.add(v);
+    return true;
+  });
+}
+
+/** Pagination — RN paginator. */
+export function Pagination(props: PaginationProps) {
+  const {
+    total,
+    pageSize = 10,
+    current: currentProp,
+    defaultCurrent = 1,
+    onChange,
+    siblingCount = 1,
+    showFirstLast = false,
+    hideOnSinglePage = false,
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const current = Math.min(Math.max(currentProp ?? defaultCurrent, 1), totalPages);
+  if (hideOnSinglePage && totalPages <= 1) return null;
+
+  const pages = buildPages(current, totalPages, siblingCount);
+  const go = (page: number) => {
+    const next = Math.min(Math.max(page, 1), totalPages);
+    if (next !== current) onChange?.(next);
+  };
+
+  const btn = (active: boolean, disabled?: boolean) => ({
+    minWidth: 32,
+    height: 32,
+    paddingHorizontal: 8,
+    borderRadius: theme.radii.md,
+    borderWidth: 1,
+    borderColor: active ? theme.colors.intent.primary.solid : theme.colors.border,
+    backgroundColor: active ? theme.colors.intent.primary.solid : theme.colors.surfaceElevated,
+    opacity: disabled ? 0.5 : 1,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+  });
+  const txt = (active: boolean) => ({
+    color: active ? theme.colors.intent.primary.solidFg : theme.colors.fg,
+    fontSize: 13,
+    fontWeight: '500' as const,
+  });
+
+  return (
+    <View style={[{ flexDirection: 'row', alignItems: 'center', gap: 6 }, style]} {...rest}>
+      {showFirstLast ? (
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel="First page"
+          disabled={current === 1}
+          onPress={() => go(1)}
+          style={btn(false, current === 1)}
+        >
+          <Text style={txt(false)}>«</Text>
+        </Pressable>
+      ) : null}
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel="Previous page"
+        disabled={current === 1}
+        onPress={() => go(current - 1)}
+        style={btn(false, current === 1)}
+      >
+        <Icon name="chevronLeft" size={14} color={theme.colors.fg} />
+      </Pressable>
+      {pages.map((p, idx) =>
+        p === 'gap' ? (
+          <Text key={`gap-${idx}`} style={{ color: theme.colors.fgSubtle, paddingHorizontal: 4 }}>
+            …
+          </Text>
+        ) : (
+          <Pressable
+            key={p}
+            accessibilityRole="button"
+            accessibilityLabel={`Page ${p}`}
+            accessibilityState={{ selected: p === current }}
+            onPress={() => go(p)}
+            style={btn(p === current)}
+          >
+            <Text style={txt(p === current)}>{p}</Text>
+          </Pressable>
+        ),
+      )}
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel="Next page"
+        disabled={current === totalPages}
+        onPress={() => go(current + 1)}
+        style={btn(false, current === totalPages)}
+      >
+        <Icon name="chevronRight" size={14} color={theme.colors.fg} />
+      </Pressable>
+      {showFirstLast ? (
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel="Last page"
+          disabled={current === totalPages}
+          onPress={() => go(totalPages)}
+          style={btn(false, current === totalPages)}
+        >
+          <Text style={txt(false)}>»</Text>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}

package/src/PaginationVariants.tsx

@@ -0,0 +1,64 @@
+import { Pressable, Text, View, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+import { Icon } from './Icon';
+
+export interface SimplePaginationProps extends ViewProps {
+  total: number;
+  pageSize?: number;
+  current?: number;
+  defaultCurrent?: number;
+  onChange?: (page: number) => void;
+}
+
+export function SimplePagination(props: SimplePaginationProps) {
+  const { total, pageSize = 10, current: currentProp, defaultCurrent = 1, onChange, style, ...rest } = props;
+  const theme = useTheme();
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const current = Math.min(Math.max(currentProp ?? defaultCurrent, 1), totalPages);
+  const go = (n: number) => {
+    const next = Math.min(Math.max(n, 1), totalPages);
+    if (next !== current) onChange?.(next);
+  };
+  const btn = (disabled: boolean) => ({
+    width: 32,
+    height: 32,
+    borderRadius: theme.radii.md,
+    borderWidth: 1,
+    borderColor: theme.colors.border,
+    backgroundColor: theme.colors.surfaceElevated,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+    opacity: disabled ? 0.5 : 1,
+  });
+  return (
+    <View style={[{ flexDirection: 'row', alignItems: 'center', gap: 8 }, style]} {...rest}>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel="Previous page"
+        disabled={current === 1}
+        onPress={() => go(current - 1)}
+        style={btn(current === 1)}
+      >
+        <Icon name="chevronLeft" size={14} color={theme.colors.fg} />
+      </Pressable>
+      <Text style={{ color: theme.colors.fg, fontSize: 13 }}>
+        {current} / {totalPages}
+      </Text>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel="Next page"
+        disabled={current === totalPages}
+        onPress={() => go(current + 1)}
+        style={btn(current === totalPages)}
+      >
+        <Icon name="chevronRight" size={14} color={theme.colors.fg} />
+      </Pressable>
+    </View>
+  );
+}
+
+export interface MiniPaginationProps extends SimplePaginationProps {}
+
+export function MiniPagination(props: MiniPaginationProps) {
+  return <SimplePagination {...props} />;
+}

package/src/Popover.tsx

@@ -0,0 +1,74 @@
+import { forwardRef, useState, type ReactNode } from 'react';
+import { Modal as RNModal, Pressable, View, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface PopoverProps extends Omit<ViewProps, 'children'> {
+  /** The trigger element. */
+  trigger: ReactNode;
+  /** Popover content. */
+  children: ReactNode;
+  /** Controlled open. */
+  isOpen?: boolean;
+  /** Controlled change handler. */
+  onOpenChange?: (open: boolean) => void;
+  /** Where the popover anchors relative to the screen. */
+  placement?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+}
+
+/**
+ * Popover — content overlay anchored to a trigger. RN doesn't expose a
+ * positioning API, so we use a centered modal-like sheet by default.
+ */
+export const Popover = forwardRef<View, PopoverProps>(function Popover(props, ref) {
+  const { trigger, children, isOpen, onOpenChange, placement = 'center', style, ...rest } = props;
+  const theme = useTheme();
+  const [internalOpen, setInternalOpen] = useState(false);
+  const open = isOpen ?? internalOpen;
+
+  const setOpen = (next: boolean) => {
+    if (isOpen === undefined) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+
+  const align =
+    placement === 'top'
+      ? { justifyContent: 'flex-start' as const, paddingTop: 80 }
+      : placement === 'bottom'
+        ? { justifyContent: 'flex-end' as const, paddingBottom: 80 }
+        : { justifyContent: 'center' as const };
+
+  return (
+    <>
+      <Pressable onPress={() => setOpen(true)} accessibilityRole="button">
+        {trigger}
+      </Pressable>
+      <RNModal visible={open} transparent animationType="fade" onRequestClose={() => setOpen(false)}>
+        <Pressable
+          onPress={() => setOpen(false)}
+          style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.25)', alignItems: 'center', padding: 16, ...align }}
+        >
+          <Pressable onPress={(e) => e.stopPropagation()}>
+            <View
+              ref={ref}
+              style={[
+                {
+                  backgroundColor: theme.colors.surfaceElevated,
+                  borderRadius: theme.radii.md,
+                  borderWidth: 1,
+                  borderColor: theme.colors.border,
+                  padding: 12,
+                  minWidth: 200,
+                  maxWidth: 320,
+                },
+                style,
+              ]}
+              {...rest}
+            >
+              {children}
+            </View>
+          </Pressable>
+        </Pressable>
+      </RNModal>
+    </>
+  );
+});

package/src/ProForm.tsx

@@ -0,0 +1,219 @@
+import { useCallback, useMemo, useState, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+import { Form, FormField } from './Form';
+import { Input } from './Input';
+import { Textarea } from './Textarea';
+import { Switch } from './Switch';
+import { Checkbox } from './Checkbox';
+import { Select } from './Select';
+import { NumberInput } from './NumberInput';
+import { Button } from './Button';
+
+export type ProFormFieldType =
+  | 'text'
+  | 'password'
+  | 'email'
+  | 'number'
+  | 'textarea'
+  | 'switch'
+  | 'checkbox'
+  | 'select'
+  | 'custom';
+
+export interface ProFormSelectOption {
+  value: string;
+  label: string;
+}
+
+export interface ProFormField {
+  name: string;
+  label?: ReactNode;
+  type: ProFormFieldType;
+  placeholder?: string;
+  hint?: ReactNode;
+  required?: boolean;
+  disabled?: boolean;
+  defaultValue?: unknown;
+  options?: ProFormSelectOption[];
+  validate?: (value: unknown, values: Record<string, unknown>) => string | undefined;
+  render?: (ctx: {
+    value: unknown;
+    onChange: (v: unknown) => void;
+    error: string | undefined;
+    name: string;
+  }) => ReactNode;
+}
+
+export interface ProFormProps extends Omit<ViewProps, 'children'> {
+  fields: ProFormField[];
+  initialValues?: Record<string, unknown>;
+  onSubmit?: (values: Record<string, unknown>) => void | Promise<void>;
+  submitLabel?: ReactNode;
+  resetLabel?: ReactNode;
+  isSubmitting?: boolean;
+}
+
+export function ProForm(props: ProFormProps) {
+  const {
+    fields,
+    initialValues,
+    onSubmit,
+    submitLabel = 'Submit',
+    resetLabel,
+    isSubmitting,
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+
+  const initial = useMemo(() => {
+    const seed: Record<string, unknown> = { ...(initialValues ?? {}) };
+    for (const f of fields) {
+      if (seed[f.name] === undefined && f.defaultValue !== undefined) seed[f.name] = f.defaultValue;
+    }
+    return seed;
+  }, [initialValues, fields]);
+
+  const [values, setValues] = useState<Record<string, unknown>>(initial);
+  const [errors, setErrors] = useState<Record<string, string | undefined>>({});
+
+  const setValue = useCallback((name: string, value: unknown) => {
+    setValues((prev) => ({ ...prev, [name]: value }));
+    setErrors((prev) => ({ ...prev, [name]: undefined }));
+  }, []);
+
+  const validate = useCallback(() => {
+    const next: Record<string, string | undefined> = {};
+    for (const field of fields) {
+      const value = values[field.name];
+      if (field.required && (value === undefined || value === null || value === '')) {
+        next[field.name] = 'This field is required';
+        continue;
+      }
+      if (field.validate) {
+        const msg = field.validate(value, values);
+        if (msg) next[field.name] = msg;
+      }
+    }
+    setErrors(next);
+    return Object.values(next).every((v) => !v);
+  }, [fields, values]);
+
+  const handleSubmit = useCallback(async () => {
+    if (!validate()) return;
+    if (onSubmit) await onSubmit(values);
+  }, [onSubmit, validate, values]);
+
+  const reset = useCallback(() => {
+    setValues(initial);
+    setErrors({});
+  }, [initial]);
+
+  return (
+    <Form style={style} {...rest}>
+      {fields.map((field) => {
+        const value = values[field.name];
+        const error = errors[field.name];
+        const onChangeValue = (v: unknown) => setValue(field.name, v);
+
+        let control: ReactNode = null;
+        switch (field.type) {
+          case 'textarea':
+            control = (
+              <Textarea
+                placeholder={field.placeholder}
+                value={String(value ?? '')}
+                isDisabled={field.disabled || isSubmitting}
+                isInvalid={Boolean(error)}
+                onChangeText={(text) => onChangeValue(text)}
+              />
+            );
+            break;
+          case 'select':
+            control = (
+              <Select
+                value={String(value ?? '')}
+                options={(field.options ?? []).map((opt) => ({ label: opt.label, value: opt.value }))}
+                placeholder={field.placeholder ?? 'Select…'}
+                isDisabled={field.disabled || isSubmitting}
+                isInvalid={Boolean(error)}
+                onChange={(v) => onChangeValue(v)}
+              />
+            );
+            break;
+          case 'number':
+            control = (
+              <NumberInput
+                value={Number(value ?? 0)}
+                isDisabled={field.disabled || isSubmitting}
+                onChangeValue={(v) => onChangeValue(v)}
+              />
+            );
+            break;
+          case 'checkbox':
+            control = (
+              <Checkbox
+                isChecked={Boolean(value)}
+                isDisabled={field.disabled || isSubmitting}
+                onChange={(checked) => onChangeValue(checked)}
+              >
+                {field.placeholder}
+              </Checkbox>
+            );
+            break;
+          case 'switch':
+            control = (
+              <Switch
+                isChecked={Boolean(value)}
+                isDisabled={field.disabled || isSubmitting}
+                onChange={(checked) => onChangeValue(checked)}
+              />
+            );
+            break;
+          case 'custom':
+            control = field.render
+              ? field.render({ value, onChange: onChangeValue, error, name: field.name })
+              : null;
+            break;
+          default:
+            control = (
+              <Input
+                placeholder={field.placeholder}
+                value={String(value ?? '')}
+                isDisabled={field.disabled || isSubmitting}
+                isInvalid={Boolean(error)}
+                onChangeText={(text) => onChangeValue(text)}
+                secureTextEntry={field.type === 'password'}
+                keyboardType={field.type === 'email' ? 'email-address' : undefined}
+              />
+            );
+        }
+
+        return (
+          <FormField
+            key={field.name}
+            name={field.name}
+            label={field.label}
+            hint={field.hint}
+            isRequired={field.required}
+            error={error}
+          >
+            {control}
+          </FormField>
+        );
+      })}
+      <View style={{ flexDirection: 'row', justifyContent: 'flex-end', gap: 8, marginTop: 8 }}>
+        {resetLabel ? (
+          <Button variant="ghost" onPress={reset} isDisabled={isSubmitting}>
+            {resetLabel}
+          </Button>
+        ) : null}
+        <Button onPress={handleSubmit} isLoading={isSubmitting}>
+          {submitLabel}
+        </Button>
+      </View>
+      {theme ? null : null}
+    </Form>
+  );
+}