@swan-io/lake 1.0.0

package/src/components/Tile.js

@@ -0,0 +1,130 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, Fragment, useCallback, useState, } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { backgroundColor, colors, negativeSpacings, radii, shadows, spacings, texts, } from "../constants/design";
+import { isNotNullish } from "../utils/nullish";
+import { Box } from "./Box";
+import { LakeText } from "./LakeText";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: backgroundColor.accented,
+        borderRadius: radii[8],
+        boxShadow: shadows.tile,
+        overflow: "hidden",
+    },
+    unselectedContainer: {
+        backgroundColor: backgroundColor.default,
+        boxShadow: `0 0 0 1px ${colors.gray[100]}`,
+    },
+    unselectedHoveredContainer: {
+        backgroundColor: backgroundColor.default,
+        boxShadow: `0 0 0 1px ${colors.gray[500]}`,
+    },
+    disabled: {
+        opacity: 0.5,
+    },
+    hoveredContainer: {
+        boxShadow: shadows.tileHover,
+    },
+    headerContainer: {
+        zIndex: 1,
+    },
+    header: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+    },
+    title: {
+        ...texts.h3,
+        flexGrow: 1,
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    fullWidthContent: {
+        marginHorizontal: negativeSpacings[32],
+    },
+    fitToBottom: {
+        marginBottom: negativeSpacings[32],
+    },
+    column: {
+        flexGrow: 1,
+    },
+    descriptionContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "flex-start",
+    },
+    description: {
+        width: 1,
+        flexGrow: 1,
+    },
+    headerTitleIcon: {
+        flexGrow: 1,
+    },
+    row: {
+        alignItems: "stretch",
+        marginHorizontal: negativeSpacings[12],
+    },
+    rowCol: {
+        flexGrow: 1,
+        padding: spacings[12],
+    },
+    footer: {
+        marginHorizontal: negativeSpacings[32],
+        alignSelf: "stretch",
+    },
+});
+export const Tile = ({ icon, title, description, headerEnd, footer, flexBasis, children, numberOfLines, paddingVertical = 32, paddingHorizontal = 32, hovered = false, flexGrow = 0, flexShrink = 0, disabled = false, selected, style, }) => {
+    return (_jsxs(View, { accessibilityRole: "region", style: [
+            styles.container,
+            selected === false && styles.unselectedContainer,
+            {
+                paddingVertical: spacings[paddingVertical],
+                paddingHorizontal: spacings[paddingHorizontal],
+                flexGrow,
+                flexShrink,
+                flexBasis,
+            },
+            hovered && styles.hoveredContainer,
+            selected === false && hovered && styles.unselectedHoveredContainer,
+            disabled && styles.disabled,
+            style,
+        ], children: [(isNotNullish(title) || isNotNullish(headerEnd) || isNotNullish(description)) && (_jsxs(View, { style: styles.headerContainer, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTitleIcon, children: [isNotNullish(icon) && (_jsxs(_Fragment, { children: [icon, _jsx(Space, { height: 12 })] })), isNotNullish(title) && (_jsx(Text, { style: styles.title, accessibilityRole: "header", accessibilityLevel: 3, children: title }))] }), isNotNullish(headerEnd) ? _jsx(View, { children: headerEnd }) : null] }), isNotNullish(description) && (_jsxs(_Fragment, { children: [isNotNullish(title) && _jsx(Space, { height: 12 }), _jsx(View, { style: styles.descriptionContainer, children: _jsx(LakeText, { numberOfLines: numberOfLines, style: styles.description, children: description }) })] })), isNotNullish(children) && _jsx(Space, { height: 24 })] })), children, isNotNullish(footer) && (_jsx(View, { style: [styles.footer, { marginTop: paddingVertical, marginBottom: -paddingVertical }], children: footer }))] }));
+};
+export const TileFullWidthContent = ({ children, flexGrow, fitToBottom = false, }) => {
+    return (_jsx(View, { style: [styles.fullWidthContent, fitToBottom && styles.fitToBottom, { flexGrow }], children: children }));
+};
+const SPACE = _jsx(Space, { height: 24 });
+export const TileGrid = ({ children, breakpoint = 1000 }) => {
+    const [flexDirection, setFlexDirection] = useState("row");
+    const onLayout = useCallback(({ nativeEvent: { layout: { width }, }, }) => {
+        setFlexDirection(() => (width < breakpoint ? "column" : "row"));
+    }, [breakpoint]);
+    const childrenArray = Children.toArray(children);
+    const leftColumn = [];
+    const rightColumn = [];
+    const nonNullChildren = childrenArray.filter(isNotNullish);
+    nonNullChildren.forEach((item, index) => {
+        if (flexDirection === "column" || index % 2 === 0) {
+            leftColumn.push(_jsxs(Fragment, { children: [item, SPACE] }, index));
+        }
+        else {
+            rightColumn.push(_jsxs(Fragment, { children: [item, SPACE] }, index));
+        }
+    });
+    const isRow = flexDirection === "row";
+    return (_jsxs(Box, { direction: flexDirection, onLayout: onLayout, children: [_jsx(View, { style: [isRow && styles.column, isRow && { flexBasis: breakpoint / 2 }], children: leftColumn }), _jsx(Space, { width: 24 }), _jsx(View, { style: [isRow && styles.column, isRow && { flexBasis: breakpoint / 2 }], children: rightColumn })] }));
+};
+export const TileRows = ({ children, breakpoint = 1000 }) => {
+    const [flexDirection, setFlexDirection] = useState("row");
+    const onLayout = useCallback(({ nativeEvent: { layout: { width }, }, }) => {
+        setFlexDirection(() => (width < breakpoint ? "column" : "row"));
+    }, [breakpoint]);
+    const childrenArray = Children.toArray(children);
+    const nonNullChildren = childrenArray.filter(isNotNullish);
+    const isRow = flexDirection === "row";
+    return (_jsx(Box, { direction: flexDirection, onLayout: onLayout, style: styles.row, children: nonNullChildren.map((item, index) => {
+            return (_jsx(View, { style: [styles.rowCol, isRow && { flexBasis: breakpoint / 2 }], children: cloneElement(item, { flexGrow: 1 }) }, index));
+        }) }));
+};

package/src/components/TilePlaceholder.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const TilePlaceholder: () => JSX.Element;
+export declare const TileGridPlaceholder: ({ numberOfItems, withTabs, }: {
+    numberOfItems?: number | undefined;
+    withTabs?: boolean | undefined;
+}) => JSX.Element;

package/src/components/TilePlaceholder.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { StyleSheet, View } from "react-native";
+import { colors, radii } from "../constants/design";
+import { Tile, TileGrid } from "./Tile";
+const styles = StyleSheet.create({
+    placeholderTitle: {
+        height: 14,
+        width: "40%",
+        backgroundColor: colors.gray[200],
+        borderRadius: radii[6],
+        animationKeyframes: {
+            "50%": {
+                opacity: 0.6,
+            },
+        },
+        animationDuration: "2000ms",
+        animationTimingFunction: "linear",
+        animationIterationCount: "infinite",
+    },
+    placeholderText: {
+        height: 10,
+        width: "50%",
+        backgroundColor: colors.gray[100],
+        borderRadius: radii[6],
+        marginVertical: 24,
+    },
+    content: {
+        animationKeyframes: {
+            "50%": {
+                opacity: 0.6,
+            },
+        },
+        animationDuration: "2000ms",
+        animationTimingFunction: "linear",
+        animationIterationCount: "infinite",
+    },
+    withTabs: {
+        // This is the actual height of spacing + tab bar
+        // TODO: Make a shared (non-per-app) TabView for that, and providing Link/Router from outside
+        paddingTop: 61,
+    },
+});
+export const TilePlaceholder = () => {
+    return (_jsx(Tile, { title: _jsx(View, { style: styles.placeholderTitle }), children: _jsxs(View, { style: styles.content, children: [_jsx(View, { style: styles.placeholderText }), _jsx(View, { style: styles.placeholderText }), _jsx(View, { style: styles.placeholderText }), _jsx(View, { style: styles.placeholderText })] }) }));
+};
+export const TileGridPlaceholder = ({ numberOfItems = 2, withTabs = true, }) => {
+    return (_jsx(View, { style: withTabs && styles.withTabs, children: _jsx(TileGrid, { children: useMemo(() => Array(numberOfItems)
+                .fill(null)
+                .map((_, index) => _jsx(TilePlaceholder, {}, `placeholder-${index}`)), [numberOfItems]) }) }));
+};

package/src/components/ToastStack.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ToastStack: () => JSX.Element | null;

package/src/components/ToastStack.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box } from "@swan-io/lake/src/components/Box";
+import { Portal } from "@swan-io/lake/src/components/Portal";
+import { animations, colors, shadows } from "@swan-io/lake/src/constants/design";
+import { memo, useEffect, useState } from "react";
+import { Animated, StyleSheet, View } from "react-native";
+import { match } from "ts-pattern";
+import { hideToast, useToasts } from "../state/toasts";
+import { Icon } from "./Icon";
+import { LakeText } from "./LakeText";
+import { Pressable } from "./Pressable";
+import { Space } from "./Space";
+import { TransitionGroupView } from "./TransitionGroupView";
+const styles = StyleSheet.create({
+    list: {
+        position: "absolute",
+        right: 0,
+        bottom: 0,
+        maxHeight: "100%",
+        maxWidth: 400,
+        paddingVertical: 8,
+        width: "100%",
+        zIndex: 10,
+    },
+    toastWrapper: {
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+    },
+    toast: {
+        padding: 24,
+        borderRadius: 4,
+        borderWidth: 1,
+        borderLeftWidth: 4,
+        overflow: "hidden",
+        boxShadow: shadows.modal,
+    },
+    contentContainer: {
+        paddingRight: 36, // 24 for close button + 12 for spacing
+    },
+    closeButton: {
+        zIndex: 1,
+        position: "absolute",
+        width: 24,
+        height: 24,
+        right: 24,
+        top: 0,
+        bottom: 0,
+        margin: "auto",
+    },
+    progressBar: {
+        height: 2,
+        transformOrigin: "left",
+    },
+});
+const Toast = memo(({ variant, uid, title, description, progress, onClose }) => {
+    const colorVariation = match(variant)
+        .with("success", () => "positive")
+        .with("error", () => "negative")
+        .with("info", () => "shakespear")
+        .with("warning", () => "warning")
+        .exhaustive();
+    return (_jsx(View, { style: styles.toastWrapper, children: _jsxs(View, { style: [
+                styles.toast,
+                {
+                    borderColor: colors[colorVariation][200],
+                    borderLeftColor: colors[colorVariation][500],
+                    backgroundColor: colors[colorVariation][0],
+                },
+            ], children: [_jsxs(Box, { style: styles.contentContainer, children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [match(variant)
+                                    .with("success", () => (_jsx(Icon, { name: "checkmark-circle-regular", size: 20, color: colors[colorVariation][700] })))
+                                    .with("error", () => (_jsx(Icon, { name: "dismiss-circle-regular", size: 20, color: colors[colorVariation][700] })))
+                                    .with("info", () => (_jsx(Icon, { name: "info-regular", size: 20, color: colors[colorVariation][700] })))
+                                    .with("warning", () => (_jsx(Icon, { name: "warning-regular", size: 20, color: colors[colorVariation][700] })))
+                                    .exhaustive(), _jsx(Space, { width: 12 }), _jsx(LakeText, { variant: "regular", color: colors[colorVariation][700], children: title })] }), description != null && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 8 }), _jsx(LakeText, { variant: "smallRegular", color: colors.gray[700], children: description })] }))] }), _jsx(Pressable, { onPress: () => onClose(uid), style: styles.closeButton, children: _jsx(Icon, { name: "lake-close", size: 24, color: colors.gray[500] }) }), progress != null && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 24 }), _jsx(Animated.View, { accessibilityRole: "progressbar", style: [
+                                styles.progressBar,
+                                { backgroundColor: colors[colorVariation][500] },
+                                { transform: [{ scaleX: progress }] },
+                            ] })] }))] }) }));
+});
+export const ToastStack = () => {
+    const toasts = useToasts();
+    const [rootElement, setRootElement] = useState(() => undefined);
+    useEffect(() => {
+        const rootElement = document.createElement("div");
+        document.body.append(rootElement);
+        setRootElement(rootElement);
+        return () => {
+            rootElement.remove();
+            setRootElement(undefined);
+        };
+    }, []);
+    if (rootElement == null) {
+        return null;
+    }
+    return (_jsx(Portal, { container: rootElement, children: _jsx(TransitionGroupView, { style: styles.list, enter: animations.fadeAndSlideInFromRight.enter, leave: animations.fadeAndSlideInFromRight.leave, children: toasts.map(toast => (_jsx(Toast, { uid: toast.uid, variant: toast.variant, progress: toast.progress, title: toast.title, description: toast.description, onClose: hideToast }, toast.uid))) }) }));
+};

package/src/components/Tooltip.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode, RefObject } from "react";
+type Props = {
+    children: ReactNode;
+    describedBy?: string;
+    matchReferenceWidth?: boolean;
+    onHide?: () => void;
+    onShow?: () => void;
+    placement: "top" | "bottom";
+    referenceRef: RefObject<unknown>;
+    width?: number;
+    togglableOnFocus?: boolean;
+};
+export type TooltipRef = {
+    show: () => void;
+    hide: () => void;
+};
+export declare const Tooltip: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<TooltipRef>>>;
+export {};

package/src/components/Tooltip.js

@@ -0,0 +1,162 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, memo, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { usePopper } from "react-popper";
+import { colors } from "../constants/colors";
+import { shadows } from "../constants/design";
+import { typography } from "../constants/typography";
+import { useHover } from "../hooks/useHover";
+import { isNullish } from "../utils/nullish";
+import { getRootElement, matchReferenceWidthModifier } from "../utils/popper";
+import { Portal } from "./Portal";
+const { matches: canHover } = window.matchMedia("(hover: hover)");
+const styles = StyleSheet.create({
+    base: {
+        alignItems: "center",
+    },
+    baseTop: {
+        marginBottom: 8,
+    },
+    baseBottom: {
+        marginTop: 8,
+    },
+    content: {
+        padding: 8,
+        backgroundColor: colors.white,
+        color: colors.gray[80],
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: colors.gray[10],
+        boxShadow: shadows.modal,
+    },
+    text: {
+        ...typography.bodySmall,
+        fontWeight: typography.fontWeights.book,
+        lineHeight: typography.lineHeights.input,
+        color: colors.gray[80],
+        textAlign: "center",
+    },
+    arrowContainer: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        margin: "auto",
+        width: 14,
+        height: 10,
+        overflow: "hidden",
+    },
+    arrowContainerTop: {
+        bottom: -7,
+    },
+    arrowContainerBottom: {
+        top: -7,
+    },
+    arrow: {
+        position: "relative",
+        top: -7,
+        height: 14,
+        width: 14,
+        backgroundColor: colors.white,
+        borderWidth: 1,
+        borderColor: colors.gray[10],
+        transform: [{ rotate: "45deg" }],
+    },
+});
+const isReactText = (node) => ["string", "number"].includes(typeof node);
+export const Tooltip = memo(forwardRef(({ children, describedBy, matchReferenceWidth = false, onHide, onShow, placement, referenceRef, width, togglableOnFocus = false, }, forwardedRef) => {
+    const rootElement = getRootElement(referenceRef.current);
+    const [popperElement, setPopperElement] = useState(null);
+    const timeoutRef = useRef(0);
+    const [visible, setVisible] = useState(false);
+    const [, setMounted] = useState(false);
+    useEffect(() => {
+        setMounted(true);
+    }, []);
+    useImperativeHandle(forwardedRef, () => ({
+        show: () => setVisible(true),
+        hide: () => setVisible(false),
+    }));
+    useHover(referenceRef, {
+        disabled: !canHover,
+        contain: true,
+        onHoverChange: nextVisible => {
+            nextVisible ? onShow?.() : onHide?.();
+            setVisible(nextVisible);
+        },
+    });
+    const { attributes, update, styles: popperStyles, state, } = usePopper(referenceRef.current, popperElement, {
+        placement,
+        modifiers: useMemo(() => [
+            { name: "preventOverflow", enabled: true },
+            { name: "flip", enabled: false },
+            { name: "hide", enabled: true },
+            { ...matchReferenceWidthModifier, enabled: matchReferenceWidth },
+        ], [matchReferenceWidth]),
+    });
+    const overflowOffset = state?.modifiersData.preventOverflow?.x ?? 0;
+    useEffect(() => {
+        const node = referenceRef.current;
+        if (!(node instanceof Element)) {
+            return;
+        }
+        const onFocus = (event) => {
+            event.preventDefault();
+            setVisible(true);
+        };
+        const onBlur = (event) => {
+            event.preventDefault();
+            const { target } = event;
+            if (target instanceof Element && (node === target || node.contains(target))) {
+                onHide?.();
+                setVisible(false);
+            }
+        };
+        const onPress = (event) => {
+            event.preventDefault();
+            if (!canHover) {
+                clearTimeout(timeoutRef.current);
+                setVisible(true);
+                timeoutRef.current = setTimeout(() => {
+                    setVisible(false);
+                }, 1500);
+            }
+        };
+        if (togglableOnFocus) {
+            node.addEventListener("focus", onFocus);
+            node.addEventListener("blur", onBlur);
+        }
+        node.addEventListener("mousedown", onPress);
+        return () => {
+            if (togglableOnFocus) {
+                node.removeEventListener("focus", onFocus);
+                node.removeEventListener("blur", onBlur);
+            }
+            node.removeEventListener("mousedown", onPress);
+        };
+    }, [referenceRef, togglableOnFocus, setVisible, onHide]);
+    useEffect(() => {
+        return () => clearTimeout(timeoutRef.current);
+    }, []);
+    useLayoutEffect(() => {
+        void update?.();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [children]);
+    if (isNullish(rootElement) || !visible) {
+        return null;
+    }
+    return (_jsx(Portal, { container: rootElement, children: _jsx("div", { ref: setPopperElement, style: popperStyles.popper, ...attributes.popper, role: "tooltip", "aria-describedby": describedBy, children: _jsxs(View, { style: [
+                    styles.base,
+                    state?.placement === "top" && styles.baseTop,
+                    state?.placement === "bottom" && styles.baseBottom,
+                ], children: [_jsx(View, { style: [styles.content, { width }], children: isReactText(children) ? _jsx(Text, { style: styles.text, children: children }) : children }), _jsx(View, { accessibilityRole: "none", style: [
+                            styles.arrowContainer,
+                            state?.placement === "top" && styles.arrowContainerTop,
+                            state?.placement === "bottom" && styles.arrowContainerBottom,
+                            {
+                                transform: [
+                                    { translateX: -overflowOffset },
+                                    { rotate: state?.placement === "bottom" ? "180deg" : "0deg" },
+                                ],
+                            },
+                        ], children: _jsx(View, { style: styles.arrow }) })] }) }) }));
+}));

package/src/components/TransitionGroupView.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+import { AnimationStyles, StyleProp, ViewProps, ViewStyle } from "react-native";
+type Props = {
+    enter?: AnimationStyles;
+    leave?: AnimationStyles;
+    style?: StyleProp<ViewStyle>;
+    childStyle?: StyleProp<ViewStyle>;
+    pointerEvents?: ViewProps["pointerEvents"];
+    children: ReactNode;
+};
+export declare const TransitionGroupView: ({ children, enter, leave, style, childStyle, pointerEvents, }: Props) => JSX.Element;
+export {};

package/src/components/TransitionGroupView.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Array, Option } from "@swan-io/boxed";
+import { Children, useMemo, useReducer, useRef } from "react";
+import { View } from "react-native";
+import { match, P } from "ts-pattern";
+import { usePreviousValue } from "../hooks/usePreviousValue";
+import { TransitionView } from "./TransitionView";
+export const TransitionGroupView = ({ children, enter, leave, style, childStyle, pointerEvents, }) => {
+    const leavingKeysAndIndicesRef = useRef([]);
+    const [, forceUpdate] = useReducer(() => [], []);
+    const onLeave = (key) => {
+        leavingKeysAndIndicesRef.current = leavingKeysAndIndicesRef.current.filter(leavingKey => leavingKey.key !== key);
+        forceUpdate();
+    };
+    const cleanedUpChildren = useMemo(() => Array.keepMap(Children.toArray(children), child => match(child)
+        .with({ key: P.string }, child => Option.Some({ key: child.key, child }))
+        .otherwise(() => Option.None())), [children]);
+    const previousChildren = usePreviousValue(cleanedUpChildren);
+    const newKeys = new Set(cleanedUpChildren.map(item => item.key));
+    leavingKeysAndIndicesRef.current = [
+        ...leavingKeysAndIndicesRef.current,
+        ...Array.keepMap(previousChildren.map((item, index) => ({ item, index })), ({ item, index }) => newKeys.has(item.key) ||
+            leavingKeysAndIndicesRef.current.find(prev => prev.key === item.key)
+            ? Option.None()
+            : Option.Some({ key: item.key, index })),
+    ];
+    const childrenToRender = [];
+    cleanedUpChildren.forEach((item, index) => {
+        childrenToRender.push({ key: item.key, originalIndex: index, child: item.child });
+    });
+    leavingKeysAndIndicesRef.current.forEach(({ index, key }) => {
+        const closerIndex = childrenToRender.findIndex(item => item.originalIndex === index);
+        if (closerIndex === -1) {
+            childrenToRender.push({ key, originalIndex: index, child: null });
+        }
+        else {
+            childrenToRender.splice(closerIndex, 0, { key, originalIndex: index, child: null });
+        }
+    });
+    return (_jsx(View, { style: style, children: childrenToRender.map(({ key, child }) => {
+            return (_jsx(TransitionView, { enter: enter, leave: leave, style: childStyle, pointerEvents: pointerEvents, onLeave: () => onLeave(key), children: child }, key));
+        }) }));
+};

package/src/components/TransitionView.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+import { AnimationStyles, StyleProp, ViewProps, ViewStyle } from "react-native";
+type Props = {
+    enter?: AnimationStyles;
+    leave?: AnimationStyles;
+    style?: StyleProp<ViewStyle>;
+    pointerEvents?: ViewProps["pointerEvents"];
+    children: ReactNode | null;
+    onLeave?: () => void;
+};
+export declare const TransitionView: ({ enter, leave, style, children, pointerEvents, onLeave, }: Props) => JSX.Element | null;
+export {};

package/src/components/TransitionView.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useReducer, useRef } from "react";
+import { StyleSheet, View } from "react-native";
+import { usePreviousValue } from "../hooks/usePreviousValue";
+import { isNotNullish, isNullish } from "../utils/nullish";
+const styles = StyleSheet.create({
+    base: {
+        animationFillMode: "forwards",
+    },
+});
+export const TransitionView = ({ enter, leave, style, children, pointerEvents, onLeave, }) => {
+    const viewRef = useRef(null);
+    const childrenForLeaveAnimationRef = useRef(null);
+    const [, forceUpdate] = useReducer(() => [], []);
+    const previousChildren = usePreviousValue(children);
+    if (isNullish(children) && isNotNullish(previousChildren) && isNotNullish(leave)) {
+        childrenForLeaveAnimationRef.current = previousChildren;
+    }
+    // Cleanup in case children reappear before the animation has performed
+    if (isNotNullish(children) && isNullish(previousChildren)) {
+        childrenForLeaveAnimationRef.current = null;
+    }
+    useLayoutEffect(() => {
+        if (isNullish(children) && isNotNullish(leave) && isNotNullish(viewRef.current)) {
+            const element = viewRef.current;
+            const onAnimationEnd = () => {
+                childrenForLeaveAnimationRef.current = null;
+                forceUpdate();
+                onLeave?.();
+                element.removeEventListener("animationend", onAnimationEnd);
+            };
+            element.addEventListener("animationend", onAnimationEnd);
+            return () => element.removeEventListener("animationend", onAnimationEnd);
+        }
+    }, [children, leave, onLeave]);
+    const hasChildrenToDisplay = isNotNullish(children) || isNotNullish(childrenForLeaveAnimationRef.current);
+    return hasChildrenToDisplay ? (_jsx(View, { pointerEvents: pointerEvents, ref: viewRef, style: [
+            styles.base,
+            style,
+            enter,
+            isNotNullish(childrenForLeaveAnimationRef.current) && leave,
+        ], children: children ?? childrenForLeaveAnimationRef.current })) : null;
+};

package/src/components/WithCurrentColor.d.ts

@@ -0,0 +1,12 @@
+import { MutableRefObject, ReactElement } from "react";
+import { ViewProps } from "react-native";
+import { ColorVariants } from "../constants/design";
+type Props = {
+    variant?: ColorVariants;
+    style?: ViewProps["style"];
+    children: ReactElement;
+};
+export declare const CurrentColorContext: import("react").Context<"warning" | "current" | "gray" | "live" | "sandbox" | "positive" | "negative" | "partner" | "swan" | "shakespear" | "darkPink" | "sunglow" | "mediumSladeBlue" | undefined>;
+export declare const useCurrentColor: (containerRef: MutableRefObject<HTMLElement | null>, variant: ColorVariants | undefined) => void;
+export declare const WithCurrentColor: ({ variant, style, children }: Props) => JSX.Element;
+export {};

package/src/components/WithCurrentColor.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useLayoutEffect, useRef } from "react";
+import { StyleSheet, View } from "react-native";
+import { colors } from "../constants/design";
+import { isNotNullish } from "../utils/nullish";
+const styles = StyleSheet.create({
+    container: {
+        flexGrow: 1,
+        flexDirection: "column",
+        alignItems: "stretch",
+        flexBasis: "0%",
+    },
+});
+export const CurrentColorContext = createContext(undefined);
+export const useCurrentColor = (containerRef, variant) => {
+    useLayoutEffect(() => {
+        if (isNotNullish(containerRef.current) && variant != null) {
+            const element = containerRef.current;
+            const colorScale = colors[variant];
+            const style = element.style;
+            const original = {
+                "--color-current-900": style.getPropertyValue("--color-current-900"),
+                "--color-current-800": style.getPropertyValue("--color-current-800"),
+                "--color-current-700": style.getPropertyValue("--color-current-700"),
+                "--color-current-600": style.getPropertyValue("--color-current-600"),
+                "--color-current-500": style.getPropertyValue("--color-current-500"),
+                "--color-current-400": style.getPropertyValue("--color-current-400"),
+                "--color-current-300": style.getPropertyValue("--color-current-300"),
+                "--color-current-200": style.getPropertyValue("--color-current-200"),
+                "--color-current-100": style.getPropertyValue("--color-current-100"),
+                "--color-current-primary": style.getPropertyValue("--color-current-primary"),
+                "--color-current-secondary": style.getPropertyValue("--color-current-secondary"),
+                "--color-current-contrast": style.getPropertyValue("--color-current-contrast"),
+            };
+            style.setProperty("--color-current-900", colorScale[900], "");
+            style.setProperty("--color-current-800", colorScale[800], "");
+            style.setProperty("--color-current-700", colorScale[700], "");
+            style.setProperty("--color-current-600", colorScale[600], "");
+            style.setProperty("--color-current-500", colorScale[500], "");
+            style.setProperty("--color-current-400", colorScale[400], "");
+            style.setProperty("--color-current-300", colorScale[300], "");
+            style.setProperty("--color-current-200", colorScale[200], "");
+            style.setProperty("--color-current-100", colorScale[100], "");
+            style.setProperty("--color-current-50", colorScale[50], "");
+            style.setProperty("--color-current-primary", colorScale.primary, "");
+            style.setProperty("--color-current-secondary", colorScale.secondary, "");
+            style.setProperty("--color-current-contrast", colorScale.contrast, "");
+            return () => {
+                Object.entries(original).forEach(([key, value]) => {
+                    if (value == null) {
+                        style.removeProperty(key);
+                    }
+                    else {
+                        style.setProperty(key, value, "");
+                    }
+                });
+            };
+        }
+    }, [containerRef, variant]);
+};
+export const WithCurrentColor = ({ variant, style, children }) => {
+    const containerRef = useRef(null);
+    useCurrentColor(containerRef, variant);
+    return (_jsx(CurrentColorContext.Provider, { value: variant, children: _jsx(View, { style: style ?? styles.container, ref: containerRef, children: children }) }));
+};