@elvora/react-native 1.0.0-rc.1

package/src/Cascader.tsx

@@ -0,0 +1,160 @@
+import { useMemo, useState, type ReactNode } from 'react';
+import { Modal, Pressable, ScrollView, View, Text, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface CascaderOption {
+  value: string;
+  label: ReactNode;
+  children?: CascaderOption[];
+  isDisabled?: boolean;
+}
+
+export interface CascaderProps extends Omit<ViewProps, 'onChange'> {
+  options: CascaderOption[];
+  value?: string[];
+  defaultValue?: string[];
+  onChange?: (value: string[], path: CascaderOption[]) => void;
+  placeholder?: string;
+  displaySeparator?: string;
+  isDisabled?: boolean;
+}
+
+function findPath(options: CascaderOption[], value: string[]): CascaderOption[] {
+  const path: CascaderOption[] = [];
+  let level = options;
+  for (const v of value) {
+    const found = level.find((o) => o.value === v);
+    if (!found) break;
+    path.push(found);
+    level = found.children ?? [];
+  }
+  return path;
+}
+
+export function Cascader(props: CascaderProps) {
+  const {
+    options,
+    value: valueProp,
+    defaultValue,
+    onChange,
+    placeholder = 'Please select',
+    displaySeparator = ' / ',
+    isDisabled,
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const [internal, setInternal] = useState<string[]>(defaultValue ?? []);
+  const value = valueProp ?? internal;
+  const [isOpen, setOpen] = useState(false);
+  const [activePath, setActivePath] = useState<string[]>(value);
+
+  const columns = useMemo(() => {
+    const cols: CascaderOption[][] = [options];
+    let level = options;
+    for (const v of activePath) {
+      const found = level.find((o) => o.value === v);
+      if (!found || !found.children?.length) break;
+      cols.push(found.children);
+      level = found.children;
+    }
+    return cols;
+  }, [options, activePath]);
+
+  const onSelectAtLevel = (level: number, opt: CascaderOption) => {
+    if (opt.isDisabled) return;
+    const nextPath = [...activePath.slice(0, level), opt.value];
+    setActivePath(nextPath);
+    if (!opt.children?.length) {
+      const fullPath = findPath(options, nextPath);
+      if (valueProp === undefined) setInternal(nextPath);
+      onChange?.(nextPath, fullPath);
+      setOpen(false);
+    }
+  };
+
+  const displayed = value.length > 0 ? findPath(options, value).map((o) => o.label).join(displaySeparator) : '';
+
+  return (
+    <View style={style} {...rest}>
+      <Pressable
+        accessibilityRole="button"
+        disabled={isDisabled}
+        onPress={() => {
+          setActivePath(value);
+          setOpen(true);
+        }}
+        style={({ pressed }) => ({
+          paddingHorizontal: 12,
+          paddingVertical: 8,
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+          borderRadius: Number(theme.radii.md),
+          backgroundColor: pressed ? theme.colors.intent.neutral.subtle : theme.colors.surfaceElevated,
+          opacity: isDisabled ? 0.6 : 1,
+        })}
+      >
+        <Text style={{ color: displayed ? theme.colors.fg : theme.colors.fgMuted, fontSize: 14 }}>
+          {displayed || placeholder}
+        </Text>
+      </Pressable>
+      <Modal transparent visible={isOpen} animationType="fade" onRequestClose={() => setOpen(false)}>
+        <Pressable
+          style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.4)' }}
+          onPress={() => setOpen(false)}
+        >
+          <Pressable
+            onPress={() => undefined}
+            style={{
+              backgroundColor: theme.colors.surfaceElevated,
+              borderRadius: Number(theme.radii.md),
+              flexDirection: 'row',
+              maxWidth: '95%',
+              maxHeight: 360,
+            }}
+          >
+            {columns.map((col, i) => (
+              <ScrollView
+                key={i}
+                style={{
+                  width: 160,
+                  borderRightWidth: i < columns.length - 1 ? 1 : 0,
+                  borderRightColor: theme.colors.border,
+                }}
+              >
+                {col.map((opt) => {
+                  const isActive = activePath[i] === opt.value;
+                  const hasChildren = !!opt.children?.length;
+                  return (
+                    <Pressable
+                      key={opt.value}
+                      disabled={opt.isDisabled}
+                      onPress={() => onSelectAtLevel(i, opt)}
+                      style={({ pressed }) => ({
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        paddingHorizontal: 12,
+                        paddingVertical: 8,
+                        backgroundColor: isActive
+                          ? theme.colors.intent.primary.subtle
+                          : pressed
+                            ? theme.colors.intent.neutral.subtle
+                            : 'transparent',
+                      })}
+                    >
+                      <Text style={{ color: opt.isDisabled ? theme.colors.fgSubtle : theme.colors.fg, fontSize: 13 }}>
+                        {opt.label}
+                      </Text>
+                      {hasChildren ? <Text style={{ color: theme.colors.fgMuted }}>›</Text> : null}
+                    </Pressable>
+                  );
+                })}
+              </ScrollView>
+            ))}
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </View>
+  );
+}

package/src/Checkbox.tsx

@@ -0,0 +1,85 @@
+import { forwardRef, 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';
+import { Icon } from './Icon';
+
+export interface CheckboxProps extends Omit<PressableProps, 'onPress' | 'children'> {
+  size?: 'sm' | 'md' | 'lg';
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isChecked?: boolean;
+  defaultChecked?: boolean;
+  isIndeterminate?: boolean;
+  onChange?: (checked: boolean) => void;
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+const sizeMap = {
+  sm: { box: 16, icon: 12, font: 13 },
+  md: { box: 20, icon: 14, font: 14 },
+  lg: { box: 24, icon: 16, font: 16 },
+};
+
+export const Checkbox = forwardRef<View, CheckboxProps>(function Checkbox(props, ref) {
+  const {
+    size = 'md',
+    isDisabled,
+    isInvalid,
+    isChecked,
+    defaultChecked = false,
+    isIndeterminate = false,
+    onChange,
+    children,
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const [checked, setChecked] = useControllableState({
+    value: isChecked,
+    defaultValue: defaultChecked,
+    onChange,
+  });
+  const dims = sizeMap[size];
+  const isActive = Boolean(checked) || isIndeterminate;
+
+  return (
+    <Pressable
+      ref={ref}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked: isIndeterminate ? 'mixed' : Boolean(checked), disabled: isDisabled }}
+      disabled={isDisabled}
+      onPress={() => setChecked(!checked)}
+      style={[
+        { flexDirection: 'row', alignItems: 'center', gap: 8, opacity: isDisabled ? 0.5 : 1 },
+        style,
+      ]}
+      {...rest}
+    >
+      <View
+        style={{
+          width: dims.box,
+          height: dims.box,
+          borderWidth: 1.5,
+          borderColor: isInvalid
+            ? theme.colors.intent.danger.border
+            : isActive
+              ? theme.colors.intent.primary.solid
+              : theme.colors.borderStrong,
+          borderRadius: 4,
+          backgroundColor: isActive ? theme.colors.intent.primary.solid : theme.colors.surfaceElevated,
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {isIndeterminate ? (
+          <Icon name="minus" size={dims.icon} color={theme.colors.intent.primary.solidFg} />
+        ) : checked ? (
+          <Icon name="check" size={dims.icon} color={theme.colors.intent.primary.solidFg} />
+        ) : null}
+      </View>
+      {children ? <Text style={{ color: theme.colors.fg, fontSize: dims.font }}>{children}</Text> : null}
+    </Pressable>
+  );
+});

package/src/ChipInput.tsx

@@ -0,0 +1,130 @@
+import { useCallback, useRef, useState } from 'react';
+import { TextInput, View, type NativeSyntheticEvent, type TextInputKeyPressEventData, type ViewStyle } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+import { Tag } from './Tag';
+
+export interface ChipInputProps {
+  value?: string[];
+  defaultValue?: string[];
+  onChange?: (chips: string[]) => void;
+  placeholder?: string;
+  validate?: (value: string) => boolean;
+  unique?: boolean;
+  isDisabled?: boolean;
+  maxChips?: number;
+  style?: ViewStyle;
+  accessibilityLabel?: string;
+}
+
+export function ChipInput(props: ChipInputProps) {
+  const {
+    value: valueProp,
+    defaultValue = [],
+    onChange,
+    placeholder,
+    validate,
+    unique = true,
+    isDisabled,
+    maxChips,
+    style,
+    accessibilityLabel,
+  } = props;
+  const theme = useTheme();
+  const [internal, setInternal] = useState<string[]>(defaultValue);
+  const value = valueProp ?? internal;
+  const [draft, setDraft] = useState('');
+  const inputRef = useRef<TextInput | null>(null);
+
+  const setChips = useCallback(
+    (next: string[]) => {
+      if (valueProp === undefined) setInternal(next);
+      onChange?.(next);
+    },
+    [valueProp, onChange],
+  );
+
+  const addChip = useCallback(
+    (raw: string) => {
+      const trimmed = raw.trim();
+      if (!trimmed) return;
+      if (validate && !validate(trimmed)) return;
+      if (maxChips !== undefined && value.length >= maxChips) return;
+      if (unique && value.includes(trimmed)) {
+        setDraft('');
+        return;
+      }
+      setChips([...value, trimmed]);
+      setDraft('');
+    },
+    [validate, maxChips, unique, value, setChips],
+  );
+
+  const removeChip = useCallback(
+    (idx: number) => {
+      const next = value.slice();
+      next.splice(idx, 1);
+      setChips(next);
+    },
+    [value, setChips],
+  );
+
+  const handleKey = (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+    const key = e.nativeEvent.key;
+    if (key === 'Backspace' && !draft && value.length > 0) {
+      removeChip(value.length - 1);
+    }
+  };
+
+  return (
+    <View
+      style={[
+        {
+          flexDirection: 'row',
+          flexWrap: 'wrap',
+          alignItems: 'center',
+          gap: 6,
+          minHeight: 40,
+          paddingHorizontal: 8,
+          paddingVertical: 4,
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+          borderRadius: 6,
+          backgroundColor: theme.colors.surfaceElevated,
+          opacity: isDisabled ? 0.6 : 1,
+        },
+        style,
+      ]}
+    >
+      {value.map((chip, idx) => (
+        <Tag key={`${chip}-${idx}`} onClose={isDisabled ? undefined : () => removeChip(idx)}>
+          {chip}
+        </Tag>
+      ))}
+      <TextInput
+        ref={inputRef}
+        accessibilityLabel={accessibilityLabel ?? 'Add tag'}
+        editable={!isDisabled}
+        value={draft}
+        onChangeText={(v) => {
+          if (v.endsWith(',')) {
+            addChip(v.slice(0, -1));
+          } else {
+            setDraft(v);
+          }
+        }}
+        onSubmitEditing={() => addChip(draft)}
+        onKeyPress={handleKey}
+        onBlur={() => addChip(draft)}
+        placeholder={value.length === 0 ? placeholder : undefined}
+        placeholderTextColor={theme.colors.fgSubtle}
+        style={{
+          flex: 1,
+          minWidth: 80,
+          color: theme.colors.fg,
+          fontSize: 14,
+          paddingVertical: 4,
+        }}
+      />
+    </View>
+  );
+}

package/src/Collapse.tsx

@@ -0,0 +1,120 @@
+import { useCallback, useState, type ReactNode } from 'react';
+import { Pressable, View, Text, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface CollapseItem {
+  key: string;
+  header: ReactNode;
+  children: ReactNode;
+  extra?: ReactNode;
+  isDisabled?: boolean;
+}
+
+export interface CollapseProps extends Omit<ViewProps, 'children' | 'onChange'> {
+  items: CollapseItem[];
+  activeKeys?: string[];
+  defaultActiveKeys?: string[];
+  onChange?: (keys: string[]) => void;
+  accordion?: boolean;
+  bordered?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export function Collapse(props: CollapseProps) {
+  const {
+    items,
+    activeKeys: activeProp,
+    defaultActiveKeys,
+    onChange,
+    accordion,
+    bordered = true,
+    size = 'md',
+    style,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const [internal, setInternal] = useState<string[]>(defaultActiveKeys ?? []);
+  const active = new Set(activeProp ?? internal);
+
+  const padding = size === 'sm' ? 10 : size === 'lg' ? 18 : 14;
+
+  const togglePanel = useCallback(
+    (key: string) => {
+      const next = new Set(active);
+      if (next.has(key)) next.delete(key);
+      else if (accordion) {
+        next.clear();
+        next.add(key);
+      } else next.add(key);
+      const list = Array.from(next);
+      if (activeProp === undefined) setInternal(list);
+      onChange?.(list);
+    },
+    [active, accordion, activeProp, onChange],
+  );
+
+  return (
+    <View
+      style={[
+        {
+          borderWidth: bordered ? 1 : 0,
+          borderColor: theme.colors.border,
+          borderRadius: 8,
+          backgroundColor: theme.colors.surfaceElevated,
+          overflow: 'hidden',
+        },
+        style,
+      ]}
+      {...rest}
+    >
+      {items.map((item, idx) => {
+        const isOpen = active.has(item.key);
+        const isLast = idx === items.length - 1;
+        return (
+          <View key={item.key}>
+            <Pressable
+              accessibilityRole="button"
+              accessibilityState={{ expanded: isOpen, disabled: item.isDisabled }}
+              disabled={item.isDisabled}
+              onPress={() => togglePanel(item.key)}
+              style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                padding,
+                borderBottomWidth: !isLast || isOpen ? 1 : 0,
+                borderBottomColor: theme.colors.border,
+                opacity: item.isDisabled ? 0.6 : 1,
+              }}
+            >
+              <Text style={{ width: 14, color: theme.colors.fg }}>{isOpen ? '▾' : '▸'}</Text>
+              <Text style={{ flex: 1, color: theme.colors.fg, fontWeight: '500' }}>
+                {typeof item.header === 'string' ? item.header : null}
+              </Text>
+              {item.extra ? (
+                <Text style={{ color: theme.colors.fgSubtle }}>
+                  {typeof item.extra === 'string' ? item.extra : ''}
+                </Text>
+              ) : null}
+            </Pressable>
+            {isOpen ? (
+              <View
+                style={{
+                  padding,
+                  borderBottomWidth: !isLast ? 1 : 0,
+                  borderBottomColor: theme.colors.border,
+                  backgroundColor: theme.colors.surface,
+                }}
+              >
+                {typeof item.children === 'string' || typeof item.children === 'number' ? (
+                  <Text style={{ color: theme.colors.fg }}>{String(item.children)}</Text>
+                ) : (
+                  item.children
+                )}
+              </View>
+            ) : null}
+          </View>
+        );
+      })}
+    </View>
+  );
+}

package/src/ColorPicker.tsx

@@ -0,0 +1,114 @@
+import { useState, type ReactNode } from 'react';
+import { Modal, Pressable, View, Text, TextInput, type ViewProps } from 'react-native';
+import { useTheme } from './ElvoraProvider';
+
+export interface ColorPickerProps extends Omit<ViewProps, 'onChange'> {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (hex: string) => void;
+  presets?: string[];
+  isDisabled?: boolean;
+  /** Custom trigger node (otherwise a swatch button is rendered). */
+  trigger?: ReactNode;
+}
+
+const DEFAULT_PRESETS = ['#0F172A', '#1D4ED8', '#16A34A', '#F59E0B', '#DC2626', '#7C3AED', '#0EA5E9', '#FFFFFF'];
+
+function normalize(v: string): string {
+  if (!v) return '#000000';
+  return v.startsWith('#') ? v.toUpperCase() : `#${v.toUpperCase()}`;
+}
+
+export function ColorPicker(props: ColorPickerProps) {
+  const { value: valueProp, defaultValue = '#0F172A', onChange, presets = DEFAULT_PRESETS, isDisabled, trigger, style, ...rest } = props;
+  const theme = useTheme();
+  const [internal, setInternal] = useState(normalize(defaultValue));
+  const value = normalize(valueProp ?? internal);
+  const [isOpen, setOpen] = useState(false);
+  const [hexInput, setHexInput] = useState(value);
+
+  const setValue = (next: string) => {
+    const n = normalize(next);
+    if (valueProp === undefined) setInternal(n);
+    onChange?.(n);
+    setHexInput(n);
+  };
+
+  return (
+    <View style={style} {...rest}>
+      <Pressable
+        accessibilityRole="button"
+        disabled={isDisabled}
+        onPress={() => setOpen(true)}
+        style={({ pressed }) => ({
+          flexDirection: 'row',
+          alignItems: 'center',
+          padding: 6,
+          borderRadius: Number(theme.radii.md),
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+          backgroundColor: pressed ? theme.colors.intent.neutral.subtle : theme.colors.surfaceElevated,
+          opacity: isDisabled ? 0.6 : 1,
+        })}
+      >
+        {trigger ?? (
+          <>
+            <View style={{ width: 24, height: 24, borderRadius: Number(theme.radii.sm), backgroundColor: value, borderWidth: 1, borderColor: theme.colors.border }} />
+            <Text style={{ marginLeft: 8, color: theme.colors.fg, fontSize: 13 }}>{value}</Text>
+          </>
+        )}
+      </Pressable>
+      <Modal transparent visible={isOpen} animationType="fade" onRequestClose={() => setOpen(false)}>
+        <Pressable
+          style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.4)' }}
+          onPress={() => setOpen(false)}
+        >
+          <Pressable
+            onPress={() => undefined}
+            style={{
+              padding: 16,
+              backgroundColor: theme.colors.surfaceElevated,
+              borderRadius: Number(theme.radii.md),
+              minWidth: 260,
+            }}
+          >
+            <Text style={{ fontSize: 14, fontWeight: '500', marginBottom: 12, color: theme.colors.fg }}>Pick color</Text>
+            <View style={{ width: '100%', height: 60, borderRadius: Number(theme.radii.sm), backgroundColor: value, marginBottom: 12, borderWidth: 1, borderColor: theme.colors.border }} />
+            <TextInput
+              value={hexInput}
+              onChangeText={setHexInput}
+              onSubmitEditing={() => setValue(hexInput)}
+              autoCapitalize="characters"
+              placeholder="#RRGGBB"
+              style={{
+                paddingHorizontal: 10,
+                paddingVertical: 8,
+                borderWidth: 1,
+                borderColor: theme.colors.border,
+                borderRadius: Number(theme.radii.sm),
+                color: theme.colors.fg,
+                marginBottom: 12,
+              }}
+            />
+            <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6 }}>
+              {presets.map((p) => (
+                <Pressable
+                  key={p}
+                  onPress={() => setValue(p)}
+                  style={{
+                    width: 28,
+                    height: 28,
+                    borderRadius: Number(theme.radii.sm),
+                    backgroundColor: p,
+                    borderWidth: 1,
+                    borderColor: theme.colors.border,
+                  }}
+                />
+              ))}
+            </View>
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </View>
+  );
+}

package/src/Container.tsx

@@ -0,0 +1,22 @@
+import { forwardRef, type ReactNode } from 'react';
+import { View, type ViewProps } from 'react-native';
+
+export interface ContainerProps extends ViewProps {
+  maxWidth?: number;
+  padding?: number;
+  children?: ReactNode;
+}
+
+/** Container — centered, max-width container for RN. */
+export const Container = forwardRef<View, ContainerProps>(function Container(props, ref) {
+  const { maxWidth = 1080, padding = 16, style, children, ...rest } = props;
+  return (
+    <View
+      ref={ref}
+      style={[{ width: '100%', maxWidth, alignSelf: 'center', paddingHorizontal: padding }, style]}
+      {...rest}
+    >
+      {children}
+    </View>
+  );
+});