@swan-io/lake 13.7.3 → 13.7.5

package/package.json

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

package/src/components/LakeButton.d.ts

@@ -23,6 +23,7 @@ export type ButtonProps = {
     hrefAttrs?: HrefAttrs;
     pill?: boolean;
     disabledUntil?: string;
+    [key: `data-${string}`]: string | undefined;
 } & ({
     ariaLabel: string;
     children?: never;
@@ -30,7 +31,7 @@ export type ButtonProps = {
     ariaLabel?: string;
     children: ReactNode;
 });
-export declare const LakeButton: import("react").MemoExoticComponent<({ ref, ariaControls, ariaExpanded, ariaLabel, children, color, direction, disabled, icon, grow, iconPosition, loading, mode, onPress, size, iconSize, style, forceBackground, href, hrefAttrs, pill, disabledUntil, }: ButtonProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const LakeButton: import("react").MemoExoticComponent<({ ref, ariaControls, ariaExpanded, ariaLabel, children, color, direction, disabled, icon, grow, iconPosition, loading, mode, onPress, size, iconSize, style, forceBackground, href, hrefAttrs, pill, disabledUntil, ...dataAttributes }: ButtonProps) => import("react/jsx-runtime").JSX.Element>;
 type GroupProps = {
     children: ReactNode;
     justifyContent?: ViewStyle["justifyContent"];

package/src/components/LakeButton.js

@@ -123,7 +123,7 @@ const styles = StyleSheet.create({
         visibility: "hidden",
     },
 });
-export const LakeButton = memo(({ ref, 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, disabledUntil, }) => {
+export const LakeButton = memo(({ ref, 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, disabledUntil, ...dataAttributes }) => {
     const [progressAnimation, setProgressAnimation] = useState(() => Option.None());
     const isPrimary = mode === "primary";
     const isSmall = size === "small";
@@ -163,7 +163,7 @@ export const LakeButton = memo(({ ref, ariaControls, ariaExpanded, ariaLabel, ch
         return () => cancelAnimationFrame(animationFrameId);
     }, [disabledUntil]);
     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: ref, onPress: onPress, style: ({ hovered, pressed, focused }) => [
+    return (_jsx(Pressable, { ...dataAttributes, 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: ref, onPress: onPress, style: ({ hovered, pressed, focused }) => [
             styles.base,
             (hovered || pressed) && styles.transition,
             grow && styles.grow,

package/src/components/LakeStepper.d.ts

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

package/src/components/LakeStepper.js

@@ -62,6 +62,20 @@ const styles = StyleSheet.create({
         backgroundColor: colors.negative[50],
     },
 });
+const stylesMobile = StyleSheet.create({
+    progress: {
+        borderRadius: 10,
+        marginTop: 10,
+        height: 3,
+        backgroundColor: colors.gray[100],
+    },
+    progressBar: {
+        borderRadius: 10,
+        height: "100%",
+        backgroundColor: colors.current[500],
+        transitionDuration: "300ms",
+    },
+});
 const StepLink = ({ to, disabled, style, children }) => {
     return disabled ? (_jsx("span", { style: style, children: children })) : (_jsx(Link, { to: to, style: style, children: children }));
 };
@@ -113,6 +127,7 @@ export const LakeStepper = ({ steps, activeStepId, style }) => {
                         }) })] }, currentId));
         }) }));
 };
+/** @deprecated Use <MobileStepper> instead */
 export const MobileStepTitle = ({ steps, activeStepId }) => {
     const currentStep = Option.fromNullable(steps
         .flatMap((step, index) => match(step)
@@ -132,3 +147,26 @@ export const MobileStepTitle = ({ steps, activeStepId }) => {
         None: () => null,
     });
 };
+export const MobileStepper = ({ steps, activeStepId }) => {
+    const total = steps.length;
+    const currentStep = Option.fromNullable(steps
+        .flatMap((step, index) => match(step)
+        .with({ id: P.string }, step => ({ ...step, number: `${index + 1}` }))
+        .with({ children: P.array(P.any) }, ({ children }) => children.map((child, subIndex) => ({
+        ...child,
+        number: `${index + 1}.${subIndex + 1}`,
+    })))
+        .exhaustive())
+        .find(({ id }) => id === activeStepId)).map(({ label, hasErrors, number }) => ({
+        number,
+        label,
+        isErrorState: hasErrors === true,
+    }));
+    return currentStep.match({
+        Some: ({ number, label, isErrorState }) => {
+            const progress = `${(Number.parseFloat(number) / total) * 100}%`;
+            return (_jsxs(View, { children: [_jsx(LakeText, { variant: "smallMedium", color: isErrorState ? colors.negative[500] : colors.current[500], children: label }), _jsxs(LakeText, { variant: "smallRegular", color: colors.gray[300], children: [number, " of ", total] }), _jsx(View, { style: stylesMobile.progress, children: _jsx(View, { style: [stylesMobile.progressBar, { width: progress }] }) })] }));
+        },
+        None: () => null,
+    });
+};

package/src/components/Pressable.d.ts

@@ -1,5 +1,5 @@
 import { FC, ReactNode, Ref } from "react";
-import { HrefAttrs, NativeSyntheticEvent, PressableProps, PressableStateCallbackType, Text, TextInputProps, TextProps, View, ViewProps } from "react-native";
+import { HrefAttrs, NativeSyntheticEvent, PressableStateCallbackType, Text, TextInputProps, TextProps, View, ViewProps } from "react-native";
 import { Except, Merge } from "type-fest";
 import { PressResponderConfig } from "../hooks/usePressEvents";
 type Props<BaseProps extends TextProps | TextInputProps> = Merge<BaseProps, {
@@ -22,6 +22,7 @@ type Props<BaseProps extends TextProps | TextInputProps> = Merge<BaseProps, {
     onPressMove?: PressResponderConfig["onPressMove"];
     onPressOut?: PressResponderConfig["onPressEnd"];
     style?: BaseProps["style"] | ((state: PressableStateCallbackType) => BaseProps["style"]);
+    [key: `data-${string}`]: string | undefined;
     /**
      * Used only for documentation or testing (e.g. snapshot testing).
      */
@@ -32,12 +33,12 @@ type ExtraProps = {
     href?: string;
     hrefAttrs?: HrefAttrs;
 };
-export type PressableViewProps = Except<Props<ViewProps>, "children">;
+export type PressableViewProps = Props<ViewProps>;
 export type PressableTextProps = Props<TextProps>;
-export declare const Pressable: FC<PressableProps & ExtraProps & {
+export declare const Pressable: FC<Except<PressableViewProps, "ref"> & ExtraProps & {
     ref?: Ref<View>;
 }>;
-export declare const PressableText: FC<PressableTextProps & {
+export declare const PressableText: FC<Except<PressableTextProps, "ref"> & {
     ref?: Ref<Text>;
 }>;
 export {};

package/src/components/Pressable.js

@@ -22,6 +22,10 @@ Component, config = {}) => {
     const { applyPressStyle = true } = config;
     return (props) => {
         const { ref, children, delayLongPress, delayPressIn, delayPressOut, disabled = false, onBlur, onContextMenu, onFocus, onHoverIn, onHoverOut, onKeyDown, onLongPress, onPress, onPressIn, onPressMove, onPressOut, style, tabIndex, testOnly_hovered, testOnly_pressed, ...rest } = props;
+        const dataSet = Object.fromEntries(Object.entries(props)
+            .filter(([key]) => key.startsWith("data-"))
+            // remove the "data-" prefix from the keys to match React Native's dataSet prop format
+            .map(([key, value]) => [key.slice(5), value]));
         const [hovered, setHovered] = useForceableState(testOnly_hovered === true);
         const [focused, setFocused] = useForceableState(false);
         const [pressed, setPressed] = useForceableState(testOnly_pressed === true);
@@ -91,7 +95,7 @@ Component, config = {}) => {
         else {
             _tabIndex = disabled ? -1 : 0;
         }
-        return (_jsx(Component, { ...rest, ...pressEventHandlers, "aria-disabled": disabled, onBlur: blurHandler, onContextmenu: contextMenuHandler, onFocus: focusHandler, onKeyDown: keyDownHandler, ref: setRef, style: [
+        return (_jsx(Component, { ...rest, ...pressEventHandlers, dataSet: dataSet, "aria-disabled": disabled, onBlur: blurHandler, onContextmenu: contextMenuHandler, onFocus: focusHandler, onKeyDown: keyDownHandler, ref: setRef, style: [
                 match({ disabled, applyPressStyle })
                     .with({ disabled: false, applyPressStyle: true }, () => styles.active)
                     .with({ disabled: true }, () => styles.disabled)

package/src/components/Stepper.d.ts

@@ -1,8 +0,0 @@
-type Props = {
-    steps: {
-        label: string;
-    }[];
-    activeStep: number;
-};
-export declare const Stepper: ({ steps, activeStep }: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/src/components/Stepper.js

@@ -1,67 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
-import { StyleSheet, View } from "react-native";
-import { colors, spacings } from "../constants/design";
-import { Box } from "./Box";
-import { Icon } from "./Icon";
-import { LakeHeading } from "./LakeHeading";
-import { LakeText } from "./LakeText";
-const styles = StyleSheet.create({
-    container: {
-        paddingBottom: spacings[24],
-    },
-    circle: {
-        width: spacings[32],
-        height: spacings[32],
-        borderColor: colors.gray[100],
-        borderWidth: 1,
-        borderRadius: 16,
-        color: colors.gray[400],
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    activeCircle: {
-        width: spacings[32],
-        height: spacings[32],
-        borderColor: colors.current[500],
-        backgroundColor: colors.current[500],
-        borderWidth: 1,
-        borderRadius: 16,
-        color: colors.current.contrast,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-    counter: {
-        lineHeight: 0.8,
-    },
-    item: {
-        paddingHorizontal: spacings[12],
-    },
-    textContainer: {
-        position: "absolute",
-        top: "100%",
-        left: "50%",
-        transform: "translateX(-50%) translateY(5px)",
-    },
-    text: {
-        whiteSpace: "nowrap",
-    },
-    separator: {
-        height: spacings[4],
-        borderRadius: 2,
-        backgroundColor: colors.gray[100],
-        flexGrow: 1,
-    },
-    doneSeparator: {
-        backgroundColor: colors.current[500],
-    },
-});
-export const Stepper = ({ steps, activeStep }) => {
-    return (_jsx(Box, { direction: "row", alignItems: "center", style: styles.container, children: steps.map((item, index) => {
-            const isActive = index === activeStep;
-            const isDone = index < activeStep;
-            const color = isActive || isDone ? colors.current.contrast : colors.gray[300];
-            const textColor = isActive || isDone ? colors.current[500] : colors.gray[300];
-            return (_jsxs(Fragment, { children: [index > 0 ? (_jsx(View, { style: [styles.separator, (isActive || isDone) && styles.doneSeparator] })) : null, _jsxs(View, { style: styles.item, children: [_jsx(View, { style: isActive || isDone ? styles.activeCircle : styles.circle, children: isDone ? (_jsx(Icon, { size: 20, name: "checkmark-filled", color: color })) : (_jsx(LakeHeading, { level: 3, variant: "h3", color: color, style: styles.counter, children: String(index + 1) })) }), _jsx(View, { style: styles.textContainer, children: _jsx(LakeText, { style: styles.text, color: textColor, variant: isDone || isActive ? "semibold" : "regular", children: item.label }) })] })] }, index));
-        }) }));
-};