@mrmeg/expo-ui 0.1.0

package/dist/components/InputOTP.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useRef, useState, useCallback } from "react";
+import { View, TextInput as RNTextInput, Pressable, StyleSheet, Platform, } from "react-native";
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, useReducedMotion, } from "react-native-reanimated";
+import { useTheme } from "../hooks/useTheme";
+import { spacing } from "../constants/spacing";
+import { fontFamilies } from "../constants/fonts";
+import { StyledText } from "./StyledText";
+const CELL_WIDTH = 36;
+const CELL_HEIGHT = 40;
+const CELL_FONT_SIZE = 20;
+const CELL_FONT_WEIGHT = "600";
+const BULLET = "\u2022";
+const ANIM_DURATION = 60;
+/**
+ * OTP/verification code input with individual character cells.
+ *
+ * A single hidden TextInput captures keyboard input. Visible cells are
+ * Pressable views that focus the hidden input on tap.
+ *
+ * Usage:
+ * ```tsx
+ * <InputOTP
+ *   length={6}
+ *   value={code}
+ *   onChangeText={setCode}
+ *   onComplete={(code) => verify(code)}
+ * />
+ * ```
+ */
+function InputOTP({ length = 6, value = "", onChangeText, onComplete, error = false, errorText, disabled = false, autoFocus = false, secureTextEntry = false, inputMode = "numeric", style: styleOverride, }) {
+    const { theme } = useTheme();
+    const reduceMotion = useReducedMotion();
+    const inputRef = useRef(null);
+    const [focused, setFocused] = useState(false);
+    const styles = createStyles(theme);
+    const hasError = error || !!errorText;
+    // Active cell index: next empty cell, or last cell when full
+    const activeIndex = Math.min(value.length, length - 1);
+    const focusInput = useCallback(() => {
+        if (!disabled) {
+            inputRef.current?.focus();
+        }
+    }, [disabled]);
+    const handleChangeText = useCallback((text) => {
+        // Filter non-digits when numeric mode
+        let filtered = text;
+        if (inputMode === "numeric") {
+            filtered = text.replace(/[^0-9]/g, "");
+        }
+        // Truncate to length
+        const truncated = filtered.slice(0, length);
+        onChangeText?.(truncated);
+        if (truncated.length === length) {
+            onComplete?.(truncated);
+        }
+    }, [inputMode, length, onChangeText, onComplete]);
+    const handleKeyPress = useCallback((e) => {
+        if (e.nativeEvent.key === "Backspace" && value.length === 0) {
+            // Already empty, nothing to do
+            return;
+        }
+    }, [value]);
+    const handleFocus = useCallback(() => {
+        setFocused(true);
+    }, []);
+    const handleBlur = useCallback(() => {
+        setFocused(false);
+    }, []);
+    return (_jsxs(View, { style: StyleSheet.flatten([styles.container, styleOverride]), children: [_jsx(RNTextInput, { ref: inputRef, value: value, onChangeText: handleChangeText, onKeyPress: handleKeyPress, onFocus: handleFocus, onBlur: handleBlur, maxLength: length, autoFocus: autoFocus, editable: !disabled, inputMode: inputMode, autoComplete: "one-time-code", textContentType: "oneTimeCode", caretHidden: true, style: styles.hiddenInput, accessibilityLabel: "Verification code input", importantForAccessibility: "yes" }), _jsx(View, { style: styles.cellRow, children: Array.from({ length }, (_, index) => {
+                    const char = value[index] ?? "";
+                    const isActive = focused && index === activeIndex;
+                    const displayChar = char
+                        ? secureTextEntry
+                            ? BULLET
+                            : char
+                        : "";
+                    return (_jsx(OTPCell, { index: index, total: length, char: displayChar, isActive: isActive, hasError: hasError, disabled: disabled, theme: theme, reduceMotion: reduceMotion, onPress: focusInput }, index));
+                }) }), !!errorText && (_jsx(StyledText, { style: [styles.errorText], children: errorText }))] }));
+}
+function OTPCell({ index, total, char, isActive, hasError, disabled, theme, reduceMotion, onPress, }) {
+    const borderWidth = useSharedValue(isActive && !hasError ? 2 : 1);
+    const borderColor = useSharedValue(hasError
+        ? theme.colors.destructive
+        : isActive
+            ? theme.colors.primary
+            : theme.colors.border);
+    // Update animated values when state changes
+    React.useEffect(() => {
+        const duration = reduceMotion ? 0 : ANIM_DURATION;
+        const targetWidth = isActive && !hasError ? 2 : 1;
+        const targetColor = hasError
+            ? theme.colors.destructive
+            : isActive
+                ? theme.colors.primary
+                : theme.colors.border;
+        borderWidth.value = withTiming(targetWidth, { duration });
+        borderColor.value = withTiming(targetColor, { duration });
+    }, [
+        isActive,
+        hasError,
+        theme.colors.destructive,
+        theme.colors.primary,
+        theme.colors.border,
+        reduceMotion,
+        borderWidth,
+        borderColor,
+    ]);
+    const animatedStyle = useAnimatedStyle(() => ({
+        borderWidth: borderWidth.value,
+        borderColor: borderColor.value,
+    }));
+    return (_jsx(Pressable, { onPress: onPress, disabled: disabled, accessibilityRole: "button", accessibilityLabel: `Digit ${index + 1} of ${total}`, accessibilityState: { disabled }, children: _jsx(Animated.View, { style: [
+                {
+                    width: CELL_WIDTH,
+                    height: CELL_HEIGHT,
+                    borderRadius: spacing.radiusMd,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    backgroundColor: "transparent",
+                    opacity: disabled ? 0.5 : 1,
+                },
+                animatedStyle,
+            ], children: _jsx(StyledText, { style: {
+                    fontSize: CELL_FONT_SIZE,
+                    fontWeight: CELL_FONT_WEIGHT,
+                    fontFamily: fontFamilies.sansSerif.regular,
+                    color: theme.colors.text,
+                    textAlign: "center",
+                    lineHeight: CELL_FONT_SIZE * 1.2,
+                }, children: char }) }) }));
+}
+const createStyles = (theme) => StyleSheet.create({
+    container: {
+        alignItems: "center",
+    },
+    hiddenInput: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        opacity: 0,
+        ...(Platform.OS === "web" && { caretColor: "transparent" }),
+    },
+    cellRow: {
+        flexDirection: "row",
+        gap: spacing.sm,
+    },
+    errorText: {
+        fontSize: 12,
+        fontFamily: fontFamilies.sansSerif.regular,
+        color: theme.colors.destructive,
+        marginTop: spacing.xs,
+    },
+});
+export { InputOTP };

package/dist/components/Label.d.ts

@@ -0,0 +1,61 @@
+import { StyleProp, TextStyle } from "react-native";
+export interface LabelProps {
+    /**
+     * The label text
+     */
+    children: string;
+    /**
+     * Native ID to associate with a form control
+     */
+    nativeID?: string;
+    /**
+     * Whether the field is required (shows asterisk)
+     */
+    required?: boolean;
+    /**
+     * Size variant
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Whether the label is in an error state
+     */
+    error?: boolean;
+    /**
+     * Whether the label is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Optional style override for the text
+     */
+    style?: StyleProp<TextStyle>;
+    /**
+     * Press handler (useful for focusing associated input)
+     */
+    onPress?: () => void;
+}
+/**
+ * Label component for form fields using @rn-primitives/label
+ *
+ * Provides accessible labeling for form controls with automatic
+ * association via nativeID.
+ *
+ * Usage:
+ * ```tsx
+ * // Basic label
+ * <Label nativeID="email-input">Email</Label>
+ * <TextInput nativeID="email-input" />
+ *
+ * // Required field
+ * <Label nativeID="password" required>Password</Label>
+ *
+ * // With error state
+ * <Label nativeID="username" error>Username</Label>
+ *
+ * // With press handler to focus input
+ * <Label nativeID="search" onPress={() => inputRef.current?.focus()}>
+ *   Search
+ * </Label>
+ * ```
+ */
+export declare function Label({ children, nativeID, required, size, error, disabled, style, onPress, }: LabelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Label.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, Platform } from "react-native";
+import * as LabelPrimitive from "@rn-primitives/label";
+import { useTheme } from "../hooks/useTheme";
+import { spacing } from "../constants/spacing";
+import { fontFamilies } from "../constants/fonts";
+import { StyledText } from "./StyledText";
+const SIZE_CONFIGS = {
+    sm: { fontSize: 12 },
+    md: { fontSize: 14 },
+    lg: { fontSize: 16 },
+};
+/**
+ * Label component for form fields using @rn-primitives/label
+ *
+ * Provides accessible labeling for form controls with automatic
+ * association via nativeID.
+ *
+ * Usage:
+ * ```tsx
+ * // Basic label
+ * <Label nativeID="email-input">Email</Label>
+ * <TextInput nativeID="email-input" />
+ *
+ * // Required field
+ * <Label nativeID="password" required>Password</Label>
+ *
+ * // With error state
+ * <Label nativeID="username" error>Username</Label>
+ *
+ * // With press handler to focus input
+ * <Label nativeID="search" onPress={() => inputRef.current?.focus()}>
+ *   Search
+ * </Label>
+ * ```
+ */
+export function Label({ children, nativeID, required, size = "md", error, disabled, style, onPress, }) {
+    const { theme } = useTheme();
+    const styles = createStyles(theme);
+    const sizeConfig = SIZE_CONFIGS[size];
+    const textStyle = StyleSheet.flatten([
+        styles.label,
+        { fontSize: sizeConfig.fontSize },
+        error && styles.errorLabel,
+        disabled && styles.disabledLabel,
+        style,
+    ]);
+    return (_jsx(LabelPrimitive.Root, { nativeID: nativeID, onPress: onPress, style: {
+            ...styles.root,
+            ...(Platform.OS === "web" && onPress && { cursor: "pointer" }),
+        }, children: _jsxs(LabelPrimitive.Text, { style: textStyle, children: [children, required && _jsx(StyledText, { style: styles.required, children: " *" })] }) }));
+}
+const createStyles = (theme) => StyleSheet.create({
+    root: {
+        marginBottom: spacing.xs,
+    },
+    label: {
+        fontFamily: fontFamilies.sansSerif.regular,
+        fontWeight: "500",
+        color: theme.colors.text,
+    },
+    required: {
+        color: theme.colors.destructive,
+        fontFamily: fontFamilies.sansSerif.bold,
+    },
+    errorLabel: {
+        color: theme.colors.destructive,
+    },
+    disabledLabel: {
+        opacity: 0.6,
+    },
+});

package/dist/components/MaxWidthContainer.d.ts

@@ -0,0 +1,58 @@
+import React from "react";
+import { ViewStyle } from "react-native";
+/**
+ * Preset width options for common responsive breakpoints
+ */
+export type MaxWidthPreset = "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+interface MaxWidthContainerProps {
+    children: React.ReactNode;
+    /**
+     * Maximum width in pixels (custom number)
+     * If preset is provided, this is ignored
+     */
+    maxWidth?: number;
+    /**
+     * Preset width option (sm, md, lg, xl, 2xl, full)
+     * Overrides maxWidth if provided
+     */
+    preset?: MaxWidthPreset;
+    /**
+     * Additional styles
+     */
+    style?: ViewStyle;
+    /**
+     * Whether to center the container horizontally
+     * @default true
+     */
+    centered?: boolean;
+}
+/**
+ * Max Width Container Component
+ * Constrains content width on large screens (web only by default)
+ *
+ * Features:
+ * - Preset width options (sm, md, lg, xl, 2xl, full)
+ * - Custom max width
+ * - Automatic centering
+ * - Platform-aware (only applies on web by default)
+ *
+ * Usage:
+ * ```tsx
+ * // With preset
+ * <MaxWidthContainer preset="lg">
+ *   {children}
+ * </MaxWidthContainer>
+ *
+ * // With custom width
+ * <MaxWidthContainer maxWidth={1200}>
+ *   {children}
+ * </MaxWidthContainer>
+ *
+ * // Full width (no constraint)
+ * <MaxWidthContainer preset="full">
+ *   {children}
+ * </MaxWidthContainer>
+ * ```
+ */
+export declare function MaxWidthContainer({ children, maxWidth, preset, style, centered, }: MaxWidthContainerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/MaxWidthContainer.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View, StyleSheet, Platform } from "react-native";
+import { useDimensions } from "../hooks/useDimensions";
+const MAX_WIDTH_PRESETS = {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+    "2xl": 1536,
+    full: "100%",
+};
+/**
+ * Max Width Container Component
+ * Constrains content width on large screens (web only by default)
+ *
+ * Features:
+ * - Preset width options (sm, md, lg, xl, 2xl, full)
+ * - Custom max width
+ * - Automatic centering
+ * - Platform-aware (only applies on web by default)
+ *
+ * Usage:
+ * ```tsx
+ * // With preset
+ * <MaxWidthContainer preset="lg">
+ *   {children}
+ * </MaxWidthContainer>
+ *
+ * // With custom width
+ * <MaxWidthContainer maxWidth={1200}>
+ *   {children}
+ * </MaxWidthContainer>
+ *
+ * // Full width (no constraint)
+ * <MaxWidthContainer preset="full">
+ *   {children}
+ * </MaxWidthContainer>
+ * ```
+ */
+export function MaxWidthContainer({ children, maxWidth, preset = "2xl", style, centered = true, }) {
+    const { width } = useDimensions();
+    // Determine final max width
+    const finalMaxWidth = preset ? MAX_WIDTH_PRESETS[preset] : maxWidth;
+    // Only apply max-width on web and large screens
+    const shouldApplyMaxWidth = Platform.OS === "web" &&
+        finalMaxWidth !== "100%" &&
+        width > finalMaxWidth;
+    return (_jsx(View, { style: [
+            styles.container,
+            shouldApplyMaxWidth && {
+                maxWidth: finalMaxWidth,
+                ...(centered && {
+                    alignSelf: "center",
+                    width: "100%",
+                }),
+            },
+            style,
+        ], children: children }));
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+});

package/dist/components/Notification.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Notification
+ *
+ * Global animated notification component rendered in the root `_layout`.
+ * Supports top (banner) and bottom (toast) positions.
+ *
+ * Usage:
+ * ```ts
+ * // Top notification (default)
+ * globalUIStore.getState().show({
+ *   type: "success",
+ *   title: "Saved",
+ *   messages: ["Your changes have been saved."],
+ *   duration: 3000,
+ * });
+ *
+ * // Bottom toast
+ * globalUIStore.getState().show({
+ *   type: "info",
+ *   title: "Copied to clipboard",
+ *   duration: 2000,
+ *   position: "bottom",
+ * });
+ * ```
+ */
+export declare const Notification: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Notification.js

@@ -0,0 +1,230 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useContext, useEffect, useRef } from "react";
+import { StyleSheet, View, ActivityIndicator, Pressable, Platform } from "react-native";
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, runOnJS, useReducedMotion, Easing, } from "react-native-reanimated";
+import { useTranslation } from "react-i18next";
+import { SafeAreaInsetsContext } from "react-native-safe-area-context";
+import { fontFamilies } from "../constants/fonts";
+import { Icon } from "./Icon";
+import { useTheme } from "../hooks/useTheme";
+import { spacing } from "../constants/spacing";
+import { StyledText } from "./StyledText";
+import { globalUIStore } from "../state/globalUIStore";
+/**
+ * Notification
+ *
+ * Global animated notification component rendered in the root `_layout`.
+ * Supports top (banner) and bottom (toast) positions.
+ *
+ * Usage:
+ * ```ts
+ * // Top notification (default)
+ * globalUIStore.getState().show({
+ *   type: "success",
+ *   title: "Saved",
+ *   messages: ["Your changes have been saved."],
+ *   duration: 3000,
+ * });
+ *
+ * // Bottom toast
+ * globalUIStore.getState().show({
+ *   type: "info",
+ *   title: "Copied to clipboard",
+ *   duration: 2000,
+ *   position: "bottom",
+ * });
+ * ```
+ */
+export const Notification = () => {
+    const { t } = useTranslation();
+    const { theme, getShadowStyle } = useTheme();
+    const reduceMotion = useReducedMotion();
+    const insets = useContext(SafeAreaInsetsContext);
+    const { alert, hide } = globalUIStore();
+    const styles = createStyles(theme);
+    const position = alert?.position ?? "top";
+    const isBottom = position === "bottom";
+    // Just opacity + translateY — no scale (scale = bouncy feel)
+    const opacity = useSharedValue(0);
+    const translateY = useSharedValue(0);
+    const wasVisibleRef = useRef(false);
+    const timerRef = useRef(null);
+    const hideNotification = useCallback(() => {
+        hide();
+    }, [hide]);
+    const timingIn = { duration: 150, easing: Easing.out(Easing.quad) };
+    const timingOut = { duration: 100, easing: Easing.in(Easing.quad) };
+    const animateOut = useCallback(() => {
+        if (reduceMotion) {
+            opacity.value = withTiming(0, { duration: 0 });
+            hideNotification();
+            return;
+        }
+        const slideTarget = isBottom ? 8 : -8;
+        opacity.value = withTiming(0, timingOut);
+        translateY.value = withTiming(slideTarget, timingOut, (finished) => {
+            if (finished)
+                runOnJS(hideNotification)();
+        });
+    }, [reduceMotion, isBottom, opacity, translateY, hideNotification]);
+    useEffect(() => {
+        const isNowVisible = alert?.show ?? false;
+        const wasVisible = wasVisibleRef.current;
+        if (isNowVisible && !wasVisible) {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+                timerRef.current = null;
+            }
+            const slideFrom = isBottom ? 8 : -8;
+            if (reduceMotion) {
+                opacity.value = withTiming(1, { duration: 0 });
+                translateY.value = withTiming(0, { duration: 0 });
+            }
+            else {
+                opacity.value = 0;
+                translateY.value = slideFrom;
+                opacity.value = withTiming(1, timingIn);
+                translateY.value = withTiming(0, timingIn);
+            }
+        }
+        wasVisibleRef.current = isNowVisible;
+        if (isNowVisible && !wasVisible && alert?.duration) {
+            timerRef.current = setTimeout(() => {
+                animateOut();
+            }, alert.duration);
+            return () => {
+                if (timerRef.current) {
+                    clearTimeout(timerRef.current);
+                    timerRef.current = null;
+                }
+            };
+        }
+    }, [alert, reduceMotion, isBottom, opacity, translateY, animateOut]);
+    const animatedContainerStyle = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+        transform: [{ translateY: translateY.value }],
+    }));
+    const topPosition = insets?.top ? insets.top : 20;
+    const bottomPosition = insets?.bottom ? insets.bottom : 20;
+    const getIconProps = () => {
+        switch (alert?.type) {
+            case "error":
+                return {
+                    icon: "alert-circle",
+                    color: theme.colors.destructive,
+                    bgColor: theme.colors.destructive + "15",
+                };
+            case "success":
+                return {
+                    icon: "check-circle",
+                    color: theme.colors.success,
+                    bgColor: theme.colors.success + "15",
+                };
+            case "warning":
+                return {
+                    icon: "alert-triangle",
+                    color: theme.colors.warning,
+                    bgColor: theme.colors.warning + "15",
+                };
+            case "info":
+            default:
+                return {
+                    icon: "info",
+                    color: theme.colors.accent,
+                    bgColor: theme.colors.accent + "15",
+                };
+        }
+    };
+    const getTitle = () => {
+        if (alert?.title)
+            return alert.title;
+        switch (alert?.type) {
+            case "error":
+                return t("notification.error");
+            case "success":
+                return t("notification.success");
+            case "warning":
+                return t("notification.warning");
+            case "info":
+                return "";
+            default:
+                return "";
+        }
+    };
+    const { icon, color: iconColor, bgColor: iconBgColor } = getIconProps();
+    const title = getTitle();
+    const hasMessage = !!alert?.messages?.[0];
+    return (_jsx(Animated.View, { accessibilityLiveRegion: "polite", accessibilityRole: "alert", pointerEvents: alert?.show ? "auto" : "none", style: [
+            styles.container,
+            isBottom
+                ? { bottom: bottomPosition }
+                : { top: topPosition },
+            animatedContainerStyle,
+            !alert?.show && { opacity: 0 },
+        ], children: _jsxs(View, { style: [
+                styles.alert,
+                isBottom && styles.alertBottom,
+                getShadowStyle("base"),
+            ], children: [_jsx(View, { style: [styles.iconBadge, { backgroundColor: iconBgColor }], children: alert?.loading ? (_jsx(ActivityIndicator, { size: "small", color: iconColor })) : (_jsx(Icon, { name: icon, size: 18, color: iconColor })) }), _jsxs(View, { style: styles.alertContent, children: [!!title && (_jsx(StyledText, { style: [styles.alertTitle, { color: theme.colors.foreground }], numberOfLines: 1, children: title })), hasMessage && (_jsx(StyledText, { style: [styles.alertDescription, { color: theme.colors.mutedForeground }], numberOfLines: 2, children: alert.messages[0] }))] }), _jsx(Pressable, { style: styles.closeButton, hitSlop: spacing.sm, onPress: animateOut, accessibilityLabel: "Dismiss notification", accessibilityRole: "button", children: _jsx(Icon, { name: "x", size: 16, color: theme.colors.mutedForeground }) })] }) }));
+};
+const createStyles = (theme) => StyleSheet.create({
+    container: {
+        position: "absolute",
+        left: spacing.md,
+        right: spacing.md,
+        zIndex: 1000,
+        alignItems: "center",
+    },
+    alert: {
+        width: "100%",
+        maxWidth: 420,
+        paddingVertical: spacing.md,
+        paddingLeft: spacing.md,
+        paddingRight: spacing.xl + spacing.sm,
+        borderRadius: spacing.radiusLg,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        backgroundColor: theme.colors.card,
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.md,
+    },
+    alertBottom: {
+        borderRadius: spacing.radiusXl,
+    },
+    iconBadge: {
+        width: 36,
+        height: 36,
+        borderRadius: spacing.radiusMd,
+        justifyContent: "center",
+        alignItems: "center",
+        flexShrink: 0,
+    },
+    alertContent: {
+        flex: 1,
+        justifyContent: "center",
+        gap: spacing.xxs,
+    },
+    alertTitle: {
+        fontFamily: fontFamilies.sansSerif.regular,
+        fontWeight: "600",
+        fontSize: 14,
+        lineHeight: 20,
+    },
+    alertDescription: {
+        fontFamily: fontFamilies.sansSerif.regular,
+        fontSize: 13,
+        lineHeight: 18,
+    },
+    closeButton: {
+        position: "absolute",
+        top: spacing.sm,
+        right: spacing.sm,
+        width: 28,
+        height: 28,
+        borderRadius: spacing.radiusSm,
+        justifyContent: "center",
+        alignItems: "center",
+        ...(Platform.OS === "web" && { cursor: "pointer" }),
+    },
+});