@oneplatformdev/react-native-uikit 1.1.1 → 1.2.0

package/README.md

@@ -9,12 +9,17 @@ Reusable React Native theme, scaling, and UI components.
 Install with `npm install @oneplatformdev/react-native-uikit` and import ready-made components:
 
 ```tsx
-import { Button, Input, Typography, UIProvider } from '@oneplatformdev/react-native-uikit';
+import { Avatar, Button, Checkbox, EmptyListView, Input, PhotoPreview, Switch, Typography, UIProvider } from '@oneplatformdev/react-native-uikit';
 
 <UIProvider>
   <Typography text="Hello" />
   <Input label="Name" value={name} onChangeText={setName} />
   <Button text="Continue" onPress={onContinue} />
+  <Switch value={notificationsEnabled} onValueChange={setNotificationsEnabled} accessibilityLabel="Notifications" />
+  <Checkbox checked={accepted} onValueChange={setAccepted} accessibilityLabel="Accept terms" />
+  <PhotoPreview source={{ uri: photoUri }} onPress={onOpenPhoto} accessibilityLabel="Open photo" />
+  <EmptyListView title="No items" description="Try again later" />
+  <Avatar source={{ uri: avatarUri }} name="Mykhailo Novikov" />
 </UIProvider>
 ```
 
@@ -26,15 +31,20 @@ Run from the consuming project root after declaring `@oneplatformdev/react-nativ
 
 ```sh
 npx @oneplatformdev/react-native-uikit add typography
+npx @oneplatformdev/react-native-uikit add avatar
 npx @oneplatformdev/react-native-uikit add button
+npx @oneplatformdev/react-native-uikit add checkbox
 npx @oneplatformdev/react-native-uikit add input
 npx @oneplatformdev/react-native-uikit add screen-container
+npx @oneplatformdev/react-native-uikit add switch
 npx @oneplatformdev/react-native-uikit add custom-alert
+npx @oneplatformdev/react-native-uikit add empty-list-view
 npx @oneplatformdev/react-native-uikit add bottom-modal
 npx @oneplatformdev/react-native-uikit add connection-container
 npx @oneplatformdev/react-native-uikit add header-with-back-button
 npx @oneplatformdev/react-native-uikit add loader
 npx @oneplatformdev/react-native-uikit add logger
+npx @oneplatformdev/react-native-uikit add photo-preview
 npx @oneplatformdev/react-native-uikit add button --dir src/UIKit
 ```
 
@@ -295,6 +305,28 @@ Input derives its native accessibility label from `label` only when the caller o
 
 Owned/local source installation for Input: **available** with `npx @oneplatformdev/react-native-uikit add input`.
 
+## Switch and Checkbox
+
+Both are controlled: pass `value`/`onValueChange` to `Switch` or `checked`/`onValueChange` to `Checkbox`. They use theme colors by default, accept accessibility labels and hints, and keep a usable press target even with small visual dimensions.
+
+`Switch` defaults to a 40×24 track with a 20-unit thumb. Override `width`, `height`, `thumbSize`, track/thumb colors, or provide a custom `thumb` node. The consumer owns the custom node's appearance. The thumb animates when `value` changes.
+
+`Checkbox` defaults to a 22-unit slightly rounded square with a built-in checkmark. Override `size`, state colors, `borderWidth`, and `iconSize`/`iconColor`. Use `shape="circle"` for a radius derived from its size, or `shape="square"` with `borderRadius` (including `0`) for custom corners. Supply an `icon` node to replace the built-in indicator; the consumer owns that node's size and color.
+
+Owned source is available through `npx @oneplatformdev/react-native-uikit add switch` and `npx @oneplatformdev/react-native-uikit add checkbox`. Both are standalone components; Switch uses the existing `react-native-reanimated` peer.
+
+## PhotoPreview and EmptyListView
+
+`PhotoPreview` displays a supplied React Native image source. It defaults to a 120-unit square with the theme's medium radius. Set `width` and/or `height` for a different size; `aspectRatio` derives the missing dimension (width wins if both dimensions and a ratio are supplied). `style` is applied after the base container geometry, and `imageStyle` after the fill-image style. Supply `onPress` to make the image a button, `onRemovePress` for a separate remove control, or `overlay` for caller-owned content. A built-in × is used unless `removeIcon` is provided; supply localized accessibility labels for actions. The component does not open a modal or own image state.
+
+`EmptyListView` centers optional `visual`, `title`, and `description` in available list space. Strings and numbers use themed Typography (`title` and `body` by default); custom React nodes render as supplied. `titleStyle` and `descriptionStyle` apply to built-in text, while custom nodes own their styling. A supplied `action` replaces the built-in Button; otherwise the Button appears only when both `actionLabel` and `onActionPress` are given. The optional `accessibilityLabel` labels the visual without grouping the readable text or action.
+
+Owned source is available with `npx @oneplatformdev/react-native-uikit add photo-preview` and `npx @oneplatformdev/react-native-uikit add empty-list-view`. The latter also copies local Typography and Button dependencies.
+
+## Avatar
+
+`Avatar` accepts a React Native image `source` and defaults to a 40-unit circle. Override `size`, use `shape="square"` with `borderRadius` (including `0`), or customize `backgroundColor` and `textColor`. Fallback order is image → custom `fallback` → `fallbackText` → up to two initials from `name` → a dependency-free silhouette. If an image fails, the fallback appears; changing `source` allows the new image to load. `badge` is positioned at the edge without being clipped. Pass `onPress` for a labeled button; otherwise the avatar exposes image semantics. For a button, `accessibilityLabel` names the action and `imageAccessibilityLabel` is ignored; without `onPress`, `imageAccessibilityLabel` overrides the image label. `size` and `shape` remain authoritative over geometry in `style`/`imageStyle`. Provide localized accessibility text where needed. Owned source: `npx @oneplatformdev/react-native-uikit add avatar` (also installs local Typography).
+
 ## ScreenContainer, CustomAlert, and BottomModal
 
 `ScreenContainer` provides a theme-backed safe-area layout, optional scrolling, and optional keyboard-aware scrolling or avoidance. Pass `gradient={{ colors, locations, start, end }}` to render a caller-configured background across the entire screen, behind the safe-area content; omit it for the solid theme background. Gradient coordinates are normalized and are not scaled. Pass ordinary ScrollView props when scrolling is enabled; use `containerStyle` and `contentContainerStyle` for layout overrides.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneplatformdev/react-native-uikit",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "bin": {

package/registry/manifest.json

@@ -11,10 +11,22 @@
       "../../../utils": "@oneplatformdev/react-native-uikit"
     }
   },
+  "avatar": {
+    "folder": "Avatar",
+    "files": ["ui/Avatar.tsx", "presenters/useAvatar.ts", "ui/styles.ts", "types/types.ts", "index.ts"],
+    "componentDependencies": ["typography"],
+    "foundations": ["useUITheme", "useScaling", "Typography", "UIColors", "UIRadius", "ScalingFunctions"],
+    "dependencies": ["react", "react-native", "@oneplatformdev/react-native-uikit"],
+    "rewrites": {
+      "../../../theme": "@oneplatformdev/react-native-uikit",
+      "../../../utils": "@oneplatformdev/react-native-uikit"
+    }
+  },
   "button": {
     "folder": "Button",
     "files": ["ui/Button.tsx", "presenters/useButton.ts", "ui/styles.ts", "types/types.ts", "index.ts"],
     "componentDependencies": ["typography"],
+    "publicExports": { "Button": "ui/Button.tsx", "ButtonProps": "types/types.ts" },
     "foundations": ["useUITheme", "useScaling", "Typography", "TypographyProps", "UIColors", "UIButtonSizeTheme", "UIButtonVariantTheme", "ScalingFunctions"],
     "dependencies": ["react", "react-native", "@oneplatformdev/react-native-uikit"],
     "rewrites": {
@@ -22,6 +34,50 @@
       "../../../utils": "@oneplatformdev/react-native-uikit"
     }
   },
+  "checkbox": {
+    "folder": "Checkbox",
+    "files": ["ui/Checkbox.tsx", "ui/styles.ts", "types/types.ts", "index.ts"],
+    "componentDependencies": [],
+    "foundations": ["useUITheme", "useScaling", "UIColors", "UIRadius", "ScalingFunctions"],
+    "dependencies": ["react", "react-native", "@oneplatformdev/react-native-uikit"],
+    "rewrites": {
+      "../../../theme": "@oneplatformdev/react-native-uikit",
+      "../../../utils": "@oneplatformdev/react-native-uikit"
+    }
+  },
+  "switch": {
+    "folder": "Switch",
+    "files": ["ui/Switch.tsx", "presenters/useSwitch.ts", "ui/styles.ts", "types/types.ts", "index.ts"],
+    "componentDependencies": [],
+    "foundations": ["useUITheme", "useScaling", "ScalingFunctions"],
+    "dependencies": ["react", "react-native", "react-native-reanimated", "@oneplatformdev/react-native-uikit"],
+    "rewrites": {
+      "../../../theme": "@oneplatformdev/react-native-uikit",
+      "../../../utils": "@oneplatformdev/react-native-uikit"
+    }
+  },
+  "photo-preview": {
+    "folder": "PhotoPreview",
+    "files": ["ui/PhotoPreview.tsx", "ui/styles.ts", "types/types.ts", "index.ts"],
+    "componentDependencies": [],
+    "foundations": ["useUITheme", "useScaling", "UIColors", "UIRadius", "UISpacing", "ScalingFunctions"],
+    "dependencies": ["react", "react-native", "@oneplatformdev/react-native-uikit"],
+    "rewrites": {
+      "../../../theme": "@oneplatformdev/react-native-uikit",
+      "../../../utils": "@oneplatformdev/react-native-uikit"
+    }
+  },
+  "empty-list-view": {
+    "folder": "EmptyListView",
+    "files": ["ui/EmptyListView.tsx", "ui/styles.ts", "types/types.ts", "index.ts"],
+    "componentDependencies": ["typography", "button"],
+    "foundations": ["useUITheme", "useScaling", "Typography", "Button", "TypographyProps", "UISpacing", "ScalingFunctions"],
+    "dependencies": ["react", "react-native", "@oneplatformdev/react-native-uikit"],
+    "rewrites": {
+      "../../../theme": "@oneplatformdev/react-native-uikit",
+      "../../../utils": "@oneplatformdev/react-native-uikit"
+    }
+  },
   "input": {
     "folder": "Input",
     "files": ["ui/Input.tsx", "presenters/useInput.ts", "ui/styles.ts", "types/types.ts", "index.ts"],

package/src/components/Avatar/index.ts

@@ -0,0 +1,2 @@
+export { Avatar } from './ui/Avatar';
+export type { AvatarProps } from './types/types';

package/src/components/Avatar/presenters/useAvatar.ts

@@ -0,0 +1,33 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { ImageSourcePropType } from 'react-native';
+
+const getSourceKey = (source?: ImageSourcePropType): string | null => {
+    if (typeof source === 'number') return Number.isFinite(source) ? `asset:${source}` : null;
+    if (Array.isArray(source)) {
+        return source.some(item => typeof item.uri === 'string' && item.uri.trim()) ? JSON.stringify(source) : null;
+    }
+    return source && 'uri' in source && typeof source.uri === 'string' && source.uri.trim()
+        ? JSON.stringify(source) : null;
+};
+
+export const getInitials = (name?: string): string => name?.trim().split(/\s+/).slice(0, 2)
+    .map(word => Array.from(word)[0]?.toUpperCase() ?? '').join('') ?? '';
+
+export const useAvatar = (source?: ImageSourcePropType, name?: string) => {
+    const sourceKey = getSourceKey(source);
+    const [failedSourceKey, setFailedSourceKey] = useState<string | null>(null);
+
+    useEffect(() => {
+        setFailedSourceKey(null);
+    }, [sourceKey]);
+
+    const onImageError = useCallback(() => {
+        setFailedSourceKey(sourceKey);
+    }, [sourceKey]);
+
+    return {
+        showImage: sourceKey !== null && failedSourceKey !== sourceKey,
+        onImageError,
+        initials: getInitials(name),
+    };
+};

package/src/components/Avatar/types/types.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import type { ImageSourcePropType, ImageStyle, StyleProp, ViewStyle } from 'react-native';
+
+export interface AvatarProps {
+    source?: ImageSourcePropType;
+    name?: string;
+    fallbackText?: string;
+    fallback?: ReactNode;
+    size?: number;
+    shape?: 'circle' | 'square';
+    borderRadius?: number;
+    backgroundColor?: string;
+    textColor?: string;
+    imageStyle?: StyleProp<ImageStyle>;
+    style?: StyleProp<ViewStyle>;
+    badge?: ReactNode;
+    onPress?: () => void;
+    disabled?: boolean;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    imageAccessibilityLabel?: string;
+}

package/src/components/Avatar/ui/Avatar.tsx

@@ -0,0 +1,84 @@
+import { useMemo } from 'react';
+import { Image, Pressable, View } from 'react-native';
+import { Typography } from '../../Typography';
+import { useUITheme } from '../../../theme';
+import { useScaling } from '../../../utils';
+import { useAvatar } from '../presenters/useAvatar';
+import { getStyles } from './styles';
+import type { AvatarProps } from '../types/types';
+
+export const Avatar = ({
+    source,
+    name,
+    fallbackText,
+    fallback,
+    size = 40,
+    shape = 'circle',
+    borderRadius,
+    backgroundColor,
+    textColor,
+    imageStyle,
+    style,
+    badge,
+    onPress,
+    disabled = false,
+    accessibilityLabel,
+    accessibilityHint,
+    imageAccessibilityLabel,
+}: AvatarProps) => {
+    const { colors, radius } = useUITheme();
+    const scaling = useScaling();
+    const { styles, hitSlop, textSize, textLineHeight } = useMemo(
+        () => getStyles(colors, radius, scaling, size, shape, borderRadius, backgroundColor, textColor),
+        [colors, radius, scaling, size, shape, borderRadius, backgroundColor, textColor],
+    );
+    const { showImage, onImageError, initials } = useAvatar(source, name);
+    const text = fallbackText?.trim() || initials;
+    const fallbackLabel = name?.trim() || fallbackText?.trim() || 'Avatar';
+    const label = onPress
+        ? accessibilityLabel ?? fallbackLabel
+        : imageAccessibilityLabel ?? accessibilityLabel ?? fallbackLabel;
+    const content = showImage ? (
+        <Image source={source} onError={onImageError} accessible={false} style={[imageStyle, styles.image]} />
+    ) : fallback != null && typeof fallback !== 'boolean' ? (
+        typeof fallback === 'string' || typeof fallback === 'number'
+            ? <Typography text={fallback} size={textSize} lineHeight={textLineHeight} style={styles.text} accessible={false} />
+            : fallback
+    ) : text ? (
+        <Typography text={text} size={textSize} lineHeight={textLineHeight} style={styles.text} accessible={false} numberOfLines={1} />
+    ) : (
+        <View style={styles.generic} accessible={false}>
+            <View style={styles.genericHead} />
+            <View style={styles.genericShoulders} />
+        </View>
+    );
+
+    return (
+        <View style={[style, styles.wrapper]}>
+            {onPress ? (
+                <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel={label}
+                    accessibilityHint={accessibilityHint}
+                    accessibilityState={{ disabled }}
+                    disabled={disabled}
+                    hitSlop={hitSlop}
+                    onPress={onPress}
+                    style={styles.surface}
+                >
+                    {content}
+                </Pressable>
+            ) : (
+                <View accessible accessibilityRole="image" accessibilityLabel={label} style={styles.surface}>
+                    {content}
+                </View>
+            )}
+            {badge != null && typeof badge !== 'boolean' ? (
+                <View pointerEvents="box-none" style={styles.badge}>
+                    {typeof badge === 'string' || typeof badge === 'number'
+                        ? <Typography text={badge} variant="caption" /> : badge}
+                </View>
+            ) : null}
+        </View>
+    );
+};

package/src/components/Avatar/ui/styles.ts

@@ -0,0 +1,72 @@
+import { StyleSheet } from 'react-native';
+import type { UIColors, UIRadius } from '../../../theme';
+import type { ScalingFunctions } from '../../../utils';
+import type { AvatarProps } from '../types/types';
+
+export const getStyles = (
+    colors: UIColors,
+    radius: UIRadius,
+    scaling: ScalingFunctions,
+    size: number,
+    shape: AvatarProps['shape'],
+    borderRadius: AvatarProps['borderRadius'],
+    backgroundColor: AvatarProps['backgroundColor'],
+    textColor: AvatarProps['textColor'],
+) => {
+    const designSize = Number.isFinite(size) && size > 0 ? size : 40;
+    const scaledSize = scaling.scaleHorizontal(designSize);
+    const designRadius = borderRadius !== undefined && Number.isFinite(borderRadius)
+        ? Math.max(0, borderRadius) : radius.sm;
+    const foreground = textColor ?? colors.textMuted;
+
+    const styles = StyleSheet.create({
+        wrapper: {
+            width: scaledSize,
+            height: scaledSize,
+            overflow: 'visible',
+        },
+        surface: {
+            width: scaledSize,
+            height: scaledSize,
+            borderRadius: shape === 'square' ? scaling.scaleHorizontal(designRadius) : scaledSize / 2,
+            overflow: 'hidden',
+            backgroundColor: backgroundColor ?? colors.surface,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        image: {
+            ...StyleSheet.absoluteFill,
+        },
+        text: {
+            color: foreground,
+            textAlign: 'center',
+            maxWidth: '100%',
+        },
+        generic: {
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        genericHead: {
+            width: scaledSize * 0.23,
+            height: scaledSize * 0.23,
+            borderRadius: scaledSize * 0.115,
+            backgroundColor: foreground,
+        },
+        genericShoulders: {
+            width: scaledSize * 0.48,
+            height: scaledSize * 0.22,
+            marginTop: scaledSize * 0.04,
+            borderTopLeftRadius: scaledSize * 0.24,
+            borderTopRightRadius: scaledSize * 0.24,
+            backgroundColor: foreground,
+        },
+        badge: {
+            position: 'absolute',
+            right: -scaledSize * 0.08,
+            bottom: -scaledSize * 0.08,
+        },
+    });
+    const hitSlop = scaling.scaleHorizontal(Math.max(8, (44 - designSize) / 2));
+
+    return { styles, hitSlop, textSize: designSize * 0.34, textLineHeight: designSize * 0.42 };
+};

package/src/components/Button/index.ts

@@ -1,8 +1,2 @@
-export { Button } from './ui/Button';
-export type {
-    ButtonLabelProps,
-    ButtonLoadingAppearance,
-    ButtonProps,
-    ButtonSize,
-    ButtonVariant,
-} from './types/types';
+export * from './ui/Button';
+export * from './types/types';

package/src/components/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './ui/Checkbox';
+export type { CheckboxProps } from './types/types';

package/src/components/Checkbox/types/types.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface CheckboxProps {
+    checked: boolean;
+    onValueChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    size?: number;
+    shape?: 'square' | 'circle';
+    borderRadius?: number;
+    borderWidth?: number;
+    checkedBackgroundColor?: string;
+    uncheckedBackgroundColor?: string;
+    checkedBorderColor?: string;
+    uncheckedBorderColor?: string;
+    disabledBackgroundColor?: string;
+    disabledBorderColor?: string;
+    icon?: ReactNode;
+    iconSize?: number;
+    iconColor?: string;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    style?: StyleProp<ViewStyle>;
+}

package/src/components/Checkbox/ui/Checkbox.tsx

@@ -0,0 +1,72 @@
+import { useCallback, useMemo } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { useUITheme } from '../../../theme';
+import { useScaling } from '../../../utils';
+import { getStyles } from './styles';
+import type { CheckboxProps } from '../types/types';
+
+export const Checkbox = ({
+    checked,
+    onValueChange,
+    disabled = false,
+    size = 22,
+    shape = 'square',
+    borderRadius,
+    borderWidth,
+    checkedBackgroundColor,
+    uncheckedBackgroundColor,
+    checkedBorderColor,
+    uncheckedBorderColor,
+    disabledBackgroundColor,
+    disabledBorderColor,
+    icon,
+    iconSize,
+    iconColor,
+    accessibilityLabel,
+    accessibilityHint,
+    style,
+}: CheckboxProps) => {
+    const { colors, radius } = useUITheme();
+    const scaling = useScaling();
+    const { styles, hitSlop } = useMemo(() => getStyles(colors, radius, scaling, checked, disabled, {
+        size,
+        shape,
+        borderRadius,
+        borderWidth,
+        checkedBackgroundColor,
+        uncheckedBackgroundColor,
+        checkedBorderColor,
+        uncheckedBorderColor,
+        disabledBackgroundColor,
+        disabledBorderColor,
+        iconSize,
+        iconColor,
+    }), [
+        colors, radius, scaling, checked, disabled, size, shape, borderRadius, borderWidth,
+        checkedBackgroundColor, uncheckedBackgroundColor, checkedBorderColor, uncheckedBorderColor,
+        disabledBackgroundColor, disabledBorderColor, iconSize, iconColor,
+    ]);
+    const onPress = useCallback(() => {
+        if (!disabled) onValueChange?.(!checked);
+    }, [checked, disabled, onValueChange]);
+
+    return (
+        <Pressable
+            accessibilityRole="checkbox"
+            accessibilityLabel={accessibilityLabel}
+            accessibilityHint={accessibilityHint}
+            accessibilityState={{ checked, disabled }}
+            disabled={disabled}
+            hitSlop={hitSlop}
+            onPress={onPress}
+            style={[styles.container, style]}
+        >
+            {checked ? (
+                <View pointerEvents="none">
+                    {icon === undefined ? <View style={styles.indicator} />
+                        : typeof icon === 'string' || typeof icon === 'number' ? <Text>{icon}</Text> : icon}
+                </View>
+            ) : null}
+        </Pressable>
+    );
+};

package/src/components/Checkbox/ui/styles.ts

@@ -0,0 +1,67 @@
+import { StyleSheet } from 'react-native';
+import type { UIColors, UIRadius } from '../../../theme';
+import type { ScalingFunctions } from '../../../utils';
+import type { CheckboxProps } from '../types/types';
+
+type CheckboxVisualProps = Pick<CheckboxProps,
+    | 'size' | 'shape' | 'borderRadius' | 'borderWidth' | 'checkedBackgroundColor' | 'uncheckedBackgroundColor'
+    | 'checkedBorderColor' | 'uncheckedBorderColor' | 'disabledBackgroundColor' | 'disabledBorderColor'
+    | 'iconSize' | 'iconColor'>;
+
+const positiveOr = (value: number | undefined, fallback: number) =>
+    value !== undefined && Number.isFinite(value) && value > 0 ? value : fallback;
+
+export const getStyles = (
+    colors: UIColors,
+    radius: UIRadius,
+    scaling: ScalingFunctions,
+    checked: boolean,
+    disabled: boolean,
+    props: CheckboxVisualProps,
+) => {
+    const designSize = positiveOr(props.size, 22);
+    const designBorderWidth = Math.min(
+        props.borderWidth !== undefined && Number.isFinite(props.borderWidth) ? Math.max(0, props.borderWidth) : 2,
+        designSize / 4,
+    );
+    const designIconSize = Math.min(positiveOr(props.iconSize, 12), designSize - 2 * designBorderWidth);
+    const designRadius = props.borderRadius !== undefined && Number.isFinite(props.borderRadius)
+        ? Math.max(0, props.borderRadius) : radius.sm;
+    const size = scaling.scaleHorizontal(designSize);
+    const borderWidth = scaling.scaleHorizontal(designBorderWidth);
+    const iconSize = scaling.scaleHorizontal(designIconSize);
+    const backgroundColor = disabled
+        ? props.disabledBackgroundColor ?? colors.disabled
+        : checked ? props.checkedBackgroundColor ?? colors.primary : props.uncheckedBackgroundColor ?? colors.background;
+    const borderColor = disabled
+        ? props.disabledBorderColor ?? colors.disabled
+        : checked ? props.checkedBorderColor ?? colors.primary : props.uncheckedBorderColor ?? colors.border;
+    const indicatorColor = props.iconColor ?? (disabled ? colors.onDisabled : colors.onPrimary);
+
+    const styles = StyleSheet.create({
+        container: {
+            width: size,
+            height: size,
+            borderWidth,
+            borderRadius: props.shape === 'circle'
+                ? size / 2
+                : scaling.scaleHorizontal(designRadius),
+            backgroundColor,
+            borderColor,
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+        },
+        indicator: {
+            width: iconSize * 0.55,
+            height: iconSize * 0.8,
+            borderRightWidth: scaling.scaleHorizontal(Math.min(2, designIconSize / 4)),
+            borderBottomWidth: scaling.scaleHorizontal(Math.min(2, designIconSize / 4)),
+            borderColor: indicatorColor,
+            transform: [{ rotate: '45deg' }],
+        },
+    });
+    const hitSlop = scaling.scaleHorizontal(Math.max(11, (44 - designSize) / 2));
+
+    return { styles, hitSlop };
+};

package/src/components/EmptyListView/index.ts

@@ -0,0 +1,2 @@
+export { EmptyListView } from './ui/EmptyListView';
+export type { EmptyListViewProps } from './types/types';

package/src/components/EmptyListView/types/types.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { TypographyProps } from '../../Typography';
+
+export interface EmptyListViewProps {
+    visual?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    titleVariant?: TypographyProps['variant'];
+    descriptionVariant?: TypographyProps['variant'];
+    actionLabel?: string;
+    onActionPress?: () => void;
+    action?: ReactNode;
+    /** Labels the optional visual without grouping the readable text and action. */
+    accessibilityLabel?: string;
+    style?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    visualStyle?: StyleProp<ViewStyle>;
+    titleStyle?: StyleProp<TextStyle>;
+    descriptionStyle?: StyleProp<TextStyle>;
+}

package/src/components/EmptyListView/ui/EmptyListView.tsx

@@ -0,0 +1,58 @@
+import { useMemo } from 'react';
+import { View } from 'react-native';
+import { Button } from '../../Button';
+import { Typography } from '../../Typography';
+import { useUITheme } from '../../../theme';
+import { useScaling } from '../../../utils';
+import { getStyles } from './styles';
+import type { EmptyListViewProps } from '../types/types';
+
+export const EmptyListView = ({
+    visual,
+    title,
+    description,
+    titleVariant = 'title',
+    descriptionVariant = 'body',
+    actionLabel,
+    onActionPress,
+    action,
+    accessibilityLabel,
+    style,
+    contentStyle,
+    visualStyle,
+    titleStyle,
+    descriptionStyle,
+}: EmptyListViewProps) => {
+    const { spacing } = useUITheme();
+    const scaling = useScaling();
+    const styles = useMemo(() => getStyles(spacing, scaling), [spacing, scaling]);
+
+    return (
+        <View style={[styles.container, style]}>
+            <View style={[styles.content, contentStyle]}>
+                {visual != null && visual !== false ? (
+                    <View
+                        accessible={accessibilityLabel !== undefined}
+                        accessibilityLabel={accessibilityLabel}
+                        style={[styles.visual, visualStyle]}
+                    >
+                        {typeof visual === 'string' || typeof visual === 'number'
+                            ? <Typography text={visual} /> : visual}
+                    </View>
+                ) : null}
+                {title != null ? (
+                    typeof title === 'string' || typeof title === 'number'
+                        ? <Typography text={title} variant={titleVariant} style={[styles.title, titleStyle]} />
+                        : title
+                ) : null}
+                {description != null ? (
+                    typeof description === 'string' || typeof description === 'number'
+                        ? <Typography text={description} variant={descriptionVariant} color="textMuted" style={[styles.description, descriptionStyle]} />
+                        : description
+                ) : null}
+                {action != null && action !== false ? action : actionLabel && onActionPress
+                    ? <Button text={actionLabel} onPress={onActionPress} /> : null}
+            </View>
+        </View>
+    );
+};

package/src/components/EmptyListView/ui/styles.ts

@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native';
+import type { UISpacing } from '../../../theme';
+import type { ScalingFunctions } from '../../../utils';
+
+export const getStyles = (spacing: UISpacing, scaling: ScalingFunctions) => {
+    const styles = StyleSheet.create({
+        container: {
+            flexGrow: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            paddingHorizontal: scaling.scaleHorizontal(spacing.lg),
+            paddingVertical: scaling.scaleVertical(spacing.xl),
+        },
+        content: {
+            width: '100%',
+            alignItems: 'center',
+            gap: scaling.scaleVertical(spacing.md),
+        },
+        visual: {
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        title: {
+            textAlign: 'center',
+        },
+        description: {
+            textAlign: 'center',
+        },
+    });
+
+    return styles;
+};

package/src/components/PhotoPreview/index.ts

@@ -0,0 +1,2 @@
+export { PhotoPreview } from './ui/PhotoPreview';
+export type { PhotoPreviewProps } from './types/types';

package/src/components/PhotoPreview/types/types.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import type { ImageResizeMode, ImageSourcePropType, ImageStyle, StyleProp, ViewStyle } from 'react-native';
+
+export interface PhotoPreviewProps {
+    source: ImageSourcePropType;
+    width?: number;
+    height?: number;
+    aspectRatio?: number;
+    borderRadius?: number;
+    resizeMode?: ImageResizeMode;
+    overlay?: ReactNode;
+    removeIcon?: ReactNode;
+    onRemovePress?: () => void;
+    removeAccessibilityLabel?: string;
+    removeAccessibilityHint?: string;
+    onPress?: () => void;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+    imageStyle?: StyleProp<ImageStyle>;
+}

package/src/components/PhotoPreview/ui/PhotoPreview.tsx

@@ -0,0 +1,83 @@
+import { useMemo } from 'react';
+import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useUITheme } from '../../../theme';
+import { useScaling } from '../../../utils';
+import { getStyles } from './styles';
+import type { PhotoPreviewProps } from '../types/types';
+
+export const PhotoPreview = ({
+    source,
+    width,
+    height,
+    aspectRatio,
+    borderRadius,
+    resizeMode = 'cover',
+    overlay,
+    removeIcon,
+    onRemovePress,
+    removeAccessibilityLabel,
+    removeAccessibilityHint,
+    onPress,
+    accessibilityLabel,
+    accessibilityHint,
+    disabled = false,
+    style,
+    imageStyle,
+}: PhotoPreviewProps) => {
+    const { colors, radius, spacing } = useUITheme();
+    const scaling = useScaling();
+    const { styles, removeHitSlop } = useMemo(
+        () => getStyles(colors, radius, spacing, scaling, width, height, aspectRatio, borderRadius),
+        [colors, radius, spacing, scaling, width, height, aspectRatio, borderRadius],
+    );
+    const image = (
+        <Image
+            source={source}
+            resizeMode={resizeMode}
+            accessible={!onPress}
+            accessibilityRole={onPress ? undefined : 'image'}
+            accessibilityLabel={onPress ? undefined : accessibilityLabel}
+            accessibilityHint={onPress ? undefined : accessibilityHint}
+            style={[styles.image, imageStyle]}
+        />
+    );
+
+    return (
+        <View style={[styles.container, style]}>
+            {onPress ? (
+                <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel={accessibilityLabel}
+                    accessibilityHint={accessibilityHint}
+                    accessibilityState={{ disabled }}
+                    disabled={disabled}
+                    onPress={onPress}
+                    style={StyleSheet.absoluteFill}
+                >
+                    {image}
+                </Pressable>
+            ) : image}
+            {overlay != null && overlay !== false ? (
+                <View pointerEvents={disabled ? 'none' : 'box-none'} style={styles.overlay}>
+                    {typeof overlay === 'string' || typeof overlay === 'number' ? <Text>{overlay}</Text> : overlay}
+                </View>
+            ) : null}
+            {onRemovePress ? (
+                <Pressable
+                    accessibilityRole="button"
+                    accessibilityLabel={removeAccessibilityLabel ?? 'Remove photo'}
+                    accessibilityHint={removeAccessibilityHint}
+                    accessibilityState={{ disabled }}
+                    disabled={disabled}
+                    hitSlop={removeHitSlop}
+                    onPress={onRemovePress}
+                    style={styles.remove}
+                >
+                    {removeIcon === undefined ? <Text style={styles.removeText}>×</Text>
+                        : typeof removeIcon === 'string' || typeof removeIcon === 'number'
+                            ? <Text style={styles.removeText}>{removeIcon}</Text> : removeIcon}
+                </Pressable>
+            ) : null}
+        </View>
+    );
+};

package/src/components/PhotoPreview/ui/styles.ts

@@ -0,0 +1,68 @@
+import { StyleSheet } from 'react-native';
+import type { UIColors, UIRadius, UISpacing } from '../../../theme';
+import type { ScalingFunctions } from '../../../utils';
+import type { PhotoPreviewProps } from '../types/types';
+
+const positiveOrUndefined = (value: number | undefined) =>
+    value !== undefined && Number.isFinite(value) && value > 0 ? value : undefined;
+
+export const getStyles = (
+    colors: UIColors,
+    radius: UIRadius,
+    spacing: UISpacing,
+    scaling: ScalingFunctions,
+    width: PhotoPreviewProps['width'],
+    height: PhotoPreviewProps['height'],
+    aspectRatio: PhotoPreviewProps['aspectRatio'],
+    borderRadius: PhotoPreviewProps['borderRadius'],
+) => {
+    const designWidth = positiveOrUndefined(width);
+    const designHeight = positiveOrUndefined(height);
+    const ratio = positiveOrUndefined(aspectRatio);
+    const useWidth = designWidth !== undefined || designHeight === undefined;
+    const derivedRatio = ratio ?? (designWidth === undefined || designHeight === undefined ? 1 : undefined);
+    const containerWidth = useWidth ? scaling.scaleHorizontal(designWidth ?? 120) : undefined;
+    const containerHeight = derivedRatio === undefined || !useWidth
+        ? designHeight === undefined ? undefined : scaling.scaleVertical(designHeight)
+        : undefined;
+    const designRadius = borderRadius !== undefined && Number.isFinite(borderRadius)
+        ? Math.max(0, borderRadius) : radius.md;
+
+    const styles = StyleSheet.create({
+        container: {
+            width: containerWidth,
+            height: containerHeight,
+            aspectRatio: derivedRatio,
+            borderRadius: scaling.scaleHorizontal(designRadius),
+            backgroundColor: colors.surface,
+            overflow: 'hidden',
+        },
+        image: {
+            ...StyleSheet.absoluteFill,
+        },
+        overlay: {
+            ...StyleSheet.absoluteFill,
+        },
+        remove: {
+            position: 'absolute',
+            top: scaling.scaleVertical(spacing.sm),
+            right: scaling.scaleHorizontal(spacing.sm),
+            zIndex: 1,
+            width: scaling.scaleHorizontal(28),
+            height: scaling.scaleHorizontal(28),
+            borderRadius: scaling.scaleHorizontal(14),
+            backgroundColor: colors.surface,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        removeText: {
+            color: colors.text,
+            fontSize: scaling.scaleFontSize(22),
+            lineHeight: scaling.scaleLineHeight(24),
+            textAlign: 'center',
+        },
+    });
+    const removeHitSlop = scaling.scaleHorizontal(8);
+
+    return { styles, removeHitSlop };
+};

package/src/components/Switch/index.ts

@@ -0,0 +1,2 @@
+export { Switch } from './ui/Switch';
+export type { SwitchProps } from './types/types';

package/src/components/Switch/presenters/useSwitch.ts

@@ -0,0 +1,21 @@
+import { useCallback, useEffect } from 'react';
+import { ReduceMotion, useSharedValue, withTiming } from 'react-native-reanimated';
+import type { SwitchProps } from '../types/types';
+
+export const useSwitch = (
+    value: boolean,
+    disabled: boolean,
+    onValueChange: SwitchProps['onValueChange'],
+) => {
+    const progress = useSharedValue(value ? 1 : 0);
+
+    useEffect(() => {
+        progress.value = withTiming(value ? 1 : 0, { duration: 200, reduceMotion: ReduceMotion.System });
+    }, [progress, value]);
+
+    const onPress = useCallback(() => {
+        if (!disabled) onValueChange?.(!value);
+    }, [disabled, onValueChange, value]);
+
+    return { onPress, progress };
+};

package/src/components/Switch/types/types.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface SwitchProps {
+    value: boolean;
+    onValueChange?: (value: boolean) => void;
+    disabled?: boolean;
+    width?: number;
+    height?: number;
+    thumbSize?: number;
+    activeTrackColor?: string;
+    inactiveTrackColor?: string;
+    disabledTrackColor?: string;
+    thumbColor?: string;
+    disabledThumbColor?: string;
+    thumb?: ReactNode;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+    style?: StyleProp<ViewStyle>;
+}

package/src/components/Switch/ui/Switch.tsx

@@ -0,0 +1,60 @@
+import { useMemo } from 'react';
+import { Pressable, Text } from 'react-native';
+import Reanimated from 'react-native-reanimated';
+import { useUITheme } from '../../../theme';
+import { useScaling } from '../../../utils';
+import { useSwitch } from '../presenters/useSwitch';
+import { getStyles, getSwitchGeometry, useSwitchAnimatedStyles } from './styles';
+import type { SwitchProps } from '../types/types';
+
+const AnimatedPressable = Reanimated.createAnimatedComponent(Pressable);
+
+export const Switch = ({
+    value,
+    onValueChange,
+    disabled = false,
+    width = 40,
+    height = 24,
+    thumbSize = 20,
+    activeTrackColor,
+    inactiveTrackColor,
+    disabledTrackColor,
+    thumbColor,
+    disabledThumbColor,
+    thumb,
+    accessibilityLabel,
+    accessibilityHint,
+    style,
+}: SwitchProps) => {
+    const { colors } = useUITheme();
+    const scaling = useScaling();
+    const geometry = useMemo(() => getSwitchGeometry(scaling, width, height, thumbSize), [scaling, width, height, thumbSize]);
+    const styles = useMemo(
+        () => getStyles(geometry, disabled ? disabledThumbColor ?? colors.surface : thumbColor ?? colors.background),
+        [colors.background, colors.surface, disabled, disabledThumbColor, geometry, thumbColor],
+    );
+    const { onPress, progress } = useSwitch(value, disabled, onValueChange);
+    const { trackStyle, thumbStyle } = useSwitchAnimatedStyles(
+        progress,
+        geometry.travelDistance,
+        disabled ? disabledTrackColor ?? colors.disabled : inactiveTrackColor ?? colors.border,
+        disabled ? disabledTrackColor ?? colors.disabled : activeTrackColor ?? colors.primary,
+    );
+
+    return (
+        <AnimatedPressable
+            accessibilityRole="switch"
+            accessibilityLabel={accessibilityLabel}
+            accessibilityHint={accessibilityHint}
+            accessibilityState={{ checked: value, disabled }}
+            disabled={disabled}
+            hitSlop={geometry.hitSlop}
+            onPress={onPress}
+            style={[styles.track, trackStyle, style]}
+        >
+            <Reanimated.View style={[styles.thumb, thumbStyle]} pointerEvents="none">
+                {typeof thumb === 'string' || typeof thumb === 'number' ? <Text>{thumb}</Text> : thumb}
+            </Reanimated.View>
+        </AnimatedPressable>
+    );
+};

package/src/components/Switch/ui/styles.ts

@@ -0,0 +1,70 @@
+import { StyleSheet } from 'react-native';
+import { interpolateColor, useAnimatedStyle } from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+import type { ScalingFunctions } from '../../../utils';
+
+const positiveOr = (value: number, fallback: number) => Number.isFinite(value) && value > 0 ? value : fallback;
+
+export const getSwitchGeometry = (scaling: ScalingFunctions, width: number, height: number, thumbSize: number) => {
+    const designWidth = positiveOr(width, 40);
+    const designHeight = positiveOr(height, 24);
+    const designPadding = Math.min(2, designWidth / 4, designHeight / 4);
+    const designThumb = Math.min(positiveOr(thumbSize, 20), Math.min(designWidth, designHeight) - 2 * designPadding);
+    const trackWidth = scaling.scaleHorizontal(designWidth);
+    const trackHeight = scaling.scaleHorizontal(designHeight);
+    const padding = scaling.scaleHorizontal(designPadding);
+    const thumb = scaling.scaleHorizontal(designThumb);
+
+    return {
+        trackWidth,
+        trackHeight,
+        padding,
+        thumb,
+        travelDistance: Math.max(0, trackWidth - 2 * padding - thumb),
+        hitSlop: {
+            top: scaling.scaleHorizontal(Math.max(10, (44 - designHeight) / 2)),
+            bottom: scaling.scaleHorizontal(Math.max(10, (44 - designHeight) / 2)),
+            left: scaling.scaleHorizontal(Math.max(10, (44 - designWidth) / 2)),
+            right: scaling.scaleHorizontal(Math.max(10, (44 - designWidth) / 2)),
+        },
+    };
+};
+
+export const getStyles = (geometry: ReturnType<typeof getSwitchGeometry>, thumbColor: string) => {
+    const styles = StyleSheet.create({
+        track: {
+            width: geometry.trackWidth,
+            height: geometry.trackHeight,
+            padding: geometry.padding,
+            borderRadius: geometry.trackHeight / 2,
+            justifyContent: 'center',
+            flexShrink: 0,
+        },
+        thumb: {
+            width: geometry.thumb,
+            height: geometry.thumb,
+            borderRadius: geometry.thumb / 2,
+            backgroundColor: thumbColor,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+    });
+
+    return styles;
+};
+
+export const useSwitchAnimatedStyles = (
+    progress: SharedValue<number>,
+    travelDistance: number,
+    inactiveTrackColor: string,
+    activeTrackColor: string,
+) => {
+    const trackStyle = useAnimatedStyle(() => ({
+        backgroundColor: interpolateColor(progress.value, [0, 1], [inactiveTrackColor, activeTrackColor]),
+    }), [activeTrackColor, inactiveTrackColor]);
+    const thumbStyle = useAnimatedStyle(() => ({
+        transform: [{ translateX: progress.value * travelDistance }],
+    }), [travelDistance]);
+
+    return { trackStyle, thumbStyle };
+};

package/src/index.ts

@@ -1,12 +1,17 @@
+export * from './components/Avatar';
 export * from './components/Button';
 export * from './components/BottomModal';
+export * from './components/Checkbox';
 export * from './components/ConnectionContainer';
 export * from './components/CustomAlert';
+export * from './components/EmptyListView';
 export * from './components/HeaderWithBackButton';
 export * from './components/Input';
 export * from './components/Loader';
 export * from './components/Logger';
+export * from './components/PhotoPreview';
 export * from './components/ScreenContainer';
+export * from './components/Switch';
 export * from './components/Typography';
 export * from './provider';
 export * from './theme';