@elvora/react-native 1.0.0-rc.1

package/src/Descriptions.tsx

@@ -0,0 +1,98 @@
+import { type ReactNode } from 'react';
+import { View, Text, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface DescriptionItem {
+  key: string;
+  label: ReactNode;
+  children: ReactNode;
+  span?: number;
+}
+
+export interface DescriptionsProps extends Omit<ViewProps, 'children'> {
+  items: DescriptionItem[];
+  title?: ReactNode;
+  layout?: 'horizontal' | 'vertical';
+  bordered?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export function Descriptions(props: DescriptionsProps) {
+  const { items, title, layout = 'horizontal', bordered, size = 'md', style, ...rest } = props;
+  const theme = useTheme();
+  const cellPadding = size === 'sm' ? 8 : size === 'lg' ? 16 : 12;
+  const borderColor = theme.colors.border;
+
+  return (
+    <View style={style} {...rest}>
+      {title ? (
+        <Text style={{ color: theme.colors.fg, fontWeight: '600', marginBottom: 8 }}>
+          {typeof title === 'string' ? title : null}
+        </Text>
+      ) : null}
+      <View
+        style={{
+          borderWidth: bordered ? 1 : 0,
+          borderColor,
+          borderRadius: bordered ? 8 : 0,
+          overflow: 'hidden',
+        }}
+      >
+        {items.map((item, idx) => {
+          if (layout === 'horizontal') {
+            return (
+              <View
+                key={item.key}
+                style={{
+                  flexDirection: 'row',
+                  borderTopWidth: bordered && idx > 0 ? 1 : 0,
+                  borderTopColor: borderColor,
+                }}
+              >
+                <View
+                  style={{
+                    padding: cellPadding,
+                    backgroundColor: bordered ? theme.colors.intent.neutral.subtle : undefined,
+                    borderRightWidth: bordered ? 1 : 0,
+                    borderRightColor: borderColor,
+                    minWidth: 120,
+                  }}
+                >
+                  <Text style={{ color: theme.colors.fg, fontWeight: '500' }}>
+                    {typeof item.label === 'string' ? item.label : null}
+                  </Text>
+                </View>
+                <View style={{ flex: 1, padding: cellPadding }}>
+                  {typeof item.children === 'string' || typeof item.children === 'number' ? (
+                    <Text style={{ color: theme.colors.fg }}>{String(item.children)}</Text>
+                  ) : (
+                    item.children
+                  )}
+                </View>
+              </View>
+            );
+          }
+          return (
+            <View
+              key={item.key}
+              style={{
+                padding: cellPadding,
+                borderTopWidth: bordered && idx > 0 ? 1 : 0,
+                borderTopColor: borderColor,
+              }}
+            >
+              <Text style={{ color: theme.colors.fgSubtle, fontWeight: '500', marginBottom: 4 }}>
+                {typeof item.label === 'string' ? item.label : null}
+              </Text>
+              {typeof item.children === 'string' || typeof item.children === 'number' ? (
+                <Text style={{ color: theme.colors.fg }}>{String(item.children)}</Text>
+              ) : (
+                item.children
+              )}
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+}

package/src/Divider.tsx

@@ -0,0 +1,32 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import type { Orientation } from '@elvora/core';
+import { useTheme } from './ElvoraProvider';
+
+export interface DividerProps {
+  orientation?: Orientation;
+  thickness?: number;
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Visual separator for React Native. */
+export const Divider = forwardRef<View, DividerProps>(function Divider(props, ref) {
+  const { orientation = 'horizontal', thickness = 1, children, style } = props;
+  const theme = useTheme();
+
+  if (children) {
+    return (
+      <View ref={ref} style={[{ flexDirection: 'row', alignItems: 'center', gap: 12 }, style]}>
+        <View style={{ flex: 1, height: thickness, backgroundColor: theme.colors.border }} />
+        <Text style={{ color: theme.colors.fgMuted, fontSize: 13 }}>{children}</Text>
+        <View style={{ flex: 1, height: thickness, backgroundColor: theme.colors.border }} />
+      </View>
+    );
+  }
+
+  if (orientation === 'vertical') {
+    return <View ref={ref} accessibilityRole="none" style={[{ width: thickness, alignSelf: 'stretch', backgroundColor: theme.colors.border }, style]} />;
+  }
+  return <View ref={ref} accessibilityRole="none" style={[{ height: thickness, alignSelf: 'stretch', backgroundColor: theme.colors.border }, style]} />;
+});

package/src/Drawer.tsx

@@ -0,0 +1,103 @@
+import { forwardRef, type ReactNode } from 'react';
+import { Modal as RNModal, Pressable, View, Text, type ViewProps, type ViewStyle } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+import { IconButton } from './IconButton';
+import { Icon } from './Icon';
+
+export interface DrawerProps extends Omit<ViewProps, 'children'> {
+  isOpen: boolean;
+  onClose: () => void;
+  placement?: 'left' | 'right' | 'top' | 'bottom';
+  size?: number | string;
+  title?: ReactNode;
+  children?: ReactNode;
+  footer?: ReactNode;
+  showCloseButton?: boolean;
+  closeOnOverlayPress?: boolean;
+  closeLabel?: string;
+}
+
+/** Drawer — edge-anchored overlay panel for RN. */
+export const Drawer = forwardRef<View, DrawerProps>(function Drawer(props, ref) {
+  const {
+    isOpen,
+    onClose,
+    placement = 'right',
+    size = 320,
+    title,
+    children,
+    footer,
+    showCloseButton = true,
+    closeOnOverlayPress = true,
+    closeLabel = 'Close',
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const horizontal = placement === 'left' || placement === 'right';
+  const panelStyle: ViewStyle = {
+    backgroundColor: theme.colors.surfaceElevated,
+    width: horizontal ? size : '100%',
+    height: horizontal ? '100%' : size,
+  } as ViewStyle;
+  const overlayAlign: ViewStyle =
+    placement === 'right'
+      ? { alignItems: 'flex-end' }
+      : placement === 'left'
+        ? { alignItems: 'flex-start' }
+        : placement === 'bottom'
+          ? { justifyContent: 'flex-end' }
+          : { justifyContent: 'flex-start' };
+
+  return (
+    <RNModal visible={isOpen} transparent animationType="slide" onRequestClose={onClose} accessibilityViewIsModal>
+      <Pressable
+        onPress={closeOnOverlayPress ? onClose : undefined}
+        style={[{ flex: 1, backgroundColor: 'rgba(0,0,0,0.45)' }, overlayAlign]}
+      >
+        <Pressable onPress={(e) => e.stopPropagation()} style={{ flex: horizontal ? undefined : 0 }}>
+          <View ref={ref} accessibilityViewIsModal style={[panelStyle, 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, flex: 1 }}>{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>
+  );
+});

package/src/Dropdown.tsx

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+import { Menu, type MenuItem } from './Menu';
+
+export interface DropdownItem extends MenuItem {}
+
+export interface DropdownProps {
+  trigger: ReactNode;
+  items: DropdownItem[];
+  onSelect?: (value: string) => void;
+}
+
+/** Dropdown — alias for Menu on RN where both use a modal sheet. */
+export function Dropdown(props: DropdownProps) {
+  return <Menu {...props} />;
+}

package/src/ElvoraProvider.tsx

@@ -0,0 +1,31 @@
+import { createContext, useContext, useMemo, type ReactNode } from 'react';
+import type { ElvoraTheme, Direction } from '@elvora/core';
+import { defaultTheme } from '@elvora/themes';
+
+interface ElvoraContextValue {
+  theme: ElvoraTheme;
+  direction: Direction;
+}
+
+const ElvoraContext = createContext<ElvoraContextValue | null>(null);
+
+export interface ElvoraProviderProps {
+  theme?: ElvoraTheme;
+  direction?: Direction;
+  children: ReactNode;
+}
+
+export function ElvoraProvider({ theme = defaultTheme, direction = 'ltr', children }: ElvoraProviderProps) {
+  const value = useMemo<ElvoraContextValue>(() => ({ theme, direction }), [theme, direction]);
+  return <ElvoraContext.Provider value={value}>{children}</ElvoraContext.Provider>;
+}
+
+export function useElvoraContext(): ElvoraContextValue {
+  const ctx = useContext(ElvoraContext);
+  if (!ctx) return { theme: defaultTheme, direction: 'ltr' };
+  return ctx;
+}
+
+export function useTheme(): ElvoraTheme {
+  return useElvoraContext().theme;
+}

package/src/Empty.tsx

@@ -0,0 +1,34 @@
+import { forwardRef, type ReactNode } from 'react';
+import { View, Text, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+import { Icon } from './Icon';
+
+export interface EmptyProps extends ViewProps {
+  title?: ReactNode;
+  description?: ReactNode;
+  icon?: ReactNode;
+  action?: ReactNode;
+}
+
+/** Empty — placeholder for empty/no-data states. */
+export const Empty = forwardRef<View, EmptyProps>(function Empty(props, ref) {
+  const { title = 'No data', description, icon, action, style, ...rest } = props;
+  const theme = useTheme();
+  return (
+    <View
+      ref={ref}
+      style={[
+        { alignItems: 'center', justifyContent: 'center', paddingVertical: 40, paddingHorizontal: 16, gap: 12 },
+        style,
+      ]}
+      {...rest}
+    >
+      <View>{icon ?? <Icon name="search" size={48} color={theme.colors.fgSubtle} />}</View>
+      {title ? <Text style={{ color: theme.colors.fg, fontSize: 16, fontWeight: '600' }}>{title}</Text> : null}
+      {description ? (
+        <Text style={{ color: theme.colors.fgMuted, fontSize: 14, textAlign: 'center' }}>{description}</Text>
+      ) : null}
+      {action}
+    </View>
+  );
+});

package/src/FloatButton.tsx

@@ -0,0 +1,78 @@
+import type { ReactNode } from 'react';
+import { Pressable, Text, type ViewStyle } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface FloatButtonProps {
+  icon?: ReactNode;
+  label?: string;
+  size?: number;
+  right?: number;
+  bottom?: number;
+  tone?: 'primary' | 'neutral' | 'danger' | 'success';
+  extended?: boolean;
+  onPress?: () => void;
+  isDisabled?: boolean;
+  accessibilityLabel?: string;
+  style?: ViewStyle;
+}
+
+export function FloatButton(props: FloatButtonProps) {
+  const {
+    icon,
+    label,
+    size = 56,
+    right = 24,
+    bottom = 24,
+    tone = 'primary',
+    extended,
+    onPress,
+    isDisabled,
+    accessibilityLabel,
+    style,
+  } = props;
+  const theme = useTheme();
+  const intent =
+    tone === 'neutral'
+      ? theme.colors.intent.neutral
+      : tone === 'danger'
+        ? theme.colors.intent.danger
+        : tone === 'success'
+          ? theme.colors.intent.success
+          : theme.colors.intent.primary;
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? label}
+      disabled={isDisabled}
+      onPress={onPress}
+      style={({ pressed }) => [
+        {
+          position: 'absolute',
+          right,
+          bottom,
+          height: size,
+          minWidth: size,
+          paddingHorizontal: extended ? 20 : 0,
+          borderRadius: extended ? size / 2 : size / 2,
+          backgroundColor: intent.solid,
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDirection: 'row',
+          opacity: isDisabled ? 0.6 : pressed ? 0.85 : 1,
+          gap: 8,
+          shadowColor: '#000',
+          shadowOpacity: 0.25,
+          shadowOffset: { width: 0, height: 4 },
+          shadowRadius: 8,
+          elevation: 6,
+        },
+        style,
+      ]}
+    >
+      {icon}
+      {extended && label ? (
+        <Text style={{ color: intent.solidFg, fontSize: 14, fontWeight: '500' }}>{label}</Text>
+      ) : null}
+    </Pressable>
+  );
+}

package/src/Form.tsx

@@ -0,0 +1,119 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+import { View, Text, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+import { Label } from './Label';
+
+type FieldErrors = Record<string, string | undefined>;
+
+interface FormContextValue {
+  layout: 'vertical' | 'horizontal';
+  labelWidth?: number;
+  errors: FieldErrors;
+  setFieldError: (name: string, error: string | undefined) => void;
+}
+
+const FormContext = createContext<FormContextValue | null>(null);
+
+function useFormContext(): FormContextValue {
+  return (
+    useContext(FormContext) ?? {
+      layout: 'vertical',
+      labelWidth: undefined,
+      errors: {},
+      setFieldError: () => {},
+    }
+  );
+}
+
+export interface FormProps extends ViewProps {
+  layout?: 'vertical' | 'horizontal';
+  labelWidth?: number;
+  children?: ReactNode;
+}
+
+/** Form — RN container that owns shared layout + per-field error state. */
+export function Form(props: FormProps) {
+  const { layout = 'vertical', labelWidth, children, ...rest } = props;
+  const [errors, setErrors] = useState<FieldErrors>({});
+  const setFieldError = useCallback((name: string, error: string | undefined) => {
+    setErrors((prev) => {
+      if (prev[name] === error) return prev;
+      const next = { ...prev };
+      if (error === undefined) delete next[name];
+      else next[name] = error;
+      return next;
+    });
+  }, []);
+  const ctx = useMemo<FormContextValue>(
+    () => ({ layout, labelWidth, errors, setFieldError }),
+    [layout, labelWidth, errors, setFieldError],
+  );
+  return (
+    <FormContext.Provider value={ctx}>
+      <View {...rest}>{children}</View>
+    </FormContext.Provider>
+  );
+}
+
+export interface FormFieldProps extends ViewProps {
+  name: string;
+  label?: ReactNode;
+  hint?: ReactNode;
+  error?: string;
+  isRequired?: boolean;
+  children?: ReactNode;
+}
+
+export function FormField(props: FormFieldProps) {
+  const { name, label, hint, error, isRequired, children, style, ...rest } = props;
+  const ctx = useFormContext();
+  const theme = useTheme();
+  const displayedError = error ?? ctx.errors[name];
+  const isHorizontal = ctx.layout === 'horizontal';
+
+  return (
+    <View
+      style={[
+        {
+          flexDirection: isHorizontal ? 'row' : 'column',
+          marginBottom: 16,
+          gap: isHorizontal ? 12 : 6,
+        },
+        style,
+      ]}
+      {...rest}
+    >
+      {label ? (
+        <Label isRequired={isRequired} style={isHorizontal ? { width: ctx.labelWidth ?? 120, paddingTop: 8 } : undefined}>
+          {label}
+        </Label>
+      ) : null}
+      <View style={{ flex: 1 }}>
+        {children}
+        {hint && !displayedError ? (
+          <Text style={{ marginTop: 4, fontSize: 12, color: theme.colors.fgMuted }}>{hint}</Text>
+        ) : null}
+        {displayedError ? (
+          <Text accessibilityRole="alert" style={{ marginTop: 4, fontSize: 12, color: theme.colors.intent.danger.fg }}>
+            {displayedError}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+export function useFormField(name: string): { error: string | undefined; setError: (e: string | undefined) => void } {
+  const ctx = useFormContext();
+  return {
+    error: ctx.errors[name],
+    setError: (e) => ctx.setFieldError(name, e),
+  };
+}

package/src/Grid.tsx

@@ -0,0 +1,68 @@
+import { forwardRef, type ReactElement, type ReactNode } from 'react';
+import { View, type ViewProps, type ViewStyle } from 'react-native';
+
+export interface GridProps extends ViewProps {
+  /** Number of columns. */
+  columns?: number;
+  /** Gap between cells. */
+  gap?: number;
+  children?: ReactNode;
+}
+
+export interface GridItemProps extends ViewProps {
+  /** Number of columns this item spans. */
+  colSpan?: number;
+  children?: ReactNode;
+}
+
+/**
+ * Grid — simulates CSS Grid by laying out children in equal-width columns via
+ * flexbox rows. Pure React Native (no native grid module needed).
+ */
+export const Grid = forwardRef<View, GridProps>(function Grid(props, ref) {
+  const { columns = 12, gap = 8, style, children, ...rest } = props;
+  const childArray = Array.isArray(children) ? children : children == null ? [] : [children];
+  const rows: ReactElement[][] = [];
+  let currentRow: ReactElement[] = [];
+  let usedCols = 0;
+  for (const child of childArray) {
+    if (!child) continue;
+    const span = (((child as ReactElement).props as Record<string, unknown> | undefined)?.colSpan as number) ?? 1;
+    if (usedCols + span > columns) {
+      rows.push(currentRow);
+      currentRow = [];
+      usedCols = 0;
+    }
+    currentRow.push(child as ReactElement);
+    usedCols += span;
+  }
+  if (currentRow.length) rows.push(currentRow);
+  return (
+    <View ref={ref} style={[{ gap }, style]} {...rest}>
+      {rows.map((row, i) => (
+        <View key={i} style={{ flexDirection: 'row', gap }}>
+          {row.map((child, j) => {
+            const span = (((child.props as Record<string, unknown>)?.colSpan as number) ?? 1);
+            const flexStyle: ViewStyle = { flex: span };
+            return (
+              <View key={j} style={flexStyle}>
+                {child}
+              </View>
+            );
+          })}
+        </View>
+      ))}
+    </View>
+  );
+});
+
+/** GridItem — the colSpan is read by the parent Grid. */
+export const GridItem = forwardRef<View, GridItemProps>(function GridItem(props, ref) {
+  const { colSpan: _colSpan, style, children, ...rest } = props;
+  void _colSpan;
+  return (
+    <View ref={ref} style={style} {...rest}>
+      {children}
+    </View>
+  );
+});

package/src/Icon.tsx

@@ -0,0 +1,49 @@
+import { forwardRef } from 'react';
+import { getIcon, icons, type IconName } from '@elvora/icons';
+import Svg, { Path } from 'react-native-svg';
+
+export interface IconProps {
+  /** Icon name from `@elvora/icons`. */
+  name: IconName;
+  /** Pixel size for both width/height. Defaults to 16. */
+  size?: number;
+  /** Stroke or fill color. Defaults to `currentColor`-equivalent (black). */
+  color?: string;
+  /** Accessible label. When omitted, the icon is treated as decorative. */
+  label?: string;
+}
+
+/**
+ * Renders an icon from the Elvora icon set using `react-native-svg`. Install
+ * `react-native-svg` in your app for this to work.
+ */
+export const Icon = forwardRef<unknown, IconProps>(function Icon(props, _ref) {
+  const { name, size = 16, color = '#000', label } = props;
+  if (!(name in icons)) {
+    if (typeof console !== 'undefined') {
+      console.warn(`[elvora] Icon "${String(name)}" is not registered.`);
+    }
+    return null;
+  }
+  const def = getIcon(name);
+  const a11y = label
+    ? { accessible: true, accessibilityRole: 'image' as const, accessibilityLabel: label }
+    : { accessible: false, accessibilityElementsHidden: true, importantForAccessibility: 'no-hide-descendants' as const };
+
+  if (def.stroke) {
+    return (
+      <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...a11y}>
+        {def.d2 ? (
+          <Path d={def.d2} stroke={color} strokeWidth={def.strokeWidth ?? 2} strokeLinecap="round" strokeLinejoin="round" />
+        ) : null}
+        <Path d={def.d} stroke={color} strokeWidth={def.strokeWidth ?? 2} strokeLinecap="round" strokeLinejoin="round" />
+      </Svg>
+    );
+  }
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill={color} {...a11y}>
+      {def.d2 ? <Path d={def.d2} /> : null}
+      <Path d={def.d} />
+    </Svg>
+  );
+});

package/src/IconButton.tsx

@@ -0,0 +1,28 @@
+import { forwardRef, type ReactNode } from 'react';
+import { type View } from 'react-native';
+import type { ElvoraSize } from '@elvora/core';
+import { Button, type ButtonProps } from './Button';
+
+export interface IconButtonProps extends Omit<ButtonProps, 'children' | 'leftIcon' | 'rightIcon'> {
+  icon: ReactNode;
+  /** Required: announce icon-only button to screen readers. */
+  accessibilityLabel: string;
+}
+
+const sizePx: Record<ElvoraSize, number> = { xs: 28, sm: 36, md: 44, lg: 52, xl: 60 };
+
+export const IconButton = forwardRef<View, IconButtonProps>(function IconButton(props, ref) {
+  const { icon, size = 'md', accessibilityLabel, style, ...rest } = props;
+  const px = sizePx[size];
+  return (
+    <Button
+      ref={ref}
+      size={size}
+      accessibilityLabel={accessibilityLabel}
+      style={[{ width: px, minHeight: px, paddingHorizontal: 0 }, style]}
+      {...rest}
+    >
+      {icon}
+    </Button>
+  );
+});