@swan-io/lake 11.1.3 → 11.1.5

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@swan-io/lake",
-  "version": "11.1.3",
+  "version": "11.1.5",
   "engines": {
     "node": ">=20.9.0",
-    "pnpm": "9.9.0"
+    "pnpm": "^9.13.0"
   },
   "files": [
     "LICENSE",

package/src/components/Cells.d.ts

@@ -1,67 +1,134 @@
 import { ComponentProps, ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { Except } from "type-fest";
 import { ColorVariants } from "../constants/design";
 import { TextVariant } from "./LakeText";
 import { LakeTooltip } from "./LakeTooltip";
-type Justify = "flex-start" | "center" | "flex-end";
+declare const directionStyles: {
+    column: {
+        flexDirection: "column";
+    };
+    row: {
+        flexDirection: "row";
+    };
+};
+type Align = "left" | "center" | "right";
+type FadeOn = "left" | "right";
 type SortDirection = "Desc" | "Asc";
-export declare const SimpleHeaderCell: ({ text, sort, justifyContent, onPress, }: {
-    text: string;
-    justifyContent?: Justify;
+type TooltipProp = Except<ComponentProps<typeof LakeTooltip>, "children">;
+type CellProps = {
+    children: ReactNode;
+    align?: Align;
+    direction?: keyof typeof directionStyles;
+    fadeOn?: FadeOn;
+    style?: StyleProp<ViewStyle>;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+};
+export declare const Cell: ({ children, align, direction, fadeOn, style, contentContainerStyle, }: CellProps) => import("react/jsx-runtime").JSX.Element;
+type HeaderCellProps = {
+    align?: Align;
     sort?: SortDirection;
-    onPress?: (direction: SortDirection) => void;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const ColorPatchCell: ({ isHovered, alternativeText, color, }: {
-    isHovered: boolean;
-    alternativeText?: string;
-    color: ColorVariants;
-}) => import("react/jsx-runtime").JSX.Element | null;
-export declare const SimpleTitleCell: ({ isHighlighted, text, tooltip, }: {
-    isHighlighted?: boolean;
     text: string;
-    tooltip?: Omit<ComponentProps<typeof LakeTooltip>, "children">;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const SimpleRegularTextCell: ({ variant, text, textAlign, color, }: {
-    variant?: TextVariant;
-    text: string;
-    textAlign?: "left" | "center" | "right";
+    onPress?: (direction: SortDirection) => void;
+};
+export declare const HeaderCell: ({ align, sort, text, onPress }: HeaderCellProps) => import("react/jsx-runtime").JSX.Element;
+type TextCellProps = {
+    align?: Align;
     color?: string;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const CopyableRegularTextCell: ({ variant, text, textToCopy, copyWording, copiedWording, tooltip, }: {
+    text: string;
+    tooltip?: TooltipProp;
     variant?: TextVariant;
+};
+export declare const TextCell: ({ align, color, text, tooltip, variant, }: TextCellProps) => import("react/jsx-runtime").JSX.Element;
+type CopyableTextCellProps = {
+    copiedWording: string;
+    copyWording: string;
     text: string;
     textToCopy?: string;
-    copyWording: string;
-    copiedWording: string;
-    tooltip?: Omit<ComponentProps<typeof LakeTooltip>, "children">;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const BalanceCell: ({ value, currency, originalValue, formatCurrency, textAlign, variant, }: {
-    value: number;
+    tooltip?: TooltipProp;
+    variant?: TextVariant;
+};
+export declare const CopyableTextCell: ({ copiedWording, copyWording, text, textToCopy, tooltip, variant, }: CopyableTextCellProps) => import("react/jsx-runtime").JSX.Element;
+type BalanceCellProps = {
+    align?: Align;
     currency: string;
+    formatCurrency: (value: number, currency: string) => string;
     originalValue?: {
         value: number;
         currency: string;
     };
-    formatCurrency: (value: number, currency: string) => string;
-    textAlign?: "left" | "center" | "right";
+    /**
+     * @deprecated Use `align` prop instead
+     */
+    textAlign?: Align;
+    value: number;
     variant?: TextVariant;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const LinkCell: ({ children, external, onPress, variant, tooltip, buttonPosition, }: {
+};
+export declare const BalanceCell: ({ textAlign, align, currency, formatCurrency, originalValue, value, variant, }: BalanceCellProps) => import("react/jsx-runtime").JSX.Element;
+type LinkCellProps = {
+    buttonPosition?: "start" | "end";
     children: ReactNode;
-    onPress: () => void;
     external?: boolean;
+    fadeOn?: FadeOn;
+    onPress: () => void;
+    tooltip?: TooltipProp;
     variant?: TextVariant;
-    tooltip?: Omit<ComponentProps<typeof LakeTooltip>, "children">;
-    buttonPosition?: "start" | "end";
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const StartAlignedCell: ({ children }: {
-    children: ReactNode;
+};
+export declare const LinkCell: ({ buttonPosition, children, external, fadeOn, onPress, tooltip, variant, }: LinkCellProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated Avoid usage
+ */
+export declare const ColorPatchCell: ({ alternativeText, color, isHovered, }: {
+    alternativeText?: string;
+    color: ColorVariants;
+    isHovered: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * @deprecated Use `HeaderCell` instead
+ */
+export declare const SimpleHeaderCell: ({ justifyContent, ...props }: {
+    justifyContent?: "flex-start" | "center" | "flex-end";
+    text: string;
+    sort?: SortDirection;
+    onPress?: (direction: SortDirection) => void;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const CenteredCell: ({ children }: {
-    children: ReactNode;
+/**
+ * @deprecated Use `TextCell` with color={…} and variant="medium" instead
+ */
+export declare const SimpleTitleCell: ({ isHighlighted, text, tooltip, }: {
+    isHighlighted?: boolean;
+    text: string;
+    tooltip?: TooltipProp;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const EndAlignedCell: ({ children }: {
-    children: ReactNode;
+/**
+ * @deprecated Use `TextCell` instead
+ */
+export declare const SimpleRegularTextCell: ({ color, text, textAlign, variant, }: {
+    color?: string;
+    text: string;
+    textAlign?: Align;
+    variant?: TextVariant;
 }) => import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated Use `CopyableTextCell` instead
+ */
+export declare const CopyableRegularTextCell: ({ copiedWording, copyWording, text, textToCopy, tooltip, variant, }: CopyableTextCellProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated Use `<Cell align="left" />` instead
+ */
+export declare const StartAlignedCell: (props: Except<CellProps, "align">) => import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated Use `<Cell align="center" />` instead
+ */
+export declare const CenteredCell: (props: Except<CellProps, "align">) => import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated Use `<Cell align="right" />` instead
+ */
+export declare const EndAlignedCell: (props: Except<CellProps, "align">) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionCell: ({ style, ...props }: CellProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated Use <ActionCell /> instead
+ */
 export declare const CellAction: ({ children }: {
     children: ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;

package/src/components/Cells.js

@@ -3,8 +3,9 @@ import { useCallback, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { match } from "ts-pattern";
 import { visuallyHiddenStyle } from "../constants/commonStyles";
-import { colors, spacings } from "../constants/design";
+import { colors, invariantColors, negativeSpacings, spacings, } from "../constants/design";
 import { setClipboardText } from "../utils/clipboard";
+import { identity } from "../utils/function";
 import { isNotNullish, isNullish } from "../utils/nullish";
 import { Box } from "./Box";
 import { Icon } from "./Icon";
@@ -12,113 +13,116 @@ import { LakeText } from "./LakeText";
 import { LakeTooltip } from "./LakeTooltip";
 import { Pressable } from "./Pressable";
 import { Space } from "./Space";
+/* eslint-disable react-native/no-unused-styles */
+const directionStyles = StyleSheet.create({
+    column: { flexDirection: "column" },
+    row: { flexDirection: "row" },
+});
+const alignItemsStyles = StyleSheet.create({
+    left: { alignItems: "flex-start" },
+    center: { alignItems: "center" },
+    right: { alignItems: "flex-end" },
+});
+const justifyContentStyles = StyleSheet.create({
+    left: { justifyContent: "flex-start" },
+    center: { justifyContent: "center" },
+    right: { justifyContent: "flex-end" },
+});
+/* eslint-enable react-native/no-unused-styles */
+const fadeOnLeftMask = `linear-gradient(to right, ${invariantColors.transparent}, ${invariantColors.black} ${spacings[16]})`;
+const fadeOnRightMask = `linear-gradient(to left, ${invariantColors.transparent}, ${invariantColors.black} ${spacings[16]})`;
 const styles = StyleSheet.create({
-    cellContainer: {
-        display: "flex",
-        flexGrow: 1,
-        flexDirection: "row",
-        alignItems: "center",
-    },
-    balanceCellContainer: {
-        width: "100%",
-    },
     cell: {
-        display: "flex",
-        paddingHorizontal: spacings[16],
-        flexGrow: 1,
-        flexDirection: "row",
-        alignItems: "center",
-    },
-    disabledCellHeader: {
-        cursor: "text",
-    },
-    icon: {
-        alignSelf: "stretch",
-        alignItems: "center",
-        justifyContent: "center",
-        paddingHorizontal: spacings[4],
-    },
-    iconContainer: {
         flexDirection: "row",
-        alignSelf: "stretch",
-        alignItems: "stretch",
-        justifyContent: "center",
-    },
-    centeredCell: {
-        justifyContent: "center",
-    },
-    endAlignedCell: {
-        justifyContent: "flex-end",
-    },
-    regularText: {
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        width: 1,
         flexGrow: 1,
-        whiteSpace: "nowrap",
+        flexShrink: 1,
+        paddingHorizontal: spacings[16],
     },
-    mediumText: {
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        width: 1,
+    cellContentContainer: {
         flexGrow: 1,
-        whiteSpace: "nowrap",
-        flexDirection: "row",
-        alignItems: "center",
+        flexShrink: 1,
+        overflow: "hidden",
     },
-    colorPatch: {
-        flexGrow: 1,
+    fadeOnLeft: {
+        maskImage: fadeOnLeftMask,
+        WebkitMaskImage: fadeOnLeftMask,
+    },
+    fadeOnRight: {
+        maskImage: fadeOnRightMask,
+        WebkitMaskImage: fadeOnRightMask,
+    },
+    noCursor: {
+        cursor: "text",
     },
-    alternativeText: visuallyHiddenStyle,
     sortIcon: {
         transitionProperty: "transform",
         transitionDuration: "300ms",
         transitionTimingFunction: "ease-in-out",
     },
-    sortIconReversed: {
+    rotated: {
         transform: "rotate(-180deg)",
     },
-    cellAction: {
-        paddingVertical: spacings[16],
-        paddingHorizontal: spacings[8],
-    },
-    underline: {
-        boxShadow: "inset 0 -2px currentColor",
-    },
-    sortHorizontalBar: {
+    headerUnderline: {
+        backgroundColor: colors.gray[900],
+        borderBottomColor: colors.current[500],
+        bottom: -10,
+        height: 2,
         position: "absolute",
         width: "100%",
-        height: 2,
-        bottom: -10,
+    },
+    headerUnderlineActive: {
         backgroundColor: colors.current[500],
-        borderBottomColor: colors.current[500],
+    },
+    buttonUnderline: {
+        boxShadow: "inset 0 -2px currentColor",
+    },
+    copyButton: {
+        justifyContent: "center",
+        alignSelf: "stretch",
+        marginHorizontal: negativeSpacings[8],
+    },
+    copyButtonTooltip: {
+        justifyContent: "center",
+        height: "100%",
+        paddingHorizontal: spacings[8],
+    },
+    linkButton: {
+        justifyContent: "center",
+        alignSelf: "stretch",
+        marginHorizontal: negativeSpacings[8],
+        paddingHorizontal: spacings[8],
+    },
+    actionCell: {
+        paddingVertical: spacings[16],
+        paddingHorizontal: spacings[8],
     },
 });
-export const SimpleHeaderCell = ({ text, sort, justifyContent = "flex-start", onPress, }) => {
+export const Cell = ({ children, align = "left", direction = "row", fadeOn, style, contentContainerStyle, }) => (_jsx(View, { style: [styles.cell, style], children: _jsx(View, { style: [
+            styles.cellContentContainer,
+            directionStyles[direction],
+            alignItemsStyles[direction === "row" ? "center" : align],
+            justifyContentStyles[direction === "row" ? align : "center"],
+            fadeOn === "left" && styles.fadeOnLeft,
+            fadeOn === "right" && styles.fadeOnRight,
+            contentContainerStyle,
+        ], children: children }) }));
+export const HeaderCell = ({ align = "left", sort, text, onPress }) => {
     const sortActive = isNotNullish(sort) && isNotNullish(onPress);
     const disabled = isNullish(onPress);
-    return (_jsx(Pressable, { onPress: () => {
+    return (_jsx(Pressable, { role: "columnheader", disabled: disabled, style: [styles.cell, disabled && styles.noCursor], onPress: () => {
             onPress === null || onPress === void 0 ? void 0 : onPress(match(sort)
                 .returnType()
                 .with("Desc", () => "Asc")
-                .with("Asc", () => "Desc")
                 .otherwise(() => "Desc"));
-        }, disabled: disabled, style: [styles.cellContainer, disabled && styles.disabledCellHeader], role: "columnheader", children: ({ hovered }) => (_jsx(View, { style: [styles.cell, { justifyContent }], children: _jsxs(View, { children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(LakeText, { numberOfLines: 1, variant: "medium", color: sortActive ? colors.current[500] : colors.gray[900], style: {
-                                    textAlign: match(justifyContent)
-                                        .with("flex-start", () => "left")
-                                        .with("center", () => "center")
-                                        .with("flex-end", () => "right")
-                                        .exhaustive(),
-                                }, children: text }), isNotNullish(onPress) ? (_jsxs(_Fragment, { children: [_jsx(Space, { width: 8 }), _jsx(Box, { style: [styles.sortIcon, sort === "Asc" && styles.sortIconReversed], children: _jsx(Icon, { size: 15, color: sortActive ? colors.current[500] : colors.gray[500], name: sortActive ? "arrow-down-filled" : "chevron-up-down-regular" }) })] })) : null] }), sortActive ? (_jsx(View, { style: styles.sortHorizontalBar })) : hovered ? (_jsx(View, { style: [styles.sortHorizontalBar, { backgroundColor: colors.gray[900] }] })) : null] }) })) }));
-};
-export const ColorPatchCell = ({ isHovered, alternativeText, color, }) => {
-    return isHovered ? (_jsx(View, { style: [styles.colorPatch, { backgroundColor: colors[color].primary }], children: isNotNullish(alternativeText) ? (_jsx(LakeText, { style: styles.alternativeText, children: alternativeText })) : null })) : null;
-};
-export const SimpleTitleCell = ({ isHighlighted = false, text, tooltip, }) => (_jsx(View, { style: styles.cell, children: _jsx(LakeText, { numberOfLines: 1, color: isHighlighted ? colors.current.primary : colors.gray[900], style: styles.regularText, variant: "medium", tooltip: tooltip, children: text }) }));
-export const SimpleRegularTextCell = ({ variant = "regular", text, textAlign = "left", color = colors.gray[900], }) => {
-    return (_jsx(View, { style: styles.cell, children: _jsx(LakeText, { align: textAlign, color: color, style: styles.regularText, variant: variant, children: text }) }));
+        }, children: ({ hovered }) => (_jsxs(View, { style: [
+                styles.cellContentContainer,
+                directionStyles["row"],
+                alignItemsStyles["center"],
+                justifyContentStyles[align],
+            ], children: [_jsx(LakeText, { numberOfLines: 1, align: align, color: sortActive ? colors.current[500] : colors.gray[900], variant: "medium", children: text }), isNotNullish(onPress) && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 8 }), _jsx(Icon, { size: 15, color: sortActive ? colors.current[500] : colors.gray[500], name: sortActive ? "arrow-down-filled" : "chevron-up-down-regular", style: [styles.sortIcon, sort === "Asc" && styles.rotated] })] })), (hovered || sortActive) && (_jsx(View, { style: [styles.headerUnderline, sortActive && styles.headerUnderlineActive] }))] })) }));
 };
-export const CopyableRegularTextCell = ({ variant = "regular", text, textToCopy, copyWording, copiedWording, tooltip, }) => {
+export const TextCell = ({ align = "left", color = colors.gray[900], text, tooltip, variant = "regular", }) => (_jsx(Cell, { align: align, children: _jsx(LakeText, { numberOfLines: 1, align: align, color: color, tooltip: tooltip, variant: variant, children: text }) }));
+export const CopyableTextCell = ({ copiedWording, copyWording, text, textToCopy, tooltip, variant = "regular", }) => {
     const [visibleState, setVisibleState] = useState("copy");
     const clipboardText = textToCopy !== null && textToCopy !== void 0 ? textToCopy : text;
     const onPress = useCallback((event) => {
@@ -126,39 +130,68 @@ export const CopyableRegularTextCell = ({ variant = "regular", text, textToCopy,
         setClipboardText(clipboardText);
         setVisibleState("copied");
     }, [clipboardText]);
-    return (_jsxs(View, { style: styles.cell, children: [_jsx(LakeTooltip, { placement: "right", onHide: () => setVisibleState("copy"), togglableOnFocus: true, content: visibleState === "copy" ? copyWording : copiedWording, containerStyle: styles.iconContainer, children: _jsx(Pressable, { role: "button", "aria-label": copyWording, onPress: onPress, style: ({ hovered }) => [styles.icon, hovered && styles.underline], children: ({ hovered }) => (_jsx(Icon, { name: hovered ? "copy-filled" : "copy-regular", color: "currentColor", size: 14 })) }) }), _jsx(Space, { width: 4 }), _jsx(LakeText, { tooltip: tooltip, color: colors.gray[900], style: styles.regularText, variant: variant, children: text })] }));
+    return (_jsxs(Cell, { children: [_jsx(Pressable, { "aria-label": copyWording, role: "button", onPress: onPress, style: ({ hovered }) => [styles.copyButton, hovered && styles.buttonUnderline], children: ({ hovered }) => (_jsx(LakeTooltip, { content: visibleState === "copy" ? copyWording : copiedWording, onHide: () => setVisibleState("copy"), placement: "center", togglableOnFocus: true, containerStyle: styles.copyButtonTooltip, children: _jsx(Icon, { name: hovered ? "copy-filled" : "copy-regular", color: "currentColor", size: 14 }) })) }), _jsx(Space, { width: 8 }), _jsx(LakeText, { numberOfLines: 1, color: colors.gray[900], tooltip: tooltip, variant: variant, children: text })] }));
 };
 // TODO: handle `+` sign properly
-export const BalanceCell = ({ value, currency, originalValue, formatCurrency, textAlign = "right", variant = "medium", }) => {
-    return (_jsxs(View, { style: styles.balanceCellContainer, children: [_jsx(View, { style: styles.cell, children: _jsxs(LakeText, { align: textAlign, color: colors.gray[900], variant: variant, style: [
-                        styles.mediumText,
-                        {
-                            justifyContent: match(textAlign)
-                                .with("left", () => "flex-start")
-                                .with("center", () => "center")
-                                .with("right", () => "flex-end")
-                                .exhaustive(),
-                        },
-                        value > 0 && { color: colors.positive.primary },
-                        value < 0 && { color: colors.negative.primary },
-                    ], children: [value > 0 && "+", formatCurrency(value, currency)] }) }), isNotNullish(originalValue) && originalValue.currency !== currency && (_jsx(View, { style: styles.cell, children: _jsxs(LakeText, { style: styles.mediumText, align: textAlign, color: colors.gray[500], variant: "smallRegular", children: [originalValue.value > 0 && "+", formatCurrency(originalValue.value, originalValue.currency)] }) }))] }));
-};
-export const LinkCell = ({ children, external = false, onPress, variant = "medium", tooltip, buttonPosition = "start", }) => {
-    const ArrowButton = () => (_jsx(Pressable, { style: ({ hovered }) => [styles.icon, hovered && styles.underline], onPress: event => {
-            event.preventDefault();
-            onPress();
-        }, children: _jsx(Icon, { size: 14, name: external ? "open-regular" : "arrow-right-filled" }) }));
-    return (_jsxs(View, { style: styles.cell, children: [buttonPosition === "start" && (_jsxs(_Fragment, { children: [_jsx(ArrowButton, {}), _jsx(Space, { width: 8 })] })), _jsx(LakeText, { color: colors.gray[900], variant: variant, style: styles.mediumText, tooltip: tooltip, children: children }), buttonPosition === "end" && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 8 }), _jsx(ArrowButton, {})] }))] }));
-};
-export const StartAlignedCell = ({ children }) => {
-    return _jsx(View, { style: styles.cell, children: children });
-};
-export const CenteredCell = ({ children }) => {
-    return _jsx(View, { style: [styles.cell, styles.centeredCell], children: children });
-};
-export const EndAlignedCell = ({ children }) => {
-    return _jsx(View, { style: [styles.cell, styles.endAlignedCell], children: children });
+export const BalanceCell = ({ textAlign = "right", align = textAlign, currency, formatCurrency, originalValue, value, variant = "medium", }) => (_jsxs(Cell, { align: align, direction: "column", children: [_jsx(LakeText, { numberOfLines: 1, align: align, color: colors.gray[900], variant: variant, style: [
+                value > 0 && { color: colors.positive.primary },
+                value < 0 && { color: colors.negative.primary },
+            ], children: (value > 0 ? "+" : "") + formatCurrency(value, currency) }), isNotNullish(originalValue) && originalValue.currency !== currency && (_jsx(LakeText, { numberOfLines: 1, align: align, color: colors.gray[500], variant: "smallRegular", children: (originalValue.value > 0 ? "+" : "") +
+                formatCurrency(originalValue.value, originalValue.currency) }))] }));
+export const LinkCell = ({ buttonPosition = "start", children, external = false, fadeOn, onPress, tooltip, variant = "medium", }) => {
+    const elements = [
+        _jsx(Pressable, { style: ({ hovered }) => [styles.linkButton, hovered && styles.buttonUnderline], onPress: event => {
+                event.preventDefault();
+                onPress();
+            }, children: _jsx(Icon, { size: 14, name: external ? "open-regular" : "arrow-right-filled" }) }),
+        _jsx(Space, { width: 8 }),
+        _jsx(LakeText, { numberOfLines: 1, color: colors.gray[900], variant: variant, tooltip: tooltip, children: children }),
+    ];
+    if (buttonPosition === "end") {
+        elements.reverse();
+    }
+    return _jsx(Cell, { fadeOn: fadeOn, children: elements });
 };
-export const CellAction = ({ children }) => {
-    return _jsx(View, { style: styles.cellAction, children: children });
+/**
+ * @deprecated Avoid usage
+ */
+export const ColorPatchCell = ({ alternativeText, color, isHovered, }) => {
+    return isHovered ? (_jsx(Box, { grow: 1, style: { backgroundColor: colors[color].primary }, children: isNotNullish(alternativeText) ? (_jsx(LakeText, { style: visuallyHiddenStyle, children: alternativeText })) : null })) : null;
 };
+/**
+ * @deprecated Use `HeaderCell` instead
+ */
+export const SimpleHeaderCell = ({ justifyContent = "flex-start", ...props }) => (_jsx(HeaderCell, { ...props, align: match(justifyContent)
+        .returnType()
+        .with("flex-start", () => "left")
+        .with("flex-end", () => "right")
+        .otherwise(identity) }));
+/**
+ * @deprecated Use `TextCell` with color={…} and variant="medium" instead
+ */
+export const SimpleTitleCell = ({ isHighlighted = false, text, tooltip, }) => (_jsx(TextCell, { color: isHighlighted ? colors.current.primary : colors.gray[900], text: text, tooltip: tooltip, variant: "medium" }));
+/**
+ * @deprecated Use `TextCell` instead
+ */
+export const SimpleRegularTextCell = ({ color = colors.gray[900], text, textAlign = "left", variant = "regular", }) => _jsx(TextCell, { align: textAlign, color: color, text: text, variant: variant });
+/**
+ * @deprecated Use `CopyableTextCell` instead
+ */
+export const CopyableRegularTextCell = CopyableTextCell;
+/**
+ * @deprecated Use `<Cell align="left" />` instead
+ */
+export const StartAlignedCell = (props) => (_jsx(Cell, { align: "left", ...props }));
+/**
+ * @deprecated Use `<Cell align="center" />` instead
+ */
+export const CenteredCell = (props) => (_jsx(Cell, { align: "center", ...props }));
+/**
+ * @deprecated Use `<Cell align="right" />` instead
+ */
+export const EndAlignedCell = (props) => (_jsx(Cell, { align: "right", ...props }));
+export const ActionCell = ({ style, ...props }) => (_jsx(Cell, { ...props, style: [styles.actionCell, style] }));
+/**
+ * @deprecated Use <ActionCell /> instead
+ */
+export const CellAction = ({ children }) => (_jsx(ActionCell, { children: children }));

package/src/components/LakeButton.js

@@ -22,6 +22,8 @@ const styles = StyleSheet.create({
         minWidth: 90,
         justifyContent: "center",
         paddingHorizontal: 20,
+    },
+    transition: {
         transitionDuration: "150ms",
         transitionProperty: "background-color, color",
     },
@@ -163,6 +165,8 @@ export const LakeButton = memo(forwardRef(({ ariaControls, ariaExpanded, ariaLab
     const shouldHideContents = loading || progressAnimation.isSome();
     return (_jsx(Pressable, { href: href, hrefAttrs: hrefAttrs, role: href != null ? "link" : "button", "aria-busy": loading, "aria-disabled": disabled, "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, disabled: loading || disabled || progressAnimation.isSome(), ref: forwardedRef, onPress: onPress, style: ({ hovered, pressed, focused }) => [
             styles.base,
+            (hovered || pressed) && styles.transition,
+            grow && styles.grow,
             isSmall && styles.small,
             vertical && [styles.vertical, isSmall && styles.verticalSmall],
             hasIconStart && isSmall ? styles.withIconStartSmall : styles.withIconStart,
@@ -170,7 +174,6 @@ export const LakeButton = memo(forwardRef(({ ariaControls, ariaExpanded, ariaLab
             hasOnlyIcon && (isSmall ? styles.iconSmallOnly : styles.iconOnly),
             (disabled || progressAnimation.isSome()) && commonStyles.disabled,
             disabled && forceBackground && styles.resetOpacity,
-            grow && styles.grow,
             match(mode)
                 .with("primary", () => ({
                 backgroundColor: color === "warning"

package/src/components/LakeCheckbox.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { StyleSheet, View } from "react-native";
-import { colors } from "../constants/design";
+import { colors, radii } from "../constants/design";
 import { LakeText } from "./LakeText";
 import { Pressable } from "./Pressable";
 import { Space } from "./Space";
@@ -29,6 +29,12 @@ const styles = StyleSheet.create({
     disabled: {
         opacity: 0.5,
     },
+    errorPill: {
+        width: 5,
+        height: 5,
+        backgroundColor: colors.negative[500],
+        borderRadius: radii[6],
+    },
 });
 export const LakeCheckbox = ({ value, color = "current", disabled = false, isError = false, }) => {
     const isFirstRender = useRef(true);
@@ -50,5 +56,5 @@ export const LakeCheckbox = ({ value, color = "current", disabled = false, isErr
         ], children: [value === true && (_jsx(Svg, { viewBox: "0 0 16 16", children: _jsx(Path, { d: "m3.5 7.5 2.8 3.4 5.6-6.7", stroke: colors[color].contrast, strokeWidth: 1.5, fill: "none", strokeLinecap: "round", strokeLinejoin: "round", strokeDasharray: "20", strokeDashoffset: shouldAnimate ? "20" : "0", children: shouldAnimate && (_jsx(Animate, { attributeName: "stroke-dashoffset", values: "20;0", dur: "150ms", begin: "150ms", fill: "freeze" })) }) })), value === "mixed" && (_jsx(View, { style: [styles.mixed, { backgroundColor: colors[color].contrast }] }))] }));
 };
 export const LakeLabelledCheckbox = ({ value, color, label, onValueChange, disabled = false, isError = false, }) => {
-    return (_jsxs(Pressable, { role: "checkbox", "aria-checked": value, style: styles.labelled, onPress: () => onValueChange(value === true ? false : true), disabled: disabled, children: [_jsx(LakeCheckbox, { value: value, color: color, disabled: disabled, isError: isError }), _jsx(Space, { width: 8 }), _jsx(LakeText, { color: colors.gray[900], userSelect: "none", children: label })] }));
+    return (_jsxs(Pressable, { role: "checkbox", "aria-checked": value, style: styles.labelled, onPress: () => onValueChange(value === true ? false : true), disabled: disabled, children: [_jsx(LakeCheckbox, { value: value, color: color, disabled: disabled, isError: isError }), _jsx(Space, { width: 8 }), _jsx(LakeText, { color: colors.gray[900], userSelect: "none", children: label }), isError ? (_jsxs(_Fragment, { children: [_jsx(Space, { width: 8 }), _jsx(View, { style: styles.errorPill })] })) : null] }));
 };

package/src/components/PlainListView.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement, ReactNode } from "react";
 import { PressableStateCallbackType, ViewStyle } from "react-native";
 import { ColumnCellConfig, ColumnTitleConfig, LinkConfig } from "./VirtualizedList";
+export type { LinkConfig } from "./VirtualizedList";
 export type ColumnConfig<T, ExtraInfo> = {
     id: string;
     width: number | "grow";
@@ -46,4 +47,3 @@ export declare const PlainListViewPlaceholder: ({ count, rowHeight, groupHeaderH
     headerHeight?: number;
     marginHorizontal?: string;
 }) => import("react/jsx-runtime").JSX.Element;
-export {};

package/src/components/VirtualizedList.d.ts

@@ -7,9 +7,12 @@ export type ColumnTitleConfig<ExtraInfo> = {
 export type ColumnCellConfig<T, ExtraInfo> = {
     columnId: string;
     item: T;
+    /**
+     * isHovered is only set for PlainListView
+     */
+    isHovered: boolean;
     index: number;
     extraInfo: ExtraInfo;
-    isHovered: boolean;
 };
 export type ColumnConfig<T, ExtraInfo> = {
     id: string;

package/src/components/VirtualizedList.js

@@ -69,14 +69,12 @@ const styles = StyleSheet.create({
         transitionTimingFunction: "ease-in-out",
     },
     headerCell: {
-        display: "flex",
         flexDirection: "row",
         flexGrow: 1,
         alignItems: "center",
         boxShadow: `0 -1px ${colors.gray[100]}`,
     },
     cell: {
-        display: "flex",
         flexDirection: "row",
         flexGrow: 1,
         alignItems: "stretch",