@swan-io/lake 1.4.4 → 1.5.0

package/src/components/Slider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useEffect, useRef } from "react";
-import { Animated, PanResponder, StyleSheet, View } from "react-native";
+import { PanResponder, StyleSheet, View } from "react-native";
 import { match } from "ts-pattern";
 import { colors } from "../constants/colors";
 import { useAnimatedValue } from "../hooks/useAnimatedValue";
@@ -51,16 +51,32 @@ export const Slider = memo(({ value, step, minimum, maximum, disabled = false, o
     const interacting = useRef(false);
     const left = useRef(0);
     const width = useRef(0);
-    const valueAnim = useAnimatedValue(value);
-    const barAnim = valueAnim.interpolate({
-        inputRange: [minimum, maximum],
-        outputRange: ["0%", "100%"],
-        extrapolate: "clamp",
-    });
+    const animation = useAnimatedValue(value);
+    const barRef = useRef(null);
+    const buttonRef = useRef(null);
+    useEffect(() => {
+        const interpolateValue = interpolate({
+            inputRange: [minimum, maximum],
+            clamp: true,
+            outputRange: [0, 100],
+        });
+        const id = animation.addListener(({ value }) => {
+            const interpolated = interpolateValue(value);
+            if (barRef.current instanceof HTMLElement) {
+                barRef.current.style.transform = `scaleX(${interpolated})`;
+            }
+            if (buttonRef.current instanceof HTMLElement) {
+                buttonRef.current.style.left = `${interpolated}%`;
+            }
+        });
+        return () => {
+            animation.removeListener(id);
+        };
+    }, [animation, minimum, maximum]);
     // Update position on value change
     useEffect(() => {
-        !interacting.current && valueAnim.setValue(value);
-    }, [valueAnim, value]);
+        !interacting.current && animation.setValue(value);
+    }, [animation, value]);
     // Update disabled ref for pan responder
     useEffect(() => {
         disabledRef.current = disabled;
@@ -95,7 +111,7 @@ export const Slider = memo(({ value, step, minimum, maximum, disabled = false, o
                     width: width.current,
                 });
                 onValueChange(nextValue);
-                valueAnim.setValue(nextValue);
+                animation.setValue(nextValue);
             }
         },
         onPanResponderRelease: event => {
@@ -111,9 +127,9 @@ export const Slider = memo(({ value, step, minimum, maximum, disabled = false, o
                     width: width.current,
                 });
                 onValueChange(nextValue);
-                valueAnim.setValue(nextValue);
+                animation.setValue(nextValue);
             }
         },
     })).current;
-    return (_jsxs(View, { focusable: !disabled, style: [styles.container, disabled && styles.disabled], onLayout: handleLayout, onKeyDown: handleKeyDown, ...panResponder.panHandlers, children: [_jsx(View, { style: styles.bar, children: _jsx(Animated.View, { style: [styles.barFill, { transform: [{ scaleX: barAnim }] }] }) }), _jsx(Animated.View, { style: [styles.button, { left: barAnim }] })] }));
+    return (_jsxs(View, { tabIndex: disabled ? -1 : 0, style: [styles.container, disabled && styles.disabled], onLayout: handleLayout, onKeyDown: handleKeyDown, ...panResponder.panHandlers, children: [_jsx(View, { style: styles.bar, children: _jsx(View, { ref: barRef, style: styles.barFill }) }), _jsx(View, { ref: buttonRef, style: styles.button })] }));
 });

package/src/components/SmsOpeningAnimation.js

@@ -7,11 +7,11 @@ const styles = StyleSheet.create({
     circle: {
         opacity: 0,
         animationKeyframes: {
-            "0%": { opacity: 0, transform: [{ scale: 0.4 }] },
-            "30%": { opacity: 0, transform: [{ scale: 0.4 }] },
+            "0%": { opacity: 0, transform: "scale(0.4)" },
+            "30%": { opacity: 0, transform: "scale(0.4)" },
             "40%": { opacity: 1 },
-            "75%": { opacity: 0, transform: [{ scale: 1.5 }] },
-            "100%": { opacity: 0, transform: [{ scale: 1.5 }] },
+            "75%": { opacity: 0, transform: "scale(1.5)" },
+            "100%": { opacity: 0, transform: "scale(1.5)" },
         },
         animationDuration: "5000ms",
         animationTimingFunction: "ease-in-out",
@@ -19,11 +19,11 @@ const styles = StyleSheet.create({
     },
     icon: {
         animationKeyframes: {
-            "0%": { opacity: 0, transform: [{ translateY: -20 }, { scale: 1 }] },
-            "10%": { opacity: 1, transform: [{ scale: 1 }] },
-            "25%": { transform: [{ scale: 1 }] },
-            "35%": { transform: [{ translateY: 60 }, { scale: 10 }] },
-            "100%": { opacity: 1, transform: [{ translateY: 60 }, { scale: 10 }] },
+            "0%": { opacity: 0, transform: "translateY(-20px) scale(1)" },
+            "10%": { opacity: 1, transform: "scale(1)" },
+            "25%": { transform: "scale(1)" },
+            "35%": { transform: "translateY(60px) scale(10)" },
+            "100%": { opacity: 1, transform: "translateY(60px) scale(10)" },
         },
         animationDuration: "5000ms",
         animationTimingFunction: "ease-in-out",
@@ -31,11 +31,11 @@ const styles = StyleSheet.create({
     },
     logo: {
         animationKeyframes: {
-            "0%": { opacity: 0, transform: [{ translateY: -20 }, { scale: 1 }] },
-            "10%": { opacity: 1, transform: [{ translateY: 0 }, { scale: 1 }] },
-            "25%": { transform: [{ translateY: 0 }, { scale: 1 }] },
-            "35%": { transform: [{ translateY: 270 }, { scale: 2 }] },
-            "100%": { opacity: 1, transform: [{ translateY: 270 }, { scale: 2 }] },
+            "0%": { opacity: 0, transform: "translateY(-20px) scale(1)" },
+            "10%": { opacity: 1, transform: "translateY(0px) scale(1)" },
+            "25%": { transform: "translateY(0px) scale(1)" },
+            "35%": { transform: "translateY(270px) scale(2)" },
+            "100%": { opacity: 1, transform: "translateY(270px) scale(2)" },
         },
         animationDuration: "5000ms",
         animationTimingFunction: "ease-in-out",
@@ -48,5 +48,5 @@ export const SmsOpeningAnimation = ({ playing = true, style }) => {
             animationPlayState: playing ? "running" : "paused",
         };
     }, [playing]);
-    return (_jsxs(Svg, { viewBox: "0 0 442 860", style: style, children: [_jsxs(Mask, { nativeID: "phoneScreen", children: [_jsx(Rect, { x: 0, y: 0, width: 442, height: 860, fill: "#000" }), _jsx(Rect, { fill: "#fff", x: 25, y: 21, width: 392, height: 817, rx: 45 })] }), _jsxs(G, { children: [_jsx(Rect, { fill: colors.swan[400], x: 25, y: 21, width: 392, height: 817, rx: 45 }), _jsx(G, { mask: "url(#phoneScreen)", children: _jsx(Rect, { fill: backgroundColor.default, fillRule: "nonzero", x: 43, y: 80, width: 355, height: 149, rx: 32, style: [styles.icon, animationStyle], "transform-origin": "221.2 150" }) }), _jsx(Path, { d: "M221.000028,125 C237.569013,125 251,138.429348 251,154.996311 C251,171.563274 237.569013,184.992622 221.000028,184.992622 C216.146713,184.999037 211.364882,183.823286 207.068041,181.567043 L194.198053,184.917631 C193.323041,185.145499 192.392776,184.893009 191.7531,184.254027 C191.113423,183.615046 190.860005,182.685139 191.087056,181.810013 L194.435053,168.944596 C192.172455,164.643731 190.993369,159.855888 191.000028,154.996311 C191.000028,138.429348 204.431044,125 221.000028,125 Z M224.756025,157.995942 L211.250037,157.995942 L210.944038,158.01694 C209.830402,158.170147 209.00073,159.121675 209.00073,160.245665 C209.00073,161.369656 209.830402,162.321184 210.944038,162.474391 L211.250037,162.495389 L224.756025,162.495389 L225.059024,162.474391 C226.17266,162.321184 227.002332,161.369656 227.002332,160.245665 C227.002332,159.121675 226.17266,158.170147 225.059024,158.01694 L224.756025,157.995942 Z M230.750019,147.497233 L211.250037,147.497233 L210.944038,147.518231 C209.830402,147.671438 209.00073,148.622966 209.00073,149.746957 C209.00073,150.870947 209.830402,151.822475 210.944038,151.975683 L211.250037,151.99668 L230.750019,151.99668 L231.056019,151.975683 C232.169654,151.822475 232.999327,150.870947 232.999327,149.746957 C232.999327,148.622966 232.169654,147.671438 231.056019,147.518231 L230.750019,147.497233 Z", fill: colors.swan[400], fillRule: "nonzero", style: [styles.logo, animationStyle], "transform-origin": "221.2 150" }), _jsx(Circle, { stroke: colors.swan[100], strokeWidth: 2, cx: 219.5, cy: 439.5, r: 157.5, fill: "none", style: [styles.circle, animationStyle], "transform-origin": "219.5 439.5" }), _jsx(Path, { d: "M369 0a67.998 67.998 0 0168 68v177c1.326 0 2.598.527 3.536 1.464A5.004 5.004 0 01442 250v96a5.004 5.004 0 01-1.464 3.536A5.004 5.004 0 01437 351v441a67.996 67.996 0 01-19.917 48.083A67.996 67.996 0 01369 860H71a67.998 67.998 0 01-68-68V365.6a5 5 0 01-3-4.6v-58a5.002 5.002 0 013-4.6v-16.8a5 5 0 01-3-4.6v-58a5.002 5.002 0 013-4.6v-30.8a5 5 0 01-3-4.6v-24a5.002 5.002 0 013-4.6V68A68 68 0 0171 0h298zm0 21H71a46 46 0 00-46 45.2V792a45.999 45.999 0 0045.2 46H369a46 46 0 0046-45.2V67a45.998 45.998 0 00-46-46z", fill: "#000" })] })] }));
+    return (_jsxs(Svg, { viewBox: "0 0 442 860", style: style, children: [_jsxs(Mask, { id: "phoneScreen", children: [_jsx(Rect, { x: 0, y: 0, width: 442, height: 860, fill: "#000" }), _jsx(Rect, { fill: "#fff", x: 25, y: 21, width: 392, height: 817, rx: 45 })] }), _jsxs(G, { children: [_jsx(Rect, { fill: colors.swan[400], x: 25, y: 21, width: 392, height: 817, rx: 45 }), _jsx(G, { mask: "url(#phoneScreen)", children: _jsx(Rect, { fill: backgroundColor.default, fillRule: "nonzero", x: 43, y: 80, width: 355, height: 149, rx: 32, style: [styles.icon, animationStyle], "transform-origin": "221.2 150" }) }), _jsx(Path, { d: "M221.000028,125 C237.569013,125 251,138.429348 251,154.996311 C251,171.563274 237.569013,184.992622 221.000028,184.992622 C216.146713,184.999037 211.364882,183.823286 207.068041,181.567043 L194.198053,184.917631 C193.323041,185.145499 192.392776,184.893009 191.7531,184.254027 C191.113423,183.615046 190.860005,182.685139 191.087056,181.810013 L194.435053,168.944596 C192.172455,164.643731 190.993369,159.855888 191.000028,154.996311 C191.000028,138.429348 204.431044,125 221.000028,125 Z M224.756025,157.995942 L211.250037,157.995942 L210.944038,158.01694 C209.830402,158.170147 209.00073,159.121675 209.00073,160.245665 C209.00073,161.369656 209.830402,162.321184 210.944038,162.474391 L211.250037,162.495389 L224.756025,162.495389 L225.059024,162.474391 C226.17266,162.321184 227.002332,161.369656 227.002332,160.245665 C227.002332,159.121675 226.17266,158.170147 225.059024,158.01694 L224.756025,157.995942 Z M230.750019,147.497233 L211.250037,147.497233 L210.944038,147.518231 C209.830402,147.671438 209.00073,148.622966 209.00073,149.746957 C209.00073,150.870947 209.830402,151.822475 210.944038,151.975683 L211.250037,151.99668 L230.750019,151.99668 L231.056019,151.975683 C232.169654,151.822475 232.999327,150.870947 232.999327,149.746957 C232.999327,148.622966 232.169654,147.671438 231.056019,147.518231 L230.750019,147.497233 Z", fill: colors.swan[400], fillRule: "nonzero", style: [styles.logo, animationStyle], "transform-origin": "221.2 150" }), _jsx(Circle, { stroke: colors.swan[100], strokeWidth: 2, cx: 219.5, cy: 439.5, r: 157.5, fill: "none", style: [styles.circle, animationStyle], "transform-origin": "219.5 439.5" }), _jsx(Path, { d: "M369 0a67.998 67.998 0 0168 68v177c1.326 0 2.598.527 3.536 1.464A5.004 5.004 0 01442 250v96a5.004 5.004 0 01-1.464 3.536A5.004 5.004 0 01437 351v441a67.996 67.996 0 01-19.917 48.083A67.996 67.996 0 01369 860H71a67.998 67.998 0 01-68-68V365.6a5 5 0 01-3-4.6v-58a5.002 5.002 0 013-4.6v-16.8a5 5 0 01-3-4.6v-58a5.002 5.002 0 013-4.6v-30.8a5 5 0 01-3-4.6v-24a5.002 5.002 0 013-4.6V68A68 68 0 0171 0h298zm0 21H71a46 46 0 00-46 45.2V792a45.999 45.999 0 0045.2 46H369a46 46 0 0046-45.2V67a45.998 45.998 0 00-46-46z", fill: "#000" })] })] }));
 };

package/src/components/Stack.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import { View } from "react-native";
 export declare const Stack: import("react").ForwardRefExoticComponent<import("react-native").ViewProps & {
-    alignItems?: ("center" | "stretch" | "baseline" | "end" | "start") | undefined;
+    alignItems?: ("end" | "start" | "center" | "stretch" | "baseline") | undefined;
     children?: import("react").ReactNode;
-    direction?: ("columnReverse" | "row" | "column" | "rowReverse") | undefined;
-    justifyContent?: ("normal" | "center" | "end" | "start" | "spaceBetween" | "spaceAround" | "spaceEvenly") | undefined;
+    direction?: ("row" | "column" | "columnReverse" | "rowReverse") | undefined;
+    justifyContent?: ("end" | "start" | "normal" | "center" | "spaceBetween" | "spaceAround" | "spaceEvenly") | undefined;
     style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
 } & {
-    space?: 16 | 4 | 8 | 12 | 20 | 24 | 32 | 40 | 48 | 72 | 96 | undefined;
+    space?: 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 96 | undefined;
     wrap?: boolean | undefined;
 } & import("react").RefAttributes<View>>;

package/src/components/Stack.js

@@ -10,7 +10,7 @@ const styles = StyleSheet.create({
     },
 });
 export const Stack = forwardRef(
-// Default <View /> styles https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/exports/View/index.js#L133
+// 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) => {
     const { direction = "column" } = props;
     const horizontal = direction === "row" || direction === "rowReverse";

package/src/components/Stepper.js

@@ -41,7 +41,7 @@ const styles = StyleSheet.create({
         position: "absolute",
         top: "100%",
         left: "50%",
-        transform: [{ translateX: "-50%" }, { translateY: 5 }],
+        transform: "translateX(-50%) translateY(5px)",
     },
     text: {
         whiteSpace: "nowrap",

package/src/components/Svg.d.ts

@@ -4,7 +4,7 @@ type ChildrenProp = {
     children?: ReactNode;
 };
 type FillRule = "evenodd" | "nonzero";
-type CommonProps = Pick<ViewProps, "accessibilityRole" | "focusable" | "nativeID" | "pointerEvents" | "style" | "testID"> & ChildrenProp;
+type CommonProps = Pick<ViewProps, "id" | "role" | "style" | "tabIndex" | "testID"> & ChildrenProp;
 type SvgProps = CommonProps & {
     height?: number;
     title?: string;
@@ -111,17 +111,16 @@ type TspanProps = CommonProps & {
     y?: number;
 };
 export declare const Svg: ({ style, ...props }: SvgProps) => import("react").ReactElement<{
-    style: (import("react-native").StyleProp<import("react-native").ViewStyle> | {
+    style: ({
         display: "flex";
         flexBasis: string;
         flexGrow: number;
         flexShrink: number;
-    })[];
+    } | import("react-native").StyleProp<import("react-native").ViewStyle>)[];
     testID?: string | undefined;
-    pointerEvents?: "none" | "auto" | "box-none" | "box-only" | undefined;
-    nativeID?: string | undefined;
-    accessibilityRole?: import("react-native").WebAccessibilityRole | undefined;
-    focusable?: boolean | undefined;
+    id?: string | undefined;
+    role?: import("react-native").WebRole | undefined;
+    tabIndex?: 0 | -1 | undefined;
     children?: ReactNode;
     height?: number | undefined;
     title?: string | undefined;

package/src/components/Switch.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, memo, useEffect } from "react";
+import { forwardRef, memo, useEffect, useRef } from "react";
 import { Animated, Pressable, StyleSheet, View } from "react-native";
 import { backgroundColor, colors, shadows } from "../constants/design";
 import { useAnimatedValue } from "../hooks/useAnimatedValue";
+import { interpolate } from "../utils/math";
 import { Icon } from "./Icon";
 const WIDTH = 36;
 const BUTTON_SIZE = 16;
@@ -58,6 +59,21 @@ const styles = StyleSheet.create({
 export const Switch = memo(forwardRef(({ value, disabled = false, onValueChange }, ref) => {
     const animatedValue = value ? 1 : 0;
     const animation = useAnimatedValue(animatedValue);
+    const buttonRef = useRef(null);
+    useEffect(() => {
+        const interpolateValue = interpolate({
+            inputRange: [0, 1],
+            outputRange: [PADDING, WIDTH - BUTTON_SIZE - PADDING],
+        });
+        const id = animation.addListener(({ value }) => {
+            if (buttonRef.current instanceof HTMLElement) {
+                buttonRef.current.style.transform = `translateX(${interpolateValue(value)}px)`;
+            }
+        });
+        return () => {
+            animation.removeListener(id);
+        };
+    }, [animation]);
     useEffect(() => {
         Animated.spring(animation, {
             bounciness: 6,
@@ -66,9 +82,5 @@ export const Switch = memo(forwardRef(({ value, disabled = false, onValueChange
             useNativeDriver: false,
         }).start();
     }, [animation, animatedValue]);
-    const translateX = animation.interpolate({
-        inputRange: [0, 1],
-        outputRange: [PADDING, WIDTH - BUTTON_SIZE - PADDING],
-    });
-    return (_jsx(Pressable, { ref: ref, accessibilityRole: "switch", disabled: disabled, onPress: () => onValueChange?.(!value), children: ({ hovered }) => (_jsxs(_Fragment, { children: [_jsx(View, { style: [styles.shadow, hovered && styles.opaque] }), _jsx(View, { style: [styles.base, value && styles.active, disabled && styles.disabled], children: _jsx(Animated.View, { style: [styles.button, { transform: [{ translateX }] }], children: _jsx(Icon, { color: colors.positive[400], name: "checkmark-filled", size: 10, style: [styles.icon, value && styles.opaque] }) }) })] })) }));
+    return (_jsx(Pressable, { ref: ref, role: "switch", disabled: disabled, onPress: () => onValueChange?.(!value), children: ({ hovered }) => (_jsxs(_Fragment, { children: [_jsx(View, { style: [styles.shadow, hovered && styles.opaque] }), _jsx(View, { style: [styles.base, value && styles.active, disabled && styles.disabled], children: _jsx(View, { ref: buttonRef, style: styles.button, children: _jsx(Icon, { color: colors.positive[400], name: "checkmark-filled", size: 10, style: [styles.icon, value && styles.opaque] }) }) })] })) }));
 }));

package/src/components/TabView.js

@@ -62,6 +62,7 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         alignItems: "flex-end",
         overflow: "hidden",
+        pointerEvents: "none",
     },
     count: {
         ...texts.smallRegular,
@@ -126,8 +127,8 @@ const Dropdown = ({ tabs, onHoverStart, onHoverEnd, onLinkFocus, onLinkBlur, onL
         onHoverStart,
         onHoverEnd,
     });
-    return (_jsx(View, { accessibilityRole: "menu", style: styles.dropdown, ref: containerRef, children: tabs.map(({ url, label }) => {
-            return (_jsx(Link, { to: url, onFocus: onLinkFocus, onBlur: onLinkBlur, onPress: onLinkPress, accessibilityRole: "menuitem", ariaCurrentValue: "location", style: ({ active, hovered }) => [
+    return (_jsx(View, { role: "menu", style: styles.dropdown, ref: containerRef, children: tabs.map(({ url, label }) => {
+            return (_jsx(Link, { to: url, onFocus: onLinkFocus, onBlur: onLinkBlur, onPress: onLinkPress, role: "menuitem", ariaCurrentValue: "location", style: ({ active, hovered }) => [
                     styles.dropdownLink,
                     active && styles.dropdownLinkTextActive,
                     hovered && styles.dropdownLinkTextHovered,
@@ -251,7 +252,7 @@ const DropdownItems = forwardRef(({ tabs, otherLabel, currentUrl }, ref) => {
     });
     const mergedRef = useMergeRefs(containerRef, ref);
     const activeTab = tabs.find(({ url }) => url === currentUrl);
-    return (_jsxs(View, { style: styles.dropdownHandleContainer, ref: mergedRef, children: [_jsxs(PressableText, { ref: handleRef, accessibilityRole: "button", accessibilityExpanded: shouldOpen, accessibilityHasPopup: "true", onFocus: onHandleFocus, onBlur: onAnyBlur, onPress: onPress, style: ({ hovered }) => [
+    return (_jsxs(View, { style: styles.dropdownHandleContainer, ref: mergedRef, children: [_jsxs(PressableText, { ref: handleRef, role: "button", "aria-expanded": shouldOpen, "aria-haspopup": "true", onFocus: onHandleFocus, onBlur: onAnyBlur, onPress: onPress, style: ({ hovered }) => [
                     styles.link,
                     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 })] }));
@@ -378,21 +379,21 @@ export const TabView = ({ tabs, otherLabel, hideIfSingleItem = true, sticky = fa
     if (tabs.length <= 1 && hideIfSingleItem) {
         return null;
     }
-    return (_jsxs(Box, { alignItems: "center", direction: "row", accessibilityRole: "tablist", ref: containerRef, style: [styles.container, sticky && styles.sticky, { 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 => {
+    return (_jsxs(Box, { alignItems: "center", direction: "row", role: "tablist", ref: containerRef, style: [styles.container, sticky && styles.sticky, { paddingHorizontal: padding }], children: [_jsxs(View, { style: styles.placeholder, "aria-hidden": true, ref: placeholderRef, onLayout: onLayout, children: [tabs.map(({ label, url, icon, count }) => (_jsxs(Fragment, { children: [_jsxs(Link, { ref: ref => {
                                     if (placeholderLinkRef.current) {
                                         placeholderLinkRef.current[url] = ref;
                                     }
                                 }, to: url, style: ({ active, hovered }) => [
                                     styles.link,
                                     active ? styles.activeLink : hovered ? styles.hoveredLink : null,
-                                ], children: [isNotNullish(icon) && (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, size: 16, color: "currentColor" }), _jsx(Space, { width: 8 })] })), _jsx(Text, { children: label }), count != null ? (_jsxs(_Fragment, { children: [_jsx(Space, { width: 8 }), _jsx(Text, { style: styles.count, children: count })] })) : null] }), _jsx(Space, { width: 32 })] }, url))), _jsxs(LakeText, { ref: otherPlaceholderRef, style: styles.link, 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 })] })] }), kept.map(({ label, url, icon, withSeparator, count }) => (_jsxs(Fragment, { children: [_jsxs(Link, { accessibilityRole: "tab", ref: ref => {
+                                ], children: [isNotNullish(icon) && (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, size: 16, color: "currentColor" }), _jsx(Space, { width: 8 })] })), _jsx(Text, { children: label }), count != null ? (_jsxs(_Fragment, { children: [_jsx(Space, { width: 8 }), _jsx(Text, { style: styles.count, children: count })] })) : null] }), _jsx(Space, { width: 32 })] }, url))), _jsxs(LakeText, { ref: otherPlaceholderRef, style: styles.link, 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 })] })] }), kept.map(({ label, url, icon, withSeparator, count }) => (_jsxs(Fragment, { children: [_jsxs(Link, { role: "tab", ref: ref => {
                             if (linksRefs.current) {
                                 linksRefs.current[url] = ref;
                             }
                         }, to: url, style: ({ active, hovered }) => [
                             styles.link,
                             active ? styles.activeLink : hovered ? styles.hoveredLink : null,
-                        ], children: [withSeparator === true && _jsx(View, { style: styles.separator, accessibilityRole: "none" }), isNotNullish(icon) && (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, size: 16, color: "currentColor" }), _jsx(Space, { width: 8 })] })), _jsx(Text, { children: label }), count != null ? (_jsxs(_Fragment, { children: [_jsx(Space, { width: 8 }), _jsx(Text, { style: styles.count, children: count })] })) : null] }), _jsx(Space, { width: 32 })] }, url))), collapsed.length > 0 ? (_jsx(DropdownItems, { ref: ref => {
+                        ], children: [withSeparator === true && _jsx(View, { style: styles.separator, role: "none" }), isNotNullish(icon) && (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, size: 16, color: "currentColor" }), _jsx(Space, { width: 8 })] })), _jsx(Text, { children: label }), count != null ? (_jsxs(_Fragment, { children: [_jsx(Space, { width: 8 }), _jsx(Text, { style: styles.count, children: count })] })) : null] }), _jsx(Space, { width: 32 })] }, url))), collapsed.length > 0 ? (_jsx(DropdownItems, { ref: ref => {
                     collapsed.forEach(item => {
                         if (linksRefs.current) {
                             linksRefs.current[item.url] = ref;
@@ -401,6 +402,6 @@ export const TabView = ({ tabs, otherLabel, hideIfSingleItem = true, sticky = fa
                 }, tabs: collapsed, currentUrl: currentLocationURL, otherLabel: otherLabel })) : null, hasRendered && (_jsx(View, { style: [
                     styles.underline,
                     styles.animatedUnderline,
-                    { transform: [{ translateX: left }, { scaleX: width }] },
+                    { transform: `translateX(${left}px) scaleX(${width})` },
                 ] }))] }));
 };

package/src/components/Tag.d.ts

@@ -11,7 +11,7 @@ type Props = {
     color?: ColorVariants;
     onPressRemove?: () => void;
     style?: StyleProp<ViewStyle>;
-    accessibilityLabel?: string;
+    ariaLabel?: string;
 };
-export declare const Tag: ({ children, label, color, size, icon, iconSize, accessibilityLabel, onPressRemove, style, }: Props) => JSX.Element;
+export declare const Tag: ({ children, label, color, size, icon, iconSize, ariaLabel, onPressRemove, style, }: Props) => JSX.Element;
 export {};

package/src/components/Tag.js

@@ -33,6 +33,9 @@ const styles = StyleSheet.create({
         justifyContent: "center",
         paddingHorizontal: 8,
     },
+    unselectable: {
+        userSelect: "none",
+    },
     dismiss: {
         justifyContent: "center",
         height: "100%",
@@ -40,7 +43,7 @@ const styles = StyleSheet.create({
         borderLeftWidth: 1,
     },
 });
-export const Tag = ({ children, label, color = "gray", size = "small", icon, iconSize = 16, accessibilityLabel, onPressRemove, style, }) => {
+export const Tag = ({ children, label, color = "gray", size = "small", icon, iconSize = 16, ariaLabel, onPressRemove, style, }) => {
     const hasRemoveButton = isNotNullish(onPressRemove);
     const hasLabel = isNotNullishOrEmpty(label);
     const hasOnlyIcon = isNullish(children) && isNotNullish(icon);
@@ -53,7 +56,7 @@ export const Tag = ({ children, label, color = "gray", size = "small", icon, ico
                     styles.label,
                     size === "large" && styles.larger,
                     { backgroundColor: tint100, borderColor: tint200 },
-                ], children: _jsx(Text, { numberOfLines: 1, selectable: false, style: [styles.text, { color: primary }], children: label }) })), _jsxs(Box, { alignItems: "center", direction: "row", accessibilityLabel: accessibilityLabel, style: [
+                ], children: _jsx(Text, { numberOfLines: 1, style: [styles.text, styles.unselectable, { color: primary }], children: label }) })), _jsxs(Box, { alignItems: "center", direction: "row", "aria-label": ariaLabel, style: [
                     styles.base,
                     size === "large" && styles.larger,
                     hasOnlyIcon && styles.onlyIcon,
@@ -67,7 +70,7 @@ export const Tag = ({ children, label, color = "gray", size = "small", icon, ico
                         }),
                     },
                     style,
-                ], children: [_jsxs(Text, { numberOfLines: 1, style: [styles.text, hasOnlyIcon && styles.onlyIcon, { color: primary }], children: [icon && (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, color: primary, size: iconSize }), isNotNullish(children) && _jsx(Space, { width: 8 })] })), children] }), hasRemoveButton && (_jsx(Pressable, { accessibilityRole: "button", onPress: onPressRemove, style: ({ hovered, pressed }) => [
+                ], children: [_jsxs(Text, { numberOfLines: 1, style: [styles.text, hasOnlyIcon && styles.onlyIcon, { color: primary }], children: [icon && (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, color: primary, size: iconSize }), isNotNullish(children) && _jsx(Space, { width: 8 })] })), children] }), hasRemoveButton && (_jsx(Pressable, { role: "button", onPress: onPressRemove, style: ({ hovered, pressed }) => [
                             styles.dismiss,
                             { color: primary, borderColor: tint100 },
                             hovered && { backgroundColor: tint100 },

package/src/components/Tile.js

@@ -76,7 +76,7 @@ const styles = StyleSheet.create({
     },
 });
 export const Tile = ({ icon, title, description, headerEnd, footer, flexBasis, children, numberOfLines, paddingVertical = 32, paddingHorizontal = 32, hovered = false, flexGrow = 0, flexShrink = 0, disabled = false, selected, style, }) => {
-    return (_jsxs(View, { accessibilityRole: "region", style: [
+    return (_jsxs(View, { role: "region", style: [
             styles.container,
             selected === false && styles.unselectedContainer,
             {
@@ -90,7 +90,7 @@ export const Tile = ({ icon, title, description, headerEnd, footer, flexBasis, c
             selected === false && hovered && styles.unselectedHoveredContainer,
             disabled && styles.disabled,
             style,
-        ], children: [(isNotNullish(title) || isNotNullish(headerEnd) || isNotNullish(description)) && (_jsxs(View, { style: styles.headerContainer, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTitleIcon, children: [isNotNullish(icon) && (_jsxs(_Fragment, { children: [icon, _jsx(Space, { height: 12 })] })), isNotNullish(title) && (_jsx(Text, { style: styles.title, accessibilityRole: "header", accessibilityLevel: 3, children: title }))] }), isNotNullish(headerEnd) ? _jsx(View, { children: headerEnd }) : null] }), isNotNullish(description) && (_jsxs(_Fragment, { children: [isNotNullish(title) && _jsx(Space, { height: 12 }), _jsx(View, { style: styles.descriptionContainer, children: _jsx(LakeText, { numberOfLines: numberOfLines, style: styles.description, children: description }) })] })), isNotNullish(children) && _jsx(Space, { height: 24 })] })), children, isNotNullish(footer) && (_jsx(View, { style: [styles.footer, { marginTop: paddingVertical, marginBottom: -paddingVertical }], children: footer }))] }));
+        ], children: [(isNotNullish(title) || isNotNullish(headerEnd) || isNotNullish(description)) && (_jsxs(View, { style: styles.headerContainer, children: [_jsxs(View, { style: styles.header, children: [_jsxs(View, { style: styles.headerTitleIcon, children: [isNotNullish(icon) && (_jsxs(_Fragment, { children: [icon, _jsx(Space, { height: 12 })] })), isNotNullish(title) && (_jsx(Text, { style: styles.title, role: "heading", "aria-level": 3, children: title }))] }), isNotNullish(headerEnd) ? _jsx(View, { children: headerEnd }) : null] }), isNotNullish(description) && (_jsxs(_Fragment, { children: [isNotNullish(title) && _jsx(Space, { height: 12 }), _jsx(View, { style: styles.descriptionContainer, children: _jsx(LakeText, { numberOfLines: numberOfLines, style: styles.description, children: description }) })] })), isNotNullish(children) && _jsx(Space, { height: 24 })] })), children, isNotNullish(footer) && (_jsx(View, { style: [styles.footer, { marginTop: paddingVertical, marginBottom: -paddingVertical }], children: footer }))] }));
 };
 export const TileFullWidthContent = ({ children, flexGrow, fitToBottom = false, }) => {
     return (_jsx(View, { style: [styles.fullWidthContent, fitToBottom && styles.fitToBottom, { flexGrow }], children: children }));

package/src/components/ToastStack.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { memo, useEffect, useState } from "react";
-import { Animated, StyleSheet, View } from "react-native";
+import { memo, useEffect, useRef, useState } from "react";
+import { StyleSheet, View } from "react-native";
 import { match } from "ts-pattern";
 import { animations, colors, shadows } from "../constants/design";
 import { hideToast, useToasts } from "../state/toasts";
+import { isNullish } from "../utils/nullish";
 import { Box } from "./Box";
 import { Icon } from "./Icon";
 import { LakeText } from "./LakeText";
@@ -53,12 +54,24 @@ const styles = StyleSheet.create({
     },
 });
 const Toast = memo(({ variant, uid, title, description, progress, onClose }) => {
+    const progressBarRef = useRef(null);
     const colorVariation = match(variant)
         .with("success", () => "positive")
         .with("error", () => "negative")
         .with("info", () => "shakespear")
         .with("warning", () => "warning")
         .exhaustive();
+    useEffect(() => {
+        if (isNullish(progress)) {
+            return;
+        }
+        const id = progress.addListener(({ value }) => {
+            if (progressBarRef.current instanceof HTMLElement) {
+                progressBarRef.current.style.transform = `scaleX(${value})`;
+            }
+        });
+        return () => progress.removeListener(id);
+    }, [progress]);
     return (_jsx(View, { style: styles.toastWrapper, children: _jsxs(View, { style: [
                 styles.toast,
                 {
@@ -71,11 +84,7 @@ const Toast = memo(({ variant, uid, title, description, progress, onClose }) =>
                                     .with("error", () => (_jsx(Icon, { name: "dismiss-circle-regular", size: 20, color: colors[colorVariation][700] })))
                                     .with("info", () => (_jsx(Icon, { name: "info-regular", size: 20, color: colors[colorVariation][700] })))
                                     .with("warning", () => (_jsx(Icon, { name: "warning-regular", size: 20, color: colors[colorVariation][700] })))
-                                    .exhaustive(), _jsx(Space, { width: 12 }), _jsx(LakeText, { variant: "regular", color: colors[colorVariation][700], children: title })] }), description != null && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 8 }), _jsx(LakeText, { variant: "smallRegular", color: colors.gray[700], children: description })] }))] }), _jsx(Pressable, { onPress: () => onClose(uid), style: styles.closeButton, children: _jsx(Icon, { name: "lake-close", size: 24, color: colors.gray[500] }) }), progress != null && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 24 }), _jsx(Animated.View, { accessibilityRole: "progressbar", style: [
-                                styles.progressBar,
-                                { backgroundColor: colors[colorVariation][500] },
-                                { transform: [{ scaleX: progress }] },
-                            ] })] }))] }) }));
+                                    .exhaustive(), _jsx(Space, { width: 12 }), _jsx(LakeText, { variant: "regular", color: colors[colorVariation][700], children: title })] }), description != null && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 8 }), _jsx(LakeText, { variant: "smallRegular", color: colors.gray[700], children: description })] }))] }), _jsx(Pressable, { onPress: () => onClose(uid), style: styles.closeButton, children: _jsx(Icon, { name: "lake-close", size: 24, color: colors.gray[500] }) }), progress != null && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 24 }), _jsx(View, { ref: progressBarRef, role: "progressbar", style: [styles.progressBar, { backgroundColor: colors[colorVariation][500] }] })] }))] }) }));
 });
 export const ToastStack = () => {
     const toasts = useToasts();

package/src/components/Tooltip.js

@@ -59,7 +59,7 @@ const styles = StyleSheet.create({
         backgroundColor: colors.white,
         borderWidth: 1,
         borderColor: colors.gray[10],
-        transform: [{ rotate: "45deg" }],
+        transform: "rotate(45deg)",
     },
 });
 const isReactText = (node) => ["string", "number"].includes(typeof node);
@@ -148,15 +148,12 @@ export const Tooltip = memo(forwardRef(({ children, describedBy, matchReferenceW
                     styles.base,
                     state?.placement === "top" && styles.baseTop,
                     state?.placement === "bottom" && styles.baseBottom,
-                ], children: [_jsx(View, { style: [styles.content, { width }], children: isReactText(children) ? _jsx(Text, { style: styles.text, children: children }) : children }), _jsx(View, { accessibilityRole: "none", style: [
+                ], children: [_jsx(View, { style: [styles.content, { width }], children: isReactText(children) ? _jsx(Text, { style: styles.text, children: children }) : children }), _jsx(View, { role: "none", style: [
                             styles.arrowContainer,
                             state?.placement === "top" && styles.arrowContainerTop,
                             state?.placement === "bottom" && styles.arrowContainerBottom,
                             {
-                                transform: [
-                                    { translateX: -overflowOffset },
-                                    { rotate: state?.placement === "bottom" ? "180deg" : "0deg" },
-                                ],
+                                transform: `translateX(${-overflowOffset}px) rotate(${state?.placement === "bottom" ? "180deg" : "0deg"})`,
                             },
                         ], children: _jsx(View, { style: styles.arrow }) })] }) }) }));
 }));

package/src/components/TransitionGroupView.d.ts

@@ -1,12 +1,11 @@
 import { ReactNode } from "react";
-import { AnimationStyles, StyleProp, ViewProps, ViewStyle } from "react-native";
+import { AnimationStyles, StyleProp, ViewStyle } from "react-native";
 type Props = {
     enter?: AnimationStyles;
     leave?: AnimationStyles;
     style?: StyleProp<ViewStyle>;
     childStyle?: StyleProp<ViewStyle>;
-    pointerEvents?: ViewProps["pointerEvents"];
     children: ReactNode;
 };
-export declare const TransitionGroupView: ({ children, enter, leave, style, childStyle, pointerEvents, }: Props) => JSX.Element;
+export declare const TransitionGroupView: ({ children, enter, leave, style, childStyle }: Props) => JSX.Element;
 export {};

package/src/components/TransitionGroupView.js

@@ -5,7 +5,7 @@ import { View } from "react-native";
 import { P, match } from "ts-pattern";
 import { usePreviousValue } from "../hooks/usePreviousValue";
 import { TransitionView } from "./TransitionView";
-export const TransitionGroupView = ({ children, enter, leave, style, childStyle, pointerEvents, }) => {
+export const TransitionGroupView = ({ children, enter, leave, style, childStyle }) => {
     const leavingKeysAndIndicesRef = useRef([]);
     const [, forceUpdate] = useReducer(() => [], []);
     const onLeave = (key) => {
@@ -38,6 +38,6 @@ export const TransitionGroupView = ({ children, enter, leave, style, childStyle,
         }
     });
     return (_jsx(View, { style: style, children: childrenToRender.map(({ key, child }) => {
-            return (_jsx(TransitionView, { enter: enter, leave: leave, style: childStyle, pointerEvents: pointerEvents, onLeave: () => onLeave(key), children: child }, key));
+            return (_jsx(TransitionView, { enter: enter, leave: leave, style: childStyle, onLeave: () => onLeave(key), children: child }, key));
         }) }));
 };

package/src/components/TransitionView.d.ts

@@ -1,12 +1,11 @@
 import { ReactNode } from "react";
-import { AnimationStyles, StyleProp, ViewProps, ViewStyle } from "react-native";
+import { AnimationStyles, StyleProp, ViewStyle } from "react-native";
 type Props = {
     enter?: AnimationStyles;
     leave?: AnimationStyles;
     style?: StyleProp<ViewStyle>;
-    pointerEvents?: ViewProps["pointerEvents"];
     children: ReactNode | null;
     onLeave?: () => void;
 };
-export declare const TransitionView: ({ enter, leave, style, children, pointerEvents, onLeave, }: Props) => JSX.Element | null;
+export declare const TransitionView: ({ enter, leave, style, children, onLeave }: Props) => JSX.Element | null;
 export {};

package/src/components/TransitionView.js

@@ -8,7 +8,7 @@ const styles = StyleSheet.create({
         animationFillMode: "forwards",
     },
 });
-export const TransitionView = ({ enter, leave, style, children, pointerEvents, onLeave, }) => {
+export const TransitionView = ({ enter, leave, style, children, onLeave }) => {
     const viewRef = useRef(null);
     const childrenForLeaveAnimationRef = useRef(null);
     const [, forceUpdate] = useReducer(() => [], []);
@@ -34,7 +34,7 @@ export const TransitionView = ({ enter, leave, style, children, pointerEvents, o
         }
     }, [children, leave, onLeave]);
     const hasChildrenToDisplay = isNotNullish(children) || isNotNullish(childrenForLeaveAnimationRef.current);
-    return hasChildrenToDisplay ? (_jsx(View, { pointerEvents: pointerEvents, ref: viewRef, style: [
+    return hasChildrenToDisplay ? (_jsx(View, { ref: viewRef, style: [
             styles.base,
             style,
             enter,

package/src/components/WithCurrentColor.d.ts

@@ -6,7 +6,7 @@ type Props = {
     style?: ViewProps["style"];
     children: ReactElement;
 };
-export declare const CurrentColorContext: import("react").Context<"warning" | "current" | "gray" | "live" | "sandbox" | "positive" | "negative" | "partner" | "swan" | "shakespear" | "darkPink" | "sunglow" | "mediumSladeBlue" | undefined>;
+export declare const CurrentColorContext: import("react").Context<"gray" | "live" | "sandbox" | "positive" | "warning" | "negative" | "current" | "partner" | "swan" | "shakespear" | "darkPink" | "sunglow" | "mediumSladeBlue" | undefined>;
 export declare const useCurrentColor: (containerRef: MutableRefObject<HTMLElement | null>, variant: ColorVariants | undefined) => void;
 export declare const WithCurrentColor: ({ variant, style, children }: Props) => JSX.Element;
 export {};

package/src/constants/design.d.ts

@@ -135,24 +135,16 @@ export declare const animations: {
         enter: {
             animationKeyframes: {
                 "10%, 90%": {
-                    transform: {
-                        translateX: number;
-                    }[];
+                    transform: string;
                 };
                 "20%, 80%": {
-                    transform: {
-                        translateX: number;
-                    }[];
+                    transform: string;
                 };
                 "30%, 50%, 70%": {
-                    transform: {
-                        translateX: number;
-                    }[];
+                    transform: string;
                 };
                 "40%, 60%": {
-                    transform: {
-                        translateX: number;
-                    }[];
+                    transform: string;
                 };
             }[];
             animationDuration: string;