@swan-io/lake 1.0.0

package/src/hooks/useBodyClassName.js

@@ -0,0 +1,14 @@
+import { useEffect } from "react";
+export const useBodyClassName = (className, { enabled = true } = {}) => {
+    useEffect(() => {
+        if (enabled) {
+            document.body.classList.add(className);
+        }
+        else {
+            document.body.classList.remove(className);
+        }
+        return () => {
+            document.body.classList.remove(className);
+        };
+    }, [className, enabled]);
+};

package/src/hooks/useBoolean.d.ts

@@ -0,0 +1,8 @@
+export declare const useBoolean: (initialValue: boolean | (() => boolean)) => [
+    boolean,
+    {
+        on: () => void;
+        off: () => void;
+        toggle: () => void;
+    }
+];

package/src/hooks/useBoolean.js

@@ -0,0 +1,12 @@
+import { useMemo, useState } from "react";
+export const useBoolean = (initialValue) => {
+    const [value, setValue] = useState(initialValue);
+    return [
+        value,
+        useMemo(() => ({
+            on: () => setValue(true),
+            off: () => setValue(false),
+            toggle: () => setValue(prevValue => !prevValue),
+        }), []),
+    ];
+};

package/src/hooks/useComputedColors.d.ts

@@ -0,0 +1,10 @@
+type ComputedColors = {
+    original: string;
+    progress: string;
+    text: string;
+    hovered: string;
+    pressed: string;
+    disabled: string;
+};
+export declare const useComputedColors: (color: string) => ComputedColors;
+export {};

package/src/hooks/useComputedColors.js

@@ -0,0 +1,42 @@
+import { darken, getLuminance, meetsContrastGuidelines, tint } from "polished";
+import { invariantColors } from "../constants/design";
+import { identity, memoize } from "../utils/function";
+const isValidColor = (color) => {
+    try {
+        getLuminance(color);
+        return true;
+    }
+    catch (error) {
+        return false;
+    }
+};
+const getComputedColors = (color) => {
+    const safeColor = isValidColor(color) ? color : invariantColors.gray; // fallback
+    const luminance = getLuminance(safeColor);
+    if (luminance <= 0.75) {
+        return {
+            original: safeColor,
+            progress: safeColor,
+            text: invariantColors.white,
+            hovered: tint(0.2, safeColor),
+            pressed: darken(0.05, safeColor),
+            disabled: tint(0.5, safeColor),
+        };
+    }
+    const delta = 0.5 + (1 - luminance);
+    let text = darken(delta / 1.5, safeColor);
+    if (!meetsContrastGuidelines(safeColor, text).AALarge) {
+        text = darken(delta, safeColor);
+    }
+    return {
+        original: safeColor,
+        progress: text,
+        text,
+        hovered: darken(delta / 12, safeColor),
+        pressed: darken(delta / 6, safeColor),
+        disabled: safeColor, // update this with Clement's values
+    };
+};
+const memoizedGetComputedColors = memoize(getComputedColors, identity);
+// Not really a hook: we rely on lodash to perform cross-components memoization
+export const useComputedColors = (color) => memoizedGetComputedColors(color);

package/src/hooks/useDebounce.d.ts

@@ -0,0 +1 @@
+export declare const useDebounce: <T>(func: (arg: T) => void, duration: number) => (arg: T) => () => void;

package/src/hooks/useDebounce.js

@@ -0,0 +1,12 @@
+import { useCallback, useRef } from "react";
+import { isNotNullish } from "../utils/nullish";
+export const useDebounce = (func, duration) => {
+    const timeoutRef = useRef(undefined);
+    return useCallback((arg) => {
+        if (isNotNullish(timeoutRef.current)) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = window.setTimeout(func, duration, arg);
+        return () => clearTimeout(timeoutRef.current);
+    }, [func, duration]);
+};

package/src/hooks/useDisclosure.d.ts

@@ -0,0 +1,8 @@
+export declare const useDisclosure: (initialValue: boolean) => [
+    visible: boolean,
+    fns: {
+        open: () => void;
+        close: () => void;
+        toggle: () => void;
+    }
+];

package/src/hooks/useDisclosure.js

@@ -0,0 +1,12 @@
+import { useMemo, useState } from "react";
+export const useDisclosure = (initialValue) => {
+    const [value, setValue] = useState(initialValue);
+    return [
+        value,
+        useMemo(() => ({
+            open: () => setValue(true),
+            close: () => setValue(false),
+            toggle: () => setValue(prevValue => !prevValue),
+        }), []),
+    ];
+};

package/src/hooks/useFirstMountState.d.ts

@@ -0,0 +1 @@
+export declare const useFirstMountState: () => boolean;

package/src/hooks/useFirstMountState.js

@@ -0,0 +1,9 @@
+import { useRef } from "react";
+export const useFirstMountState = () => {
+    const isFirstMount = useRef(true);
+    if (isFirstMount.current) {
+        isFirstMount.current = false;
+        return true;
+    }
+    return isFirstMount.current;
+};

package/src/hooks/useForceableState.d.ts

@@ -0,0 +1 @@
+export declare const useForceableState: (forced: boolean) => [boolean, (value: boolean) => void];

package/src/hooks/useForceableState.js

@@ -0,0 +1,6 @@
+// https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/exports/Pressable/index.js#L220
+import { useState } from "react";
+export const useForceableState = (forced) => {
+    const [value, setValue] = useState(false);
+    return [value || forced, setValue];
+};

package/src/hooks/useHover.d.ts

@@ -0,0 +1,11 @@
+import { MutableRefObject } from "react";
+type HoverEventsConfig = {
+    contain?: boolean;
+    disabled?: boolean;
+    onHoverChange?: (bool: boolean) => void;
+    onHoverEnd?: (event: unknown) => void;
+    onHoverStart?: (event: unknown) => void;
+    onHoverUpdate?: (event: unknown) => void;
+};
+export declare const useHover: <T>(ref: MutableRefObject<T | null>, config: HoverEventsConfig) => void;
+export {};

package/src/hooks/useHover.js

@@ -0,0 +1,4 @@
+// https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/modules/useHover/index.js
+// @ts-expect-error
+import originaUseHover from "react-native-web/dist/cjs/modules/useHover";
+export const useHover = originaUseHover;

package/src/hooks/useInterval.d.ts

@@ -0,0 +1 @@
+export declare const useInterval: (handler: (id: number) => void, timeout: number) => void;

package/src/hooks/useInterval.js

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from "react";
+export const useInterval = (handler, timeout) => {
+    const handlerRef = useRef(handler);
+    useEffect(() => {
+        handlerRef.current = handler;
+    }, [handler]);
+    useEffect(() => {
+        const id = window.setInterval(() => handlerRef.current(id), timeout);
+        return () => window.clearInterval(id);
+    }, [timeout]);
+};

package/src/hooks/useLazyRef.d.ts

@@ -0,0 +1,2 @@
+import { MutableRefObject } from "react";
+export declare const useLazyRef: <T>(getInitialValue: () => T) => MutableRefObject<T>;

package/src/hooks/useLazyRef.js

@@ -0,0 +1,9 @@
+import { useRef } from "react";
+const UNSET = Symbol("unset");
+export const useLazyRef = (getInitialValue) => {
+    const ref = useRef(UNSET);
+    if (ref.current === UNSET) {
+        ref.current = getInitialValue();
+    }
+    return ref;
+};

package/src/hooks/useMergeRefs.d.ts

@@ -0,0 +1,2 @@
+import { MutableRefObject, Ref } from "react";
+export declare const useMergeRefs: <T>(...refs: Ref<T>[]) => MutableRefObject<T | null>;

package/src/hooks/useMergeRefs.js

@@ -0,0 +1,5 @@
+// https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/modules/useMergeRefs/index.js
+// https://github.com/theKashey/use-callback-ref (for typing)
+// @ts-expect-error
+import originalUseMergeRefs from "react-native-web/dist/cjs/modules/useMergeRefs";
+export const useMergeRefs = originalUseMergeRefs;

package/src/hooks/useNativeProp.d.ts

@@ -0,0 +1,2 @@
+import { MutableRefObject } from "react";
+export declare const useNativeProp: <T>(ref: MutableRefObject<T | null>, name: string, value: number | string | undefined) => void;

package/src/hooks/useNativeProp.js

@@ -0,0 +1,9 @@
+import { useLayoutEffect } from "react";
+import { isNotNullish } from "../utils/nullish";
+export const useNativeProp = (ref, name, value) => {
+    useLayoutEffect(() => {
+        if (isNotNullish(value) && ref.current instanceof Element) {
+            ref.current.setAttribute(name, String(value));
+        }
+    }, [ref, name, value]);
+};

package/src/hooks/useOutsideClick.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from "react";
+type Params = {
+    containerRef: RefObject<unknown>;
+    onClickOutside?: (event: MouseEvent | TouchEvent) => void;
+    onFocusOutside?: (event: FocusEvent) => void;
+};
+export declare const useOutsideClick: ({ containerRef, onClickOutside, onFocusOutside }: Params) => void;
+export {};

package/src/hooks/useOutsideClick.js

@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useRef } from "react";
+import { isNotNullish, isNullish } from "../utils/nullish";
+export const useOutsideClick = ({ containerRef, onClickOutside, onFocusOutside }) => {
+    const hasTouchStartedRef = useRef(false);
+    const isTargetInside = useCallback((event) => {
+        const target = event.target;
+        // NOTE: Let's be careful with the `instanceof` check if we're ever to render a portal to another window
+        return (isNotNullish(containerRef.current) &&
+            containerRef.current instanceof HTMLElement &&
+            containerRef.current.contains(target));
+    }, [containerRef]);
+    useEffect(() => {
+        if (isNullish(onClickOutside)) {
+            return;
+        }
+        const onTouchStart = (event) => {
+            if (!isTargetInside(event)) {
+                hasTouchStartedRef.current = true;
+            }
+        };
+        const onTouchEnd = (event) => {
+            if (!isTargetInside(event) && hasTouchStartedRef.current) {
+                onClickOutside?.(event);
+            }
+            hasTouchStartedRef.current = false;
+        };
+        document.addEventListener("mousedown", onTouchStart, true);
+        document.addEventListener("mouseup", onTouchEnd, true);
+        document.addEventListener("touchstart", onTouchStart, true);
+        document.addEventListener("touchend", onTouchEnd, true);
+        return () => {
+            document.removeEventListener("mousedown", onTouchStart, true);
+            document.removeEventListener("mouseup", onTouchEnd, true);
+            document.removeEventListener("touchstart", onTouchStart, true);
+            document.removeEventListener("touchend", onTouchEnd, true);
+        };
+    }, [isTargetInside, onClickOutside]);
+    useEffect(() => {
+        if (isNullish(onFocusOutside)) {
+            return;
+        }
+        const onFocusIn = (event) => {
+            if (!isTargetInside(event)) {
+                onFocusOutside?.(event);
+            }
+        };
+        // We use the `focusin` event so that we can intercept during the capturing phase
+        // see: https://developer.mozilla.org/en-US/docs/Web/API/Element/focusin_event
+        document.addEventListener("focusin", onFocusIn, true);
+        return () => {
+            document.removeEventListener("focusin", onFocusIn, true);
+        };
+    }, [isTargetInside, onFocusOutside]);
+};

package/src/hooks/usePersistedState.d.ts

@@ -0,0 +1 @@
+export declare const usePersistedState: <T>(key: string, defaultValue: T) => readonly [T, (state: T) => void];

package/src/hooks/usePersistedState.js

@@ -0,0 +1,21 @@
+import { Option, Result } from "@swan-io/boxed";
+import { useCallback, useState } from "react";
+export const usePersistedState = (key, defaultValue) => {
+    const [state, setState] = useState(() => {
+        return Result.fromExecution(() => localStorage.getItem(key))
+            .toOption()
+            .flatMap(Option.fromNullable)
+            .map(value => JSON.parse(value))
+            .getWithDefault(defaultValue);
+    });
+    const setPersistedState = useCallback((state) => {
+        setState(state);
+        try {
+            localStorage.setItem(key, JSON.stringify(state));
+        }
+        catch (err) {
+            // ignore
+        }
+    }, [key]);
+    return [state, setPersistedState];
+};

package/src/hooks/usePressEvents.d.ts

@@ -0,0 +1,31 @@
+import { MutableRefObject } from "react";
+import { GestureResponderEvent } from "react-native";
+type ClickEvent = unknown;
+type KeyboardEvent = unknown;
+type ResponderEvent = unknown;
+export type PressResponderConfig = {
+    cancelable?: boolean;
+    delayLongPress?: number;
+    delayPressEnd?: number;
+    delayPressStart?: number;
+    disabled?: boolean;
+    onLongPress?: (event: ResponderEvent) => void;
+    onPress?: (event: GestureResponderEvent) => void;
+    onPressChange?: (event: ResponderEvent) => void;
+    onPressEnd?: (event: ResponderEvent) => void;
+    onPressMove?: (event: ResponderEvent) => void;
+    onPressStart?: (event: ResponderEvent) => void;
+};
+type EventHandlers = {
+    onClick?: (event: ClickEvent) => void;
+    onContextMenu?: (event: ClickEvent) => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
+    onResponderGrant?: (event: ResponderEvent) => void;
+    onResponderMove?: (event: ResponderEvent) => void;
+    onResponderRelease?: (event: ResponderEvent) => void;
+    onResponderTerminate?: (event: ResponderEvent) => void;
+    onResponderTerminationRequest?: (event: ResponderEvent) => boolean;
+    onStartShouldSetResponder?: (event: ResponderEvent) => boolean;
+};
+export declare const usePressEvents: <T>(ref: MutableRefObject<T | null>, config: PressResponderConfig) => EventHandlers;
+export {};

package/src/hooks/usePressEvents.js

@@ -0,0 +1,4 @@
+// https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/modules/usePressEvents/index.js
+// @ts-expect-error
+import originalUsePressEvents from "react-native-web/dist/cjs/modules/usePressEvents";
+export const usePressEvents = originalUsePressEvents;

package/src/hooks/usePreviousValue.d.ts

@@ -0,0 +1 @@
+export declare const usePreviousValue: <T>(value: T) => T;

package/src/hooks/usePreviousValue.js

@@ -0,0 +1,8 @@
+import { useEffect, useRef } from "react";
+export const usePreviousValue = (value) => {
+    const previousRef = useRef(value);
+    useEffect(() => {
+        previousRef.current = value;
+    }, [value]);
+    return previousRef.current;
+};

package/src/hooks/useResponsive.d.ts

@@ -0,0 +1,7 @@
+export declare const useResponsive: (breakpoint?: number | undefined) => {
+    desktop: boolean;
+    media: <T>(values: {
+        mobile: T;
+        desktop?: T | undefined;
+    }) => T;
+};

package/src/hooks/useResponsive.js

@@ -0,0 +1,20 @@
+// Based on https://github.com/necolas/react-native-web/blob/0.17.7/packages/react-native-web/src/exports/useWindowDimensions/index.js
+import { useCallback, useSyncExternalStore } from "react";
+import { Dimensions } from "react-native";
+import { isNotNullish } from "../utils/nullish";
+const BREAKPOINT = 992;
+const isDesktop = ({ width }, breakpoint) => width >= breakpoint;
+export const useResponsive = (breakpoint = BREAKPOINT) => {
+    const desktop = useSyncExternalStore(onStoreChange => {
+        const subscription = Dimensions.addEventListener("change", ({ window }) => {
+            if (isNotNullish(window)) {
+                onStoreChange();
+            }
+        });
+        return () => {
+            subscription.remove();
+        };
+    }, () => isDesktop(Dimensions.get("window"), breakpoint));
+    const media = useCallback((values) => desktop ? values.desktop ?? values.mobile : values.mobile, [desktop]);
+    return { desktop, media };
+};

package/src/hooks/useUpdateEffect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from "react";
+export declare const useUpdateEffect: typeof useEffect;

package/src/hooks/useUpdateEffect.js

@@ -0,0 +1,10 @@
+import { useEffect } from "react";
+import { useFirstMountState } from "./useFirstMountState";
+export const useUpdateEffect = (effect, deps) => {
+    const isFirstMount = useFirstMountState();
+    useEffect(() => {
+        if (!isFirstMount) {
+            return effect();
+        }
+    }, deps); // eslint-disable-line react-hooks/exhaustive-deps
+};

package/src/hooks/useUrqlMutation.d.ts

@@ -0,0 +1,4 @@
+import { AsyncData, Future, Result } from "@swan-io/boxed";
+import { DocumentNode } from "graphql";
+import { AnyVariables, CombinedError, TypedDocumentNode } from "urql";
+export declare const useUrqlMutation: <Data, Variables extends AnyVariables>(query: string | DocumentNode | TypedDocumentNode<Data, Variables>) => readonly [AsyncData<Result<Data, Error>>, (input: Variables) => Future<Result<Data, Error | CombinedError>>];

package/src/hooks/useUrqlMutation.js

@@ -0,0 +1,30 @@
+import { AsyncData, Future, Result } from "@swan-io/boxed";
+import { useCallback, useMemo } from "react";
+import { CombinedError, useMutation } from "urql";
+import { isNotNullish, isNullish } from "../utils/nullish";
+const toResult = ({ data, error, }) => {
+    if (isNotNullish(error)) {
+        return Result.Error(error);
+    }
+    if (isNullish(data)) {
+        return Result.Error(new CombinedError({ networkError: new Error("No Content") }));
+    }
+    return Result.Ok(data);
+};
+export const useUrqlMutation = (query) => {
+    const [{ fetching, data, error }, execute] = useMutation(query);
+    return [
+        useMemo(() => {
+            if (fetching) {
+                return AsyncData.Loading();
+            }
+            if (isNullish(data) && isNullish(error)) {
+                return AsyncData.NotAsked();
+            }
+            return AsyncData.Done(toResult({ data, error }));
+        }, [fetching, data, error]),
+        useCallback((input) => Future.fromPromise(execute(input))
+            .mapError(error => error) // Only used to cast error
+            .mapResult(toResult), [execute]),
+    ];
+};

package/src/hooks/useUrqlQuery.d.ts

@@ -0,0 +1,19 @@
+import { AsyncData, Result } from "@swan-io/boxed";
+import { DependencyList } from "react";
+import { AnyVariables, UseQueryArgs } from "urql";
+type Query<Data> = {
+    data: AsyncData<Result<Data, Error>>;
+    nextData: AsyncData<Result<Data, Error>>;
+    isForceReloading: boolean;
+    reload: () => void;
+};
+export declare const useUrqlQuery: <Data, Variables extends AnyVariables>(args: UseQueryArgs<Variables, Data>, dependencyList: DependencyList) => Query<Data>;
+type PaginatedQuery<Data> = {
+    data: AsyncData<Result<Data, Error>>;
+    nextData: AsyncData<Result<Data, Error>>;
+    isForceReloading: boolean;
+    reload: () => void;
+    setAfter: (cursor: string | undefined) => void;
+};
+export declare const useUrqlPaginatedQuery: <Data, Variables extends AnyVariables>(args: UseQueryArgs<Variables, Data>, dependencyList: DependencyList) => PaginatedQuery<Data>;
+export {};

package/src/hooks/useUrqlQuery.js

@@ -0,0 +1,73 @@
+import { AsyncData, Result } from "@swan-io/boxed";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useQuery } from "urql";
+import { isNotNullish, isNullish } from "../utils/nullish";
+const NO_SUSPENSE_CONTEXT = { suspense: false };
+export const useUrqlQuery = (args, dependencyList) => {
+    const [haveParamsChanged, setHaveParamsChanged] = useState(false);
+    const [isForceReloading, setIsForceReloading] = useState(false);
+    const [{ data, fetching, error }, reexecute] = useQuery({
+        ...args,
+        context: NO_SUSPENSE_CONTEXT,
+    });
+    const reload = useCallback(() => {
+        setIsForceReloading(true);
+        reexecute();
+    }, [reexecute]);
+    useEffect(() => {
+        setHaveParamsChanged(true);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, dependencyList);
+    useEffect(() => {
+        if (!fetching) {
+            setHaveParamsChanged(false);
+            setIsForceReloading(false);
+        }
+    }, [fetching]);
+    const okResult = useMemo(() => AsyncData.Done(Result.Ok(data)), [data]);
+    const errorResult = useMemo(() => AsyncData.Done(Result.Error(error)), [error]);
+    const shouldResetState = isForceReloading || haveParamsChanged;
+    if (((isNullish(data) && isNullish(error)) || shouldResetState) && fetching) {
+        return {
+            data: AsyncData.Loading(),
+            nextData: AsyncData.Loading(),
+            isForceReloading,
+            reload,
+        };
+    }
+    if (isNotNullish(error)) {
+        return {
+            data: errorResult,
+            nextData: errorResult,
+            isForceReloading,
+            reload,
+        };
+    }
+    if (isNotNullish(data)) {
+        return {
+            data: okResult,
+            nextData: fetching ? AsyncData.Loading() : okResult,
+            isForceReloading,
+            reload,
+        };
+    }
+    return {
+        data: AsyncData.NotAsked(),
+        nextData: AsyncData.NotAsked(),
+        isForceReloading,
+        reload,
+    };
+};
+export const useUrqlPaginatedQuery = (args, dependencyList) => {
+    const [after, setAfter] = useState(undefined);
+    const { data, nextData, isForceReloading, reload: originalReload, } = useUrqlQuery({ ...args, variables: { ...args.variables, after } }, dependencyList);
+    useEffect(() => {
+        setAfter(undefined);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, dependencyList);
+    const reload = useCallback(() => {
+        setAfter(undefined);
+        originalReload();
+    }, [originalReload]);
+    return { data, nextData, isForceReloading, reload, setAfter };
+};

package/src/state/toasts.d.ts

@@ -0,0 +1,21 @@
+import { Animated } from "react-native";
+import { ControllableTimeout } from "../utils/timer";
+export type ToastVariant = "success" | "info" | "warning" | "error";
+type ToastContent = {
+    variant: ToastVariant;
+    title: string;
+    description?: string;
+    autoClose?: boolean;
+};
+type Toast = {
+    uid: string;
+    variant: ToastVariant;
+    title: string;
+    description?: string;
+    progress?: Animated.Value;
+    timeout?: ControllableTimeout;
+};
+export declare const useToasts: () => Toast[];
+export declare const hideToast: (uid: string) => void;
+export declare const showToast: ({ variant, title, description, autoClose }: ToastContent) => string;
+export {};

package/src/state/toasts.js

@@ -0,0 +1,61 @@
+import { atom, useAtom } from "react-atomic-state";
+import { Animated, Easing } from "react-native";
+import { createControllableTimeout } from "../utils/timer";
+const toasts = atom([]);
+export const useToasts = () => useAtom(toasts);
+export const hideToast = (uid) => {
+    const toast = toasts.get().find(toast => toast.uid === uid);
+    if (!toast) {
+        return;
+    }
+    toast.timeout?.clear();
+    toast.progress?.stopAnimation();
+    toasts.set(toasts => toasts.filter(toast => toast.uid !== uid));
+};
+export const showToast = ({ variant, title, description, autoClose }) => {
+    const uid = `${variant} - ${title} - ${description ?? ""}`;
+    const toast = toasts.get().find(toast => toast.uid === uid);
+    if (toast != null) {
+        if (toast.timeout && toast.progress) {
+            toast.timeout.clear();
+            Animated.timing(toast.progress, {
+                duration: 100,
+                easing: Easing.linear,
+                toValue: 1,
+                useNativeDriver: false,
+            }).start(() => {
+                toast.timeout?.reset();
+            });
+        }
+        return uid;
+    }
+    // by default, only info and success toasts are auto-closing
+    const isAutoClosingToast = autoClose != null ? autoClose : variant === "info" || variant === "success";
+    const progress = isAutoClosingToast ? new Animated.Value(1) : undefined;
+    const timeout = progress
+        ? createControllableTimeout({
+            duration: 10000,
+            onStart: duration => {
+                Animated.timing(progress, {
+                    duration,
+                    easing: Easing.linear,
+                    toValue: 0,
+                    useNativeDriver: false,
+                }).start();
+            },
+            onReset: duration => {
+                Animated.timing(progress, {
+                    duration,
+                    easing: Easing.linear,
+                    toValue: 0,
+                    useNativeDriver: false,
+                }).start();
+            },
+            onEnd: () => {
+                hideToast(uid);
+            },
+        })
+        : undefined;
+    toasts.set(toasts => [{ uid, variant, title, description, progress, timeout }, ...toasts]);
+    return uid;
+};

package/src/utils/__tests__/array.test.d.ts

@@ -0,0 +1 @@
+export {};