@elvora/react-native 1.0.0-rc.1

package/src/ProLayout.tsx

@@ -0,0 +1,151 @@
+import { useCallback, useState, type ReactNode } from 'react';
+import { Pressable, ScrollView, Text, View, useWindowDimensions, type ViewProps } from 'react-native';
+import type { IconName } from '@elvora/icons';
+import { useTheme } from './ElvoraProvider';
+import { Avatar } from './Avatar';
+import { Icon } from './Icon';
+
+export interface ProLayoutMenuItem {
+  key: string;
+  label: ReactNode;
+  icon?: IconName;
+  children?: ProLayoutMenuItem[];
+}
+
+export interface ProLayoutUser {
+  name: string;
+  avatar?: string;
+  caption?: ReactNode;
+}
+
+export interface ProLayoutProps extends Omit<ViewProps, 'children'> {
+  brand?: ReactNode;
+  menu?: ProLayoutMenuItem[];
+  selectedKey?: string;
+  onSelect?: (key: string) => void;
+  user?: ProLayoutUser;
+  header?: ReactNode;
+  footer?: ReactNode;
+  children?: ReactNode;
+}
+
+function renderMenuItems(
+  items: ProLayoutMenuItem[],
+  selectedKey: string | undefined,
+  onSelect: (key: string) => void,
+  theme: ReturnType<typeof useTheme>,
+  depth = 0,
+): ReactNode {
+  return items.map((item) => {
+    const isSelected = item.key === selectedKey;
+    return (
+      <View key={item.key}>
+        <Pressable
+          accessibilityRole="menuitem"
+          onPress={() => onSelect(item.key)}
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingHorizontal: 12 + depth * 12,
+            paddingVertical: 8,
+            backgroundColor: isSelected ? theme.colors.intent.primary.subtle : 'transparent',
+            borderRadius: 6,
+            gap: 8,
+          }}
+        >
+          {item.icon ? <Icon name={item.icon} size={16} /> : null}
+          <Text
+            style={{
+              color: isSelected ? theme.colors.intent.primary.fg : theme.colors.fg,
+              fontWeight: isSelected ? '600' : '400',
+              fontSize: 14,
+            }}
+          >
+            {item.label}
+          </Text>
+        </Pressable>
+        {item.children?.length ? renderMenuItems(item.children, selectedKey, onSelect, theme, depth + 1) : null}
+      </View>
+    );
+  });
+}
+
+export function ProLayout(props: ProLayoutProps) {
+  const {
+    brand,
+    menu = [],
+    selectedKey,
+    onSelect,
+    user,
+    header,
+    footer,
+    children,
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const { width } = useWindowDimensions();
+  const showSidebar = width >= 720;
+  const [internalKey, setInternalKey] = useState<string | undefined>(selectedKey);
+
+  const handleSelect = useCallback(
+    (key: string) => {
+      setInternalKey(key);
+      onSelect?.(key);
+    },
+    [onSelect],
+  );
+
+  const activeKey = selectedKey ?? internalKey;
+
+  return (
+    <View style={[{ flex: 1, flexDirection: 'row', backgroundColor: theme.colors.background }, style]} {...rest}>
+      {showSidebar ? (
+        <View
+          style={{
+            width: 240,
+            borderRightWidth: 1,
+            borderRightColor: theme.colors.border,
+            backgroundColor: theme.colors.surfaceElevated,
+            padding: 16,
+            gap: 16,
+          }}
+        >
+          {brand ? <View>{brand}</View> : null}
+          <ScrollView style={{ flex: 1 }}>{renderMenuItems(menu, activeKey, handleSelect, theme)}</ScrollView>
+          {footer ? <View>{footer}</View> : null}
+        </View>
+      ) : null}
+      <View style={{ flex: 1 }}>
+        {(header || user) && (
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              borderBottomWidth: 1,
+              borderBottomColor: theme.colors.border,
+              backgroundColor: theme.colors.surfaceElevated,
+              paddingHorizontal: 16,
+              paddingVertical: 12,
+              gap: 12,
+            }}
+          >
+            <View style={{ flex: 1 }}>{header}</View>
+            {user ? (
+              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+                <Avatar src={user.avatar} name={user.name} size="sm" />
+                <View>
+                  <Text style={{ color: theme.colors.fg, fontSize: 14, fontWeight: '500' }}>{user.name}</Text>
+                  {user.caption ? (
+                    <Text style={{ color: theme.colors.fgMuted, fontSize: 12 }}>{user.caption}</Text>
+                  ) : null}
+                </View>
+              </View>
+            ) : null}
+          </View>
+        )}
+        <ScrollView contentContainerStyle={{ padding: 16, gap: 12 }}>{children}</ScrollView>
+      </View>
+    </View>
+  );
+}

package/src/ProTable.tsx

@@ -0,0 +1,91 @@
+import { useMemo, useState, type ReactNode } from 'react';
+import { View, Text, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+import { Table, type TableColumn } from './Table';
+import { Input } from './Input';
+
+export interface ProTableToolbar {
+  title?: ReactNode;
+  actions?: ReactNode;
+}
+
+export interface ProTableColumn<Row = Record<string, unknown>> extends TableColumn<Row> {
+  searchable?: boolean;
+}
+
+export interface ProTableProps<Row = Record<string, unknown>> extends Omit<ViewProps, 'children'> {
+  columns: ProTableColumn<Row>[];
+  dataSource: Row[];
+  rowKey?: keyof Row | ((row: Row, index: number) => string | number);
+  toolbar?: ProTableToolbar;
+  search?: boolean;
+  searchPlaceholder?: string;
+  empty?: ReactNode;
+  onRowPress?: (row: Row, index: number) => void;
+}
+
+export function ProTable<Row extends Record<string, unknown>>(props: ProTableProps<Row>) {
+  const {
+    columns,
+    dataSource,
+    rowKey,
+    toolbar,
+    search = true,
+    searchPlaceholder = 'Search…',
+    empty,
+    onRowPress,
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const [query, setQuery] = useState('');
+
+  const searchableKeys = useMemo(
+    () =>
+      columns
+        .filter((c) => c.searchable !== false && c.dataIndex !== undefined)
+        .map((c) => String(c.dataIndex)),
+    [columns],
+  );
+
+  const filtered = useMemo(() => {
+    if (!query.trim()) return dataSource;
+    const lower = query.toLowerCase();
+    return dataSource.filter((row) =>
+      searchableKeys.some((key) =>
+        String((row as Record<string, unknown>)[key] ?? '').toLowerCase().includes(lower),
+      ),
+    );
+  }, [dataSource, query, searchableKeys]);
+
+  return (
+    <View style={[{ gap: 12 }, style]} {...rest}>
+      {(toolbar?.title || toolbar?.actions || search) && (
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+          {toolbar?.title && (
+            <Text style={{ color: theme.colors.fg, fontWeight: '600', fontSize: 16, flex: 1 }}>
+              {toolbar.title}
+            </Text>
+          )}
+          {search && (
+            <Input
+              value={query}
+              onChangeText={setQuery}
+              placeholder={searchPlaceholder}
+              style={{ flex: 1, maxWidth: 240 }}
+            />
+          )}
+          {toolbar?.actions}
+        </View>
+      )}
+      <Table<Row>
+        columns={columns}
+        dataSource={filtered}
+        rowKey={rowKey}
+        bordered
+        emptyState={empty ?? 'No data'}
+        onRowPress={onRowPress}
+      />
+    </View>
+  );
+}

package/src/Progress.tsx

@@ -0,0 +1,92 @@
+import { forwardRef, useEffect, useRef } from 'react';
+import { Animated, Easing, View, type StyleProp, type ViewStyle } from 'react-native';
+import type { ElvoraSize, ElvoraStatus } from '@elvora/core';
+import { useTheme } from './ElvoraProvider';
+
+export interface ProgressProps {
+  value?: number;
+  max?: number;
+  min?: number;
+  size?: Exclude<ElvoraSize, 'xl'>;
+  status?: ElvoraStatus;
+  label?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const heights = { xs: 4, sm: 6, md: 8, lg: 12 };
+const statusIntent = {
+  neutral: 'primary',
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  error: 'danger',
+} as const;
+
+export const Progress = forwardRef<View, ProgressProps>(function Progress(props, ref) {
+  const { value, max = 100, min = 0, size = 'md', status = 'neutral', label, style } = props;
+  const theme = useTheme();
+  const intent = theme.colors.intent[statusIntent[status]];
+  const indeterminate = value === undefined;
+  const clamped = indeterminate ? 0 : Math.max(min, Math.min(max, value));
+  const pct = indeterminate ? 0.3 : (clamped - min) / (max - min);
+  const height = heights[size];
+
+  const anim = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    if (!indeterminate) return;
+    const loop = Animated.loop(
+      Animated.timing(anim, {
+        toValue: 1,
+        duration: 1500,
+        easing: Easing.inOut(Easing.ease),
+        useNativeDriver: true,
+      }),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [anim, indeterminate]);
+
+  const translateX = anim.interpolate({ inputRange: [0, 1], outputRange: [-100, 333] });
+
+  return (
+    <View
+      ref={ref}
+      accessibilityRole="progressbar"
+      accessibilityLabel={label}
+      accessibilityValue={indeterminate ? undefined : { min, max, now: clamped }}
+      style={[
+        {
+          height,
+          width: '100%',
+          backgroundColor: theme.colors.intent.neutral.subtle,
+          borderRadius: 9999,
+          overflow: 'hidden',
+        },
+        style,
+      ]}
+    >
+      {indeterminate ? (
+        <Animated.View
+          style={{
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            width: `${pct * 100}%`,
+            backgroundColor: intent.solid,
+            borderRadius: 9999,
+            transform: [{ translateX }],
+          }}
+        />
+      ) : (
+        <View
+          style={{
+            width: `${pct * 100}%`,
+            height: '100%',
+            backgroundColor: intent.solid,
+            borderRadius: 9999,
+          }}
+        />
+      )}
+    </View>
+  );
+});

package/src/QRCode.tsx

@@ -0,0 +1,65 @@
+import { useMemo, type ReactNode } from 'react';
+import { View, type ViewStyle } from 'react-native';
+import { generateQrMatrix, type ErrorCorrection } from '@elvora/core';
+
+export interface QRCodeProps {
+  value: string;
+  size?: number;
+  level?: ErrorCorrection;
+  foreground?: string;
+  background?: string;
+  /** Optional centered node (e.g. logo). Should be roughly 18% of `size`. */
+  icon?: ReactNode;
+  style?: ViewStyle;
+}
+
+/**
+ * QRCode — renders a QR code as a stacked grid of `View` cells. Pure RN, no
+ * native deps. For very large codes consider rendering on the JS side and
+ * passing through `react-native-svg` for sharper printing.
+ */
+export function QRCode(props: QRCodeProps) {
+  const { value, size = 160, level = 'M', foreground = '#000', background = '#fff', icon, style } = props;
+  const matrix = useMemo(() => generateQrMatrix(value, level), [value, level]);
+  const cell = size / matrix.size;
+  return (
+    <View
+      style={[
+        { width: size, height: size, backgroundColor: background, position: 'relative' },
+        style,
+      ]}
+    >
+      {matrix.modules.map((row, ri) => (
+        <View key={ri} style={{ flexDirection: 'row', height: cell }}>
+          {row.map((isOn, ci) => (
+            <View
+              key={ci}
+              style={{
+                width: cell,
+                height: cell,
+                backgroundColor: isOn ? foreground : background,
+              }}
+            />
+          ))}
+        </View>
+      ))}
+      {icon ? (
+        <View
+          style={{
+            position: 'absolute',
+            top: size / 2 - size * 0.12,
+            left: size / 2 - size * 0.12,
+            width: size * 0.24,
+            height: size * 0.24,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: background,
+            borderRadius: 4,
+          }}
+        >
+          {icon}
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/src/Radio.tsx

@@ -0,0 +1,98 @@
+import { createContext, forwardRef, useContext, type ReactNode } from 'react';
+import { Pressable, Text, View, type PressableProps, type StyleProp, type ViewStyle } from 'react-native';
+import { useControllableState } from '@elvora/core/react';
+import { useTheme } from './ElvoraProvider';
+
+interface RadioGroupContextValue {
+  name: string;
+  value: string | undefined;
+  setValue: (v: string) => void;
+  isDisabled: boolean;
+  size: 'sm' | 'md' | 'lg';
+}
+
+const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);
+
+export interface RadioGroupProps {
+  name: string;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  isDisabled?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  label?: string;
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function RadioGroup(props: RadioGroupProps) {
+  const { name, value, defaultValue, onChange, isDisabled = false, size = 'md', label, children, style } = props;
+  const [v, setV] = useControllableState({ value, defaultValue, onChange });
+  return (
+    <RadioGroupContext.Provider value={{ name, value: v ?? undefined, setValue: setV, isDisabled, size }}>
+      <View accessibilityRole="radiogroup" accessibilityLabel={label} style={[{ gap: 8 }, style]}>
+        {children}
+      </View>
+    </RadioGroupContext.Provider>
+  );
+}
+
+export interface RadioProps extends Omit<PressableProps, 'onPress' | 'children'> {
+  value: string;
+  isDisabled?: boolean;
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+const sizeMap = {
+  sm: { outer: 16, inner: 7, font: 13 },
+  md: { outer: 20, inner: 9, font: 14 },
+  lg: { outer: 24, inner: 11, font: 16 },
+};
+
+export const Radio = forwardRef<View, RadioProps>(function Radio(props, ref) {
+  const { value, isDisabled, children, style, ...rest } = props;
+  const ctx = useContext(RadioGroupContext);
+  const theme = useTheme();
+  if (!ctx) throw new Error('Radio must be rendered inside a RadioGroup');
+  const dims = sizeMap[ctx.size];
+  const isChecked = ctx.value === value;
+  const disabled = Boolean(ctx.isDisabled || isDisabled);
+
+  return (
+    <Pressable
+      ref={ref}
+      accessibilityRole="radio"
+      accessibilityState={{ selected: isChecked, disabled }}
+      disabled={disabled}
+      onPress={() => ctx.setValue(value)}
+      style={[{ flexDirection: 'row', alignItems: 'center', gap: 8, opacity: disabled ? 0.5 : 1 }, style]}
+      {...rest}
+    >
+      <View
+        style={{
+          width: dims.outer,
+          height: dims.outer,
+          borderWidth: 1.5,
+          borderColor: isChecked ? theme.colors.intent.primary.solid : theme.colors.borderStrong,
+          borderRadius: dims.outer / 2,
+          backgroundColor: theme.colors.surfaceElevated,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {isChecked ? (
+          <View
+            style={{
+              width: dims.inner,
+              height: dims.inner,
+              borderRadius: dims.inner / 2,
+              backgroundColor: theme.colors.intent.primary.solid,
+            }}
+          />
+        ) : null}
+      </View>
+      {children ? <Text style={{ color: theme.colors.fg, fontSize: dims.font }}>{children}</Text> : null}
+    </Pressable>
+  );
+});

package/src/Rate.tsx

@@ -0,0 +1,66 @@
+import { useState, type ReactNode } from 'react';
+import { Pressable, View, Text, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface RateProps extends Omit<ViewProps, 'onChange'> {
+  value?: number;
+  defaultValue?: number;
+  onChange?: (value: number) => void;
+  count?: number;
+  allowHalf?: boolean;
+  isDisabled?: boolean;
+  /** Custom character (string emoji or React node). Defaults to ★ */
+  character?: ReactNode;
+  size?: number;
+}
+
+export function Rate(props: RateProps) {
+  const {
+    value: valueProp,
+    defaultValue = 0,
+    onChange,
+    count = 5,
+    allowHalf,
+    isDisabled,
+    character = '★',
+    size = 24,
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const [internal, setInternal] = useState<number>(defaultValue);
+  const value = valueProp ?? internal;
+
+  const setValue = (next: number) => {
+    if (isDisabled) return;
+    const clamped = Math.min(Math.max(next, 0), count);
+    if (valueProp === undefined) setInternal(clamped);
+    onChange?.(clamped);
+  };
+
+  return (
+    <View
+      accessibilityRole="adjustable"
+      accessibilityValue={{ min: 0, max: count, now: value }}
+      style={[{ flexDirection: 'row', opacity: isDisabled ? 0.6 : 1 }, style]}
+      {...rest}
+    >
+      {Array.from({ length: count }).map((_, i) => {
+        const filled = value >= i + 1;
+        const half = !filled && allowHalf && value >= i + 0.5;
+        const color = filled || half ? theme.colors.intent.warning.solid : theme.colors.border;
+        return (
+          <Pressable
+            key={i}
+            disabled={isDisabled}
+            onPress={() => setValue(i + 1)}
+            onLongPress={allowHalf ? () => setValue(i + 0.5) : undefined}
+            style={{ marginHorizontal: 2 }}
+          >
+            <Text style={{ color, fontSize: size }}>{character}</Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

package/src/Result.tsx

@@ -0,0 +1,64 @@
+import { forwardRef, type ReactNode } from 'react';
+import { View, Text, type ViewProps } from 'react-native';
+import type { ElvoraStatus } from '@elvora/core';
+import { useTheme } from './ElvoraProvider';
+import { Icon } from './Icon';
+import type { IconName } from '@elvora/icons';
+
+export type ResultStatus = ElvoraStatus | '404' | '500' | '403';
+
+export interface ResultProps extends ViewProps {
+  status?: ResultStatus;
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  icon?: ReactNode;
+  extra?: ReactNode;
+  children?: ReactNode;
+}
+
+const statusIntent = {
+  neutral: 'neutral',
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  error: 'danger',
+  '404': 'neutral',
+  '500': 'danger',
+  '403': 'warning',
+} as const;
+
+const statusIcon: Record<ResultStatus, IconName> = {
+  neutral: 'info',
+  info: 'info',
+  success: 'checkCircle',
+  warning: 'alertCircle',
+  error: 'x',
+  '404': 'info',
+  '500': 'alertCircle',
+  '403': 'x',
+};
+
+/** Result — page-level status component for RN. */
+export const Result = forwardRef<View, ResultProps>(function Result(props, ref) {
+  const { status = 'info', title, subtitle, icon, extra, children, style, ...rest } = props;
+  const theme = useTheme();
+  const intent = theme.colors.intent[statusIntent[status]];
+  return (
+    <View
+      ref={ref}
+      style={[
+        { alignItems: 'center', justifyContent: 'center', paddingVertical: 40, paddingHorizontal: 16, gap: 12 },
+        style,
+      ]}
+      {...rest}
+    >
+      <View>{icon ?? <Icon name={statusIcon[status]} size={56} color={intent.solid} />}</View>
+      {title ? <Text style={{ color: theme.colors.fg, fontSize: 20, fontWeight: '700' }}>{title}</Text> : null}
+      {subtitle ? (
+        <Text style={{ color: theme.colors.fgMuted, fontSize: 14, textAlign: 'center' }}>{subtitle}</Text>
+      ) : null}
+      {children}
+      {extra ? <View style={{ flexDirection: 'row', gap: 8, marginTop: 8 }}>{extra}</View> : null}
+    </View>
+  );
+});

package/src/Segmented.tsx

@@ -0,0 +1,75 @@
+import { useState, type ReactNode } from 'react';
+import { Pressable, View, Text, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface SegmentedOption<V extends string = string> {
+  value: V;
+  label: ReactNode;
+  isDisabled?: boolean;
+}
+
+export interface SegmentedProps<V extends string = string> extends ViewProps {
+  options: SegmentedOption<V>[];
+  value?: V;
+  defaultValue?: V;
+  onChange?: (value: V) => void;
+  size?: 'sm' | 'md' | 'lg';
+  isDisabled?: boolean;
+}
+
+export function Segmented<V extends string = string>(props: SegmentedProps<V>) {
+  const { options, value: valueProp, defaultValue, onChange, size = 'md', isDisabled, style, ...rest } = props;
+  const theme = useTheme();
+  const [internal, setInternal] = useState<V>((defaultValue ?? options[0]?.value) as V);
+  const current = valueProp ?? internal;
+  const padY = size === 'sm' ? 4 : size === 'lg' ? 10 : 6;
+  const padX = size === 'sm' ? 10 : size === 'lg' ? 16 : 12;
+  const fontSize = size === 'sm' ? 12 : size === 'lg' ? 15 : 14;
+
+  return (
+    <View
+      accessibilityRole="radiogroup"
+      style={[
+        {
+          flexDirection: 'row',
+          backgroundColor: theme.colors.intent.neutral.subtle,
+          borderRadius: Number(theme.radii.md),
+          padding: 4,
+          alignSelf: 'flex-start',
+          opacity: isDisabled ? 0.6 : 1,
+        },
+        style,
+      ]}
+      {...rest}
+    >
+      {options.map((opt) => {
+        const active = opt.value === current;
+        const disabled = isDisabled || opt.isDisabled;
+        return (
+          <Pressable
+            key={opt.value}
+            accessibilityRole="radio"
+            accessibilityState={{ selected: active, disabled }}
+            disabled={disabled}
+            onPress={() => {
+              if (disabled) return;
+              if (valueProp === undefined) setInternal(opt.value);
+              onChange?.(opt.value);
+            }}
+            style={{
+              paddingHorizontal: padX,
+              paddingVertical: padY,
+              borderRadius: Number(theme.radii.sm),
+              backgroundColor: active ? theme.colors.surfaceElevated : 'transparent',
+              marginHorizontal: 2,
+            }}
+          >
+            <Text style={{ color: active ? theme.colors.fg : theme.colors.fgMuted, fontSize, fontWeight: '500' }}>
+              {opt.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}