@biruframework/native 1.0.0

package/components/button/Button.jsx

@@ -0,0 +1,29 @@
+import { Pressable, Text } from 'react-native';
+
+export function Button(props) {
+  const {
+    disabled,
+    loading,
+    onPress,
+    label,
+    style: styleProp,
+    textStyle: textStyleProp,
+    ...rest
+  } = props;
+
+  const isDisabled = disabled || loading;
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={isDisabled}
+      style={styleProp}
+      {...rest}
+    >
+      <Text style={textStyleProp}>
+        {loading ? 'Loading…' : label}
+      </Text>
+    </Pressable>
+  );
+}
+  

package/components/button/ButtonIcon.jsx

@@ -0,0 +1,62 @@
+import { Pressable, Text, View } from 'react-native';
+
+export function ButtonIcon(props) {
+  const {
+    disabled,
+    loading,
+    onPress,
+    label,
+    icon,
+    iconPosition = 'left',
+    style: styleProp,
+    textStyle: textStyleProp,
+    iconStyle: iconStyleProp,
+    ...rest
+  } = props;
+
+  const isDisabled = disabled || loading;
+
+  const renderIcon = () => {
+    if (!icon) return null;
+    
+    // Handle different icon types: React component, Image source, or string (emoji)
+    if (typeof icon === 'function' || typeof icon === 'object') {
+      const IconComponent = icon;
+      return (
+        <View style={iconStyleProp}>
+          {typeof IconComponent === 'function' ? (
+            <IconComponent />
+          ) : (
+            icon
+          )}
+        </View>
+      );
+    }
+    
+    // String/emoji icon
+    return (
+      <Text style={iconStyleProp}>
+        {icon}
+      </Text>
+    );
+  };
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={isDisabled}
+      style={styleProp}
+      {...rest}
+    >
+      <View>
+        {iconPosition === 'left' && renderIcon()}
+        {label && (
+          <Text style={textStyleProp}>
+            {loading ? 'Loading…' : label}
+          </Text>
+        )}
+        {iconPosition === 'right' && renderIcon()}
+      </View>
+    </Pressable>
+  );
+}

package/components/card/Card.jsx

@@ -0,0 +1,31 @@
+import { View, StyleSheet } from 'react-native';
+import { defaultTheme } from '../../theme/Theme';
+
+export function Card(props) {
+    const theme = props.theme ?? defaultTheme;
+    return (
+      <View
+        style={[
+          styles.card,
+          {
+            backgroundColor: theme.colors.surface,
+            borderColor: theme.colors.border,
+            borderRadius: theme.radius.lg,
+          },
+          props.style,
+        ]}
+      >
+        {props.children}
+      </View>
+    );
+  }
+
+const styles = StyleSheet.create({
+    card: {
+      borderWidth: 1,
+      padding: 16,
+      gap: 12,
+    },
+});  
+  
+  

package/components/dropdown/DropDown.jsx

@@ -0,0 +1,145 @@
+import { useState, useMemo } from 'react';
+import { View, Text, Pressable, FlatList, Modal, StyleSheet } from 'react-native';
+import { defaultTheme } from '../../theme/Theme';
+
+export function Dropdown(props) {
+    const theme = props.theme ?? defaultTheme;
+    const [isOpen, setIsOpen] = useState(false);
+    const selectedLabel = useMemo(() => {
+      if (props.value == null) return null;
+      return props.items.find((i) => i.value === props.value)?.label ?? String(props.value);
+    }, [props.items, props.value]);
+  
+    return (
+      <View style={styles.fieldWrapper}>
+        {props.label ? (
+          <Text style={[styles.label, { color: theme.colors.textMuted }]}>{props.label}</Text>
+        ) : null}
+  
+        <Pressable
+          onPress={() => setIsOpen(true)}
+          style={[
+            styles.dropdownTrigger,
+            {
+              borderColor: theme.colors.border,
+              backgroundColor: theme.colors.surface,
+              borderRadius: theme.radius.md,
+            },
+          ]}
+        >
+          <Text style={{ color: theme.colors.text }}>
+            {selectedLabel ?? props.placeholder ?? 'Select…'}
+          </Text>
+          <Text style={{ color: theme.colors.textMuted }}>▼</Text>
+        </Pressable>
+  
+        <Modal
+          visible={isOpen}
+          animationType="slide"
+          transparent
+          onRequestClose={() => setIsOpen(false)}
+        >
+          <View style={styles.modalOverlay}>
+            <View
+              style={[
+                styles.modalSheet,
+                {
+                  backgroundColor: theme.colors.background,
+                  borderColor: theme.colors.border,
+                },
+              ]}
+            >
+              <View style={styles.modalHeader}>
+                <Text style={[styles.modalTitle, { color: theme.colors.text }]}>
+                  {props.label ?? 'Select'}
+                </Text>
+                <Pressable onPress={() => setIsOpen(false)}>
+                  <Text style={{ color: theme.colors.primary }}>Close</Text>
+                </Pressable>
+              </View>
+  
+              <FlatList
+                data={props.items}
+                keyExtractor={(item) => String(item.value)}
+                ItemSeparatorComponent={() => (
+                  <View style={[styles.separator, { backgroundColor: theme.colors.border }]} />
+                )}
+                renderItem={({ item }) => {
+                  const isSelected = props.value === item.value;
+                  return (
+                    <Pressable
+                      onPress={() => {
+                        props.onValueChange(item.value);
+                        setIsOpen(false);
+                      }}
+                      style={[
+                        styles.dropdownItem,
+                        {
+                          backgroundColor: isSelected ? theme.colors.surface : 'transparent',
+                        },
+                      ]}
+                    >
+                      <Text style={{ color: theme.colors.text }}>{item.label}</Text>
+                      {isSelected ? <Text style={{ color: theme.colors.primary }}>✓</Text> : null}
+                    </Pressable>
+                  );
+                }}
+              />
+            </View>
+          </View>
+        </Modal>
+      </View>
+    );
+  }
+
+
+  const styles = StyleSheet.create({
+    fieldWrapper: {
+      gap: 8,
+    },
+    label: {
+      fontSize: 13,
+    },
+    dropdownTrigger: {
+      borderWidth: 1,
+      paddingHorizontal: 12,
+      paddingVertical: 12,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
+    modalOverlay: {
+      flex: 1,
+      justifyContent: 'flex-end',
+      backgroundColor: 'rgba(0,0,0,0.5)',
+    },
+    modalSheet: {
+      borderTopWidth: 1,
+      paddingHorizontal: 16,
+      paddingTop: 12,
+      paddingBottom: 24,
+      maxHeight: '70%',
+    },
+    modalHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingBottom: 12,
+    },
+    modalTitle: {
+      fontSize: 16,
+      fontWeight: '700',
+    },
+    separator: {
+      height: 1,
+    },
+    dropdownItem: {
+      paddingVertical: 14,
+      paddingHorizontal: 8,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
+  });
+  
+  

package/components/index.js

@@ -0,0 +1,9 @@
+export * from './button/Button';
+export * from './button/ButtonIcon';
+export * from './card/Card';
+export * from './dropdown/DropDown';
+export * from './textfield/TextField';
+export * from './list/List';
+export * from './navigation/NavigationBar';
+
+

package/components/list/List.jsx

@@ -0,0 +1,123 @@
+import { View, Text, Image, FlatList, Pressable, StyleSheet } from 'react-native';
+
+export function List(props) {
+  const {
+    items,
+    onItemPress,
+    /**
+     * Optional mappers so List can work with many different data shapes.
+     * If not provided, it will use the default fields: image, title, description, location, id.
+     */
+    getImage, // (item) => string | require(...) | ImageSource
+    getTitle, // (item) => string
+    getDescription, // (item) => string | undefined
+    getLocation, // (item) => string | undefined
+    keyExtractor, // (item, index) => string
+    /**
+     * Style customization from the consuming app:
+     * - cardStyle              : style for the card / item container
+     * - thumbnailStyle         : style for the image
+     * - titleStyle             : style for the title
+     * - descriptionStyle       : style for the description
+     * - locationStyle          : style for the location
+     * - contentContainerStyle  : style for the list content container
+     */
+    cardStyle,
+    thumbnailStyle,
+    titleStyle,
+    descriptionStyle,
+    locationStyle,
+    contentContainerStyle,
+    ...flatListProps
+  } = props;
+
+  const renderItem = ({ item }) => {
+    const rawImage = getImage ? getImage(item) : item.image;
+    const title = getTitle ? getTitle(item) : item.title;
+    const description = getDescription ? getDescription(item) : item.description;
+    const location = getLocation ? getLocation(item) : item.location;
+
+    const imageSource =
+      typeof rawImage === 'string' ? { uri: rawImage } : rawImage;
+
+    return (
+      <Pressable
+        onPress={() => onItemPress && onItemPress(item)}
+        style={({ pressed }) => [
+          styles.card,
+          cardStyle,
+          pressed && { opacity: 0.9 },
+        ]}
+      >
+        <Image
+          source={imageSource}
+          style={[styles.thumbnail, thumbnailStyle]}
+        />
+
+        <View style={styles.content}>
+          <Text style={[styles.title, titleStyle]}>
+            {title}
+          </Text>
+
+          {description ? (
+            <Text
+              style={[styles.description, descriptionStyle]}
+              numberOfLines={2}
+            >
+              {description}
+            </Text>
+          ) : null}
+
+          {location ? (
+            <Text style={[styles.location, locationStyle]}>
+              {location}
+            </Text>
+          ) : null}
+        </View>
+      </Pressable>
+    );
+  };
+
+  return (
+    <FlatList
+      data={items}
+      keyExtractor={
+        keyExtractor ??
+        ((item, index) =>
+          item?.id != null ? String(item.id) : String(index))
+      }
+      contentContainerStyle={[
+        styles.listContent,
+        contentContainerStyle,
+      ]}
+      renderItem={renderItem}
+      showsVerticalScrollIndicator={false}
+      {...flatListProps}
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  listContent: {
+    paddingVertical: 4,
+  },
+  card: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  thumbnail: {
+    width: 72,
+    height: 72,
+    borderRadius: 12,
+  },
+  content: {
+    flex: 1,
+  },
+  title: {
+  },
+  description: {
+  },
+  location: {
+  },
+});
+

package/components/navigation/NavigationBar.jsx

@@ -0,0 +1,77 @@
+import { View, Text, Pressable } from 'react-native';
+
+export function NavigationBar(props) {
+  const {
+    items = [], // Array of { icon, label, onPress, active }
+    activeIndex = 0,
+    style: styleProp,
+    itemStyle: itemStyleProp,
+    activeItemStyle: activeItemStyleProp,
+    iconStyle: iconStyleProp,
+    activeIconStyle: activeIconStyleProp,
+    labelStyle: labelStyleProp,
+    activeLabelStyle: activeLabelStyleProp,
+    ...rest
+  } = props;
+
+  const itemCount = items.length;
+  
+  // Validasi jumlah item (4, 5, atau 6)
+  if (itemCount < 4 || itemCount > 6) {
+    console.warn(`NavigationBar: Expected 4, 5, or 6 items, but got ${itemCount}`);
+  }
+
+  const renderIcon = (icon, isActive) => {
+    if (!icon) return null;
+    
+    // Handle different icon types: React component, Image source, or string (emoji)
+    if (typeof icon === 'function' || typeof icon === 'object') {
+      const IconComponent = icon;
+      return (
+        <View style={isActive ? activeIconStyleProp : iconStyleProp}>
+          {typeof IconComponent === 'function' ? (
+            <IconComponent />
+          ) : (
+            icon
+          )}
+        </View>
+      );
+    }
+    
+    // String/emoji icon
+    return (
+      <Text style={isActive ? activeIconStyleProp : iconStyleProp}>
+        {icon}
+      </Text>
+    );
+  };
+
+  return (
+    <View style={styleProp} {...rest}>
+      {items.map((item, index) => {
+        const isActive = item.active !== undefined ? item.active : activeIndex === index;
+        
+        return (
+          <Pressable
+            key={index}
+            onPress={item.onPress}
+            style={[
+              itemStyleProp,
+              isActive && activeItemStyleProp,
+            ]}
+          >
+            {renderIcon(item.icon, isActive)}
+            {item.label && (
+              <Text style={[
+                labelStyleProp,
+                isActive && activeLabelStyleProp,
+              ]}>
+                {item.label}
+              </Text>
+            )}
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

package/components/textfield/TextField.jsx

@@ -0,0 +1,30 @@
+import { View, Text, TextInput } from 'react-native';
+import { defaultTheme } from '../../theme/Theme';
+
+export function TextField(props) {
+  const theme = props.theme ?? defaultTheme;
+  const {
+    label,
+    errorText,
+    style,
+    labelStyle,
+    containerStyle,
+    ...inputProps
+  } = props;
+
+  return (
+    <View style={containerStyle}>
+      {label ? (
+        <Text style={labelStyle}>{label}</Text>
+      ) : null}
+      <TextInput
+        placeholderTextColor={theme.colors.textMuted}
+        {...inputProps}
+        style={style}
+      />
+      {errorText ? (
+        <Text>{errorText}</Text>
+      ) : null}
+    </View>
+  );
+}

package/forms/index.jsx

@@ -0,0 +1,21 @@
+import { Controller } from 'react-hook-form';
+
+import { TextField } from '../components';
+
+export function FormTextField(props) {
+  const { control, name, ...textFieldProps } = props;
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field: { onChange, value }, fieldState }) => (
+        <TextField
+          {...textFieldProps}
+          value={value ?? ''}
+          onChangeText={onChange}
+          errorText={fieldState.error?.message}
+        />
+      )}
+    />
+  );
+}

package/hooks/index.js

@@ -0,0 +1 @@
+export { default as useFocus } from './useFocus.js';

package/hooks/useFocus.js

@@ -0,0 +1,19 @@
+import { useFocusEffect } from '@react-navigation/native';
+import { useCallback } from 'react';
+
+export default function useFocus({ callback, setState }) {
+  useFocusEffect(
+    useCallback(() => {
+      const fetchLists = async () => {
+        try {
+          const data = await callback.getLists();
+          setState(data);
+        } catch (error) {
+          console.error(error);
+        }
+      };
+
+      fetchLists();
+    }, [callback, setState])
+  );
+}

package/index.js

@@ -0,0 +1,11 @@
+/**
+ * @biruframework/native - React Native / Android: UI, hooks, navigation, forms, state-redux
+ * Install: pnpm add @biruframework/core @biruframework/native
+ */
+export * from './components';
+export * from './theme';
+export * from './ui';
+export * from './hooks';
+export * from './navigation';
+export * from './forms';
+export * from './state';

package/navigation/index.js

@@ -0,0 +1,20 @@
+export { NavigationContainer } from '@react-navigation/native';
+export { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+/**
+ * Create React Navigation linking config from @biruframework/core route definitions.
+ * Minimal helper (1-level). You can still override/extend manually.
+ */
+export function linkingFromRoutes(
+  routes,
+  options,
+) {
+  const screens = {};
+  for (const [screenName, route] of Object.entries(routes)) {
+    if (route.path) screens[screenName] = route.path.replace(/^\//, '');
+  }
+  return {
+    prefixes: options.prefixes,
+    config: { screens },
+  };
+}

package/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@biruframework/native",
+  "version": "1.0.0",
+  "description": "React Native / Android: UI, hooks, navigation, forms, state-redux",
+  "main": "index.js",
+  "exports": { ".": "./index.js" },
+  "peerDependencies": {
+    "@biruframework/core": "*",
+    "react": "*",
+    "react-native": "*",
+    "@react-navigation/native": "*",
+    "react-hook-form": "*"
+  },
+  "keywords": ["biruframework", "react-native", "android", "ui"],
+  "license": "ISC"
+}

package/state/index.js

@@ -0,0 +1,27 @@
+export {
+  configureStore,
+  createAction,
+  createAsyncThunk,
+  createListenerMiddleware,
+  createReducer,
+  createSelector,
+  createSlice,
+  isAnyOf,
+  isAsyncThunkAction,
+  isFulfilled,
+  isPending,
+  isRejected,
+  isRejectedWithValue,
+} from '@reduxjs/toolkit';
+
+import { Provider, useDispatch, useSelector } from 'react-redux';
+
+export { Provider, useDispatch, useSelector };
+
+/**
+ * Hooks helper. In your app, call:
+ *   const { useAppDispatch, useAppSelector } = createReduxHooks();
+ */
+export function createReduxHooks() {
+  return { useAppDispatch: useDispatch, useAppSelector: useSelector };
+}

package/theme/Theme.js

@@ -0,0 +1,15 @@
+export const defaultTheme = {
+    colors: {
+      background: '#0b0b0f',
+      surface: '#141420',
+      text: '#ffffff',
+      textMuted: '#a1a1aa',
+      primary: '#7c3aed',
+      border: '#2a2a3a',
+      danger: '#ef4444',
+    },
+    radius: {
+      md: 12,
+      lg: 16,
+    },
+  };

package/theme/context.jsx

@@ -0,0 +1,14 @@
+import React, { createContext, useContext, useMemo } from 'react';
+
+import { defaultTheme } from './Theme';
+
+const ThemeContext = createContext(defaultTheme);
+
+export function ThemeProvider(props) {
+  const theme = useMemo(() => props.theme ?? defaultTheme, [props.theme]);
+  return <ThemeContext.Provider value={theme}>{props.children}</ThemeContext.Provider>;
+}
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}

package/theme/index.js

@@ -0,0 +1,2 @@
+export { defaultTheme } from './Theme';
+export { ThemeProvider, useTheme } from './context.jsx';

package/ui/controls.jsx

@@ -0,0 +1,73 @@
+import React, { useMemo } from 'react';
+import { Pressable, StyleSheet, Switch, Text, View } from 'react-native';
+
+import { defaultTheme } from '../theme/Theme';
+
+export function Checkbox(props) {
+  const theme = props.theme ?? defaultTheme;
+  const isDisabled = props.disabled ?? false;
+
+  const boxStyle = useMemo(
+    () => [
+      styles.checkboxBox,
+      {
+        borderColor: theme.colors.border,
+        backgroundColor: props.checked ? theme.colors.primary : theme.colors.surface,
+        opacity: isDisabled ? 0.6 : 1,
+      },
+    ],
+    [isDisabled, props.checked, theme.colors.border, theme.colors.primary, theme.colors.surface],
+  );
+
+  return (
+    <Pressable
+      disabled={isDisabled}
+      onPress={() => props.onCheckedChange(!props.checked)}
+      style={styles.checkboxRow}
+    >
+      <View style={boxStyle}>
+        {props.checked ? <Text style={{ color: theme.colors.text, fontWeight: '900' }}>✓</Text> : null}
+      </View>
+      {props.label ? <Text style={{ color: theme.colors.text }}>{props.label}</Text> : null}
+    </Pressable>
+  );
+}
+
+export function SwitchRow(props) {
+  const theme = props.theme ?? defaultTheme;
+  const isDisabled = props.disabled ?? false;
+
+  return (
+    <View style={styles.switchRow}>
+      <Text style={{ color: theme.colors.text }}>{props.label}</Text>
+      <Switch
+        disabled={isDisabled}
+        value={props.value}
+        onValueChange={props.onValueChange}
+        trackColor={{ true: theme.colors.primary, false: theme.colors.border }}
+        thumbColor={theme.colors.text}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  checkboxRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  checkboxBox: {
+    width: 22,
+    height: 22,
+    borderWidth: 1,
+    borderRadius: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  switchRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+});

package/ui/feedback.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
+
+import { defaultTheme } from '../theme/Theme';
+
+export function Divider(props) {
+  const theme = props.theme ?? defaultTheme;
+  return <View style={[styles.divider, { backgroundColor: theme.colors.border }, props.style]} />;
+}
+
+export function Badge(props) {
+  const theme = props.theme ?? defaultTheme;
+  return (
+    <View
+      style={[
+        styles.badge,
+        { backgroundColor: props.backgroundColor ?? theme.colors.surface, borderColor: theme.colors.border },
+      ]}
+    >
+      <Text style={{ color: theme.colors.textMuted, fontSize: 12, fontWeight: '600' }}>
+        {props.label}
+      </Text>
+    </View>
+  );
+}
+
+export function Loading(props) {
+  const theme = props.theme ?? defaultTheme;
+  return (
+    <View style={styles.loading}>
+      <ActivityIndicator color={theme.colors.primary} />
+      {props.label ? <Text style={{ color: theme.colors.textMuted }}>{props.label}</Text> : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  divider: {
+    height: 1,
+    width: '100%',
+  },
+  badge: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderWidth: 1,
+    borderRadius: 999,
+    alignSelf: 'flex-start',
+  },
+  loading: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+});

package/ui/index.js

@@ -0,0 +1,7 @@
+export * from './layout';
+export * from './typography';
+export * from './feedback';
+export * from './controls';
+export * from './modalSheet';
+export * from './toast';
+export * from './screen';

package/ui/layout.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { View } from 'react-native';
+
+export function Stack(props) {
+  const childrenArray = React.Children.toArray(props.children);
+  return (
+    <View style={[{ flexDirection: 'column' }, props.style]}>
+      {childrenArray.map((child, index) => (
+        <View key={index} style={{ marginTop: index === 0 ? 0 : props.gap ?? 0 }}>
+          {child}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+export function Row(props) {
+  const childrenArray = React.Children.toArray(props.children);
+  return (
+    <View
+      style={[
+        {
+          flexDirection: 'row',
+          alignItems: props.align ?? 'center',
+          justifyContent: props.justify ?? 'flex-start',
+          flexWrap: props.wrap ? 'wrap' : 'nowrap',
+        },
+        props.style,
+      ]}
+    >
+      {childrenArray.map((child, index) => (
+        <View key={index} style={{ marginLeft: index === 0 ? 0 : props.gap ?? 0 }}>
+          {child}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+export function Spacer(props) {
+  return <View style={props.horizontal ? { width: props.size } : { height: props.size }} />;
+}

package/ui/modalSheet.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { defaultTheme } from '../theme/Theme';
+
+export function ModalSheet(props) {
+  const theme = props.theme ?? defaultTheme;
+
+  return (
+    <Modal visible={props.visible} animationType="slide" transparent onRequestClose={props.onClose}>
+      <Pressable style={styles.overlay} onPress={props.onClose}>
+        <View />
+      </Pressable>
+      <View
+        style={[
+          styles.sheet,
+          { backgroundColor: theme.colors.background, borderColor: theme.colors.border },
+        ]}
+      >
+        <View style={styles.header}>
+          <Text style={[styles.title, { color: theme.colors.text }]}>
+            {props.title ?? 'Sheet'}
+          </Text>
+          <Pressable onPress={props.onClose}>
+            <Text style={{ color: theme.colors.primary, fontWeight: '700' }}>Close</Text>
+          </Pressable>
+        </View>
+        <View style={styles.content}>{props.children}</View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+  sheet: {
+    borderTopWidth: 1,
+    paddingHorizontal: 16,
+    paddingTop: 12,
+    paddingBottom: 24,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '800',
+  },
+  content: {
+    marginTop: 12,
+    gap: 12,
+  },
+});

package/ui/screen.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { SafeAreaView, ScrollView, StyleSheet } from 'react-native';
+
+import { defaultTheme } from '../theme/Theme';
+
+export function Screen(props) {
+  const theme = props.theme ?? defaultTheme;
+
+  if (props.scroll) {
+    return (
+      <SafeAreaView style={[styles.safe, { backgroundColor: theme.colors.background }, props.style]}>
+        <ScrollView contentContainerStyle={[styles.content, props.contentStyle]}>{props.children}</ScrollView>
+      </SafeAreaView>
+    );
+  }
+
+  return (
+    <SafeAreaView style={[styles.safe, { backgroundColor: theme.colors.background }, props.style]}>
+      {props.children}
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  safe: { flex: 1 },
+  content: { padding: 16, gap: 12 },
+});

package/ui/toast.jsx

@@ -0,0 +1,87 @@
+import React, { createContext, useContext, useMemo, useRef, useState } from 'react';
+import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { defaultTheme } from '../theme/Theme';
+
+const ToastContext = createContext(null);
+
+export function ToastProvider(props) {
+  const theme = props.theme ?? defaultTheme;
+  const [toast, setToast] = useState(null);
+  const timer = useRef(null);
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  const api = useMemo(
+    () => ({
+      show: (options) => {
+        if (timer.current) clearTimeout(timer.current);
+        setToast(options);
+        Animated.timing(opacity, { toValue: 1, duration: 160, useNativeDriver: true }).start();
+        timer.current = setTimeout(() => {
+          Animated.timing(opacity, { toValue: 0, duration: 160, useNativeDriver: true }).start(() => {
+            setToast(null);
+          });
+        }, options.durationMs ?? 2500);
+      },
+      hide: () => {
+        if (timer.current) clearTimeout(timer.current);
+        Animated.timing(opacity, { toValue: 0, duration: 160, useNativeDriver: true }).start(() => {
+          setToast(null);
+        });
+      },
+    }),
+    [opacity],
+  );
+
+  const backgroundColor =
+    toast?.variant === 'danger'
+      ? theme.colors.danger
+      : toast?.variant === 'success'
+        ? '#16a34a'
+        : theme.colors.surface;
+
+  return (
+    <ToastContext.Provider value={api}>
+      {props.children}
+      {toast ? (
+        <Animated.View style={[styles.toastWrap, { opacity }]}>
+          <Pressable
+            onPress={() => api.hide()}
+            style={[
+              styles.toast,
+              { backgroundColor, borderColor: theme.colors.border },
+            ]}
+          >
+            <Text style={{ color: theme.colors.text }}>{toast.message}</Text>
+            <View style={{ width: 10 }} />
+            <Text style={{ color: theme.colors.textMuted }}>Tap to dismiss</Text>
+          </Pressable>
+        </Animated.View>
+      ) : null}
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error('useToast must be used within ToastProvider');
+  return ctx;
+}
+
+const styles = StyleSheet.create({
+  toastWrap: {
+    position: 'absolute',
+    left: 16,
+    right: 16,
+    bottom: 24,
+  },
+  toast: {
+    borderWidth: 1,
+    borderRadius: 14,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+});

package/ui/typography.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { defaultTheme } from '../theme/Theme';
+
+export function Title(props) {
+  const theme = props.theme ?? defaultTheme;
+  return (
+    <Text
+      {...props}
+      style={[{ fontSize: 20, fontWeight: '800', color: theme.colors.text }, props.style]}
+    />
+  );
+}
+
+export function Subtitle(props) {
+  const theme = props.theme ?? defaultTheme;
+  return (
+    <Text
+      {...props}
+      style={[{ fontSize: 14, color: theme.colors.textMuted }, props.style]}
+    />
+  );
+}
+
+export function SectionTitle(props) {
+  const theme = props.theme ?? defaultTheme;
+  return (
+    <Text
+      {...props}
+      style={[{ fontSize: 16, fontWeight: '700', color: theme.colors.text }, props.style]}
+    />
+  );
+}
+
+export function BodyText(props) {
+  const theme = props.theme ?? defaultTheme;
+  return (
+    <Text
+      {...props}
+      style={[{ fontSize: 14, lineHeight: 20, color: theme.colors.textMuted }, props.style]}
+    />
+  );
+}