@mrmeg/expo-ui 0.1.0

package/dist/components/Dialog.d.ts

@@ -0,0 +1,140 @@
+import * as React from "react";
+import { View, ViewProps } from "react-native";
+import * as DialogPrimitive from "@rn-primitives/dialog";
+import * as AlertDialogPrimitive from "@rn-primitives/alert-dialog";
+declare const DialogTrigger: {
+    ({ 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<View>): React.JSX.Element;
+    displayName: string;
+};
+declare const DialogClose: {
+    ({ 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<View>): React.JSX.Element;
+    displayName: string;
+};
+interface DialogProps extends DialogPrimitive.RootProps {
+    children: React.ReactNode;
+}
+declare function DialogRoot({ children, ...props }: DialogProps): import("react/jsx-runtime").JSX.Element;
+interface DialogContentProps extends DialogPrimitive.ContentProps {
+    portalHost?: string;
+}
+declare function DialogContent({ portalHost, style, children, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogHeader({ children, style, ...props }: ViewProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogFooter({ children, style, ...props }: ViewProps): import("react/jsx-runtime").JSX.Element;
+declare function DialogTitle({ children, style, ...props }: DialogPrimitive.TitleProps & {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DialogDescription({ children, style, ...props }: DialogPrimitive.DescriptionProps & {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare const Dialog: typeof DialogRoot & {
+    Trigger: {
+        ({ 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<View>): React.JSX.Element;
+        displayName: string;
+    };
+    Content: typeof DialogContent;
+    Header: typeof DialogHeader;
+    Footer: typeof DialogFooter;
+    Title: typeof DialogTitle;
+    Description: typeof DialogDescription;
+    Close: {
+        ({ 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<View>): React.JSX.Element;
+        displayName: string;
+    };
+};
+declare const AlertDialogTrigger: {
+    ({ 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<View>): React.JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogAction: {
+    ({ 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<View>): React.JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogCancel: {
+    ({ 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<View>): React.JSX.Element;
+    displayName: string;
+};
+interface AlertDialogProps extends AlertDialogPrimitive.RootProps {
+    children: React.ReactNode;
+}
+declare function AlertDialogRoot({ children, ...props }: AlertDialogProps): import("react/jsx-runtime").JSX.Element;
+interface AlertDialogContentProps extends AlertDialogPrimitive.ContentProps {
+    portalHost?: string;
+}
+declare function AlertDialogContent({ portalHost, style, children, ...props }: AlertDialogContentProps): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogTitle({ children, style, ...props }: AlertDialogPrimitive.TitleProps & {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogDescription({ children, style, ...props }: AlertDialogPrimitive.DescriptionProps & {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare const AlertDialog: typeof AlertDialogRoot & {
+    Trigger: {
+        ({ 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<View>): React.JSX.Element;
+        displayName: string;
+    };
+    Content: typeof AlertDialogContent;
+    Header: typeof DialogHeader;
+    Footer: typeof DialogFooter;
+    Title: typeof AlertDialogTitle;
+    Description: typeof AlertDialogDescription;
+    Action: {
+        ({ 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<View>): React.JSX.Element;
+        displayName: string;
+    };
+    Cancel: {
+        ({ 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<View>): React.JSX.Element;
+        displayName: string;
+    };
+};
+export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };
+export type { DialogProps, DialogContentProps, AlertDialogProps, AlertDialogContentProps, };

package/dist/components/Dialog.js

@@ -0,0 +1,167 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Platform, StyleSheet, View } from "react-native";
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
+import * as DialogPrimitive from "@rn-primitives/dialog";
+import * as AlertDialogPrimitive from "@rn-primitives/alert-dialog";
+import { AnimatedView } from "./AnimatedView";
+import { TextClassContext, TextColorContext } from "./StyledText";
+import { StyledText } from "./StyledText";
+import { useTheme } from "../hooks/useTheme";
+import { spacing } from "../constants/spacing";
+import { palette } from "../constants/colors";
+const FullWindowOverlay = Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
+// ============================================================================
+// Dialog
+// ============================================================================
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogClose = DialogPrimitive.Close;
+function DialogRoot({ children, ...props }) {
+    return _jsx(DialogPrimitive.Root, { ...props, children: children });
+}
+function DialogContent({ portalHost, style, children, ...props }) {
+    const { theme, getShadowStyle, getContrastingColor } = useTheme();
+    const textColor = getContrastingColor(theme.colors.background, palette.white, palette.black);
+    return (_jsx(DialogPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(DialogPrimitive.Overlay, { style: StyleSheet.flatten([
+                    StyleSheet.absoluteFill,
+                    { backgroundColor: theme.colors.overlay },
+                    Platform.OS === "web" && { zIndex: 50 },
+                ]), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, children: _jsx(View, { style: overlayStyles.centeredContainer, children: _jsx(AnimatedView, { type: "scale", enterDuration: 250, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(DialogPrimitive.Content, { style: StyleSheet.flatten([
+                                            {
+                                                backgroundColor: theme.colors.background,
+                                                borderColor: theme.colors.border,
+                                                borderWidth: 1,
+                                                borderRadius: spacing.radiusLg,
+                                                padding: spacing.lg,
+                                                width: "90%",
+                                                maxWidth: 450,
+                                                maxHeight: "85%",
+                                                ...getShadowStyle("soft"),
+                                            },
+                                            style,
+                                        ]), ...props, children: children }) }) }) }) }) }) }) }) }));
+}
+function DialogHeader({ children, style, ...props }) {
+    return (_jsx(View, { style: StyleSheet.flatten([{ gap: spacing.xs, marginBottom: spacing.md }, style]), ...props, children: children }));
+}
+function DialogFooter({ children, style, ...props }) {
+    return (_jsx(View, { style: StyleSheet.flatten([
+            {
+                flexDirection: "row",
+                justifyContent: "flex-end",
+                gap: spacing.sm,
+                marginTop: spacing.lg,
+            },
+            style,
+        ]), ...props, children: children }));
+}
+function DialogTitle({ children, style, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(DialogPrimitive.Title, { asChild: true, children: _jsx(StyledText, { fontWeight: "semibold", style: StyleSheet.flatten([
+                {
+                    fontSize: 18,
+                    lineHeight: 24,
+                    letterSpacing: -0.3,
+                    color: theme.colors.text,
+                },
+                style,
+            ]), ...props, children: children }) }));
+}
+function DialogDescription({ children, style, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(DialogPrimitive.Description, { asChild: true, children: _jsx(StyledText, { style: StyleSheet.flatten([
+                {
+                    fontSize: 14,
+                    lineHeight: 20,
+                    color: theme.colors.textDim,
+                },
+                style,
+            ]), ...props, children: children }) }));
+}
+const Dialog = Object.assign(DialogRoot, {
+    Trigger: DialogTrigger,
+    Content: DialogContent,
+    Header: DialogHeader,
+    Footer: DialogFooter,
+    Title: DialogTitle,
+    Description: DialogDescription,
+    Close: DialogClose,
+});
+// ============================================================================
+// AlertDialog
+// ============================================================================
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+const AlertDialogAction = AlertDialogPrimitive.Action;
+const AlertDialogCancel = AlertDialogPrimitive.Cancel;
+function AlertDialogRoot({ children, ...props }) {
+    return _jsx(AlertDialogPrimitive.Root, { ...props, children: children });
+}
+function AlertDialogContent({ portalHost, style, children, ...props }) {
+    const { theme, getShadowStyle, getContrastingColor } = useTheme();
+    const textColor = getContrastingColor(theme.colors.background, palette.white, palette.black);
+    return (_jsx(AlertDialogPrimitive.Portal, { hostName: portalHost, children: _jsx(FullWindowOverlay, { children: _jsx(AlertDialogPrimitive.Overlay, { style: StyleSheet.flatten([
+                    StyleSheet.absoluteFill,
+                    { backgroundColor: theme.colors.overlay },
+                    Platform.OS === "web" && { zIndex: 52 },
+                ]), children: _jsx(AnimatedView, { type: "fade", enterDuration: 200, children: _jsx(View, { style: overlayStyles.centeredContainer, children: _jsx(AnimatedView, { type: "scale", enterDuration: 250, children: _jsx(TextColorContext.Provider, { value: textColor, children: _jsx(TextClassContext.Provider, { value: "", children: _jsx(AlertDialogPrimitive.Content, { style: StyleSheet.flatten([
+                                            {
+                                                backgroundColor: theme.colors.background,
+                                                borderColor: theme.colors.border,
+                                                borderWidth: 1,
+                                                borderRadius: spacing.radiusLg,
+                                                padding: spacing.lg,
+                                                width: "90%",
+                                                maxWidth: 450,
+                                                maxHeight: "85%",
+                                                ...getShadowStyle("soft"),
+                                            },
+                                            style,
+                                        ]), ...props, children: children }) }) }) }) }) }) }) }) }));
+}
+function AlertDialogTitle({ children, style, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(AlertDialogPrimitive.Title, { asChild: true, children: _jsx(StyledText, { fontWeight: "semibold", style: StyleSheet.flatten([
+                {
+                    fontSize: 18,
+                    lineHeight: 24,
+                    letterSpacing: -0.3,
+                    color: theme.colors.text,
+                },
+                style,
+            ]), ...props, children: children }) }));
+}
+function AlertDialogDescription({ children, style, ...props }) {
+    const { theme } = useTheme();
+    return (_jsx(AlertDialogPrimitive.Description, { asChild: true, children: _jsx(StyledText, { style: StyleSheet.flatten([
+                {
+                    fontSize: 14,
+                    lineHeight: 20,
+                    color: theme.colors.textDim,
+                },
+                style,
+            ]), ...props, children: children }) }));
+}
+const AlertDialog = Object.assign(AlertDialogRoot, {
+    Trigger: AlertDialogTrigger,
+    Content: AlertDialogContent,
+    Header: DialogHeader,
+    Footer: DialogFooter,
+    Title: AlertDialogTitle,
+    Description: AlertDialogDescription,
+    Action: AlertDialogAction,
+    Cancel: AlertDialogCancel,
+});
+// ============================================================================
+// Shared styles
+// ============================================================================
+const overlayStyles = StyleSheet.create({
+    centeredContainer: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+});
+// ============================================================================
+// Exports
+// ============================================================================
+export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose, AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/dist/components/DismissKeyboard.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { StyleProp, ViewStyle } from "react-native";
+type Props = {
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    /** Enable keyboard avoiding behavior */
+    avoidKeyboard?: boolean;
+    /** Enable scrolling */
+    scrollable?: boolean;
+};
+/**
+ * @returns Wrapper for a view that dismisses the keyboard when tapped outside of a text input
+ */
+export declare const DismissKeyboard: ({ children, style, avoidKeyboard, scrollable }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DismissKeyboard.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pressable, Keyboard, Platform, KeyboardAvoidingView, ScrollView } from "react-native";
+/**
+ * @returns Wrapper for a view that dismisses the keyboard when tapped outside of a text input
+ */
+export const DismissKeyboard = ({ children, style, avoidKeyboard = true, scrollable = true }) => {
+    const handlePress = () => Platform.OS !== "web" && Keyboard.dismiss();
+    const content = scrollable ? (_jsx(ScrollView, { style: { flex: 1 }, contentContainerStyle: { flexGrow: 1, justifyContent: "center" }, keyboardShouldPersistTaps: "handled", showsVerticalScrollIndicator: false, children: children })) : (children);
+    if (!avoidKeyboard) {
+        return (_jsx(Pressable, { onPress: handlePress, accessible: false, style: { flex: 1 }, children: content }));
+    }
+    return (_jsx(KeyboardAvoidingView, { style: [{ flex: 1, width: "100%" }, style], behavior: Platform.OS === "ios" ? "padding" : "height", keyboardVerticalOffset: Platform.OS === "ios" ? 0 : 0, children: _jsx(Pressable, { onPress: handlePress, accessible: false, style: { flex: 1 }, children: content }) }));
+};

package/dist/components/Drawer.d.ts

@@ -0,0 +1,74 @@
+import React from "react";
+import { ViewProps, StyleProp, ViewStyle } from "react-native";
+type DrawerSide = "left" | "right";
+interface DrawerProps {
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Default open state for uncontrolled mode */
+    defaultOpen?: boolean;
+    /** Which side the drawer appears from */
+    side?: DrawerSide;
+    /** Drawer width in pixels or percentage string */
+    width?: number | `${number}%`;
+    /** Whether to close when backdrop is pressed */
+    closeOnBackdropPress?: boolean;
+    /** Children components */
+    children: React.ReactNode;
+}
+interface DrawerTriggerProps {
+    /** Use child component as trigger */
+    asChild?: boolean;
+    /** Children components */
+    children: React.ReactNode;
+    /** Optional style override */
+    style?: StyleProp<ViewStyle>;
+}
+interface DrawerContentProps extends ViewProps {
+    /** Whether to enable swipe gestures (native only) */
+    swipeEnabled?: boolean;
+    /** Swipe threshold to trigger close (0-1, percentage of width) */
+    swipeThreshold?: number;
+    /** Velocity threshold for quick swipe */
+    velocityThreshold?: number;
+    /** Optional style override */
+    style?: StyleProp<ViewStyle>;
+    /** Children components */
+    children: React.ReactNode;
+}
+interface DrawerHeaderProps extends ViewProps {
+    children: React.ReactNode;
+}
+interface DrawerBodyProps extends ViewProps {
+    children: React.ReactNode;
+}
+interface DrawerFooterProps extends ViewProps {
+    children: React.ReactNode;
+}
+declare function DrawerRoot({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen, side, width, closeOnBackdropPress, children, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+declare function DrawerTrigger({ asChild, children, style: styleOverride }: DrawerTriggerProps): import("react/jsx-runtime").JSX.Element;
+declare function DrawerContent({ swipeEnabled, swipeThreshold, velocityThreshold, style: styleOverride, children, ...props }: DrawerContentProps): import("react/jsx-runtime").JSX.Element | null;
+declare function DrawerHeader({ children, style, ...props }: DrawerHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function DrawerBody({ children, style, ...props }: DrawerBodyProps): import("react/jsx-runtime").JSX.Element;
+declare function DrawerFooter({ children, style, ...props }: DrawerFooterProps): import("react/jsx-runtime").JSX.Element;
+declare function useDrawerClose(): () => void;
+interface DrawerCloseProps {
+    /** Use child component as close button */
+    asChild?: boolean;
+    /** Children components */
+    children: React.ReactNode;
+    /** Optional style override */
+    style?: StyleProp<ViewStyle>;
+}
+declare function DrawerClose({ asChild, children, style: styleOverride }: DrawerCloseProps): import("react/jsx-runtime").JSX.Element;
+declare const Drawer: typeof DrawerRoot & {
+    Trigger: typeof DrawerTrigger;
+    Content: typeof DrawerContent;
+    Header: typeof DrawerHeader;
+    Body: typeof DrawerBody;
+    Footer: typeof DrawerFooter;
+    Close: typeof DrawerClose;
+};
+export { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerClose, useDrawerClose, };
+export type { DrawerProps, DrawerTriggerProps, DrawerContentProps, DrawerHeaderProps, DrawerBodyProps, DrawerFooterProps, DrawerCloseProps, };