@swan-io/lake 2.4.0 → 2.5.0

package/src/components/Filters.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import dayjs from "dayjs";
-import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { FlatList, Pressable, StyleSheet, Text, View } from "react-native";
 import { hasDefinedKeys, useForm } from "react-ux-form";
-import { Rifm } from "rifm";
 import { P, match } from "ts-pattern";
 import { colors, shadows, spacings } from "../constants/design";
 import { useDisclosure } from "../hooks/useDisclosure";
@@ -11,6 +10,7 @@ import { useMergeRefs } from "../hooks/useMergeRefs";
 import { usePreviousValue } from "../hooks/usePreviousValue";
 import { isNotNullish } from "../utils/nullish";
 import { Box } from "./Box";
+import { DatePickerModal, } from "./DatePicker";
 import { Icon } from "./Icon";
 import { LakeButton } from "./LakeButton";
 import { LakeCheckbox } from "./LakeCheckbox";
@@ -154,28 +154,14 @@ function FilterCheckbox({ label, items, width, checkAllLabel, value, onValueChan
                                 return (_jsxs(Pressable, { role: "radio", "aria-checked": isSelected, style: ({ hovered }) => [styles.radio, hovered && styles.itemHovered], onPress: onPress, children: [_jsx(LakeCheckbox, { value: isSelected }), _jsx(Space, { width: 12 }), _jsx(Text, { style: styles.itemLabel, children: item.label })] }));
                             } }), _jsx(Space, { height: 8 }), _jsx(View, { style: styles.buttonContainer, children: _jsx(LakeButton, { color: "current", onPress: save, children: applyButtonLabel }) }), _jsx(Space, { height: 24 })] }) })] }));
 }
-function FilterDate({ label, initialValue, noValueText, submitText, dateFormat, rifmProps, validate, onSave, onPressRemove, autoOpen = false, }) {
+function FilterDate({ label, monthNames, dayNames, initialValue, noValueText, cancelText, submitText, dateFormat, isSelectable, validate, onSave, onPressRemove, autoOpen = false, }) {
     const inputRef = useRef(null);
     const [visible, { close, toggle }] = useDisclosure(autoOpen);
-    const { Field, submitForm, setFieldValue } = useForm({
-        date: {
-            initialValue: isNotNullish(initialValue) ? dayjs(initialValue).format(dateFormat) : "",
-            validate,
-        },
-    });
-    useEffect(() => {
-        setFieldValue("date", isNotNullish(initialValue) ? dayjs(initialValue).format(dateFormat) : "");
-    }, [initialValue, dateFormat, setFieldValue]);
-    const onSubmit = () => {
-        submitForm(values => {
-            if (hasDefinedKeys(values, ["date"])) {
-                const date = dayjs(values.date, dateFormat, true).toJSON();
-                onSave(date);
-                close();
-            }
-        });
-    };
-    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: isNotNullish(initialValue) ? dayjs(initialValue).format(dateFormat) : noValueText }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsxs(View, { style: [styles.dropdown, styles.inputContent], children: [_jsx(Field, { name: "date", children: ({ value, onChange, error }) => (_jsx(Rifm, { value: value, onChange: onChange, ...rifmProps, children: ({ value, onChange }) => (_jsx(LakeLabel, { label: label, render: id => (_jsx(LakeTextInput, { nativeID: id, error: error, style: styles.input, placeholder: dateFormat, value: value, onChange: onChange })) })) })) }), _jsx(LakeButton, { color: "current", size: "small", onPress: onSubmit, children: submitText })] }) })] }));
+    const value = useMemo(() => (isNotNullish(initialValue) ? dayjs(initialValue).format(dateFormat) : ""), [initialValue, dateFormat]);
+    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: isNotNullish(initialValue) ? dayjs(initialValue).format(dateFormat) : noValueText }), _jsx(DatePickerModal, { visible: visible, monthNames: monthNames, weekDayNames: dayNames, format: dateFormat, firstWeekDay: "monday", label: label, cancelLabel: cancelText, confirmLabel: submitText, value: value, isSelectable: isSelectable, validate: validate, onChange: value => {
+                    const formattedValue = dayjs(value, dateFormat, true).toJSON();
+                    onSave(formattedValue);
+                }, onDissmiss: close })] }));
 }
 function FilterInput({ label, initialValue = "", noValueText, submitText, autoOpen = false, placeholder, validate, onSave, onPressRemove, }) {
     const inputRef = useRef(null);
@@ -225,7 +211,7 @@ export const FiltersStack = ({ filters, openedFilters, definition, onChangeOpene
                         onChangeFilters({ ...filters, [filterName]: undefined });
                         onChangeOpened(openedFilters.filter(f => f !== filterName));
                     } })))
-                    .with({ type: "date" }, ({ type, label, noValueText, submitText, dateFormat, rifmProps, validate }) => (_jsx(FilterDate, { label: label, noValueText: noValueText, submitText: submitText, autoOpen: lastOpenedFilter === filterName, dateFormat: dateFormat, rifmProps: rifmProps, validate: validate, initialValue: getFilterValue(type, filters, filterName), onSave: value => onChangeFilters({ ...filters, [filterName]: value }), onPressRemove: () => {
+                    .with({ type: "date" }, ({ type, label, monthNames, dayNames, noValueText, cancelText, submitText, dateFormat, isSelectable, validate, }) => (_jsx(FilterDate, { label: label, monthNames: monthNames, dayNames: dayNames, noValueText: noValueText, cancelText: cancelText, submitText: submitText, dateFormat: dateFormat, autoOpen: lastOpenedFilter === filterName, isSelectable: isSelectable ? date => isSelectable(date, filters) : undefined, validate: validate ? value => validate(value, filters) : undefined, initialValue: getFilterValue(type, filters, filterName), onSave: value => onChangeFilters({ ...filters, [filterName]: value }), onPressRemove: () => {
                         onChangeFilters({ ...filters, [filterName]: undefined });
                         onChangeOpened(openedFilters.filter(f => f !== filterName));
                     } })))

package/src/components/FixedListViewCells.d.ts

@@ -19,13 +19,13 @@ export declare const SimpleTitleCell: ({ isHighlighted, text, }: {
     text: string;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const SimpleRegularTextCell: ({ variant, text, textAlign, color, }: {
-    variant?: "semibold" | "medium" | "regular" | "light" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
+    variant?: "light" | "semibold" | "medium" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
     text: string;
     textAlign?: "left" | "right" | "center" | undefined;
     color?: string | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const CopyableRegularTextCell: ({ variant, text, copyWording, copiedWording, }: {
-    variant?: "semibold" | "medium" | "regular" | "light" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
+    variant?: "light" | "semibold" | "medium" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
     text: string;
     copyWording: string;
     copiedWording: string;

package/src/components/Icon.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { StyleProp, ViewStyle, WebAccessibilityProps } from "react-native";
 declare const paths: {
+    "lake-building-bank": string;
     "lake-calendar-arrow-swap": string;
     "lake-card": string;
     "lake-card-filled": string;
@@ -68,6 +69,8 @@ declare const paths: {
     "cart-regular": string;
     "chat-help-filled": string;
     "chat-help-regular": string;
+    "check-filled": string;
+    "check-regular": string;
     "checkmark-circle-regular": string;
     "checkmark-filled": string;
     "chevron-down-filled": string;

package/src/components/LakeCombobox.d.ts

@@ -1,11 +1,15 @@
 import { AsyncData, Result } from "@swan-io/boxed";
 import { ForwardedRef, ReactNode, RefObject } from "react";
 import { IconName } from "./Icon";
+import { LakeTextInputProps } from "./LakeTextInput";
 export type LakeComboboxProps<I> = {
     inputRef?: RefObject<unknown>;
     value: string;
     items: AsyncData<Result<I[], unknown>>;
+    itemHeight?: number;
+    nbItemsDisplayed?: number;
     ListFooterComponent?: ReactNode;
+    onChange?: LakeTextInputProps["onChange"];
     onValueChange: (value: string) => void;
     onSelectItem: (value: I) => void | Promise<unknown>;
     renderItem: (item: I) => ReactNode | null;
@@ -15,6 +19,7 @@ export type LakeComboboxProps<I> = {
     disabled?: boolean;
     emptyResultText: string;
     error?: string;
+    hideErrors?: boolean;
     id?: string;
     readOnly?: boolean;
 };
@@ -22,7 +27,7 @@ export type LakeComboboxRef = {
     close: () => void;
     open: () => void;
 };
-declare const LakeComboboxWithRef: <I>({ inputRef, value, items, ListFooterComponent, onValueChange, onSelectItem, renderItem, keyExtractor, icon, placeholder, disabled, emptyResultText, readOnly, id, error, }: LakeComboboxProps<I>, externalRef: ForwardedRef<LakeComboboxRef>) => import("react/jsx-runtime").JSX.Element;
+declare const LakeComboboxWithRef: <I>({ inputRef, value, items, itemHeight, nbItemsDisplayed, ListFooterComponent, onChange, onValueChange, onSelectItem, renderItem, keyExtractor, icon, placeholder, disabled, emptyResultText, readOnly, id, error, hideErrors, }: LakeComboboxProps<I>, externalRef: ForwardedRef<LakeComboboxRef>) => import("react/jsx-runtime").JSX.Element;
 export declare const LakeCombobox: <I>(props: LakeComboboxProps<I> & {
     ref?: RefObject<LakeComboboxRef> | undefined;
 }) => ReturnType<typeof LakeComboboxWithRef>;

package/src/components/LakeCombobox.js

@@ -12,18 +12,16 @@ 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 DEFAULT_ELEMENT_HEIGHT = 64;
+const DEFAULT_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,
@@ -78,11 +76,11 @@ const styles = StyleSheet.create({
 });
 const isReactText = (node) => ["string", "number"].includes(typeof node);
 const getItemLayout = (_data, index) => ({
-    length: ELEMENT_HEIGHT,
-    offset: ELEMENT_HEIGHT * index,
+    length: DEFAULT_ELEMENT_HEIGHT,
+    offset: DEFAULT_ELEMENT_HEIGHT * index,
     index,
 });
-const LakeComboboxWithRef = ({ inputRef, value, items, ListFooterComponent, onValueChange, onSelectItem, renderItem, keyExtractor, icon, placeholder, disabled = false, emptyResultText, readOnly, id, error, }, externalRef) => {
+const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEMENT_HEIGHT, nbItemsDisplayed = DEFAULT_NB_SUGGESTION_DISPLAYED, ListFooterComponent, onChange, onValueChange, onSelectItem, renderItem, keyExtractor, icon, placeholder, disabled = false, emptyResultText, readOnly, id, error, hideErrors, }, externalRef) => {
     const ref = useRef(null);
     const inputTextRef = useMergeRefs(ref, inputRef);
     const listRef = useRef(null);
@@ -143,7 +141,7 @@ const LakeComboboxWithRef = ({ inputRef, value, items, ListFooterComponent, onVa
             close();
         }, 100);
     }, [close]);
-    return (_jsxs(View, { children: [_jsx(LakeTextInput, { ref: inputTextRef, style: styles.input, ariaExpanded: isFocused, ariaControls: isFocused ? suggestionsId : "", enterKeyHint: "search", icon: icon, role: "combobox", placeholder: placeholder, value: value, disabled: disabled, error: error, onChangeText: onValueChange, onFocus: handleFocus, onBlur: handleBlur, onKeyPress: handleKeyPress, id: id, 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({
+    return (_jsxs(View, { children: [_jsx(LakeTextInput, { ref: inputTextRef, style: styles.input, ariaExpanded: isFocused, ariaControls: isFocused ? suggestionsId : "", enterKeyHint: "search", icon: icon, role: "combobox", placeholder: placeholder, value: value, disabled: disabled, error: error, hideErrors: hideErrors, onChangeText: onValueChange, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur, onKeyPress: handleKeyPress, id: id, 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, { maxHeight: itemHeight * nbItemsDisplayed }], children: items.match({
                         NotAsked: () => null,
                         Loading: () => _jsx(LoadingView, { style: styles.loader }),
                         Done: items => items.match({
@@ -155,6 +153,7 @@ const LakeComboboxWithRef = ({ inputRef, value, items, ListFooterComponent, onVa
                                                     hovered && styles.hoveredItem,
                                                     focused && styles.focusedItem,
                                                     pressed && styles.pressedItem,
+                                                    { height: itemHeight },
                                                 ], onPress: () => {
                                                     window.clearTimeout(blurTimeoutId.current);
                                                     setIsFetchingAdditionalInfo(true);

package/src/components/LakeText.d.ts

@@ -15,6 +15,6 @@ export declare const LakeText: import("react").ForwardRefExoticComponent<TextPro
     children: ReactNode;
     color?: string | undefined;
     userSelect?: TextStyle["userSelect"];
-    variant?: "semibold" | "medium" | "regular" | "light" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
+    variant?: "light" | "semibold" | "medium" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
 } & import("react").RefAttributes<Text>>;
 export {};

package/src/components/LakeTextInput.d.ts

@@ -224,7 +224,7 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
     disabled?: boolean | undefined;
     color?: "current" | "gray" | "live" | "sandbox" | "positive" | "warning" | "negative" | "partner" | "swan" | "shakespear" | "darkPink" | "sunglow" | "mediumSladeBlue" | undefined;
     multiline?: boolean | undefined;
-    icon?: "lake-calendar-arrow-swap" | "lake-card" | "lake-card-filled" | "lake-card-one-off" | "lake-card-physical" | "lake-card-recurring" | "lake-card-single-use" | "lake-card-virtual" | "lake-chevron-double" | "lake-clipboard-bullet" | "lake-clock" | "lake-clock-arrow-swap" | "lake-close" | "lake-currencies" | "lake-delivery-grouped" | "lake-delivery-individual" | "lake-document-csv" | "lake-document-jpg" | "lake-document-pdf" | "lake-document-png" | "lake-document-xls" | "lake-email" | "lake-id-card" | "lake-inbox-empty" | "lake-menu" | "lake-people" | "lake-person-arrow-swap" | "lake-phone" | "lake-receipt" | "lake-settings" | "lake-signature" | "lake-transfer" | "lake-world-map" | "add-circle-filled" | "add-circle-regular" | "add-filled" | "approvals-app-filled" | "apps-list-filled" | "apps-list-regular" | "arrow-counterclockwise-filled" | "arrow-down-filled" | "arrow-down-regular" | "arrow-download-filled" | "arrow-left-filled" | "arrow-left-regular" | "arrow-right-filled" | "arrow-right-regular" | "arrow-swap-filled" | "arrow-swap-regular" | "arrow-up-filled" | "arrow-up-regular" | "arrow-upload-filled" | "arrow-upload-regular" | "beaker-filled" | "beaker-regular" | "board-regular" | "box-regular" | "building-bank-filled" | "building-bank-regular" | "building-filled" | "building-multiple-regular" | "building-regular" | "building-shop-regular" | "calendar-ltr-regular" | "cart-regular" | "chat-help-filled" | "chat-help-regular" | "checkmark-circle-regular" | "checkmark-filled" | "chevron-down-filled" | "chevron-left-filled" | "chevron-right-filled" | "chevron-up-down-regular" | "chevron-up-filled" | "clipboard-search-regular" | "clock-filled" | "clock-regular" | "cloud-sync-filled" | "cloud-sync-regular" | "code-filled" | "code-regular" | "color-regular" | "comment-note-regular" | "copy-filled" | "copy-regular" | "cursor-click-regular" | "database-filled" | "database-regular" | "delete-filled" | "delete-regular" | "desktop-regular" | "device-meeting-room-regular" | "dismiss-circle-regular" | "dismiss-filled" | "dismiss-regular" | "document-regular" | "earth-regular" | "edit-filled" | "edit-regular" | "error-circle-filled" | "error-circle-regular" | "eye-filled" | "eye-off-filled" | "eye-regular" | "filter-filled" | "flag-filled" | "flag-regular" | "flash-filled" | "flash-regular" | "form-new-filled" | "form-new-regular" | "hand-right-regular" | "image-add-filled" | "image-add-regular" | "image-filled" | "image-regular" | "info-filled" | "info-regular" | "key-regular" | "link-filled" | "live-filled" | "live-regular" | "lock-closed-filled" | "lock-closed-regular" | "lock-open-filled" | "lock-open-regular" | "mail-filled" | "mail-regular" | "money-regular" | "more-vertical-filled" | "open-filled" | "open-regular" | "options-regular" | "paint-brush-filled" | "paint-brush-regular" | "pause-regular" | "payment-filled" | "payment-regular" | "people-add-regular" | "people-community-filled" | "people-community-regular" | "people-filled" | "people-regular" | "people-team-regular" | "person-accounts-filled" | "person-accounts-regular" | "person-add-regular" | "person-call-filled" | "person-call-regular" | "person-filled" | "person-lock-regular" | "person-regular" | "phone-filled" | "phone-regular" | "pin-regular" | "play-filled" | "play-regular" | "preview-link-filled" | "question-circle-regular" | "receipt-money-filled" | "receipt-money-regular" | "rocket-regular" | "search-filled" | "send-filled" | "send-regular" | "settings-filled" | "settings-regular" | "shield-checkmark-filled" | "shield-checkmark-regular" | "shield-error-regular" | "shield-regular" | "sign-out-regular" | "signature-filled" | "signature-regular" | "subtract-circle-filled" | "subtract-circle-regular" | "target-arrow-regular" | "warning-filled" | "warning-regular" | "window-dev-tools-filled" | "window-dev-tools-regular" | undefined;
+    icon?: "lake-building-bank" | "lake-calendar-arrow-swap" | "lake-card" | "lake-card-filled" | "lake-card-one-off" | "lake-card-physical" | "lake-card-recurring" | "lake-card-single-use" | "lake-card-virtual" | "lake-chevron-double" | "lake-clipboard-bullet" | "lake-clock" | "lake-clock-arrow-swap" | "lake-close" | "lake-currencies" | "lake-delivery-grouped" | "lake-delivery-individual" | "lake-document-csv" | "lake-document-jpg" | "lake-document-pdf" | "lake-document-png" | "lake-document-xls" | "lake-email" | "lake-id-card" | "lake-inbox-empty" | "lake-menu" | "lake-people" | "lake-person-arrow-swap" | "lake-phone" | "lake-receipt" | "lake-settings" | "lake-signature" | "lake-transfer" | "lake-world-map" | "add-circle-filled" | "add-circle-regular" | "add-filled" | "approvals-app-filled" | "apps-list-filled" | "apps-list-regular" | "arrow-counterclockwise-filled" | "arrow-down-filled" | "arrow-down-regular" | "arrow-download-filled" | "arrow-left-filled" | "arrow-left-regular" | "arrow-right-filled" | "arrow-right-regular" | "arrow-swap-filled" | "arrow-swap-regular" | "arrow-up-filled" | "arrow-up-regular" | "arrow-upload-filled" | "arrow-upload-regular" | "beaker-filled" | "beaker-regular" | "board-regular" | "box-regular" | "building-bank-filled" | "building-bank-regular" | "building-filled" | "building-multiple-regular" | "building-regular" | "building-shop-regular" | "calendar-ltr-regular" | "cart-regular" | "chat-help-filled" | "chat-help-regular" | "check-filled" | "check-regular" | "checkmark-circle-regular" | "checkmark-filled" | "chevron-down-filled" | "chevron-left-filled" | "chevron-right-filled" | "chevron-up-down-regular" | "chevron-up-filled" | "clipboard-search-regular" | "clock-filled" | "clock-regular" | "cloud-sync-filled" | "cloud-sync-regular" | "code-filled" | "code-regular" | "color-regular" | "comment-note-regular" | "copy-filled" | "copy-regular" | "cursor-click-regular" | "database-filled" | "database-regular" | "delete-filled" | "delete-regular" | "desktop-regular" | "device-meeting-room-regular" | "dismiss-circle-regular" | "dismiss-filled" | "dismiss-regular" | "document-regular" | "earth-regular" | "edit-filled" | "edit-regular" | "error-circle-filled" | "error-circle-regular" | "eye-filled" | "eye-off-filled" | "eye-regular" | "filter-filled" | "flag-filled" | "flag-regular" | "flash-filled" | "flash-regular" | "form-new-filled" | "form-new-regular" | "hand-right-regular" | "image-add-filled" | "image-add-regular" | "image-filled" | "image-regular" | "info-filled" | "info-regular" | "key-regular" | "link-filled" | "live-filled" | "live-regular" | "lock-closed-filled" | "lock-closed-regular" | "lock-open-filled" | "lock-open-regular" | "mail-filled" | "mail-regular" | "money-regular" | "more-vertical-filled" | "open-filled" | "open-regular" | "options-regular" | "paint-brush-filled" | "paint-brush-regular" | "pause-regular" | "payment-filled" | "payment-regular" | "people-add-regular" | "people-community-filled" | "people-community-regular" | "people-filled" | "people-regular" | "people-team-regular" | "person-accounts-filled" | "person-accounts-regular" | "person-add-regular" | "person-call-filled" | "person-call-regular" | "person-filled" | "person-lock-regular" | "person-regular" | "phone-filled" | "phone-regular" | "pin-regular" | "play-filled" | "play-regular" | "preview-link-filled" | "question-circle-regular" | "receipt-money-filled" | "receipt-money-regular" | "rocket-regular" | "search-filled" | "send-filled" | "send-regular" | "settings-filled" | "settings-regular" | "shield-checkmark-filled" | "shield-checkmark-regular" | "shield-error-regular" | "shield-regular" | "sign-out-regular" | "signature-filled" | "signature-regular" | "subtract-circle-filled" | "subtract-circle-regular" | "target-arrow-regular" | "warning-filled" | "warning-regular" | "window-dev-tools-filled" | "window-dev-tools-regular" | undefined;
     unit?: string | undefined;
     inputMode?: TextInputProps["inputMode"];
     pattern?: string | undefined;

package/src/components/Stack.d.ts

@@ -7,6 +7,6 @@ export declare const Stack: import("react").ForwardRefExoticComponent<import("re
     justifyContent?: ("end" | "start" | "normal" | "center" | "spaceBetween" | "spaceAround" | "spaceEvenly") | undefined;
     style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
 } & {
-    space?: 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 96 | undefined;
+    space?: 4 | 16 | 8 | 12 | 20 | 24 | 32 | 40 | 48 | 72 | 96 | undefined;
     wrap?: boolean | undefined;
 } & import("react").RefAttributes<View>>;

package/src/components/TimePicker.d.ts

@@ -0,0 +1,55 @@
+import { Option } from "@swan-io/boxed";
+type Time = {
+    hour: number;
+    minute: number;
+};
+export declare const parseTime: (time: string) => Option<Time>;
+export declare const parseTimeRange: (value: {
+    start?: string;
+    end?: string;
+}) => {
+    start: Option<Time>;
+    end: Option<Time>;
+};
+export declare const validateTime: (time: Time) => boolean;
+export declare const validateTimeRange: (range: {
+    start: Option<Time>;
+    end: Option<Time>;
+}) => boolean;
+export type TimePickerProps = {
+    value?: string;
+    onChangeText: (value: string) => void;
+    suggestionStart?: Time;
+    suggestionEnd?: Time;
+    intervalInMinutes?: number;
+    nbMaxSuggestions?: number;
+    suggestionSuffix?: (option: Time) => string;
+    readOnly?: boolean;
+    disabled?: boolean;
+    error?: string;
+    hideErrors?: boolean;
+    noSuggestionLabel: string;
+};
+export declare const TimePicker: ({ value, onChangeText, suggestionStart, suggestionEnd, intervalInMinutes, nbMaxSuggestions, suggestionSuffix, readOnly, disabled, error, hideErrors, noSuggestionLabel, }: TimePickerProps) => import("react/jsx-runtime").JSX.Element;
+export type TimeRangePickerProps = {
+    value: {
+        start?: string;
+        end?: string;
+    };
+    onChange: (value: {
+        start?: string;
+        end?: string;
+    }) => void;
+    intervalInMinutes?: number;
+    nbMaxSuggestions?: number;
+    readOnly?: boolean;
+    disabled?: boolean;
+    error?: string;
+    startLabel: string;
+    endLabel: string;
+    minutesLabel: string;
+    hoursLabel: string;
+    noSuggestionLabel: string;
+};
+export declare const TimeRangePicker: ({ value, onChange, intervalInMinutes, nbMaxSuggestions, readOnly, disabled, error, startLabel, endLabel, minutesLabel, hoursLabel, noSuggestionLabel, }: TimeRangePickerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/TimePicker.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AsyncData, Option, Result } from "@swan-io/boxed";
+import { useMemo } from "react";
+import { StyleSheet, View } from "react-native";
+import { Rifm } from "rifm";
+import { colors } from "../constants/design";
+import { noop } from "../utils/function";
+import { isNotNullishOrEmpty, isNullish } from "../utils/nullish";
+import { getRifmProps } from "../utils/rifm";
+import { Box } from "./Box";
+import { Fill } from "./Fill";
+import { Icon } from "./Icon";
+import { LakeCombobox } from "./LakeCombobox";
+import { LakeLabel } from "./LakeLabel";
+import { LakeText } from "./LakeText";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    label: {
+        flex: 1,
+    },
+    arrowContainer: {
+        height: 40, // input height
+    },
+});
+const DEFAULT_START_TIME = { hour: 0, minute: 0 };
+const DEFAULT_END_TIME = { hour: 23, minute: 59 };
+const DEFAULT_INTERVAL_IN_MINUTES = 15;
+const rifmTimeProps = getRifmProps({
+    accept: "numeric",
+    charMap: { 2: ":" },
+    maxLength: 4,
+});
+export const parseTime = (time) => {
+    const [hours, minutes] = time.split(":").map(Number);
+    if (isNullish(hours) || isNaN(hours) || isNullish(minutes) || isNaN(minutes)) {
+        return Option.None();
+    }
+    return Option.Some({ hour: hours, minute: minutes });
+};
+export const parseTimeRange = (value) => {
+    const start = isNotNullishOrEmpty(value.start) ? parseTime(value.start) : Option.None();
+    const end = isNotNullishOrEmpty(value.end) ? parseTime(value.end) : Option.None();
+    return { start, end };
+};
+const parseTypingHours = (time) => {
+    const [hours, minutes] = time.split(":");
+    if (isNullish(hours) || hours?.length !== 2 || isNotNullishOrEmpty(minutes)) {
+        return Option.None();
+    }
+    const parsedHours = Number(hours);
+    if (parsedHours < 0 || parsedHours > 23) {
+        return Option.None();
+    }
+    if (isNaN(parsedHours)) {
+        return Option.None();
+    }
+    return Option.Some(parsedHours);
+};
+const stringifyTime = (time) => {
+    return `${time.hour.toString().padStart(2, "0")}:${time.minute.toString().padStart(2, "0")}`;
+};
+const timeToMinutes = (time) => {
+    return time.hour * 60 + time.minute;
+};
+const minutesToTime = (minutes) => {
+    return {
+        hour: Math.floor(minutes / 60),
+        minute: minutes % 60,
+    };
+};
+const addMinutes = (time, minutes) => {
+    return minutesToTime(timeToMinutes(time) + minutes);
+};
+const floorTime = (time, intervalInMinutes) => {
+    const minutes = timeToMinutes(time);
+    const flooredMinutes = Math.floor(minutes / intervalInMinutes) * intervalInMinutes;
+    return minutesToTime(flooredMinutes);
+};
+export const validateTime = (time) => {
+    return time.hour >= 0 && time.hour <= 23 && time.minute >= 0 && time.minute <= 59;
+};
+const isTimeBefore = (time1, time2) => {
+    return timeToMinutes(time1) < timeToMinutes(time2);
+};
+export const validateTimeRange = (range) => {
+    if (range.start.isNone() || range.end.isNone()) {
+        return true;
+    }
+    return isTimeBefore(range.start.value, range.end.value);
+};
+const minTime = (...times) => {
+    const timesInMinutes = times.map(timeToMinutes);
+    const minTimeInMinutes = Math.min(...timesInMinutes);
+    return minutesToTime(minTimeInMinutes);
+};
+const maxTime = (...times) => {
+    const timesInMinutes = times.map(timeToMinutes);
+    const maxTimeInMinutes = Math.max(...timesInMinutes);
+    return minutesToTime(maxTimeInMinutes);
+};
+const generateTimeList = (start, end, intervalInMinutes) => {
+    const startMinutes = timeToMinutes(start);
+    const endMinutes = timeToMinutes(end);
+    const timeList = [];
+    for (let i = startMinutes; i <= endMinutes; i += intervalInMinutes) {
+        const time = minutesToTime(i);
+        timeList.push(time);
+    }
+    return timeList;
+};
+const formatTimeDuration = (time, minutesLabel, hoursLabel) => {
+    if (time.hour === 0) {
+        return `${time.minute} ${minutesLabel}`;
+    }
+    if (time.minute === 0) {
+        return `${time.hour} ${hoursLabel}`;
+    }
+    return `${time.hour} ${hoursLabel} ${time.minute} ${minutesLabel}`;
+};
+export const TimePicker = ({ value, onChangeText, suggestionStart = DEFAULT_START_TIME, suggestionEnd = DEFAULT_END_TIME, intervalInMinutes = DEFAULT_INTERVAL_IN_MINUTES, nbMaxSuggestions, suggestionSuffix, readOnly, disabled, error, hideErrors, noSuggestionLabel, }) => {
+    const typingHour = parseTypingHours(value ?? "");
+    const optionsInterval = useMemo(() => typingHour.match({
+        Some: hour => [
+            maxTime({ hour, minute: 0 }, suggestionStart),
+            minTime({ hour, minute: 59 }, suggestionEnd),
+        ],
+        None: () => [suggestionStart, suggestionEnd],
+    }), [typingHour, suggestionStart, suggestionEnd]);
+    const options = useMemo(() => generateTimeList(optionsInterval[0], optionsInterval[1], intervalInMinutes).slice(0, nbMaxSuggestions), [optionsInterval, intervalInMinutes, nbMaxSuggestions]);
+    const items = useMemo(() => AsyncData.Done(Result.Ok(options)), [options]);
+    return (_jsx(Rifm, { value: value ?? "", onChange: onChangeText, ...rifmTimeProps, children: ({ value, onChange }) => (_jsx(LakeCombobox, { keyExtractor: stringifyTime, placeholder: "HH:MM", value: value, items: items, itemHeight: 40, nbItemsDisplayed: 4.5, renderItem: item => {
+                const text = stringifyTime(item);
+                const selected = text === value;
+                const suffix = suggestionSuffix?.(item);
+                const label = isNotNullishOrEmpty(suffix) ? `${text} ${suffix}` : text;
+                return (_jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(LakeText, { color: selected ? colors.gray[700] : colors.gray[900], variant: selected ? "smallRegular" : "medium", children: label }), _jsx(Fill, { minWidth: 8 }), selected && (_jsx(Icon, { name: "checkmark-filled", color: colors.positive[500], size: 16 }))] }));
+            }, readOnly: readOnly, disabled: disabled, error: error, hideErrors: hideErrors, emptyResultText: noSuggestionLabel, onChange: onChange, onValueChange: noop, onSelectItem: item => onChangeText(stringifyTime(item)) })) }));
+};
+export const TimeRangePicker = ({ value, onChange, intervalInMinutes = DEFAULT_INTERVAL_IN_MINUTES, nbMaxSuggestions, readOnly, disabled, error, startLabel, endLabel, minutesLabel, hoursLabel, noSuggestionLabel, }) => {
+    const start = parseTime(value.start ?? "");
+    const handleStartChange = (startValue) => {
+        onChange({
+            start: startValue,
+            end: value.end,
+        });
+    };
+    const handleEndChange = (endValue) => {
+        onChange({
+            start: value.start,
+            end: endValue,
+        });
+    };
+    return (_jsxs(View, { children: [_jsxs(Box, { direction: "row", alignItems: "end", children: [_jsx(LakeLabel, { label: startLabel, style: styles.label, render: () => (_jsx(TimePicker, { value: value.start, intervalInMinutes: intervalInMinutes, nbMaxSuggestions: nbMaxSuggestions, error: error, hideErrors: true, disabled: disabled, readOnly: readOnly, noSuggestionLabel: noSuggestionLabel, onChangeText: handleStartChange })) }), _jsx(Space, { width: 12 }), _jsx(Box, { style: styles.arrowContainer, justifyContent: "center", children: _jsx(Icon, { name: "arrow-right-filled", size: 20 }) }), _jsx(Space, { width: 12 }), _jsx(LakeLabel, { label: endLabel, style: styles.label, render: () => (_jsx(TimePicker, { value: value.end, intervalInMinutes: intervalInMinutes, nbMaxSuggestions: nbMaxSuggestions, suggestionStart: start
+                                .map(time => floorTime(time, intervalInMinutes))
+                                .map(time => addMinutes(time, intervalInMinutes))
+                                .match({
+                                Some: time => time,
+                                None: () => undefined,
+                            }), suggestionSuffix: time => {
+                                if (start.isNone()) {
+                                    return "";
+                                }
+                                const durationInMinutes = timeToMinutes(time) - timeToMinutes(start.value);
+                                if (durationInMinutes > 0 && durationInMinutes <= 60) {
+                                    const timeDuration = minutesToTime(durationInMinutes);
+                                    return `(${formatTimeDuration(timeDuration, minutesLabel, hoursLabel)})`;
+                                }
+                                return "";
+                            }, error: error, hideErrors: true, disabled: disabled, readOnly: readOnly, noSuggestionLabel: noSuggestionLabel, onChangeText: handleEndChange })) })] }), _jsx(Space, { height: 4 }), _jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error ?? " " })] }));
+};

package/src/icons/custom-icons.json

@@ -1,4 +1,5 @@
 {
+  "lake-building-bank": "M6.86995 10.4254C6.86995 10.3592 6.81622 10.3054 6.74995 10.3054H6.31432C5.84044 10.3054 5.63999 9.70175 6.01971 9.41832L11.6007 5.2527C11.8375 5.07592 12.1624 5.07592 12.3992 5.25271L17.9799 9.41833C18.3597 9.70176 18.1592 10.3054 17.6853 10.3054H17.2499C17.1837 10.3054 17.1299 10.3592 17.1299 10.4254V14.6271C17.1299 14.6734 17.1566 14.7156 17.1985 14.7355C17.779 15.0113 18.1799 15.6028 18.1799 16.2877V17.5126C18.1799 17.688 18.0378 17.8301 17.8624 17.8301H6.13745C5.96209 17.8301 5.81995 17.688 5.81995 17.5126V16.2877C5.81995 15.6028 6.2209 15.0113 6.80144 14.7355C6.84328 14.7156 6.86995 14.6734 6.86995 14.6271V10.4254ZM16.3749 14.5703C16.4412 14.5703 16.4949 14.5166 16.4949 14.4503V10.4254C16.4949 10.3592 16.4412 10.3054 16.3749 10.3054H14.7999C14.7337 10.3054 14.6799 10.3592 14.6799 10.4254V14.4503C14.6799 14.5166 14.7337 14.5703 14.7999 14.5703H16.3749ZM13.9249 14.5703C13.9912 14.5703 14.0449 14.5166 14.0449 14.4503V10.4254C14.0449 10.3592 13.9912 10.3054 13.9249 10.3054H12.4374C12.3712 10.3054 12.3174 10.3592 12.3174 10.4254V14.4503C12.3174 14.5166 12.3712 14.5703 12.4374 14.5703H13.9249ZM11.5624 14.5703C11.6287 14.5703 11.6824 14.5166 11.6824 14.4503V10.4254C11.6824 10.3592 11.6287 10.3054 11.5624 10.3054H10.0749C10.0087 10.3054 9.95495 10.3592 9.95495 10.4254V14.4503C9.95495 14.5166 10.0087 14.5703 10.0749 14.5703H11.5624ZM9.19995 14.5703C9.26622 14.5703 9.31995 14.5166 9.31995 14.4503V10.4254C9.31995 10.3592 9.26622 10.3054 9.19995 10.3054H7.62495C7.55867 10.3054 7.50495 10.3592 7.50495 10.4254V14.4503C7.50495 14.5166 7.55867 14.5703 7.62495 14.5703H9.19995ZM7.03304 9.45432C6.99161 9.48524 6.97464 9.53923 6.99094 9.5883C7.00723 9.63737 7.05312 9.67048 7.10482 9.67048H16.8949C16.9466 9.67048 16.9924 9.63737 17.0087 9.5883C17.025 9.53923 17.0081 9.48525 16.9666 9.45432L12.0717 5.80059C12.0291 5.76881 11.9707 5.76881 11.9282 5.80059L7.03304 9.45432ZM17.4249 17.1952C17.4912 17.1952 17.5449 17.1414 17.5449 17.0752V16.2877C17.5449 15.6899 17.0603 15.2053 16.4624 15.2053H7.53745C6.9396 15.2053 6.45495 15.6899 6.45495 16.2877V17.0752C6.45495 17.1414 6.50867 17.1952 6.57495 17.1952H17.4249ZM12.5799 7.80065C12.5799 8.12095 12.3203 8.38062 11.9999 8.38062C11.6796 8.38062 11.4199 8.12095 11.4199 7.80065C11.4199 7.48035 11.6796 7.22069 11.9999 7.22069C12.3203 7.22069 12.5799 7.48035 12.5799 7.80065Z",
   "lake-calendar-arrow-swap": "M9 12.38a1.13 1.13 0 1 1-2.25 0 1.13 1.13 0 0 1 2.25 0Zm-1.12 4.87a1.13 1.13 0 1 0 0-2.25 1.13 1.13 0 0 0 0 2.25Zm4.36-.03a1.13 1.13 0 0 1-1.37-1.1 1.13 1.13 0 0 1 1.86-.85 6.73 6.73 0 0 0-.49 1.95Z M12.43 19.5H6.75c-1.24 0-2.25-1-2.25-2.25V9h15v2.36c.52.06 1.02.18 1.5.36V6.75A3.75 3.75 0 0 0 17.25 3H6.75A3.75 3.75 0 0 0 3 6.75v10.5A3.75 3.75 0 0 0 6.75 21h6.29a6.47 6.47 0 0 1-.6-1.5ZM4.5 6.75c0-1.24 1-2.25 2.25-2.25h10.5c1.24 0 2.25 1 2.25 2.25v.75h-15v-.75Z M16.91 11.57a1.12 1.12 0 0 0-1.9.91c.57-.4 1.21-.7 1.9-.9ZM12 13.5a1.13 1.13 0 1 0 0-2.25 1.13 1.13 0 0 0 0 2.25Z M18.73 22.97a5.14 5.14 0 1 0 0-10.28 5.14 5.14 0 0 0 0 10.28Zm.59-7.47c.1-.1.26-.1.36 0l1.03 1.03c.1.1.1.27 0 .37l-1.03 1.02a.26.26 0 1 1-.36-.36l.59-.59h-2.98a.26.26 0 1 1 0-.51h2.98l-.6-.6a.26.26 0 0 1 0-.36Zm-1.18 2.23c.1.1.1.27 0 .37l-.6.59h2.99a.26.26 0 0 1 0 .51h-2.98l.59.59a.26.26 0 0 1-.36.36l-1.03-1.03a.26.26 0 0 1 0-.36l1.03-1.03c.1-.1.26-.1.36 0Z",
   "lake-card": "M5.54815 10.596H18.4521V15.398C18.4521 15.8962 18.0483 16.3 17.5501 16.3H6.45015C5.95199 16.3 5.54815 15.8962 5.54815 15.398V10.596ZM5.54815 10V8.498C5.54815 7.99984 5.95199 7.596 6.45015 7.596H17.5501C18.0483 7.596 18.4521 7.99984 18.4521 8.498V10H5.54815ZM14.6999 13.84C14.4856 13.84 14.3119 14.0137 14.3119 14.228C14.3119 14.4423 14.4856 14.616 14.6999 14.616H16.4999C16.7142 14.616 16.8879 14.4423 16.8879 14.228C16.8879 14.0137 16.7142 13.84 16.4999 13.84H14.6999ZM6.45015 7C5.62283 7 4.95215 7.67068 4.95215 8.498V15.398C4.95215 16.2253 5.62283 16.896 6.45015 16.896H17.5501C18.3775 16.896 19.0481 16.2253 19.0481 15.398V8.498C19.0481 7.67068 18.3775 7 17.5501 7H6.45015Z",
   "lake-card-filled": "M15.75 15C15.3358 15 15 15.3358 15 15.75C15 16.1642 15.3358 16.5 15.75 16.5H18.75C19.1642 16.5 19.5 16.1642 19.5 15.75C19.5 15.3358 19.1642 15 18.75 15H15.75ZM1.5 7.5C1.5 5.84315 2.84315 4.5 4.5 4.5H19.5C21.1569 4.5 22.5 5.84315 22.5 7.5V16.5C22.5 18.1569 21.1569 19.5 19.5 19.5H4.5C2.84315 19.5 1.5 18.1569 1.5 16.5V7.5ZM21 7.5C21 6.67157 20.3284 6 19.5 6H4.5C3.67157 6 3 6.67157 3 7.5V9H21V7.5ZM3 16.5C3 17.3284 3.67157 18 4.5 18H19.5C20.3284 18 21 17.3284 21 16.5V10.5H3V16.5Z",

package/src/icons/fluent-icons.json

@@ -33,6 +33,8 @@
   "cart-regular": "M2.5 4.25c0-.41.34-.75.75-.75h.56c.95 0 1.52.64 1.84 1.23.22.4.38.86.5 1.27h12.6c.83 0 1.43.8 1.2 1.6L18.12 14a2.75 2.75 0 0 1-2.64 2H9.53a2.75 2.75 0 0 1-2.65-2.02l-.76-2.78-1.26-4.24v-.01c-.16-.57-.3-1.1-.52-1.5C4.13 5.07 3.96 5 3.8 5h-.56a.75.75 0 0 1-.75-.75Zm5.07 6.59.75 2.74c.15.54.65.92 1.21.92h5.95c.56 0 1.05-.37 1.2-.9l1.74-6.1H6.59l.97 3.29.01.05ZM11 19a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm-1.5 0a.5.5 0 1 0-1 0 .5.5 0 0 0 1 0Zm8.5 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm-1.5 0a.5.5 0 1 0-1 0 .5.5 0 0 0 1 0Z",
   "chat-help-filled": "M12 2a10 10 0 1 1-4.64 18.86l-4.3 1.12a.85.85 0 0 1-1.03-1.04l1.11-4.29A10 10 0 0 1 12 2Zm0 13.5a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm0-8.75A2.75 2.75 0 0 0 9.25 9.5a.75.75 0 0 0 1.5.1v-.23a1.25 1.25 0 0 1 2.5.13c0 .54-.13.8-.64 1.33l-.3.31c-.76.79-1.06 1.35-1.06 2.36a.75.75 0 0 0 1.5 0c0-.54.13-.8.64-1.33l.3-.31c.76-.79 1.06-1.35 1.06-2.36A2.75 2.75 0 0 0 12 6.75Z",
   "chat-help-regular": "M12 2a10 10 0 1 1-4.59 18.89L3.6 21.96a1.25 1.25 0 0 1-1.54-1.54l1.06-3.83A10 10 0 0 1 12 2Zm0 1.5a8.5 8.5 0 0 0-7.43 12.64l.15.27-1.1 3.98 3.98-1.11.27.15A8.5 8.5 0 1 0 12 3.5Zm0 12a1 1 0 1 1 0 2 1 1 0 0 1 0-2Zm0-8.75a2.75 2.75 0 0 1 2.75 2.75c0 1.01-.3 1.57-1.05 2.36l-.17.17c-.62.62-.78.89-.78 1.47a.75.75 0 0 1-1.5 0c0-1.01.3-1.57 1.05-2.36l.17-.17c.62-.62.78-.89.78-1.47a1.25 1.25 0 0 0-2.5-.13v.13a.75.75 0 0 1-1.5 0A2.75 2.75 0 0 1 12 6.75Z",
+  "check-filled": "M21.77 5.79a.75.75 0 1 0-1.04-1.08l-6.75 6.5a.75.75 0 1 0 1.04 1.08l6.75-6.5ZM18.99 5H4.55A2.55 2.55 0 0 0 2 7.55v6.9C2 15.85 3.14 17 4.55 17h14.9c1.4 0 2.55-1.14 2.55-2.55v-6.9c0-.18-.02-.36-.06-.54l-6.23 6a1.75 1.75 0 0 1-2.42-2.52L18.99 5ZM4.5 9.25c0-.41.34-.75.75-.75h2a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1-.75-.75Zm0 3.5c0-.41.34-.75.75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Z",
+  "check-regular": "M21.78 5.78a.75.75 0 0 0-1.06-1.06l-7.5 7.5a.75.75 0 1 0 1.06 1.06l7.5-7.5Zm.17 1.25c.03.17.05.34.05.52v6.9c0 1.4-1.14 2.55-2.55 2.55H4.55A2.55 2.55 0 0 1 2 14.45v-6.9C2 6.15 3.14 5 4.55 5h14.48l-1.5 1.5H4.55c-.58 0-1.05.47-1.05 1.05v6.9c0 .58.47 1.05 1.05 1.05h14.9c.58 0 1.05-.47 1.05-1.05V8.47l1.45-1.44ZM4.5 9.25c0-.41.34-.75.75-.75h2a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1-.75-.75Zm0 3.5c0-.41.34-.75.75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Z",
   "checkmark-circle-regular": "M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm-1.25 9.94 4.47-4.47a.75.75 0 0 1 1.13.98l-.07.08-5 5a.75.75 0 0 1-.98.07l-.08-.07-2.5-2.5a.75.75 0 0 1 .98-1.13l.08.07 1.97 1.97 4.47-4.47-4.47 4.47Z",
   "checkmark-filled": "m8.5 16.59-3.8-3.8a1 1 0 0 0-1.4 1.42l4.5 4.5a1 1 0 0 0 1.4 0l11-11a1 1 0 0 0-1.4-1.42L8.5 16.6Z",
   "chevron-down-filled": "M4.3 8.3a1 1 0 0 1 1.4 0l6.3 6.29 6.3-6.3a1 1 0 1 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-7-7a1 1 0 0 1 0-1.42Z",

package/src/utils/svg.d.ts

@@ -0,0 +1,10 @@
+import { Result } from "@swan-io/boxed";
+type Size = {
+    width: number;
+    height: number;
+};
+export declare const convertSvgToBase64Uri: (svg: SVGElement) => string;
+export declare const getSvgSize: (svg: SVGElement) => Result<Size, string>;
+export declare const getMonochromeSvg: (svg: SVGElement, color: "white" | "black") => SVGElement;
+export declare const createSvgImage: (svg: SVGElement) => Result<HTMLImageElement, string>;
+export {};