@mrmeg/expo-ui 0.1.0

package/dist/components/DropdownMenu.js

@@ -0,0 +1,211 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Platform, StyleSheet, Text, View } from "react-native";
+import { Icon } from "./Icon";
+import { AnimatedView } from "./AnimatedView";
+import { TextClassContext } from "./StyledText";
+import { useTheme } from "../hooks/useTheme";
+import { spacing } from "../constants/spacing";
+import * as DropdownMenuPrimitive from "@rn-primitives/dropdown-menu";
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+// Re-export primitives that don't need styling
+const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+// Platform-specific overlay
+const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
+function DropdownMenuSubTrigger({ inset = false, children, style: styleOverride, ...props }) {
+    const { theme } = useTheme();
+    const { open } = DropdownMenuPrimitive.useSubContext();
+    const iconName = Platform.OS === "web" ? "chevron-right" : open ? "chevron-up" : "chevron-down";
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsxs(DropdownMenuPrimitive.SubTrigger, { ...props, style: {
+                flexDirection: "row",
+                alignItems: "center",
+                borderRadius: spacing.radiusSm,
+                paddingHorizontal: spacing.sm,
+                paddingVertical: Platform.select({ web: spacing.xs, default: spacing.sm }),
+                backgroundColor: open ? theme.colors.card : "transparent",
+                ...(Platform.OS === "web" && {
+                    cursor: "pointer",
+                    outlineStyle: "none",
+                }),
+                ...(inset && { paddingLeft: spacing.xl }),
+                ...(styleOverride && typeof styleOverride !== "function"
+                    ? StyleSheet.flatten(styleOverride)
+                    : {}),
+            }, children: [typeof children === "function" ? null : children, _jsx(View, { style: { marginLeft: "auto" }, children: _jsx(Icon, { name: iconName, size: 16, color: theme.colors.text }) })] }) }));
+}
+function DropdownMenuSubContent({ style: styleOverride, ...props }) {
+    const { theme, getShadowStyle } = useTheme();
+    const shadowStyle = StyleSheet.flatten(getShadowStyle("soft"));
+    return (_jsx(AnimatedView, { type: "fade", children: _jsx(DropdownMenuPrimitive.SubContent, { ...props, style: {
+                backgroundColor: theme.colors.background,
+                borderWidth: 1,
+                borderColor: theme.colors.border,
+                borderRadius: spacing.radiusMd,
+                padding: spacing.xs,
+                minWidth: 192,
+                overflow: "hidden",
+                ...shadowStyle,
+                ...(Platform.OS === "web" && {
+                    zIndex: 50,
+                }),
+                ...(styleOverride && typeof styleOverride !== "function"
+                    ? StyleSheet.flatten(styleOverride)
+                    : {}),
+            } }) }));
+}
+function DropdownMenuContent({ side, align = "start", sideOffset = 4, portalHost, style: styleOverride, ...props }) {
+    const { theme, getShadowStyle } = useTheme();
+    const shadowStyle = StyleSheet.flatten(getShadowStyle("soft"));
+    const insets = useSafeAreaInsets();
+    return (_jsx(DropdownMenuPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(DropdownMenuPrimitive.Overlay, { style: Platform.select({
+                    native: StyleSheet.absoluteFill,
+                    default: undefined,
+                }), children: _jsx(AnimatedView, { type: "fade", children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(DropdownMenuPrimitive.Content, { side: side, align: align, sideOffset: sideOffset, insets: insets, avoidCollisions: true, ...props, style: {
+                                backgroundColor: theme.colors.background,
+                                borderWidth: 1,
+                                borderColor: theme.colors.border,
+                                borderRadius: spacing.radiusSm,
+                                padding: spacing.xs,
+                                minWidth: 128,
+                                overflow: "hidden",
+                                ...shadowStyle,
+                                ...(Platform.OS === "web" && {
+                                    zIndex: 50,
+                                    cursor: "default",
+                                }),
+                                ...(styleOverride && typeof styleOverride !== "function"
+                                    ? StyleSheet.flatten(styleOverride)
+                                    : {}),
+                            } }) }) }) }) }) }));
+}
+function DropdownMenuItem({ inset = false, variant = "default", style: styleOverride, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsx(DropdownMenuPrimitive.Item, { ...props, style: {
+                position: "relative",
+                flexDirection: "row",
+                alignItems: "center",
+                gap: spacing.sm,
+                borderRadius: spacing.radiusSm,
+                paddingHorizontal: spacing.sm,
+                paddingVertical: Platform.select({ web: spacing.xs, default: spacing.sm }),
+                backgroundColor: "transparent",
+                ...(Platform.OS === "web" && {
+                    cursor: props.disabled ? "not-allowed" : "pointer",
+                    outlineStyle: "none",
+                }),
+                ...(props.disabled && { opacity: 0.5 }),
+                ...(inset && { paddingLeft: spacing.xl }),
+                ...(styleOverride && typeof styleOverride !== "function"
+                    ? StyleSheet.flatten(styleOverride)
+                    : {}),
+            } }) }));
+}
+function DropdownMenuCheckboxItem({ children, style: styleOverride, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsxs(DropdownMenuPrimitive.CheckboxItem, { ...props, style: {
+                position: "relative",
+                flexDirection: "row",
+                alignItems: "center",
+                gap: spacing.sm,
+                borderRadius: spacing.radiusSm,
+                paddingVertical: Platform.select({ web: spacing.xs, default: spacing.sm }),
+                paddingLeft: spacing.xl,
+                paddingRight: spacing.sm,
+                backgroundColor: "transparent",
+                ...(Platform.OS === "web" && {
+                    cursor: props.disabled ? "not-allowed" : "pointer",
+                    outlineStyle: "none",
+                }),
+                ...(props.disabled && { opacity: 0.5 }),
+                ...(styleOverride && typeof styleOverride !== "function"
+                    ? StyleSheet.flatten(styleOverride)
+                    : {}),
+            }, children: [_jsx(View, { style: {
+                        position: "absolute",
+                        left: spacing.sm,
+                        height: 14,
+                        width: 14,
+                        alignItems: "center",
+                        justifyContent: "center",
+                    }, children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(Icon, { name: "check", size: 16, color: theme.colors.text, ...(Platform.OS === "web" && { style: { pointerEvents: "none" } }) }) }) }), typeof children === "function" ? null : children] }) }));
+}
+function DropdownMenuRadioItem({ children, style: styleOverride, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(TextClassContext.Provider, { value: "", children: _jsxs(DropdownMenuPrimitive.RadioItem, { ...props, style: {
+                position: "relative",
+                flexDirection: "row",
+                alignItems: "center",
+                gap: spacing.sm,
+                borderRadius: spacing.radiusSm,
+                paddingVertical: Platform.select({ web: spacing.xs, default: spacing.sm }),
+                paddingLeft: spacing.xl,
+                paddingRight: spacing.sm,
+                backgroundColor: "transparent",
+                ...(Platform.OS === "web" && {
+                    cursor: props.disabled ? "not-allowed" : "pointer",
+                    outlineStyle: "none",
+                }),
+                ...(props.disabled && { opacity: 0.5 }),
+                ...(styleOverride && typeof styleOverride !== "function"
+                    ? StyleSheet.flatten(styleOverride)
+                    : {}),
+            }, children: [_jsx(View, { style: {
+                        position: "absolute",
+                        left: spacing.sm,
+                        height: 14,
+                        width: 14,
+                        alignItems: "center",
+                        justifyContent: "center",
+                    }, children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(View, { style: {
+                                backgroundColor: theme.colors.text,
+                                height: 8,
+                                width: 8,
+                                borderRadius: 4,
+                            } }) }) }), typeof children === "function" ? null : children] }) }));
+}
+function DropdownMenuLabel({ inset = false, style: styleOverride, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(DropdownMenuPrimitive.Label, { ...props, style: {
+            paddingHorizontal: spacing.sm,
+            paddingVertical: Platform.select({ web: spacing.xs, default: spacing.sm }),
+            fontSize: 14,
+            fontWeight: "500",
+            color: theme.colors.text,
+            ...(inset && { paddingLeft: spacing.xl }),
+            ...(styleOverride && typeof styleOverride !== "function"
+                ? StyleSheet.flatten(styleOverride)
+                : {}),
+        } }));
+}
+function DropdownMenuSeparator({ style: styleOverride, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(DropdownMenuPrimitive.Separator, { ...props, style: {
+            backgroundColor: theme.colors.border,
+            marginHorizontal: -spacing.xs,
+            marginVertical: spacing.xs,
+            height: 1,
+            ...(styleOverride && typeof styleOverride !== "function"
+                ? StyleSheet.flatten(styleOverride)
+                : {}),
+        } }));
+}
+function DropdownMenuShortcut({ style: styleOverride, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(Text, { ...props, style: [
+            {
+                marginLeft: "auto",
+                fontSize: 12,
+                letterSpacing: 2,
+                color: theme.colors.text,
+                opacity: 0.6,
+            },
+            styleOverride,
+        ] }));
+}
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, };

package/dist/components/EmptyState.d.ts

@@ -0,0 +1,42 @@
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { type ButtonProps } from "./Button";
+import { type IconName } from "./Icon";
+export interface EmptyStateProps {
+    /** Icon name to display */
+    icon?: IconName;
+    /** Icon size in pixels */
+    iconSize?: number;
+    /** Title text */
+    title: string;
+    /** Description text */
+    description?: string;
+    /** CTA button label */
+    actionLabel?: string;
+    /** CTA button press handler */
+    onAction?: () => void;
+    /** Button preset variant */
+    actionPreset?: ButtonProps["preset"];
+    /** Custom style override */
+    style?: StyleProp<ViewStyle>;
+    /** Custom children below description / above action */
+    children?: React.ReactNode;
+}
+/**
+ * EmptyState Component
+ *
+ * Displays a centered placeholder for empty lists, search results,
+ * or blank screens. Works well as FlatList's ListEmptyComponent.
+ *
+ * @example
+ * ```tsx
+ * <EmptyState
+ *   icon="inbox"
+ *   title="No messages"
+ *   description="You don't have any messages yet."
+ *   actionLabel="Compose"
+ *   onAction={() => router.push("/compose")}
+ * />
+ * ```
+ */
+export declare function EmptyState({ icon, iconSize, title, description, actionLabel, onAction, actionPreset, style, children, }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/EmptyState.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, StyleSheet } from "react-native";
+import { SansSerifBoldText, SansSerifText } from "./StyledText";
+import { Button } from "./Button";
+import { Icon } from "./Icon";
+import { useTheme } from "../hooks/useTheme";
+import { spacing } from "../constants/spacing";
+/**
+ * EmptyState Component
+ *
+ * Displays a centered placeholder for empty lists, search results,
+ * or blank screens. Works well as FlatList's ListEmptyComponent.
+ *
+ * @example
+ * ```tsx
+ * <EmptyState
+ *   icon="inbox"
+ *   title="No messages"
+ *   description="You don't have any messages yet."
+ *   actionLabel="Compose"
+ *   onAction={() => router.push("/compose")}
+ * />
+ * ```
+ */
+export function EmptyState({ icon, iconSize = 48, title, description, actionLabel, onAction, actionPreset = "default", style, children, }) {
+    const { theme } = useTheme();
+    const styles = createStyles(theme);
+    return (_jsxs(View, { style: [styles.container, style], children: [!!icon && (_jsx(View, { style: styles.iconWrapper, children: _jsx(Icon, { name: icon, size: iconSize, color: theme.colors.mutedForeground }) })), _jsx(SansSerifBoldText, { style: styles.title, children: title }), !!description && (_jsx(SansSerifText, { style: styles.description, children: description })), children, !!actionLabel && onAction && (_jsx(Button, { preset: actionPreset, onPress: onAction, style: styles.action, children: actionLabel }))] }));
+}
+const createStyles = (theme) => StyleSheet.create({
+    container: {
+        alignItems: "center",
+        justifyContent: "center",
+        paddingVertical: spacing.xxl,
+        paddingHorizontal: spacing.lg,
+    },
+    iconWrapper: {
+        marginBottom: spacing.md,
+    },
+    title: {
+        fontSize: 18,
+        lineHeight: 24,
+        color: theme.colors.foreground,
+        textAlign: "center",
+        letterSpacing: -0.3,
+    },
+    description: {
+        fontSize: 14,
+        lineHeight: 20,
+        color: theme.colors.mutedForeground,
+        textAlign: "center",
+        marginTop: spacing.sm,
+        maxWidth: 280,
+    },
+    action: {
+        marginTop: spacing.lg,
+    },
+});

package/dist/components/ErrorBoundary.d.ts

@@ -0,0 +1,53 @@
+import React, { Component, ErrorInfo, ReactNode } from "react";
+interface ErrorBoundaryProps {
+    /**
+     * When to catch errors
+     * - "always": Catch in all environments
+     * - "dev": Only catch in development
+     * - "prod": Only catch in production
+     * - "never": Never catch (errors bubble up)
+     */
+    catchErrors: "always" | "dev" | "prod" | "never";
+    /**
+     * Child components to render
+     */
+    children: ReactNode;
+    /**
+     * Custom error fallback component
+     */
+    FallbackComponent?: React.ComponentType<{
+        error: Error;
+        errorInfo: ErrorInfo | null;
+        resetError: () => void;
+    }>;
+}
+interface ErrorBoundaryState {
+    error: Error | null;
+    errorInfo: ErrorInfo | null;
+}
+/**
+ * ErrorBoundary catches JavaScript errors anywhere in the child component tree,
+ * logs those errors, and displays a fallback UI.
+ *
+ * Usage:
+ * ```tsx
+ * <ErrorBoundary catchErrors="always" FallbackComponent={ErrorScreen}>
+ *   <App />
+ * </ErrorBoundary>
+ * ```
+ */
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    /**
+     * Determine if errors should be caught based on config and environment
+     */
+    private shouldCatchErrors;
+    /**
+     * Reset the error state to try rendering again
+     */
+    resetError: () => void;
+    static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState>;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};

package/dist/components/ErrorBoundary.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component } from "react";
+import { captureException } from "../lib/sentry";
+/**
+ * ErrorBoundary catches JavaScript errors anywhere in the child component tree,
+ * logs those errors, and displays a fallback UI.
+ *
+ * Usage:
+ * ```tsx
+ * <ErrorBoundary catchErrors="always" FallbackComponent={ErrorScreen}>
+ *   <App />
+ * </ErrorBoundary>
+ * ```
+ */
+export class ErrorBoundary extends Component {
+    state = {
+        error: null,
+        errorInfo: null,
+    };
+    /**
+     * Determine if errors should be caught based on config and environment
+     */
+    shouldCatchErrors() {
+        const { catchErrors } = this.props;
+        if (catchErrors === "always")
+            return true;
+        if (catchErrors === "never")
+            return false;
+        if (catchErrors === "dev")
+            return __DEV__;
+        if (catchErrors === "prod")
+            return !__DEV__;
+        return true;
+    }
+    /**
+     * Reset the error state to try rendering again
+     */
+    resetError = () => {
+        this.setState({ error: null, errorInfo: null });
+    };
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error, errorInfo) {
+        // Update state with error info
+        this.setState({ errorInfo });
+        // Log error to console in development
+        if (__DEV__) {
+            console.error("ErrorBoundary caught an error:", error);
+            console.error("Error info:", errorInfo);
+        }
+        // Report to Sentry (no-op if DSN not configured)
+        captureException(error, {
+            contexts: {
+                react: {
+                    componentStack: errorInfo?.componentStack ?? undefined,
+                },
+            },
+        });
+    }
+    render() {
+        const { children, FallbackComponent } = this.props;
+        const { error, errorInfo } = this.state;
+        // If no error or we shouldn't catch, render children normally
+        if (!error || !this.shouldCatchErrors()) {
+            return children;
+        }
+        // If custom fallback component provided, use it
+        if (FallbackComponent) {
+            return (_jsx(FallbackComponent, { error: error, errorInfo: errorInfo, resetError: this.resetError }));
+        }
+        // Default: just return null (you should provide a FallbackComponent)
+        return null;
+    }
+}

package/dist/components/Icon.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import Feather from "@expo/vector-icons/Feather";
+/**
+ * Theme color names that can be used as shortcuts
+ * Only includes colors that actually exist in the theme
+ */
+export type ThemeColorName = "primary" | "primaryForeground" | "secondary" | "muted" | "destructive" | "success" | "warning" | "text" | "textDim";
+export type IconName = React.ComponentProps<typeof Feather>["name"];
+type IconBaseProps = {
+    /** Size of the icon in pixels */
+    size?: number;
+    /** Icon color - can be a hex color or a theme color name. Defaults to theme's text color */
+    color?: string | ThemeColorName;
+    /** Additional styles for positioning, transforms, etc. */
+    style?: StyleProp<ViewStyle>;
+    /** When true, hides the icon from the accessibility tree. @default false */
+    decorative?: boolean;
+};
+type FeatherIconProps = IconBaseProps & {
+    /** The icon name to render (Feather icons) */
+    name: IconName;
+    component?: never;
+};
+type CustomIconProps = IconBaseProps & {
+    name?: never;
+    /** Custom component to render instead of Feather. Receives size and color as props. */
+    component: React.ComponentType<{
+        size: number;
+        color: string;
+    }>;
+};
+export type IconProps = FeatherIconProps | CustomIconProps;
+/**
+ * Universal Icon Component
+ * Wraps @expo/vector-icons Feather with theme integration and style support
+ *
+ * Usage:
+ * ```tsx
+ * <Icon name="check" color="primary" size={16} />
+ * <Icon name="calendar" color="#FF0000" size={24} />
+ * <Icon name="terminal" style={{ marginRight: 8 }} />
+ * ```
+ */
+export declare function Icon(props: IconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from "react-native";
+import { useTheme } from "../hooks/useTheme";
+import Feather from "@expo/vector-icons/Feather";
+const THEME_COLOR_KEYS = [
+    "primary", "primaryForeground", "secondary", "muted",
+    "destructive", "success", "warning", "text", "textDim",
+];
+function resolveIconColor(color, themeColors) {
+    if (!color)
+        return themeColors.text;
+    if (THEME_COLOR_KEYS.includes(color)) {
+        return themeColors[color];
+    }
+    return color;
+}
+/**
+ * Universal Icon Component
+ * Wraps @expo/vector-icons Feather with theme integration and style support
+ *
+ * Usage:
+ * ```tsx
+ * <Icon name="check" color="primary" size={16} />
+ * <Icon name="calendar" color="#FF0000" size={24} />
+ * <Icon name="terminal" style={{ marginRight: 8 }} />
+ * ```
+ */
+export function Icon(props) {
+    const { size = 24, color, style, decorative = false } = props;
+    const { theme } = useTheme();
+    const iconColor = resolveIconColor(color, theme.colors);
+    const CustomComponent = "component" in props ? props.component : undefined;
+    // Wrap in View with pointerEvents="none" to prevent icons from
+    // intercepting touches when used inside TouchableOpacity on iOS
+    return (_jsx(View, { pointerEvents: "none", style: style, accessible: !decorative, ...(decorative && {
+            importantForAccessibility: "no",
+            accessibilityElementsHidden: true,
+            "aria-hidden": true,
+        }), children: CustomComponent ? (_jsx(CustomComponent, { size: size, color: iconColor })) : (_jsx(Feather, { name: props.name, size: size, color: iconColor })) }));
+}

package/dist/components/InputOTP.d.ts

@@ -0,0 +1,72 @@
+import { StyleProp, ViewStyle } from "react-native";
+export interface InputOTPProps {
+    /**
+     * Number of OTP cells
+     * @default 6
+     */
+    length?: number;
+    /**
+     * Current value
+     * @default ""
+     */
+    value?: string;
+    /**
+     * Called when the value changes
+     */
+    onChangeText?: (value: string) => void;
+    /**
+     * Called when all cells are filled
+     */
+    onComplete?: (value: string) => void;
+    /**
+     * Whether the input is in an error state
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * Error message displayed below the cells
+     */
+    errorText?: string;
+    /**
+     * Whether the input is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to auto-focus the input on mount
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * Whether to mask the input with bullet characters
+     * @default false
+     */
+    secureTextEntry?: boolean;
+    /**
+     * Input mode for the keyboard
+     * @default "numeric"
+     */
+    inputMode?: "numeric" | "text";
+    /**
+     * Custom style override for the container
+     */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * 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)}
+ * />
+ * ```
+ */
+declare function InputOTP({ length, value, onChangeText, onComplete, error, errorText, disabled, autoFocus, secureTextEntry, inputMode, style: styleOverride, }: InputOTPProps): import("react/jsx-runtime").JSX.Element;
+export { InputOTP };