@swan-io/lake 1.0.0

package/HISTORY.md

@@ -0,0 +1,3 @@
+# 1.0.0
+
+Initial release!

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Swan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,49 @@
+# @swan-io/lake
+
+> Swan's design system
+
+## Getting started
+
+You can start the [Storybook](https://storybook.js.org), a small application that allows you to list and play with the various components.
+
+```console
+$ yarn start
+```
+
+## Consume the design system from apps
+
+### Scaffolding
+
+Our design system assumes that some basic CSS is injected (for fonts, variables and reset). In order to do so:
+
+```typescript
+import "@swan-io/lake/src/assets/fonts/Inter.css";
+import "@swan-io/lake/src/assets/main.css";
+```
+
+### Tokens
+
+To use the design tokens (e.g. colors, spacings…), you can import the `design` file:
+
+```typescript
+import {
+  colors,
+  backgroundColor,
+  texts,
+  gradients,
+  shadows,
+  spacings,
+  negativeSpacings,
+  radii,
+  fonts,
+  animations,
+} from "@swan-io/lake/src/constants/design";
+```
+
+## Build
+
+You can build a static version of the Storybook (e.g. to host a demo space):
+
+```console
+$ yarn build
+```

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@swan-io/lake",
+  "version": "1.0.0",
+  "engines": {
+    "node": ">=14.0.0",
+    "yarn": "^1.20.0"
+  },
+  "files": [
+    "LICENSE",
+    "src/**/*.js",
+    "src/**/*.d.ts",
+    "README.md",
+    "HISTORY.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not op_mini all",
+    "not dead",
+    "not ie <= 11",
+    "safari >= 12"
+  ],
+  "dependencies": {
+    "@popperjs/core": "2.11.6",
+    "@swan-io/boxed": "0.12.1",
+    "@swan-io/chicane": "1.3.4",
+    "dayjs": "1.11.7",
+    "graphql": "15.8.0",
+    "polished": "4.2.2",
+    "prism-react-renderer": "1.3.5",
+    "react": "18.2.0",
+    "react-atomic-state": "1.2.7",
+    "react-dom": "18.2.0",
+    "react-dropzone": "14.2.3",
+    "react-fast-compare": "3.2.0",
+    "react-native-web": "0.18.12",
+    "react-popper": "2.3.0",
+    "react-ux-form": "1.3.0",
+    "rifm": "0.12.1",
+    "ts-pattern": "4.2.1",
+    "urql": "3.0.3",
+    "uuid": "9.0.0"
+  },
+  "devDependencies": {
+    "@storybook/react": "6.5.16",
+    "@testing-library/react": "13.4.0",
+    "@testing-library/user-event": "14.4.3",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
+    "@types/react-native": "0.70.11",
+    "@types/uuid": "9.0.1",
+    "jsdom": "21.1.0",
+    "ts-dedent": "2.2.0",
+    "type-fest": "3.6.1",
+    "vitest": "0.29.2"
+  }
+}

package/src/components/Alert.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { StyleProp, ViewStyle } from "react-native";
+type AlertVariant = "info" | "warning" | "error";
+type Props = {
+    variant: AlertVariant;
+    children: string;
+    style?: StyleProp<ViewStyle>;
+};
+export declare const Alert: ({ variant, children, style }: Props) => JSX.Element;
+export {};

package/src/components/Alert.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet, Text } from "react-native";
+import { colors } from "../constants/colors";
+import { typography } from "../constants/typography";
+import { Box } from "./Box";
+import { Icon } from "./Icon";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    base: {
+        paddingVertical: 12,
+        paddingHorizontal: 12,
+        borderRadius: 4,
+    },
+    text: {
+        ...typography.bodySmall,
+    },
+});
+const alertIcon = {
+    info: "info-filled",
+    warning: "warning-filled",
+    error: "error-circle-filled",
+};
+const alertColor = {
+    info: colors.gray[80],
+    warning: colors.orange[100],
+    error: colors.red[100],
+};
+const alertBackground = {
+    info: colors.gray[3],
+    warning: colors.orange[10],
+    error: colors.red[10],
+};
+export const Alert = ({ variant, children, style }) => {
+    const color = alertColor[variant];
+    return (_jsxs(Box, { direction: "row", alignItems: "center", style: [styles.base, { backgroundColor: alertBackground[variant] }, style], children: [_jsx(Icon, { name: alertIcon[variant], color: color, size: 20 }), _jsx(Space, { width: 12 }), _jsx(Text, { style: [styles.text, { color }], children: children })] }));
+};

package/src/components/AppOpeningAnimation.d.ts

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

package/src/components/AppOpeningAnimation.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { backgroundColor } from "../constants/design";
+import { Circle, G, Image, 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%": { transform: [{ scale: 1 }] },
+            "25%": { transform: [{ scale: 1 }] },
+            "35%": { transform: [{ translateY: 60 }, { scale: 10 }] },
+            "100%": { transform: [{ translateY: 60 }, { scale: 10 }] },
+        },
+        animationDuration: "5000ms",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
+    },
+    logo: {
+        animationKeyframes: {
+            "0%": { transform: [{ translateY: 0 }, { scale: 1 }] },
+            "25%": { transform: [{ translateY: 0 }, { scale: 1 }] },
+            "35%": { transform: [{ translateY: 72 }, { scale: 2 }] },
+            "100%": { transform: [{ translateY: 72 }, { scale: 2 }] },
+        },
+        animationDuration: "5000ms",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
+    },
+});
+export const AppOpeningAnimation = ({ accentColor, appLogo, 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: backgroundColor.default, x: 25, y: 21, width: 392, height: 817, rx: 45 }), _jsx(Path, { d: "M80 86h35.6c15 0 27 12 27 27v35.6c0 15-12 27-27 27H80c-15 0-27-12-27-27V113c0-15 12-27 27-27zm0 117.6h35.6c15 0 27 12.1 27 27v35.6c0 15-12 27-27 27H80c-15 0-27-12-27-27v-35.6c0-14.9 12-27 27-27zm0 117.7h35.6c15 0 27 12 27 27v35.6c0 14.9-12 27-27 27H80c-15 0-27-12.1-27-27v-35.6c0-15 12-27 27-27zm0 117.6h35.6c15 0 27 12.1 27 27v35.6c0 15-12 27-27 27H80c-15 0-27-12-27-27V466c0-14.9 12-27 27-27v-.1zm0 282.5h35.6c15 0 27 12 27 27V784c0 14.9-12 27-27 27H80c-15 0-27-12.1-27-27v-35.6c0-15 12-27 27-27zM203.2 86h35.6c15 0 27 12 27 27v35.6c0 15-12 27-27 27h-35.6c-15 0-27-12-27-27V113c0-15 12-27 27-27zm0 117.6h35.6c15 0 27 12.1 27 27v35.6c0 15-12 27-27 27h-35.6c-15 0-27-12-27-27v-35.6c0-14.9 12-27 27-27zm0 235.3h35.6c15 0 27 12.1 27 27v35.6c0 15-12 27-27 27h-35.6c-15 0-27-12-27-27V466c0-14.9 12-27 27-27v-.1zm0 282.5h35.6c15 0 27 12 27 27V784c0 14.9-12 27-27 27h-35.6c-15 0-27-12.1-27-27v-35.6c0-15 12-27 27-27zM326.4 86H362c15 0 27 12 27 27v35.6c0 15-12 27-27 27h-35.6c-15 0-27-12-27-27V113c0-15 12-27 27-27zm0 117.6H362c15 0 27 12.1 27 27v35.6c0 15-12 27-27 27h-35.6c-15 0-27-12-27-27v-35.6c0-14.9 12-27 27-27zm0 117.7H362c15 0 27 12 27 27v35.6c0 14.9-12 27-27 27h-35.6c-15 0-27-12.1-27-27v-35.6c0-15 12-27 27-27zm0 117.6H362c15 0 27 12.1 27 27v35.6c0 15-12 27-27 27h-35.6c-15 0-27-12-27-27V466c0-14.9 12-27 27-27v-.1zm0 282.5H362c15 0 27 12 27 27V784c0 14.9-12 27-27 27h-35.6c-15 0-27-12.1-27-27v-35.6c0-15 12-27 27-27z", fill: "#fff" }), _jsx(G, { mask: "url(#phoneScreen)", children: _jsx(Rect, { fill: accentColor, fillRule: "nonzero", x: 176.4, y: 321, width: 89.6, height: 89.6, rx: 27, style: [styles.icon, animationStyle], "transform-origin": "221.2 365.8" }) }), _jsx(Image, { xlinkHref: appLogo, preserveAspectRatio: "xMidYMid meet", x: 190, y: 335, height: 62, width: 62, style: [styles.logo, animationStyle], "transform-origin": "221.2 365.8" }), _jsx(Circle, { stroke: "#FFFFFF", 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/AutoWidthImage.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Image, ImageProps } from "react-native";
+import { Except } from "type-fest";
+export declare const AutoWidthImage: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Except<ImageProps, "source"> & {
+    maxWidth?: number | undefined;
+    height: number;
+    sourceUri: string;
+} & import("react").RefAttributes<Image>>>;

package/src/components/AutoWidthImage.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, memo, useEffect, useState } from "react";
+import isEqual from "react-fast-compare";
+import { Image } from "react-native";
+import { isNotNullish } from "../utils/nullish";
+export const AutoWidthImage = memo(forwardRef(({ maxWidth, height, sourceUri, style, ...props }, forwardedRef) => {
+    const [size, setSize] = useState({
+        height,
+        width: 0,
+    });
+    useEffect(() => {
+        Image.getSize(sourceUri, (fetchedWidth, fetchedHeight) => {
+            const ratio = fetchedWidth / fetchedHeight;
+            const width = ratio * height;
+            if (isNotNullish(maxWidth) && maxWidth < width) {
+                const height = maxWidth / ratio;
+                setSize({ height, width: maxWidth });
+            }
+            else {
+                setSize({ height, width });
+            }
+        });
+    }, [maxWidth, height, sourceUri]);
+    return (_jsx(Image, { ref: forwardedRef, source: { uri: sourceUri }, style: [style, size], ...props }));
+}), isEqual);
+AutoWidthImage.displayName = "AutoWidthImage";

package/src/components/Avatar.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type Props = {
+    initials?: string;
+    size: number;
+};
+export declare const Avatar: import("react").NamedExoticComponent<Props>;
+export {};

package/src/components/Avatar.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { commonStyles } from "../constants/commonStyles";
+import { colors } from "../constants/design";
+import { typography } from "../constants/typography";
+import { Icon } from "./Icon";
+const styles = StyleSheet.create({
+    text: {
+        ...typography.bodyLarge,
+        fontWeight: typography.fontWeights.demi,
+        textAlign: "center",
+    },
+    container: {
+        borderWidth: 1,
+    },
+});
+const initialsToVariant = (initials) => {
+    const value = (initials.charCodeAt(0) + initials.charCodeAt(1)) % 3;
+    switch (value) {
+        case 2:
+            return "darkPink";
+        case 1:
+            return "live";
+        default:
+            return "shakespear";
+    }
+};
+export const Avatar = memo(({ initials = "", size }) => {
+    const variant = initialsToVariant(initials);
+    return (_jsx(View, { accessibilityRole: "image", style: [
+            commonStyles.center,
+            styles.container,
+            {
+                backgroundColor: colors[variant][100],
+                borderColor: colors[variant][200],
+                height: size,
+                width: size,
+                borderRadius: size / 2,
+            },
+        ], children: initials !== "" ? (_jsx(Text, { style: [styles.text, { color: colors[variant][500], fontSize: size * 0.4 }], selectable: false, children: initials })) : (_jsx(Icon, { name: "person-filled", size: size - 8, color: colors[variant][50] })) }));
+});

package/src/components/BorderedButton.d.ts

@@ -0,0 +1,16 @@
+import { ReactText } from "react";
+import { GestureResponderEvent, StyleProp, View, ViewStyle } from "react-native";
+import { IconName } from "./Icon";
+type Props = {
+    accessibilityLabel?: string;
+    children?: ReactText;
+    color?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    icon?: IconName;
+    onPress?: (event: GestureResponderEvent) => void;
+    size?: "large" | "small";
+    style?: StyleProp<ViewStyle>;
+};
+export declare const BorderedButton: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<View>>>;
+export {};

package/src/components/BorderedButton.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, memo } from "react";
+import { ActivityIndicator, Pressable, StyleSheet, Text, View, } from "react-native";
+import { colors } from "../constants/colors";
+import { typography } from "../constants/typography";
+import { isNotNullish } from "../utils/nullish";
+import { Icon } from "./Icon";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    base: {
+        alignItems: "center",
+        backgroundColor: colors.white,
+        borderColor: colors.gray[10],
+        borderRadius: 4,
+        borderWidth: 1,
+        flexDirection: "row",
+        flexShrink: 1,
+        height: 48,
+        justifyContent: "center",
+        overflow: "hidden",
+        paddingLeft: 20,
+        paddingRight: 20,
+        transitionDuration: "150ms",
+        transitionProperty: "background-color",
+    },
+    small: {
+        height: 40,
+        paddingLeft: 16,
+        paddingRight: 16,
+    },
+    withIcon: {
+        paddingLeft: 18,
+    },
+    withIconSmall: {
+        paddingLeft: 14,
+    },
+    iconOnly: {
+        paddingLeft: 13,
+        paddingRight: 13,
+    },
+    iconOnlySmall: {
+        paddingLeft: 10,
+        paddingRight: 10,
+    },
+    hovered: {
+        backgroundColor: colors.gray[3],
+    },
+    pressed: {
+        backgroundColor: colors.gray[10],
+    },
+    disabled: {
+        backgroundColor: colors.gray[3],
+        borderColor: colors.gray[3],
+        cursor: "not-allowed",
+    },
+    text: {
+        ...typography.bodyLarge,
+        fontWeight: typography.fontWeights.demi,
+        lineHeight: 48,
+    },
+    textSmall: {
+        ...typography.bodySmall,
+        fontWeight: typography.fontWeights.demi,
+        lineHeight: 40,
+    },
+    textDisabled: {
+        color: colors.gray[50],
+    },
+    loaderContainer: {
+        ...StyleSheet.absoluteFillObject,
+        alignItems: "center",
+        backgroundColor: colors.white,
+        justifyContent: "center",
+    },
+});
+export const BorderedButton = memo(forwardRef(({ accessibilityLabel, children = "", color = colors.gray[100], disabled = false, loading = false, icon, onPress, size = "large", style, }, forwardedRef) => {
+    const hasText = children !== "";
+    const isSmall = size === "small";
+    const iconSize = isSmall ? 18 : 20;
+    return (_jsxs(Pressable, { accessibilityRole: "button", accessibilityLabel: accessibilityLabel, accessibilityBusy: loading, accessibilityDisabled: disabled, disabled: loading || disabled, ref: forwardedRef, onPress: onPress, style: ({ hovered, pressed }) => [
+            styles.base,
+            isSmall && styles.small,
+            isNotNullish(icon) && (isSmall ? styles.withIconSmall : styles.withIcon),
+            !hasText && (isSmall ? styles.iconOnlySmall : styles.iconOnly),
+            disabled
+                ? styles.disabled
+                : pressed
+                    ? styles.pressed
+                    : hovered
+                        ? styles.hovered
+                        : false,
+            style,
+        ], children: [icon && _jsx(Icon, { color: color, name: icon, size: iconSize }), hasText && isNotNullish(icon) && _jsx(Space, { width: isSmall ? 8 : 12 }), hasText && (_jsx(Text, { numberOfLines: 1, selectable: false, style: [
+                    isSmall ? styles.textSmall : styles.text,
+                    disabled ? styles.textDisabled : { color },
+                ], children: children })), loading && (_jsx(View, { accessibilityRole: "none", style: styles.loaderContainer, children: _jsx(ActivityIndicator, { color: disabled ? colors.gray[50] : colors.gray[100], size: iconSize }) }))] }));
+}));
+BorderedButton.displayName = "BorderedButton";

package/src/components/BorderedIcon.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ColorVariants } from "../constants/design";
+import { IconName } from "./Icon";
+import { SpacingValue } from "./Space";
+type Props = {
+    name: IconName;
+    size?: number;
+    padding?: SpacingValue | 0;
+    color?: ColorVariants;
+};
+export declare const BorderedIcon: ({ name, size, padding, color }: Props) => JSX.Element;
+export {};

package/src/components/BorderedIcon.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from "react-native";
+import { colors, radii } from "../constants/design";
+import { Box } from "./Box";
+import { Icon } from "./Icon";
+const styles = StyleSheet.create({
+    base: {
+        borderRadius: radii[8],
+        borderWidth: 1,
+        borderColor: colors.current[100],
+        backgroundColor: colors.current[50],
+    },
+});
+export const BorderedIcon = ({ name, size = 96, padding = 0, color = "current" }) => {
+    const iconSize = size - padding * 2;
+    return (_jsx(Box, { alignItems: "center", justifyContent: "center", style: [
+            styles.base,
+            {
+                width: size,
+                height: size,
+                borderColor: colors[color][100],
+                backgroundColor: colors[color][50],
+            },
+        ], children: _jsx(Icon, { name: name, size: iconSize, color: colors[color][500] }) }));
+};

package/src/components/BottomPanel.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+type Props = {
+    visible: boolean;
+    onPressClose: () => void;
+    children: ReactNode;
+    returnFocus?: boolean;
+};
+export declare const BottomPanel: ({ visible, onPressClose, children, returnFocus }: Props) => JSX.Element | null;
+export {};

package/src/components/BottomPanel.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, useEffect, useState } from "react";
+import { Pressable, ScrollView, StyleSheet, View } from "react-native";
+import { commonStyles } from "../constants/commonStyles";
+import { backgroundColor, radii, shadows, spacings } from "../constants/design";
+import { useBodyClassName } from "../hooks/useBodyClassName";
+import { FocusTrap } from "./FocusTrap";
+import { LoadingView } from "./LoadingView";
+import { Portal } from "./Portal";
+import { TransitionView } from "./TransitionView";
+const BACKGROUND_COLOR = "rgba(0, 0, 0, 0.6)";
+const styles = StyleSheet.create({
+    fill: {
+        ...StyleSheet.absoluteFillObject,
+        position: "fixed",
+        animationFillMode: "forwards",
+    },
+    overlay: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: BACKGROUND_COLOR,
+    },
+    overlayEnter: {
+        animationKeyframes: {
+            "0%": { opacity: 0 },
+        },
+        animationDuration: "200ms",
+        animationTimingFunction: "ease-in-out",
+    },
+    overlayLeave: {
+        animationKeyframes: {
+            "100%": { opacity: 0 },
+        },
+        animationDuration: "200ms",
+        animationTimingFunction: "ease-in-out",
+    },
+    modalEnter: {
+        animationKeyframes: {
+            "0%": {
+                opacity: 0,
+                transform: [{ translateY: 20 }],
+            },
+        },
+        animationDuration: "300ms",
+        animationTimingFunction: "ease-in-out",
+    },
+    modalLeave: {
+        animationKeyframes: {
+            "100%": {
+                opacity: 0,
+                transform: [{ translateY: 20 }],
+            },
+        },
+        animationDuration: "300ms",
+        animationTimingFunction: "ease-in-out",
+    },
+    modalContainer: {
+        ...StyleSheet.absoluteFillObject,
+    },
+    modalContentContainer: {
+        justifyContent: "flex-end",
+        flexGrow: 1,
+    },
+    trap: {
+        ...commonStyles.fill,
+    },
+    modal: {
+        backgroundColor: backgroundColor.accented,
+        borderTopLeftRadius: radii[8],
+        borderTopRightRadius: radii[8],
+        boxShadow: shadows.modal,
+        alignSelf: "stretch",
+        marginTop: spacings[32],
+    },
+    pressableOverlay: {
+        ...StyleSheet.absoluteFillObject,
+    },
+});
+export const BottomPanel = ({ visible, onPressClose, children, returnFocus = true }) => {
+    const [rootElement, setRootElement] = useState(() => undefined);
+    useEffect(() => {
+        const rootElement = document.createElement("div");
+        document.body.append(rootElement);
+        setRootElement(rootElement);
+        return () => {
+            rootElement.remove();
+            setRootElement(undefined);
+        };
+    }, []);
+    useBodyClassName("BottomPanelOpen", { enabled: visible });
+    if (rootElement == null) {
+        return null;
+    }
+    return (_jsxs(Portal, { container: rootElement, 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.modalEnter, leave: styles.modalLeave, children: visible ? (_jsxs(ScrollView, { style: styles.modalContainer, contentContainerStyle: styles.modalContentContainer, children: [_jsx(FocusTrap, { autoFocus: true, focusLock: true, returnFocus: returnFocus, style: styles.trap, children: onPressClose != null ? (_jsx(Pressable, { onPress: onPressClose, style: styles.pressableOverlay })) : null }), _jsx(View, { style: styles.modal, children: children })] })) : null }) })] }));
+};

package/src/components/Box.d.ts

@@ -0,0 +1,65 @@
+import { ReactNode } from "react";
+import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+declare const directionStyles: {
+    columnReverse: {
+        flexDirection: "column-reverse";
+    };
+    row: {
+        flexDirection: "row";
+    };
+    rowReverse: {
+        flexDirection: "row-reverse";
+    };
+};
+declare const alignItemsStyles: {
+    baseline: {
+        alignItems: "baseline";
+    };
+    center: {
+        alignItems: "center";
+    };
+    end: {
+        alignItems: "flex-end";
+    };
+    start: {
+        alignItems: "flex-start";
+    };
+};
+declare const justifyContentStyles: {
+    center: {
+        justifyContent: "center";
+    };
+    end: {
+        justifyContent: "flex-end";
+    };
+    start: {
+        justifyContent: "flex-start";
+    };
+    spaceBetween: {
+        justifyContent: "space-between";
+    };
+    spaceAround: {
+        justifyContent: "space-around";
+    };
+    spaceEvenly: {
+        justifyContent: "space-evenly";
+    };
+};
+type BoxDirection = keyof typeof directionStyles | "column";
+type BoxAlignItems = keyof typeof alignItemsStyles | "stretch";
+type BoxJustifyContent = keyof typeof justifyContentStyles | "normal";
+export type BoxProps = ViewProps & {
+    alignItems?: BoxAlignItems;
+    children?: ReactNode;
+    direction?: BoxDirection;
+    justifyContent?: BoxJustifyContent;
+    style?: StyleProp<ViewStyle>;
+};
+export declare const Box: import("react").ForwardRefExoticComponent<ViewProps & {
+    alignItems?: BoxAlignItems | undefined;
+    children?: ReactNode;
+    direction?: BoxDirection | undefined;
+    justifyContent?: BoxJustifyContent | undefined;
+    style?: StyleProp<ViewStyle>;
+} & import("react").RefAttributes<View>>;
+export {};