@swan-io/lake 8.7.2 → 8.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "8.7.2",
+  "version": "8.8.0",
   "engines": {
     "node": ">=20.9.0",
     "yarn": "^1.22.0"

package/src/components/FixedListView.d.ts

@@ -35,6 +35,7 @@
  */
 import { ReactElement, ReactNode } from "react";
 import { IconName } from "./Icon";
+import { SpacingValue } from "./Space";
 export type ColumnTitleConfig<ExtraInfo> = {
     title: string;
     extraInfo: ExtraInfo;
@@ -99,9 +100,10 @@ export declare const PlainListViewPlaceholder: ({ count, rowHeight, rowVerticalS
 type EmptyProps = {
     icon: IconName;
     borderedIcon?: boolean;
+    borderedIconPadding?: SpacingValue | 0;
     title?: string;
     subtitle?: ReactNode;
     children?: ReactNode;
 };
-export declare const FixedListViewEmpty: ({ icon, borderedIcon, title, subtitle, children, }: EmptyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FixedListViewEmpty: ({ icon, borderedIcon, borderedIconPadding, title, subtitle, children, }: EmptyProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/FixedListView.js

@@ -1,4 +1,4 @@
-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";
 /**
  * ## FixedListView
  *
@@ -828,4 +828,4 @@ export const PlainListViewPlaceholder = ({ count, rowHeight, rowVerticalSpacing,
                                 ], children: [_jsx(View, { style: styles.placeholderRow }), _jsx(Space, { width: 32 }), _jsx(View, { style: [styles.placeholderRow, styles.smallPlaceholderRow] }), _jsx(Space, { width: 32 }), _jsx(View, { style: styles.placeholderRowEnd, children: _jsx(View, { style: [styles.placeholderRow, styles.smallPlaceholderRow] }) })] }, String(index))] }, String(index)));
                 }) })] }));
 };
-export const FixedListViewEmpty = ({ icon, borderedIcon = false, title, subtitle, children, }) => (_jsxs(View, { style: styles.emptyList, children: [borderedIcon ? (_jsx(BorderedIcon, { name: icon })) : (_jsx(Icon, { name: icon, size: 96, color: colors.current.primary })), _jsx(Space, { height: 32 }), isNotNullish(title) && (_jsx(LakeHeading, { level: 3, variant: "h3", color: colors.gray[700], align: "center", children: title })), _jsx(Space, { height: 8 }), isNotNullish(subtitle) && _jsx(LakeText, { align: "center", children: subtitle }), _jsx(Space, { height: 8 }), children] }));
+export const FixedListViewEmpty = ({ icon, borderedIcon = false, borderedIconPadding, title, subtitle, children, }) => (_jsxs(View, { style: styles.emptyList, children: [borderedIcon ? (_jsx(BorderedIcon, { name: icon, padding: borderedIconPadding })) : (_jsx(Icon, { name: icon, size: 96, color: colors.current.primary })), _jsx(Space, { height: 24 }), isNotNullish(title) && (_jsxs(_Fragment, { children: [_jsx(LakeHeading, { align: "center", level: 3, variant: "h5", children: title }), _jsx(Space, { height: 8 })] })), isNotNullish(subtitle) && _jsx(LakeText, { align: "center", children: subtitle }), children] }));

package/src/components/LakeButton.d.ts

@@ -7,6 +7,7 @@ export type ButtonProps = {
     ariaExpanded?: boolean;
     color?: ColorVariants;
     disabled?: boolean;
+    direction?: "column" | "row";
     loading?: boolean;
     grow?: boolean;
     icon?: IconName;
@@ -14,6 +15,7 @@ export type ButtonProps = {
     mode?: "primary" | "secondary" | "tertiary";
     onPress?: (event: GestureResponderEvent) => void;
     size?: "large" | "small";
+    iconSize?: number;
     style?: StyleProp<ViewStyle> | ((props: PressableStateCallbackType) => StyleProp<ViewStyle>);
     forceBackground?: boolean;
     href?: string;

package/src/components/LakeButton.js

@@ -5,6 +5,7 @@ import { match } from "ts-pattern";
 import { commonStyles } from "../constants/commonStyles";
 import { backgroundColor, colors, invariantColors, radii, spacings, texts, } from "../constants/design";
 import { isNotNullish, isNullish } from "../utils/nullish";
+import { Box } from "./Box";
 import { Icon } from "./Icon";
 import { LakeText } from "./LakeText";
 import { Pressable } from "./Pressable";
@@ -81,7 +82,6 @@ const styles = StyleSheet.create({
         alignItems: "center",
         justifyContent: "center",
         transform: "translateZ(0px)",
-        borderRadius: radii[6],
     },
     group: {
         flexDirection: "row",
@@ -99,16 +99,32 @@ const styles = StyleSheet.create({
         top: -3,
         right: -3,
     },
+    vertical: {
+        flexDirection: "column",
+        height: "auto",
+        paddingVertical: spacings[12],
+    },
+    verticalSmall: {
+        paddingVertical: spacings[8],
+    },
+    hidden: {
+        visibility: "hidden",
+    },
 });
-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) => {
+export const LakeButton = memo(forwardRef(({ ariaControls, ariaExpanded, ariaLabel, children, color = "gray", direction = "row", disabled = false, icon, grow = false, iconPosition = "start", loading = false, mode = "primary", onPress, size = "large", iconSize = size === "small" ? 18 : 20, style, forceBackground = false, href, hrefAttrs, pill = false, }, forwardedRef) => {
+    const isPrimary = mode === "primary";
     const isSmall = size === "small";
-    const iconSize = isSmall ? 18 : 20;
-    const hasIconStart = isNotNullish(icon) && iconPosition === "start";
-    const hasIconEnd = isNotNullish(icon) && iconPosition === "end";
-    const hasOnlyIcon = isNullish(children) && isNotNullish(icon);
+    const vertical = direction === "column";
+    const spaceHeight = vertical ? 4 : undefined;
+    const spaceWidth = vertical ? undefined : isSmall ? 8 : 12;
+    const hasIcon = isNotNullish(icon);
+    const hasIconStart = hasIcon && iconPosition === "start";
+    const hasIconEnd = hasIcon && iconPosition === "end";
+    const hasOnlyIcon = hasIcon && isNullish(children);
     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, ref: forwardedRef, onPress: onPress, style: ({ hovered, pressed, focused }) => [
             styles.base,
             isSmall && styles.small,
+            vertical && [styles.vertical, isSmall && styles.verticalSmall],
             hasIconStart && isSmall ? styles.withIconStartSmall : styles.withIconStart,
             hasIconEnd && (isSmall ? styles.withIconEndSmall : styles.withIconEnd),
             hasOnlyIcon && (isSmall ? styles.iconSmallOnly : styles.iconOnly),
@@ -150,23 +166,18 @@ export const LakeButton = memo(forwardRef(({ ariaControls, ariaExpanded, ariaLab
                 .exhaustive(),
             typeof style == "function" ? style({ hovered, pressed, focused }) : style,
         ], children: ({ pressed, hovered }) => {
-            const textColor = mode === "secondary" || mode === "tertiary"
-                ? disabled && forceBackground
+            const textColor = isPrimary
+                ? colors[color].contrast
+                : disabled && forceBackground
                     ? colors[color][300]
                     : hovered || pressed
                         ? 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 })] })), 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"
-                                    ? backgroundColor.accented
-                                    : colors[color].primary,
-                            },
-                        ], children: _jsx(ActivityIndicator, { color: mode === "secondary" || mode === "tertiary"
-                                ? colors[color].primary
-                                : colors[color].contrast, size: iconSize }) })), _jsx(View, { style: [styles.hiddenView, pressed && mode === "primary" && styles.pressed] }), pill === true ? _jsx(View, { style: styles.pill }) : null] }));
+                        : colors[color][600];
+            return (_jsxs(_Fragment, { children: [hasIconStart && (_jsxs(_Fragment, { children: [_jsx(Icon, { color: textColor, name: icon, size: iconSize, style: loading && styles.hidden }), isNotNullish(children) && _jsx(Space, { height: spaceHeight, width: spaceWidth })] })), typeof children === "string" || typeof children === "number" ? (_jsx(LakeText, { numberOfLines: 1, userSelect: "none", style: [
+                            isSmall ? styles.textSmall : styles.text,
+                            loading && styles.hidden,
+                            { color: textColor },
+                        ], children: children })) : (_jsx(Box, { alignItems: "center", justifyContent: "center", style: [vertical && styles.vertical, loading && styles.hidden], children: children })), hasIconEnd && (_jsxs(_Fragment, { children: [isNotNullish(children) && _jsx(Space, { height: spaceHeight, width: spaceWidth }), _jsx(Icon, { color: textColor, name: icon, size: iconSize, style: loading && styles.hidden })] })), loading && (_jsx(View, { style: styles.loaderContainer, children: _jsx(ActivityIndicator, { color: isPrimary ? colors[color].contrast : colors[color].primary, size: iconSize }) })), isPrimary && _jsx(View, { style: [styles.hiddenView, pressed && styles.pressed] }), pill && _jsx(View, { style: styles.pill })] }));
         } }));
 }));
 LakeButton.displayName = "Button";