@swan-io/lake 1.0.0

package/src/components/LakeModal.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, useEffect, useState } from "react";
+import { ScrollView, StyleSheet, View } from "react-native";
+import { commonStyles } from "../constants/commonStyles";
+import { backgroundColor, breakpoints, colors, negativeSpacings, shadows, spacings, } from "../constants/design";
+import { useBodyClassName } from "../hooks/useBodyClassName";
+import { FocusTrap } from "./FocusTrap";
+import { Icon } from "./Icon";
+import { LakeButton } from "./LakeButton";
+import { LakeHeading } from "./LakeHeading";
+import { LoadingView } from "./LoadingView";
+import { Portal } from "./Portal";
+import { Pressable } from "./Pressable";
+import { ResponsiveContainer } from "./ResponsiveContainer";
+import { Space } from "./Space";
+import { TransitionView } from "./TransitionView";
+const BACKGROUND_COLOR = "rgba(0, 0, 0, 0.6)";
+const styles = StyleSheet.create({
+    root: {
+        ...StyleSheet.absoluteFillObject,
+    },
+    container: {
+        ...StyleSheet.absoluteFillObject,
+    },
+    fill: {
+        ...StyleSheet.absoluteFillObject,
+        animationFillMode: "forwards",
+    },
+    overlay: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: BACKGROUND_COLOR,
+    },
+    overlayEnter: {
+        animationKeyframes: {
+            "0%": { opacity: 0 },
+        },
+        animationDuration: "200ms",
+        animationTimingFunction: "ease-in-out",
+    },
+    overlayLeave: {
+        animationKeyframes: {
+            "100%": { opacity: 0 },
+        },
+        animationDuration: "200ms",
+        animationTimingFunction: "ease-in-out",
+    },
+    modalEnter: {
+        animationKeyframes: {
+            "0%": {
+                opacity: 0,
+                transform: [{ translateY: -20 }],
+            },
+        },
+        animationDuration: "300ms",
+        animationTimingFunction: "ease-in-out",
+    },
+    modalLeave: {
+        animationKeyframes: {
+            "100%": {
+                opacity: 0,
+                transform: [{ translateY: -20 }],
+            },
+        },
+        animationDuration: "300ms",
+        animationTimingFunction: "ease-in-out",
+    },
+    modalContainer: {
+        ...StyleSheet.absoluteFillObject,
+    },
+    modalContentContainer: {
+        padding: spacings[24],
+        justifyContent: "center",
+        flexGrow: 1,
+    },
+    modalContentContainerSmall: {
+        padding: spacings[8],
+        flexGrow: 1,
+        justifyContent: "center",
+    },
+    modal: {
+        backgroundColor: backgroundColor.default,
+        borderRadius: 24,
+        padding: spacings[48],
+        boxShadow: shadows.modal,
+        alignSelf: "stretch",
+        width: "100%",
+        marginHorizontal: "auto",
+    },
+    modalSmall: {
+        borderRadius: 16,
+        backgroundColor: backgroundColor.default,
+        width: "100%",
+        padding: spacings[24],
+        alignSelf: "stretch",
+        marginHorizontal: "auto",
+    },
+    modalHeader: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-between",
+    },
+    modalIconTitle: {
+        ...commonStyles.fill,
+    },
+    trap: {
+        ...commonStyles.fill,
+    },
+    pressableOverlay: {
+        ...StyleSheet.absoluteFillObject,
+    },
+    closeButton: {
+        top: negativeSpacings[4],
+        right: negativeSpacings[4],
+    },
+});
+export const LakeModal = ({ visible, icon, title, color = "current", children, maxWidth = 570, onPressClose, }) => {
+    const [rootElement, setRootElement] = useState(() => undefined);
+    useEffect(() => {
+        const rootElement = document.createElement("div");
+        document.body.append(rootElement);
+        setRootElement(rootElement);
+        return () => {
+            rootElement.remove();
+            setRootElement(undefined);
+        };
+    }, []);
+    useBodyClassName("ModalOpen", { enabled: visible });
+    if (rootElement == null) {
+        return null;
+    }
+    return (_jsx(Portal, { container: rootElement, children: _jsxs(View, { accessibilityModal: true, style: styles.container, pointerEvents: visible ? "auto" : "none", children: [_jsx(TransitionView, { style: styles.fill, enter: styles.overlayEnter, leave: styles.overlayLeave, children: visible ? _jsx(View, { style: styles.overlay }) : null }), _jsx(Suspense, { fallback: _jsx(LoadingView, { color: backgroundColor.accented, delay: 0 }), children: _jsx(TransitionView, { style: styles.fill, enter: styles.modalEnter, leave: styles.modalLeave, children: visible ? (_jsx(ResponsiveContainer, { style: styles.root, breakpoint: breakpoints.tiny, children: ({ large, small }) => (_jsx(FocusTrap, { autoFocus: true, focusLock: true, returnFocus: true, onEscapeKey: onPressClose, style: styles.trap, children: _jsxs(ScrollView, { style: styles.modalContainer, contentContainerStyle: large ? styles.modalContentContainer : styles.modalContentContainerSmall, children: [onPressClose != null ? (_jsx(Pressable, { onPress: onPressClose, style: styles.pressableOverlay })) : null, _jsxs(View, { style: [large ? styles.modal : styles.modalSmall, { maxWidth }], children: [_jsxs(View, { style: styles.modalHeader, children: [_jsxs(View, { style: styles.modalIconTitle, children: [icon != null ? (_jsx(Icon, { name: icon, size: large ? 40 : 32, color: colors[color].primary })) : null, icon != null && title != null ? _jsx(Space, { height: 12 }) : null, title != null ? (_jsxs(_Fragment, { children: [_jsx(LakeHeading, { level: 2, variant: "h3", children: title }), _jsx(Space, { height: 12 })] })) : null, icon != null && title != null ? _jsx(Space, { height: 8 }) : null] }), onPressClose != null ? (_jsx(LakeButton, { style: styles.closeButton, mode: "tertiary", onPress: onPressClose, icon: "lake-close" })) : null] }), typeof children == "function" ? children({ large, small }) : children] })] }) })) })) : null }) })] }) }));
+};

package/src/components/LakeRadio.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ColorVariants } from "../constants/design";
+type Props = {
+    value: boolean;
+    disabled?: boolean;
+    color?: ColorVariants;
+};
+export declare const LakeRadio: ({ value, disabled, color }: Props) => JSX.Element;
+export {};

package/src/components/LakeRadio.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet, View } from "react-native";
+import { backgroundColor, colors } from "../constants/design";
+const OUTER_CIRCLE_SIZE = 16;
+const INNER_CIRCLE_SIZE = 8;
+const styles = StyleSheet.create({
+    outerCircle: {
+        backgroundColor: backgroundColor.accented,
+        justifyContent: "center",
+        alignItems: "center",
+        height: OUTER_CIRCLE_SIZE,
+        width: OUTER_CIRCLE_SIZE,
+        borderRadius: OUTER_CIRCLE_SIZE / 2,
+        borderWidth: 1,
+        borderColor: colors.gray[500],
+    },
+    innerCircle: {
+        justifyContent: "center",
+        alignItems: "center",
+        height: INNER_CIRCLE_SIZE,
+        width: INNER_CIRCLE_SIZE,
+        borderRadius: INNER_CIRCLE_SIZE / 2,
+        transform: [{ scale: 0 }],
+        transitionProperty: "transform",
+        transitionDuration: "100ms",
+    },
+    innerCircleDisplay: {
+        transform: [{ scale: 1 }],
+    },
+});
+export const LakeRadio = ({ value, disabled = false, color = "current" }) => (_jsx(View, { style: [
+        styles.outerCircle,
+        value && { borderColor: colors[color].primary },
+        disabled && {
+            borderColor: colors.gray[300],
+        },
+    ], accessibilityRole: "none", children: _jsx(View, { accessibilityHidden: !value, style: [
+            styles.innerCircle,
+            { backgroundColor: colors[color].primary },
+            disabled && {
+                backgroundColor: colors.gray[200],
+            },
+            value && styles.innerCircleDisplay,
+        ] }) }));

package/src/components/LakeScrollView.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { ViewProps } from "react-native";
+type Props = {
+    children: ReactNode;
+    style?: ViewProps["style"];
+    contentContainerStyle?: ViewProps["style"];
+    horizontalSafeArea?: number;
+};
+export declare const LakeScrollView: ({ children, horizontalSafeArea, style, contentContainerStyle, }: Props) => JSX.Element;
+export {};

package/src/components/LakeScrollView.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { ScrollView, StyleSheet, View, } from "react-native";
+import { backgroundColor } from "../constants/design";
+const HORIZONTAL_SAFE_AREA = 20;
+const styles = StyleSheet.create({
+    root: {
+        height: 1,
+        flexGrow: 1,
+    },
+    container: {
+        height: 1,
+        flexGrow: 1,
+    },
+    topGradient: {
+        height: 30,
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: 0,
+        backgroundImage: `linear-gradient(to bottom, ${backgroundColor.default}, ${backgroundColor.defaultTransparent})`,
+        opacity: 0,
+        transition: "200ms ease-in-out opacity",
+    },
+    visibleTopGradient: {
+        opacity: 1,
+    },
+});
+export const LakeScrollView = ({ children, horizontalSafeArea = HORIZONTAL_SAFE_AREA, style, contentContainerStyle, }) => {
+    const [isScrolled, setIsScrolled] = useState(false);
+    const onScroll = useCallback((event) => {
+        setIsScrolled(event.nativeEvent.contentOffset.y > 0);
+    }, []);
+    return (_jsxs(View, { style: styles.root, children: [_jsx(ScrollView, { onScroll: onScroll, scrollEventThrottle: 16, style: [styles.container, { marginHorizontal: -horizontalSafeArea }, style], contentContainerStyle: [{ paddingHorizontal: horizontalSafeArea }, contentContainerStyle], children: children }), _jsx(View, { style: [styles.topGradient, isScrolled && styles.visibleTopGradient], pointerEvents: "none" })] }));
+};

package/src/components/LakeSearchField.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+type Props = {
+    initialValue: string;
+    placeholder: string;
+    onChangeText: (text: string) => void;
+    debounceDuration?: number;
+    maxWidth?: number;
+};
+export declare const LakeSearchField: ({ initialValue, placeholder, onChangeText, debounceDuration, maxWidth, }: Props) => JSX.Element;
+export {};

package/src/components/LakeSearchField.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import { animations, backgroundColor, colors, radii } from "../constants/design";
+import { useBoolean } from "../hooks/useBoolean";
+import { useDebounce } from "../hooks/useDebounce";
+import { LakeButton } from "./LakeButton";
+import { LakeTextInput } from "./LakeTextInput";
+import { ResponsiveContainer } from "./ResponsiveContainer";
+import { Line, Svg } from "./Svg";
+import { TransitionView } from "./TransitionView";
+const styles = StyleSheet.create({
+    root: {
+        flexGrow: 1,
+        flexShrink: 1,
+        // ResponsiveContainer uses a 200 breaking,
+        // we give the opportunity to the component to grow 2px more
+        // to trigger the change
+        maxWidth: 202,
+        minWidth: 38,
+    },
+    container: {
+        width: "100%",
+        flexGrow: 1,
+        flexShrink: 0,
+        alignSelf: "flex-end",
+    },
+    input: {
+        paddingRight: 50,
+        minWidth: 200,
+        // fixes a responsiveness bug where the default input width is too large
+        width: 1,
+        flexGrow: 1,
+        transition: "300ms ease-in-out border-color",
+    },
+    focus: {
+        outlineStyle: "none",
+        borderColor: colors.current.primary,
+    },
+    clearButton: {
+        position: "absolute",
+        right: 0,
+        top: "50%",
+        transform: [{ translateY: "-50%" }],
+        padding: 16,
+    },
+    clear: {
+        width: 8,
+        height: 8,
+        display: "flex",
+    },
+    smallButtonContainer: {
+        flexDirection: "row",
+        justifyContent: "flex-end",
+    },
+    openSearchFieldContainer: {
+        position: "absolute",
+        right: 0,
+        top: 0,
+        bottom: 0,
+    },
+    openSearchField: {
+        position: "absolute",
+        right: 0,
+        top: 0,
+        bottom: 0,
+        boxShadow: `0 0 20px 20px ${backgroundColor.default}`,
+        borderRadius: radii[6],
+    },
+});
+const CollapsibleSeachField = ({ inputRef, placeholder, initialValue, onChange, setFocused, hasFocus, clear, currentValue, }) => {
+    return (_jsxs(View, { children: [_jsx(LakeButton, { mode: "secondary", size: "small", accessibilityLabel: placeholder, icon: "search-filled", onPress: () => {
+                    setFocused.on();
+                }, pill: currentValue !== "" }), _jsx(TransitionView, { style: styles.openSearchFieldContainer, ...animations.fadeAndSlideInFromRight, children: hasFocus ? (_jsx(View, { style: styles.openSearchField, children: _jsx(ExpandedSearchField, { inputRef: inputRef, placeholder: placeholder, initialValue: initialValue, onChange: onChange, setFocused: setFocused, hasFocus: hasFocus, clear: clear, currentValue: currentValue }) })) : null })] }));
+};
+const ExpandedSearchField = ({ inputRef, placeholder, initialValue, onChange, setFocused, hasFocus, clear, }) => {
+    const timeoutRef = useRef(null);
+    return (_jsxs(View, { style: styles.container, children: [_jsx(LakeTextInput, { ref: inputRef, autoFocus: hasFocus, icon: "search-filled", placeholder: placeholder, defaultValue: initialValue, keyboardType: "web-search", onChangeText: onChange, hideErrors: true, onFocus: () => {
+                    if (timeoutRef.current != null) {
+                        clearTimeout(timeoutRef.current);
+                    }
+                    setFocused.on();
+                }, onBlur: () => {
+                    timeoutRef.current = window.setTimeout(() => {
+                        setFocused.off();
+                    }, 300);
+                }, style: [styles.input, hasFocus ? styles.focus : null] }), _jsx(Pressable, { onPress: () => {
+                    if (timeoutRef.current != null) {
+                        clearTimeout(timeoutRef.current);
+                    }
+                    clear();
+                }, style: styles.clearButton, children: _jsx(Svg, { viewBox: "0 0 16 16", style: styles.clear, children: _jsxs(_Fragment, { children: [_jsx(Line, { x1: "0", x2: "16", y1: "0", y2: "16", strokeLinecap: "round", stroke: colors.gray[500], strokeWidth: 2 }), _jsx(Line, { x1: "0", x2: "16", y1: "16", y2: "0", strokeLinecap: "round", stroke: colors.gray[500], strokeWidth: 2 })] }) }) })] }));
+};
+export const LakeSearchField = ({ initialValue, placeholder, onChangeText, debounceDuration = 500, maxWidth, }) => {
+    const [hasFocus, setFocused] = useBoolean(false);
+    const inputRef = useRef(null);
+    const [currentValue, setCurrentValue] = useState(initialValue);
+    const onChange = useDebounce((value) => {
+        onChangeText(value);
+        setCurrentValue(value.trim());
+    }, debounceDuration);
+    const clear = useCallback(() => {
+        if (inputRef.current instanceof HTMLInputElement) {
+            inputRef.current.clear();
+            inputRef.current.focus();
+            onChangeText("");
+            setCurrentValue("");
+        }
+    }, [onChangeText]);
+    return (_jsx(ResponsiveContainer, { breakpoint: 200, style: [styles.root, maxWidth != null && { maxWidth }], children: ({ large }) => large ? (_jsx(ExpandedSearchField, { inputRef: inputRef, placeholder: placeholder, initialValue: initialValue, onChange: onChange, setFocused: setFocused, hasFocus: hasFocus, clear: clear, currentValue: currentValue })) : (_jsx(View, { style: styles.smallButtonContainer, children: _jsx(CollapsibleSeachField, { inputRef: inputRef, placeholder: placeholder, initialValue: initialValue, onChange: onChange, setFocused: setFocused, hasFocus: hasFocus, clear: clear, currentValue: currentValue }) })) }));
+};

package/src/components/LakeSelect.d.ts

@@ -0,0 +1,30 @@
+import { ReactElement, ReactNode } from "react";
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
+import { ColorVariants } from "../constants/design";
+import { IconName } from "./Icon";
+export type Item<V> = {
+    name: string;
+    value: V;
+    icon?: ReactNode;
+};
+export type SelectProps<V> = {
+    placeholder?: string;
+    items: Item<V>[];
+    matchReferenceWidth?: boolean;
+    mode?: "normal" | "borderless";
+    title?: string;
+    valueStyle?: StyleProp<TextStyle>;
+    PopoverFooter?: ReactElement;
+    size?: "small" | "large";
+    icon?: IconName;
+    color?: ColorVariants;
+    disabled?: boolean;
+    value?: V;
+    onValueChange: (value: V) => void;
+    hideErrors?: boolean;
+    nativeID?: string;
+    error?: string;
+    readOnly?: boolean;
+    style?: StyleProp<ViewStyle>;
+};
+export declare function LakeSelect<V>({ title, items, valueStyle, size, color, disabled, mode, placeholder, readOnly, nativeID, matchReferenceWidth, value, error, hideErrors, icon, onValueChange, PopoverFooter, style, }: SelectProps<V>): JSX.Element;

package/src/components/LakeSelect.js

@@ -0,0 +1,183 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef } from "react";
+import { FlatList, StyleSheet, View, } from "react-native";
+import { match } from "ts-pattern";
+import { commonStyles } from "../constants/commonStyles";
+import { colors, invariantColors, radii, shadows, spacings, texts, } from "../constants/design";
+import { useDisclosure } from "../hooks/useDisclosure";
+import { getFocusableElements } from "../utils/a11y";
+import { isNotNullish } from "../utils/nullish";
+import { Box } from "./Box";
+import { Fill } from "./Fill";
+import { Icon } from "./Icon";
+import { LakeText } from "./LakeText";
+import { Popover } from "./Popover";
+import { Pressable } from "./Pressable";
+import { Separator } from "./Separator";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    normal: {
+        backgroundColor: colors.gray.contrast,
+        borderColor: colors.gray[100],
+        borderRadius: radii[6],
+        borderWidth: 1,
+        justifyContent: "center",
+        minWidth: 100,
+        paddingHorizontal: spacings[16],
+        height: 40,
+    },
+    borderless: {
+        justifyContent: "center",
+        height: 40,
+        paddingHorizontal: spacings[16],
+    },
+    small: {
+        paddingVertical: 5,
+    },
+    shadowed: {
+        position: "absolute",
+        opacity: 0,
+        left: 0,
+        top: 0,
+        width: "100%",
+        height: "100%",
+        borderRadius: radii[6],
+        boxShadow: shadows.tile,
+        transitionDuration: "150ms",
+        transitionProperty: "opacity",
+    },
+    hovered: {
+        opacity: 1,
+    },
+    selectPlaceholder: texts.placeholder,
+    selectSmallPlaceholder: texts.smallPlaceholder,
+    selected: {
+        color: colors.gray[800],
+    },
+    inputDisabled: {
+        backgroundColor: colors.gray[50],
+        borderColor: colors.gray[50],
+        cursor: "not-allowed",
+    },
+    listContent: {
+        paddingVertical: 12,
+    },
+    item: {
+        display: "flex",
+        paddingHorizontal: spacings[24],
+        paddingVertical: spacings[8],
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+    },
+    itemHighlighted: {
+        backgroundColor: colors.gray[50],
+    },
+    itemFocused: {
+        boxShadow: `inset 0 0 0 1px ${colors.gray[500]}`,
+        borderRadius: radii[4],
+        outlineStyle: "none",
+    },
+    selectListTitle: {
+        paddingHorizontal: spacings[24],
+        paddingVertical: spacings[12],
+    },
+    inputBorderlessDisabled: {
+        backgroundColor: invariantColors.transparent,
+    },
+    itemText: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    errorText: {
+        paddingTop: spacings[4],
+    },
+    focusedInput: {
+        borderColor: colors.gray[500],
+        boxShadow: shadows.tile,
+        outlineStyle: "none",
+    },
+    focusedWithoutShadow: {
+        boxShadow: "none",
+    },
+    errorContainer: {
+        borderColor: colors.negative[500],
+    },
+});
+export function LakeSelect({ title, items, valueStyle, size, color = "current", disabled = false, mode = "normal", placeholder, readOnly = false, nativeID, matchReferenceWidth = true, value, error, hideErrors = false, icon, onValueChange, PopoverFooter, style, }) {
+    const inputRef = useRef(null);
+    const listRef = useRef(null);
+    const typingTimeoutRef = useRef(undefined);
+    const currentlyTypedRef = useRef(undefined);
+    const listItemRefs = useRef(Array(items.length));
+    const [visible, { close, toggle }] = useDisclosure(false);
+    const hasValue = isNotNullish(value);
+    const isSmall = size === "small";
+    const itemValue = items.find(i => i.value === value);
+    const onKeyDown = useCallback((event) => {
+        if (event.nativeEvent.key.length === 1) {
+            const currentlyTyped = `${currentlyTypedRef.current ?? ""}${event.nativeEvent.key.toLowerCase()}`;
+            currentlyTypedRef.current = currentlyTyped;
+            const selectedIndex = items.findIndex(item => item.name.toLowerCase().startsWith(currentlyTyped));
+            const selected = items[selectedIndex];
+            if (selected != null) {
+                if (visible) {
+                    const listElement = listRef.current;
+                    if (listElement != null) {
+                        listItemRefs.current[selectedIndex]?.focus();
+                    }
+                }
+                else {
+                    onValueChange(selected.value);
+                }
+            }
+        }
+        if (typingTimeoutRef.current != null) {
+            window.clearTimeout(typingTimeoutRef.current);
+        }
+        typingTimeoutRef.current = window.setTimeout(() => {
+            currentlyTypedRef.current = undefined;
+        }, 300);
+    }, [items, onValueChange, visible]);
+    const name = itemValue?.name ?? value;
+    return (_jsxs(View, { style: commonStyles.fill, children: [_jsx(Pressable, { nativeID: nativeID, ref: inputRef, accessibilityHasPopup: "listbox", accessibilityRole: "button", accessibilityExpanded: visible, disabled: readOnly || disabled, style: ({ focused }) => [
+                    mode === "normal" ? styles.normal : styles.borderless,
+                    size === "small" && styles.small,
+                    (disabled || readOnly) && styles.inputDisabled,
+                    (visible || focused) && styles.focusedInput,
+                    mode === "borderless" && styles.focusedWithoutShadow,
+                    mode !== "borderless" && error != null && styles.errorContainer,
+                    (disabled || readOnly) && mode === "borderless" && styles.inputBorderlessDisabled,
+                    style,
+                ], onPress: toggle, onKeyDown: onKeyDown, accessibilityErrorMessage: error, children: ({ hovered }) => (_jsxs(_Fragment, { children: [mode === "normal" && _jsx(View, { style: [styles.shadowed, hovered && styles.hovered] }), _jsxs(Box, { direction: "row", justifyContent: "spaceBetween", alignItems: "center", children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [icon && (_jsxs(_Fragment, { children: [_jsx(Icon, { color: colors[color].primary, name: icon, size: isSmall ? 16 : 18 }), _jsx(Space, { width: 8 })] })), hasValue ? (_jsxs(LakeText, { color: colors.gray[900], variant: isSmall ? "smallRegular" : "regular", style: [styles.itemText, valueStyle], children: [isNotNullish(itemValue?.icon) && (_jsxs(_Fragment, { children: [itemValue?.icon, _jsx(Space, { width: 12 })] })), name] })) : (_jsx(LakeText, { style: [styles.selectPlaceholder, isSmall && styles.selectSmallPlaceholder], children: placeholder ?? " " }))] }), _jsx(Fill, { minWidth: 8 }), !disabled && (_jsx(Icon, { color: colors.gray[900], name: visible ? "chevron-up-filled" : "chevron-down-filled", size: 16 }))] })] })) }), !hideErrors && (_jsx(LakeText, { color: colors.negative[400], style: styles.errorText, children: error ?? " " })), _jsxs(Popover, { role: "listbox", matchReferenceMinWidth: matchReferenceWidth, onDismiss: close, referenceRef: inputRef, returnFocus: true, visible: visible, children: [isNotNullish(title) && (_jsxs(_Fragment, { children: [_jsx(LakeText, { variant: "semibold", color: colors.gray[900], style: styles.selectListTitle, children: title }), _jsx(Separator, {})] })), _jsx(FlatList, { accessibilityRole: "list", data: items, ref: listRef, contentContainerStyle: styles.listContent, onKeyDown: e => {
+                            match(e.nativeEvent.key)
+                                .with("ArrowDown", () => {
+                                e.preventDefault();
+                                if (isNotNullish(e.currentTarget)) {
+                                    const focusableElements = getFocusableElements(e.currentTarget);
+                                    const current = focusableElements.indexOf(e.target);
+                                    focusableElements[current + 1]?.focus();
+                                }
+                            })
+                                .with("ArrowUp", () => {
+                                e.preventDefault();
+                                if (isNotNullish(e.currentTarget)) {
+                                    const focusableElements = getFocusableElements(e.currentTarget);
+                                    const current = focusableElements.indexOf(e.target);
+                                    focusableElements[current - 1]?.focus();
+                                }
+                            })
+                                .otherwise(() => { });
+                        }, keyExtractor: (_, index) => `select-item-${index}`, renderItem: ({ item, index }) => {
+                            const isSelected = value === item.value;
+                            return (_jsxs(Pressable, { ref: element => (listItemRefs.current[index] = element), onKeyDown: onKeyDown, style: ({ hovered, focused }) => [
+                                    styles.item,
+                                    (hovered || isSelected) && styles.itemHighlighted,
+                                    focused && styles.itemFocused,
+                                ], accessibilityRole: "option", accessibilitySelected: true, onPress: () => {
+                                    onValueChange(item.value);
+                                    close();
+                                }, children: [_jsxs(LakeText, { color: colors.gray[900], numberOfLines: 1, style: [styles.itemText, isSelected && styles.selected], children: [isNotNullish(item.icon) && (_jsxs(_Fragment, { children: [item.icon, _jsx(Space, { width: 12 })] })), item.name] }), isSelected && (_jsx(Icon, { color: colors.positive[500], name: "checkmark-filled", size: 14 }))] }));
+                        } }), PopoverFooter] })] }));
+}

package/src/components/LakeSlider.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export type SliderProps = {
+    label: string;
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    unit: string;
+    onChange: (value: number) => void;
+};
+export declare const sliderBreakpoint: number;
+export declare const LakeSlider: ({ label, value, min, max, step, unit, onChange }: SliderProps) => JSX.Element;

package/src/components/LakeSlider.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { breakpoints } from "../constants/design";
+import { Box } from "./Box";
+import { LakeLabel } from "./LakeLabel";
+import { LakeTextInput } from "./LakeTextInput";
+import { ResponsiveContainer } from "./ResponsiveContainer";
+const styles = StyleSheet.create({
+    container: {
+        zIndex: 1,
+    },
+    input: {
+        maxWidth: 120,
+        zIndex: 1,
+        position: "relative",
+    },
+});
+export const sliderBreakpoint = breakpoints.tiny;
+export const LakeSlider = ({ label, value, min, max, step, unit, onChange }) => {
+    const [dirtyValue, setDirtyValue] = useState(String(value));
+    useEffect(() => {
+        setDirtyValue(String(value));
+    }, [value]);
+    const sanitizeInput = useCallback(() => {
+        const cleanValue = Math.max(Math.min(Number(dirtyValue), max), min);
+        setDirtyValue(String(cleanValue));
+        onChange(cleanValue);
+    }, [min, max, dirtyValue, onChange]);
+    return (_jsx(ResponsiveContainer, { breakpoint: sliderBreakpoint, style: styles.container, children: ({ large }) => (_jsx(_Fragment, { children: large ? (_jsxs(_Fragment, { children: [_jsx(Box, { direction: "row", justifyContent: "end", children: _jsx(View, { children: _jsx(LakeTextInput, { style: styles.input, unit: unit, value: dirtyValue, onChangeText: setDirtyValue, onBlur: sanitizeInput, keyboardType: "decimal-pad" }) }) }), _jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: event => onChange(Number(event.target.value)), style: { backgroundSize: `${((value - min) / (max - min)) * 100}% 100%` } })] })) : (_jsx(LakeLabel, { label: label, render: id => (_jsx(LakeTextInput, { nativeID: id, unit: unit, value: dirtyValue, onChangeText: setDirtyValue, onBlur: sanitizeInput, keyboardType: "decimal-pad" })) })) })) }));
+};

package/src/components/LakeStepper.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { StyleProp, ViewStyle } from "react-native";
+export type Step = {
+    id: string;
+    label: string;
+    url: string;
+    hasErrors?: boolean;
+};
+export type StepWithChildren = {
+    label: string;
+    children: Step[];
+};
+export type TopLevelStep = Step | StepWithChildren;
+type Props = {
+    steps: TopLevelStep[];
+    activeStepId: string;
+    style?: StyleProp<ViewStyle>;
+};
+export declare const LakeStepper: ({ steps, activeStepId, style }: Props) => JSX.Element;
+export declare const MobileStepTitle: ({ steps, activeStepId }: Props) => JSX.Element | null;
+export {};