@swan-io/lake 4.10.1 → 5.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "4.10.1",
+  "version": "5.0.1",
   "engines": {
     "node": ">=18.0.0",
     "yarn": "^1.22.0"
@@ -39,7 +39,7 @@
     "react-dom": "^18.2.0",
     "react-native-web": "^0.19.10",
     "react-popper": "^2.3.0",
-    "react-ux-form": "^1.5.0",
+    "@swan-io/use-form": "^2.0.0-rc.2",
     "rifm": "^0.12.1",
     "three": "^0.161.0",
     "ts-dedent": "^2.2.0",

package/src/components/Box.d.ts

@@ -1,16 +1,5 @@
 import { ReactNode } from "react";
 import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
-declare const directionStyles: {
-    columnReverse: {
-        flexDirection: "column-reverse";
-    };
-    row: {
-        flexDirection: "row";
-    };
-    rowReverse: {
-        flexDirection: "row-reverse";
-    };
-};
 declare const alignItemsStyles: {
     baseline: {
         alignItems: "baseline";
@@ -25,6 +14,17 @@ declare const alignItemsStyles: {
         alignItems: "flex-start";
     };
 };
+declare const directionStyles: {
+    columnReverse: {
+        flexDirection: "column-reverse";
+    };
+    row: {
+        flexDirection: "row";
+    };
+    rowReverse: {
+        flexDirection: "row-reverse";
+    };
+};
 declare const justifyContentStyles: {
     center: {
         justifyContent: "center";
@@ -45,14 +45,26 @@ declare const justifyContentStyles: {
         justifyContent: "space-evenly";
     };
 };
-type BoxDirection = keyof typeof directionStyles | "column";
+declare const wrapStyles: {
+    wrap: {
+        flexWrap: "wrap";
+    };
+    wrapReverse: {
+        flexWrap: "wrap-reverse";
+    };
+};
 type BoxAlignItems = keyof typeof alignItemsStyles | "stretch";
+type BoxDirection = keyof typeof directionStyles | "column";
 type BoxJustifyContent = keyof typeof justifyContentStyles | "normal";
+type BoxWrap = keyof typeof wrapStyles | "nowrap";
 export type BoxProps = ViewProps & {
     alignItems?: BoxAlignItems;
     children?: ReactNode;
     direction?: BoxDirection;
     justifyContent?: BoxJustifyContent;
+    wrap?: BoxWrap;
+    grow?: number;
+    shrink?: number;
     style?: StyleProp<ViewStyle>;
 };
 export declare const Box: import("react").ForwardRefExoticComponent<ViewProps & {
@@ -60,6 +72,9 @@ export declare const Box: import("react").ForwardRefExoticComponent<ViewProps &
     children?: ReactNode;
     direction?: BoxDirection | undefined;
     justifyContent?: BoxJustifyContent | undefined;
+    wrap?: BoxWrap | undefined;
+    grow?: number | undefined;
+    shrink?: number | undefined;
     style?: StyleProp<ViewStyle>;
 } & import("react").RefAttributes<View>>;
 export {};

package/src/components/Box.js

@@ -1,18 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { StyleSheet, View } from "react-native";
-/* eslint-disable react-native/no-unused-styles */
-const directionStyles = StyleSheet.create({
-    columnReverse: { flexDirection: "column-reverse" },
-    row: { flexDirection: "row" },
-    rowReverse: { flexDirection: "row-reverse" },
-});
 const alignItemsStyles = StyleSheet.create({
     baseline: { alignItems: "baseline" },
     center: { alignItems: "center" },
     end: { alignItems: "flex-end" },
     start: { alignItems: "flex-start" },
 });
+const directionStyles = StyleSheet.create({
+    columnReverse: { flexDirection: "column-reverse" },
+    row: { flexDirection: "row" },
+    rowReverse: { flexDirection: "row-reverse" },
+});
 const justifyContentStyles = StyleSheet.create({
     center: { justifyContent: "center" },
     end: { justifyContent: "flex-end" },
@@ -21,11 +20,22 @@ const justifyContentStyles = StyleSheet.create({
     spaceAround: { justifyContent: "space-around" },
     spaceEvenly: { justifyContent: "space-evenly" },
 });
+const wrapStyles = StyleSheet.create({
+    wrap: { flexWrap: "wrap" },
+    wrapReverse: { flexWrap: "wrap-reverse" },
+});
+const otherStyles = StyleSheet.create({
+    grow1: { flexGrow: 1 },
+    shrink1: { flexShrink: 1 },
+});
 export const Box = forwardRef((
-// Default <View /> styles https://github.com/necolas/react-native-web/blob/0.19.1/packages/react-native-web/src/exports/View/index.js#L146
-{ alignItems = "stretch", direction = "column", justifyContent = "normal", style, ...props }, forwardedRef) => (_jsx(View, { ref: forwardedRef, ...props, style: [
+// Default <View /> styles https://github.com/necolas/react-native-web/blob/0.19.10/packages/react-native-web/src/exports/View/index.js#L146
+{ alignItems = "stretch", direction = "column", justifyContent = "normal", wrap = "nowrap", grow = 0, shrink = 0, style, ...props }, forwardedRef) => (_jsx(View, { ref: forwardedRef, ...props, style: [
         alignItems !== "stretch" && alignItemsStyles[alignItems],
         direction !== "column" && directionStyles[direction],
         justifyContent !== "normal" && justifyContentStyles[justifyContent],
+        wrap !== "nowrap" && wrapStyles[wrap],
+        grow !== 0 && (grow === 1 ? otherStyles.grow1 : { flexGrow: grow }),
+        shrink !== 0 && (shrink === 1 ? otherStyles.shrink1 : { flexShrink: shrink }),
         style,
     ] })));

package/src/components/Filters.d.ts

@@ -1,5 +1,5 @@
 import { DateFormat, DatePickerDate } from "@swan-io/shared-business/src/components/DatePicker";
-import { ValidatorResult } from "react-ux-form";
+import { ValidatorResult } from "@swan-io/use-form";
 import { Simplify } from "type-fest";
 type Item<T> = {
     label: string;

package/src/components/Filters.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { DatePickerModal, } from "@swan-io/shared-business/src/components/DatePicker";
+import { useForm } from "@swan-io/use-form";
 import dayjs from "dayjs";
 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 { P, match } from "ts-pattern";
 import { colors, shadows, spacings } from "../constants/design";
 import { useDisclosure } from "../hooks/useDisclosure";
@@ -161,7 +161,7 @@ function FilterDate({ label, initialValue, noValueText, cancelText, submitText,
     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, 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 })] }));
+                }, onDismiss: close })] }));
 }
 function FilterInput({ label, initialValue = "", noValueText, submitText, autoOpen = false, placeholder, validate, onSave, onPressRemove, }) {
     const inputRef = useRef(null);
@@ -174,12 +174,14 @@ function FilterInput({ label, initialValue = "", noValueText, submitText, autoOp
         },
     });
     const onSubmit = () => {
-        submitForm(values => {
-            if (hasDefinedKeys(values, ["input"])) {
-                setValue(values.input);
-                onSave(values.input);
-                close();
-            }
+        submitForm({
+            onSuccess: ({ input }) => {
+                if (input.isSome()) {
+                    setValue(input.get());
+                    onSave(input.get());
+                    close();
+                }
+            },
         });
     };
     return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: value === "" ? noValueText : value }), _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: "input", children: ({ error, value, onChange }) => (_jsx(LakeLabel, { label: label, render: id => (_jsx(LakeTextInput, { id: id, error: error, style: styles.input, placeholder: placeholder, value: value, onChangeText: onChange, onSubmitEditing: onSubmit })) })) }), _jsx(LakeButton, { size: "small", color: "current", onPress: onSubmit, children: submitText })] }) })] }));
@@ -197,7 +199,7 @@ export const FiltersStack = ({ filters, openedFilters, definition, onChangeOpene
     if (openedFilters.length === 0) {
         return null;
     }
-    return (_jsx(Stack, { direction: "row", wrap: true, children: openedFilters.map(filterName => {
+    return (_jsx(Stack, { direction: "row", wrap: "wrap", children: openedFilters.map(filterName => {
             const filterDefinition = definition[filterName];
             if (typeof filterName !== "string" || filterDefinition == null) {
                 return null;

package/src/components/FixedListViewCells.d.ts

@@ -31,7 +31,7 @@ export declare const SimpleTitleCell: ({ isHighlighted, text, tooltip, }: {
         togglableOnFocus?: boolean | undefined;
         containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
         disabled?: boolean | undefined;
-    }, "children"> | undefined;
+    } & import("react").RefAttributes<import("./LakeTooltip").TooltipRef>, "children"> | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const SimpleRegularTextCell: ({ variant, text, textAlign, color, }: {
     variant?: "light" | "medium" | "semibold" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
@@ -58,7 +58,7 @@ export declare const CopyableRegularTextCell: ({ variant, text, textToCopy, copy
         togglableOnFocus?: boolean | undefined;
         containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
         disabled?: boolean | undefined;
-    }, "children"> | undefined;
+    } & import("react").RefAttributes<import("./LakeTooltip").TooltipRef>, "children"> | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const BalanceCell: ({ value, currency, originalValue, formatCurrency, textAlign, variant, }: {
     value: number;
@@ -89,7 +89,7 @@ export declare const LinkCell: ({ children, external, onPress, variant, tooltip,
         togglableOnFocus?: boolean | undefined;
         containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
         disabled?: boolean | undefined;
-    }, "children"> | undefined;
+    } & import("react").RefAttributes<import("./LakeTooltip").TooltipRef>, "children"> | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const StartAlignedCell: ({ children }: {
     children: ReactNode;

package/src/components/LakeButton.js

@@ -100,7 +100,6 @@ const styles = StyleSheet.create({
         right: -3,
     },
 });
-const isReactText = (node) => ["string", "number"].includes(typeof node);
 export const LakeButton = memo(forwardRef(({ ariaControls, ariaExpanded, ariaLabel, 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;
@@ -158,7 +157,7 @@ export const LakeButton = memo(forwardRef(({ ariaControls, ariaExpanded, ariaLab
                         ? 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, userSelect: "none", 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, { role: "none", style: [
+            return (_jsxs(_Fragment, { children: [hasIconStart && (_jsxs(_Fragment, { children: [_jsx(Icon, { color: textColor, name: icon, size: iconSize }), isNotNullish(children) && _jsx(Space, { width: isSmall ? 8 : 12 })] })), typeof children === "string" || typeof children === "number" ? (_jsx(LakeText, { numberOfLines: 1, userSelect: "none", 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, { role: "none", style: [
                             styles.loaderContainer,
                             {
                                 backgroundColor: mode === "secondary" || mode === "tertiary"

package/src/components/LakeCombobox.js

@@ -71,7 +71,6 @@ const styles = StyleSheet.create({
         flexGrow: 1,
     },
 });
-const isReactText = (node) => ["string", "number"].includes(typeof node);
 const getItemLayout = (_data, index) => ({
     length: DEFAULT_ELEMENT_HEIGHT,
     offset: DEFAULT_ELEMENT_HEIGHT * index,
@@ -172,7 +171,7 @@ const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEM
                                                         setIsFetchingAdditionalInfo(false);
                                                         dismiss();
                                                     });
-                                                }, children: isReactText(rendered) ? (_jsx(LakeText, { numberOfLines: 1, style: styles.itemText, children: rendered })) : (rendered) }));
+                                                }, children: typeof rendered === "string" || typeof rendered === "number" ? (_jsx(LakeText, { numberOfLines: 1, style: styles.itemText, children: rendered })) : (rendered) }));
                                         } })), ListFooterComponent, isFetchingAdditionalInfo ? (_jsxs(View, { style: styles.loaderAdditional, children: [_jsx(View, { style: styles.loaderAdditionalUnderlay }), _jsx(LoadingView, {})] })) : null] })),
                         }),
                     }) }) })] }));

package/src/components/LakeSelect.d.ts

@@ -21,14 +21,17 @@ export type SelectProps<V> = {
     disabled?: boolean;
     value?: V;
     onValueChange: (value: V) => void;
-    isItemDisabled?: (value: V) => boolean | string;
+    disabledItems?: {
+        value: V;
+        message?: string;
+    }[];
     hideErrors?: boolean;
     id?: string;
     error?: string;
     readOnly?: boolean;
     style?: StyleProp<ViewStyle>;
 };
-declare const LakeSelectWithRef: <V>({ title, items, valueStyle, size, color, disabled, mode, placeholder, readOnly, id, matchReferenceWidth, value, error, hideErrors, icon, onValueChange, isItemDisabled, PopoverFooter, style, }: SelectProps<V>, forwardedRef: ForwardedRef<View>) => import("react/jsx-runtime").JSX.Element;
+declare const LakeSelectWithRef: <V>({ title, items, valueStyle, size, color, disabled, mode, placeholder, readOnly, id, matchReferenceWidth, value, error, hideErrors, icon, onValueChange, disabledItems, PopoverFooter, style, }: SelectProps<V>, forwardedRef: ForwardedRef<View>) => import("react/jsx-runtime").JSX.Element;
 export declare const LakeSelect: <I>(props: SelectProps<I> & {
     ref?: ForwardedRef<View> | undefined;
 }) => ReturnType<typeof LakeSelectWithRef>;

package/src/components/LakeSelect.js

@@ -6,7 +6,7 @@ import { colors, invariantColors, radii, shadows, spacings, texts, } from "../co
 import { useDisclosure } from "../hooks/useDisclosure";
 import { useMergeRefs } from "../hooks/useMergeRefs";
 import { getFocusableElements } from "../utils/a11y";
-import { isNotNullish } from "../utils/nullish";
+import { isNotNullish, isNullishOrEmpty } from "../utils/nullish";
 import { Box } from "./Box";
 import { Fill } from "./Fill";
 import { Icon } from "./Icon";
@@ -111,7 +111,7 @@ const styles = StyleSheet.create({
         borderColor: colors.negative[500],
     },
 });
-const LakeSelectWithRef = ({ title, items, valueStyle, size, color = "current", disabled = false, mode = "normal", placeholder, readOnly = false, id, matchReferenceWidth = true, value, error, hideErrors = false, icon, onValueChange, isItemDisabled, PopoverFooter, style, }, forwardedRef) => {
+const LakeSelectWithRef = ({ title, items, valueStyle, size, color = "current", disabled = false, mode = "normal", placeholder, readOnly = false, id, matchReferenceWidth = true, value, error, hideErrors = false, icon, onValueChange, disabledItems = [], PopoverFooter, style, }, forwardedRef) => {
     var _a;
     const inputRef = useRef(null);
     const listRef = useRef(null);
@@ -188,12 +188,12 @@ const LakeSelectWithRef = ({ title, items, valueStyle, size, color = "current",
                             }
                         }, keyExtractor: (_, index) => `select-item-${index}`, renderItem: ({ item, index }) => {
                             const isSelected = value === item.value;
-                            const isDisabled = isNotNullish(isItemDisabled) && isItemDisabled(item.value);
-                            return (_jsx(LakeTooltip, { placement: "right", content: isDisabled, disabled: typeof isDisabled !== "string", children: _jsxs(Pressable, { ref: element => (listItemRefs.current[index] = element), onKeyDown: onKeyDown, disabled: isDisabled !== false, style: ({ hovered, focused }) => [
+                            const disablement = disabledItems.find(({ value }) => value === item.value);
+                            return (_jsx(LakeTooltip, { placement: "right", content: disablement === null || disablement === void 0 ? void 0 : disablement.message, disabled: isNullishOrEmpty(disablement === null || disablement === void 0 ? void 0 : disablement.message), children: _jsxs(Pressable, { ref: element => (listItemRefs.current[index] = element), onKeyDown: onKeyDown, disabled: isNotNullish(disablement), style: ({ hovered, focused }) => [
                                         styles.item,
                                         (hovered || isSelected) && styles.itemHighlighted,
                                         focused && styles.itemFocused,
-                                        isDisabled !== false && styles.itemDisabled,
+                                        isNotNullish(disablement) && styles.itemDisabled,
                                     ], role: "option", "aria-selected": true, onPress: () => {
                                         onValueChange(item.value);
                                         close();

package/src/components/LakeSlider.d.ts

@@ -1,12 +1,12 @@
-export type SliderProps = {
-    label: string;
-    value: number;
+import { ViewProps } from "react-native";
+type Props = {
     min: number;
     max: number;
+    value: number;
     step: number;
-    unit: string;
     disabled?: boolean;
+    style?: ViewProps["style"];
     onChange: (value: number) => void;
 };
-export declare const sliderBreakpoint: number;
-export declare const LakeSlider: ({ label, value, min, max, step, unit, disabled, onChange, }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeSlider: ({ min, max, value, step, disabled, style, onChange }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/LakeSlider.js

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

package/src/components/LakeText.d.ts

@@ -29,6 +29,6 @@ export declare const LakeText: import("react").ForwardRefExoticComponent<TextPro
         togglableOnFocus?: boolean | undefined;
         containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
         disabled?: boolean | undefined;
-    }, "children"> | undefined;
+    } & import("react").RefAttributes<import("./LakeTooltip").TooltipRef>, "children"> | undefined;
 } & import("react").RefAttributes<Text>>;
 export {};

package/src/components/LakeTooltip.d.ts

@@ -14,8 +14,12 @@ type Props = {
     containerStyle?: ViewProps["style"];
     disabled?: boolean;
 };
-export declare const LakeTooltip: ({ content, children, ...rest }: Props) => string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
-export declare const InformationTooltip: ({ text }: {
+export type TooltipRef = {
+    show: () => void;
+    hide: () => void;
+};
+export declare const LakeTooltip: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<TooltipRef>>;
+export declare const InformationTooltip: import("react").ForwardRefExoticComponent<{
     text: string;
-}) => import("react/jsx-runtime").JSX.Element;
+} & import("react").RefAttributes<TooltipRef>>;
 export {};

package/src/components/LakeTooltip.js

@@ -81,14 +81,13 @@ const styles = StyleSheet.create({
         flexGrow: 0,
     },
 });
-const isReactText = (node) => ["string", "number"].includes(typeof node);
 const MAX_WIDTH = "calc(100vw - 20px)";
-export const LakeTooltip = ({ content, children, ...rest }) => {
+export const LakeTooltip = forwardRef(({ content, children, ...rest }, forwardedRef) => {
     if (isNullishOrEmpty(content)) {
         return children;
     }
-    return (_jsx(Tooltip, { content: content, ...rest, children: children }));
-};
+    return (_jsx(Tooltip, { ref: forwardedRef, content: content, ...rest, children: children }));
+});
 const Tooltip = memo(forwardRef(({ children, content, describedBy, matchReferenceWidth = false, hideArrow = false, onHide, onShow, placement, width, togglableOnFocus = false, containerStyle, disabled = false, }, forwardedRef) => {
     var _a, _b;
     const referenceRef = useRef(null);
@@ -170,7 +169,7 @@ const Tooltip = memo(forwardRef(({ children, content, describedBy, matchReferenc
                             (state === null || state === void 0 ? void 0 : state.placement) === "bottom" && styles.baseBottom,
                             (state === null || state === void 0 ? void 0 : state.placement) === "right" && styles.baseRight,
                             (state === null || state === void 0 ? void 0 : state.placement) === "left" && styles.baseLeft,
-                        ], children: [_jsx(View, { style: [styles.content, { width, maxWidth: MAX_WIDTH }], children: isReactText(content) ? (_jsx(LakeText, { align: "center", color: colors.gray.contrast, children: content })) : (content) }), !hideArrow && (_jsx(View, { role: "none", style: [
+                        ], children: [_jsx(View, { style: [styles.content, { width, maxWidth: MAX_WIDTH }], children: typeof content === "string" || typeof content === "number" ? (_jsx(LakeText, { align: "center", color: colors.gray.contrast, children: content })) : (content) }), !hideArrow && (_jsx(View, { role: "none", style: [
                                     (state === null || state === void 0 ? void 0 : state.placement) === "right" || (state === null || state === void 0 ? void 0 : state.placement) === "left"
                                         ? styles.arrowContainerHorizontal
                                         : styles.arrowContainer,
@@ -187,4 +186,4 @@ const Tooltip = memo(forwardRef(({ children, content, describedBy, matchReferenc
                                     },
                                 ], children: _jsx(View, { style: styles.arrow }) }))] }) }) }))] }));
 }));
-export const InformationTooltip = ({ text }) => (_jsx(LakeTooltip, { describedBy: "copy", placement: "bottom", togglableOnFocus: true, width: 300, content: text, children: _jsx(View, { style: styles.info, children: _jsx(Icon, { name: "info-regular", size: 24, color: colors.gray[900] }) }) }));
+export const InformationTooltip = forwardRef(({ text }, forwardedRef) => (_jsx(LakeTooltip, { ref: forwardedRef, describedBy: "copy", placement: "bottom", togglableOnFocus: true, width: 300, content: text, children: _jsx(View, { style: styles.info, children: _jsx(Icon, { name: "info-regular", size: 24, color: colors.gray[900] }) }) })));

package/src/components/Stack.d.ts

@@ -5,8 +5,10 @@ export declare const Stack: import("react").ForwardRefExoticComponent<import("re
     children?: import("react").ReactNode;
     direction?: ("row" | "column" | "columnReverse" | "rowReverse") | undefined;
     justifyContent?: ("end" | "start" | "normal" | "center" | "spaceBetween" | "spaceAround" | "spaceEvenly") | undefined;
+    wrap?: ("nowrap" | "wrap" | "wrapReverse") | undefined;
+    grow?: number | undefined;
+    shrink?: number | undefined;
     style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
 } & {
     space?: 4 | 16 | 8 | 12 | 20 | 24 | 32 | 40 | 48 | 72 | 96 | undefined;
-    wrap?: boolean | undefined;
 } & import("react").RefAttributes<View>>;

package/src/components/Stack.js

@@ -1,20 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, forwardRef, Fragment } from "react";
-import { StyleSheet } from "react-native";
 import { isNullish } from "../utils/nullish";
 import { Box } from "./Box";
 import { Space } from "./Space";
-const styles = StyleSheet.create({
-    wrap: {
-        flexWrap: "wrap",
-    },
-});
 export const Stack = forwardRef(
-// Default <View /> styles https://github.com/necolas/react-native-web/blob/0.19.1/packages/react-native-web/src/exports/View/index.js#L146
-({ children, space, wrap = false, ...props }, forwardedRef) => {
+// Default <View /> styles https://github.com/necolas/react-native-web/blob/0.19.10/packages/react-native-web/src/exports/View/index.js#L146
+({ children, space, ...props }, forwardedRef) => {
     const { direction = "column" } = props;
     const horizontal = direction === "row" || direction === "rowReverse";
-    return (_jsx(Box, { style: wrap && styles.wrap, ref: forwardedRef, ...props, children: Children.map(children, (child, index) => {
+    return (_jsx(Box, { ref: forwardedRef, ...props, children: Children.map(children, (child, index) => {
             if (isNullish(child)) {
                 return child;
             }

package/src/utils/function.d.ts

@@ -2,8 +2,6 @@ export declare const identity: <T>(value: T) => T;
 export declare const noop: () => void;
 export declare const stubFalse: () => false;
 export declare const stubTrue: () => true;
-export declare const unionToArray: <T extends PropertyKey>(object: Record<T, true>) => T[];
-export declare const getUnionGuard: <T extends PropertyKey>(object: Record<T, true>) => (value: unknown) => value is T;
 export declare const deriveUnion: <T extends PropertyKey>(object: Record<T, true>) => {
     array: T[];
     set: Set<T>;

package/src/utils/function.js

@@ -4,11 +4,6 @@ export const identity = (value) => value;
 export const noop = () => { };
 export const stubFalse = () => false;
 export const stubTrue = () => true;
-export const unionToArray = (object) => Dict.keys(object);
-export const getUnionGuard = (object) => {
-    const set = new Set(unionToArray(object));
-    return (value) => set.has(value);
-};
 export const deriveUnion = (object) => {
     const array = Dict.keys(object);
     const set = new Set(array);

package/src/components/BorderedButton.d.ts

@@ -1,16 +0,0 @@
-import { ReactText } from "react";
-import { GestureResponderEvent, StyleProp, View, ViewStyle } from "react-native";
-import { IconName } from "./Icon";
-type Props = {
-    ariaLabel?: string;
-    children?: ReactText;
-    color?: string;
-    disabled?: boolean;
-    loading?: boolean;
-    icon?: IconName;
-    onPress?: (event: GestureResponderEvent) => void;
-    size?: "large" | "small";
-    style?: StyleProp<ViewStyle>;
-};
-export declare const BorderedButton: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<View>>>;
-export {};

package/src/components/BorderedButton.js

@@ -1,100 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, memo } from "react";
-import { ActivityIndicator, Pressable, StyleSheet, Text, View, } from "react-native";
-import { colors } from "../constants/colors";
-import { typography } from "../constants/typography";
-import { isNotNullish } from "../utils/nullish";
-import { Icon } from "./Icon";
-import { Space } from "./Space";
-const styles = StyleSheet.create({
-    base: {
-        alignItems: "center",
-        backgroundColor: colors.white,
-        borderColor: colors.gray[10],
-        borderRadius: 4,
-        borderWidth: 1,
-        flexDirection: "row",
-        flexShrink: 1,
-        height: 48,
-        justifyContent: "center",
-        overflow: "hidden",
-        paddingLeft: 20,
-        paddingRight: 20,
-        transitionDuration: "150ms",
-        transitionProperty: "background-color",
-    },
-    small: {
-        height: 40,
-        paddingLeft: 16,
-        paddingRight: 16,
-    },
-    withIcon: {
-        paddingLeft: 18,
-    },
-    withIconSmall: {
-        paddingLeft: 14,
-    },
-    iconOnly: {
-        paddingLeft: 13,
-        paddingRight: 13,
-    },
-    iconOnlySmall: {
-        paddingLeft: 10,
-        paddingRight: 10,
-    },
-    hovered: {
-        backgroundColor: colors.gray[3],
-    },
-    pressed: {
-        backgroundColor: colors.gray[10],
-    },
-    disabled: {
-        backgroundColor: colors.gray[3],
-        borderColor: colors.gray[3],
-        cursor: "not-allowed",
-    },
-    text: {
-        ...typography.bodyLarge,
-        fontWeight: typography.fontWeights.demi,
-        lineHeight: 48,
-        userSelect: "none",
-    },
-    textSmall: {
-        ...typography.bodySmall,
-        fontWeight: typography.fontWeights.demi,
-        lineHeight: 40,
-        userSelect: "none",
-    },
-    textDisabled: {
-        color: colors.gray[50],
-    },
-    loaderContainer: {
-        ...StyleSheet.absoluteFillObject,
-        alignItems: "center",
-        backgroundColor: colors.white,
-        justifyContent: "center",
-    },
-});
-export const BorderedButton = memo(forwardRef(({ ariaLabel, children = "", color = colors.gray[100], disabled = false, loading = false, icon, onPress, size = "large", style, }, forwardedRef) => {
-    const hasText = children !== "";
-    const isSmall = size === "small";
-    const iconSize = isSmall ? 18 : 20;
-    return (_jsxs(Pressable, { role: "button", "aria-label": ariaLabel, "aria-busy": loading, "aria-disabled": disabled, disabled: loading || disabled, ref: forwardedRef, onPress: onPress, style: ({ hovered, pressed }) => [
-            styles.base,
-            isSmall && styles.small,
-            isNotNullish(icon) && (isSmall ? styles.withIconSmall : styles.withIcon),
-            !hasText && (isSmall ? styles.iconOnlySmall : styles.iconOnly),
-            disabled
-                ? styles.disabled
-                : pressed
-                    ? styles.pressed
-                    : hovered
-                        ? styles.hovered
-                        : false,
-            style,
-        ], children: [icon && _jsx(Icon, { color: color, name: icon, size: iconSize }), hasText && isNotNullish(icon) && _jsx(Space, { width: isSmall ? 8 : 12 }), hasText && (_jsx(Text, { numberOfLines: 1, style: [
-                    isSmall ? styles.textSmall : styles.text,
-                    disabled ? styles.textDisabled : { color },
-                ], children: children })), loading && (_jsx(View, { role: "none", style: styles.loaderContainer, children: _jsx(ActivityIndicator, { color: disabled ? colors.gray[50] : colors.gray[100], size: iconSize }) }))] }));
-}));
-BorderedButton.displayName = "BorderedButton";

package/src/components/Caption.d.ts

@@ -1,6 +0,0 @@
-import { ReactText } from "react";
-import { Text, TextProps } from "react-native";
-export declare const Caption: import("react").ForwardRefExoticComponent<TextProps & {
-    align?: "left" | "right" | "center" | undefined;
-    children: ReactText;
-} & import("react").RefAttributes<Text>>;