@alexisapp/leave-mobile 0.0.1-beta.1

package/src/ui/components/Dialog.tsx

@@ -0,0 +1,186 @@
+import React, { useMemo } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Modal,
+  ScrollView,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import { useTheme } from '../theme';
+
+interface DialogButton {
+  children: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  closesDialog?: boolean;
+  variant?: 'primary' | 'secondary' | 'tertiary';
+}
+
+interface DialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  title?: string;
+  body?: React.ReactNode;
+  dismissable?: boolean;
+  rightFooterButtons?: DialogButton[];
+  leftFooterButtons?: DialogButton[];
+  zIndex?: number;
+}
+
+export const Dialog: React.FC<DialogProps> = ({
+  open = false,
+  onOpenChange,
+  title,
+  body,
+  dismissable = true,
+  rightFooterButtons = [],
+  leftFooterButtons = [],
+}) => {
+  const { colors, spacing, radius, typography, opacity } = useTheme();
+
+  const handleClose = () => {
+    if (dismissable) onOpenChange?.(false);
+  };
+
+  const handleButtonPress = (btn: DialogButton) => {
+    btn.onClick?.();
+    if (btn.closesDialog) onOpenChange?.(false);
+  };
+
+  const s = useMemo(() => {
+    const btnVariants: Record<string, ViewStyle> = {
+      primary: { backgroundColor: colors.primary },
+      secondary: { backgroundColor: colors.surfaceSecondary },
+      tertiary: { backgroundColor: colors.transparent },
+    };
+    return {
+      overlay: {
+        flex: 1,
+        backgroundColor: colors.overlay,
+        justifyContent: 'center' as const,
+        padding: spacing.xxl,
+      } as ViewStyle,
+      dialog: {
+        backgroundColor: colors.surface,
+        borderRadius: radius.lg,
+        overflow: 'hidden' as const,
+        shadowColor: colors.shadow,
+        shadowOffset: { width: 0, height: 8 },
+        shadowOpacity: 0.2,
+        shadowRadius: 24,
+        elevation: 12,
+      } as ViewStyle,
+      header: {
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        justifyContent: 'space-between' as const,
+        paddingHorizontal: spacing.xl,
+        paddingVertical: spacing.lg,
+        borderBottomWidth: 1,
+        borderBottomColor: colors.surfaceSecondary,
+      } as ViewStyle,
+      title: {
+        fontSize: typography.body.fontSize,
+        fontWeight: '700' as const,
+        color: colors.textPrimary,
+        flex: 1,
+      } as TextStyle,
+      closeBtn: { padding: spacing.xs } as ViewStyle,
+      closeText: { fontSize: typography.body.fontSize, color: colors.textMuted } as TextStyle,
+      body: {
+        paddingHorizontal: spacing.xl,
+        paddingVertical: spacing.lg,
+        maxHeight: 400,
+      } as ViewStyle,
+      bodyText: { ...typography.bodySmall, color: colors.textTertiary } as TextStyle,
+      footer: {
+        flexDirection: 'row' as const,
+        justifyContent: 'space-between' as const,
+        padding: spacing.lg,
+        borderTopWidth: 1,
+        borderTopColor: colors.surfaceSecondary,
+      } as ViewStyle,
+      footerSide: { flexDirection: 'row' as const, gap: spacing.sm } as ViewStyle,
+      btn: {
+        paddingHorizontal: spacing.lg,
+        paddingVertical: spacing.sm,
+        borderRadius: radius.md,
+        alignItems: 'center' as const,
+      } as ViewStyle,
+      btnVariants,
+      btnDisabled: { opacity: opacity.disabled } as ViewStyle,
+      btnText: {
+        fontSize: typography.bodySmall.fontSize,
+        fontWeight: '600' as const,
+        color: colors.onPrimary,
+      } as TextStyle,
+      btnTextTertiary: { color: colors.primary } as TextStyle,
+    };
+  }, [colors, spacing, radius, typography, opacity]);
+
+  return (
+    <Modal visible={open} transparent animationType="fade" onRequestClose={handleClose}>
+      <TouchableOpacity style={s.overlay} activeOpacity={1} onPress={handleClose}>
+        <TouchableOpacity style={s.dialog} activeOpacity={1} onPress={() => {}}>
+          {title && (
+            <View style={s.header}>
+              <Text style={s.title}>{title}</Text>
+              {dismissable && (
+                <TouchableOpacity onPress={handleClose} style={s.closeBtn}>
+                  <Text style={s.closeText}>✕</Text>
+                </TouchableOpacity>
+              )}
+            </View>
+          )}
+          {body && (
+            <ScrollView style={s.body} showsVerticalScrollIndicator={false}>
+              {typeof body === 'string' ? <Text style={s.bodyText}>{body}</Text> : body}
+            </ScrollView>
+          )}
+          {(leftFooterButtons.length > 0 || rightFooterButtons.length > 0) && (
+            <View style={s.footer}>
+              <View style={s.footerSide}>
+                {leftFooterButtons.map((btn, i) => (
+                  <TouchableOpacity
+                    key={i}
+                    style={[
+                      s.btn,
+                      s.btnVariants[btn.variant ?? 'secondary'],
+                      btn.disabled && s.btnDisabled,
+                    ]}
+                    onPress={() => !btn.disabled && handleButtonPress(btn)}
+                    disabled={btn.disabled}
+                  >
+                    <Text style={[s.btnText, btn.variant === 'tertiary' && s.btnTextTertiary]}>
+                      {btn.children}
+                    </Text>
+                  </TouchableOpacity>
+                ))}
+              </View>
+              <View style={s.footerSide}>
+                {rightFooterButtons.map((btn, i) => (
+                  <TouchableOpacity
+                    key={i}
+                    style={[
+                      s.btn,
+                      s.btnVariants[btn.variant ?? 'primary'],
+                      btn.disabled && s.btnDisabled,
+                    ]}
+                    onPress={() => !btn.disabled && handleButtonPress(btn)}
+                    disabled={btn.disabled}
+                  >
+                    <Text style={[s.btnText, btn.variant === 'tertiary' && s.btnTextTertiary]}>
+                      {btn.children}
+                    </Text>
+                  </TouchableOpacity>
+                ))}
+              </View>
+            </View>
+          )}
+        </TouchableOpacity>
+      </TouchableOpacity>
+    </Modal>
+  );
+};

package/src/ui/components/Drawer.tsx

@@ -0,0 +1,71 @@
+import React, { useMemo } from 'react';
+import { View, TouchableOpacity, Modal, StyleSheet, Dimensions, ViewStyle } from 'react-native';
+import { useTheme } from '../theme';
+
+const SCREEN_WIDTH = Dimensions.get('window').width;
+const DRAWER_WIDTH = Math.min(400, SCREEN_WIDTH * 0.85);
+
+interface DrawerProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  trigger?: React.ReactNode;
+  content?: React.ReactNode;
+  dismissable?: boolean;
+  overlayMode?: 'colored' | 'transparent';
+  position?: 'left' | 'right';
+  zIndex?: number;
+}
+
+export const Drawer: React.FC<DrawerProps> = ({
+  open = false,
+  onOpenChange,
+  trigger,
+  content,
+  dismissable = true,
+  overlayMode = 'colored',
+  position = 'right',
+}) => {
+  const { colors, opacity } = useTheme();
+
+  const handleClose = () => {
+    if (dismissable) onOpenChange?.(false);
+  };
+
+  const s = useMemo(
+    () => ({
+      wrapper: { flex: 1, flexDirection: 'row' as const } as ViewStyle,
+      overlay: { ...StyleSheet.absoluteFillObject } as ViewStyle,
+      overlayColored: { backgroundColor: colors.overlay } as ViewStyle,
+      drawer: {
+        width: DRAWER_WIDTH,
+        backgroundColor: colors.surface,
+        shadowColor: colors.shadow,
+        shadowOffset: { width: -4, height: 0 },
+        shadowOpacity: opacity.shadowMedium,
+        shadowRadius: 12,
+        elevation: 12,
+      } as ViewStyle,
+      drawerRight: { marginLeft: 'auto' as const } as ViewStyle,
+      drawerLeft: { marginRight: 'auto' as const } as ViewStyle,
+    }),
+    [colors, opacity]
+  );
+
+  return (
+    <>
+      {trigger}
+      <Modal visible={open} transparent animationType="slide" onRequestClose={handleClose}>
+        <View style={s.wrapper}>
+          <TouchableOpacity
+            style={[s.overlay, overlayMode === 'colored' && s.overlayColored]}
+            activeOpacity={1}
+            onPress={handleClose}
+          />
+          <View style={[s.drawer, position === 'right' ? s.drawerRight : s.drawerLeft]}>
+            {content}
+          </View>
+        </View>
+      </Modal>
+    </>
+  );
+};

package/src/ui/components/InlineItem.tsx

@@ -0,0 +1,33 @@
+import React, { useMemo } from 'react';
+import { View, Text, ViewStyle, TextStyle } from 'react-native';
+import { useTheme } from '../theme';
+
+interface InlineItemProps {
+  leadingIcon?: string;
+  children?: React.ReactNode;
+  style?: ViewStyle;
+}
+
+export const InlineItem: React.FC<InlineItemProps> = ({ leadingIcon, children, style }) => {
+  const { colors, spacing, typography } = useTheme();
+
+  const s = useMemo(
+    () => ({
+      container: {
+        flexDirection: 'row' as const,
+        alignItems: 'center' as const,
+        gap: spacing.sm,
+      } as ViewStyle,
+      icon: { fontSize: typography.body.fontSize, color: colors.textMuted } as TextStyle,
+      content: { flex: 1 } as ViewStyle,
+    }),
+    [colors, spacing, typography]
+  );
+
+  return (
+    <View style={[s.container, style]}>
+      {leadingIcon && <Text style={s.icon}>{leadingIcon}</Text>}
+      <View style={s.content}>{children}</View>
+    </View>
+  );
+};

package/src/ui/components/Input.tsx

@@ -0,0 +1,77 @@
+import React, { useState, useMemo } from 'react';
+import { View, Text, TextInput, ViewStyle, TextStyle } from 'react-native';
+import { useTheme } from '../theme';
+
+interface InputProps {
+  label?: string;
+  placeholder?: string;
+  value?: string;
+  onChangeText?: (value: string) => void;
+  type?: 'text' | 'password' | 'email' | 'number';
+  required?: boolean;
+  disabled?: boolean;
+  style?: ViewStyle;
+}
+
+export const Input: React.FC<InputProps> = ({
+  label,
+  placeholder,
+  value,
+  onChangeText,
+  type = 'text',
+  required = false,
+  disabled = false,
+  style,
+}) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const { colors, spacing, radius, typography } = useTheme();
+
+  const s = useMemo(
+    () => ({
+      container: { gap: spacing.xs } as ViewStyle,
+      label: { ...typography.label, color: colors.textSecondary } as TextStyle,
+      required: { color: colors.error } as TextStyle,
+      input: {
+        borderWidth: 1,
+        borderColor: colors.border,
+        borderRadius: radius.md,
+        paddingHorizontal: spacing.md,
+        paddingVertical: 10,
+        fontSize: typography.bodySmall.fontSize,
+        color: colors.textPrimary,
+        backgroundColor: colors.surface,
+      } as ViewStyle,
+      inputFocused: { borderColor: colors.primary } as ViewStyle,
+      inputDisabled: {
+        backgroundColor: colors.surfaceSecondary,
+        color: colors.textPlaceholder,
+      } as ViewStyle,
+    }),
+    [colors, spacing, radius, typography]
+  );
+
+  return (
+    <View style={[s.container, style]}>
+      {label && (
+        <Text style={s.label}>
+          {label}
+          {required && <Text style={s.required}> *</Text>}
+        </Text>
+      )}
+      <TextInput
+        style={[s.input, isFocused && s.inputFocused, disabled && s.inputDisabled]}
+        placeholder={placeholder}
+        placeholderTextColor={colors.textPlaceholder}
+        value={value}
+        onChangeText={onChangeText}
+        secureTextEntry={type === 'password'}
+        keyboardType={
+          type === 'email' ? 'email-address' : type === 'number' ? 'numeric' : 'default'
+        }
+        editable={!disabled}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+      />
+    </View>
+  );
+};

package/src/ui/components/RadioGroup.tsx

@@ -0,0 +1,94 @@
+import React, { useMemo } from 'react';
+import { View, Text, TouchableOpacity, ViewStyle, TextStyle } from 'react-native';
+import { useTheme } from '../theme';
+
+interface RadioItem {
+  value: string;
+  label: string;
+}
+
+interface RadioGroupProps {
+  id?: string;
+  name?: string;
+  label?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  items?: RadioItem[];
+  required?: boolean;
+  disabled?: boolean;
+  style?: ViewStyle;
+}
+
+export const RadioGroup: React.FC<RadioGroupProps> = ({
+  label,
+  value,
+  onChange,
+  items = [],
+  required = false,
+  disabled = false,
+  style,
+}) => {
+  const { colors, spacing, typography, opacity } = useTheme();
+
+  const s = useMemo(
+    () => ({
+      container: { gap: spacing.sm } as ViewStyle,
+      label: { ...typography.label, color: colors.textSecondary } as TextStyle,
+      required: { color: colors.error } as TextStyle,
+      group: { gap: spacing.sm } as ViewStyle,
+      option: { flexDirection: 'row' as const, alignItems: 'center' as const, gap: 10 },
+      radio: {
+        width: 20,
+        height: 20,
+        borderRadius: 10,
+        borderWidth: 2,
+        borderColor: colors.border,
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+      } as ViewStyle,
+      radioSelected: { borderColor: colors.primary } as ViewStyle,
+      radioDisabled: { borderColor: colors.borderLight } as ViewStyle,
+      radioInner: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+        backgroundColor: colors.primary,
+      } as ViewStyle,
+      optionText: {
+        fontSize: typography.bodySmall.fontSize,
+        color: colors.textPrimary,
+      } as TextStyle,
+      optionTextDisabled: { color: colors.textPlaceholder } as TextStyle,
+    }),
+    [colors, spacing, typography]
+  );
+
+  return (
+    <View style={[s.container, style]}>
+      {label && (
+        <Text style={s.label}>
+          {label}
+          {required && <Text style={s.required}> *</Text>}
+        </Text>
+      )}
+      <View style={s.group}>
+        {items.map((item) => {
+          const isSelected = item.value === value;
+          return (
+            <TouchableOpacity
+              key={item.value}
+              style={s.option}
+              onPress={() => !disabled && onChange?.(item.value)}
+              activeOpacity={opacity.activePress}
+            >
+              <View style={[s.radio, isSelected && s.radioSelected, disabled && s.radioDisabled]}>
+                {isSelected && <View style={s.radioInner} />}
+              </View>
+              <Text style={[s.optionText, disabled && s.optionTextDisabled]}>{item.label}</Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View>
+  );
+};

package/src/ui/components/ScrollArea.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ScrollView, StyleSheet, ViewStyle } from 'react-native';
+
+interface ScrollAreaProps {
+  children?: React.ReactNode;
+  style?: ViewStyle;
+  horizontal?: boolean;
+}
+
+export const ScrollArea: React.FC<ScrollAreaProps> = ({ children, style, horizontal = false }) => (
+  <ScrollView
+    style={[styles.container, style]}
+    horizontal={horizontal}
+    showsVerticalScrollIndicator={false}
+    showsHorizontalScrollIndicator={false}
+  >
+    {children}
+  </ScrollView>
+);
+
+const styles = StyleSheet.create({
+  container: { flex: 1 } as ViewStyle,
+});

package/src/ui/components/Select.tsx

@@ -0,0 +1,145 @@
+import React, { useState, useMemo } from 'react';
+import { View, Text, TouchableOpacity, Modal, FlatList, ViewStyle, TextStyle } from 'react-native';
+import { useTheme } from '../theme';
+
+interface SelectItem {
+  id?: string;
+  value: string;
+  label: string;
+}
+
+interface SelectProps<T extends SelectItem = SelectItem> {
+  id?: string;
+  label?: string;
+  placeholder?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  items?: T[];
+  renderItem?: (item: T) => React.ReactNode;
+  required?: boolean;
+  disabled?: boolean;
+  style?: ViewStyle;
+}
+
+export const Select = <T extends SelectItem = SelectItem>({
+  label,
+  placeholder,
+  value,
+  onValueChange,
+  items = [],
+  renderItem,
+  required = false,
+  disabled = false,
+  style,
+}: SelectProps<T>) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const { colors, spacing, radius, typography, opacity } = useTheme();
+
+  const selectedItem = items.find((item) => item.value === value);
+  const displayValue = selectedItem
+    ? renderItem
+      ? String(renderItem(selectedItem))
+      : selectedItem.label
+    : undefined;
+
+  const s = useMemo(
+    () => ({
+      container: { gap: spacing.xs } as ViewStyle,
+      label: { ...typography.label, color: colors.textSecondary } as TextStyle,
+      required: { color: colors.error } as TextStyle,
+      trigger: {
+        flexDirection: 'row' as const,
+        justifyContent: 'space-between' as const,
+        alignItems: 'center' as const,
+        borderWidth: 1,
+        borderColor: colors.border,
+        borderRadius: radius.md,
+        paddingHorizontal: spacing.md,
+        paddingVertical: 10,
+        backgroundColor: colors.surface,
+      } as ViewStyle,
+      triggerDisabled: { backgroundColor: colors.surfaceSecondary } as ViewStyle,
+      triggerText: {
+        fontSize: typography.bodySmall.fontSize,
+        color: colors.textPrimary,
+        flex: 1,
+      } as TextStyle,
+      placeholder: { color: colors.textPlaceholder } as TextStyle,
+      chevron: { fontSize: typography.bodySmall.fontSize, color: colors.textMuted } as TextStyle,
+      overlay: {
+        flex: 1,
+        backgroundColor: colors.overlayLight,
+        justifyContent: 'center' as const,
+        padding: spacing.xxl,
+      } as ViewStyle,
+      dropdown: {
+        backgroundColor: colors.surface,
+        borderRadius: radius.md,
+        maxHeight: 300,
+        shadowColor: colors.shadow,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: opacity.shadowMedium,
+        shadowRadius: 12,
+        elevation: 8,
+      } as ViewStyle,
+      option: { paddingHorizontal: spacing.lg, paddingVertical: spacing.md } as ViewStyle,
+      optionSelected: { backgroundColor: colors.primarySurface } as ViewStyle,
+      optionText: {
+        fontSize: typography.bodySmall.fontSize,
+        color: colors.textPrimary,
+      } as TextStyle,
+      optionTextSelected: { color: colors.primary, fontWeight: '600' as const } as TextStyle,
+    }),
+    [colors, spacing, radius, typography, opacity]
+  );
+
+  return (
+    <View style={[s.container, style]}>
+      {label && (
+        <Text style={s.label}>
+          {label}
+          {required && <Text style={s.required}> *</Text>}
+        </Text>
+      )}
+      <TouchableOpacity
+        style={[s.trigger, disabled && s.triggerDisabled]}
+        onPress={() => !disabled && setIsOpen(true)}
+        activeOpacity={opacity.activePress}
+      >
+        <Text style={[s.triggerText, !displayValue && s.placeholder]}>
+          {displayValue ?? placeholder ?? 'Select...'}
+        </Text>
+        <Text style={s.chevron}>▾</Text>
+      </TouchableOpacity>
+
+      <Modal
+        visible={isOpen}
+        transparent
+        animationType="fade"
+        onRequestClose={() => setIsOpen(false)}
+      >
+        <TouchableOpacity style={s.overlay} activeOpacity={1} onPress={() => setIsOpen(false)}>
+          <View style={s.dropdown}>
+            <FlatList
+              data={items}
+              keyExtractor={(item) => item.id ?? item.value}
+              renderItem={({ item }) => (
+                <TouchableOpacity
+                  style={[s.option, item.value === value && s.optionSelected]}
+                  onPress={() => {
+                    onValueChange?.(item.value);
+                    setIsOpen(false);
+                  }}
+                >
+                  <Text style={[s.optionText, item.value === value && s.optionTextSelected]}>
+                    {renderItem ? String(renderItem(item)) : item.label}
+                  </Text>
+                </TouchableOpacity>
+              )}
+            />
+          </View>
+        </TouchableOpacity>
+      </Modal>
+    </View>
+  );
+};