@swan-io/lake 15.5.2 → 16.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "15.5.2",
+  "version": "16.0.0",
   "engines": {
     "node": ">22.12.0"
   },

package/src/components/Accordion.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { Pressable, StyleSheet, View } from "react-native";
 import { backgroundColor, colors, spacings } from "../constants/design";
-import { useDisclosure } from "../hooks/useDisclosure";
+import { useBoolean } from "../hooks/useBoolean";
 import { Icon } from "./Icon";
 import { LakeText } from "./LakeText";
 import { Space } from "./Space";
@@ -40,6 +40,6 @@ const styles = StyleSheet.create({
 });
 export const Accordion = ({ children, trigger, style, contentContainerStyle }) => {
     const id = useId();
-    const [isOpen, { toggle }] = useDisclosure(false);
+    const [isOpen, { toggle }] = useBoolean(false);
     return (_jsxs(View, { children: [_jsxs(Pressable, { "aria-controls": id, role: "button", "aria-expanded": isOpen, onPress: toggle, style: [styles.trigger, style], children: [_jsx(Icon, { name: "chevron-right-filled", size: 12, color: colors.gray[500], style: [styles.arrow, isOpen && styles.arrowOpen] }), _jsx(Space, { width: 20 }), typeof trigger === "string" ? (_jsx(LakeText, { variant: "smallMedium", color: colors.gray[900], children: trigger })) : (trigger)] }), _jsx(View, { "aria-labelledby": id, "aria-hidden": !isOpen, role: "region", style: [styles.contentContainer, isOpen && styles.contentContainerDisplayed], children: _jsx(View, { style: styles.contentInner, children: _jsx(View, { style: [styles.content, contentContainerStyle], children: children }) }) })] }));
 };

package/src/components/ContextMenu.js

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { createContext, useContext, useRef } from "react";
 import { StyleSheet, View } from "react-native";
 import { colors, spacings } from "../constants/design";
-import { useDisclosure } from "../hooks/useDisclosure";
+import { useBoolean } from "../hooks/useBoolean";
 import { noop } from "../utils/function";
 import { LakeButton } from "./LakeButton";
 import { LakeText } from "./LakeText";
@@ -28,7 +28,7 @@ const styles = StyleSheet.create({
 });
 const ContextMenuContext = createContext({ close: noop });
 export const ContextMenu = ({ children, ariaLabel, withPill = false, verticalPlacement, }) => {
-    const [isOpen, { open, close }] = useDisclosure(false);
+    const [isOpen, { on: open, off: close }] = useBoolean(false);
     const triggerRef = useRef(null);
     return (_jsxs(ContextMenuContext.Provider, { value: { close }, children: [_jsx(LakeButton, { ref: triggerRef, mode: "tertiary", size: "small", icon: "more-horizontal-filled", color: "gray", onPress: open, ariaLabel: ariaLabel, pill: withPill }), _jsx(Popover, { referenceRef: triggerRef, visible: isOpen, onDismiss: close, verticalPlacement: verticalPlacement, children: _jsx(View, { style: styles.container, children: children }) })] }));
 };

package/src/components/LakeAlert.d.ts

@@ -3,6 +3,7 @@ import { StyleProp, ViewStyle } from "react-native";
 type AlertVariant = "info" | "warning" | "error" | "success" | "neutral";
 type Props = {
     anchored?: boolean;
+    inPopover?: boolean;
     variant: AlertVariant;
     children?: ReactNode;
     callToAction?: ReactNode;
@@ -11,5 +12,5 @@ type Props = {
     style?: StyleProp<ViewStyle>;
     tag?: string;
 };
-export declare const LakeAlert: ({ anchored, variant, title, subtitle, children, style, callToAction, tag, }: Props) => import("react").JSX.Element;
+export declare const LakeAlert: ({ anchored, inPopover, variant, title, subtitle, children, style, callToAction, tag, }: Props) => import("react").JSX.Element;
 export {};

package/src/components/LakeAlert.js

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { StyleSheet, View } from "react-native";
 import { match } from "ts-pattern";
 import { commonStyles } from "../constants/commonStyles";
-import { breakpoints, colors, shadows } from "../constants/design";
+import { breakpoints, colors, radii, shadows } from "../constants/design";
 import { useResponsive } from "../hooks/useResponsive";
 import { isNotNullish, isNotNullishOrEmpty } from "../utils/nullish";
 import { Box } from "./Box";
@@ -14,7 +14,7 @@ const styles = StyleSheet.create({
     base: {
         paddingVertical: 20,
         paddingHorizontal: 24,
-        borderRadius: 4,
+        borderRadius: radii[4],
         borderWidth: 0.5,
         borderLeftWidth: 4,
         boxShadow: shadows.tile,
@@ -25,6 +25,9 @@ const styles = StyleSheet.create({
         marginBottom: -1,
         boxShadow: "none",
     },
+    inPopover: {
+        borderRadius: radii[8],
+    },
     content: {
         marginLeft: 40,
     },
@@ -71,7 +74,7 @@ const alertLeftBorder = {
     neutral: colors.gray[500],
 };
 const isText = (node) => typeof node === "string" || typeof node === "number";
-export const LakeAlert = ({ anchored = false, variant, title, subtitle, children, style, callToAction, tag, }) => {
+export const LakeAlert = ({ anchored = false, inPopover = false, variant, title, subtitle, children, style, callToAction, tag, }) => {
     const color = alertColor[variant];
     const icon = alertIcon[variant];
     const { desktop } = useResponsive(breakpoints.medium);
@@ -90,6 +93,7 @@ export const LakeAlert = ({ anchored = false, variant, title, subtitle, children
                 borderColor: alertBorder[variant],
             },
             anchored ? styles.anchored : { borderLeftColor: alertLeftBorder[variant] },
+            inPopover && styles.inPopover,
             style,
         ], children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [icon != null ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, color: color, size: 20 }), _jsx(Space, { width: 20 })] })) : null, _jsxs(View, { style: commonStyles.fill, children: [_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", children: [_jsx(LakeText, { color: color, variant: "medium", children: title }), tag && _jsx(Tag, { color: translateColorTag(), children: tag })] }), isNotNullishOrEmpty(subtitle) && _jsx(LakeText, { color: color, children: subtitle })] }), isNotNullish(callToAction) && _jsx(View, { style: styles.callToAction, children: callToAction })] }), isNotNullish(children) && (_jsxs(View, { style: desktop && icon != null && styles.content, children: [_jsx(Space, { height: 12 }), isText(children) ? _jsx(LakeText, { color: color, children: children }) : children] }))] }));
 };

package/src/components/LakeCopyButton.d.ts

@@ -5,6 +5,5 @@ type Props = {
     size?: number;
     valueToCopy: string;
 };
-export declare const copyButtondefaultSize = 21;
 export declare const LakeCopyButton: ({ color, copiedText, copyText, size, valueToCopy, }: Props) => import("react").JSX.Element;
 export {};

package/src/components/LakeCopyButton.js

@@ -4,7 +4,7 @@ import { setClipboardText } from "../utils/clipboard";
 import { Icon } from "./Icon";
 import { LakeTooltip } from "./LakeTooltip";
 import { Pressable } from "./Pressable";
-export const copyButtondefaultSize = 21;
+const copyButtondefaultSize = 21;
 export const LakeCopyButton = ({ color, copiedText, copyText, size = copyButtondefaultSize, valueToCopy, }) => {
     const [visibleState, setVisibleState] = useState("copy");
     return (_jsx(LakeTooltip, { describedBy: "copy", onHide: () => setVisibleState("copy"), togglableOnFocus: true, content: visibleState === "copy" ? copyText : copiedText, children: _jsx(Pressable, { onPress: event => {

package/src/components/LakeSelect.js

@@ -5,7 +5,6 @@ import { t } from "../../../shared-business/src/utils/i18n";
 import { commonStyles } from "../constants/commonStyles";
 import { backgroundColor, colors, invariantColors, radii, shadows, spacings, texts, } from "../constants/design";
 import { useBoolean } from "../hooks/useBoolean";
-import { useDisclosure } from "../hooks/useDisclosure";
 import { useMergeRefs } from "../hooks/useMergeRefs";
 import { getFocusableElements } from "../utils/a11y";
 import { setHighlightApi } from "../utils/highlights";
@@ -163,7 +162,7 @@ export const LakeSelect = ({ ref, title, items, valueStyle, size, color = "curre
     const currentlyTypedRef = useRef(undefined);
     const listItemRefs = useRef(Array(items.length));
     const mergedRef = useMergeRefs(inputRef, ref);
-    const [visible, { close, open }] = useDisclosure(false);
+    const [visible, { on: open, off: close }] = useBoolean(false);
     const hasValue = isNotNullish(value);
     const isSmall = size === "small";
     const itemValue = items.find(i => i.value === value);

package/src/components/LakeStepper.d.ts

@@ -16,7 +16,5 @@ type Props = {
     style?: StyleProp<ViewStyle>;
 };
 export declare const LakeStepper: ({ steps, activeStepId, style }: Props) => import("react").JSX.Element;
-/** @deprecated Use <MobileStepper> instead */
-export declare const MobileStepTitle: ({ steps, activeStepId }: Props) => import("react").JSX.Element | null;
 export declare const MobileStepper: ({ steps, activeStepId }: Props) => import("react").JSX.Element | null;
 export {};

package/src/components/LakeStepper.js

@@ -4,9 +4,7 @@ import { Link } from "@swan-io/chicane";
 import { StyleSheet, View } from "react-native";
 import { match, P } from "ts-pattern";
 import { colors } from "../constants/design";
-import { Box } from "./Box";
 import { Grid } from "./Grid";
-import { LakeHeading } from "./LakeHeading";
 import { LakeText } from "./LakeText";
 import { Space } from "./Space";
 const linkStyle = {
@@ -44,23 +42,6 @@ const styles = StyleSheet.create({
     progressBarError: {
         backgroundColor: colors.negative[500],
     },
-    mobileContainer: {
-        borderBottomWidth: 1,
-        borderBottomColor: colors.gray[100],
-        paddingBottom: 10,
-    },
-    mobileNumber: {
-        minWidth: 28,
-        height: 24,
-        borderRadius: 12,
-        borderWidth: 1,
-        borderColor: colors.current[100],
-        backgroundColor: colors.current[50],
-    },
-    mobileNumberError: {
-        borderColor: colors.negative[100],
-        backgroundColor: colors.negative[50],
-    },
 });
 const stylesMobile = StyleSheet.create({
     progress: {
@@ -127,26 +108,6 @@ export const LakeStepper = ({ steps, activeStepId, style }) => {
                         }) })] }, currentId));
         }) }));
 };
-/** @deprecated Use <MobileStepper> instead */
-export const MobileStepTitle = ({ steps, activeStepId }) => {
-    const currentStep = Option.fromNullable(steps
-        .flatMap((step, index) => match(step)
-        .with({ id: P.string }, step => ({ ...step, number: `${index + 1}` }))
-        .with({ children: P.array(P.any) }, ({ children }) => children.map((child, subIndex) => ({
-        ...child,
-        number: `${index + 1}.${subIndex + 1}`,
-    })))
-        .exhaustive())
-        .find(({ id }) => id === activeStepId)).map(({ label, hasErrors, number }) => ({
-        number,
-        label,
-        isErrorState: hasErrors === true,
-    }));
-    return currentStep.match({
-        Some: ({ number, label, isErrorState }) => (_jsxs(Box, { direction: "row", alignItems: "center", justifyContent: "center", style: styles.mobileContainer, children: [_jsx(Box, { alignItems: "center", justifyContent: "center", style: [styles.mobileNumber, isErrorState && styles.mobileNumberError], children: _jsx(LakeText, { variant: "smallMedium", color: isErrorState ? colors.negative[500] : colors.current[500], children: number }) }), _jsx(Space, { width: 8 }), _jsx(LakeHeading, { level: 4, variant: "h4", color: isErrorState ? colors.negative[500] : colors.current[500], children: label })] })),
-        None: () => null,
-    });
-};
 export const MobileStepper = ({ steps, activeStepId }) => {
     const total = steps.length;
     const currentStep = Option.fromNullable(steps

package/src/components/MultiSelect.js

@@ -4,7 +4,6 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { Pressable, StyleSheet, Text, TextInput, View, } from "react-native";
 import { backgroundColor, colors, radii, shadows, texts } from "../constants/design";
 import { useBoolean } from "../hooks/useBoolean";
-import { useDisclosure } from "../hooks/useDisclosure";
 import { groupBy } from "../utils/array";
 import { isNotNullish, isNotNullishOrEmpty } from "../utils/nullish";
 import { safeSplitAround } from "../utils/string";
@@ -143,7 +142,7 @@ export const MultiSelect = ({ color = "gray", disabled = false, emptyResultText,
     const shouldScrollToBottomRef = useRef(false);
     const selectedTagListRef = useRef(null);
     const inputRef = useRef(null);
-    const [visible, { open, close }] = useDisclosure(false);
+    const [visible, { on: open, off: close }] = useBoolean(false);
     const tint50 = colors[color][50];
     const tint100 = colors[color][100];
     useEffect(() => {

package/src/components/Popover.d.ts

@@ -23,6 +23,5 @@ type Props = {
     safetyMargin?: number;
     forcedMode?: "Dropdown" | "BottomPanel";
 };
-export declare const VIEWPORT_WIDTH_THRESHOLD = 600;
 export declare const Popover: import("react").NamedExoticComponent<Props>;
 export {};

package/src/components/Popover.js

@@ -55,7 +55,7 @@ const animation = {
         { animationDuration: "100ms" },
     ],
 };
-export const VIEWPORT_WIDTH_THRESHOLD = 600;
+const VIEWPORT_WIDTH_THRESHOLD = 600;
 export const Popover = memo(({ children, id, label, placement, verticalPlacement, role = "dialog", describedBy, matchReferenceWidth = false, matchReferenceMinWidth = false, onDismiss = noop, onEscapeKey = onDismiss, referenceRef, returnFocus = true, autoFocus = true, visible, underlay = true, forcedMode, }) => {
     const [rootElement, setRootElement] = useState(null);
     const underlayRef = useRef(null);

package/src/components/Tile.js

@@ -2,7 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { Children, cloneElement, Fragment, useCallback, useId, useState, } from "react";
 import { Pressable, StyleSheet, Text, View, } from "react-native";
 import { backgroundColor, colors, negativeSpacings, radii, shadows, spacings, texts, } from "../constants/design";
-import { useDisclosure } from "../hooks/useDisclosure";
+import { useBoolean } from "../hooks/useBoolean";
 import { isNotNullish } from "../utils/nullish";
 import { Box } from "./Box";
 import { Icon } from "./Icon";
@@ -99,7 +99,7 @@ const styles = StyleSheet.create({
 });
 export const Tile = ({ icon, title, description, headerEnd, footer, flexBasis, children, numberOfLines, paddingVertical = 32, paddingHorizontal = 32, hovered = false, flexGrow = 0, flexShrink = 0, disabled = false, selected, collapsible = false, defaultExpanded = true, style, }) => {
     const contentId = useId();
-    const [expanded, { toggle }] = useDisclosure(defaultExpanded);
+    const [expanded, { toggle }] = useBoolean(defaultExpanded);
     const hasHeader = isNotNullish(title) || isNotNullish(headerEnd) || isNotNullish(description) || collapsible;
     const header = (_jsxs(_Fragment, { children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTitleIcon, children: [isNotNullish(icon) && (_jsxs(_Fragment, { children: [icon, _jsx(Space, { height: 12 })] })), isNotNullish(title) && (_jsx(Text, { style: styles.title, role: "heading", "aria-level": 3, children: title }))] }), collapsible ? (_jsx(Icon, { name: "chevron-down-filled", size: 16, color: colors.gray[500], style: [styles.chevron, expanded && styles.chevronOpen] })) : isNotNullish(headerEnd) ? (_jsx(View, { children: headerEnd })) : null] }), isNotNullish(description) && (_jsxs(_Fragment, { children: [isNotNullish(title) && _jsx(Space, { height: 12 }), _jsx(View, { style: styles.descriptionContainer, children: _jsx(LakeText, { numberOfLines: numberOfLines, style: styles.description, children: description }) })] }))] }));
     const content = (_jsxs(_Fragment, { children: [children, isNotNullish(footer) && (_jsx(View, { style: [styles.footer, { marginTop: paddingVertical, marginBottom: -paddingVertical }], children: footer }))] }));

package/src/components/SortBottomPanel.d.ts

@@ -1,20 +0,0 @@
-type SortDirection = "Asc" | "Desc";
-export type SortField<T> = {
-    name: T;
-    ascLabel: string;
-    descLabel: string;
-};
-export type SortValue<T extends string> = {
-    field: T;
-    direction: SortDirection;
-};
-type Props<T extends string> = {
-    visible: boolean;
-    title: string;
-    fields: SortField<T>[];
-    value: SortValue<T> | undefined;
-    onChange: (value: SortValue<T>) => void;
-    onClose: () => void;
-};
-export declare const SortBottomPanel: <T extends string>({ visible, title, value, fields, onChange, onClose, }: Props<T>) => import("react").JSX.Element;
-export {};

package/src/components/SortBottomPanel.js

@@ -1,41 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
-import { StyleSheet, View } from "react-native";
-import { commonStyles } from "../constants/commonStyles";
-import { colors, spacings } from "../constants/design";
-import { BottomPanel } from "./BottomPanel";
-import { Icon } from "./Icon";
-import { LakeHeading } from "./LakeHeading";
-import { LakeRadio } from "./LakeRadio";
-import { LakeText } from "./LakeText";
-import { Pressable } from "./Pressable";
-import { Separator } from "./Separator";
-import { Space } from "./Space";
-const styles = StyleSheet.create({
-    head: {
-        padding: 24,
-        paddingBottom: 12,
-    },
-    option: {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        paddingHorizontal: spacings[24],
-        paddingVertical: spacings[12],
-    },
-    arrowDown: {
-        transform: "rotate(180deg)",
-    },
-    text: {
-        ...commonStyles.fill,
-    },
-});
-export const SortBottomPanel = ({ visible, title, value, fields, onChange, onClose, }) => {
-    return (_jsxs(BottomPanel, { visible: visible, onPressClose: onClose, children: [_jsx(View, { style: styles.head, children: _jsx(LakeHeading, { level: 3, variant: "h3", children: title }) }), fields.map((field, index) => (_jsxs(Fragment, { children: [_jsxs(Pressable, { style: styles.option, onPress: () => {
-                            onChange({ field: field.name, direction: "Asc" });
-                            onClose();
-                        }, children: [_jsx(Icon, { name: "arrow-up-filled", size: 12, color: colors.gray[600], style: styles.arrowDown }), _jsx(Space, { width: 12 }), _jsx(LakeText, { variant: "smallRegular", color: colors.gray[600], style: styles.text, children: field.ascLabel }), _jsx(Space, { width: 16 }), _jsx(LakeRadio, { value: (value === null || value === void 0 ? void 0 : value.field) === field.name && value.direction === "Asc" })] }), _jsxs(Pressable, { style: styles.option, onPress: () => {
-                            onChange({ field: field.name, direction: "Desc" });
-                            onClose();
-                        }, children: [_jsx(Icon, { name: "arrow-up-filled", size: 12, color: colors.gray[600] }), _jsx(Space, { width: 12 }), _jsx(LakeText, { variant: "smallRegular", color: colors.gray[600], style: styles.text, children: field.descLabel }), _jsx(Space, { width: 16 }), _jsx(LakeRadio, { value: (value === null || value === void 0 ? void 0 : value.field) === field.name && value.direction === "Desc" })] }), index < fields.length - 1 && _jsx(Separator, {})] }, field.name))), _jsx(Space, { height: 12 })] }));
-};

package/src/components/TimePicker.d.ts

@@ -1,55 +0,0 @@
-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.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.Element;
-export {};

package/src/components/TimePicker.js

@@ -1,171 +0,0 @@
-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) || Number.isNaN(hours) || isNullish(minutes) || Number.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 === null || hours === void 0 ? void 0 : hours.length) !== 2 || isNotNullishOrEmpty(minutes)) {
-        return Option.None();
-    }
-    const parsedHours = Number(hours);
-    if (parsedHours < 0 || parsedHours > 23) {
-        return Option.None();
-    }
-    if (Number.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 !== null && value !== void 0 ? 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 !== null && value !== void 0 ? 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 === null || suggestionSuffix === void 0 ? void 0 : 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, emptyResult: 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, }) => {
-    var _a;
-    const start = parseTime((_a = value.start) !== null && _a !== void 0 ? _a : "");
-    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 !== null && error !== void 0 ? error : " " })] }));
-};

package/src/hooks/useDisclosure.d.ts

@@ -1,5 +0,0 @@
-export declare const useDisclosure: (initialValue: boolean) => [visible: boolean, fns: {
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-}];

package/src/hooks/useDisclosure.js

@@ -1,12 +0,0 @@
-import { useMemo, useState } from "react";
-export const useDisclosure = (initialValue) => {
-    const [value, setValue] = useState(initialValue);
-    return [
-        value,
-        useMemo(() => ({
-            open: () => setValue(true),
-            close: () => setValue(false),
-            toggle: () => setValue(prevValue => !prevValue),
-        }), []),
-    ];
-};