@swan-io/lake 1.0.0

package/src/components/TabView.js

@@ -0,0 +1,398 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useLocation } from "@swan-io/chicane";
+import { Box } from "@swan-io/lake/src/components/Box";
+import { FocusTrap } from "@swan-io/lake/src/components/FocusTrap";
+import { Icon } from "@swan-io/lake/src/components/Icon";
+import { LakeText } from "@swan-io/lake/src/components/LakeText";
+import { Link } from "@swan-io/lake/src/components/Link";
+import { PressableText } from "@swan-io/lake/src/components/Pressable";
+import { Space } from "@swan-io/lake/src/components/Space";
+import { TransitionView } from "@swan-io/lake/src/components/TransitionView";
+import { animations, backgroundColor, colors, negativeSpacings, radii, shadows, spacings, texts, } from "@swan-io/lake/src/constants/design";
+import { useHover } from "@swan-io/lake/src/hooks/useHover";
+import { useMergeRefs } from "@swan-io/lake/src/hooks/useMergeRefs";
+import { isNotNullish, isNullish } from "@swan-io/lake/src/utils/nullish";
+import { forwardRef, Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { match, P } from "ts-pattern";
+import { noop } from "../utils/function";
+const styles = StyleSheet.create({
+    container: {
+        borderBottomWidth: 1,
+        borderBottomColor: colors.gray[100],
+        zIndex: 10,
+    },
+    link: {
+        ...texts.medium,
+        position: "relative",
+        color: colors.gray[700],
+        height: 40,
+        whiteSpace: "nowrap",
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    activeLink: {
+        color: colors.current.primary,
+        boxShadow: `inset 0 -2px ${colors.gray[700]}`,
+    },
+    hoveredLink: {
+        boxShadow: `inset 0 -2px ${colors.gray[700]}`,
+    },
+    underline: {
+        position: "absolute",
+        bottom: 0,
+        height: 2,
+        width: 1,
+        backgroundColor: colors.current.primary,
+    },
+    animatedUnderline: {
+        transformOrigin: "0 0",
+        transition: "200ms ease-in-out transform",
+    },
+    placeholder: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        visibility: "hidden",
+        flexDirection: "row",
+        alignItems: "flex-end",
+        overflow: "hidden",
+    },
+    count: {
+        ...texts.smallRegular,
+        color: colors.current.primary,
+        backgroundColor: colors.current[50],
+        borderColor: colors.current[100],
+        borderWidth: 1,
+        borderRadius: radii[4],
+        paddingHorizontal: spacings[4],
+        minWidth: spacings[24],
+        display: "inline-block",
+        textAlign: "center",
+    },
+    dropdownHandleContainer: {
+        alignItems: "center",
+        justifyContent: "center",
+        alignSelf: "stretch",
+    },
+    dropdownPlacement: {
+        position: "absolute",
+        right: 0,
+        top: "100%",
+    },
+    dropdown: {
+        position: "absolute",
+        right: 0,
+        top: "100%",
+        backgroundColor: backgroundColor.accented,
+        borderRadius: radii[8],
+        boxShadow: shadows.modal,
+        paddingVertical: spacings[8],
+    },
+    dropdownLink: {
+        ...texts.regular,
+        paddingHorizontal: spacings[16],
+        paddingVertical: spacings[8],
+        whiteSpace: "nowrap",
+    },
+    dropdownLinkTextHovered: {
+        backgroundColor: colors.gray[50],
+    },
+    dropdownLinkTextActive: {
+        boxShadow: `inset 3px 0 ${colors.current.primary}`,
+        color: colors.current.primary,
+    },
+    separator: {
+        position: "absolute",
+        top: 0,
+        left: negativeSpacings[16],
+        bottom: 0,
+        width: 1,
+        backgroundColor: colors.gray[100],
+    },
+});
+const Dropdown = ({ tabs, onHoverStart, onHoverEnd, onLinkFocus, onLinkBlur, onLinkPress, }) => {
+    const containerRef = useRef(null);
+    useHover(containerRef, {
+        onHoverStart,
+        onHoverEnd,
+    });
+    return (_jsx(View, { accessibilityRole: "menu", style: styles.dropdown, ref: containerRef, children: tabs.map(({ url, label }) => {
+            return (_jsx(Link, { to: url, onFocus: onLinkFocus, onBlur: onLinkBlur, onPress: onLinkPress, accessibilityRole: "menuitem", ariaCurrentValue: "location", style: ({ active, hovered }) => [
+                    styles.dropdownLink,
+                    active && styles.dropdownLinkTextActive,
+                    hovered && styles.dropdownLinkTextHovered,
+                ], children: label }, url));
+        }) }));
+};
+const SHOULD_AUTOFOCUS = new Set(["ForcedOpen", "OpenFromFocus"]);
+const SHOULD_OPEN = new Set(["Open", "ForcedOpen", "OpenFromFocus"]);
+const SHOULD_LOCK_FOCUS = new Set(["ForcedOpen"]);
+const DropdownItems = forwardRef(({ tabs, otherLabel, currentUrl }, ref) => {
+    const [openingStatus, dispatch] = useReducer((state, action) => {
+        const input = [action, state];
+        return match(input)
+            .with(["ForceToggle", "Closed"], ["ForceToggle", "Open"], ["ForceToggle", "ForcedClosed"], () => "ForcedOpen")
+            .with(["ForceToggle", "OpenFromFocus"], ["ForceToggle", "ForcedOpen"], () => "ForcedClosed")
+            .with(["ForceClose", P.any], () => "ForcedClosed")
+            .with(["FocusHandle", "ForcedClosed"], () => "Closed")
+            .with(["Open", "ForcedOpen"], ["FocusHandle", "ForcedOpen"], ["Close", "ForcedOpen"], () => "ForcedOpen")
+            .with(["Open", P.any], () => "Open")
+            .with(["FocusHandle", P.any], () => "OpenFromFocus")
+            .with(["Close", P.any], () => "Closed")
+            .exhaustive();
+    }, "Closed");
+    const timeoutRef = useRef(undefined);
+    const handleRef = useRef(null);
+    const containerRef = useRef(null);
+    const lastFocusTimeout = useRef(null);
+    const { onHandleFocus, onLinkFocus, onAnyBlur, onHoverStart, onHoverEnd, onPress, onPressOutside, onEscapeKey, } = useMemo(() => ({
+        onHandleFocus: (event) => {
+            if (isNullish(containerRef.current)) {
+                return;
+            }
+            lastFocusTimeout.current = Date.now();
+            const container = containerRef.current;
+            const focusEvent = event;
+            // Don't reopen if leaving
+            if (!container.contains(focusEvent.relatedTarget)) {
+                if (isNotNullish(timeoutRef.current)) {
+                    clearTimeout(timeoutRef.current);
+                }
+                dispatch("FocusHandle");
+            }
+        },
+        onLinkFocus: () => {
+            if (isNotNullish(timeoutRef.current)) {
+                clearTimeout(timeoutRef.current);
+            }
+            dispatch("Open");
+        },
+        onAnyBlur: () => {
+            if (isNotNullish(timeoutRef.current)) {
+                clearTimeout(timeoutRef.current);
+            }
+            timeoutRef.current = window.setTimeout(() => {
+                dispatch("Close");
+            }, 300);
+        },
+        onHoverStart: () => {
+            if (isNotNullish(timeoutRef.current)) {
+                clearTimeout(timeoutRef.current);
+            }
+            dispatch("Open");
+        },
+        onHoverEnd: () => {
+            if (isNotNullish(timeoutRef.current)) {
+                clearTimeout(timeoutRef.current);
+            }
+            timeoutRef.current = window.setTimeout(() => {
+                dispatch("Close");
+            }, 300);
+        },
+        onPress: () => {
+            if (lastFocusTimeout.current != null && Date.now() - lastFocusTimeout.current < 32) {
+                return;
+            }
+            if (isNotNullish(timeoutRef.current)) {
+                clearTimeout(timeoutRef.current);
+            }
+            dispatch("ForceToggle");
+        },
+        onPressOutside: (event) => {
+            if (isNotNullish(handleRef.current)) {
+                const handle = handleRef.current;
+                if (handle.contains(event.target)) {
+                    return;
+                }
+            }
+            if (isNotNullish(timeoutRef.current)) {
+                clearTimeout(timeoutRef.current);
+            }
+            // Only force closing in case the focus comes directly to the handle
+            // Then put it back to a regular closed state
+            dispatch("ForceClose");
+            timeoutRef.current = window.setTimeout(() => {
+                dispatch("Close");
+            }, 300);
+        },
+        onEscapeKey: () => {
+            if (isNotNullish(timeoutRef.current)) {
+                clearTimeout(timeoutRef.current);
+            }
+            dispatch("ForceClose");
+            timeoutRef.current = window.setTimeout(() => {
+                dispatch("Close");
+            }, 300);
+        },
+    }), []);
+    useEffect(() => {
+        return () => {
+            if (isNotNullish(timeoutRef.current)) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    const shouldOpen = SHOULD_OPEN.has(openingStatus);
+    const shouldAutoFocus = SHOULD_AUTOFOCUS.has(openingStatus);
+    const shouldLockFocus = SHOULD_LOCK_FOCUS.has(openingStatus);
+    useHover(handleRef, {
+        onHoverStart,
+        onHoverEnd,
+    });
+    const mergedRef = useMergeRefs(containerRef, ref);
+    const activeTab = tabs.find(({ url }) => url === currentUrl);
+    return (_jsxs(View, { style: styles.dropdownHandleContainer, ref: mergedRef, children: [_jsxs(PressableText, { ref: handleRef, accessibilityRole: "button", accessibilityExpanded: shouldOpen, accessibilityHasPopup: "true", onFocus: onHandleFocus, onBlur: onAnyBlur, onPress: onPress, style: ({ hovered }) => [
+                    styles.link,
+                    isNotNullish(activeTab) ? styles.activeLink : hovered ? styles.hoveredLink : null,
+                ], children: [_jsx(Text, { children: otherLabel }), _jsx(Space, { width: 8 }), _jsx(Text, { style: styles.count, children: tabs.length }), _jsx(Space, { width: 4 }), _jsx(Icon, { name: "chevron-down-filled", size: 12 })] }), _jsx(TransitionView, { ...animations.fadeAndSlideInFromBottom, style: styles.dropdownPlacement, children: shouldOpen ? (_jsx(FocusTrap, { autoFocus: shouldAutoFocus, focusLock: shouldLockFocus, returnFocus: shouldLockFocus, onClickOutside: onPressOutside, onEscapeKey: shouldLockFocus ? onEscapeKey : undefined, children: _jsx(Dropdown, { tabs: tabs, onHoverStart: onHoverStart, onHoverEnd: onHoverEnd, onLinkFocus: onLinkFocus, onLinkBlur: onAnyBlur, onLinkPress: onEscapeKey }) })) : null })] }));
+});
+export const TabView = ({ tabs, otherLabel, hideIfSingleItem = true }) => {
+    const containerRef = useRef(null);
+    const placeholderRef = useRef(null);
+    const otherPlaceholderRef = useRef(null);
+    const linksRefs = useRef({});
+    const placeholderLinkRef = useRef({});
+    const [{ left, width }, setUnderlinePosition] = useState({ left: 0, width: 0 });
+    const [hasRendered, setHasRendered] = useState(false);
+    const [[kept, collapsed], setKeptCollapsed] = useState([[], []]);
+    const location = useLocation();
+    const { path } = location;
+    const currentLocationURL = location.toString();
+    useEffect(() => {
+        if (isNotNullish(linksRefs.current)) {
+            const values = Object.entries(linksRefs.current);
+            const container = containerRef.current;
+            for (const [link, node] of values) {
+                if ("/" + path.join("/") === link && isNotNullish(node) && isNotNullish(container)) {
+                    node.measureLayout(container, (left, _, width) => {
+                        setUnderlinePosition({ left, width });
+                    }, noop);
+                    return;
+                }
+            }
+        }
+        setUnderlinePosition({ left: 0, width: 0 });
+    }, [path, kept, collapsed]);
+    useEffect(() => {
+        setHasRendered(width > 0);
+    }, [width]);
+    const reajustLayout = useCallback(({ width }) => {
+        const items = tabs.map(tab => {
+            if (placeholderLinkRef.current) {
+                const ref = placeholderLinkRef.current[tab.url];
+                if (isNotNullish(ref)) {
+                    const element = ref;
+                    const width = element.getBoundingClientRect().width;
+                    return { tab, width: width + 32 };
+                }
+                else {
+                    return { tab, width: 0 };
+                }
+            }
+            else {
+                return { tab, width: 0 };
+            }
+        });
+        const kept = [];
+        const collapsed = [];
+        let cummulatedWidth = 0;
+        items.forEach(item => {
+            cummulatedWidth += item.width;
+            if (cummulatedWidth < width) {
+                kept.push({ ...item.tab, width: item.width });
+            }
+            else {
+                if (currentLocationURL.startsWith(item.tab.url)) {
+                    while (kept.length !== 0 &&
+                        kept.reduce((acc, item) => acc + item.width, 0) + (item.width + 16) >= width) {
+                        const last = kept.pop();
+                        if (isNotNullish(last)) {
+                            collapsed.unshift(last);
+                            cummulatedWidth -= last.width;
+                        }
+                    }
+                    kept.push({ ...item.tab, width: item.width });
+                }
+                else {
+                    collapsed.push({ ...item.tab, width: item.width });
+                }
+            }
+        });
+        const otherLabelRef = otherPlaceholderRef.current;
+        let otherLabelWidth = 100;
+        if (isNotNullish(otherLabelRef)) {
+            const otherLabel = otherLabelRef;
+            otherLabelWidth = otherLabel.getBoundingClientRect().width;
+        }
+        const activeInKeptIndex = kept.findIndex(item => currentLocationURL.startsWith(item.url));
+        if (activeInKeptIndex !== -1) {
+            const activeInKept = kept[activeInKeptIndex];
+            const activeInKeptWidth = activeInKept?.width ?? 0;
+            const restInKept = [
+                ...kept.slice(0, activeInKeptIndex),
+                ...kept.slice(activeInKeptIndex + 1),
+            ];
+            while (restInKept.length !== 0 &&
+                restInKept.reduce((acc, item) => acc + item.width, 0) +
+                    activeInKeptWidth +
+                    (collapsed.length >= 1 ? otherLabelWidth : 0) >=
+                    width) {
+                const last = restInKept.pop();
+                if (isNotNullish(last)) {
+                    collapsed.unshift(last);
+                }
+            }
+            const finalKept = [
+                ...restInKept.slice(0, activeInKeptIndex),
+                ...(activeInKept != null ? [activeInKept] : []),
+                ...restInKept.slice(activeInKeptIndex),
+            ];
+            setKeptCollapsed([finalKept, collapsed]);
+        }
+        else {
+            setKeptCollapsed([kept, collapsed]);
+        }
+    }, [tabs, currentLocationURL]);
+    const onLayout = useCallback(({ target, nativeEvent: { layout: { width }, }, }) => {
+        reajustLayout({ container: target, width });
+    }, [reajustLayout]);
+    useLayoutEffect(() => {
+        const ref = placeholderRef.current;
+        if (ref) {
+            const element = ref;
+            const width = element.getBoundingClientRect().width;
+            reajustLayout({ container: element, width });
+        }
+    }, [reajustLayout]);
+    if (tabs.length <= 1 && hideIfSingleItem) {
+        return null;
+    }
+    return (_jsxs(Box, { alignItems: "center", direction: "row", accessibilityRole: "tablist", ref: containerRef, style: styles.container, children: [_jsxs(View, { style: styles.placeholder, accessibilityHidden: true, ref: placeholderRef, pointerEvents: "none", onLayout: onLayout, children: [tabs.map(({ label, url, icon, count }) => (_jsxs(Fragment, { children: [_jsxs(Link, { ref: ref => {
+                                    if (placeholderLinkRef.current) {
+                                        placeholderLinkRef.current[url] = ref;
+                                    }
+                                }, to: url, style: ({ active, hovered }) => [
+                                    styles.link,
+                                    active ? styles.activeLink : hovered ? styles.hoveredLink : null,
+                                ], children: [isNotNullish(icon) && (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, size: 16, color: "currentColor" }), _jsx(Space, { width: 8 })] })), _jsx(Text, { children: label }), count != null ? (_jsxs(_Fragment, { children: [_jsx(Space, { width: 8 }), _jsx(Text, { style: styles.count, children: count })] })) : null] }), _jsx(Space, { width: 32 })] }, url))), _jsxs(LakeText, { ref: otherPlaceholderRef, style: styles.link, children: [_jsx(Text, { children: otherLabel }), _jsx(Space, { width: 8 }), _jsx(Text, { style: styles.count, children: tabs.length }), _jsx(Space, { width: 4 }), _jsx(Icon, { name: "chevron-down-filled", size: 12 })] })] }), kept.map(({ label, url, icon, withSeparator, count }) => (_jsxs(Fragment, { children: [_jsxs(Link, { accessibilityRole: "tab", ref: ref => {
+                            if (linksRefs.current) {
+                                linksRefs.current[url] = ref;
+                            }
+                        }, to: url, style: ({ active, hovered }) => [
+                            styles.link,
+                            active ? styles.activeLink : hovered ? styles.hoveredLink : null,
+                        ], children: [withSeparator === true && _jsx(View, { style: styles.separator, accessibilityRole: "none" }), isNotNullish(icon) && (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, size: 16, color: "currentColor" }), _jsx(Space, { width: 8 })] })), _jsx(Text, { children: label }), count != null ? (_jsxs(_Fragment, { children: [_jsx(Space, { width: 8 }), _jsx(Text, { style: styles.count, children: count })] })) : null] }), _jsx(Space, { width: 32 })] }, url))), collapsed.length > 0 ? (_jsx(DropdownItems, { ref: ref => {
+                    collapsed.forEach(item => {
+                        if (linksRefs.current) {
+                            linksRefs.current[item.url] = ref;
+                        }
+                    });
+                }, tabs: collapsed, currentUrl: currentLocationURL, otherLabel: otherLabel })) : null, hasRendered && (_jsx(View, { style: [
+                    styles.underline,
+                    styles.animatedUnderline,
+                    { transform: [{ translateX: left }, { scaleX: width }] },
+                ] }))] }));
+};

package/src/components/Table.d.ts

@@ -0,0 +1,34 @@
+import { ComponentProps, ComponentType, ReactElement, ReactNode } from "react";
+import { FlatList, StyleProp, ViewStyle } from "react-native";
+/**
+ * `fixed` set the column width in px
+ * `percentage` set the column with in remaining percentage (by using flex-basis)
+ */
+type ColumnWidth = {
+    type: "fixed";
+    value: number;
+} | {
+    type: "remainingPercent";
+    value: number;
+};
+export type TableColumn<T> = {
+    key: string;
+    width: ColumnWidth;
+    label: string;
+    render: (item: T) => ReactNode;
+};
+type Props<T> = {
+    keyExtractor?: (item: T, index: number) => string;
+    columns: TableColumn<T>[];
+    data: T[];
+    hideColumns?: boolean;
+    ListEmptyComponent?: ComponentType<unknown> | ReactElement | null;
+    ListFooterComponent?: ComponentType<unknown> | ReactElement | null;
+    ListHeaderComponent?: ComponentType<unknown> | ReactElement | null;
+    onPressLine?: (item: T) => void;
+    isDisabledLine?: (item: T) => boolean;
+    onEndReached?: ComponentProps<typeof FlatList>["onEndReached"];
+    contentContainerStyle?: StyleProp<ViewStyle>;
+};
+export declare function Table<T>({ keyExtractor, columns, data, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, onPressLine, isDisabledLine, onEndReached, contentContainerStyle, hideColumns, }: Props<T>): JSX.Element;
+export {};

package/src/components/Table.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, } from "react";
+import { FlatList, Pressable, StyleSheet, Text, View } from "react-native";
+import { match } from "ts-pattern";
+import { colors } from "../constants/colors";
+import { commonStyles } from "../constants/commonStyles";
+import { typography } from "../constants/typography";
+import { Box } from "./Box";
+import { Separator } from "./Separator";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    content: {
+        flexGrow: 1,
+    },
+    header: {
+        height: 44,
+        paddingHorizontal: 16,
+    },
+    head: {
+        ...typography.bodySmall,
+        fontWeight: typography.fontWeights.demi,
+        color: colors.gray[100],
+    },
+    row: {
+        flexDirection: "row",
+        alignItems: "center",
+        height: 56,
+        paddingHorizontal: 16,
+        transitionDuration: "300ms",
+        transitionProperty: "background-color",
+    },
+    rowHover: {
+        backgroundColor: colors.gray[3],
+    },
+    rowPressed: {
+        opacity: 0.75,
+    },
+    text: {
+        ...typography.bodySmall,
+        color: colors.gray[80],
+    },
+});
+const getColumnStyle = (width) => {
+    return match(width.type)
+        .with("remainingPercent", () => ({
+        flexBasis: `${width.value}%`,
+        flexShrink: 1,
+    }))
+        .with("fixed", () => ({
+        width: width.value,
+        flexShrink: 0,
+    }))
+        .exhaustive();
+};
+const isText = (node) => ["string", "number"].includes(typeof node);
+export function Table({ keyExtractor, columns, data, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, onPressLine, isDisabledLine, onEndReached, contentContainerStyle, hideColumns = false, }) {
+    // Add width checker which run only during development
+    if (process.env.NODE_ENV === "development") {
+        // We use useEffect to avoid spaming development console with warning message
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useEffect(() => {
+            const columnsInPercent = columns.filter(({ width }) => width.type === "remainingPercent");
+            const percentWidth = columnsInPercent.reduce((acc, { width }) => acc + width.value, 0);
+            if (process.env.NODE_ENV === "development" && percentWidth !== 100) {
+                console.warn(`Invalid Table width: total remaining width is ${percentWidth}, please check columns config where 'width.type' is 'remainingPercent'`);
+            }
+        }, [columns]);
+    }
+    return (_jsxs(View, { style: commonStyles.fill, children: [!hideColumns && (_jsx(Box, { direction: "row", alignItems: "center", style: styles.header, children: columns.map(({ key, width, label }, index) => (_jsxs(Fragment, { children: [index > 0 && _jsx(Space, { width: 4 }), _jsx(Text, { numberOfLines: 1, style: [styles.head, getColumnStyle(width)], children: label })] }, key))) })), _jsx(FlatList, { keyExtractor: keyExtractor, contentContainerStyle: StyleSheet.flatten([styles.content, contentContainerStyle]), accessibilityRole: "list", data: data, ListHeaderComponent: ListHeaderComponent, ListFooterComponent: ListFooterComponent, onEndReached: onEndReached, onEndReachedThreshold: 0.5, ItemSeparatorComponent: Separator, renderItem: ({ item }) => {
+                    return (_jsx(Pressable, { style: ({ hovered, pressed }) => [
+                            styles.row,
+                            hovered && styles.rowHover,
+                            pressed && styles.rowPressed,
+                        ], disabled: !onPressLine || isDisabledLine?.(item) === true, onPress: () => onPressLine?.(item), children: columns.map(({ key, width, render }, index) => {
+                            const content = render(item);
+                            return (_jsxs(Fragment, { children: [index > 0 && _jsx(Space, { width: 4 }), _jsx(View, { style: getColumnStyle(width), children: isText(content) ? (_jsx(Text, { numberOfLines: 1, style: styles.text, children: content })) : (content) })] }, key));
+                        }) }));
+                }, ListEmptyComponent: ListEmptyComponent })] }));
+}

package/src/components/Tag.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement, ReactFragment, ReactText } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { ColorVariants } from "../constants/design";
+import { IconName } from "./Icon";
+type Props = {
+    children?: ReactElement | ReactText | ReactFragment;
+    label?: string;
+    icon?: IconName;
+    iconSize?: number;
+    size?: "small" | "large";
+    color?: ColorVariants;
+    onPressRemove?: () => void;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+};
+export declare const Tag: ({ children, label, color, size, icon, iconSize, accessibilityLabel, onPressRemove, style, }: Props) => JSX.Element;
+export {};

package/src/components/Tag.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pressable, StyleSheet, Text } from "react-native";
+import { colors, texts } from "../constants/design";
+import { isNotNullish, isNotNullishOrEmpty, isNullish } from "../utils/nullish";
+import { Box } from "./Box";
+import { Icon } from "./Icon";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    base: {
+        borderRadius: 4,
+        borderWidth: 1,
+        height: 28,
+        overflow: "hidden",
+    },
+    onlyIcon: {
+        height: 28,
+        width: 28,
+        padding: 0,
+    },
+    larger: {
+        paddingHorizontal: 4,
+        height: 40,
+    },
+    label: {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+        borderRightWidth: 0,
+    },
+    text: {
+        ...texts.smallMedium,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        paddingHorizontal: 8,
+    },
+    dismiss: {
+        justifyContent: "center",
+        height: "100%",
+        paddingHorizontal: 8,
+        borderLeftWidth: 1,
+    },
+});
+export const Tag = ({ children, label, color = "gray", size = "small", icon, iconSize = 16, accessibilityLabel, onPressRemove, style, }) => {
+    const hasRemoveButton = isNotNullish(onPressRemove);
+    const hasLabel = isNotNullishOrEmpty(label);
+    const hasOnlyIcon = isNullish(children) && isNotNullish(icon);
+    const { primary, ...variant } = colors[color];
+    const tint50 = variant[50];
+    const tint100 = variant[100];
+    const tint200 = variant[200];
+    return (_jsxs(Box, { direction: "row", children: [hasLabel && (_jsx(Box, { alignItems: "center", direction: "row", style: [
+                    styles.base,
+                    styles.label,
+                    size === "large" && styles.larger,
+                    { backgroundColor: tint100, borderColor: tint200 },
+                ], children: _jsx(Text, { numberOfLines: 1, selectable: false, style: [styles.text, { color: primary }], children: label }) })), _jsxs(Box, { alignItems: "center", direction: "row", accessibilityLabel: accessibilityLabel, style: [
+                    styles.base,
+                    size === "large" && styles.larger,
+                    hasOnlyIcon && styles.onlyIcon,
+                    {
+                        backgroundColor: tint50,
+                        borderColor: tint200,
+                        ...(hasLabel && {
+                            borderLeftWidth: 0,
+                            borderTopLeftRadius: 0,
+                            borderBottomLeftRadius: 0,
+                        }),
+                    },
+                    style,
+                ], children: [_jsxs(Text, { numberOfLines: 1, style: [styles.text, hasOnlyIcon && styles.onlyIcon, { color: primary }], children: [icon && (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, color: primary, size: iconSize }), isNotNullish(children) && _jsx(Space, { width: 8 })] })), children] }), hasRemoveButton && (_jsx(Pressable, { accessibilityRole: "button", onPress: onPressRemove, style: ({ hovered, pressed }) => [
+                            styles.dismiss,
+                            { color: primary, borderColor: tint100 },
+                            hovered && { backgroundColor: tint100 },
+                            pressed && { backgroundColor: tint200 },
+                        ], children: _jsx(Icon, { name: "dismiss-regular", color: primary, size: 10 }) }))] })] }));
+};

package/src/components/Tile.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { Spacings } from "../constants/design";
+type Props = {
+    icon?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    headerEnd?: ReactNode;
+    paddingVertical?: Spacings;
+    paddingHorizontal?: Spacings;
+    children?: ReactNode;
+    footer?: ReactNode;
+    numberOfLines?: number;
+    flexBasis?: string;
+    flexGrow?: number;
+    flexShrink?: number;
+    hovered?: boolean;
+    disabled?: boolean;
+    selected?: boolean;
+    style?: StyleProp<ViewStyle>;
+};
+export declare const Tile: ({ icon, title, description, headerEnd, footer, flexBasis, children, numberOfLines, paddingVertical, paddingHorizontal, hovered, flexGrow, flexShrink, disabled, selected, style, }: Props) => JSX.Element;
+export declare const TileFullWidthContent: ({ children, flexGrow, fitToBottom, }: {
+    children: ReactNode;
+    flexGrow?: number | undefined;
+    fitToBottom?: boolean | undefined;
+}) => JSX.Element;
+type TileGridProps = {
+    breakpoint?: number;
+    children: ReactNode;
+};
+export declare const TileGrid: ({ children, breakpoint }: TileGridProps) => JSX.Element;
+export declare const TileRows: ({ children, breakpoint }: TileGridProps) => JSX.Element;
+export {};