@swan-io/lake 1.0.0

package/src/components/ResponsiveContainer.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import { ViewProps } from "react-native";
+export type Context = {
+    small: boolean;
+    large: boolean;
+};
+type Props = {
+    children: (context: Context) => ReactNode;
+    style?: ViewProps["style"];
+    breakpoint?: number;
+};
+export declare const ResponsiveContainer: ({ children, style, breakpoint }: Props) => JSX.Element;
+export {};

package/src/components/ResponsiveContainer.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
+import { StyleSheet, View } from "react-native";
+const styles = StyleSheet.create({
+    hidden: {
+        opacity: 0,
+    },
+});
+export const ResponsiveContainer = ({ children, style, breakpoint = 1000 }) => {
+    const [isSmall, setIsSmall] = useState(null);
+    const containerRef = useRef(null);
+    const onLayout = useCallback(({ nativeEvent: { layout: { width }, }, }) => {
+        setIsSmall(() => width < breakpoint);
+    }, [breakpoint]);
+    useLayoutEffect(() => {
+        if (containerRef.current != null) {
+            const element = containerRef.current;
+            setIsSmall(() => element.offsetWidth < breakpoint);
+        }
+    }, [breakpoint]);
+    const isSmallWithDefault = isSmall ?? false;
+    return (_jsx(View, { ref: containerRef, onLayout: onLayout, style: [style, isSmall == null ? styles.hidden : null], children: children({ small: isSmallWithDefault, large: !isSmallWithDefault }) }));
+};

package/src/components/RightPanel.d.ts

@@ -0,0 +1,10 @@
+import { FocusTrapRef } from "@swan-io/lake/src/components/FocusTrap";
+import { ReactNode } from "react";
+import { Context } from "./ResponsiveContainer";
+type Props = {
+    visible: boolean;
+    children: ReactNode | ((context: Context) => ReactNode);
+    onPressClose?: () => void;
+};
+export declare const RightPanel: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<FocusTrapRef>>;
+export {};

package/src/components/RightPanel.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, Fragment as _Fragment, 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, breakpoints } from "@swan-io/lake/src/constants/design";
+import { forwardRef, Suspense, useEffect, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { useBodyClassName } from "../hooks/useBodyClassName";
+import { LoadingView } from "./LoadingView";
+import { Portal } from "./Portal";
+import { Pressable } from "./Pressable";
+import { ResponsiveContainer } from "./ResponsiveContainer";
+const BACKGROUND_COLOR = "rgba(0, 0, 0, 0.6)";
+const styles = StyleSheet.create({
+    root: {
+        ...StyleSheet.absoluteFillObject,
+    },
+    fill: {
+        ...StyleSheet.absoluteFillObject,
+    },
+    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: 100 }] },
+        },
+        animationDuration: "500ms",
+        animationTimingFunction: "ease-in-out",
+    },
+    containerLeave: {
+        animationKeyframes: {
+            "100%": { opacity: 0, transform: [{ translateZ: 0 }, { translateX: 100 }] },
+        },
+        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,
+    },
+    fillMax: {
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        right: 0,
+        width: "100%",
+    },
+    fillMaxLarge: { maxWidth: 700 },
+    contentsEnter: {
+        animationKeyframes: {
+            "0%": { transform: [{ translateZ: 0 }, { translateX: 25 }] },
+        },
+        animationDuration: "500ms",
+        animationTimingFunction: "ease-in-out",
+    },
+    contentsLeave: {
+        animationKeyframes: {
+            "100%": { transform: [{ translateZ: 0 }, { translateX: 25 }] },
+        },
+        animationDuration: "500ms",
+        animationTimingFunction: "ease-in-out",
+    },
+    contentsContainer: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: 2,
+        transform: [{ translateZ: 0 }],
+        maxWidth: "100%",
+        flexGrow: 1,
+    },
+    contents: {
+        ...StyleSheet.absoluteFillObject,
+        maxWidth: "100%",
+        flexGrow: 1,
+    },
+});
+const rootNode = document.querySelector("#full-page-layer-root");
+export const RightPanel = forwardRef(({ visible, children, onPressClose }, ref) => {
+    const [delayedVisible, setDelayedVisible] = useState(visible);
+    useEffect(() => {
+        setDelayedVisible(visible);
+    }, [visible]);
+    useBodyClassName("RightPanelOpen", { enabled: visible });
+    return (_jsx(Portal, { container: rootNode, children: _jsx(View, { style: styles.root, pointerEvents: visible ? "auto" : "none", children: _jsx(ResponsiveContainer, { style: styles.root, breakpoint: breakpoints.small, children: ({ large }) => (_jsxs(_Fragment, { children: [_jsx(TransitionView, { style: styles.fill, enter: styles.overlayEnter, leave: styles.overlayLeave, children: visible ? (onPressClose != null ? (_jsx(Pressable, { style: styles.overlay, onPress: onPressClose })) : (_jsx(View, { style: styles.overlay }))) : null }), _jsx(Suspense, { fallback: _jsx(LoadingView, { color: backgroundColor.accented, delay: 0 }), children: _jsx(TransitionView, { style: [styles.fillMax, large && styles.fillMaxLarge], enter: styles.containerEnter, leave: styles.containerLeave, children: delayedVisible ? (_jsx(FocusTrap, { onEscapeKey: onPressClose, focusLock: true, autoFocus: true, returnFocus: true, ref: ref, 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: typeof children == "function" ? (_jsx(ResponsiveContainer, { style: styles.root, breakpoint: breakpoints.small, children: children })) : (children) }) }) }) })) : null }) })] })) }) }) }));
+});

package/src/components/SegmentedControl.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+type Props<V, I extends {
+    value: V;
+}> = {
+    value: V;
+    items: I[];
+    onValueChange: (value: V) => void;
+    renderItem: (item: I) => ReactNode | null;
+    horizontal?: boolean;
+    label: string;
+    style?: StyleProp<ViewStyle>;
+};
+export declare const SegmentedControl: (<V, I extends {
+    value: V;
+}>(props: Props<V, I>) => JSX.Element | null) & {
+    displayName?: string | undefined;
+};
+export {};

package/src/components/SegmentedControl.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo as reactMemo } from "react";
+import isEqual from "react-fast-compare";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { colors } from "../constants/colors";
+import { typography } from "../constants/typography";
+import { Fill } from "./Fill";
+import { Icon } from "./Icon";
+import { Label } from "./Label";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    base: {
+        backgroundColor: colors.white,
+        borderWidth: 1,
+        borderColor: colors.gray[10],
+        borderRadius: 4,
+        overflow: "hidden",
+    },
+    horizontalBase: {
+        flexDirection: "row",
+    },
+    item: {
+        alignItems: "center",
+        flexDirection: "row",
+        flexGrow: 1,
+        flexShrink: 1,
+        minHeight: 48,
+        overflow: "hidden",
+        paddingHorizontal: 16,
+        transitionProperty: "background-color",
+        transitionDuration: "200ms",
+    },
+    horizontalItem: {
+        flexBasis: "0%",
+        flexDirection: "column",
+        flexGrow: 1,
+        flexShrink: 1,
+        justifyContent: "center",
+    },
+    hoveredItem: {
+        backgroundColor: colors.gray[3],
+    },
+    pressedItem: {
+        backgroundColor: colors.gray[10],
+    },
+    rightBorder: {
+        borderRightColor: colors.gray[10],
+        borderRightWidth: 1,
+    },
+    bottomBorder: {
+        borderBottomColor: colors.gray[10],
+        borderBottomWidth: 1,
+    },
+    itemText: {
+        ...typography.bodyLarge,
+    },
+});
+const isReactText = (node) => ["string", "number"].includes(typeof node);
+const memo = reactMemo;
+export const SegmentedControl = memo(({ items, horizontal = false, label, onValueChange, renderItem, style, value }) => {
+    const lastIndex = items.length - 1;
+    return (_jsxs(View, { children: [_jsx(Label, { children: label }), _jsx(Space, { height: 8 }), _jsx(View, { accessibilityRole: "radiogroup", style: [styles.base, horizontal && styles.horizontalBase, style], children: items.map((item, index) => {
+                    const selected = item.value === value;
+                    const rendered = renderItem(item);
+                    return (_jsx(Pressable, { accessibilitySelected: selected, accessibilityRole: "radio", onPress: () => onValueChange(item.value), style: ({ hovered, pressed }) => [
+                            styles.item,
+                            horizontal && styles.horizontalItem,
+                            (hovered || selected) && styles.hoveredItem,
+                            pressed && styles.pressedItem,
+                            index !== lastIndex && (horizontal ? styles.rightBorder : styles.bottomBorder),
+                        ], children: _jsxs(_Fragment, { children: [isReactText(rendered) ? (_jsx(Text, { style: styles.itemText, children: rendered })) : (rendered), !horizontal && selected ? (_jsxs(_Fragment, { children: [_jsx(Fill, { minWidth: 16 }), _jsx(Icon, { name: "checkmark-filled", color: colors.green[100], size: 20 })] })) : null] }) }, `option-${item.value}`));
+                }) })] }));
+}, isEqual);
+SegmentedControl.displayName = "SegmentedControl";

package/src/components/Separator.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { StyleProp, ViewStyle } from "react-native";
+import { SpacingValue } from "./Space";
+type Props = {
+    horizontal?: boolean;
+    space?: SpacingValue;
+    style?: StyleProp<ViewStyle>;
+};
+export declare const Separator: ({ horizontal, space, style }: Props) => JSX.Element;
+export {};

package/src/components/Separator.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet, View } from "react-native";
+import { colors } from "../constants/design";
+import { isNotNullish } from "../utils/nullish";
+const styles = StyleSheet.create({
+    horizontal: {
+        backgroundColor: colors.gray[100],
+        width: 1,
+        alignSelf: "stretch",
+    },
+    vertical: {
+        backgroundColor: colors.gray[100],
+        height: 1,
+        alignSelf: "stretch",
+    },
+});
+export const Separator = ({ horizontal = false, space, style }) => (_jsx(View, { accessibilityRole: "none", style: horizontal
+        ? [styles.horizontal, isNotNullish(space) && { marginHorizontal: space }, style]
+        : [styles.vertical, isNotNullish(space) && { marginVertical: space }, style] }));

package/src/components/SidebarNavigationTracker.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ScrollViewProps } from "react-native";
+type Props = {
+    style?: ScrollViewProps["style"];
+    contentContainerStyle?: ScrollViewProps["style"];
+    children: ScrollViewProps["children"];
+};
+export declare const SidebarNavigationTracker: ({ style, contentContainerStyle, children }: Props) => JSX.Element;
+type MarkerProps = {
+    color: string;
+};
+export declare const SidebarNavigationTrackerActiveMarker: ({ color }: MarkerProps) => JSX.Element;
+export {};

package/src/components/SidebarNavigationTracker.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { ScrollView, StyleSheet, View } from "react-native";
+const styles = StyleSheet.create({
+    track: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        width: 3,
+    },
+    marker: {
+        position: "absolute",
+        top: 0,
+        right: 0,
+        bottom: 0,
+        width: 3,
+    },
+    trackIndicator: {
+        width: 3,
+        height: 1,
+        position: "absolute",
+        right: 0,
+        transformOrigin: "right top",
+        transition: "150ms ease-in-out",
+        transitionProperty: ["transform", "background-color"],
+    },
+});
+const Context = createContext((_) => { });
+// using `offsetTop` and `offsetHeight` here to avoid calculations
+// being wrong when ancestor has as CSS transform applied
+const getCoordinates = (element, guide) => {
+    const offsetHeight = element.offsetHeight;
+    const guideParent = guide.parentElement;
+    if (guideParent == null || !guideParent.contains(element)) {
+        return { top: 0, height: offsetHeight };
+    }
+    let offsetTop = 0;
+    let currentElement = element;
+    while (currentElement != null && currentElement != guideParent) {
+        offsetTop += currentElement.offsetTop;
+        currentElement = currentElement.offsetParent;
+    }
+    return { top: offsetTop, height: offsetHeight };
+};
+export const SidebarNavigationTracker = ({ style, contentContainerStyle, children }) => {
+    const [track, setTrackRaw] = useState(null);
+    const trackRef = useRef(null);
+    const lastElementRef = useRef(null);
+    const setTrack = useCallback(({ color, element }) => {
+        if (trackRef.current != null) {
+            lastElementRef.current = element;
+            const { top, height } = getCoordinates(element, trackRef.current);
+            setTrackRaw({
+                color,
+                top,
+                height,
+            });
+        }
+    }, []);
+    const onLayout = useCallback(() => {
+        if (lastElementRef.current != null && track?.color != null) {
+            const { top, height } = getCoordinates(lastElementRef.current, trackRef.current);
+            setTrackRaw({
+                color: track?.color,
+                top,
+                height,
+            });
+        }
+    }, [track]);
+    return (_jsx(Context.Provider, { value: setTrack, children: _jsxs(ScrollView, { scrollEventThrottle: 30, onLayout: onLayout, style: style, contentContainerStyle: contentContainerStyle, accessibilityRole: "banner", children: [children, _jsx(View, { style: styles.track, ref: trackRef, children: track != null ? (_jsx(View, { style: [
+                            styles.trackIndicator,
+                            {
+                                transform: [{ translateY: track.top }, { scaleY: track.height }],
+                                backgroundColor: track.color,
+                            },
+                        ] })) : null })] }) }));
+};
+export const SidebarNavigationTrackerActiveMarker = ({ color }) => {
+    const setLayoutReference = useContext(Context);
+    const elementRef = useRef(null);
+    const onLayout = useCallback(() => {
+        if (elementRef.current != null) {
+            setLayoutReference({ color, element: elementRef.current });
+        }
+    }, [setLayoutReference, color]);
+    useEffect(() => {
+        if (elementRef.current != null) {
+            setLayoutReference({ color, element: elementRef.current });
+        }
+    }, [setLayoutReference, color]);
+    return _jsx(View, { ref: elementRef, onLayout: onLayout, style: styles.marker, pointerEvents: "none" });
+};

package/src/components/Slider.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+type Props = {
+    value: number;
+    step: number;
+    minimum: number;
+    maximum: number;
+    disabled?: boolean;
+    onValueChange?: (value: number) => void;
+};
+export declare const Slider: import("react").MemoExoticComponent<({ value, step, minimum, maximum, disabled, onValueChange }: Props) => JSX.Element>;
+export {};

package/src/components/Slider.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useRef } from "react";
+import { Animated, PanResponder, StyleSheet, View } from "react-native";
+import { match } from "ts-pattern";
+import { colors } from "../constants/colors";
+import { useAnimatedValue } from "../hooks/useAnimatedValue";
+import { interpolate } from "../utils/math";
+const BUTTON_SIZE = 20;
+const styles = StyleSheet.create({
+    container: {
+        height: BUTTON_SIZE,
+    },
+    disabled: {
+        cursor: "not-allowed",
+        opacity: 0.5,
+    },
+    bar: {
+        ...StyleSheet.absoluteFillObject,
+        height: 4,
+        marginVertical: "auto",
+        borderRadius: 2,
+        backgroundColor: colors.gray[10],
+        overflow: "hidden",
+    },
+    barFill: {
+        ...StyleSheet.absoluteFillObject,
+        transformOrigin: "0 0",
+        backgroundColor: colors.gray[100],
+    },
+    button: {
+        position: "absolute",
+        height: BUTTON_SIZE,
+        width: BUTTON_SIZE,
+        backgroundColor: colors.gray[100],
+        borderRadius: BUTTON_SIZE / 2,
+        marginLeft: -(BUTTON_SIZE / 2),
+        willChange: "left", // because we animate left directly
+    },
+});
+const computeValue = ({ minimum, maximum, step, origin, position, width, }) => {
+    const value = interpolate({
+        inputRange: [0, width],
+        outputRange: [minimum, maximum],
+        clamp: true,
+    })(position - origin);
+    // round value based on step size
+    return Math.round(value / step) * step;
+};
+export const Slider = memo(({ value, step, minimum, maximum, disabled = false, onValueChange }) => {
+    const disabledRef = useRef(disabled);
+    const interacting = useRef(false);
+    const left = useRef(0);
+    const width = useRef(0);
+    const valueAnim = useAnimatedValue(value);
+    const barAnim = valueAnim.interpolate({
+        inputRange: [minimum, maximum],
+        outputRange: ["0%", "100%"],
+        extrapolate: "clamp",
+    });
+    // Update position on value change
+    useEffect(() => {
+        !interacting.current && valueAnim.setValue(value);
+    }, [valueAnim, value]);
+    // Update disabled ref for pan responder
+    useEffect(() => {
+        disabledRef.current = disabled;
+    }, [disabled]);
+    const handleLayout = ({ nativeEvent: { layout } }) => {
+        left.current = layout.left ?? 0;
+        width.current = layout.width;
+    };
+    const handleKeyDown = ({ nativeEvent }) => {
+        if (!onValueChange || disabled) {
+            return;
+        }
+        match(nativeEvent.key)
+            .with("ArrowUp", "ArrowRight", () => onValueChange(Math.min(value + step, maximum)))
+            .with("ArrowDown", "ArrowLeft", () => onValueChange(Math.max(value - step, minimum)))
+            .otherwise(() => { });
+    };
+    const panResponder = useRef(PanResponder.create({
+        onMoveShouldSetPanResponder: () => true,
+        onPanResponderGrant: () => {
+            interacting.current = true;
+            document.body.style.userSelect = "none";
+        },
+        onPanResponderMove: event => {
+            if (onValueChange && !disabledRef.current) {
+                const nextValue = computeValue({
+                    minimum,
+                    maximum,
+                    step,
+                    position: event.nativeEvent.pageX,
+                    origin: left.current,
+                    width: width.current,
+                });
+                onValueChange(nextValue);
+                valueAnim.setValue(nextValue);
+            }
+        },
+        onPanResponderRelease: event => {
+            interacting.current = false;
+            document.body.style.userSelect = "";
+            if (onValueChange && !disabledRef.current) {
+                const nextValue = computeValue({
+                    minimum,
+                    maximum,
+                    step,
+                    position: event.nativeEvent.pageX,
+                    origin: left.current,
+                    width: width.current,
+                });
+                onValueChange(nextValue);
+                valueAnim.setValue(nextValue);
+            }
+        },
+    })).current;
+    return (_jsxs(View, { focusable: !disabled, style: [styles.container, disabled && styles.disabled], onLayout: handleLayout, onKeyDown: handleKeyDown, ...panResponder.panHandlers, children: [_jsx(View, { style: styles.bar, children: _jsx(Animated.View, { style: [styles.barFill, { transform: [{ scaleX: barAnim }] }] }) }), _jsx(Animated.View, { style: [styles.button, { left: barAnim }] })] }));
+});

package/src/components/SmsOpeningAnimation.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { StyleProp, ViewStyle } from "react-native";
+type Props = {
+    playing?: boolean;
+    style?: StyleProp<ViewStyle>;
+};
+export declare const SmsOpeningAnimation: ({ playing, style }: Props) => JSX.Element;
+export {};

package/src/components/SmsOpeningAnimation.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { backgroundColor, colors } from "../constants/design";
+import { Circle, G, Mask, Path, Rect, Svg } from "./Svg";
+const styles = StyleSheet.create({
+    circle: {
+        opacity: 0,
+        animationKeyframes: {
+            "0%": { opacity: 0, transform: [{ scale: 0.4 }] },
+            "30%": { opacity: 0, transform: [{ scale: 0.4 }] },
+            "40%": { opacity: 1 },
+            "75%": { opacity: 0, transform: [{ scale: 1.5 }] },
+            "100%": { opacity: 0, transform: [{ scale: 1.5 }] },
+        },
+        animationDuration: "5000ms",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
+    },
+    icon: {
+        animationKeyframes: {
+            "0%": { opacity: 0, transform: [{ translateY: -20 }, { scale: 1 }] },
+            "10%": { opacity: 1, transform: [{ scale: 1 }] },
+            "25%": { transform: [{ scale: 1 }] },
+            "35%": { transform: [{ translateY: 60 }, { scale: 10 }] },
+            "100%": { opacity: 1, transform: [{ translateY: 60 }, { scale: 10 }] },
+        },
+        animationDuration: "5000ms",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
+    },
+    logo: {
+        animationKeyframes: {
+            "0%": { opacity: 0, transform: [{ translateY: -20 }, { scale: 1 }] },
+            "10%": { opacity: 1, transform: [{ translateY: 0 }, { scale: 1 }] },
+            "25%": { transform: [{ translateY: 0 }, { scale: 1 }] },
+            "35%": { transform: [{ translateY: 270 }, { scale: 2 }] },
+            "100%": { opacity: 1, transform: [{ translateY: 270 }, { scale: 2 }] },
+        },
+        animationDuration: "5000ms",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
+    },
+});
+export const SmsOpeningAnimation = ({ playing = true, style }) => {
+    const animationStyle = useMemo(() => {
+        return {
+            animationPlayState: playing ? "running" : "paused",
+        };
+    }, [playing]);
+    return (_jsxs(Svg, { viewBox: "0 0 442 860", style: style, children: [_jsxs(Mask, { nativeID: "phoneScreen", children: [_jsx(Rect, { x: 0, y: 0, width: 442, height: 860, fill: "#000" }), _jsx(Rect, { fill: "#fff", x: 25, y: 21, width: 392, height: 817, rx: 45 })] }), _jsxs(G, { children: [_jsx(Rect, { fill: colors.swan[400], x: 25, y: 21, width: 392, height: 817, rx: 45 }), _jsx(G, { mask: "url(#phoneScreen)", children: _jsx(Rect, { fill: backgroundColor.default, fillRule: "nonzero", x: 43, y: 80, width: 355, height: 149, rx: 32, style: [styles.icon, animationStyle], "transform-origin": "221.2 150" }) }), _jsx(Path, { d: "M221.000028,125 C237.569013,125 251,138.429348 251,154.996311 C251,171.563274 237.569013,184.992622 221.000028,184.992622 C216.146713,184.999037 211.364882,183.823286 207.068041,181.567043 L194.198053,184.917631 C193.323041,185.145499 192.392776,184.893009 191.7531,184.254027 C191.113423,183.615046 190.860005,182.685139 191.087056,181.810013 L194.435053,168.944596 C192.172455,164.643731 190.993369,159.855888 191.000028,154.996311 C191.000028,138.429348 204.431044,125 221.000028,125 Z M224.756025,157.995942 L211.250037,157.995942 L210.944038,158.01694 C209.830402,158.170147 209.00073,159.121675 209.00073,160.245665 C209.00073,161.369656 209.830402,162.321184 210.944038,162.474391 L211.250037,162.495389 L224.756025,162.495389 L225.059024,162.474391 C226.17266,162.321184 227.002332,161.369656 227.002332,160.245665 C227.002332,159.121675 226.17266,158.170147 225.059024,158.01694 L224.756025,157.995942 Z M230.750019,147.497233 L211.250037,147.497233 L210.944038,147.518231 C209.830402,147.671438 209.00073,148.622966 209.00073,149.746957 C209.00073,150.870947 209.830402,151.822475 210.944038,151.975683 L211.250037,151.99668 L230.750019,151.99668 L231.056019,151.975683 C232.169654,151.822475 232.999327,150.870947 232.999327,149.746957 C232.999327,148.622966 232.169654,147.671438 231.056019,147.518231 L230.750019,147.497233 Z", fill: colors.swan[400], fillRule: "nonzero", style: [styles.logo, animationStyle], "transform-origin": "221.2 150" }), _jsx(Circle, { stroke: colors.swan[100], strokeWidth: 2, cx: 219.5, cy: 439.5, r: 157.5, fill: "none", style: [styles.circle, animationStyle], "transform-origin": "219.5 439.5" }), _jsx(Path, { d: "M369 0a67.998 67.998 0 0168 68v177c1.326 0 2.598.527 3.536 1.464A5.004 5.004 0 01442 250v96a5.004 5.004 0 01-1.464 3.536A5.004 5.004 0 01437 351v441a67.996 67.996 0 01-19.917 48.083A67.996 67.996 0 01369 860H71a67.998 67.998 0 01-68-68V365.6a5 5 0 01-3-4.6v-58a5.002 5.002 0 013-4.6v-16.8a5 5 0 01-3-4.6v-58a5.002 5.002 0 013-4.6v-30.8a5 5 0 01-3-4.6v-24a5.002 5.002 0 013-4.6V68A68 68 0 0171 0h298zm0 21H71a46 46 0 00-46 45.2V792a45.999 45.999 0 0045.2 46H369a46 46 0 0046-45.2V67a45.998 45.998 0 00-46-46z", fill: "#000" })] })] }));
+};

package/src/components/Space.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const spacingValues: readonly [4, 8, 12, 16, 20, 24, 32, 40, 48, 72, 96];
+export type SpacingValue = (typeof spacingValues)[number];
+type Props = {
+    height?: SpacingValue;
+    width?: SpacingValue;
+    flexGrow?: number;
+};
+export declare const Space: ({ height, width, flexGrow }: Props) => JSX.Element;
+export {};

package/src/components/Space.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet, View } from "react-native";
+import { isNotNullish } from "../utils/nullish";
+export const spacingValues = [4, 8, 12, 16, 20, 24, 32, 40, 48, 72, 96];
+const rawHeightStyles = {};
+const rawWidthStyles = {};
+spacingValues.forEach(value => {
+    rawHeightStyles[value] = { height: value };
+    rawWidthStyles[value] = { width: value };
+});
+const heightStyles = StyleSheet.create(rawHeightStyles);
+const widthStyles = StyleSheet.create(rawWidthStyles);
+const styles = StyleSheet.create({
+    noShrink: {
+        flexShrink: 0,
+    },
+});
+export const Space = ({ height, width, flexGrow }) => (_jsx(View, { style: [
+        styles.noShrink,
+        isNotNullish(height) && heightStyles[height],
+        isNotNullish(width) && widthStyles[width],
+        { flexGrow },
+    ] }));

package/src/components/Stack.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { View } from "react-native";
+export declare const Stack: import("react").ForwardRefExoticComponent<import("react-native").ViewProps & {
+    alignItems?: ("stretch" | "center" | "end" | "start" | "baseline") | undefined;
+    children?: import("react").ReactNode;
+    direction?: ("column" | "row" | "columnReverse" | "rowReverse") | undefined;
+    justifyContent?: ("center" | "end" | "start" | "normal" | "spaceBetween" | "spaceAround" | "spaceEvenly") | undefined;
+    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
+} & {
+    space?: 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 96 | undefined;
+    wrap?: boolean | undefined;
+} & import("react").RefAttributes<View>>;

package/src/components/Stack.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, forwardRef, Fragment } from "react";
+import { StyleSheet } from "react-native";
+import { isNullish } from "../utils/nullish";
+import { Box } from "./Box";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    wrap: {
+        flexWrap: "wrap",
+    },
+});
+export const Stack = forwardRef(
+// Default <View /> styles https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/exports/View/index.js#L133
+({ children, space, wrap = false, ...props }, forwardedRef) => {
+    const { direction = "column" } = props;
+    const horizontal = direction === "row" || direction === "rowReverse";
+    return (_jsx(Box, { style: wrap && styles.wrap, ref: forwardedRef, ...props, children: Children.map(children, (child, index) => {
+            if (isNullish(child)) {
+                return child;
+            }
+            return (_jsxs(Fragment, { children: [index !== 0 && (horizontal ? _jsx(Space, { width: space }) : _jsx(Space, { height: space })), child] }));
+        }) }));
+});