@swan-io/lake 1.0.0

package/src/components/Box.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { StyleSheet, View } from "react-native";
+/* eslint-disable react-native/no-unused-styles */
+const directionStyles = StyleSheet.create({
+    columnReverse: { flexDirection: "column-reverse" },
+    row: { flexDirection: "row" },
+    rowReverse: { flexDirection: "row-reverse" },
+});
+const alignItemsStyles = StyleSheet.create({
+    baseline: { alignItems: "baseline" },
+    center: { alignItems: "center" },
+    end: { alignItems: "flex-end" },
+    start: { alignItems: "flex-start" },
+});
+const justifyContentStyles = StyleSheet.create({
+    center: { justifyContent: "center" },
+    end: { justifyContent: "flex-end" },
+    start: { justifyContent: "flex-start" },
+    spaceBetween: { justifyContent: "space-between" },
+    spaceAround: { justifyContent: "space-around" },
+    spaceEvenly: { justifyContent: "space-evenly" },
+});
+export const Box = forwardRef((
+// Default <View /> styles https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/exports/View/index.js#L133
+{ alignItems = "stretch", direction = "column", justifyContent = "normal", style, ...props }, forwardedRef) => (_jsx(View, { ref: forwardedRef, ...props, style: [
+        alignItems !== "stretch" && alignItemsStyles[alignItems],
+        direction !== "column" && directionStyles[direction],
+        justifyContent !== "normal" && justifyContentStyles[justifyContent],
+        style,
+    ] })));

package/src/components/Breadcrumbs.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+export type Crumb = {
+    label: string;
+    link: string;
+    siblings?: {
+        label: string;
+        url: string;
+        isMatching: boolean;
+    }[];
+};
+type Props = {
+    rootLevelCrumbs?: readonly Crumb[];
+    children: ReactNode;
+};
+export declare const BreadcrumbsRoot: ({ rootLevelCrumbs, children }: Props) => JSX.Element;
+export declare const useCrumb: (crumb?: Crumb) => void;
+export declare const Breadcrumbs: () => JSX.Element;
+export {};

package/src/components/Breadcrumbs.js

@@ -0,0 +1,362 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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 { Space } from "@swan-io/lake/src/components/Space";
+import { TransitionView } from "@swan-io/lake/src/components/TransitionView";
+import { animations, backgroundColor, colors, gray75, radii, shadows, spacings, texts, } from "@swan-io/lake/src/constants/design";
+import { useHover } from "@swan-io/lake/src/hooks/useHover";
+import { usePreviousValue } from "@swan-io/lake/src/hooks/usePreviousValue";
+import { isNotNullish, isNullish } from "@swan-io/lake/src/utils/nullish";
+import { createContext, useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState, } from "react";
+import { Pressable, StyleSheet, Text, View, } from "react-native";
+import { match, P } from "ts-pattern";
+import { v4 as uuid } from "uuid";
+import { noop } from "../utils/function";
+import { Box } from "./Box";
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        alignItems: "center",
+        zIndex: 10,
+        transform: [{ translateZ: 0 }],
+    },
+    item: {
+        flexDirection: "row",
+        alignItems: "center",
+        borderRadius: radii[6],
+        transitionProperty: "opacity",
+        transitionDuration: "0.15s",
+    },
+    itemPressed: {
+        opacity: 0.2,
+    },
+    itemForcedOpen: {
+        backgroundColor: colors.gray[50],
+    },
+    chevron: {
+        padding: spacings[8],
+    },
+    horizontalLink: {
+        paddingVertical: spacings[8],
+    },
+    horizontalLinkText: {
+        paddingHorizontal: spacings[8],
+        alignItems: "center",
+        display: "inline-flex",
+    },
+    horizontalLinkTextHovered: {
+        color: colors.gray[900],
+        boxShadow: `0 1px currentColor`,
+    },
+    activeHorizontalLinkText: {
+        color: colors.gray[800],
+        backgroundColor: gray75,
+        borderRadius: radii[4],
+        boxShadow: "none",
+    },
+    dropdown: {
+        position: "absolute",
+        left: "50%",
+        transform: [{ translateX: "-50%" }],
+        top: "100%",
+        backgroundColor: backgroundColor.accented,
+        borderRadius: radii[8],
+        boxShadow: shadows.modal,
+        paddingVertical: spacings[8],
+    },
+    siblingsDropdown: {
+        position: "absolute",
+        left: "50%",
+        transform: [{ translateX: "-50%" }],
+        top: "100%",
+        backgroundColor: backgroundColor.accented,
+        borderRadius: radii[8],
+        boxShadow: shadows.modal,
+        paddingVertical: spacings[8],
+        alignItems: "stretch",
+    },
+    dropdownLink: {
+        paddingHorizontal: spacings[16],
+        paddingVertical: spacings[8],
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    dropdownLinkText: {
+        ...texts.regular,
+        whiteSpace: "nowrap",
+    },
+    dropdownLinkTextHovered: {
+        color: colors.gray[500],
+    },
+    dropdownLinkActive: {
+        backgroundColor: colors.gray[50],
+    },
+    dropdownContainer: {
+        position: "absolute",
+        left: "50%",
+        top: "100%",
+    },
+    dropdownLinkContainer: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "stretch",
+    },
+    tick: {
+        position: "absolute",
+        top: "50%",
+        right: spacings[16],
+        transform: [{ translateY: "-50%" }],
+    },
+});
+const emptyCrumbWithIdArray = [];
+const emptyCrumbArray = [];
+const defaultContext = [emptyCrumbWithIdArray, emptyCrumbWithIdArray, noop, { current: -1 }];
+const BreadcrumbsContext = createContext(defaultContext);
+export const BreadcrumbsRoot = ({ rootLevelCrumbs = emptyCrumbArray, children }) => {
+    const [crumbs, setCrumbs] = useState(emptyCrumbWithIdArray);
+    const isFirstRenderRef = useRef(true);
+    const currentIndexRef = useRef(-1);
+    const [rootCrumbs, setRootCrumbs] = useState(() => rootLevelCrumbs.map(crumb => ({ id: uuid(), crumb, isRootCrumb: true })));
+    useEffect(() => {
+        if (isFirstRenderRef.current) {
+            isFirstRenderRef.current = false;
+            return;
+        }
+        setRootCrumbs(rootLevelCrumbs.map(crumb => ({ id: uuid(), crumb, isRootCrumb: true })));
+    }, [rootLevelCrumbs]);
+    const orderedCrumbs = useMemo(() => [...crumbs].sort((a, b) => ((b.index ?? -1) > (a.index ?? -1) ? -1 : 1)), [crumbs]);
+    const value = useMemo(() => [rootCrumbs, orderedCrumbs, setCrumbs, currentIndexRef], [rootCrumbs, orderedCrumbs, setCrumbs, currentIndexRef]);
+    return _jsx(BreadcrumbsContext.Provider, { value: value, children: children });
+};
+const useBreadcrumbs = () => {
+    const [initialCrumbs, crumbs] = useContext(BreadcrumbsContext);
+    return useMemo(() => [...initialCrumbs, ...crumbs], [initialCrumbs, crumbs]);
+};
+export const useCrumb = (crumb) => {
+    const [, , setValue, currentIndex] = useContext(BreadcrumbsContext);
+    const [id] = useState(() => uuid());
+    const initialCrumb = useRef(crumb);
+    const [index] = useState(() => ++currentIndex.current);
+    useEffect(() => {
+        setValue(existingCrumbs => {
+            const nextCrumbs = existingCrumbs.concat([
+                { id, crumb: initialCrumb.current, isRootCrumb: false, index },
+            ]);
+            return nextCrumbs;
+        });
+        return () => {
+            setValue(existingCrumbs => existingCrumbs.filter(existingCrumb => existingCrumb.id !== id));
+        };
+    }, [id, setValue, index]);
+    useEffect(() => {
+        setValue(existingCrumbs => {
+            const exisitingCrumb = existingCrumbs.find(existingCrumb => existingCrumb.id === id);
+            if (isNotNullish(exisitingCrumb) && exisitingCrumb.crumb !== crumb) {
+                return existingCrumbs.map(existingCrumb => {
+                    return existingCrumb.id === id
+                        ? { id, crumb, isRootCrumb: exisitingCrumb.isRootCrumb, index }
+                        : existingCrumb;
+                });
+            }
+            return existingCrumbs;
+        });
+    }, [id, crumb, setValue, index]);
+};
+const CHEVRON = (_jsx(View, { style: styles.chevron, children: _jsx(Icon, { name: "chevron-right-filled", color: colors.gray[500], size: 16 }) }));
+const BreadcrumbsSiblingsDropdown = ({ siblings, onPress, }) => {
+    return (_jsx(View, { style: styles.siblingsDropdown, children: siblings.map(({ url, label, isMatching }) => {
+            return (_jsx(Link, { to: url, ariaCurrentValue: "location", onPress: (event) => {
+                    if (isMatching) {
+                        event.preventDefault();
+                    }
+                    onPress();
+                }, style: styles.dropdownLinkContainer, children: ({ hovered }) => (_jsxs(View, { style: [styles.dropdownLink, isMatching && styles.dropdownLinkActive], children: [_jsx(LakeText, { style: [styles.dropdownLinkText, hovered && styles.dropdownLinkTextHovered], children: label }), isMatching && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 32 }), _jsx(Icon, { color: colors.positive[500], name: "checkmark-filled", size: 14, style: styles.tick })] }))] })) }, url));
+        }) }));
+};
+const BreadcrumbsItem = ({ crumb, isFirstItem = false, isLastItem = false, shouldAnimate, }) => {
+    const [isHovered, setIsHovered] = useState(() => false);
+    const hoverRef = useRef(null);
+    const [siblings, setSiblings] = useState(null);
+    useHover(hoverRef, {
+        onHoverStart: () => setIsHovered(true),
+        onHoverEnd: () => setIsHovered(false),
+    });
+    const handlePress = useCallback((event) => {
+        if (crumb.siblings != null) {
+            event.preventDefault();
+            setSiblings(crumb.siblings);
+        }
+    }, [crumb.siblings]);
+    return (_jsxs(View, { style: [styles.item, shouldAnimate ? animations.fadeAndSlideInFromRight.enter : null], children: [!isFirstItem ? CHEVRON : null, _jsxs(View, { children: [_jsx(Link, { to: crumb.link, ariaCurrentValue: "location", onPress: handlePress, children: _jsx(View, { ref: hoverRef, style: [
+                                styles.horizontalLink,
+                                shouldAnimate && animations.fadeAndSlideInFromRight.enter,
+                            ], children: _jsxs(LakeText, { color: colors.gray[800], style: [styles.horizontalLinkText, isLastItem && styles.activeHorizontalLinkText], children: [_jsx(Text, { style: isHovered && !isLastItem ? styles.horizontalLinkTextHovered : undefined, children: crumb.label }), crumb.siblings != null ? (_jsxs(_Fragment, { children: [_jsx(Space, { width: 4 }), _jsx(Icon, { name: "chevron-down-filled", color: colors.gray[500], size: 16 })] })) : null] }) }) }), _jsx(View, { style: styles.dropdownContainer, children: _jsx(TransitionView, { ...animations.fadeAndSlideInFromBottom, children: siblings ? (_jsx(FocusTrap, { autoFocus: true, focusLock: true, returnFocus: true, onClickOutside: () => setSiblings(null), onEscapeKey: () => setSiblings(null), children: _jsx(BreadcrumbsSiblingsDropdown, { siblings: siblings, onPress: () => setSiblings(null) }) })) : null }) })] })] }));
+};
+const BreadcrumbsDropdown = ({ crumbs, onHoverStart, onHoverEnd, onLinkFocus, onLinkBlur, onLinkPress, }) => {
+    const containerRef = useRef(null);
+    useHover(containerRef, {
+        onHoverStart,
+        onHoverEnd,
+    });
+    return (_jsx(View, { style: styles.dropdown, ref: containerRef, children: crumbs.map(({ id, crumb }) => {
+            return (_jsx(Link, { to: crumb.link, onFocus: onLinkFocus, onBlur: onLinkBlur, onPress: onLinkPress, ariaCurrentValue: "location", children: ({ hovered }) => (_jsx(View, { style: styles.dropdownLink, children: _jsx(LakeText, { style: [styles.dropdownLinkText, hovered && styles.dropdownLinkTextHovered], children: crumb.label }) })) }, id));
+        }) }));
+};
+const SHOULD_AUTOFOCUS = new Set(["ForcedOpen", "OpenFromFocus"]);
+const SHOULD_OPEN = new Set(["Open", "ForcedOpen", "OpenFromFocus"]);
+const SHOULD_LOCK_FOCUS = new Set(["ForcedOpen"]);
+const BreadcrumbsDropdownItems = ({ crumbs }) => {
+    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._], () => "ForcedClosed")
+            .with(["FocusHandle", "ForcedClosed"], () => "Closed")
+            .with(["Open", "ForcedOpen"], ["FocusHandle", "ForcedOpen"], ["Close", "ForcedOpen"], () => "ForcedOpen")
+            .with(["Open", P._], () => "Open")
+            .with(["FocusHandle", P._], () => "OpenFromFocus")
+            .with(["Close", P._], () => "Closed")
+            .exhaustive();
+    }, "Closed");
+    const timeoutRef = useRef(undefined);
+    const handleRef = useRef(null);
+    const containerRef = useRef(null);
+    const { onHandleFocus, onLinkFocus, onAnyBlur, onHoverStart, onHoverEnd, onPress, onPressOutside, onEscapeKey, } = useMemo(() => ({
+        onHandleFocus: (event) => {
+            if (isNullish(containerRef.current)) {
+                return;
+            }
+            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 (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,
+    });
+    return (_jsxs(Box, { direction: "row", alignItems: "center", children: [CHEVRON, _jsxs(View, { ref: containerRef, children: [_jsx(Pressable, { ref: handleRef, style: ({ pressed }) => [
+                            styles.item,
+                            pressed && styles.itemPressed,
+                            openingStatus === "ForcedOpen" && styles.itemForcedOpen,
+                        ], focusable: true, onFocus: onHandleFocus, onBlur: onAnyBlur, onPress: onPress, children: _jsx(View, { style: styles.horizontalLink, children: _jsx(LakeText, { style: [styles.horizontalLinkText, styles.activeHorizontalLinkText], children: "…" }) }) }), _jsx(TransitionView, { ...animations.fadeAndSlideInFromBottom, children: shouldOpen ? (_jsx(FocusTrap, { autoFocus: shouldAutoFocus, focusLock: shouldLockFocus, returnFocus: shouldLockFocus, onClickOutside: onPressOutside, onEscapeKey: shouldLockFocus ? onEscapeKey : undefined, children: _jsx(BreadcrumbsDropdown, { crumbs: crumbs, onHoverStart: onHoverStart, onHoverEnd: onHoverEnd, onLinkFocus: onLinkFocus, onLinkBlur: onAnyBlur, onLinkPress: onEscapeKey }) })) : null })] })] }));
+};
+// In order to preserve the horizontal space, we collapse the breadcrumbs once
+// there's strictly more than three crumbs. In that case, the expected behavior
+// is as follows:
+// - Display the root crumb (the first one) inline
+// - Collapse any crumb between the first and the penultimate item in a dropdown
+// - Display the last two crumbs inline
+const arrangeArray = (array) => {
+    if (array.length <= 3) {
+        return {
+            start: array,
+            collapsed: [],
+            end: [],
+        };
+    }
+    return {
+        start: array.slice(0, 1),
+        collapsed: array.slice(1, -2),
+        end: array.slice(-2),
+    };
+};
+export const Breadcrumbs = () => {
+    const crumbs = useBreadcrumbs();
+    const cleanCrumbs = useMemo(() => {
+        const hasCrumb = (value) => isNotNullish(value.crumb);
+        return crumbs.filter(hasCrumb);
+    }, [crumbs]);
+    const previousCrumbs = usePreviousValue(useMemo(() => {
+        return new Set(cleanCrumbs.map(crumb => crumb.id));
+    }, [cleanCrumbs]));
+    const { start, collapsed, end } = useMemo(() => {
+        return arrangeArray(cleanCrumbs.map(({ id, crumb, isRootCrumb }, index) => ({
+            id,
+            crumb,
+            isFirst: index === 0,
+            isLast: index === cleanCrumbs.length - 1,
+            isRootCrumb,
+        })));
+    }, [cleanCrumbs]);
+    return (_jsxs(View, { accessibilityRole: "navigation", style: styles.container, children: [start.map(({ id, crumb, isFirst, isLast, isRootCrumb }) => (_jsx(BreadcrumbsItem, { crumb: crumb, isFirstItem: isFirst, isLastItem: isLast, shouldAnimate: !previousCrumbs.has(id) && !isRootCrumb }, id))), collapsed.length > 0 ? _jsx(BreadcrumbsDropdownItems, { crumbs: collapsed }) : null, end.map(({ id, crumb, isLast, isRootCrumb }) => (_jsx(BreadcrumbsItem, { crumb: crumb, isLastItem: isLast, shouldAnimate: !previousCrumbs.has(id) && !isRootCrumb }, id)))] }));
+};

package/src/components/Button.d.ts

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

package/src/components/Button.js

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

package/src/components/Caption.d.ts

@@ -0,0 +1,6 @@
+import { ReactText } from "react";
+import { Text, TextProps } from "react-native";
+export declare const Caption: import("react").ForwardRefExoticComponent<TextProps & {
+    align?: "center" | "left" | "right" | undefined;
+    children: ReactText;
+} & import("react").RefAttributes<Text>>;

package/src/components/Caption.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { StyleSheet, Text } from "react-native";
+import { typography } from "../constants/typography";
+/* eslint-disable react-native/no-unused-styles */
+const styles = StyleSheet.create({
+    center: { ...typography.caption, textAlign: "center" },
+    left: { ...typography.caption, textAlign: "left" },
+    right: { ...typography.caption, textAlign: "right" },
+});
+export const Caption = forwardRef(({ children, align = "left", style, ...props }, forwardedRef) => (_jsx(Text, { ref: forwardedRef, style: [styles[align], style], ...props, children: children })));

package/src/components/Checkbox.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+import { StyleProp, View, ViewStyle } from "react-native";
+type Props = {
+    children?: ReactNode;
+    disabled?: boolean;
+    error?: string;
+    style?: StyleProp<ViewStyle>;
+    value: boolean;
+    onValueChange?: (value: boolean) => void;
+};
+export declare const CheckBox: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<View>>>;
+export {};

package/src/components/Checkbox.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, memo, useId, useRef } from "react";
+import { StyleSheet, Text, unstable_createElement as createElement, View, } from "react-native";
+import { colors } from "../constants/colors";
+import { typography } from "../constants/typography";
+import { useNativeProp } from "../hooks/useNativeProp";
+import { isNotNullish } from "../utils/nullish";
+import { Icon } from "./Icon";
+import { Pressable } from "./Pressable";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    base: {
+        flexDirection: "row",
+        flexShrink: 1,
+    },
+    box: {
+        alignItems: "center",
+        borderColor: colors.gray[10],
+        borderRadius: 4,
+        borderWidth: 1,
+        height: 20,
+        justifyContent: "center",
+        padding: 4,
+        transitionDuration: "150ms",
+        transitionProperty: "border-color",
+        width: 20,
+    },
+    native: {
+        ...StyleSheet.absoluteFillObject,
+        appearance: "none",
+        borderColor: colors.transparent,
+        cursor: "inherit",
+        height: "100%",
+        margin: 0,
+        padding: 0,
+        width: "100%",
+    },
+    icon: {
+        opacity: 0,
+        animationKeyframes: {
+            from: { opacity: 0 },
+            to: { opacity: 1 },
+        },
+        animationDuration: "0.25s",
+        animationFillMode: "forwards",
+        animationTimingFunction: "ease",
+    },
+    hovered: {
+        borderColor: colors.gray[30],
+    },
+    disabled: {
+        cursor: "not-allowed",
+        backgroundColor: colors.gray[3],
+    },
+    errored: {
+        borderColor: colors.red[100],
+    },
+    label: {
+        ...typography.bodyLarge,
+        lineHeight: typography.lineHeights.title,
+    },
+});
+export const CheckBox = memo(forwardRef(({ children, disabled = false, error = "", style, value, onValueChange }, forwardedRef) => {
+    const ref = useRef(null);
+    const id = useId();
+    useNativeProp(ref, "for", id);
+    return (_jsxs(View, { style: [styles.base, style], children: [_jsxs(Pressable, { ref: forwardedRef, accessibilityRole: "checkbox", focusable: false, accessibilityChecked: value, accessibilityDisabled: disabled, style: ({ hovered }) => [
+                    styles.box,
+                    disabled && styles.disabled,
+                    !disabled && error !== "" && styles.errored,
+                    !disabled && error === "" && hovered && styles.hovered,
+                ], children: [createElement("input", {
+                        checked: value,
+                        disabled,
+                        id,
+                        style: styles.native,
+                        type: "checkbox",
+                        onChange: () => {
+                            !disabled && onValueChange?.(!value);
+                        },
+                    }), value && (_jsx(Icon, { name: "checkmark-filled", color: disabled ? colors.gray[50] : colors.green[100], size: 16, style: styles.icon }))] }), isNotNullish(children) && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 12 }), _jsx(Text, { accessibilityRole: "label", ref: ref, style: styles.label, children: children })] }))] }));
+}));
+CheckBox.displayName = "CheckBox";

package/src/components/ChoicePicker.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+type Props<T> = {
+    items: T[];
+    large?: boolean;
+    renderItem: (value: T) => ReactNode;
+    value?: T;
+    getId?: (item: T) => unknown;
+    onChange: (value: T) => void;
+};
+export declare const ChoicePicker: <T>({ items, getId, large, renderItem, value, onChange, }: Props<T>) => JSX.Element;
+export {};