@elvora/react-native 1.0.0-rc.1

package/src/Select.tsx

@@ -0,0 +1,146 @@
+import { forwardRef, useState } from 'react';
+import {
+  FlatList,
+  Modal,
+  Pressable,
+  Text,
+  View,
+  type ListRenderItem,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import { defaultInputProps, type InputOwnProps } from '@elvora/core';
+import { useControllableState } from '@elvora/core/react';
+import { useTheme } from './ElvoraProvider';
+import { Icon } from './Icon';
+
+export interface SelectOption {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+export interface SelectProps extends InputOwnProps {
+  options: SelectOption[];
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const sizeMap = {
+  xs: { padX: 8, padY: 6, font: 12, height: 28 },
+  sm: { padX: 10, padY: 8, font: 13, height: 36 },
+  md: { padX: 12, padY: 10, font: 14, height: 44 },
+  lg: { padX: 14, padY: 12, font: 16, height: 52 },
+  xl: { padX: 16, padY: 14, font: 18, height: 60 },
+};
+
+/**
+ * React Native Select. Opens a modal sheet with the option list — the most
+ * platform-appropriate variant for cross-platform consistency.
+ */
+export const Select = forwardRef<View, SelectProps>(function Select(props, ref) {
+  const {
+    options,
+    value,
+    defaultValue,
+    onChange,
+    placeholder = 'Select…',
+    size = defaultInputProps.size,
+    status = defaultInputProps.status,
+    isDisabled = defaultInputProps.isDisabled,
+    isInvalid = defaultInputProps.isInvalid,
+    style,
+  } = props;
+  const theme = useTheme();
+  const [selected, setSelected] = useControllableState({ value, defaultValue, onChange });
+  const [open, setOpen] = useState(false);
+  const dims = sizeMap[size];
+
+  const invalid = isInvalid || status === 'error';
+  const current = options.find((o) => o.value === selected);
+
+  const renderItem: ListRenderItem<SelectOption> = ({ item }) => {
+    const isActive = item.value === selected;
+    return (
+      <Pressable
+        accessibilityRole="menuitem"
+        accessibilityState={{ selected: isActive, disabled: item.disabled }}
+        disabled={item.disabled}
+        onPress={() => {
+          setSelected(item.value);
+          setOpen(false);
+        }}
+        style={({ pressed }) => ({
+          paddingHorizontal: 16,
+          paddingVertical: 12,
+          backgroundColor: pressed ? theme.colors.intent.neutral.subtle : 'transparent',
+          opacity: item.disabled ? 0.5 : 1,
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        })}
+      >
+        <Text style={{ color: theme.colors.fg, fontSize: 14 }}>{item.label}</Text>
+        {isActive ? <Icon name="check" size={16} color={theme.colors.intent.primary.solid} /> : null}
+      </Pressable>
+    );
+  };
+
+  return (
+    <View ref={ref} style={style}>
+      <Pressable
+        accessibilityRole="combobox"
+        accessibilityState={{ disabled: isDisabled, expanded: open }}
+        accessibilityValue={{ text: current?.label ?? placeholder }}
+        disabled={isDisabled}
+        onPress={() => setOpen(true)}
+        style={{
+          minHeight: dims.height,
+          paddingHorizontal: dims.padX,
+          paddingVertical: dims.padY,
+          borderRadius: Number(theme.radii.md),
+          borderWidth: 1,
+          borderColor: invalid ? theme.colors.intent.danger.border : theme.colors.border,
+          backgroundColor: theme.colors.surfaceElevated,
+          opacity: isDisabled ? 0.6 : 1,
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        }}
+      >
+        <Text style={{ color: current ? theme.colors.fg : theme.colors.fgMuted, fontSize: dims.font }}>
+          {current?.label ?? placeholder}
+        </Text>
+        <Icon name="chevronDown" size={16} color={theme.colors.fgMuted} />
+      </Pressable>
+
+      <Modal visible={open} transparent animationType="fade" onRequestClose={() => setOpen(false)}>
+        <Pressable
+          onPress={() => setOpen(false)}
+          style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.4)', justifyContent: 'flex-end' }}
+        >
+          <Pressable
+            onPress={(e) => e.stopPropagation()}
+            style={{
+              backgroundColor: theme.colors.surfaceElevated,
+              borderTopLeftRadius: 16,
+              borderTopRightRadius: 16,
+              maxHeight: '60%',
+              paddingVertical: 8,
+            }}
+          >
+            <FlatList
+              data={options}
+              keyExtractor={(item) => item.value}
+              renderItem={renderItem}
+              ItemSeparatorComponent={() => <View style={{ height: 1, backgroundColor: theme.colors.border }} />}
+            />
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </View>
+  );
+});

package/src/Skeleton.tsx

@@ -0,0 +1,49 @@
+import { forwardRef, useEffect, useRef } from 'react';
+import { Animated, View, type ViewProps, type ViewStyle } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface SkeletonProps extends ViewProps {
+  width?: number | string;
+  height?: number | string;
+  rounded?: number;
+  /** Animate a pulse effect. Default true. */
+  animated?: boolean;
+}
+
+/** Skeleton — placeholder loading block for RN. */
+export const Skeleton = forwardRef<View, SkeletonProps>(function Skeleton(props, ref) {
+  const { width = '100%', height = 16, rounded, animated = true, style, ...rest } = props;
+  const theme = useTheme();
+  const opacity = useRef(new Animated.Value(0.6)).current;
+
+  useEffect(() => {
+    if (!animated) return;
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, { toValue: 1, duration: 700, useNativeDriver: true }),
+        Animated.timing(opacity, { toValue: 0.6, duration: 700, useNativeDriver: true }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [animated, opacity]);
+
+  const base: ViewStyle = {
+    width: width as ViewStyle['width'],
+    height: height as ViewStyle['height'],
+    backgroundColor: theme.colors.intent.neutral.subtle,
+    borderRadius: rounded ?? theme.radii.sm,
+  };
+
+  if (!animated) {
+    return <View ref={ref} accessibilityLabel="Loading" style={[base, style]} {...rest} />;
+  }
+  return (
+    <Animated.View
+      ref={ref as React.Ref<typeof Animated.View> & React.Ref<View>}
+      accessibilityLabel="Loading"
+      style={[base, { opacity }, style]}
+      {...rest}
+    />
+  );
+});

package/src/Slider.tsx

@@ -0,0 +1,122 @@
+import { useRef, useState } from 'react';
+import { PanResponder, View, type LayoutChangeEvent, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface SliderProps extends Omit<ViewProps, 'onChange'> {
+  value?: number;
+  defaultValue?: number;
+  onChange?: (value: number) => void;
+  onChangeEnd?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  isDisabled?: boolean;
+}
+
+function snap(value: number, min: number, max: number, step: number): number {
+  const clamped = Math.min(Math.max(value, min), max);
+  if (step <= 0) return clamped;
+  const steps = Math.round((clamped - min) / step);
+  return Math.min(Math.max(min + steps * step, min), max);
+}
+
+export function Slider(props: SliderProps) {
+  const {
+    value: valueProp,
+    defaultValue = 0,
+    onChange,
+    onChangeEnd,
+    min = 0,
+    max = 100,
+    step = 1,
+    isDisabled,
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const [width, setWidth] = useState(1);
+  const [internal, setInternal] = useState<number>(defaultValue);
+  const value = valueProp ?? internal;
+  const trackOriginRef = useRef<number>(0);
+
+  const commit = (next: number) => {
+    const snapped = snap(next, min, max, step);
+    if (valueProp === undefined) setInternal(snapped);
+    onChange?.(snapped);
+    return snapped;
+  };
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !isDisabled,
+      onMoveShouldSetPanResponder: () => !isDisabled,
+      onPanResponderGrant: (evt) => {
+        const x = evt.nativeEvent.locationX;
+        commit(min + (x / width) * (max - min));
+      },
+      onPanResponderMove: (_, gesture) => {
+        const x = Math.max(0, Math.min(width, gesture.moveX - trackOriginRef.current));
+        commit(min + (x / width) * (max - min));
+      },
+      onPanResponderRelease: () => {
+        onChangeEnd?.(value);
+      },
+    }),
+  ).current;
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    setWidth(Math.max(1, e.nativeEvent.layout.width));
+    e.target.measure?.((x) => {
+      trackOriginRef.current = x;
+    });
+  };
+
+  const percent = ((value - min) / (max - min)) * 100;
+
+  return (
+    <View
+      accessible
+      accessibilityRole="adjustable"
+      accessibilityValue={{ min, max, now: value }}
+      style={[{ paddingVertical: 12, opacity: isDisabled ? 0.6 : 1 }, style]}
+      {...rest}
+    >
+      <View
+        onLayout={onLayout}
+        {...panResponder.panHandlers}
+        style={{
+          height: 4,
+          borderRadius: 999,
+          backgroundColor: theme.colors.intent.neutral.subtle,
+          justifyContent: 'center',
+        }}
+      >
+        <View
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            bottom: 0,
+            width: `${percent}%`,
+            backgroundColor: theme.colors.intent.primary.solid,
+            borderRadius: 999,
+          }}
+        />
+        <View
+          style={{
+            position: 'absolute',
+            left: `${percent}%`,
+            transform: [{ translateX: -9 }, { translateY: 0 }],
+            width: 18,
+            height: 18,
+            borderRadius: 9,
+            backgroundColor: theme.colors.surfaceElevated,
+            borderWidth: 2,
+            borderColor: theme.colors.intent.primary.solid,
+            top: -7,
+          }}
+        />
+      </View>
+    </View>
+  );
+}

package/src/SpeedDial.tsx

@@ -0,0 +1,87 @@
+import { useState, type ReactNode } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { FloatButton } from './FloatButton';
+import { useTheme } from './ElvoraProvider';
+
+export interface SpeedDialAction {
+  key: string;
+  icon: ReactNode;
+  label: string;
+  onPress?: () => void;
+  isDisabled?: boolean;
+}
+
+export interface SpeedDialProps {
+  icon: ReactNode;
+  actions: SpeedDialAction[];
+  right?: number;
+  bottom?: number;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  accessibilityLabel?: string;
+}
+
+export function SpeedDial(props: SpeedDialProps) {
+  const {
+    icon,
+    actions,
+    right = 24,
+    bottom = 24,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    accessibilityLabel,
+  } = props;
+  const theme = useTheme();
+  const [internal, setInternal] = useState(defaultOpen);
+  const open = openProp ?? internal;
+  const setOpen = (next: boolean) => {
+    if (openProp === undefined) setInternal(next);
+    onOpenChange?.(next);
+  };
+
+  return (
+    <View accessibilityLabel={accessibilityLabel}>
+      {open
+        ? actions.map((a, idx) => (
+            <Pressable
+              key={a.key}
+              accessibilityRole="button"
+              accessibilityLabel={a.label}
+              disabled={a.isDisabled}
+              onPress={() => {
+                a.onPress?.();
+                setOpen(false);
+              }}
+              style={({ pressed }) => ({
+                position: 'absolute',
+                right,
+                bottom: bottom + (idx + 1) * 60,
+                paddingHorizontal: 14,
+                height: 44,
+                borderRadius: 22,
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+                backgroundColor: theme.colors.surfaceElevated,
+                borderColor: theme.colors.border,
+                borderWidth: 1,
+                opacity: a.isDisabled ? 0.5 : pressed ? 0.85 : 1,
+              })}
+            >
+              {a.icon}
+              <Text style={{ color: theme.colors.fg, fontWeight: '500' }}>{a.label}</Text>
+            </Pressable>
+          ))
+        : null}
+      <FloatButton
+        icon={icon}
+        right={right}
+        bottom={bottom}
+        accessibilityLabel={accessibilityLabel ?? 'Open actions'}
+        onPress={() => setOpen(!open)}
+      />
+    </View>
+  );
+}

package/src/Spinner.tsx

@@ -0,0 +1,29 @@
+import { forwardRef } from 'react';
+import { ActivityIndicator, View, type StyleProp, type ViewStyle } from 'react-native';
+import type { ElvoraSize } from '@elvora/core';
+
+export interface SpinnerProps {
+  size?: ElvoraSize | number;
+  color?: string;
+  /** Accessible label. */
+  label?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const sizePx: Record<ElvoraSize, number> = { xs: 12, sm: 14, md: 16, lg: 20, xl: 28 };
+
+export const Spinner = forwardRef<View, SpinnerProps>(function Spinner(props, ref) {
+  const { size = 'md', color = '#0072F5', label = 'Loading', style } = props;
+  const px = typeof size === 'number' ? size : sizePx[size];
+  return (
+    <View
+      ref={ref}
+      accessible
+      accessibilityRole="progressbar"
+      accessibilityLabel={label}
+      style={style}
+    >
+      <ActivityIndicator size={px <= 18 ? 'small' : 'large'} color={color} />
+    </View>
+  );
+});

package/src/Splitter.tsx

@@ -0,0 +1,91 @@
+import { useRef, useState, type ReactNode } from 'react';
+import { PanResponder, View, useWindowDimensions, type ViewStyle, type LayoutChangeEvent } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface SplitterProps {
+  first: ReactNode;
+  second: ReactNode;
+  direction?: 'horizontal' | 'vertical';
+  /** Controlled split (0..1). */
+  split?: number;
+  defaultSplit?: number;
+  onChange?: (split: number) => void;
+  minRatio?: number;
+  maxRatio?: number;
+  handleSize?: number;
+  style?: ViewStyle;
+}
+
+/**
+ * Splitter — drag-to-resize layout for two panes. Horizontal direction stacks
+ * left/right; vertical stacks top/bottom.
+ */
+export function Splitter(props: SplitterProps) {
+  const {
+    first,
+    second,
+    direction = 'horizontal',
+    split: splitProp,
+    defaultSplit = 0.5,
+    onChange,
+    minRatio = 0.1,
+    maxRatio = 0.9,
+    handleSize = 8,
+    style,
+  } = props;
+  const theme = useTheme();
+  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
+  const [internal, setInternal] = useState(defaultSplit);
+  const split = splitProp ?? internal;
+  const [size, setSize] = useState({ width: windowWidth, height: windowHeight });
+  const startSplit = useRef(split);
+
+  const responder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => {
+        startSplit.current = split;
+      },
+      onPanResponderMove: (_e, gesture) => {
+        const total = direction === 'horizontal' ? size.width : size.height;
+        if (!total) return;
+        const delta = direction === 'horizontal' ? gesture.dx : gesture.dy;
+        const next = Math.min(maxRatio, Math.max(minRatio, startSplit.current + delta / total));
+        if (splitProp === undefined) setInternal(next);
+        onChange?.(next);
+      },
+    }),
+  ).current;
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    setSize({ width, height });
+  };
+
+  const isHorizontal = direction === 'horizontal';
+
+  return (
+    <View
+      onLayout={onLayout}
+      style={[
+        { flexDirection: isHorizontal ? 'row' : 'column', flex: 1, overflow: 'hidden' },
+        style,
+      ]}
+    >
+      <View style={{ flexBasis: `${split * 100}%`, [isHorizontal ? 'height' : 'width']: '100%' } as ViewStyle}>
+        {first}
+      </View>
+      <View
+        {...responder.panHandlers}
+        accessibilityRole="adjustable"
+        style={{
+          width: isHorizontal ? handleSize : '100%',
+          height: isHorizontal ? '100%' : handleSize,
+          backgroundColor: theme.colors.border,
+        }}
+      />
+      <View style={{ flex: 1 }}>{second}</View>
+    </View>
+  );
+}

package/src/Stack.tsx

@@ -0,0 +1,38 @@
+import { forwardRef } from 'react';
+import { View, type ViewProps, type ViewStyle, type StyleProp, type FlexAlignType } from 'react-native';
+
+export interface StackProps extends ViewProps {
+  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+  gap?: number;
+  align?: FlexAlignType;
+  justify?: ViewStyle['justifyContent'];
+  wrap?: boolean;
+}
+
+/** Stack — flex container for RN. */
+export const Stack = forwardRef<View, StackProps>(function Stack(props, ref) {
+  const { direction = 'column', gap = 8, align, justify, wrap, style, children, ...rest } = props;
+  const composed: StyleProp<ViewStyle> = [
+    {
+      flexDirection: direction,
+      gap,
+      alignItems: align,
+      justifyContent: justify,
+      flexWrap: wrap ? 'wrap' : 'nowrap',
+    },
+    style,
+  ];
+  return (
+    <View ref={ref} style={composed} {...rest}>
+      {children}
+    </View>
+  );
+});
+
+export const HStack = forwardRef<View, Omit<StackProps, 'direction'>>(function HStack(props, ref) {
+  return <Stack ref={ref} direction="row" align="center" {...props} />;
+});
+
+export const VStack = forwardRef<View, Omit<StackProps, 'direction'>>(function VStack(props, ref) {
+  return <Stack ref={ref} direction="column" {...props} />;
+});

package/src/Statistic.tsx

@@ -0,0 +1,60 @@
+import { type ReactNode } from 'react';
+import { View, Text, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface StatisticProps extends ViewProps {
+  title?: ReactNode;
+  value: number | string;
+  precision?: number;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  groupSeparator?: boolean;
+  tone?: 'default' | 'success' | 'danger' | 'warning' | 'primary';
+}
+
+function formatValue(value: number | string, precision?: number, group?: boolean): string {
+  if (typeof value === 'string') return value;
+  if (typeof precision === 'number') {
+    return group ? value.toLocaleString(undefined, { minimumFractionDigits: precision, maximumFractionDigits: precision }) : value.toFixed(precision);
+  }
+  return group ? value.toLocaleString() : String(value);
+}
+
+export function Statistic(props: StatisticProps) {
+  const { title, value, precision, prefix, suffix, groupSeparator = true, tone = 'default', style, ...rest } = props;
+  const theme = useTheme();
+  const formatted = formatValue(value, precision, groupSeparator);
+  const toneColor =
+    tone === 'success'
+      ? theme.colors.intent.success.solid
+      : tone === 'danger'
+        ? theme.colors.intent.danger.solid
+        : tone === 'warning'
+          ? theme.colors.intent.warning.solid
+          : tone === 'primary'
+            ? theme.colors.intent.primary.solid
+            : theme.colors.fg;
+
+  return (
+    <View style={style} {...rest}>
+      {title ? (
+        <Text style={{ color: theme.colors.fgSubtle, fontSize: 14, marginBottom: 4 }}>
+          {typeof title === 'string' ? title : null}
+        </Text>
+      ) : null}
+      <View style={{ flexDirection: 'row', alignItems: 'baseline' }}>
+        {prefix ? (
+          <Text style={{ color: toneColor, fontSize: 16, marginRight: 4 }}>
+            {typeof prefix === 'string' || typeof prefix === 'number' ? String(prefix) : ''}
+          </Text>
+        ) : null}
+        <Text style={{ color: toneColor, fontSize: 28, fontWeight: '600' }}>{formatted}</Text>
+        {suffix ? (
+          <Text style={{ color: toneColor, fontSize: 16, marginLeft: 4 }}>
+            {typeof suffix === 'string' || typeof suffix === 'number' ? String(suffix) : ''}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+}