@swan-io/lake 1.0.0

package/src/components/LakeButton.js

@@ -0,0 +1,171 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, forwardRef, Fragment, memo } from "react";
+import { ActivityIndicator, StyleSheet, View, } from "react-native";
+import { match } from "ts-pattern";
+import { backgroundColor, colors, invariantColors, radii, spacings, texts, } from "../constants/design";
+import { isNotNullish, isNullish } from "../utils/nullish";
+import { Icon } from "./Icon";
+import { LakeText } from "./LakeText";
+import { Pressable } from "./Pressable";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    base: {
+        alignItems: "center",
+        backgroundColor: colors.gray[900],
+        borderRadius: radii[6],
+        flexDirection: "row",
+        flexShrink: 0,
+        height: 48,
+        minWidth: 90,
+        justifyContent: "center",
+        paddingHorizontal: 20,
+        transitionDuration: "150ms",
+        transitionProperty: ["background-color", "color"],
+    },
+    grow: {
+        flexGrow: 1,
+    },
+    iconOnly: {
+        minWidth: 48,
+        width: 48,
+        paddingRight: 0,
+        paddingLeft: 0,
+    },
+    iconSmallOnly: {
+        minWidth: 40,
+        width: 40,
+        paddingRight: 0,
+        paddingLeft: 0,
+    },
+    hiddenView: {
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        transitionDuration: "150ms",
+        transitionProperty: "opacity",
+        opacity: 0,
+    },
+    pressed: {
+        opacity: 0.15,
+        backgroundColor: colors.gray[900],
+    },
+    small: {
+        height: 40,
+        paddingLeft: 16,
+        paddingRight: 16,
+    },
+    withIconStart: {
+        paddingRight: 24,
+        paddingLeft: 26,
+    },
+    withIconStartSmall: {
+        paddingRight: 19.5,
+        paddingLeft: 21.5,
+    },
+    withIconEnd: {
+        paddingRight: 20,
+        paddingLeft: 24,
+    },
+    withIconEndSmall: {
+        paddingRight: 20.5,
+        paddingLeft: 21.5,
+    },
+    text: texts.semibold,
+    textSmall: texts.smallSemibold,
+    disabled: {
+        cursor: "not-allowed",
+        opacity: 0.3,
+    },
+    loaderContainer: {
+        ...StyleSheet.absoluteFillObject,
+        alignItems: "center",
+        justifyContent: "center",
+        transform: [{ translateZ: 0 }],
+        borderRadius: radii[6],
+    },
+    group: {
+        flexDirection: "row",
+        alignItems: "stretch",
+        paddingVertical: spacings[16],
+    },
+    pill: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+        borderWidth: 2,
+        borderColor: backgroundColor.default,
+        backgroundColor: colors.negative[500],
+        position: "absolute",
+        top: -3,
+        right: -3,
+    },
+});
+const isReactText = (node) => ["string", "number"].includes(typeof node);
+export const LakeButton = memo(forwardRef(({ accessibilityControls, accessibilityExpanded, accessibilityLabel, children, color = "gray", disabled = false, icon, grow = false, iconPosition = "start", loading = false, mode = "primary", onPress, size = "large", style, forceBackground = false, href, hrefAttrs, pill, }, forwardedRef) => {
+    const isSmall = size === "small";
+    const iconSize = isSmall ? 18 : 20;
+    const hasIconStart = isNotNullish(icon) && iconPosition === "start";
+    const hasIconEnd = isNotNullish(icon) && iconPosition === "end";
+    const hasOnlyIcon = isNullish(children) && isNotNullish(icon);
+    return (_jsx(Pressable, { href: href, hrefAttrs: hrefAttrs, accessibilityRole: href != null ? "link" : "button", accessibilityBusy: loading, accessibilityDisabled: disabled, accessibilityControls: accessibilityControls, accessibilityExpanded: accessibilityExpanded, accessibilityLabel: accessibilityLabel, disabled: loading || disabled, ref: forwardedRef, onPress: onPress, style: ({ hovered, pressed, focused }) => [
+            styles.base,
+            isSmall && styles.small,
+            hasIconStart && isSmall ? styles.withIconStartSmall : styles.withIconStart,
+            hasIconEnd && (isSmall ? styles.withIconEndSmall : styles.withIconEnd),
+            hasOnlyIcon && (isSmall ? styles.iconSmallOnly : styles.iconOnly),
+            disabled && styles.disabled,
+            grow && styles.grow,
+            typeof style == "function" ? style({ hovered, pressed, focused }) : style,
+            match(mode)
+                .with("primary", () => ({
+                backgroundColor: color === "warning"
+                    ? hovered
+                        ? colors[color][600]
+                        : colors[color][500]
+                    : hovered
+                        ? colors[color].secondary
+                        : colors[color].primary,
+            }))
+                .with("secondary", () => ({
+                backgroundColor: pressed
+                    ? colors[color][100]
+                    : hovered
+                        ? colors[color][50]
+                        : forceBackground
+                            ? backgroundColor.accented
+                            : invariantColors.transparent,
+                borderWidth: 1,
+                borderColor: hovered ? colors[color][600] : colors[color][300],
+            }))
+                .with("tertiary", () => ({
+                backgroundColor: pressed
+                    ? colors[color][200]
+                    : hovered
+                        ? colors[color][100]
+                        : invariantColors.transparent,
+            }))
+                .exhaustive(),
+        ], children: ({ pressed, hovered }) => {
+            const textColor = mode === "secondary" || mode === "tertiary"
+                ? hovered || pressed
+                    ? colors[color][700]
+                    : colors[color][600]
+                : colors[color].contrast;
+            return (_jsxs(_Fragment, { children: [hasIconStart && (_jsxs(_Fragment, { children: [_jsx(Icon, { color: textColor, name: icon, size: iconSize }), isNotNullish(children) && _jsx(Space, { width: isSmall ? 8 : 12 })] })), isReactText(children) ? (_jsx(LakeText, { numberOfLines: 1, selectable: false, style: [isSmall ? styles.textSmall : styles.text, { color: textColor }], children: children })) : (children), hasIconEnd && (_jsxs(_Fragment, { children: [isNotNullish(children) && _jsx(Space, { width: isSmall ? 8 : 12 }), _jsx(Icon, { color: textColor, name: icon, size: iconSize })] })), loading && (_jsx(View, { accessibilityRole: "none", style: [
+                            styles.loaderContainer,
+                            {
+                                backgroundColor: mode === "secondary" || mode === "tertiary"
+                                    ? backgroundColor.accented
+                                    : colors[color].primary,
+                            },
+                        ], children: _jsx(ActivityIndicator, { color: mode === "secondary" || mode === "tertiary"
+                                ? colors[color].primary
+                                : colors[color].contrast, size: iconSize }) })), _jsx(View, { style: [styles.hiddenView, pressed && mode === "primary" && styles.pressed] }), pill === true ? _jsx(View, { style: styles.pill }) : null] }));
+        } }));
+}));
+LakeButton.displayName = "Button";
+const ZERO = 0;
+export const LakeButtonGroup = ({ children, justifyContent = "flex-start", paddingBottom = 16, }) => (_jsx(View, { style: [
+        styles.group,
+        { justifyContent, paddingBottom: paddingBottom === 0 ? ZERO : spacings[paddingBottom] },
+    ], children: Children.toArray(children).map((item, index) => (_jsxs(Fragment, { children: [index > 0 ? _jsx(Space, { width: 16 }) : null, item] }, index))) }));

package/src/components/LakeCheckbox.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ColorVariants } from "../constants/design";
+export type CheckboxProps = {
+    value: boolean | "mixed";
+    color?: ColorVariants;
+    disabled?: boolean;
+    isError?: boolean;
+};
+export declare const LakeCheckbox: ({ value, color, disabled, isError, }: CheckboxProps) => JSX.Element;
+export type LabelledCheckboxProps = CheckboxProps & {
+    onValueChange: (value: boolean) => void;
+    label: string;
+    disabled?: boolean;
+    isError?: boolean;
+};
+export declare const LakeLabelledCheckbox: ({ value, color, label, onValueChange, disabled, isError, }: LabelledCheckboxProps) => JSX.Element;

package/src/components/LakeCheckbox.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { colors } from "../constants/design";
+import { LakeText } from "./LakeText";
+import { Pressable } from "./Pressable";
+import { Space } from "./Space";
+import { Animate, Path, Svg } from "./Svg";
+const SIZE = 16;
+const RADIUS = 4;
+const styles = StyleSheet.create({
+    container: {
+        width: SIZE,
+        height: SIZE,
+        borderRadius: RADIUS,
+        borderWidth: 1,
+        borderColor: colors.gray[500],
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    mixed: {
+        width: SIZE - 8,
+        height: 2,
+    },
+    labelled: {
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    disabled: {
+        opacity: 0.5,
+    },
+});
+export const LakeCheckbox = ({ value, color = "current", disabled = false, isError = false, }) => {
+    const isFirstRender = useRef(true);
+    const [shouldAnimate, setShouldAnimate] = useState(false);
+    useEffect(() => {
+        if (!isFirstRender.current) {
+            setShouldAnimate(true);
+        }
+        isFirstRender.current = false;
+    }, [value]);
+    return (_jsxs(View, { accessibilityRole: "none", style: [
+            styles.container,
+            disabled && styles.disabled,
+            value !== false && {
+                backgroundColor: colors[color].primary,
+                borderColor: colors[color].primary,
+            },
+            isError && { borderColor: colors.negative[500] },
+        ], children: [value === true && (_jsx(Svg, { viewBox: "0 0 16 16", children: _jsx(Path, { d: "m3.5 7.5 2.8 3.4 5.6-6.7", stroke: colors[color].contrast, strokeWidth: 1.5, fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeDasharray: "20", strokeDashoffset: shouldAnimate ? "20" : "0", children: shouldAnimate && (_jsx(Animate, { attributeName: "stroke-dashoffset", values: "20;0", dur: "150ms", begin: "150ms", fill: "freeze" })) }) })), value === "mixed" && (_jsx(View, { style: [styles.mixed, { backgroundColor: colors[color].contrast }] }))] }));
+};
+export const LakeLabelledCheckbox = ({ value, color, label, onValueChange, disabled = false, isError = false, }) => {
+    return (_jsxs(Pressable, { accessibilityChecked: value, style: styles.labelled, onPress: () => onValueChange(value === true ? false : true), disabled: disabled, children: [_jsx(LakeCheckbox, { value: value, color: color, disabled: disabled, isError: isError }), _jsx(Space, { width: 8 }), _jsx(LakeText, { color: colors.gray[900], selectable: false, children: label })] }));
+};

package/src/components/LakeCombobox.d.ts

@@ -0,0 +1,28 @@
+import { AsyncData, Result } from "@swan-io/boxed";
+import { ForwardedRef, ReactNode, RefObject } from "react";
+import { IconName } from "./Icon";
+export type LakeComboboxProps<I> = {
+    value: string;
+    items: AsyncData<Result<I[], unknown>>;
+    ListFooterComponent?: ReactNode;
+    onValueChange: (value: string) => void;
+    onSelectItem: (value: I) => void | Promise<unknown>;
+    renderItem: (item: I) => ReactNode | null;
+    keyExtractor: (item: I) => string;
+    icon?: IconName;
+    placeholder?: string;
+    disabled?: boolean;
+    emptyResultText: string;
+    error?: string;
+    nativeID?: string;
+    readOnly?: boolean;
+};
+export type LakeComboboxRef = {
+    close: () => void;
+    open: () => void;
+};
+declare const LakeComboboxWithRef: <I>({ value, items, ListFooterComponent, onValueChange, onSelectItem, renderItem, keyExtractor, icon, placeholder, disabled, emptyResultText, readOnly, nativeID, error, }: LakeComboboxProps<I>, externalRef: ForwardedRef<LakeComboboxRef>) => JSX.Element;
+export declare const LakeCombobox: <I>(props: LakeComboboxProps<I> & {
+    ref?: RefObject<LakeComboboxRef> | undefined;
+}) => ReturnType<typeof LakeComboboxWithRef>;
+export {};

package/src/components/LakeCombobox.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useId, useImperativeHandle, useRef, useState, } from "react";
+import { FlatList, Pressable, StyleSheet, Text, View, } from "react-native";
+import { backgroundColor, colors, spacings } from "../constants/design";
+import { typography } from "../constants/typography";
+import { useDisclosure } from "../hooks/useDisclosure";
+import { getFocusableElements } from "../utils/a11y";
+import { Box } from "./Box";
+import { Icon } from "./Icon";
+import { LakeTextInput } from "./LakeTextInput";
+import { LoadingView } from "./LoadingView";
+import { Popover } from "./Popover";
+import { Space } from "./Space";
+const ELEMENT_HEIGHT = 64;
+const NB_SUGGESTION_DISPLAYED = 3.5;
+const styles = StyleSheet.create({
+    list: {
+        maxHeight: ELEMENT_HEIGHT * NB_SUGGESTION_DISPLAYED,
+        marginVertical: spacings[8],
+    },
+    flatList: { scrollBehavior: "smooth" },
+    item: {
+        flexShrink: 1,
+        flexGrow: 1,
+        height: ELEMENT_HEIGHT,
+        justifyContent: "center",
+        paddingHorizontal: spacings[24],
+        paddingVertical: 0,
+        transitionProperty: "background-color",
+        transitionDuration: "200ms",
+        outlineStyle: "none",
+        borderColor: colors.gray[100],
+        borderStyle: "solid",
+        borderBottomWidth: 1,
+        justifyContents: "center",
+    },
+    hoveredItem: {
+        backgroundColor: colors.gray[0],
+    },
+    focusedItem: {
+        backgroundColor: colors.gray[0],
+    },
+    pressedItem: {
+        backgroundColor: colors.gray[100],
+    },
+    itemText: {
+        ...typography.bodyLarge,
+    },
+    loader: {
+        padding: spacings[24],
+    },
+    listContainer: {
+        flexGrow: 1,
+        flexShrink: 1,
+    },
+    loaderAdditional: {
+        ...StyleSheet.absoluteFillObject,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    loaderAdditionalUnderlay: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: backgroundColor.accented,
+        opacity: 0.8,
+    },
+    emptyList: {
+        height: 136,
+    },
+    emptyListText: {
+        color: colors.gray.primary,
+    },
+    input: {
+        width: 1,
+        flexGrow: 1,
+    },
+});
+const isReactText = (node) => ["string", "number"].includes(typeof node);
+const getItemLayout = (_data, index) => ({
+    length: ELEMENT_HEIGHT,
+    offset: ELEMENT_HEIGHT * index,
+    index,
+});
+const LakeComboboxWithRef = ({ value, items, ListFooterComponent, onValueChange, onSelectItem, renderItem, keyExtractor, icon, placeholder, disabled = false, emptyResultText, readOnly, nativeID, error, }, externalRef) => {
+    const ref = useRef(null);
+    const listRef = useRef(null);
+    const listContainerRef = useRef(null);
+    const blurTimeoutId = useRef(undefined);
+    const [isFocused, { open, close }] = useDisclosure(false);
+    const [isFetchingAdditionalInfo, setIsFetchingAdditionalInfo] = useState(false);
+    useImperativeHandle(externalRef, () => {
+        return {
+            open,
+            close,
+        };
+    });
+    const suggestionsId = useId();
+    const handleKeyPress = useCallback((event) => {
+        if (event.nativeEvent.key === "ArrowDown") {
+            const listElement = listContainerRef.current;
+            if (listElement != null) {
+                const element = listElement;
+                const focusableElements = getFocusableElements(element, false);
+                focusableElements[0]?.focus();
+                event.preventDefault();
+            }
+        }
+    }, []);
+    const handleListItemKeyPress = useCallback((event) => {
+        if (event.nativeEvent.key === "ArrowDown" || event.nativeEvent.key === "ArrowUp") {
+            const listElement = listContainerRef.current;
+            if (listElement != null) {
+                const element = listElement;
+                const target = event.currentTarget;
+                const focusableElements = getFocusableElements(element, false);
+                const index = focusableElements.indexOf(target);
+                const direction = event.nativeEvent.key === "ArrowDown" ? 1 : -1;
+                if (index === -1) {
+                    return;
+                }
+                const nextIndex = index + direction;
+                event.preventDefault();
+                if (nextIndex === 0) {
+                    ref.current?.focus();
+                }
+                else {
+                    focusableElements[nextIndex === focusableElements.length ? 0 : nextIndex]?.focus();
+                }
+            }
+        }
+    }, []);
+    const handleFocus = useCallback(() => {
+        window.clearTimeout(blurTimeoutId.current);
+        blurTimeoutId.current = window.setTimeout(() => {
+            open();
+        }, 100);
+    }, [open]);
+    const handleBlur = useCallback(() => {
+        window.clearTimeout(blurTimeoutId.current);
+        blurTimeoutId.current = window.setTimeout(() => {
+            close();
+        }, 100);
+    }, [close]);
+    return (_jsxs(View, { children: [_jsx(LakeTextInput, { ref: ref, style: styles.input, accessibilityExpanded: isFocused, accessibilityControls: isFocused ? suggestionsId : "", returnKeyType: "search", icon: icon, accessibilityRole: "combobox", placeholder: placeholder, value: value, disabled: disabled, error: error, onChangeText: onValueChange, onFocus: handleFocus, onBlur: handleBlur, onKeyPress: handleKeyPress, nativeID: nativeID, readOnly: readOnly }), _jsx(Popover, { id: suggestionsId, role: "listbox", matchReferenceWidth: true, onDismiss: close, referenceRef: ref, autoFocus: true, returnFocus: false, visible: isFocused && !items.isNotAsked(), underlay: false, forcedMode: "Dropdown", children: _jsx(View, { style: styles.list, children: items.match({
+                        NotAsked: () => null,
+                        Loading: () => _jsx(LoadingView, { style: styles.loader }),
+                        Done: items => items.match({
+                            Error: _ => (_jsx(Icon, { name: "error-circle-regular", size: 22, color: colors.negative[500] })),
+                            Ok: items => (_jsxs(View, { ref: listContainerRef, style: styles.listContainer, children: [items.length === 0 ? (_jsxs(Box, { justifyContent: "center", alignItems: "center", style: styles.emptyList, children: [_jsx(Icon, { name: "clipboard-search-regular", size: 24, color: colors.gray.primary }), _jsx(Space, { height: 8 }), _jsx(Text, { style: styles.emptyListText, children: emptyResultText })] })) : (_jsx(FlatList, { ref: listRef, keyExtractor: keyExtractor, getItemLayout: getItemLayout, accessibilityRole: "list", data: items, style: styles.flatList, renderItem: ({ item }) => {
+                                            const rendered = renderItem(item);
+                                            return (_jsx(Pressable, { onFocus: handleFocus, onBlur: handleBlur, accessibilityRole: "listitem", onKeyDown: handleListItemKeyPress, style: ({ hovered, pressed, focused }) => [
+                                                    styles.item,
+                                                    hovered && styles.hoveredItem,
+                                                    focused && styles.focusedItem,
+                                                    pressed && styles.pressedItem,
+                                                ], onPress: () => {
+                                                    setIsFetchingAdditionalInfo(true);
+                                                    Promise.resolve(onSelectItem(item)).finally(() => {
+                                                        setIsFetchingAdditionalInfo(false);
+                                                        close();
+                                                    });
+                                                }, children: isReactText(rendered) ? (_jsx(Text, { numberOfLines: 1, selectable: false, style: styles.itemText, children: rendered })) : (rendered) }));
+                                        } })), ListFooterComponent, isFetchingAdditionalInfo ? (_jsxs(View, { style: styles.loaderAdditional, children: [_jsx(View, { style: styles.loaderAdditionalUnderlay }), _jsx(LoadingView, {})] })) : null] })),
+                        }),
+                    }) }) })] }));
+};
+export const LakeCombobox = forwardRef(LakeComboboxWithRef);

package/src/components/LakeCopyButton.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+type Props = {
+    valueToCopy: string;
+    copyText: string;
+    copiedText: string;
+    size?: number;
+};
+export declare const copyButtondefaultSize = 21;
+export declare const LakeCopyButton: ({ valueToCopy, size, copyText, copiedText, }: Props) => JSX.Element;
+export {};

package/src/components/LakeCopyButton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Clipboard } from "react-native";
+import { Icon } from "./Icon";
+import { LakeTooltip } from "./LakeTooltip";
+import { Pressable } from "./Pressable";
+export const copyButtondefaultSize = 21;
+export const LakeCopyButton = ({ valueToCopy, size = copyButtondefaultSize, copyText, copiedText, }) => {
+    const [visibleState, setVisibleState] = useState("copy");
+    return (_jsx(LakeTooltip, { describedBy: "copy", placement: "top", onHide: () => setVisibleState("copy"), togglableOnFocus: true, content: visibleState === "copy" ? copyText : copiedText, children: _jsx(Pressable, { onPress: event => {
+                event.stopPropagation();
+                event.preventDefault();
+                Clipboard.setString(valueToCopy);
+                setVisibleState("copied");
+            }, children: _jsx(Icon, { size: size, name: "copy-regular" }) }) }));
+};

package/src/components/LakeDownloadButton.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+type Props = {
+    url: string;
+    filename: string;
+    onError: () => void;
+};
+export declare const LakeDownloadButton: ({ url, filename }: Props) => JSX.Element;
+export {};

package/src/components/LakeDownloadButton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from "react-native";
+import { Icon } from "./Icon";
+export const LakeDownloadButton = ({ url, filename }) => {
+    return (_jsx(Text, { href: url, hrefAttrs: { download: filename, target: "blank" }, accessibilityHint: "download", children: _jsx(Icon, { size: 18, name: "arrow-download-filled" }) }));
+};

package/src/components/LakeHeading.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { Text, TextProps } from "react-native";
+import { Except } from "type-fest";
+export declare const LakeHeading: import("react").ForwardRefExoticComponent<Except<TextProps, "accessibilityRole"> & {
+    align?: "center" | "left" | "right" | undefined;
+    children: ReactNode;
+    color?: string | undefined;
+    level: 1 | 2 | 3 | 4 | 5 | 6 | "none";
+    variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
+} & import("react").RefAttributes<Text>>;

package/src/components/LakeHeading.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { StyleSheet, Text } from "react-native";
+import { texts } from "../constants/design";
+import { isNotNullish } from "../utils/nullish";
+const alignments = StyleSheet.create({
+    center: { textAlign: "center" },
+    left: { textAlign: "left" },
+    right: { textAlign: "right" },
+});
+const variants = StyleSheet.create({
+    h1: texts.h1,
+    h2: texts.h2,
+    h3: texts.h3,
+    h4: texts.h4,
+    h5: texts.h5,
+    h6: texts.h6,
+});
+export const LakeHeading = forwardRef(({ align = "left", children, color, level, style, variant = "h1", ...props }, forwardedRef) => (_jsx(Text, { ref: forwardedRef, accessibilityRole: level === "none" ? undefined : "header", accessibilityLevel: level === "none" ? undefined : level, style: [variants[variant], alignments[align], isNotNullish(color) && { color }, style], ...props, children: children })));

package/src/components/LakeLabel.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { ColorVariants } from "../constants/design";
+type Props = {
+    label: string;
+    optionalLabel?: string;
+    readOnlyColor?: string;
+    color?: ColorVariants;
+    type?: "form" | "formSmall" | "view" | "viewSmall";
+    extra?: () => ReactNode;
+    help?: ReactNode;
+    render: (id: string) => ReactNode;
+    actions?: ReactNode;
+    readOnly?: boolean;
+    style?: StyleProp<ViewStyle>;
+};
+export declare const defaultLabelType: NonNullable<Props["type"]>;
+export declare const LakeLabel: ({ label, optionalLabel, extra, readOnly, color, readOnlyColor, type, help, render, actions, style, }: Props) => JSX.Element;
+export {};

package/src/components/LakeLabel.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import { StyleSheet, unstable_createElement, View, } from "react-native";
+import { v4 as uuid } from "uuid";
+import { commonStyles } from "../constants/commonStyles";
+import { colors, fonts, spacings, texts } from "../constants/design";
+import { isNotNullish } from "../utils/nullish";
+import { Box } from "./Box";
+import { LakeText } from "./LakeText";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    container: {
+        paddingTop: spacings[4],
+    },
+    label: {
+        ...texts.medium,
+        fontFamily: fonts.primary,
+        color: colors.gray[700],
+    },
+    shrink: {
+        flexShrink: 1,
+    },
+    optionalLabel: {
+        fontStyle: "italic",
+    },
+});
+const Label = (props) => {
+    return unstable_createElement("label", props);
+};
+export const defaultLabelType = "formSmall";
+export const LakeLabel = ({ label, optionalLabel, extra, readOnly = false, color = "current", readOnlyColor = colors[color].primary, type = defaultLabelType, help, render, actions, style, }) => {
+    const [id] = useState(() => uuid());
+    const containerRef = useRef(null);
+    const onClick = useCallback((event) => {
+        event.preventDefault();
+        if (containerRef.current != null) {
+            const container = containerRef.current;
+            const target = container.querySelector(`[id="${id}"]`);
+            target?.focus();
+        }
+    }, [id]);
+    return (_jsxs(Box, { style: [styles.container, style], direction: "row", alignItems: "center", justifyContent: "spaceBetween", children: [_jsxs(View, { style: commonStyles.fill, ref: containerRef, children: [_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", alignItems: "center", children: [_jsxs(Box, { direction: "row", style: styles.shrink, children: [type === "form" || type === "formSmall" ? (_jsxs(Label, { onClick: onClick, htmlFor: id, style: [styles.label, readOnly && { color: readOnlyColor }], children: [label, optionalLabel != null ? (_jsxs(_Fragment, { children: [" - ", _jsx(LakeText, { color: colors.gray[400], style: styles.optionalLabel, children: optionalLabel })] })) : null] })) : (_jsxs(LakeText, { variant: "medium", color: readOnlyColor, nativeID: id, children: [label, optionalLabel != null ? (_jsxs(_Fragment, { children: [" - ", _jsx(LakeText, { color: colors.gray[400], style: styles.optionalLabel, children: optionalLabel })] })) : null] })), isNotNullish(extra) && extra()] }), isNotNullish(help) && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 16 }), help] }))] }), _jsx(Space, { height: type === "formSmall" || type === "viewSmall" ? 4 : 8 }), _jsx(View, { accessibilityLabelledBy: type === "view" || type === "viewSmall" ? id : undefined, children: render(id) })] }), isNotNullish(actions) && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 16 }), actions] }))] }));
+};

package/src/components/LakeModal.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import { ColorVariants } from "../constants/design";
+import { IconName } from "./Icon";
+import { Context } from "./ResponsiveContainer";
+export type LakeModalProps = {
+    visible: boolean;
+    title?: string;
+    icon?: IconName;
+    color?: ColorVariants;
+    children: ReactNode | ((context: Context) => ReactNode);
+    maxWidth?: number;
+    onPressClose?: () => void;
+};
+export declare const LakeModal: ({ visible, icon, title, color, children, maxWidth, onPressClose, }: LakeModalProps) => JSX.Element | null;