@elvora/react-native 1.0.0-rc.1

package/src/Image.tsx

@@ -0,0 +1,68 @@
+import { useState, type ReactNode } from 'react';
+import { Image as RNImage, Pressable, View, Modal, type ImageProps as RNImageProps, type ImageStyle } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface ImageProps extends Omit<RNImageProps, 'source' | 'style'> {
+  src: string;
+  fallback?: string;
+  placeholder?: ReactNode;
+  /** Enable tap-to-preview overlay. */
+  preview?: boolean;
+  width?: number;
+  height?: number;
+  fit?: 'cover' | 'contain' | 'stretch' | 'center';
+  rounded?: boolean;
+  style?: ImageStyle;
+}
+
+export function Image(props: ImageProps) {
+  const { src, fallback, placeholder, preview, width, height, fit = 'cover', rounded, style, ...rest } = props;
+  const theme = useTheme();
+  const [loaded, setLoaded] = useState(false);
+  const [errored, setErrored] = useState(false);
+  const [showPreview, setShowPreview] = useState(false);
+
+  const actualSrc = errored && fallback ? fallback : src;
+
+  const img = (
+    <RNImage
+      source={{ uri: actualSrc }}
+      onLoad={() => setLoaded(true)}
+      onError={() => setErrored(true)}
+      resizeMode={fit}
+      style={[{ width: '100%', height: '100%' }, style]}
+      {...rest}
+    />
+  );
+
+  return (
+    <>
+      <Pressable
+        disabled={!preview}
+        onPress={preview ? () => setShowPreview(true) : undefined}
+        style={{
+          width,
+          height,
+          borderRadius: rounded ? 8 : 0,
+          overflow: 'hidden',
+          backgroundColor: theme.colors.intent.neutral.subtle,
+        }}
+      >
+        {!loaded && !errored && placeholder ? (
+          <View style={{ position: 'absolute', inset: 0, alignItems: 'center', justifyContent: 'center' }}>{placeholder}</View>
+        ) : null}
+        {img}
+      </Pressable>
+      {preview && showPreview ? (
+        <Modal visible transparent animationType="fade" onRequestClose={() => setShowPreview(false)}>
+          <Pressable
+            onPress={() => setShowPreview(false)}
+            style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.9)', alignItems: 'center', justifyContent: 'center' }}
+          >
+            <RNImage source={{ uri: actualSrc }} resizeMode="contain" style={{ width: '90%', height: '90%' }} />
+          </Pressable>
+        </Modal>
+      ) : null}
+    </>
+  );
+}

package/src/ImageList.tsx

@@ -0,0 +1,58 @@
+import type { ReactNode } from 'react';
+import { Image as RNImage, Text, View, useWindowDimensions, type ViewStyle } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface ImageListItem {
+  key: string;
+  src?: string;
+  alt?: string;
+  node?: ReactNode;
+  caption?: ReactNode;
+}
+
+export interface ImageListProps {
+  items: ImageListItem[];
+  cols?: number;
+  gap?: number;
+  rowHeight?: number;
+  style?: ViewStyle;
+}
+
+export function ImageList(props: ImageListProps) {
+  const { items, cols = 3, gap = 8, rowHeight = 120, style } = props;
+  const theme = useTheme();
+  const { width } = useWindowDimensions();
+  const cellWidth = (width - gap * (cols + 1) - 32) / cols;
+  return (
+    <View style={[{ flexDirection: 'row', flexWrap: 'wrap', gap }, style]}>
+      {items.map((item) => (
+        <View
+          key={item.key}
+          style={{
+            width: cellWidth,
+            height: rowHeight,
+            borderRadius: 8,
+            overflow: 'hidden',
+            backgroundColor: theme.colors.intent.neutral.subtle,
+          }}
+        >
+          {item.node ?? (item.src ? <RNImage source={{ uri: item.src }} style={{ width: '100%', height: '100%' }} resizeMode="cover" /> : null)}
+          {item.caption ? (
+            <View
+              style={{
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                bottom: 0,
+                padding: 6,
+                backgroundColor: 'rgba(0,0,0,0.55)',
+              }}
+            >
+              <Text style={{ color: '#fff', fontSize: 11 }}>{item.caption}</Text>
+            </View>
+          ) : null}
+        </View>
+      ))}
+    </View>
+  );
+}

package/src/Input.tsx

@@ -0,0 +1,87 @@
+import { forwardRef, useState } from 'react';
+import {
+  TextInput,
+  type StyleProp,
+  type TextInputProps,
+  type ViewStyle,
+} from 'react-native';
+import { defaultInputProps, type InputOwnProps } from '@elvora/core';
+import { useTheme } from './ElvoraProvider';
+
+export interface InputProps
+  extends InputOwnProps,
+    Omit<TextInputProps, 'editable' | 'style'> {
+  style?: StyleProp<ViewStyle>;
+}
+
+const sizeMap = {
+  xs: { padX: 8, padY: 4, font: 12, height: 28 },
+  sm: { padX: 10, padY: 6, font: 13, height: 36 },
+  md: { padX: 12, padY: 8, font: 14, height: 44 },
+  lg: { padX: 14, padY: 10, font: 16, height: 52 },
+  xl: { padX: 16, padY: 12, font: 18, height: 60 },
+};
+
+/** React Native text input with Elvora styling. */
+export const Input = forwardRef<TextInput, InputProps>(function Input(props, ref) {
+  const {
+    size = defaultInputProps.size,
+    status = defaultInputProps.status,
+    isReadOnly = defaultInputProps.isReadOnly,
+    isDisabled = defaultInputProps.isDisabled,
+    isInvalid = defaultInputProps.isInvalid,
+    style,
+    onFocus,
+    onBlur,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const [focused, setFocused] = useState(false);
+  const dims = sizeMap[size];
+
+  const invalid = isInvalid || status === 'error';
+  const intentForStatus =
+    status === 'error' || invalid
+      ? theme.colors.intent.danger
+      : status === 'success'
+        ? theme.colors.intent.success
+        : status === 'warning'
+          ? theme.colors.intent.warning
+          : status === 'info'
+            ? theme.colors.intent.info
+            : theme.colors.intent.primary;
+
+  const borderColor = focused ? intentForStatus.border : invalid ? theme.colors.intent.danger.border : theme.colors.border;
+
+  return (
+    <TextInput
+      ref={ref}
+      editable={!isDisabled && !isReadOnly}
+      placeholderTextColor={theme.colors.fgMuted}
+      style={[
+        {
+          minHeight: dims.height,
+          paddingHorizontal: dims.padX,
+          paddingVertical: dims.padY,
+          borderRadius: Number(theme.radii.md),
+          borderWidth: 1,
+          borderColor,
+          backgroundColor: isDisabled ? theme.colors.surface : theme.colors.surfaceElevated,
+          color: theme.colors.fg,
+          fontSize: dims.font,
+          opacity: isDisabled ? 0.6 : 1,
+        },
+        style,
+      ]}
+      onFocus={(e) => {
+        setFocused(true);
+        onFocus?.(e);
+      }}
+      onBlur={(e) => {
+        setFocused(false);
+        onBlur?.(e);
+      }}
+      {...rest}
+    />
+  );
+});

package/src/Label.tsx

@@ -0,0 +1,46 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Text, View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface LabelProps {
+  isRequired?: boolean;
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}
+
+const sizeMap = {
+  xs: { fontSize: 11 },
+  sm: { fontSize: 12 },
+  md: { fontSize: 14 },
+  lg: { fontSize: 16 },
+};
+
+/** Form label for React Native. */
+export const Label = forwardRef<View, LabelProps>(function Label(props, ref) {
+  const { isRequired, size = 'md', children, style, textStyle } = props;
+  const theme = useTheme();
+  const dims = sizeMap[size];
+  return (
+    <View ref={ref} style={[{ flexDirection: 'row', alignItems: 'center' }, style]}>
+      <Text
+        style={[
+          {
+            color: theme.colors.fg,
+            fontSize: dims.fontSize,
+            fontWeight: '500',
+          },
+          textStyle,
+        ]}
+      >
+        {children}
+      </Text>
+      {isRequired ? (
+        <Text accessibilityElementsHidden style={{ color: theme.colors.intent.danger.fg, marginLeft: 2 }}>
+          *
+        </Text>
+      ) : null}
+    </View>
+  );
+});

package/src/List.tsx

@@ -0,0 +1,82 @@
+import { type ReactNode } from 'react';
+import { View, Text, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface ListProps<Item = unknown> extends Omit<ViewProps, 'children'> {
+  dataSource: Item[];
+  renderItem: (item: Item, index: number) => ReactNode;
+  itemKey?: keyof Item | ((item: Item, index: number) => string | number);
+  header?: ReactNode;
+  footer?: ReactNode;
+  bordered?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  divided?: boolean;
+  emptyState?: ReactNode;
+}
+
+export function List<Item>(props: ListProps<Item>) {
+  const {
+    dataSource,
+    renderItem,
+    itemKey,
+    header,
+    footer,
+    bordered,
+    size = 'md',
+    divided = true,
+    emptyState,
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const padding = size === 'sm' ? 10 : size === 'lg' ? 18 : 14;
+
+  const keyFor = (item: Item, idx: number): string => {
+    if (typeof itemKey === 'function') return String(itemKey(item, idx));
+    if (itemKey) return String((item as unknown as Record<string, unknown>)[itemKey as string] ?? idx);
+    return String(idx);
+  };
+
+  return (
+    <View
+      style={[
+        {
+          borderWidth: bordered ? 1 : 0,
+          borderColor: theme.colors.border,
+          borderRadius: 8,
+          backgroundColor: theme.colors.surfaceElevated,
+          overflow: 'hidden',
+        },
+        style,
+      ]}
+      {...rest}
+    >
+      {header ? (
+        <View style={{ padding, borderBottomWidth: 1, borderBottomColor: theme.colors.border }}>
+          {typeof header === 'string' ? <Text style={{ color: theme.colors.fg, fontWeight: '600' }}>{header}</Text> : header}
+        </View>
+      ) : null}
+      {dataSource.length === 0 && emptyState ? (
+        <View style={{ padding }}>{typeof emptyState === 'string' ? <Text style={{ color: theme.colors.fgSubtle }}>{emptyState}</Text> : emptyState}</View>
+      ) : (
+        dataSource.map((item, idx) => (
+          <View
+            key={keyFor(item, idx)}
+            style={{
+              padding,
+              borderBottomWidth: divided && idx < dataSource.length - 1 ? 1 : 0,
+              borderBottomColor: theme.colors.border,
+            }}
+          >
+            {renderItem(item, idx)}
+          </View>
+        ))
+      )}
+      {footer ? (
+        <View style={{ padding, borderTopWidth: 1, borderTopColor: theme.colors.border }}>
+          {typeof footer === 'string' ? <Text style={{ color: theme.colors.fgSubtle }}>{footer}</Text> : footer}
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/Mentions.tsx

@@ -0,0 +1,148 @@
+import { useEffect, useRef, useState } from 'react';
+import { Pressable, TextInput, View, Text, type TextInputProps, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface MentionItem {
+  value: string;
+  label?: string;
+}
+
+export interface MentionsProps extends Omit<ViewProps, 'children'> {
+  value?: string;
+  defaultValue?: string;
+  onChangeText?: (v: string) => void;
+  options?: MentionItem[];
+  loadOptions?: (query: string) => Promise<MentionItem[]>;
+  trigger?: string;
+  isDisabled?: boolean;
+  textInputProps?: Omit<TextInputProps, 'value' | 'onChangeText'>;
+}
+
+interface MentionState {
+  active: boolean;
+  start: number;
+  query: string;
+}
+
+export function Mentions(props: MentionsProps) {
+  const {
+    value: valueProp,
+    defaultValue = '',
+    onChangeText,
+    options = [],
+    loadOptions,
+    trigger = '@',
+    isDisabled,
+    textInputProps,
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const [internal, setInternal] = useState(defaultValue);
+  const value = valueProp ?? internal;
+  const [state, setState] = useState<MentionState>({ active: false, start: -1, query: '' });
+  const [suggestions, setSuggestions] = useState<MentionItem[]>([]);
+  const caretRef = useRef<number>(value.length);
+
+  useEffect(() => {
+    let cancelled = false;
+    if (!state.active) {
+      setSuggestions([]);
+      return;
+    }
+    if (loadOptions) {
+      loadOptions(state.query).then((opts) => {
+        if (!cancelled) setSuggestions(opts);
+      });
+    } else {
+      const q = state.query.toLowerCase();
+      setSuggestions(options.filter((o) => o.value.toLowerCase().includes(q)).slice(0, 8));
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [state.active, state.query, options, loadOptions]);
+
+  const setValue = (next: string) => {
+    if (valueProp === undefined) setInternal(next);
+    onChangeText?.(next);
+  };
+
+  const handleChange = (next: string) => {
+    setValue(next);
+    const caret = caretRef.current;
+    let i = caret - 1;
+    while (i >= 0 && next[i] !== trigger && !/\s/.test(next[i]!)) {
+      i--;
+    }
+    if (i >= 0 && next[i] === trigger) {
+      setState({ active: true, start: i, query: next.slice(i + 1, caret) });
+    } else {
+      setState({ active: false, start: -1, query: '' });
+    }
+  };
+
+  const insertSelected = (item: MentionItem) => {
+    const text = value;
+    const before = text.slice(0, state.start);
+    const after = text.slice(caretRef.current);
+    const insertion = `${trigger}${item.value} `;
+    setValue(`${before}${insertion}${after}`);
+    setState({ active: false, start: -1, query: '' });
+  };
+
+  return (
+    <View style={style} {...rest}>
+      <TextInput
+        value={value}
+        editable={!isDisabled}
+        multiline
+        onChangeText={handleChange}
+        onSelectionChange={(e) => {
+          caretRef.current = e.nativeEvent.selection.end ?? value.length;
+        }}
+        placeholderTextColor={theme.colors.fgMuted}
+        style={{
+          minHeight: 84,
+          paddingHorizontal: 12,
+          paddingVertical: 8,
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+          borderRadius: Number(theme.radii.md),
+          backgroundColor: isDisabled ? theme.colors.surface : theme.colors.surfaceElevated,
+          color: theme.colors.fg,
+          fontSize: 14,
+          textAlignVertical: 'top',
+        }}
+        {...textInputProps}
+      />
+      {state.active && suggestions.length > 0 ? (
+        <View
+          style={{
+            marginTop: 4,
+            borderRadius: Number(theme.radii.md),
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+            backgroundColor: theme.colors.surfaceElevated,
+            maxHeight: 200,
+            paddingVertical: 4,
+          }}
+        >
+          {suggestions.map((item) => (
+            <Pressable
+              key={item.value}
+              onPress={() => insertSelected(item)}
+              style={({ pressed }) => ({
+                paddingHorizontal: 12,
+                paddingVertical: 8,
+                backgroundColor: pressed ? theme.colors.intent.neutral.subtle : 'transparent',
+              })}
+            >
+              <Text style={{ color: theme.colors.fg, fontSize: 14 }}>{item.label ?? item.value}</Text>
+            </Pressable>
+          ))}
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/Menu.tsx

@@ -0,0 +1,77 @@
+import { useState, type ReactNode } from 'react';
+import { Modal as RNModal, Pressable, View, Text } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface MenuItem {
+  value: string;
+  label: string;
+  isDisabled?: boolean;
+  hasSeparatorBefore?: boolean;
+}
+
+export interface MenuProps {
+  trigger: ReactNode;
+  items: MenuItem[];
+  onSelect?: (value: string) => void;
+}
+
+/**
+ * Menu — opens a modal sheet from the trigger. Suitable for RN because there
+ * is no anchored-popover API; sheet-style menus are idiomatic.
+ */
+export function Menu(props: MenuProps) {
+  const { trigger, items, onSelect } = props;
+  const [isOpen, setIsOpen] = useState(false);
+  const theme = useTheme();
+
+  return (
+    <>
+      <Pressable accessibilityRole="button" onPress={() => setIsOpen(true)}>
+        {trigger}
+      </Pressable>
+      <RNModal visible={isOpen} transparent animationType="fade" onRequestClose={() => setIsOpen(false)}>
+        <Pressable
+          onPress={() => setIsOpen(false)}
+          style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.35)', justifyContent: 'flex-end' }}
+        >
+          <Pressable onPress={(e) => e.stopPropagation()}>
+            <View
+              style={{
+                backgroundColor: theme.colors.surfaceElevated,
+                borderTopLeftRadius: theme.radii.lg,
+                borderTopRightRadius: theme.radii.lg,
+                paddingTop: 8,
+                paddingBottom: 24,
+              }}
+            >
+              {items.map((item) => (
+                <View key={item.value}>
+                  {item.hasSeparatorBefore ? (
+                    <View style={{ height: 1, backgroundColor: theme.colors.border, marginVertical: 4 }} />
+                  ) : null}
+                  <Pressable
+                    accessibilityRole="menuitem"
+                    accessibilityState={{ disabled: item.isDisabled }}
+                    disabled={item.isDisabled}
+                    onPress={() => {
+                      onSelect?.(item.value);
+                      setIsOpen(false);
+                    }}
+                    style={({ pressed }) => ({
+                      paddingVertical: 14,
+                      paddingHorizontal: 16,
+                      backgroundColor: pressed ? theme.colors.intent.neutral.subtle : 'transparent',
+                      opacity: item.isDisabled ? 0.5 : 1,
+                    })}
+                  >
+                    <Text style={{ fontSize: 16, color: theme.colors.fg }}>{item.label}</Text>
+                  </Pressable>
+                </View>
+              ))}
+            </View>
+          </Pressable>
+        </Pressable>
+      </RNModal>
+    </>
+  );
+}

package/src/Modal.tsx

@@ -0,0 +1,114 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Modal as RNModal, Pressable, View, Text, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+import { IconButton } from './IconButton';
+import { Icon } from './Icon';
+
+export interface ModalProps extends Omit<ViewProps, 'children'> {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: ReactNode;
+  children?: ReactNode;
+  footer?: ReactNode;
+  showCloseButton?: boolean;
+  closeOnOverlayPress?: boolean;
+  closeLabel?: string;
+}
+
+/** Modal — centered overlay dialog for RN (uses native Modal). */
+export const Modal = forwardRef<View, ModalProps>(function Modal(props, ref) {
+  const {
+    isOpen,
+    onClose,
+    title,
+    children,
+    footer,
+    showCloseButton = true,
+    closeOnOverlayPress = true,
+    closeLabel = 'Close',
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  return (
+    <RNModal
+      visible={isOpen}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}
+      accessibilityViewIsModal
+    >
+      <Pressable
+        onPress={closeOnOverlayPress ? onClose : undefined}
+        style={{
+          flex: 1,
+          backgroundColor: 'rgba(0,0,0,0.5)',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: 16,
+        }}
+      >
+        <Pressable
+          onPress={(e) => e.stopPropagation()}
+          accessibilityRole="none"
+          style={{ width: '100%', maxWidth: 520 }}
+        >
+          <View
+            ref={ref}
+            accessibilityRole="none"
+            accessibilityViewIsModal
+            style={[
+              {
+                backgroundColor: theme.colors.surfaceElevated,
+                borderRadius: theme.radii.lg,
+                overflow: 'hidden',
+                maxHeight: '90%',
+              },
+              style,
+            ]}
+            {...rest}
+          >
+            {(title || showCloseButton) && (
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  gap: 12,
+                  padding: 14,
+                  borderBottomWidth: 1,
+                  borderBottomColor: theme.colors.border,
+                }}
+              >
+                <Text style={{ flex: 1, color: theme.colors.fg, fontSize: 16, fontWeight: '600' }}>{title}</Text>
+                {showCloseButton ? (
+                  <IconButton
+                    accessibilityLabel={closeLabel}
+                    variant="ghost"
+                    size="sm"
+                    onPress={onClose}
+                    icon={<Icon name="x" size={16} color={theme.colors.fg} />}
+                  />
+                ) : null}
+              </View>
+            )}
+            <View style={{ padding: 16 }}>{children}</View>
+            {footer ? (
+              <View
+                style={{
+                  flexDirection: 'row',
+                  gap: 8,
+                  justifyContent: 'flex-end',
+                  padding: 12,
+                  borderTopWidth: 1,
+                  borderTopColor: theme.colors.border,
+                }}
+              >
+                {footer}
+              </View>
+            ) : null}
+          </View>
+        </Pressable>
+      </Pressable>
+    </RNModal>
+  );
+});