@swan-io/lake 1.0.0

package/src/components/FixedListViewCells.d.ts

@@ -0,0 +1,55 @@
+import { ReactNode } from "react";
+import { ColorVariants } from "../constants/design";
+import { TextVariant } from "./LakeText";
+type Justify = "flex-start" | "center" | "flex-end";
+type SortDirection = "Desc" | "Asc";
+export declare const SimpleHeaderCell: ({ text, sort, justifyContent, onPress, }: {
+    text: string;
+    justifyContent?: Justify | undefined;
+    sort?: SortDirection | undefined;
+    onPress?: ((direction: SortDirection) => void) | undefined;
+}) => JSX.Element;
+export declare const ColorPatchCell: ({ isHovered, alternativeText, color, }: {
+    isHovered: boolean;
+    alternativeText?: string | undefined;
+    color: ColorVariants;
+}) => JSX.Element | null;
+export declare const SimpleTitleCell: ({ isHighlighted, text, }: {
+    isHighlighted?: boolean | undefined;
+    text: string;
+}) => JSX.Element;
+export declare const SimpleRegularTextCell: ({ variant, text, textAlign, }: {
+    variant?: "semibold" | "medium" | "regular" | "light" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
+    text: string;
+    textAlign?: "center" | "left" | "right" | undefined;
+}) => JSX.Element;
+export declare const CopyableRegularTextCell: ({ variant, text, copyWording, copiedWording, }: {
+    variant?: "semibold" | "medium" | "regular" | "light" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
+    text: string;
+    copyWording: string;
+    copiedWording: string;
+}) => JSX.Element;
+export declare const BalanceCell: ({ value, currency, formatCurrency, textAlign, }: {
+    value: number;
+    currency: string;
+    formatCurrency: (value: number, currency: string) => string;
+    textAlign?: "center" | "left" | "right" | undefined;
+}) => JSX.Element;
+export declare const LinkCell: ({ children, external, onPress, }: {
+    children: ReactNode;
+    onPress: () => void;
+    external?: boolean | undefined;
+}) => JSX.Element;
+export declare const StartAlignedCell: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;
+export declare const CenteredCell: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;
+export declare const EndAlignedCell: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;
+export declare const CellAction: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;
+export {};

package/src/components/FixedListViewCells.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { Clipboard, StyleSheet, View } from "react-native";
+import { match } from "ts-pattern";
+import { visuallyHiddenStyle } from "../constants/commonStyles";
+import { colors, spacings } from "../constants/design";
+import { isNotNullish, isNullish } from "../utils/nullish";
+import { Box } from "./Box";
+import { Icon } from "./Icon";
+import { LakeText } from "./LakeText";
+import { LakeTooltip } from "./LakeTooltip";
+import { Pressable } from "./Pressable";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    cellContainer: {
+        display: "flex",
+        flexGrow: 1,
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    cell: {
+        display: "flex",
+        paddingHorizontal: spacings[16],
+        flexGrow: 1,
+        flexDirection: "row",
+        alignItems: "center",
+        width: 1,
+        alignSelf: "stretch",
+    },
+    icon: {
+        alignSelf: "stretch",
+        alignItems: "center",
+        justifyContent: "center",
+        paddingHorizontal: spacings[4],
+    },
+    iconContainer: {
+        flexDirection: "row",
+        alignSelf: "stretch",
+        alignItems: "stretch",
+        justifyContent: "center",
+    },
+    centeredCell: {
+        justifyContent: "center",
+    },
+    endAlignedCell: {
+        justifyContent: "flex-end",
+    },
+    regularText: {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        width: 1,
+        flexGrow: 1,
+        whiteSpace: "nowrap",
+    },
+    mediumText: {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        width: 1,
+        flexGrow: 1,
+        whiteSpace: "nowrap",
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    colorPatch: {
+        flexGrow: 1,
+    },
+    alternativeText: visuallyHiddenStyle,
+    sortIcon: {
+        transitionProperty: "transform",
+        transitionDuration: "300ms",
+        transitionTimingFunction: "ease-in-out",
+    },
+    sortIconReversed: {
+        transform: [{ rotate: "-180deg" }],
+    },
+    cellAction: {
+        paddingVertical: spacings[16],
+        paddingHorizontal: spacings[8],
+    },
+    underline: {
+        boxShadow: "inset 0 -2px currentColor",
+    },
+    sortHorizontalBar: {
+        position: "absolute",
+        width: "100%",
+        height: 2,
+        bottom: -10,
+        backgroundColor: colors.current[500],
+        borderBottomColor: colors.current[500],
+    },
+});
+export const SimpleHeaderCell = ({ text, sort, justifyContent = "flex-start", onPress, }) => {
+    const sortActive = isNotNullish(sort) && isNotNullish(onPress);
+    return (_jsx(Pressable, { onPress: () => {
+            onPress?.(match(sort)
+                .with("Desc", () => "Asc")
+                .with("Asc", () => "Desc")
+                .otherwise(() => "Desc"));
+        }, disabled: isNullish(onPress), style: styles.cellContainer, children: ({ hovered }) => (_jsx(View, { style: [styles.cell, { justifyContent }], children: _jsxs(View, { children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(LakeText, { numberOfLines: 1, variant: "medium", color: sortActive ? colors.current[500] : colors.gray[900], style: {
+                                    textAlign: match(justifyContent)
+                                        .with("flex-start", () => "left")
+                                        .with("center", () => "center")
+                                        .with("flex-end", () => "right")
+                                        .exhaustive(),
+                                }, children: text }), isNotNullish(onPress) ? (_jsxs(_Fragment, { children: [_jsx(Space, { width: 8 }), _jsx(Box, { style: [styles.sortIcon, sort === "Asc" && styles.sortIconReversed], children: _jsx(Icon, { size: 15, color: sortActive ? colors.current[500] : colors.gray[500], name: sortActive ? "arrow-down-filled" : "chevron-up-down-regular" }) })] })) : null] }), sortActive ? (_jsx(View, { style: styles.sortHorizontalBar })) : hovered ? (_jsx(View, { style: [styles.sortHorizontalBar, { backgroundColor: colors.gray[900] }] })) : null] }) })) }));
+};
+export const ColorPatchCell = ({ isHovered, alternativeText, color, }) => {
+    return isHovered ? (_jsx(View, { style: [styles.colorPatch, { backgroundColor: colors[color].primary }], children: isNotNullish(alternativeText) ? (_jsx(LakeText, { style: styles.alternativeText, children: alternativeText })) : null })) : null;
+};
+export const SimpleTitleCell = ({ isHighlighted = false, text, }) => (_jsx(View, { style: styles.cell, children: _jsx(LakeText, { numberOfLines: 1, color: colors.gray[900], variant: "medium", ...(isHighlighted && {
+            color: colors.current.primary,
+        }), children: text }) }));
+export const SimpleRegularTextCell = ({ variant = "regular", text, textAlign = "left", }) => {
+    return (_jsx(View, { style: styles.cell, children: _jsx(LakeText, { align: textAlign, color: colors.gray[900], style: styles.regularText, variant: variant, children: text }) }));
+};
+export const CopyableRegularTextCell = ({ variant = "regular", text, copyWording, copiedWording, }) => {
+    const [visibleState, setVisibleState] = useState("copy");
+    const onPress = useCallback((event) => {
+        event.preventDefault();
+        Clipboard.setString(text);
+        setVisibleState("copied");
+    }, [text]);
+    return (_jsxs(View, { style: styles.cell, children: [_jsx(LakeTooltip, { placement: "top", onHide: () => setVisibleState("copy"), togglableOnFocus: true, content: visibleState === "copy" ? copyWording : copiedWording, containerStyle: styles.iconContainer, children: _jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: copyWording, onPress: onPress, style: ({ hovered }) => [styles.icon, hovered && styles.underline], children: ({ hovered }) => (_jsx(Icon, { name: hovered ? "copy-filled" : "copy-regular", color: "currentColor", size: 14 })) }) }), _jsx(Space, { width: 4 }), _jsx(LakeText, { color: colors.gray[900], style: styles.regularText, variant: variant, children: text })] }));
+};
+// TODO: handle `+` sign properly
+export const BalanceCell = ({ value, currency, formatCurrency, textAlign = "right", }) => {
+    return (_jsx(View, { style: styles.cell, children: _jsxs(LakeText, { align: textAlign, color: colors.gray[900], variant: "medium", style: [
+                styles.mediumText,
+                {
+                    justifyContent: match(textAlign)
+                        .with("left", () => "flex-start")
+                        .with("center", () => "center")
+                        .with("right", () => "flex-end")
+                        .exhaustive(),
+                },
+                value > 0 && { color: colors.positive.primary },
+                value < 0 && { color: colors.negative.primary },
+            ], children: [value > 0 && "+", formatCurrency(value, currency)] }) }));
+};
+export const LinkCell = ({ children, external = false, onPress, }) => {
+    return (_jsxs(View, { style: styles.cell, children: [_jsx(Pressable, { style: ({ hovered }) => [styles.icon, hovered && styles.underline], onPress: event => {
+                    event.preventDefault();
+                    onPress();
+                }, children: _jsx(Icon, { size: 14, name: external ? "open-regular" : "arrow-right-filled" }) }), _jsx(Space, { width: 8 }), _jsx(LakeText, { color: colors.gray[900], variant: "medium", style: styles.mediumText, children: children })] }));
+};
+export const StartAlignedCell = ({ children }) => {
+    return _jsx(View, { style: styles.cell, children: children });
+};
+export const CenteredCell = ({ children }) => {
+    return _jsx(View, { style: [styles.cell, styles.centeredCell], children: children });
+};
+export const EndAlignedCell = ({ children }) => {
+    return _jsx(View, { style: [styles.cell, styles.endAlignedCell], children: children });
+};
+export const CellAction = ({ children }) => {
+    return _jsx(View, { style: styles.cellAction, children: children });
+};

package/src/components/Flag.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CountryCCA3 } from "@swan-io/shared-business/src/constants/countries";
+type Props = {
+    icon: CountryCCA3;
+    width: number;
+};
+export declare const Flag: ({ icon, width }: Props) => JSX.Element;
+export {};

package/src/components/Flag.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Lazy } from "@swan-io/boxed";
+import { countries } from "@swan-io/shared-business/src/constants/countries";
+import { useEffect, useMemo, useState } from "react";
+import { Svg, Use } from "./Svg";
+let loadedUrl;
+const importFlags = Lazy(async () => {
+    const { default: value } = await import("../assets/images/flags.svg");
+    loadedUrl = value;
+    return value;
+});
+const UNICODE_OFFSET = 127462 - 65;
+export const Flag = ({ icon, width }) => {
+    const [url, setUrl] = useState(loadedUrl);
+    useEffect(() => {
+        if (loadedUrl == undefined) {
+            void importFlags.get().then(setUrl);
+        }
+    }, []);
+    const flag = useMemo(() => {
+        const cca2 = countries.find(item => item.cca3 === icon)?.cca2;
+        if (cca2 == null) {
+            return null;
+        }
+        return ((UNICODE_OFFSET + cca2.charCodeAt(0)).toString(16) +
+            "-" +
+            (UNICODE_OFFSET + cca2.charCodeAt(1)).toString(16));
+    }, [icon]);
+    return (_jsx(Svg, { viewBox: "0 0 18 18", 
+        // eslint-disable-next-line react-native/no-inline-styles
+        style: {
+            borderRadius: 2,
+            width,
+            height: width,
+        }, children: url != null && flag != null ? _jsx(Use, { xlinkHref: `${url}#${flag}` }) : null }));
+};

package/src/components/FlowPresentation.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { IconName } from "./Icon";
+export type FlowStep = {
+    label: string;
+    icon: IconName;
+};
+type Props = {
+    steps: FlowStep[];
+    mode: "desktop" | "mobile";
+};
+export declare const FlowPresentation: ({ steps, mode }: Props) => JSX.Element;
+export {};

package/src/components/FlowPresentation.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { StyleSheet, View } from "react-native";
+import { match } from "ts-pattern";
+import { colors } from "../constants/design";
+import { BorderedIcon } from "./BorderedIcon";
+import { Box } from "./Box";
+import { LakeText } from "./LakeText";
+import { Space } from "./Space";
+const desktopIconSize = 100;
+const borderHeight = 2;
+const desktopPadding = 40;
+const mobileNumberSize = 24;
+const mobileBorderWidth = 4;
+const styles = StyleSheet.create({
+    container: {
+        width: "100%",
+    },
+    textContainer: {
+        width: desktopIconSize + desktopPadding,
+    },
+    lastTextContainer: {
+        width: desktopIconSize,
+    },
+    desktopBarContainer: {
+        flex: 1,
+        paddingRight: 40,
+        height: desktopIconSize,
+    },
+    desktopBar: {
+        width: "100%",
+        height: borderHeight,
+        borderRadius: borderHeight / 2,
+        backgroundColor: colors.gray[100],
+    },
+    mobileNumber: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        borderColor: colors.current[100],
+        borderWidth: 1,
+        backgroundColor: colors.current[50],
+    },
+    mobileNumberText: {
+        position: "relative",
+        top: 1,
+    },
+    mobileBarContainer: {
+        width: mobileNumberSize,
+        paddingVertical: 4,
+    },
+    mobileBar: {
+        width: mobileBorderWidth,
+        height: 12,
+        borderRadius: mobileBorderWidth / 2,
+        backgroundColor: colors.gray[100],
+    },
+});
+export const FlowPresentation = ({ steps, mode }) => {
+    return match(mode)
+        .with("desktop", () => (_jsx(Box, { direction: "row", style: styles.container, children: steps.map(({ label, icon }, index) => {
+            const isLast = index === steps.length - 1;
+            return (_jsxs(Fragment, { children: [_jsxs(Box, { children: [_jsx(BorderedIcon, { name: icon, size: 100, padding: 16 }), _jsx(Space, { height: 32 }), _jsx(View, { style: isLast ? styles.lastTextContainer : styles.textContainer, children: _jsxs(LakeText, { color: colors.gray[900], variant: "medium", children: [index + 1, ". ", label] }) })] }), !isLast && (_jsx(Box, { direction: "row", alignItems: "center", style: styles.desktopBarContainer, children: _jsx(View, { style: styles.desktopBar }) }))] }, index));
+        }) })))
+        .with("mobile", () => (_jsx(Box, { direction: "column", children: steps.map(({ label }, index) => {
+            const isLast = index === steps.length - 1;
+            return (_jsxs(Fragment, { children: [_jsxs(Box, { direction: "row", children: [_jsx(Box, { alignItems: "center", justifyContent: "center", style: styles.mobileNumber, children: _jsx(LakeText, { color: colors.current.primary, variant: "medium", style: styles.mobileNumberText, children: index + 1 }) }), _jsx(Space, { width: 12 }), _jsx(LakeText, { color: colors.gray[400], variant: "smallRegular", children: label })] }), !isLast && (_jsx(Box, { alignItems: "center", style: styles.mobileBarContainer, children: _jsx(View, { style: styles.mobileBar }) }))] }, index));
+        }) })))
+        .exhaustive();
+};

package/src/components/FocusTrap.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+type Props = {
+    autoFocus: boolean;
+    children: ReactNode;
+    focusLock: boolean;
+    onClickOutside?: (event: TouchEvent | MouseEvent) => void;
+    onEscapeKey?: () => void;
+    returnFocus: boolean;
+    style?: StyleProp<ViewStyle>;
+};
+export type FocusTrapRef = {
+    setInitiallyFocusedElement: (element: HTMLElement) => void;
+};
+export declare const FocusTrap: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<FocusTrapRef>>;
+export {};

package/src/components/FocusTrap.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState, } from "react";
+import { View } from "react-native";
+import { match } from "ts-pattern";
+import { useInterval } from "../hooks/useInterval";
+import { useOutsideClick } from "../hooks/useOutsideClick";
+import { getFocusableElements } from "../utils/a11y";
+import { first, last } from "../utils/array";
+import { isNotNullish } from "../utils/nullish";
+let escapeListenerCount = 0;
+export const FocusTrap = forwardRef(({ children, focusLock, onClickOutside, onEscapeKey, returnFocus, style, autoFocus }, ref) => {
+    const containerRef = useRef(null);
+    const previouslyFocusedRef = useRef(null);
+    const hasFocusedOutside = useRef(false);
+    useImperativeHandle(ref, () => ({
+        setInitiallyFocusedElement: element => (previouslyFocusedRef.current = element),
+    }));
+    const [initialEscapeListenerCount] = useState(escapeListenerCount);
+    useEffect(() => {
+        ++escapeListenerCount;
+        return () => {
+            --escapeListenerCount;
+        };
+    });
+    // The reason we're listening to the capturing phase instead of the bubbling one is that React Native Web
+    // uses a static preventDefault in its TextInput implementation, which we cannot control.
+    // Listening to the bubbling phase catches the event before RNW has the opportunity to block.
+    const onKeyDownCapture = useCallback(({ nativeEvent }) => {
+        match(nativeEvent.key)
+            .with("Escape", () => {
+            if (escapeListenerCount === initialEscapeListenerCount + 1) {
+                onEscapeKey?.();
+            }
+        })
+            .with("Tab", () => {
+            if (!focusLock) {
+                return;
+            }
+            const trapElement = containerRef.current;
+            if (isNotNullish(trapElement)) {
+                const target = nativeEvent.target;
+                const focusableElements = getFocusableElements(trapElement);
+                const firstFocusableElement = first(focusableElements);
+                const lastFocusableElement = last(focusableElements);
+                if (target === firstFocusableElement && nativeEvent.shiftKey) {
+                    nativeEvent.preventDefault();
+                    lastFocusableElement?.focus();
+                }
+                if (target === lastFocusableElement && !nativeEvent.shiftKey) {
+                    nativeEvent.preventDefault();
+                    firstFocusableElement?.focus();
+                }
+            }
+        })
+            .otherwise(() => { });
+    }, [focusLock, onEscapeKey, initialEscapeListenerCount]);
+    useEffect(() => {
+        if (returnFocus) {
+            previouslyFocusedRef.current = document.activeElement;
+            return () => {
+                if (!hasFocusedOutside.current) {
+                    previouslyFocusedRef.current?.focus();
+                }
+            };
+        }
+    }, [returnFocus]);
+    useInterval(id => {
+        if (autoFocus) {
+            const trapElement = containerRef.current;
+            if (isNotNullish(trapElement)) {
+                if (trapElement.offsetWidth === 0) {
+                    return;
+                }
+                const focusableElements = getFocusableElements(trapElement);
+                const firstFocusableElement = first(focusableElements);
+                firstFocusableElement?.focus();
+                window.clearInterval(id);
+            }
+        }
+    }, 16);
+    const onFocusOutside = useCallback(() => {
+        hasFocusedOutside.current = true;
+    }, []);
+    useOutsideClick({
+        containerRef,
+        onClickOutside,
+        onFocusOutside,
+    });
+    return (_jsx(View, { ref: containerRef, onKeyDownCapture: onKeyDownCapture, style: style, children: children }));
+});

package/src/components/Form.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+import { View, ViewProps } from "react-native";
+import { Except } from "type-fest";
+export declare const Form: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Except<ViewProps, "accessibilityRole"> & {
+    children?: ReactNode;
+    onReset?: ((event: React.FormEvent<HTMLElement>) => void) | undefined;
+    onSubmit?: ((event: React.FormEvent<HTMLElement>) => void) | undefined;
+} & import("react").RefAttributes<View>>>;

package/src/components/Form.js

@@ -0,0 +1,17 @@
+import { forwardRef, memo } from "react";
+import { unstable_createElement as createElement } from "react-native";
+import { commonStyles } from "../constants/commonStyles";
+export const Form = memo(forwardRef(({ style, onReset, onSubmit, ...props }, forwardedRef) => createElement("form", {
+    ...props,
+    ref: forwardedRef,
+    onReset: (event) => {
+        event.preventDefault();
+        onReset?.(event);
+    },
+    onSubmit: (event) => {
+        event.preventDefault();
+        onSubmit?.(event);
+    },
+    style: [commonStyles.view, style],
+})));
+Form.displayName = "Form";

package/src/components/FullViewportLayer.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+type Props = {
+    visible: boolean;
+    children: ReactNode;
+};
+export declare const FullViewportLayer: ({ visible, children }: Props) => JSX.Element;
+export {};

package/src/components/FullViewportLayer.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FocusTrap } from "@swan-io/lake/src/components/FocusTrap";
+import { TransitionView } from "@swan-io/lake/src/components/TransitionView";
+import { backgroundColor } from "@swan-io/lake/src/constants/design";
+import { Suspense, useEffect, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { LoadingView } from "./LoadingView";
+import { Portal } from "./Portal";
+const BACKGROUND_COLOR = "rgba(0, 0, 0, 0.6)";
+const styles = StyleSheet.create({
+    root: {
+        ...StyleSheet.absoluteFillObject,
+        overflow: "hidden",
+    },
+    fill: {
+        ...StyleSheet.absoluteFillObject,
+        animationFillMode: "forwards",
+        overflow: "hidden",
+    },
+    overlayEnter: {
+        animationKeyframes: {
+            "0%": { opacity: 0 },
+        },
+        animationDuration: "200ms",
+        animationTimingFunction: "ease-in-out",
+    },
+    overlayLeave: {
+        animationKeyframes: {
+            "100%": { opacity: 0 },
+        },
+        animationDuration: "200ms",
+        animationTimingFunction: "ease-in-out",
+    },
+    containerEnter: {
+        animationKeyframes: {
+            "0%": { opacity: 0, transform: [{ translateZ: 0 }, { translateX: 200 }] },
+        },
+        animationDuration: "500ms",
+        animationTimingFunction: "ease-in-out",
+    },
+    containerLeave: {
+        animationKeyframes: {
+            "100%": { opacity: 0, transform: [{ translateZ: 0 }, { translateX: 200 }] },
+        },
+        animationDuration: "500ms",
+        animationTimingFunction: "ease-in-out",
+    },
+    overlay: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: BACKGROUND_COLOR,
+    },
+    container: {
+        ...StyleSheet.absoluteFillObject,
+        transform: [{ translateZ: 0 }],
+        flexDirection: "row",
+        alignItems: "stretch",
+        backgroundColor: backgroundColor.default,
+    },
+    contentsEnter: {
+        animationKeyframes: {
+            "0%": { transform: [{ translateZ: 0 }, { translateX: 50 }] },
+        },
+        animationDuration: "500ms",
+        animationTimingFunction: "ease-in-out",
+    },
+    contentsLeave: {
+        animationKeyframes: {
+            "100%": { transform: [{ translateZ: 0 }, { translateX: 50 }] },
+        },
+        animationDuration: "500ms",
+        animationTimingFunction: "ease-in-out",
+    },
+    contentsContainer: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: 2,
+        transform: [{ translateZ: 0 }],
+        maxWidth: "100%",
+    },
+    contents: {
+        ...StyleSheet.absoluteFillObject,
+        maxWidth: "100%",
+    },
+});
+const rootNode = document.querySelector("#full-page-layer-root");
+export const FullViewportLayer = ({ visible, children }) => {
+    const [delayedVisible, setDelayedVisible] = useState(visible);
+    useEffect(() => {
+        setDelayedVisible(visible);
+    }, [visible]);
+    return (_jsx(Portal, { container: rootNode, children: _jsxs(View, { style: styles.root, pointerEvents: visible ? "auto" : "none", children: [_jsx(TransitionView, { style: styles.fill, enter: styles.overlayEnter, leave: styles.overlayLeave, children: visible ? _jsx(View, { style: styles.overlay }) : null }), _jsx(Suspense, { fallback: _jsx(LoadingView, { color: backgroundColor.accented, delay: 0 }), children: _jsx(TransitionView, { style: styles.fill, enter: styles.containerEnter, leave: styles.containerLeave, children: delayedVisible ? (_jsx(FocusTrap, { focusLock: true, autoFocus: true, returnFocus: true, style: styles.container, children: _jsx(TransitionView, { style: styles.contentsContainer, enter: styles.contentsEnter, leave: styles.contentsLeave, children: _jsx(View, { style: styles.contents, children: _jsx(View, { style: styles.contentsContainer, children: children }) }) }) })) : null }) })] }) }));
+};

package/src/components/Grid.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { SpacingValue } from "./Space";
+type Props = {
+    children: ReactNode;
+    horizontalSpace?: SpacingValue;
+    itemWrapperStyle?: StyleProp<ViewStyle>;
+    numColumns?: number;
+    style?: StyleProp<ViewStyle>;
+    verticalSpace?: SpacingValue;
+};
+export declare const Grid: ({ children, horizontalSpace, itemWrapperStyle, numColumns, style, verticalSpace, }: Props) => JSX.Element;
+export {};

package/src/components/Grid.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children } from "react";
+import { StyleSheet, View } from "react-native";
+import { isNullish } from "../utils/nullish";
+const styles = StyleSheet.create({
+    base: {
+        flexDirection: "row",
+        flexWrap: "wrap",
+    },
+    item: {
+        flexShrink: 1,
+        width: "100%",
+    },
+});
+export const Grid = ({ children, horizontalSpace, itemWrapperStyle, numColumns = 1, style, verticalSpace, }) => (_jsx(View, { style: [
+        styles.base,
+        style,
+        numColumns > 1 && horizontalSpace && { marginHorizontal: -(horizontalSpace / 2) },
+        verticalSpace && { marginVertical: -(verticalSpace / 2) },
+    ], children: Children.map(children, child => {
+        if (isNullish(child)) {
+            return child;
+        }
+        return (_jsx(View, { style: [
+                styles.item,
+                itemWrapperStyle,
+                verticalSpace && { paddingVertical: verticalSpace / 2 },
+                numColumns > 1 && [
+                    { width: `${100 / numColumns}%` },
+                    horizontalSpace && { paddingHorizontal: horizontalSpace / 2 },
+                ],
+            ], children: child }));
+    }) }));