@mrmeg/expo-ui 0.1.0

package/dist/components/Drawer.js

@@ -0,0 +1,423 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { createContext, useContext, useState, useReducer, useRef } from "react";
+import { View, Pressable, Animated, StyleSheet, Platform, Dimensions, PanResponder, } from "react-native";
+import { Portal } from "@rn-primitives/portal";
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
+import { Pressable as SlotPressable } from "@rn-primitives/slot";
+import { useTheme } from "../hooks/useTheme";
+import { shouldUseNativeDriver } from "../lib/animations";
+import { spacing } from "../constants/spacing";
+import { TextColorContext, TextClassContext } from "./StyledText";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+/**
+ * Drawer Component with Sub-components
+ *
+ * A sliding drawer overlay that can appear from left or right side.
+ * Supports both controlled and uncontrolled modes.
+ * Supports swipe gestures on native platforms and backdrop press to close.
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled (internal state management)
+ * <Drawer side="left">
+ *   <Drawer.Trigger asChild>
+ *     <Button>Open Menu</Button>
+ *   </Drawer.Trigger>
+ *   <Drawer.Content>
+ *     <Drawer.Header>
+ *       <SansSerifBoldText>Menu</SansSerifBoldText>
+ *     </Drawer.Header>
+ *     <Drawer.Body>
+ *       <SansSerifText>Content here</SansSerifText>
+ *     </Drawer.Body>
+ *     <Drawer.Footer>
+ *       <DrawerCloseButton />
+ *     </Drawer.Footer>
+ *   </Drawer.Content>
+ * </Drawer>
+ *
+ * // Controlled (parent manages state)
+ * const [open, setOpen] = useState(false);
+ * <Drawer open={open} onOpenChange={setOpen} side="left">
+ *   ...
+ * </Drawer>
+ * ```
+ */
+// Platform-specific overlay wrapper
+const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
+// ============================================================================
+// Context
+// ============================================================================
+const DrawerContext = createContext(null);
+function useDrawerContext() {
+    const context = useContext(DrawerContext);
+    if (!context) {
+        throw new Error("Drawer components must be used within a Drawer");
+    }
+    return context;
+}
+// ============================================================================
+// Utility Functions
+// ============================================================================
+function parseWidth(width) {
+    if (typeof width === "number") {
+        return width;
+    }
+    // Parse percentage string
+    const percentage = parseFloat(width) / 100;
+    const screenWidth = Dimensions.get("window").width;
+    return screenWidth * percentage;
+}
+function drawerReducer(state, action) {
+    switch (action.type) {
+        case 'OPEN': return true;
+        case 'CLOSE': return false;
+        case 'TOGGLE': return !state; // Always uses current state!
+    }
+}
+// ============================================================================
+// Drawer Root Component
+// ============================================================================
+function DrawerRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, side = "left", width = 300, closeOnBackdropPress = true, children, }) {
+    // Use reducer for stable state management - dispatch is stable and reducer always gets current state
+    const [internalOpen, dispatch] = useReducer(drawerReducer, defaultOpen);
+    const isControlled = controlledOpen !== undefined;
+    const open = isControlled ? controlledOpen : internalOpen;
+    // Stable toggle function - dispatch is stable across renders
+    const toggle = () => {
+        if (isControlled) {
+            // For controlled mode, we need to call the callback with the toggled value
+            // We use a functional update pattern via dispatch to ensure we get current state
+            controlledOnOpenChange?.(!controlledOpen);
+        }
+        else {
+            dispatch({ type: 'TOGGLE' });
+        }
+    };
+    // Handler for explicit open/close actions
+    const onOpenChange = (newOpen) => {
+        if (isControlled) {
+            controlledOnOpenChange?.(newOpen);
+        }
+        else {
+            dispatch({ type: newOpen ? 'OPEN' : 'CLOSE' });
+        }
+    };
+    const parsedWidth = parseWidth(width);
+    const contextValue = {
+        open,
+        onOpenChange,
+        toggle,
+        side,
+        width: parsedWidth,
+        closeOnBackdropPress,
+    };
+    return (_jsx(DrawerContext.Provider, { value: contextValue, children: children }));
+}
+// ============================================================================
+// Drawer Trigger Component
+// ============================================================================
+function DrawerTrigger({ asChild, children, style: styleOverride }) {
+    const { toggle } = useDrawerContext();
+    // Use toggle directly - it reads current state from a ref, avoiding stale closures
+    const handlePress = () => {
+        toggle();
+    };
+    if (asChild && React.isValidElement(children)) {
+        // Clone child and inject onPress directly instead of using SlotPressable
+        return React.cloneElement(children, {
+            onPress: handlePress,
+            accessibilityRole: "button",
+            style: [
+                children.props.style,
+                Platform.OS === "web" && { cursor: "pointer" },
+                styleOverride,
+            ],
+        });
+    }
+    return (_jsx(Pressable, { onPress: handlePress, accessibilityRole: "button", style: [
+            Platform.OS === "web" && { cursor: "pointer" },
+            styleOverride,
+        ], children: children }));
+}
+// ============================================================================
+// Drawer Content Component
+// ============================================================================
+function DrawerContent({ swipeEnabled = true, swipeThreshold = 0.3, velocityThreshold = 500, style: styleOverride, children, ...props }) {
+    const drawerContext = useDrawerContext();
+    const { open, onOpenChange, side, width, closeOnBackdropPress } = drawerContext;
+    const { theme, getShadowStyle } = useTheme();
+    const insets = useSafeAreaInsets();
+    // Animation values - initialize based on initial open state
+    const closedPosition = side === "left" ? -width : width;
+    const translateX = useRef(new Animated.Value(open ? 0 : closedPosition)).current;
+    const backdropOpacity = useRef(new Animated.Value(open ? 1 : 0)).current;
+    // Track if drawer is actually visible (for unmounting after close animation)
+    const [isVisible, setIsVisible] = useState(open);
+    // Track what we last animated to - persists across renders
+    const lastOpenRef = useRef(null);
+    // Track running animation to properly cancel it
+    const runningAnimationRef = useRef(null);
+    // Use semantic foreground color for text on background
+    const textColor = theme.colors.foreground;
+    // Trigger animation during render if open changed
+    if (open !== lastOpenRef.current) {
+        const previousOpen = lastOpenRef.current;
+        lastOpenRef.current = open;
+        // Stop any running animations immediately
+        if (runningAnimationRef.current) {
+            runningAnimationRef.current.stop();
+            runningAnimationRef.current = null;
+        }
+        if (open) {
+            // Opening - set visible immediately
+            if (!isVisible) {
+                setIsVisible(true);
+            }
+            // If this is first render (previousOpen is null), set initial position
+            // Otherwise animate from current position (handles mid-animation toggle)
+            if (previousOpen === null) {
+                translateX.setValue(closedPosition);
+                backdropOpacity.setValue(0);
+            }
+            // Animate to open position from wherever we are
+            const animation = Animated.parallel([
+                Animated.timing(translateX, {
+                    toValue: 0,
+                    duration: 200,
+                    useNativeDriver: shouldUseNativeDriver,
+                }),
+                Animated.timing(backdropOpacity, {
+                    toValue: 1,
+                    duration: 200,
+                    useNativeDriver: shouldUseNativeDriver,
+                }),
+            ]);
+            runningAnimationRef.current = animation;
+            animation.start(({ finished }) => {
+                if (finished) {
+                    runningAnimationRef.current = null;
+                }
+            });
+        }
+        else if (previousOpen === true) {
+            // Closing - only animate if we were actually open (skip mount when drawer starts closed)
+            const animation = Animated.parallel([
+                Animated.timing(translateX, {
+                    toValue: closedPosition,
+                    duration: 200,
+                    useNativeDriver: shouldUseNativeDriver,
+                }),
+                Animated.timing(backdropOpacity, {
+                    toValue: 0,
+                    duration: 200,
+                    useNativeDriver: shouldUseNativeDriver,
+                }),
+            ]);
+            runningAnimationRef.current = animation;
+            animation.start(({ finished }) => {
+                runningAnimationRef.current = null;
+                // Only hide if animation completed (wasn't interrupted)
+                if (finished) {
+                    setIsVisible(false);
+                }
+            });
+        }
+    }
+    // Create pan responder for swipe gestures (native only)
+    const panResponder = useRef(Platform.OS !== "web" && swipeEnabled
+        ? PanResponder.create({
+            onStartShouldSetPanResponder: () => false,
+            onMoveShouldSetPanResponder: (_evt, gestureState) => {
+                // Only respond to horizontal swipes
+                const isHorizontal = Math.abs(gestureState.dx) > Math.abs(gestureState.dy);
+                const isSignificant = Math.abs(gestureState.dx) > 10;
+                // For left drawer, only respond to leftward swipes (negative dx)
+                // For right drawer, only respond to rightward swipes (positive dx)
+                const isCorrectDirection = (side === "left" && gestureState.dx < 0) ||
+                    (side === "right" && gestureState.dx > 0);
+                return isHorizontal && isSignificant && isCorrectDirection;
+            },
+            onPanResponderMove: (_evt, gestureState) => {
+                // Clamp the translation
+                let translation;
+                if (side === "left") {
+                    // Left drawer: allow negative translation (closing)
+                    translation = Math.min(0, Math.max(-width, gestureState.dx));
+                }
+                else {
+                    // Right drawer: allow positive translation (closing)
+                    translation = Math.max(0, Math.min(width, gestureState.dx));
+                }
+                translateX.setValue(translation);
+                // Update backdrop opacity based on drawer position
+                const progress = 1 - Math.abs(translation) / width;
+                backdropOpacity.setValue(progress);
+            },
+            onPanResponderRelease: (_evt, gestureState) => {
+                const velocity = side === "left" ? -gestureState.vx : gestureState.vx;
+                const translation = Math.abs(gestureState.dx);
+                // Determine if we should close
+                const shouldClose = translation > width * swipeThreshold || velocity > velocityThreshold / 1000;
+                if (shouldClose) {
+                    // Animate to closed
+                    const targetX = side === "left" ? -width : width;
+                    Animated.parallel([
+                        Animated.spring(translateX, {
+                            toValue: targetX,
+                            tension: 65,
+                            friction: 11,
+                            useNativeDriver: shouldUseNativeDriver,
+                        }),
+                        Animated.timing(backdropOpacity, {
+                            toValue: 0,
+                            duration: 200,
+                            useNativeDriver: shouldUseNativeDriver,
+                        }),
+                    ]).start(() => {
+                        onOpenChange(false);
+                        setIsVisible(false);
+                    });
+                }
+                else {
+                    // Snap back to open
+                    Animated.parallel([
+                        Animated.spring(translateX, {
+                            toValue: 0,
+                            tension: 65,
+                            friction: 11,
+                            useNativeDriver: shouldUseNativeDriver,
+                        }),
+                        Animated.timing(backdropOpacity, {
+                            toValue: 1,
+                            duration: 150,
+                            useNativeDriver: shouldUseNativeDriver,
+                        }),
+                    ]).start();
+                }
+            },
+        })
+        : null).current;
+    // Handle backdrop press
+    const handleBackdropPress = () => {
+        if (closeOnBackdropPress) {
+            onOpenChange(false);
+        }
+    };
+    // Don't render if not visible
+    if (!isVisible && !open) {
+        return null;
+    }
+    const shadowStyle = StyleSheet.flatten(getShadowStyle("soft"));
+    const drawerStyle = {
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        width,
+        [side]: 0,
+        backgroundColor: theme.colors.background,
+        borderColor: theme.colors.border,
+        ...(side === "left"
+            ? { borderRightWidth: 1 }
+            : { borderLeftWidth: 1 }),
+        ...shadowStyle,
+        paddingTop: insets.top,
+        paddingBottom: insets.bottom,
+        ...(Platform.OS === "web" && { zIndex: 51 }),
+    };
+    const contentElement = (_jsx(Portal, { name: "drawer-portal", children: _jsx(FullWindowOverlay, { children: _jsx(DrawerContext.Provider, { value: drawerContext, children: _jsxs(View, { style: StyleSheet.absoluteFill, children: [_jsx(Animated.View, { style: [
+                                StyleSheet.absoluteFill,
+                                {
+                                    backgroundColor: theme.colors.overlay,
+                                    opacity: backdropOpacity,
+                                },
+                                Platform.OS === "web" && { zIndex: 50 },
+                            ], children: _jsx(Pressable, { style: StyleSheet.absoluteFill, onPress: handleBackdropPress, accessibilityRole: "button", accessibilityLabel: "Close drawer" }) }), _jsx(Animated.View, { style: [
+                                drawerStyle,
+                                {
+                                    transform: [{ translateX }],
+                                },
+                                styleOverride && typeof styleOverride !== "function"
+                                    ? StyleSheet.flatten(styleOverride)
+                                    : undefined,
+                            ], accessibilityViewIsModal: true, ...(Platform.OS === "web" && {
+                                role: "dialog",
+                                "aria-modal": true,
+                            }), ...(panResponder ? panResponder.panHandlers : {}), ...props, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: children }) }) })] }) }) }) }));
+    return contentElement;
+}
+// ============================================================================
+// Drawer Header Component
+// ============================================================================
+function DrawerHeader({ children, style, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(View, { style: [
+            {
+                paddingHorizontal: spacing.md,
+                paddingVertical: spacing.md,
+                borderBottomWidth: 1,
+                borderBottomColor: theme.colors.border,
+            },
+            style,
+        ], ...props, children: children }));
+}
+// ============================================================================
+// Drawer Body Component
+// ============================================================================
+function DrawerBody({ children, style, ...props }) {
+    return (_jsx(View, { style: [
+            {
+                flex: 1,
+                paddingHorizontal: spacing.md,
+                paddingVertical: spacing.md,
+            },
+            style,
+        ], ...props, children: children }));
+}
+// ============================================================================
+// Drawer Footer Component
+// ============================================================================
+function DrawerFooter({ children, style, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(View, { style: [
+            {
+                paddingHorizontal: spacing.md,
+                paddingVertical: spacing.md,
+                borderTopWidth: 1,
+                borderTopColor: theme.colors.border,
+            },
+            style,
+        ], ...props, children: children }));
+}
+// ============================================================================
+// Close Button Hook (for programmatic close from within drawer)
+// ============================================================================
+function useDrawerClose() {
+    const { onOpenChange } = useDrawerContext();
+    return () => onOpenChange(false);
+}
+function DrawerClose({ asChild, children, style: styleOverride }) {
+    const { onOpenChange } = useDrawerContext();
+    const handlePress = () => {
+        onOpenChange(false);
+    };
+    if (asChild) {
+        return (_jsx(SlotPressable, { onPress: handlePress, accessibilityRole: "button", accessibilityLabel: "Close", style: [
+                Platform.OS === "web" && { cursor: "pointer" },
+                styleOverride,
+            ], children: children }));
+    }
+    return (_jsx(Pressable, { onPress: handlePress, accessibilityRole: "button", accessibilityLabel: "Close", style: [
+            Platform.OS === "web" && { cursor: "pointer" },
+            styleOverride,
+        ], children: children }));
+}
+const Drawer = Object.assign(DrawerRoot, {
+    Trigger: DrawerTrigger,
+    Content: DrawerContent,
+    Header: DrawerHeader,
+    Body: DrawerBody,
+    Footer: DrawerFooter,
+    Close: DrawerClose,
+});
+export { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerClose, useDrawerClose, };

package/dist/components/DropdownMenu.d.ts

@@ -0,0 +1,120 @@
+import * as React from "react";
+import { type TextStyle, View } from "react-native";
+import * as DropdownMenuPrimitive from "@rn-primitives/dropdown-menu";
+declare const DropdownMenu: {
+    ({ asChild, onOpenChange: onOpenChangeProp, ref, ...viewProps }: import("react-native").ViewProps & {
+        asChild?: boolean;
+    } & {
+        onOpenChange?: (open: boolean) => void;
+    } & React.RefAttributes<View>): React.JSX.Element;
+    displayName: string;
+};
+declare const DropdownMenuTrigger: {
+    ({ asChild, onPress: onPressProp, disabled, ref, ...props }: Omit<import("react-native").PressableProps & React.RefAttributes<View>, "ref"> & {
+        asChild?: boolean;
+    } & {
+        onKeyDown?: (ev: React.KeyboardEvent) => void;
+        onKeyUp?: (ev: React.KeyboardEvent) => void;
+    } & React.RefAttributes<import("@rn-primitives/dropdown-menu").TriggerRef>): React.JSX.Element;
+    displayName: string;
+};
+declare const DropdownMenuGroup: {
+    ({ asChild, ref, ...props }: import("react-native").ViewProps & {
+        asChild?: boolean;
+    } & React.RefAttributes<View>): React.JSX.Element;
+    displayName: string;
+};
+declare const DropdownMenuPortal: typeof DropdownMenuPrimitive.Portal;
+declare const DropdownMenuSub: {
+    ({ asChild, defaultOpen, open: openProp, onOpenChange: onOpenChangeProp, ref, ...props }: import("react-native").ViewProps & {
+        asChild?: boolean;
+    } & {
+        defaultOpen?: boolean;
+        open?: boolean;
+        onOpenChange?: (value: boolean) => void;
+    } & React.RefAttributes<View>): React.JSX.Element;
+    displayName: string;
+};
+declare const DropdownMenuRadioGroup: {
+    ({ asChild, value, onValueChange, ref, ...props }: import("react-native").ViewProps & {
+        asChild?: boolean;
+    } & {
+        value: string | undefined;
+        onValueChange: (value: string) => void;
+    } & React.RefAttributes<View>): React.JSX.Element;
+    displayName: string;
+};
+/**
+ * DropdownMenuSubTrigger Component
+ * Trigger for sub-menus with automatic chevron icon
+ * Shows ChevronRight on web, ChevronDown/ChevronUp on native based on open state
+ */
+type DropdownMenuSubTriggerProps = DropdownMenuPrimitive.SubTriggerProps & {
+    inset?: boolean;
+};
+declare function DropdownMenuSubTrigger({ inset, children, style: styleOverride, ...props }: DropdownMenuSubTriggerProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * DropdownMenuSubContent Component
+ * Content container for sub-menus
+ */
+type DropdownMenuSubContentProps = DropdownMenuPrimitive.SubContentProps;
+declare function DropdownMenuSubContent({ style: styleOverride, ...props }: DropdownMenuSubContentProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * DropdownMenuContent Component
+ * Main dropdown content with portal, overlay, and animation
+ *
+ * Positioning props:
+ * - side: Which side of the trigger to position on ("top" | "bottom" | "left" | "right")
+ * - align: Alignment relative to the trigger ("start" | "center" | "end")
+ * - sideOffset: Distance from the trigger in pixels (default: 4)
+ */
+type DropdownMenuContentProps = DropdownMenuPrimitive.ContentProps & {
+    portalHost?: string;
+};
+declare function DropdownMenuContent({ side, align, sideOffset, portalHost, style: styleOverride, ...props }: DropdownMenuContentProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * DropdownMenuItem Component
+ * Standard menu item with optional destructive variant
+ */
+type DropdownMenuItemProps = DropdownMenuPrimitive.ItemProps & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+};
+declare function DropdownMenuItem({ inset, variant, style: styleOverride, ...props }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * DropdownMenuCheckboxItem Component
+ * Menu item with checkbox indicator
+ */
+type DropdownMenuCheckboxItemProps = DropdownMenuPrimitive.CheckboxItemProps;
+declare function DropdownMenuCheckboxItem({ children, style: styleOverride, ...props }: DropdownMenuCheckboxItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * DropdownMenuRadioItem Component
+ * Menu item with radio button indicator
+ */
+type DropdownMenuRadioItemProps = DropdownMenuPrimitive.RadioItemProps;
+declare function DropdownMenuRadioItem({ children, style: styleOverride, ...props }: DropdownMenuRadioItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * DropdownMenuLabel Component
+ * Label for menu sections
+ */
+type DropdownMenuLabelProps = DropdownMenuPrimitive.LabelProps & {
+    inset?: boolean;
+};
+declare function DropdownMenuLabel({ inset, style: styleOverride, ...props }: DropdownMenuLabelProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * DropdownMenuSeparator Component
+ * Visual divider between menu sections
+ */
+type DropdownMenuSeparatorProps = DropdownMenuPrimitive.SeparatorProps;
+declare function DropdownMenuSeparator({ style: styleOverride, ...props }: DropdownMenuSeparatorProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * DropdownMenuShortcut Component
+ * Text component for displaying keyboard shortcuts
+ */
+interface DropdownMenuShortcutProps {
+    children: React.ReactNode;
+    style?: TextStyle;
+}
+declare function DropdownMenuShortcut({ style: styleOverride, ...props }: DropdownMenuShortcutProps): import("react/jsx-runtime").JSX.Element;
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, };
+export type { DropdownMenuSubTriggerProps, DropdownMenuSubContentProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioItemProps, DropdownMenuLabelProps, DropdownMenuSeparatorProps, DropdownMenuShortcutProps, };