@mrmeg/expo-ui 0.1.0

package/dist/components/BottomSheet.js

@@ -0,0 +1,513 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { createContext, useCallback, useContext, useEffect, useReducer, useRef, useState } from "react";
+import { View, Pressable, Animated, StyleSheet, Platform, Dimensions, PanResponder, ScrollView, } 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 { spacing } from "../constants/spacing";
+import { shouldUseNativeDriver } from "../lib/animations";
+import { TextColorContext, TextClassContext } from "./StyledText";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+/**
+ * BottomSheet Component with Sub-components
+ *
+ * A sliding bottom sheet overlay with snap points, swipe gestures,
+ * and compound component pattern matching Drawer.tsx.
+ *
+ * @example
+ * ```tsx
+ * <BottomSheet>
+ *   <BottomSheet.Trigger asChild>
+ *     <Button>Open Sheet</Button>
+ *   </BottomSheet.Trigger>
+ *   <BottomSheet.Content>
+ *     <BottomSheet.Handle />
+ *     <BottomSheet.Header>
+ *       <SansSerifBoldText>Title</SansSerifBoldText>
+ *     </BottomSheet.Header>
+ *     <BottomSheet.Body>
+ *       <SansSerifText>Content here</SansSerifText>
+ *     </BottomSheet.Body>
+ *     <BottomSheet.Footer>
+ *       <Button>Action</Button>
+ *     </BottomSheet.Footer>
+ *   </BottomSheet.Content>
+ * </BottomSheet>
+ * ```
+ */
+// Platform-specific overlay wrapper
+const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
+// ============================================================================
+// Context
+// ============================================================================
+const BottomSheetContext = createContext(null);
+function useBottomSheetContext() {
+    const context = useContext(BottomSheetContext);
+    if (!context) {
+        throw new Error("BottomSheet components must be used within a BottomSheet");
+    }
+    return context;
+}
+const DragContext = createContext(null);
+// ============================================================================
+// Utility Functions
+// ============================================================================
+function resolveSnapPoints(points) {
+    const screenHeight = Dimensions.get("window").height;
+    return points.map((p) => {
+        if (typeof p === "number")
+            return p;
+        return (parseFloat(p) / 100) * screenHeight;
+    });
+}
+function sheetReducer(state, action) {
+    switch (action.type) {
+        case "OPEN": return true;
+        case "CLOSE": return false;
+        case "TOGGLE": return !state;
+    }
+}
+// ============================================================================
+// BottomSheet Root
+// ============================================================================
+function BottomSheetRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, snapPoints: rawSnapPoints = ["50%"], closeOnBackdropPress = true, children, }) {
+    const [internalOpen, dispatch] = useReducer(sheetReducer, defaultOpen);
+    const isControlled = controlledOpen !== undefined;
+    const open = isControlled ? controlledOpen : internalOpen;
+    const snapPoints = resolveSnapPoints(rawSnapPoints);
+    const toggle = () => {
+        if (isControlled) {
+            controlledOnOpenChange?.(!controlledOpen);
+        }
+        else {
+            dispatch({ type: "TOGGLE" });
+        }
+    };
+    const onOpenChange = (newOpen) => {
+        if (isControlled) {
+            controlledOnOpenChange?.(newOpen);
+        }
+        else {
+            dispatch({ type: newOpen ? "OPEN" : "CLOSE" });
+        }
+    };
+    const contextValue = {
+        open,
+        onOpenChange,
+        toggle,
+        snapPoints,
+        currentSnapIndex: 0,
+        closeOnBackdropPress,
+    };
+    return (_jsx(BottomSheetContext.Provider, { value: contextValue, children: children }));
+}
+// ============================================================================
+// Trigger
+// ============================================================================
+function BottomSheetTrigger({ asChild, children, style: styleOverride }) {
+    const { toggle } = useBottomSheetContext();
+    const handlePress = () => toggle();
+    if (asChild && React.isValidElement(children)) {
+        return React.cloneElement(children, {
+            onPress: handlePress,
+            style: [
+                children.props.style,
+                Platform.OS === "web" && { cursor: "pointer" },
+                styleOverride,
+            ],
+        });
+    }
+    return (_jsx(Pressable, { onPress: handlePress, style: [
+            Platform.OS === "web" && { cursor: "pointer" },
+            styleOverride,
+        ], children: children }));
+}
+// ============================================================================
+// Content
+// ============================================================================
+function BottomSheetContent({ swipeEnabled = true, velocityThreshold = 500, style: styleOverride, children, ...props }) {
+    const sheetContext = useBottomSheetContext();
+    const { open, onOpenChange, snapPoints, closeOnBackdropPress } = sheetContext;
+    const { theme } = useTheme();
+    // Highest snap point is the max height
+    const maxHeight = Math.max(...snapPoints);
+    // With bottom:0 positioning, translateY=0 means visible, translateY=maxHeight means hidden below
+    const closedPosition = maxHeight;
+    const translateY = useRef(new Animated.Value(open ? 0 : closedPosition)).current;
+    const backdropOpacity = useRef(new Animated.Value(open ? 1 : 0)).current;
+    const [isVisible, setIsVisible] = useState(open);
+    const lastOpenRef = useRef(null);
+    const runningAnimationRef = useRef(null);
+    const currentHeightRef = useRef(maxHeight);
+    // Track which snap we're at
+    const currentSnapRef = useRef(snapPoints.length - 1);
+    const textColor = theme.colors.foreground;
+    // ------------------------------------------------------------------
+    // Shared snap/close logic used by both native PanResponder and web drag
+    // ------------------------------------------------------------------
+    const handleDragRelease = useCallback((dragDistance, velocity) => {
+        const visibleHeight = currentHeightRef.current - dragDistance;
+        if (velocity > velocityThreshold / 1000 || dragDistance > currentHeightRef.current * 0.4) {
+            const lowerSnaps = snapPoints.filter((s) => s < currentHeightRef.current);
+            if (lowerSnaps.length > 0 && dragDistance < currentHeightRef.current * 0.4) {
+                const nextSnap = lowerSnaps[lowerSnaps.length - 1];
+                currentHeightRef.current = nextSnap;
+                const targetY = maxHeight - nextSnap;
+                Animated.parallel([
+                    Animated.spring(translateY, {
+                        toValue: targetY,
+                        tension: 65,
+                        friction: 11,
+                        useNativeDriver: shouldUseNativeDriver,
+                    }),
+                    Animated.timing(backdropOpacity, {
+                        toValue: 1,
+                        duration: 150,
+                        useNativeDriver: shouldUseNativeDriver,
+                    }),
+                ]).start();
+            }
+            else {
+                Animated.parallel([
+                    Animated.timing(translateY, {
+                        toValue: closedPosition,
+                        duration: 200,
+                        useNativeDriver: shouldUseNativeDriver,
+                    }),
+                    Animated.timing(backdropOpacity, {
+                        toValue: 0,
+                        duration: 200,
+                        useNativeDriver: shouldUseNativeDriver,
+                    }),
+                ]).start(() => {
+                    onOpenChange(false);
+                    setIsVisible(false);
+                });
+            }
+        }
+        else {
+            let nearestSnap = snapPoints[0];
+            let minDistance = Infinity;
+            for (const snap of snapPoints) {
+                const dist = Math.abs(visibleHeight - snap);
+                if (dist < minDistance) {
+                    minDistance = dist;
+                    nearestSnap = snap;
+                }
+            }
+            currentHeightRef.current = nearestSnap;
+            const targetY = maxHeight - nearestSnap;
+            Animated.parallel([
+                Animated.spring(translateY, {
+                    toValue: targetY,
+                    tension: 65,
+                    friction: 11,
+                    useNativeDriver: shouldUseNativeDriver,
+                }),
+                Animated.timing(backdropOpacity, {
+                    toValue: 1,
+                    duration: 150,
+                    useNativeDriver: shouldUseNativeDriver,
+                }),
+            ]).start();
+        }
+    }, [snapPoints, maxHeight, closedPosition, translateY, backdropOpacity, onOpenChange, velocityThreshold]);
+    const handleDragMove = useCallback((dy) => {
+        // Base offset: where the sheet sits at the current snap point
+        // translateY=0 means top snap (maxHeight visible), higher values = further down
+        const baseOffset = maxHeight - currentHeightRef.current;
+        const newY = Math.max(baseOffset, baseOffset + dy);
+        translateY.setValue(newY);
+        // Progress: 1 = fully at current snap, 0 = fully closed
+        const dragFromBase = newY - baseOffset;
+        const progress = 1 - dragFromBase / currentHeightRef.current;
+        backdropOpacity.setValue(Math.max(0, progress));
+    }, [translateY, backdropOpacity, maxHeight]);
+    // ------------------------------------------------------------------
+    // Trigger animation during render if open changed
+    // ------------------------------------------------------------------
+    if (open !== lastOpenRef.current) {
+        const previousOpen = lastOpenRef.current;
+        lastOpenRef.current = open;
+        if (runningAnimationRef.current) {
+            runningAnimationRef.current.stop();
+            runningAnimationRef.current = null;
+        }
+        if (open) {
+            if (!isVisible) {
+                setIsVisible(true);
+            }
+            currentSnapRef.current = snapPoints.length - 1;
+            currentHeightRef.current = maxHeight;
+            if (previousOpen === null) {
+                translateY.setValue(closedPosition);
+                backdropOpacity.setValue(0);
+            }
+            const animation = Animated.parallel([
+                Animated.spring(translateY, {
+                    toValue: 0,
+                    tension: 65,
+                    friction: 11,
+                    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) {
+            const animation = Animated.parallel([
+                Animated.timing(translateY, {
+                    toValue: closedPosition,
+                    duration: 200,
+                    useNativeDriver: shouldUseNativeDriver,
+                }),
+                Animated.timing(backdropOpacity, {
+                    toValue: 0,
+                    duration: 200,
+                    useNativeDriver: shouldUseNativeDriver,
+                }),
+            ]);
+            runningAnimationRef.current = animation;
+            animation.start(({ finished }) => {
+                runningAnimationRef.current = null;
+                if (finished)
+                    setIsVisible(false);
+            });
+        }
+    }
+    // ------------------------------------------------------------------
+    // Native: PanResponder for swipe gestures on the whole sheet
+    // ------------------------------------------------------------------
+    const panResponder = useRef(Platform.OS !== "web" && swipeEnabled
+        ? PanResponder.create({
+            onStartShouldSetPanResponder: () => false,
+            onMoveShouldSetPanResponder: (_evt, gestureState) => {
+                const isVertical = Math.abs(gestureState.dy) > Math.abs(gestureState.dx);
+                const isSignificant = Math.abs(gestureState.dy) > 10;
+                const isDownward = gestureState.dy > 0;
+                return isVertical && isSignificant && isDownward;
+            },
+            onPanResponderMove: (_evt, gestureState) => {
+                handleDragMove(gestureState.dy);
+            },
+            onPanResponderRelease: (_evt, gestureState) => {
+                handleDragRelease(Math.max(0, gestureState.dy), gestureState.vy);
+            },
+        })
+        : null).current;
+    // ------------------------------------------------------------------
+    // Web: drag context provides callbacks for Handle's pointer events
+    // ------------------------------------------------------------------
+    const dragContextValue = Platform.OS === "web" && swipeEnabled
+        ? {
+            onDragMove: handleDragMove,
+            onDragEnd: (dy, velocity) => {
+                handleDragRelease(Math.max(0, dy), velocity);
+            },
+        }
+        : null;
+    const handleBackdropPress = () => {
+        if (closeOnBackdropPress) {
+            onOpenChange(false);
+        }
+    };
+    if (!isVisible && !open) {
+        return null;
+    }
+    const sheetStyle = {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: maxHeight,
+        backgroundColor: theme.colors.card,
+        borderTopLeftRadius: spacing.radiusXl,
+        borderTopRightRadius: spacing.radiusXl,
+        borderTopWidth: 1,
+        borderLeftWidth: 1,
+        borderRightWidth: 1,
+        borderColor: theme.colors.border,
+        ...(Platform.OS === "web" && { zIndex: 51 }),
+    };
+    const sheetContent = (_jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: children }) }));
+    const contentElement = (_jsx(Portal, { name: "bottom-sheet-portal", children: _jsx(FullWindowOverlay, { children: _jsx(BottomSheetContext.Provider, { value: sheetContext, 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 }) }), _jsx(Animated.View, { style: [
+                                sheetStyle,
+                                { transform: [{ translateY }] },
+                                styleOverride && typeof styleOverride !== "function"
+                                    ? StyleSheet.flatten(styleOverride)
+                                    : undefined,
+                            ], accessibilityViewIsModal: true, ...(Platform.OS === "web" && {
+                                role: "dialog",
+                                "aria-modal": true,
+                            }), ...(panResponder ? panResponder.panHandlers : {}), ...props, children: dragContextValue ? (_jsx(DragContext.Provider, { value: dragContextValue, children: sheetContent })) : (sheetContent) })] }) }) }) }));
+    return contentElement;
+}
+// ============================================================================
+// Handle
+// ============================================================================
+function BottomSheetHandle({ style }) {
+    const { theme } = useTheme();
+    const dragCtx = useContext(DragContext);
+    // Web pointer-event drag — attaches move/up listeners on document
+    const dragStartY = useRef(0);
+    const lastTimestamp = useRef(0);
+    const lastDy = useRef(0);
+    const isDragging = useRef(false);
+    useEffect(() => {
+        if (Platform.OS !== "web" || !dragCtx)
+            return;
+        const onPointerMove = (e) => {
+            if (!isDragging.current)
+                return;
+            const dy = e.clientY - dragStartY.current;
+            const now = Date.now();
+            const dt = (now - lastTimestamp.current) / 1000;
+            lastTimestamp.current = now;
+            lastDy.current = dy;
+            dragCtx.onDragMove(dy);
+            // Store velocity data on the event for release calculation
+            isDragging._lastDt = dt;
+            isDragging._lastDy = dy;
+        };
+        const onPointerUp = (e) => {
+            if (!isDragging.current)
+                return;
+            isDragging.current = false;
+            document.body.style.cursor = "";
+            document.body.style.userSelect = "";
+            const dy = e.clientY - dragStartY.current;
+            const dt = isDragging._lastDt || 0.016;
+            const prevDy = isDragging._lastDy || 0;
+            const velocity = dt > 0 ? (dy - prevDy) / dt / 1000 : 0;
+            dragCtx.onDragEnd(dy, velocity);
+        };
+        document.addEventListener("pointermove", onPointerMove);
+        document.addEventListener("pointerup", onPointerUp);
+        return () => {
+            document.removeEventListener("pointermove", onPointerMove);
+            document.removeEventListener("pointerup", onPointerUp);
+        };
+    }, [dragCtx]);
+    const handlePointerDown = useCallback((e) => {
+        if (Platform.OS !== "web" || !dragCtx)
+            return;
+        isDragging.current = true;
+        dragStartY.current = e.nativeEvent?.clientY ?? e.clientY;
+        lastTimestamp.current = Date.now();
+        lastDy.current = 0;
+        document.body.style.cursor = "grabbing";
+        document.body.style.userSelect = "none";
+    }, [dragCtx]);
+    return (_jsx(View, { style: [
+            staticStyles.handleContainer,
+            Platform.OS === "web" && { cursor: "grab" },
+            style,
+        ], ...(Platform.OS === "web" && dragCtx
+            ? { onPointerDown: handlePointerDown }
+            : {}), children: _jsx(View, { style: [
+                staticStyles.handle,
+                { backgroundColor: theme.colors.muted },
+            ] }) }));
+}
+// ============================================================================
+// Header
+// ============================================================================
+function BottomSheetHeader({ 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 }));
+}
+// ============================================================================
+// Body
+// ============================================================================
+function BottomSheetBody({ children, style, ...props }) {
+    return (_jsx(ScrollView, { style: [{ flex: 1 }, style], contentContainerStyle: {
+            paddingHorizontal: spacing.md,
+            paddingVertical: spacing.md,
+        }, showsVerticalScrollIndicator: false, ...props, children: children }));
+}
+// ============================================================================
+// Footer
+// ============================================================================
+function BottomSheetFooter({ children, style, ...props }) {
+    const { theme } = useTheme();
+    const insets = useSafeAreaInsets();
+    return (_jsx(View, { style: [
+            {
+                paddingHorizontal: spacing.md,
+                paddingTop: spacing.md,
+                paddingBottom: spacing.md + insets.bottom,
+                borderTopWidth: 1,
+                borderTopColor: theme.colors.border,
+            },
+            style,
+        ], ...props, children: children }));
+}
+// ============================================================================
+// Close
+// ============================================================================
+function BottomSheetClose({ asChild, children, style: styleOverride }) {
+    const { onOpenChange } = useBottomSheetContext();
+    const handlePress = () => onOpenChange(false);
+    if (asChild) {
+        return (_jsx(SlotPressable, { onPress: handlePress, style: [
+                Platform.OS === "web" && { cursor: "pointer" },
+                styleOverride,
+            ], children: children }));
+    }
+    return (_jsx(Pressable, { onPress: handlePress, style: [
+            Platform.OS === "web" && { cursor: "pointer" },
+            styleOverride,
+        ], children: children }));
+}
+// ============================================================================
+// Static styles
+// ============================================================================
+const staticStyles = StyleSheet.create({
+    handleContainer: {
+        alignItems: "center",
+        paddingTop: spacing.sm,
+        paddingBottom: spacing.xs,
+    },
+    handle: {
+        width: 36,
+        height: 4,
+        borderRadius: 2,
+    },
+});
+// ============================================================================
+// Compound export
+// ============================================================================
+const BottomSheet = Object.assign(BottomSheetRoot, {
+    Trigger: BottomSheetTrigger,
+    Content: BottomSheetContent,
+    Handle: BottomSheetHandle,
+    Header: BottomSheetHeader,
+    Body: BottomSheetBody,
+    Footer: BottomSheetFooter,
+    Close: BottomSheetClose,
+});
+export { BottomSheet, BottomSheetTrigger, BottomSheetContent, BottomSheetHandle, BottomSheetHeader, BottomSheetBody, BottomSheetFooter, BottomSheetClose, useBottomSheetContext, };

package/dist/components/Button.d.ts

@@ -0,0 +1,129 @@
+import React, { ComponentType } from "react";
+import { PressableProps, PressableStateCallbackType, StyleProp, TextStyle, ViewStyle, ImageStyle } from "react-native";
+import { TextProps } from "./StyledText";
+/**
+ * Button variants
+ */
+type Presets = "default" | "outline" | "ghost" | "link" | "destructive" | "secondary";
+/**
+ * Button size variants
+ */
+export type ButtonSize = "sm" | "md" | "lg";
+export interface ButtonAccessoryProps {
+    style: StyleProp<ViewStyle | TextStyle | ImageStyle>;
+    pressableState: PressableStateCallbackType;
+    disabled?: boolean;
+}
+export interface ButtonProps extends PressableProps {
+    /**
+     * Text which is looked up via i18n.
+     */
+    tx?: TextProps["tx"];
+    /**
+     * The text to display if not using `tx` or nested components.
+     */
+    text?: TextProps["text"];
+    /**
+     * Optional options to pass to i18n.
+     */
+    txOptions?: TextProps["txOptions"];
+    /**
+     * An optional style override useful for padding & margin.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * An optional style override for the "pressed" state.
+     */
+    pressedStyle?: StyleProp<ViewStyle>;
+    /**
+     * An optional style override for the button text.
+     */
+    textStyle?: StyleProp<TextStyle>;
+    /**
+     * An optional style override for the button text when in the "pressed" state.
+     */
+    pressedTextStyle?: StyleProp<TextStyle>;
+    /**
+     * An optional style override for the button text when in the "disabled" state.
+     */
+    disabledTextStyle?: StyleProp<TextStyle>;
+    /**
+     * One of the different types of button presets.
+     * @default "default"
+     */
+    preset?: Presets;
+    /**
+     * Size variant
+     * @default "md"
+     */
+    size?: ButtonSize;
+    /**
+     * An optional component to render on the right side of the text.
+     */
+    RightAccessory?: ComponentType<ButtonAccessoryProps>;
+    /**
+     * An optional component to render on the left side of the text.
+     */
+    LeftAccessory?: ComponentType<ButtonAccessoryProps>;
+    /**
+     * Children components.
+     */
+    children?: React.ReactNode;
+    /**
+     * disabled prop, accessed directly for declarative styling reasons.
+     */
+    disabled?: boolean;
+    /**
+     * An optional style override for the disabled state
+     */
+    disabledStyle?: StyleProp<ViewStyle>;
+    /**
+     * Whether to show shadow
+     */
+    withShadow?: boolean;
+    /**
+     * Whether button is loading (shows spinner)
+     */
+    loading?: boolean;
+    /**
+     * Whether button should take full width of container
+     */
+    fullWidth?: boolean;
+}
+/**
+ * Enhanced Button Component
+ *
+ * Features:
+ * - 6 variants (default, outline, ghost, link, destructive, secondary)
+ * - 3 sizes (sm, md, lg)
+ * - Loading state with spinner
+ * - Full width option
+ * - Shadow support
+ * - Automatic text contrast calculation
+ * - Accessory components (left/right)
+ *
+ * Usage:
+ * ```tsx
+ * // Default button
+ * <Button onPress={handler}>
+ *   <SansSerifBoldText>Click Me</SansSerifBoldText>
+ * </Button>
+ *
+ * // Different variants
+ * <Button preset="outline" onPress={handler}>Outline</Button>
+ * <Button preset="ghost" onPress={handler}>Ghost</Button>
+ * <Button preset="destructive" onPress={handler}>Delete</Button>
+ *
+ * // Different sizes
+ * <Button size="sm" onPress={handler}>Small</Button>
+ * <Button size="lg" onPress={handler}>Large</Button>
+ *
+ * // Loading state
+ * <Button loading onPress={handler}>Processing...</Button>
+ *
+ * // Full width
+ * <Button fullWidth onPress={handler}>Submit</Button>
+ * ```
+ */
+export declare function Button(props: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};