@swan-io/lake 1.4.3 → 1.5.0

package/src/components/Checkbox.js

@@ -1,83 +0,0 @@
-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/Combobox.d.ts

@@ -1,29 +0,0 @@
-import { ReactNode } from "react";
-import { StyleProp, ViewStyle } from "react-native";
-import { IconName } from "./Icon";
-type Props<I extends {
-    value: string;
-    disabled?: boolean;
-}> = {
-    value: string;
-    items: I[];
-    ListFooterComponent?: ReactNode;
-    onValueChange: (value: string) => void;
-    onSelectItem: (value: I) => void;
-    renderItem: (item: I) => ReactNode | null;
-    size?: "large" | "small";
-    icon?: IconName;
-    label?: string;
-    placeholder?: string;
-    loading?: boolean;
-    disabled?: boolean;
-    error?: string;
-    style?: StyleProp<ViewStyle>;
-};
-export declare const Combobox: (<I extends {
-    value: string;
-    disabled?: boolean | undefined;
-}>(props: Props<I>) => JSX.Element | null) & {
-    displayName?: string | undefined;
-};
-export {};

package/src/components/Combobox.js

@@ -1,182 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo as reactMemo, useCallback, useEffect, useId, useRef, useState, } from "react";
-import isEqual from "react-fast-compare";
-import { ActivityIndicator, FlatList, Pressable, StyleSheet, Text, View, } from "react-native";
-import { match } from "ts-pattern";
-import { colors } from "../constants/colors";
-import { spacings } from "../constants/design";
-import { typography } from "../constants/typography";
-import { useDisclosure } from "../hooks/useDisclosure";
-import { useResponsive } from "../hooks/useResponsive";
-import { isNotNullish, isNullish } from "../utils/nullish";
-import { Icon } from "./Icon";
-import { Input } from "./Input";
-import { LakeTextInput } from "./LakeTextInput";
-import { Popover, VIEWPORT_WIDTH_THRESHOLD } from "./Popover";
-const ELEMENT_HEIGHT = 72;
-const NB_SUGGESTION_DISPLAYED = 3.5;
-const styles = StyleSheet.create({
-    inputWithLeftIcon: {
-        paddingLeft: 48,
-    },
-    icon: {
-        position: "absolute",
-        left: 16,
-        top: 14,
-    },
-    iconWithLabel: {
-        top: 42,
-    },
-    list: {
-        maxHeight: ELEMENT_HEIGHT * NB_SUGGESTION_DISPLAYED,
-    },
-    loading: {
-        height: ELEMENT_HEIGHT * NB_SUGGESTION_DISPLAYED,
-        left: 16,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    item: {
-        flexShrink: 1,
-        flexGrow: 1,
-        height: ELEMENT_HEIGHT,
-        justifyContent: "center",
-        paddingHorizontal: 16,
-        paddingVertical: 0,
-        transitionProperty: "background-color",
-        transitionDuration: "200ms",
-    },
-    hoveredItem: {
-        backgroundColor: colors.gray[3],
-    },
-    pressedItem: {
-        backgroundColor: colors.gray[10],
-    },
-    itemText: {
-        ...typography.bodyLarge,
-    },
-    mobileInput: {
-        padding: spacings[16],
-    },
-});
-const isReactText = (node) => ["string", "number"].includes(typeof node);
-const getItemLayout = (_data, index) => ({
-    length: ELEMENT_HEIGHT,
-    offset: ELEMENT_HEIGHT * index,
-    index,
-});
-const memo = reactMemo;
-export const Combobox = memo(({ value, items, ListFooterComponent, onValueChange, onSelectItem, renderItem, size, icon, label, placeholder, loading = false, disabled = false, error, style, }) => {
-    const isFirstRender = useRef(true);
-    const ref = useRef(null);
-    const mobileInputRef = useRef(null);
-    const listRef = useRef(null);
-    const [visible, { open, close }] = useDisclosure(false);
-    const [focusedIndex, setFocusedIndex] = useState();
-    const { desktop } = useResponsive(VIEWPORT_WIDTH_THRESHOLD);
-    const suggestionsId = useId();
-    const handleFocus = useCallback((event) => {
-        if (!desktop) {
-            event.preventDefault();
-            open();
-        }
-        else {
-            if (items.length > 0) {
-                open();
-            }
-        }
-    }, [items, open, desktop]);
-    const handleKeyPress = useCallback((event) => {
-        match(event.nativeEvent.key)
-            .with("ArrowDown", () => {
-            event.preventDefault();
-            setFocusedIndex(prevIndex => {
-                const nextIndex = isNotNullish(prevIndex) ? prevIndex + 1 : 0;
-                const maxIndex = items.length - 1;
-                return Math.min(nextIndex, maxIndex);
-            });
-        })
-            .with("ArrowUp", () => {
-            event.preventDefault();
-            setFocusedIndex(prevIndex => {
-                const maxIndex = items.length - 1;
-                const previousIndex = isNotNullish(prevIndex) ? prevIndex - 1 : maxIndex;
-                return Math.max(previousIndex, 0);
-            });
-        })
-            .with("Escape", () => {
-            event.preventDefault();
-            close();
-        })
-            .with("Enter", () => {
-            event.preventDefault();
-            if (isNullish(focusedIndex)) {
-                return;
-            }
-            const item = items[focusedIndex];
-            if (item) {
-                onSelectItem(item);
-                close();
-            }
-        })
-            .otherwise(() => { });
-    }, [items, focusedIndex, onSelectItem, close]);
-    useEffect(() => {
-        isFirstRender.current = false;
-        return () => {
-            isFirstRender.current = true;
-        };
-    }, []);
-    // Auto open/close popover depending on value on items
-    useEffect(() => {
-        // avoid to open popover on first render
-        if (isFirstRender.current) {
-            return;
-        }
-        if (value.length > 0 && items.length > 0) {
-            open();
-        }
-        // we want to run this effect only when items or value changed
-    }, [items.length, value.length]); // eslint-disable-line react-hooks/exhaustive-deps
-    // reset focused suggestion when the number of suggestions change
-    useEffect(() => {
-        setFocusedIndex(prevFocusedIndex => {
-            const maxIndex = items.length - 1;
-            if (isNotNullish(prevFocusedIndex) && prevFocusedIndex > maxIndex) {
-                return maxIndex;
-            }
-            if (items.length === 0) {
-                return undefined;
-            }
-            return prevFocusedIndex;
-        });
-    }, [items.length]);
-    // scroll automatically in suggestion list if user use keyboard navigation
-    useEffect(() => {
-        if (isNotNullish(focusedIndex)) {
-            const position = focusedIndex + 1 - NB_SUGGESTION_DISPLAYED;
-            // avoid negative value for first indexes
-            const index = Math.max(0, position);
-            listRef.current?.scrollToIndex({
-                animated: true,
-                index,
-            });
-        }
-    }, [focusedIndex]);
-    useEffect(() => {
-        if (visible) {
-            mobileInputRef.current?.focus();
-        }
-    }, [visible]);
-    return (_jsxs(View, { style: style, children: [_jsx(Input, { ref: ref, accessibilityControls: visible ? suggestionsId : "", accessibilityExpanded: visible, inputStyle: icon || loading ? styles.inputWithLeftIcon : undefined, returnKeyType: "search", role: "combobox", label: label, placeholder: placeholder, value: value, size: size, disabled: disabled, error: error, onValueChange: onValueChange, onFocus: handleFocus, onKeyPress: handleKeyPress }), icon ? (_jsx(Icon, { name: icon, color: colors.gray[50], size: 20, style: [styles.icon, isNotNullish(label) && styles.iconWithLabel] })) : null, _jsxs(Popover, { id: suggestionsId, role: "listbox", matchReferenceWidth: true, onDismiss: close, referenceRef: ref, autoFocus: false, returnFocus: false, visible: visible && (!desktop || loading || items.length > 0), underlay: false, children: [!desktop && (_jsx(View, { style: styles.mobileInput, children: _jsx(LakeTextInput, { ref: mobileInputRef, accessibilityControls: visible ? suggestionsId : "", accessibilityExpanded: visible, returnKeyType: "search", placeholder: placeholder, value: value, disabled: disabled, error: error, onChangeText: onValueChange, onKeyPress: handleKeyPress }) })), _jsxs(View, { style: styles.list, children: [loading ? (_jsx(View, { style: styles.loading, children: _jsx(ActivityIndicator, { color: colors.gray[70], size: 20 }) })) : (_jsx(FlatList, { ref: listRef, keyExtractor: item => item.value, getItemLayout: getItemLayout, accessibilityRole: "list", data: items, extraData: focusedIndex, renderItem: ({ item, index }) => {
-                                    const rendered = renderItem(item);
-                                    return (_jsx(Pressable, { accessibilityRole: "listitem", disabled: item.disabled, style: ({ hovered, pressed, focused }) => [
-                                            styles.item,
-                                            (hovered || focused || index === focusedIndex) && styles.hoveredItem,
-                                            pressed && styles.pressedItem,
-                                        ], onPress: () => {
-                                            onSelectItem(item);
-                                            close();
-                                        }, children: isReactText(rendered) ? (_jsx(Text, { numberOfLines: 1, selectable: false, style: styles.itemText, children: rendered })) : (rendered) }));
-                                } })), ListFooterComponent] })] })] }));
-}, isEqual);

package/src/components/MultilineInput.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-import { NativeSyntheticEvent, TextInput, TextInputProps } from "react-native";
-type Props = {
-    disabled?: boolean;
-    error?: string;
-    label: string;
-    onBlur?: (event: NativeSyntheticEvent<React.FocusEvent>) => void;
-    onSubmitEditing?: TextInputProps["onSubmitEditing"];
-    onValueChange?: TextInputProps["onChangeText"];
-    placeholder?: string;
-    value?: string;
-    readOnly?: boolean;
-};
-export declare const MultilineInput: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<TextInput>>>;
-export {};

package/src/components/MultilineInput.js

@@ -1,55 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, memo, useId } from "react";
-import { StyleSheet, View } from "react-native";
-import { colors } from "../constants/colors";
-import { typography } from "../constants/typography";
-import { isNotNullish } from "../utils/nullish";
-import { InputError } from "./InputError";
-import { Label } from "./Label";
-import { PressableTextInput } from "./Pressable";
-import { Space } from "./Space";
-const styles = StyleSheet.create({
-    base: {
-        ...typography.bodyLarge,
-        backgroundColor: colors.white,
-        borderColor: colors.gray[10],
-        borderRadius: 4,
-        borderWidth: 1,
-        flexGrow: 1,
-        flexShrink: 1,
-        maxWidth: "100%",
-        minHeight: 128,
-        outlineStyle: "none",
-        padding: 16,
-        placeholderTextColor: colors.gray[30],
-        resize: "vertical",
-        transitionProperty: ["border-color", "box-shadow"],
-        transitionDuration: "150ms",
-    },
-    focused: {
-        borderColor: colors.gray[30],
-        shadowColor: colors.gray[100],
-        shadowOpacity: 0.12,
-        shadowOffset: { height: 0, width: 0 },
-        shadowRadius: 2,
-    },
-    hovered: {
-        shadowColor: colors.gray[100],
-        shadowOpacity: 0.06,
-        shadowOffset: { height: 4, width: 0 },
-        shadowRadius: 8,
-    },
-    errored: {
-        borderColor: colors.red[100],
-        paddingRight: 48,
-    },
-});
-export const MultilineInput = memo(forwardRef(({ disabled = false, error, label, onBlur, onSubmitEditing, onValueChange, placeholder, readOnly = false, value = "", }, forwardedRef) => {
-    const id = `input-${useId()}`;
-    return (_jsxs(View, { children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(Space, { height: 8 }), _jsx(PressableTextInput, { nativeID: id, ref: forwardedRef, allowFontScaling: false, autoComplete: "off", editable: !readOnly && !disabled, multiline: true, onBlur: onBlur, onChangeText: onValueChange, onSubmitEditing: onSubmitEditing, placeholder: placeholder, value: value, style: ({ hovered, focused }) => [
-                    styles.base,
-                    focused ? styles.focused : hovered && styles.hovered,
-                    isNotNullish(error) && styles.errored,
-                ] }), _jsx(InputError, { message: error })] }));
-}));
-MultilineInput.displayName = "MultilineInput";

package/src/components/Picker.d.ts

@@ -1,26 +0,0 @@
-import { ReactNode } from "react";
-import { StyleProp, ViewStyle } from "react-native";
-type Props<V, I extends {
-    value: V;
-}> = {
-    value: V;
-    items: I[];
-    onValueChange: (item: V) => void;
-    renderItem: (item: I) => ReactNode | null;
-    renderValue?: (item: I) => ReactNode | null;
-    itemHeight?: number;
-    describedBy?: string;
-    size?: "large" | "small";
-    label?: string | (() => ReactNode);
-    info?: ReactNode;
-    disabled?: boolean;
-    style?: StyleProp<ViewStyle>;
-    pickerStyle?: StyleProp<ViewStyle>;
-    hideErrorMessage?: boolean;
-};
-export declare const Picker: (<V, I extends {
-    value: V;
-}>(props: Props<V, I>) => JSX.Element | null) & {
-    displayName?: string | undefined;
-};
-export {};

package/src/components/Picker.js

@@ -1,116 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo as reactMemo, useMemo, useRef } from "react";
-import isEqual from "react-fast-compare";
-import { FlatList, Pressable, StyleSheet, Text, View } from "react-native";
-import { colors } from "../constants/colors";
-import { commonStyles } from "../constants/commonStyles";
-import { typography } from "../constants/typography";
-import { useBoolean } from "../hooks/useBoolean";
-import { Fill } from "./Fill";
-import { Icon } from "./Icon";
-import { InputError } from "./InputError";
-import { Label } from "./Label";
-import { Popover } from "./Popover";
-import { Space } from "./Space";
-const ELEMENT_HEIGHT = 48;
-const styles = StyleSheet.create({
-    base: {
-        alignItems: "center",
-        backgroundColor: colors.white,
-        borderColor: colors.gray[10],
-        borderRadius: 4,
-        borderWidth: 1,
-        flexDirection: "row",
-        flexGrow: 1,
-        flexShrink: 1,
-        height: 48,
-        outlineStyle: "none",
-        paddingHorizontal: 16,
-        transitionDuration: "150ms",
-        transitionProperty: ["border-color", "box-shadow"],
-    },
-    small: {
-        height: 40,
-    },
-    focused: {
-        borderColor: colors.gray[20],
-        shadowColor: colors.gray[100],
-        shadowOpacity: 0.12,
-        shadowOffset: { height: 0, width: 0 },
-        shadowRadius: 2,
-    },
-    hovered: {
-        shadowColor: colors.gray[100],
-        shadowOpacity: 0.06,
-        shadowOffset: { height: 4, width: 0 },
-        shadowRadius: 8,
-    },
-    disabled: {
-        backgroundColor: colors.gray[3],
-        borderColor: colors.gray[3],
-        cursor: "not-allowed",
-    },
-    list: {
-        maxHeight: ELEMENT_HEIGHT * 4.5,
-        backgroundColor: colors.white,
-        borderRadius: 4,
-        shadowColor: colors.gray[100],
-        shadowOpacity: 0.12,
-        shadowOffset: { height: 6, width: 0 },
-        shadowRadius: 24,
-    },
-    item: {
-        alignItems: "center",
-        flexDirection: "row",
-        flexGrow: 1,
-        flexShrink: 1,
-        paddingHorizontal: 16,
-        paddingVertical: 0,
-        transitionProperty: "background-color",
-        transitionDuration: "200ms",
-    },
-    hoveredItem: {
-        backgroundColor: colors.gray[3],
-    },
-    pressedItem: {
-        backgroundColor: colors.gray[10],
-    },
-    itemText: {
-        ...typography.bodyLarge,
-    },
-});
-const isReactText = (node) => ["string", "number"].includes(typeof node);
-const memo = reactMemo;
-export const Picker = memo(({ value, items, onValueChange, renderItem, renderValue = renderItem, itemHeight = ELEMENT_HEIGHT, describedBy, size = "large", label = "", info = "", disabled = false, style, pickerStyle, hideErrorMessage = false, }) => {
-    const buttonRef = useRef(null);
-    const [visible, setVisible] = useBoolean(false);
-    const selectedItem = items.find(item => item.value === value);
-    const selectedRendered = selectedItem ? renderValue(selectedItem) : undefined;
-    const getItemLayout = useMemo(() => (data, index) => ({
-        length: itemHeight,
-        offset: itemHeight * index,
-        index,
-    }), [itemHeight]);
-    return (_jsxs(View, { style: style, children: [typeof label === "function"
-                ? label()
-                : label !== "" && (_jsxs(_Fragment, { children: [_jsx(Label, { children: label }), _jsx(Space, { height: 8 })] })), _jsxs(Pressable, { ref: buttonRef, accessibilityRole: "button", disabled: disabled, onPress: setVisible.toggle, style: ({ hovered, focused }) => [
-                    styles.base,
-                    size === "small" && styles.small,
-                    pickerStyle,
-                    focused || visible ? styles.focused : hovered && styles.hovered,
-                    disabled && styles.disabled,
-                ], children: [selectedItem ? (_jsx(View, { style: commonStyles.fill, children: isReactText(selectedRendered) ? (_jsx(Text, { numberOfLines: 1, style: styles.itemText, children: selectedRendered })) : (selectedRendered) })) : (_jsx(Fill, {})), !disabled && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 8 }), _jsx(Icon, { name: visible ? "chevron-up-filled" : "chevron-down-filled", color: colors.gray[30], size: 18 })] }))] }), info !== "" && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 8 }), _jsx(View, { children: info })] })), !hideErrorMessage && _jsx(InputError, {}), _jsx(Popover, { referenceRef: buttonRef, matchReferenceWidth: true, describedBy: describedBy, visible: visible, onDismiss: setVisible.toggle, children: _jsx(FlatList, { getItemLayout: getItemLayout, accessibilityRole: "list", data: items, style: styles.list, keyExtractor: item => `option-${item.value}`, renderItem: ({ item }) => {
-                        const selected = item.value === value;
-                        const rendered = renderItem(item);
-                        return (_jsxs(Pressable, { accessibilityRole: "listitem", accessibilitySelected: selected, style: ({ hovered, pressed }) => [
-                                styles.item,
-                                (hovered || selected) && styles.hoveredItem,
-                                pressed && styles.pressedItem,
-                                { height: itemHeight },
-                            ], onPress: () => {
-                                onValueChange(item.value);
-                                setVisible.toggle();
-                            }, children: [isReactText(rendered) ? (_jsx(Text, { numberOfLines: 1, style: styles.itemText, children: rendered })) : (rendered), selected && (_jsxs(_Fragment, { children: [_jsx(Fill, { minWidth: 16 }), _jsx(Icon, { name: "checkmark-filled", color: colors.green[100], size: 20 })] }))] }));
-                    } }) })] }));
-}, isEqual);
-Picker.displayName = "Picker";

package/src/components/ProgressBar.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-type Props = {
-    color: string;
-    label: string;
-    progressLabel: string;
-    minValue: number;
-    maxValue: number;
-    value: number;
-};
-export declare const ProgressBar: ({ color, label, progressLabel, minValue, maxValue, value }: Props) => JSX.Element;
-export {};

package/src/components/ProgressBar.js

@@ -1,46 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
-import { StyleSheet, Text, View } from "react-native";
-import { colors } from "../constants/colors";
-import { typography } from "../constants/typography";
-import { useComputedColors } from "../hooks/useComputedColors";
-import { interpolate } from "../utils/math";
-import { Box } from "./Box";
-import { Fill } from "./Fill";
-import { Space } from "./Space";
-const styles = StyleSheet.create({
-    label: {
-        ...typography.bodySmall,
-        lineHeight: typography.lineHeights.title,
-        color: colors.gray[50],
-    },
-    progressLabel: {
-        ...typography.bodySmall,
-        fontWeight: typography.fontWeights.demi,
-        color: colors.gray[100],
-        whiteSpace: "nowrap",
-    },
-    bar: {
-        height: 8,
-        borderRadius: 4,
-        backgroundColor: colors.gray[10],
-    },
-    progressBar: {
-        height: "100%",
-        borderRadius: 4,
-    },
-});
-export const ProgressBar = ({ color, label, progressLabel, minValue, maxValue, value }) => {
-    const computedColors = useComputedColors(color);
-    const labelId = `label-${useId()}`;
-    const percentage = interpolate({
-        inputRange: [minValue, maxValue],
-        outputRange: [0, 100],
-        clamp: true,
-    })(value);
-    const fillWidth = `${Math.round(percentage)}%`;
-    return (_jsxs(View, { accessibilityRole: "progressbar", accessibilityLabelledBy: labelId, accessibilityValueMin: minValue, accessibilityValueMax: maxValue, accessibilityValueNow: value, accessibilityValueText: progressLabel, children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(Text, { nativeID: labelId, style: styles.label, children: label }), _jsx(Fill, { minWidth: 16 }), _jsx(Text, { style: styles.progressLabel, children: progressLabel })] }), _jsx(Space, { height: 8 }), _jsx(View, { style: styles.bar, children: _jsx(View, { style: [
-                        styles.progressBar,
-                        { backgroundColor: computedColors.progress, width: fillWidth },
-                    ] }) })] }));
-};

package/src/components/SegmentedControl.d.ts

@@ -1,19 +0,0 @@
-import { ReactNode } from "react";
-import { StyleProp, ViewStyle } from "react-native";
-type Props<V, I extends {
-    value: V;
-}> = {
-    value: V;
-    items: I[];
-    onValueChange: (value: V) => void;
-    renderItem: (item: I) => ReactNode | null;
-    horizontal?: boolean;
-    label: string;
-    style?: StyleProp<ViewStyle>;
-};
-export declare const SegmentedControl: (<V, I extends {
-    value: V;
-}>(props: Props<V, I>) => JSX.Element | null) & {
-    displayName?: string | undefined;
-};
-export {};

package/src/components/SegmentedControl.js

@@ -1,74 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo as reactMemo } from "react";
-import isEqual from "react-fast-compare";
-import { Pressable, StyleSheet, Text, View } from "react-native";
-import { colors } from "../constants/colors";
-import { typography } from "../constants/typography";
-import { Fill } from "./Fill";
-import { Icon } from "./Icon";
-import { Label } from "./Label";
-import { Space } from "./Space";
-const styles = StyleSheet.create({
-    base: {
-        backgroundColor: colors.white,
-        borderWidth: 1,
-        borderColor: colors.gray[10],
-        borderRadius: 4,
-        overflow: "hidden",
-    },
-    horizontalBase: {
-        flexDirection: "row",
-    },
-    item: {
-        alignItems: "center",
-        flexDirection: "row",
-        flexGrow: 1,
-        flexShrink: 1,
-        minHeight: 48,
-        overflow: "hidden",
-        paddingHorizontal: 16,
-        transitionProperty: "background-color",
-        transitionDuration: "200ms",
-    },
-    horizontalItem: {
-        flexBasis: "0%",
-        flexDirection: "column",
-        flexGrow: 1,
-        flexShrink: 1,
-        justifyContent: "center",
-    },
-    hoveredItem: {
-        backgroundColor: colors.gray[3],
-    },
-    pressedItem: {
-        backgroundColor: colors.gray[10],
-    },
-    rightBorder: {
-        borderRightColor: colors.gray[10],
-        borderRightWidth: 1,
-    },
-    bottomBorder: {
-        borderBottomColor: colors.gray[10],
-        borderBottomWidth: 1,
-    },
-    itemText: {
-        ...typography.bodyLarge,
-    },
-});
-const isReactText = (node) => ["string", "number"].includes(typeof node);
-const memo = reactMemo;
-export const SegmentedControl = memo(({ items, horizontal = false, label, onValueChange, renderItem, style, value }) => {
-    const lastIndex = items.length - 1;
-    return (_jsxs(View, { children: [_jsx(Label, { children: label }), _jsx(Space, { height: 8 }), _jsx(View, { accessibilityRole: "radiogroup", style: [styles.base, horizontal && styles.horizontalBase, style], children: items.map((item, index) => {
-                    const selected = item.value === value;
-                    const rendered = renderItem(item);
-                    return (_jsx(Pressable, { accessibilitySelected: selected, accessibilityRole: "radio", onPress: () => onValueChange(item.value), style: ({ hovered, pressed }) => [
-                            styles.item,
-                            horizontal && styles.horizontalItem,
-                            (hovered || selected) && styles.hoveredItem,
-                            pressed && styles.pressedItem,
-                            index !== lastIndex && (horizontal ? styles.rightBorder : styles.bottomBorder),
-                        ], children: _jsxs(_Fragment, { children: [isReactText(rendered) ? (_jsx(Text, { style: styles.itemText, children: rendered })) : (rendered), !horizontal && selected ? (_jsxs(_Fragment, { children: [_jsx(Fill, { minWidth: 16 }), _jsx(Icon, { name: "checkmark-filled", color: colors.green[100], size: 20 })] })) : null] }) }, `option-${item.value}`));
-                }) })] }));
-}, isEqual);
-SegmentedControl.displayName = "SegmentedControl";