@swan-io/lake 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "engines": {
     "node": ">=14.0.0",
     "yarn": "^1.20.0"
@@ -22,6 +22,7 @@
     "not ie <= 11",
     "safari >= 12"
   ],
+  "license": "MIT",
   "dependencies": {
     "@popperjs/core": "2.11.6",
     "@swan-io/boxed": "0.12.1",
@@ -31,7 +32,6 @@
     "polished": "4.2.2",
     "prism-react-renderer": "1.3.5",
     "react": "18.2.0",
-    "react-atomic-state": "1.2.7",
     "react-dom": "18.2.0",
     "react-dropzone": "14.2.3",
     "react-fast-compare": "3.2.0",
@@ -39,6 +39,7 @@
     "react-popper": "2.3.0",
     "react-ux-form": "1.3.0",
     "rifm": "0.12.1",
+    "ts-dedent": "2.2.0",
     "ts-pattern": "4.2.1",
     "urql": "3.0.3",
     "uuid": "9.0.0"
@@ -52,7 +53,6 @@
     "@types/react-native": "0.70.11",
     "@types/uuid": "9.0.1",
     "jsdom": "21.1.0",
-    "ts-dedent": "2.2.0",
     "type-fest": "3.6.1",
     "vitest": "0.29.2"
   }

package/src/components/FilterChooser.d.ts

@@ -1,8 +1,6 @@
 /// <reference types="react" />
 export declare function FilterChooser<FilterName extends string>({ filters, openFilters, label, title, availableFilters, large, onAddFilter, }: {
-    filters: Partial<{
-        [K in FilterName]: string | string[] | undefined;
-    }>;
+    filters: Partial<Record<FilterName, unknown>>;
     openFilters: FilterName[];
     label: string;
     title: string;

package/src/components/Filters.d.ts

@@ -36,12 +36,18 @@ export type FilterInputDef = {
     placeholder?: string;
     validate?: (value: string) => ValidatorResult;
 };
-type Filter<T> = FilterCheckboxDef<T> | FilterRadioDef<T> | FilterDateDef | FilterInputDef;
+export type FilterBooleanDef = {
+    type: "boolean";
+    label: string;
+};
+type Filter<T> = FilterCheckboxDef<T> | FilterRadioDef<T> | FilterDateDef | FilterInputDef | FilterBooleanDef;
 type ExtractFilterValue<T extends Filter<unknown>> = T extends {
     type: "checkbox";
 } ? T["items"][number]["value"][] | undefined : T extends {
     type: "radio";
-} ? T["items"][number]["value"] | undefined : string | undefined;
+} ? T["items"][number]["value"] | undefined : T extends {
+    type: "boolean";
+} ? boolean | undefined : string | undefined;
 type FiltersDefinition = Record<string, Filter<unknown>>;
 export type FiltersState<T extends FiltersDefinition> = Simplify<{
     [K in keyof T]: Simplify<ExtractFilterValue<T[K]>>;

package/src/components/Filters.js

@@ -224,6 +224,10 @@ export const FiltersStack = ({ filters, openedFilters, definition, onChangeOpene
                         onChangeFilters({ ...filters, [filterName]: undefined });
                         onChangeOpened(openedFilters.filter(f => f !== filterName));
                     } })))
+                    .with({ type: "boolean" }, ({ label }) => (_jsx(Tag, { color: "current", onPressRemove: () => {
+                        onChangeFilters({ ...filters, [filterName]: undefined });
+                        onChangeOpened(openedFilters.filter(f => f !== filterName));
+                    }, children: label })))
                     .exhaustive() }, filterName));
         }) }));
 };

package/src/components/InputError.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyleSheet, Text } from "react-native";
+import { Space } from "./Space";
 import { colors } from "../constants/colors";
 import { typography } from "../constants/typography";
-import { Space } from "./Space";
 const styles = StyleSheet.create({
     base: {
         ...typography.bodySmall,

package/src/components/LakeCombobox.d.ts

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

package/src/components/LakeCombobox.js

@@ -4,6 +4,7 @@ import { FlatList, Pressable, StyleSheet, Text, View, } from "react-native";
 import { backgroundColor, colors, spacings } from "../constants/design";
 import { typography } from "../constants/typography";
 import { useDisclosure } from "../hooks/useDisclosure";
+import { useMergeRefs } from "../hooks/useMergeRefs";
 import { getFocusableElements } from "../utils/a11y";
 import { Box } from "./Box";
 import { Icon } from "./Icon";
@@ -80,8 +81,10 @@ const getItemLayout = (_data, index) => ({
     offset: ELEMENT_HEIGHT * index,
     index,
 });
-const LakeComboboxWithRef = ({ value, items, ListFooterComponent, onValueChange, onSelectItem, renderItem, keyExtractor, icon, placeholder, disabled = false, emptyResultText, readOnly, nativeID, error, }, externalRef) => {
+const LakeComboboxWithRef = ({ inputRef, value, items, ListFooterComponent, onValueChange, onSelectItem, renderItem, keyExtractor, icon, placeholder, disabled = false, emptyResultText, readOnly, nativeID, error, }, externalRef) => {
     const ref = useRef(null);
+    // @ts-expect-error
+    const inputTextRef = useMergeRefs(ref, inputRef);
     const listRef = useRef(null);
     const listContainerRef = useRef(null);
     const blurTimeoutId = useRef(undefined);
@@ -140,7 +143,11 @@ const LakeComboboxWithRef = ({ value, items, ListFooterComponent, onValueChange,
             close();
         }, 100);
     }, [close]);
-    return (_jsxs(View, { children: [_jsx(LakeTextInput, { ref: ref, style: styles.input, accessibilityExpanded: isFocused, accessibilityControls: isFocused ? suggestionsId : "", returnKeyType: "search", icon: icon, accessibilityRole: "combobox", placeholder: placeholder, value: value, disabled: disabled, error: error, onChangeText: onValueChange, onFocus: handleFocus, onBlur: handleBlur, onKeyPress: handleKeyPress, nativeID: nativeID, readOnly: readOnly }), _jsx(Popover, { id: suggestionsId, role: "listbox", matchReferenceWidth: true, onDismiss: close, referenceRef: ref, autoFocus: true, returnFocus: false, visible: isFocused && !items.isNotAsked(), underlay: false, forcedMode: "Dropdown", children: _jsx(View, { style: styles.list, children: items.match({
+    return (_jsxs(View, { children: [_jsx(LakeTextInput
+            // @ts-expect-error
+            , { 
+                // @ts-expect-error
+                ref: inputTextRef, style: styles.input, accessibilityExpanded: isFocused, accessibilityControls: isFocused ? suggestionsId : "", returnKeyType: "search", icon: icon, accessibilityRole: "combobox", placeholder: placeholder, value: value, disabled: disabled, error: error, onChangeText: onValueChange, onFocus: handleFocus, onBlur: handleBlur, onKeyPress: handleKeyPress, nativeID: nativeID, readOnly: readOnly }), _jsx(Popover, { id: suggestionsId, role: "listbox", matchReferenceWidth: true, onDismiss: close, referenceRef: ref, autoFocus: true, returnFocus: false, visible: isFocused && !items.isNotAsked(), underlay: false, forcedMode: "Dropdown", children: _jsx(View, { style: styles.list, children: items.match({
                         NotAsked: () => null,
                         Loading: () => _jsx(LoadingView, { style: styles.loader }),
                         Done: items => items.match({
@@ -153,6 +160,7 @@ const LakeComboboxWithRef = ({ value, items, ListFooterComponent, onValueChange,
                                                     focused && styles.focusedItem,
                                                     pressed && styles.pressedItem,
                                                 ], onPress: () => {
+                                                    window.clearTimeout(blurTimeoutId.current);
                                                     setIsFetchingAdditionalInfo(true);
                                                     Promise.resolve(onSelectItem(item)).finally(() => {
                                                         setIsFetchingAdditionalInfo(false);

package/src/components/LakeLabel.d.ts

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

package/src/components/LakeLabel.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useRef, useState } from "react";
 import { StyleSheet, unstable_createElement, View, } from "react-native";
+import { match } from "ts-pattern";
 import { v4 as uuid } from "uuid";
 import { commonStyles } from "../constants/commonStyles";
 import { colors, fonts, spacings, texts } from "../constants/design";
@@ -39,5 +40,9 @@ export const LakeLabel = ({ label, optionalLabel, extra, readOnly = false, color
             target?.focus();
         }
     }, [id]);
-    return (_jsxs(Box, { style: [styles.container, style], direction: "row", alignItems: "center", justifyContent: "spaceBetween", children: [_jsxs(View, { style: commonStyles.fill, ref: containerRef, children: [_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", alignItems: "center", children: [_jsxs(Box, { direction: "row", style: styles.shrink, children: [type === "form" || type === "formSmall" ? (_jsxs(Label, { onClick: onClick, htmlFor: id, style: [styles.label, readOnly && { color: readOnlyColor }], children: [label, optionalLabel != null ? (_jsxs(_Fragment, { children: [" - ", _jsx(LakeText, { color: colors.gray[400], style: styles.optionalLabel, children: optionalLabel })] })) : null] })) : (_jsxs(LakeText, { variant: "medium", color: readOnlyColor, nativeID: id, children: [label, optionalLabel != null ? (_jsxs(_Fragment, { children: [" - ", _jsx(LakeText, { color: colors.gray[400], style: styles.optionalLabel, children: optionalLabel })] })) : null] })), isNotNullish(extra) && extra()] }), isNotNullish(help) && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 16 }), help] }))] }), _jsx(Space, { height: type === "formSmall" || type === "viewSmall" ? 4 : 8 }), _jsx(View, { accessibilityLabelledBy: type === "view" || type === "viewSmall" ? id : undefined, children: render(id) })] }), isNotNullish(actions) && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 16 }), actions] }))] }));
+    return (_jsxs(Box, { style: [styles.container, style], direction: "row", alignItems: "center", justifyContent: "spaceBetween", children: [_jsxs(View, { style: commonStyles.fill, ref: containerRef, children: [_jsxs(Box, { direction: "row", justifyContent: "spaceBetween", alignItems: "center", children: [_jsxs(Box, { direction: "row", style: styles.shrink, children: [type === "form" || type === "formSmall" || type === "radioGroup" ? (_jsxs(Label, { onClick: onClick, htmlFor: id, style: [styles.label, readOnly && { color: readOnlyColor }], children: [label, optionalLabel != null ? (_jsxs(_Fragment, { children: [" - ", _jsx(LakeText, { color: colors.gray[400], style: styles.optionalLabel, children: optionalLabel })] })) : null] })) : (_jsxs(LakeText, { variant: "medium", color: readOnlyColor, nativeID: id, children: [label, optionalLabel != null ? (_jsxs(_Fragment, { children: [" - ", _jsx(LakeText, { color: colors.gray[400], style: styles.optionalLabel, children: optionalLabel })] })) : null] })), isNotNullish(extra) && extra()] }), isNotNullish(help) && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 16 }), help] }))] }), _jsx(Space, { height: match(type)
+                            .with("formSmall", "viewSmall", () => 4)
+                            .with("form", "view", () => 8)
+                            .with("radioGroup", () => 12)
+                            .exhaustive() }), _jsx(View, { accessibilityLabelledBy: type === "view" || type === "viewSmall" ? id : undefined, children: render(id) })] }), isNotNullish(actions) && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 16 }), actions] }))] }));
 };

package/src/components/LakeModal.js

@@ -128,5 +128,5 @@ export const LakeModal = ({ visible, icon, title, color = "current", children, m
     if (rootElement == null) {
         return null;
     }
-    return (_jsx(Portal, { container: rootElement, children: _jsxs(View, { accessibilityModal: true, style: styles.container, pointerEvents: visible ? "auto" : "none", children: [_jsx(TransitionView, { style: styles.fill, enter: styles.overlayEnter, leave: styles.overlayLeave, children: visible ? _jsx(View, { style: styles.overlay }) : null }), _jsx(Suspense, { fallback: _jsx(LoadingView, { color: backgroundColor.accented, delay: 0 }), children: _jsx(TransitionView, { style: styles.fill, enter: styles.modalEnter, leave: styles.modalLeave, children: visible ? (_jsx(ResponsiveContainer, { style: styles.root, breakpoint: breakpoints.tiny, children: ({ large, small }) => (_jsx(FocusTrap, { autoFocus: true, focusLock: true, returnFocus: true, onEscapeKey: onPressClose, style: styles.trap, children: _jsxs(ScrollView, { style: styles.modalContainer, contentContainerStyle: large ? styles.modalContentContainer : styles.modalContentContainerSmall, children: [onPressClose != null ? (_jsx(Pressable, { onPress: onPressClose, style: styles.pressableOverlay })) : null, _jsxs(View, { style: [large ? styles.modal : styles.modalSmall, { maxWidth }], children: [_jsxs(View, { style: styles.modalHeader, children: [_jsxs(View, { style: styles.modalIconTitle, children: [icon != null ? (_jsx(Icon, { name: icon, size: large ? 40 : 32, color: colors[color].primary })) : null, icon != null && title != null ? _jsx(Space, { height: 12 }) : null, title != null ? (_jsxs(_Fragment, { children: [_jsx(LakeHeading, { level: 2, variant: "h3", children: title }), _jsx(Space, { height: 12 })] })) : null, icon != null && title != null ? _jsx(Space, { height: 8 }) : null] }), onPressClose != null ? (_jsx(LakeButton, { style: styles.closeButton, mode: "tertiary", onPress: onPressClose, icon: "lake-close" })) : null] }), typeof children == "function" ? children({ large, small }) : children] })] }) })) })) : null }) })] }) }));
+    return (_jsx(Portal, { container: rootElement, children: _jsxs(View, { accessibilityModal: true, style: styles.container, pointerEvents: visible ? "auto" : "none", children: [_jsx(TransitionView, { style: styles.fill, enter: styles.overlayEnter, leave: styles.overlayLeave, children: visible ? _jsx(View, { style: styles.overlay }) : null }), _jsx(Suspense, { fallback: _jsx(LoadingView, { color: backgroundColor.accented, delay: 0 }), children: _jsx(TransitionView, { style: styles.fill, enter: styles.modalEnter, leave: styles.modalLeave, children: visible ? (_jsx(ResponsiveContainer, { style: styles.root, breakpoint: breakpoints.tiny, children: ({ large, small }) => (_jsx(FocusTrap, { autoFocus: true, focusLock: true, returnFocus: true, onEscapeKey: onPressClose, style: styles.trap, children: _jsxs(ScrollView, { style: styles.modalContainer, contentContainerStyle: large ? styles.modalContentContainer : styles.modalContentContainerSmall, children: [onPressClose != null ? (_jsx(Pressable, { onPress: onPressClose, style: styles.pressableOverlay })) : null, _jsxs(View, { style: [large ? styles.modal : styles.modalSmall, { maxWidth }], children: [_jsxs(View, { style: styles.modalHeader, children: [_jsxs(View, { style: styles.modalIconTitle, children: [icon != null ? (_jsx(Icon, { name: icon, size: large ? 40 : 32, color: colors[color][500] })) : null, icon != null && title != null ? _jsx(Space, { height: 12 }) : null, title != null ? (_jsxs(_Fragment, { children: [_jsx(LakeHeading, { level: 2, variant: "h3", children: title }), _jsx(Space, { height: 12 })] })) : null] }), onPressClose != null ? (_jsx(LakeButton, { style: styles.closeButton, mode: "tertiary", onPress: onPressClose, icon: "lake-close" })) : null] }), typeof children == "function" ? children({ large, small }) : children] })] }) })) })) : null }) })] }) }));
 };

package/src/components/LakeStepper.js

@@ -13,6 +13,9 @@ const linkStyle = {
     textDecoration: "none",
 };
 const styles = StyleSheet.create({
+    container: {
+        alignItems: "flex-end",
+    },
     bar: {
         width: "100%",
         height: 4,
@@ -70,7 +73,7 @@ export const LakeStepper = ({ steps, activeStepId, style }) => {
         .exhaustive())
         .flat();
     const activeStepIndex = stepIds.indexOf(activeStepId);
-    return (_jsx(Grid, { numColumns: steps.length, horizontalSpace: 12, style: style, children: steps.map((step, index) => {
+    return (_jsx(Grid, { numColumns: steps.length, horizontalSpace: 12, style: [styles.container, style], children: steps.map((step, index) => {
             const stepNumber = index + 1;
             const currentId = match(step)
                 .with({ id: P.string }, ({ id }) => id)

package/src/components/LakeTextInput.d.ts

@@ -5,6 +5,7 @@ import { IconName } from "./Icon";
 export type LakeTextInputProps = Omit<TextInputProps, "editable" | "onChange"> & {
     error?: string;
     readOnly?: boolean;
+    validating?: boolean;
     valid?: boolean;
     disabled?: boolean;
     color?: ColorVariants;
@@ -21,6 +22,7 @@ export type LakeTextInputProps = Omit<TextInputProps, "editable" | "onChange"> &
 export declare const LakeTextInput: import("react").ForwardRefExoticComponent<Omit<TextInputProps, "editable" | "onChange"> & {
     error?: string | undefined;
     readOnly?: boolean | undefined;
+    validating?: boolean | undefined;
     valid?: boolean | undefined;
     disabled?: boolean | undefined;
     color?: "warning" | "current" | "gray" | "live" | "sandbox" | "positive" | "negative" | "partner" | "swan" | "shakespear" | "darkPink" | "sunglow" | "mediumSladeBlue" | undefined;

package/src/components/LakeTextInput.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useRef, useState } from "react";
-import { StyleSheet, TextInput, View, } from "react-native";
+import { ActivityIndicator, StyleSheet, TextInput, View, } from "react-native";
 import { commonStyles } from "../constants/commonStyles";
 import { backgroundColor, colors, radii, shadows, spacings, texts, } from "../constants/design";
 import { useHover } from "../hooks/useHover";
@@ -116,7 +116,7 @@ const styles = StyleSheet.create({
         boxShadow: shadows.tile,
     },
 });
-export const LakeTextInput = forwardRef(({ error, disabled = false, valid = false, readOnly = false, icon, children, unit, color = "gray", keyboardType = "default", hideErrors = false, onChange, pattern, style: stylesFromProps, onFocus: originalOnFocus, onBlur: originalOnBlur, value, defaultValue, multiline = false, ...props }, forwardRef) => {
+export const LakeTextInput = forwardRef(({ error, disabled = false, validating = false, valid = false, readOnly = false, icon, children, unit, color = "gray", keyboardType = "default", hideErrors = false, onChange, pattern, style: stylesFromProps, onFocus: originalOnFocus, onBlur: originalOnBlur, value, defaultValue, multiline = false, ...props }, forwardRef) => {
     const inputRef = useRef(null);
     const [isHovered, setIsHovered] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
@@ -150,5 +150,5 @@ export const LakeTextInput = forwardRef(({ error, disabled = false, valid = fals
                                             isFocused && styles.focused,
                                             isFocused && { borderColor: colors[color][500] },
                                             stylesFromProps,
-                                        ] }), hasError && (_jsx(Icon, { name: "warning-regular", size: 20, color: colors.negative[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), !hasError && valid && (_jsx(Icon, { name: "checkmark-filled", size: 20, color: colors.positive[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), isNotNullish(icon) && (_jsx(Icon, { name: icon, size: 20, color: colors.current.primary, style: styles.icon }))] }), isNotNullish(unit) && (_jsx(LakeText, { color: colors.gray[900], style: [styles.unit, (disabled || readOnly) && styles.unitDisabled], children: unit }))] }), children] }), !hideErrors && (_jsx(LakeText, { color: colors.negative[400], style: styles.errorText, children: error ?? " " }))] }));
+                                        ] }), validating && (_jsx(ActivityIndicator, { size: "small", style: styles.endIcon, color: colors.current[500] })), !validating && hasError && (_jsx(Icon, { name: "warning-regular", size: 20, color: colors.negative[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), !validating && !hasError && valid && (_jsx(Icon, { name: "checkmark-filled", size: 20, color: colors.positive[400], style: [styles.endIcon, readOnly && styles.readOnlyEndIcon] })), isNotNullish(icon) && (_jsx(Icon, { name: icon, size: 20, color: colors.current.primary, style: styles.icon }))] }), isNotNullish(unit) && (_jsx(LakeText, { color: colors.gray[900], style: [styles.unit, (disabled || readOnly) && styles.unitDisabled], children: unit }))] }), children] }), !hideErrors && (_jsx(LakeText, { color: colors.negative[400], style: styles.errorText, children: error ?? " " }))] }));
 });

package/src/components/PlainListView.js

@@ -194,7 +194,7 @@ export const PlainListView = ({ data: originalData, keyExtractor, rowHeight, gro
                                             ], children: _jsx(LakeHeading, { level: 3, variant: "h3", children: groupName }) })) : null, items.map((item, index) => {
                                             const key = keyExtractor(item, index);
                                             const isActive = activeRowId === key;
-                                            const isHovered = hoveredRow === key;
+                                            const isHovered = isNotNullish(getRowLink) && hoveredRow === key;
                                             const wrapper = createRowWrapper({ item, absoluteIndex: index, extraInfo });
                                             return cloneElement(wrapper, {
                                                 style: { ...styles.rowLink, ...wrapper.props.style },

package/src/components/RadioGroup.js

@@ -16,10 +16,15 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         alignItems: "center",
     },
-    rowItem: {
+    withRightSpace: {
         // use margin instead of <Space /> to avoid line starting with <Space /> because of flex-wrap
         marginRight: 24,
     },
+    // We need this bottom margin in case there are too much items and some of them are wrapped to next line
+    withBottomSpace: {
+        // use margin instead of <Space /> to avoid making height bigger than expected
+        marginBottom: 12,
+    },
 });
 export function RadioGroup({ items, direction = "column", color = "current", disabled = false, value, onValueChange, }) {
     return (_jsx(Box, { direction: direction, style: styles.container, children: items.map((item, index) => {
@@ -29,6 +34,10 @@ export function RadioGroup({ items, direction = "column", color = "current", dis
                             if (item.value !== value) {
                                 onValueChange(item.value);
                             }
-                        }, style: [styles.item, direction === "row" && !isLast && styles.rowItem], children: [_jsx(LakeRadio, { disabled: isDisabled, color: color, value: item.value === value }), _jsx(Space, { width: 12 }), _jsx(LakeText, { color: isDisabled ? colors.gray[300] : colors.gray[900], children: item.name })] }), !isLast && _jsx(Space, { height: direction === "column" ? 12 : 32 })] }, index));
+                        }, style: [
+                            styles.item,
+                            direction === "row" && styles.withBottomSpace,
+                            direction === "row" && !isLast && styles.withRightSpace,
+                        ], children: [_jsx(LakeRadio, { disabled: isDisabled, color: color, value: item.value === value }), _jsx(Space, { width: 12 }), _jsx(LakeText, { color: isDisabled ? colors.gray[300] : colors.gray[900], children: item.name })] }), !isLast && _jsx(Space, { height: direction === "column" ? 12 : undefined })] }, index));
         }) }));
 }

package/src/components/Switch.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, memo, useEffect } from "react";
 import { Animated, Pressable, StyleSheet, View } from "react-native";
+import { Icon } from "./Icon";
 import { backgroundColor, colors, shadows } from "../constants/design";
 import { useAnimatedValue } from "../hooks/useAnimatedValue";
-import { Icon } from "./Icon";
 const WIDTH = 36;
 const BUTTON_SIZE = 16;
 const PADDING = 2;

package/src/components/TabView.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { IconName } from "@swan-io/lake/src/components/Icon";
+import { SpacingValue } from "@swan-io/lake/src/components/Space";
 type Tab = {
     label: string;
     url: string;
@@ -11,6 +12,7 @@ type Props = {
     tabs: Tab[];
     otherLabel: string;
     hideIfSingleItem?: boolean;
+    padding?: SpacingValue;
 };
-export declare const TabView: ({ tabs, otherLabel, hideIfSingleItem }: Props) => JSX.Element | null;
+export declare const TabView: ({ tabs, otherLabel, hideIfSingleItem, padding }: Props) => JSX.Element | null;
 export {};

package/src/components/TabView.js

@@ -249,7 +249,7 @@ const DropdownItems = forwardRef(({ tabs, otherLabel, currentUrl }, ref) => {
                     isNotNullish(activeTab) ? styles.activeLink : hovered ? styles.hoveredLink : null,
                 ], children: [_jsx(Text, { children: otherLabel }), _jsx(Space, { width: 8 }), _jsx(Text, { style: styles.count, children: tabs.length }), _jsx(Space, { width: 4 }), _jsx(Icon, { name: "chevron-down-filled", size: 12 })] }), _jsx(TransitionView, { ...animations.fadeAndSlideInFromBottom, style: styles.dropdownPlacement, children: shouldOpen ? (_jsx(FocusTrap, { autoFocus: shouldAutoFocus, focusLock: shouldLockFocus, returnFocus: shouldLockFocus, onClickOutside: onPressOutside, onEscapeKey: shouldLockFocus ? onEscapeKey : undefined, children: _jsx(Dropdown, { tabs: tabs, onHoverStart: onHoverStart, onHoverEnd: onHoverEnd, onLinkFocus: onLinkFocus, onLinkBlur: onAnyBlur, onLinkPress: onEscapeKey }) })) : null })] }));
 });
-export const TabView = ({ tabs, otherLabel, hideIfSingleItem = true }) => {
+export const TabView = ({ tabs, otherLabel, hideIfSingleItem = true, padding }) => {
     const containerRef = useRef(null);
     const placeholderRef = useRef(null);
     const otherPlaceholderRef = useRef(null);
@@ -268,14 +268,15 @@ export const TabView = ({ tabs, otherLabel, hideIfSingleItem = true }) => {
             for (const [link, node] of values) {
                 if ("/" + path.join("/") === link && isNotNullish(node) && isNotNullish(container)) {
                     node.measureLayout(container, (left, _, width) => {
-                        setUnderlinePosition({ left, width });
+                        const leftOffset = padding ?? 0;
+                        setUnderlinePosition({ left: left - leftOffset, width });
                     }, noop);
                     return;
                 }
             }
         }
         setUnderlinePosition({ left: 0, width: 0 });
-    }, [path, kept, collapsed]);
+    }, [path, kept, collapsed, padding]);
     useEffect(() => {
         setHasRendered(width > 0);
     }, [width]);
@@ -370,7 +371,7 @@ export const TabView = ({ tabs, otherLabel, hideIfSingleItem = true }) => {
     if (tabs.length <= 1 && hideIfSingleItem) {
         return null;
     }
-    return (_jsxs(Box, { alignItems: "center", direction: "row", accessibilityRole: "tablist", ref: containerRef, style: styles.container, children: [_jsxs(View, { style: styles.placeholder, accessibilityHidden: true, ref: placeholderRef, pointerEvents: "none", onLayout: onLayout, children: [tabs.map(({ label, url, icon, count }) => (_jsxs(Fragment, { children: [_jsxs(Link, { ref: ref => {
+    return (_jsxs(Box, { alignItems: "center", direction: "row", accessibilityRole: "tablist", ref: containerRef, style: [styles.container, { paddingHorizontal: padding }], children: [_jsxs(View, { style: styles.placeholder, accessibilityHidden: true, ref: placeholderRef, pointerEvents: "none", onLayout: onLayout, children: [tabs.map(({ label, url, icon, count }) => (_jsxs(Fragment, { children: [_jsxs(Link, { ref: ref => {
                                     if (placeholderLinkRef.current) {
                                         placeholderLinkRef.current[url] = ref;
                                     }

package/src/constants/commonStyles.d.ts

@@ -25,6 +25,10 @@ export declare const commonStyles: {
         readonly flexGrow: 1;
         readonly flexShrink: 1;
     };
+    readonly fillNoShrink: {
+        readonly flexGrow: 1;
+        readonly flexShrink: 0;
+    };
     readonly hidden: {
         readonly visibility: "hidden";
     };

package/src/constants/commonStyles.js

@@ -39,6 +39,7 @@ export const commonStyles = {
     center: { alignItems: "center", justifyContent: "center" },
     centerSelf: { marginHorizontal: "auto" },
     fill: { flexGrow: 1, flexShrink: 1 },
+    fillNoShrink: { flexGrow: 1, flexShrink: 0 },
     hidden: { visibility: "hidden" },
     view: viewStyle,
     visuallyHidden: visuallyHiddenStyle,

package/src/utils/rifm.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps } from "react";
 import { Rifm } from "rifm";
-export type Props = Required<Pick<ComponentProps<typeof Rifm>, "accept" | "append" | "format" | "mask">>;
+export type RifmProps = Required<Pick<ComponentProps<typeof Rifm>, "accept" | "append" | "format" | "mask">>;
 declare const accepted: {
     alpha: RegExp;
     numeric: RegExp;
@@ -10,5 +10,5 @@ export declare const getRifmProps: ({ accept, charMap, maxLength, }: {
     accept: keyof typeof accepted;
     maxLength: number;
     charMap: Record<number, string>;
-}) => Props;
+}) => RifmProps;
 export {};