@elvora/react-native 1.0.0-rc.1

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@elvora/react-native",
+  "version": "1.0.0-rc.1",
+  "description": "Elvora UI components for React Native — same headless API as the web adapters, native rendering, WCAG 2.1 AA.",
+  "license": "MIT",
+  "author": "Elvora UI Contributors",
+  "homepage": "https://github.com/elvora-ui/elvora/tree/main/packages/react-native#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/elvora-ui/elvora.git",
+    "directory": "packages/react-native"
+  },
+  "bugs": {
+    "url": "https://github.com/elvora-ui/elvora/issues"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "ui",
+    "design-system",
+    "headless",
+    "accessibility",
+    "elvora"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "react-native": "./src/index.ts",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "react-native": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.74.0",
+    "react-native-svg": ">=15.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-svg": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@elvora/icons": "1.0.0-rc.1",
+    "@elvora/core": "1.0.0-rc.1",
+    "@elvora/themes": "1.0.0-rc.1",
+    "@elvora/tokens": "1.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "jsdom": "^25.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-native": "0.76.5",
+    "react-native-svg": "^15.8.0",
+    "react-test-renderer": "^18.3.1",
+    "rimraf": "^6.0.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "echo 'no lint configured'",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rimraf dist"
+  }
+}

package/src/Accordion.tsx

@@ -0,0 +1,11 @@
+import { Collapse, type CollapseItem, type CollapseProps } from './Collapse';
+
+export interface AccordionItem extends CollapseItem {}
+
+export interface AccordionProps extends Omit<CollapseProps, 'accordion' | 'items'> {
+  items: AccordionItem[];
+}
+
+export function Accordion(props: AccordionProps) {
+  return <Collapse {...props} accordion />;
+}

package/src/Affix.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+
+export interface AffixProps extends ViewProps {
+  /** No-op on RN — use sticky list headers instead. Pass-through wrapper. */
+  offsetTop?: number;
+  offsetBottom?: number;
+  onChange?: (affixed: boolean) => void;
+  children?: ReactNode;
+}
+
+/**
+ * Affix — on React Native there is no global scroll viewport so this is a
+ * pass-through wrapper. For sticky list headers use `FlatList`'s
+ * `stickyHeaderIndices` or `ScrollView`'s `stickyHeaderIndices` directly.
+ */
+export function Affix(props: AffixProps) {
+  const { children, offsetTop: _o, offsetBottom: _b, onChange: _c, ...rest } = props;
+  return <View {...rest}>{children}</View>;
+}

package/src/Alert.tsx

@@ -0,0 +1,102 @@
+import { forwardRef, type ReactNode } from 'react';
+import { View, Text, type ViewProps, type ViewStyle } from 'react-native';
+import type { ElvoraStatus, ElvoraTone } from '@elvora/core';
+import { useTheme } from './ElvoraProvider';
+import { Icon } from './Icon';
+import { IconButton } from './IconButton';
+import type { IconName } from '@elvora/icons';
+
+export interface AlertProps extends ViewProps {
+  status?: ElvoraStatus;
+  tone?: ElvoraTone;
+  title?: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  onClose?: () => void;
+  closeLabel?: string;
+}
+
+const statusIntent = {
+  neutral: 'neutral',
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  error: 'danger',
+} as const;
+
+const defaultIcon: Record<ElvoraStatus, IconName> = {
+  neutral: 'info',
+  info: 'info',
+  success: 'checkCircle',
+  warning: 'alertCircle',
+  error: 'x',
+};
+
+/** Alert — banner-style feedback for RN. */
+export const Alert = forwardRef<View, AlertProps>(function Alert(props, ref) {
+  const {
+    status = 'info',
+    tone = 'subtle',
+    title,
+    description,
+    icon,
+    onClose,
+    closeLabel = 'Dismiss',
+    children,
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const intent = theme.colors.intent[statusIntent[status]];
+  let bg = intent.subtle;
+  let fg = intent.fg;
+  let borderColor = 'transparent';
+  if (tone === 'solid') {
+    bg = intent.solid;
+    fg = intent.solidFg;
+  } else if (tone === 'outline') {
+    bg = 'transparent';
+    fg = intent.fg;
+    borderColor = intent.border;
+  }
+  const base: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderRadius: theme.radii.md,
+    backgroundColor: bg,
+    borderWidth: tone === 'outline' ? 1 : 0,
+    borderColor,
+  };
+  return (
+    <View
+      ref={ref}
+      accessibilityRole={status === 'error' || status === 'warning' ? 'alert' : undefined}
+      accessibilityLiveRegion="polite"
+      style={[base, style]}
+      {...rest}
+    >
+      <View style={{ marginTop: 2 }}>{icon ?? <Icon name={defaultIcon[status]} size={18} color={fg} />}</View>
+      <View style={{ flex: 1, minWidth: 0 }}>
+        {title ? (
+          <Text style={{ color: fg, fontWeight: '600', fontSize: 14, marginBottom: description || children ? 2 : 0 }}>
+            {title}
+          </Text>
+        ) : null}
+        {description ? <Text style={{ color: fg, fontSize: 13, lineHeight: 18 }}>{description}</Text> : null}
+        {children}
+      </View>
+      {onClose ? (
+        <IconButton
+          accessibilityLabel={closeLabel}
+          size="xs"
+          variant="ghost"
+          onPress={onClose}
+          icon={<Icon name="x" size={14} color={fg} />}
+        />
+      ) : null}
+    </View>
+  );
+});

package/src/Anchor.tsx

@@ -0,0 +1,58 @@
+import { type ReactNode, type RefObject } from 'react';
+import { Pressable, Text, View, type ViewProps, type ScrollView } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface AnchorLink {
+  /** Vertical scroll offset (px) for this section. */
+  offset: number;
+  label: ReactNode;
+}
+
+export interface AnchorProps extends ViewProps {
+  links: AnchorLink[];
+  /** Ref to the parent ScrollView used to scroll to each section. */
+  scrollRef: RefObject<ScrollView>;
+  activeIndex?: number;
+  smooth?: boolean;
+}
+
+/**
+ * Anchor — section jumper for RN. Caller passes a ref to their parent
+ * `<ScrollView>` and pre-computed offsets for each section. Active highlighting
+ * is opt-in via `activeIndex`.
+ */
+export function Anchor(props: AnchorProps) {
+  const { links, scrollRef, activeIndex, smooth = true, style, ...rest } = props;
+  const theme = useTheme();
+  return (
+    <View accessibilityRole="menu" style={style} {...rest}>
+      {links.map((link, idx) => {
+        const isActive = activeIndex === idx;
+        return (
+          <Pressable
+            key={idx}
+            accessibilityRole="link"
+            accessibilityState={{ selected: isActive }}
+            onPress={() => scrollRef.current?.scrollTo({ y: link.offset, animated: smooth })}
+            style={{
+              paddingVertical: 6,
+              paddingLeft: 12,
+              borderLeftWidth: 2,
+              borderLeftColor: isActive ? theme.colors.intent.primary.solid : theme.colors.border,
+              backgroundColor: isActive ? theme.colors.intent.primary.subtle : 'transparent',
+            }}
+          >
+            <Text
+              style={{
+                fontSize: 13,
+                color: isActive ? theme.colors.intent.primary.fg : theme.colors.fgMuted,
+              }}
+            >
+              {link.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

package/src/AutoComplete.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useMemo, useState } from 'react';
+import { FlatList, Pressable, TextInput, View, Text, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface AutoCompleteOption {
+  value: string;
+  label?: string;
+}
+
+export interface AutoCompleteProps extends Omit<ViewProps, 'children'> {
+  value?: string;
+  defaultValue?: string;
+  onChangeValue?: (value: string) => void;
+  options?: AutoCompleteOption[];
+  loadOptions?: (query: string) => Promise<AutoCompleteOption[]>;
+  onSelectOption?: (opt: AutoCompleteOption) => void;
+  placeholder?: string;
+  isDisabled?: boolean;
+}
+
+export function AutoComplete(props: AutoCompleteProps) {
+  const {
+    value: valueProp,
+    defaultValue = '',
+    onChangeValue,
+    options = [],
+    loadOptions,
+    onSelectOption,
+    placeholder,
+    isDisabled,
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const [internal, setInternal] = useState(defaultValue);
+  const query = valueProp ?? internal;
+  const [isOpen, setOpen] = useState(false);
+  const [asyncOptions, setAsyncOptions] = useState<AutoCompleteOption[]>([]);
+
+  useEffect(() => {
+    if (!loadOptions) return;
+    let cancelled = false;
+    loadOptions(query).then((opts) => {
+      if (!cancelled) setAsyncOptions(opts);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [query, loadOptions]);
+
+  const filtered = useMemo(() => {
+    const source = loadOptions ? asyncOptions : options;
+    if (!query) return source;
+    return source.filter((o) => o.value.toLowerCase().includes(query.toLowerCase()));
+  }, [asyncOptions, options, loadOptions, query]);
+
+  const setQuery = (next: string) => {
+    if (valueProp === undefined) setInternal(next);
+    onChangeValue?.(next);
+  };
+
+  return (
+    <View style={style} {...rest}>
+      <TextInput
+        value={query}
+        placeholder={placeholder}
+        placeholderTextColor={theme.colors.fgMuted}
+        editable={!isDisabled}
+        onChangeText={(t) => {
+          setQuery(t);
+          setOpen(true);
+        }}
+        onFocus={() => setOpen(true)}
+        onBlur={() => setTimeout(() => setOpen(false), 150)}
+        style={{
+          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,
+        }}
+      />
+      {isOpen && filtered.length > 0 ? (
+        <View
+          style={{
+            marginTop: 4,
+            borderRadius: Number(theme.radii.md),
+            borderWidth: 1,
+            borderColor: theme.colors.border,
+            backgroundColor: theme.colors.surfaceElevated,
+            maxHeight: 200,
+          }}
+        >
+          <FlatList
+            data={filtered}
+            keyExtractor={(o) => o.value}
+            keyboardShouldPersistTaps="handled"
+            renderItem={({ item }) => (
+              <Pressable
+                onPress={() => {
+                  setQuery(item.value);
+                  onSelectOption?.(item);
+                  setOpen(false);
+                }}
+                style={({ pressed }) => ({
+                  paddingHorizontal: 12,
+                  paddingVertical: 10,
+                  backgroundColor: pressed ? theme.colors.intent.neutral.subtle : 'transparent',
+                })}
+              >
+                <Text style={{ color: theme.colors.fg }}>{item.label ?? item.value}</Text>
+              </Pressable>
+            )}
+          />
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/Avatar.tsx

@@ -0,0 +1,58 @@
+import { forwardRef, useState, type ReactNode } from 'react';
+import { Image, Text, View, type ImageSourcePropType, type StyleProp, type ViewStyle } from 'react-native';
+import type { ElvoraSize } from '@elvora/core';
+import { useTheme } from './ElvoraProvider';
+
+export interface AvatarProps {
+  src?: string | ImageSourcePropType;
+  alt?: string;
+  name?: string;
+  size?: ElvoraSize;
+  shape?: 'circle' | 'square';
+  fallback?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+const sizeMap: Record<ElvoraSize, number> = { xs: 20, sm: 28, md: 36, lg: 48, xl: 64 };
+
+export const Avatar = forwardRef<View, AvatarProps>(function Avatar(props, ref) {
+  const { src, alt, name, size = 'md', shape = 'circle', fallback, style } = props;
+  const theme = useTheme();
+  const [imgFailed, setImgFailed] = useState(false);
+  const px = sizeMap[size];
+  const initials = (name ?? '')
+    .split(' ')
+    .map((p) => p[0])
+    .filter(Boolean)
+    .slice(0, 2)
+    .join('')
+    .toUpperCase();
+
+  const container: ViewStyle = {
+    width: px,
+    height: px,
+    borderRadius: shape === 'circle' ? px / 2 : Number(theme.radii.md),
+    backgroundColor: theme.colors.intent.neutral.subtle,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  };
+
+  const showImage = src && !imgFailed;
+  const source: ImageSourcePropType | undefined =
+    typeof src === 'string' ? { uri: src } : (src as ImageSourcePropType | undefined);
+
+  return (
+    <View ref={ref} accessibilityLabel={alt ?? name} style={[container, style]}>
+      {showImage && source ? (
+        <Image source={source} onError={() => setImgFailed(true)} style={{ width: '100%', height: '100%' }} />
+      ) : initials ? (
+        <Text style={{ color: theme.colors.intent.neutral.fg, fontWeight: '600', fontSize: Math.max(10, Math.floor(px * 0.4)) }}>
+          {initials}
+        </Text>
+      ) : (
+        fallback ?? <Text style={{ color: theme.colors.intent.neutral.fg }}>?</Text>
+      )}
+    </View>
+  );
+});

package/src/BackTop.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useState, type RefObject } from 'react';
+import { Animated, Pressable, type ScrollView } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+import { Icon } from './Icon';
+
+export interface BackTopProps {
+  /** Ref to the ScrollView this button scrolls to top. */
+  scrollRef: RefObject<ScrollView>;
+  /** Current Y offset of the parent ScrollView (caller wires up `onScroll`). */
+  scrollY: number;
+  /** Show after the user has scrolled past this offset (default 400). */
+  visibilityHeight?: number;
+  bottom?: number;
+  right?: number;
+  label?: string;
+}
+
+/**
+ * BackTop — floating "scroll to top" button for RN. Caller passes a ref to the
+ * parent ScrollView plus the current scroll offset (e.g. from `onScroll` event).
+ */
+export function BackTop(props: BackTopProps) {
+  const { scrollRef, scrollY, visibilityHeight = 400, bottom = 24, right = 24, label = 'Back to top' } = props;
+  const theme = useTheme();
+  const [visible, setVisible] = useState(false);
+  const opacity = useState(new Animated.Value(0))[0];
+
+  useEffect(() => {
+    setVisible(scrollY > visibilityHeight);
+  }, [scrollY, visibilityHeight]);
+
+  useEffect(() => {
+    Animated.timing(opacity, { toValue: visible ? 1 : 0, duration: 200, useNativeDriver: true }).start();
+  }, [visible, opacity]);
+
+  if (!visible) return null;
+  return (
+    <Animated.View
+      pointerEvents={visible ? 'auto' : 'none'}
+      style={{
+        position: 'absolute',
+        bottom,
+        right,
+        opacity,
+      }}
+    >
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={label}
+        onPress={() => scrollRef.current?.scrollTo({ y: 0, animated: true })}
+        style={{
+          width: 44,
+          height: 44,
+          borderRadius: 22,
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+          backgroundColor: theme.colors.surfaceElevated,
+          alignItems: 'center',
+          justifyContent: 'center',
+          shadowColor: '#000',
+          shadowOpacity: 0.15,
+          shadowRadius: 8,
+          shadowOffset: { width: 0, height: 4 },
+          elevation: 4,
+        }}
+      >
+        <Icon name="chevronUp" size={18} color={theme.colors.fg} />
+      </Pressable>
+    </Animated.View>
+  );
+}

package/src/Backdrop.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+import { Modal, Pressable, View } from 'react-native';
+
+export interface BackdropProps {
+  open: boolean;
+  onClose?: () => void;
+  tint?: string;
+  invisible?: boolean;
+  children?: ReactNode;
+}
+
+export function Backdrop(props: BackdropProps) {
+  const { open, onClose, tint, invisible, children } = props;
+  if (!open) return null;
+  return (
+    <Modal transparent visible animationType="fade" onRequestClose={onClose}>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel="Close"
+        onPress={onClose}
+        style={{
+          flex: 1,
+          backgroundColor: invisible ? 'transparent' : tint ?? 'rgba(0,0,0,0.55)',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <View>{children}</View>
+      </Pressable>
+    </Modal>
+  );
+}

package/src/Badge.tsx

@@ -0,0 +1,87 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import type { ElvoraSize, ElvoraStatus, ElvoraTone } from '@elvora/core';
+import { useTheme } from './ElvoraProvider';
+
+export interface BadgeProps {
+  status?: ElvoraStatus;
+  size?: Exclude<ElvoraSize, 'xl'>;
+  tone?: ElvoraTone;
+  isDot?: boolean;
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+const sizeMap = {
+  xs: { padX: 4, padY: 1, font: 10, dotSize: 6 },
+  sm: { padX: 6, padY: 2, font: 11, dotSize: 8 },
+  md: { padX: 8, padY: 2, font: 12, dotSize: 10 },
+  lg: { padX: 10, padY: 4, font: 13, dotSize: 12 },
+};
+
+const statusIntent = {
+  neutral: 'neutral',
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  error: 'danger',
+} as const;
+
+export const Badge = forwardRef<View, BadgeProps>(function Badge(props, ref) {
+  const { status = 'neutral', size = 'sm', tone = 'subtle', isDot = false, 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;
+  }
+
+  if (isDot) {
+    return (
+      <View
+        ref={ref}
+        accessibilityRole="image"
+        style={[
+          {
+            width: dims.dotSize,
+            height: dims.dotSize,
+            borderRadius: dims.dotSize / 2,
+            backgroundColor: bg,
+            borderWidth: tone === 'outline' ? 1 : 0,
+            borderColor: border,
+          },
+          style,
+        ]}
+      />
+    );
+  }
+
+  return (
+    <View
+      ref={ref}
+      style={[
+        {
+          paddingHorizontal: dims.padX,
+          paddingVertical: dims.padY,
+          borderRadius: Number(theme.radii.md),
+          backgroundColor: bg,
+          borderWidth: tone === 'outline' ? 1 : 0,
+          borderColor: border,
+          alignSelf: 'flex-start',
+        },
+        style,
+      ]}
+    >
+      <Text style={{ color: fg, fontSize: dims.font, fontWeight: '500' }}>{children}</Text>
+    </View>
+  );
+});