@swan-io/lake 4.10.1 → 5.0.1

package/src/components/Tooltip.d.ts

@@ -1,18 +0,0 @@
-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

@@ -1,160 +0,0 @@
-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) => {
-    var _a, _b;
-    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 === null || onShow === void 0 ? void 0 : onShow() : onHide === null || onHide === void 0 ? void 0 : 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 = (_b = (_a = state === null || state === void 0 ? void 0 : state.modifiersData.preventOverflow) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 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 === null || onHide === void 0 ? void 0 : 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 === null || update === void 0 ? void 0 : 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 === null || state === void 0 ? void 0 : state.placement) === "top" && styles.baseTop,
-                    (state === null || state === void 0 ? void 0 : 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, { role: "none", style: [
-                            styles.arrowContainer,
-                            (state === null || state === void 0 ? void 0 : state.placement) === "top" && styles.arrowContainerTop,
-                            (state === null || state === void 0 ? void 0 : state.placement) === "bottom" && styles.arrowContainerBottom,
-                            {
-                                transform: `translateX(${-overflowOffset}px) rotate(${(state === null || state === void 0 ? void 0 : state.placement) === "bottom" ? "180deg" : "0deg"})`,
-                            },
-                        ], children: _jsx(View, { style: styles.arrow }) })] }) }) }));
-}));

package/src/constants/colors.d.ts

@@ -1,42 +0,0 @@
-export declare const colors: {
-    transparent: string;
-    black: string;
-    white: string;
-    gray: {
-        3: string;
-        10: string;
-        20: string;
-        30: string;
-        40: string;
-        50: string;
-        60: string;
-        70: string;
-        80: string;
-        90: string;
-        100: string;
-    };
-    purple: {
-        3: string;
-        10: string;
-        30: string;
-        50: string;
-        80: string;
-        100: string;
-    };
-    green: {
-        3: string;
-        10: string;
-        100: string;
-    };
-    orange: {
-        3: string;
-        10: string;
-        100: string;
-    };
-    red: {
-        3: string;
-        10: string;
-        100: string;
-    };
-};
-export declare const defaultAccentColor: string;

package/src/constants/colors.js

@@ -1,42 +0,0 @@
-export const colors = {
-    transparent: "transparent",
-    black: "#000000",
-    white: "#ffffff",
-    gray: {
-        3: "#f7f8f8",
-        10: "#e7e8e8",
-        20: "#d0d1d1",
-        30: "#b8baba",
-        40: "#a1a3a3",
-        50: "#898c8c",
-        60: "#727575",
-        70: "#5a5e5e",
-        80: "#434747",
-        90: "#2b2f30",
-        100: "#14191a",
-    },
-    purple: {
-        3: "#faf9fc",
-        10: "#efebf7",
-        30: "#cfc5e8",
-        50: "#b09fda",
-        80: "#8166c4",
-        100: "#6240b5",
-    },
-    green: {
-        3: "#f8fdfb",
-        10: "#e8faf2",
-        100: "#1fd286",
-    },
-    orange: {
-        3: "#fffcf7",
-        10: "#fff5e5",
-        100: "#ff9f00",
-    },
-    red: {
-        3: "#fef8f9",
-        10: "#fde9ec",
-        100: "#f12b43",
-    },
-};
-export const defaultAccentColor = colors.purple[100];

package/src/constants/typography.d.ts

@@ -1,26 +0,0 @@
-import { TextStyle } from "react-native";
-export declare const typography: {
-    fontWeights: {
-        book: "400";
-        demi: "600";
-    };
-    lineHeights: {
-        title: number;
-        body: number;
-        input: number;
-    };
-    interFont: {
-        fontFamily: string;
-        letterSpacing: number;
-    };
-    baseStyle: {
-        color: string;
-        fontWeight: "400";
-        lineHeight: number;
-        fontFamily: string;
-        letterSpacing: number;
-    };
-    bodyLarge: TextStyle;
-    bodySmall: TextStyle;
-    caption: TextStyle;
-};

package/src/constants/typography.js

@@ -1,54 +0,0 @@
-import { colors } from "./colors";
-const fontWeights = {
-    book: "400",
-    demi: "600",
-};
-const lineHeights = {
-    title: "1.25",
-    body: "1.65",
-    input: "1.25",
-};
-const interFont = {
-    fontFamily: [
-        "Inter",
-        "-apple-system",
-        "system-ui",
-        "BlinkMacSystemFont",
-        "Segoe UI",
-        "Helvetica",
-        "Arial",
-        "sans-serif",
-        "Apple Color Emoji",
-        "Segoe UI Emoji",
-        "Segoe UI Symbol",
-        "Noto Color Emoji",
-    ].join(","),
-    // Computed by Inter dynamic metrics tool
-    letterSpacing: "-0.011em",
-};
-// TODO: Create a styled <Text /> component with size: "small" | "large"
-const baseStyle = {
-    ...interFont,
-    color: colors.gray[90],
-    fontWeight: fontWeights.book,
-    lineHeight: lineHeights.body,
-};
-const bodyLarge = { ...baseStyle, fontSize: 16 };
-const bodySmall = { ...baseStyle, fontSize: 14 };
-const caption = {
-    ...baseStyle,
-    fontSize: 13,
-    fontWeight: fontWeights.demi,
-    letterSpacing: "0.011em",
-    textTransform: "uppercase",
-};
-export const typography = {
-    fontWeights,
-    lineHeights,
-    interFont,
-    // TODO: Delete all this exports
-    baseStyle,
-    bodyLarge,
-    bodySmall,
-    caption,
-};