@swan-io/lake 11.4.3 → 12.0.0

package/src/components/LakeTooltip.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState, } from "react";
+import { memo, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { match } from "ts-pattern";
 import { colors, shadows, spacings } from "../constants/design";
@@ -44,13 +44,13 @@ const styles = StyleSheet.create({
         flexGrow: 0,
     },
 });
-export const LakeTooltip = forwardRef(({ content, children, ...rest }, forwardedRef) => {
+export const LakeTooltip = ({ ref, content, children, ...rest }) => {
     if (isNullishOrEmpty(content)) {
         return children;
     }
-    return (_jsx(Tooltip, { ref: forwardedRef, content: content, ...rest, children: children }));
-});
-const Tooltip = memo(forwardRef(({ children, content, describedBy, matchReferenceWidth = false, hideArrow = false, onHide, onShow, placement, width, maxWidth, togglableOnFocus = false, containerStyle, disabled = false, }, forwardedRef) => {
+    return (_jsx(Tooltip, { ref: ref, content: content, ...rest, children: children }));
+};
+const Tooltip = memo(({ ref, children, content, describedBy, matchReferenceWidth = false, hideArrow = false, onHide, onShow, placement, width, maxWidth, togglableOnFocus = false, containerStyle, disabled = false, }) => {
     const timeoutRef = useRef(0);
     const [visible, setVisible] = useState(false);
     const { referenceRef, position } = useContextualLayer({
@@ -59,7 +59,7 @@ const Tooltip = memo(forwardRef(({ children, content, describedBy, matchReferenc
         matchReferenceWidth,
     });
     const rootElement = getRootElement(referenceRef.current);
-    useImperativeHandle(forwardedRef, () => ({
+    useImperativeHandle(ref, () => ({
         show: () => setVisible(true),
         hide: () => setVisible(false),
     }));
@@ -122,5 +122,5 @@ const Tooltip = memo(forwardRef(({ children, content, describedBy, matchReferenc
                                     .with("center", () => "center")
                                     .with("right", () => "end")
                                     .exhaustive(), style: [styles.arrowBar, styles.arrowBarBottom], children: _jsx(Svg, { width: 16, height: 8, viewBox: "0 0 16 8", children: _jsx(Polygon, { points: "8 8 16 0 0 0", fill: hideArrow ? "transparent" : colors.gray[900] }) }) })) : null] }) }) }))] }));
-}));
-export const InformationTooltip = forwardRef(({ text, icon = "info-regular", iconSize = 24 }, forwardedRef) => (_jsx(LakeTooltip, { ref: forwardedRef, describedBy: "copy", placement: "right", togglableOnFocus: true, width: 300, content: text, children: _jsx(View, { style: styles.info, children: _jsx(Icon, { name: icon, size: iconSize, color: colors.gray[900] }) }) })));
+});
+export const InformationTooltip = ({ ref, text, icon = "info-regular", iconSize = 24, }) => (_jsx(LakeTooltip, { ref: ref, describedBy: "copy", placement: "right", togglableOnFocus: true, width: 300, content: text, children: _jsx(View, { style: styles.info, children: _jsx(Icon, { name: icon, size: iconSize, color: colors.gray[900] }) }) }));

package/src/components/Link.d.ts

@@ -1,7 +1,9 @@
+import { Ref } from "react";
 import { HrefAttrs, PressableStateCallbackType, Text, TextProps } from "react-native";
 import { Except } from "type-fest";
 import { PressableTextProps } from "./Pressable";
 export type LinkProps = Except<PressableTextProps, "hrefAttrs" | "style" | "onPress" | "children"> & {
+    ref?: Ref<Text>;
     to: string;
     replace?: boolean;
     disabled?: boolean;
@@ -16,125 +18,4 @@ export type LinkProps = Except<PressableTextProps, "hrefAttrs" | "style" | "onPr
         active: boolean;
     }) => TextProps["children"]);
 };
-export declare const Link: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<{
-    allowFontScaling?: boolean | undefined | undefined;
-    ellipsizeMode?: "head" | "middle" | "tail" | "clip" | undefined | undefined;
-    id?: string | undefined | undefined;
-    lineBreakMode?: "head" | "middle" | "tail" | "clip" | undefined | undefined;
-    numberOfLines?: number | undefined | undefined;
-    onTextLayout?: ((event: import("react-native").NativeSyntheticEvent<import("react-native").TextLayoutEventData>) => void) | undefined | undefined;
-    testID?: string | undefined | undefined;
-    nativeID?: string | undefined | undefined;
-    maxFontSizeMultiplier?: number | null | undefined | undefined;
-    role?: import("react-native").WebRole | undefined;
-    href?: string | undefined;
-    lang?: string | undefined;
-    adjustsFontSizeToFit?: boolean | undefined | undefined;
-    dynamicTypeRamp?: "caption2" | "caption1" | "footnote" | "subheadline" | "callout" | "body" | "headline" | "title3" | "title2" | "title1" | "largeTitle" | undefined | undefined;
-    minimumFontScale?: number | undefined | undefined;
-    suppressHighlighting?: boolean | undefined | undefined;
-    lineBreakStrategyIOS?: "none" | "standard" | "hangul-word" | "push-out" | undefined | undefined;
-    selectable?: boolean | undefined | undefined;
-    selectionColor?: import("react-native").ColorValue | undefined;
-    textBreakStrategy?: "simple" | "highQuality" | "balanced" | undefined | undefined;
-    dataDetectorType?: null | "phoneNumber" | "link" | "email" | "none" | "all" | undefined | undefined;
-    android_hyphenationFrequency?: "normal" | "none" | "full" | undefined | undefined;
-    accessible?: boolean | undefined | undefined;
-    accessibilityActions?: readonly Readonly<{
-        name: import("react-native").AccessibilityActionName | string;
-        label?: string | undefined;
-    }>[] | undefined;
-    accessibilityLabel?: string | undefined | undefined;
-    "aria-label"?: string | undefined | undefined;
-    accessibilityRole?: import("react-native").AccessibilityRole | undefined;
-    accessibilityState?: import("react-native").AccessibilityState | undefined;
-    "aria-busy"?: boolean | undefined | undefined;
-    "aria-checked"?: boolean | "mixed" | undefined | undefined;
-    "aria-disabled"?: boolean | undefined | undefined;
-    "aria-expanded"?: boolean | undefined | undefined;
-    "aria-selected"?: boolean | undefined | undefined;
-    "aria-labelledby"?: string | undefined | undefined;
-    accessibilityHint?: string | undefined | undefined;
-    accessibilityValue?: import("react-native").AccessibilityValue | undefined;
-    "aria-valuemax"?: number | undefined;
-    "aria-valuemin"?: number | undefined;
-    "aria-valuenow"?: number | undefined;
-    "aria-valuetext"?: string | undefined;
-    onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined | undefined;
-    importantForAccessibility?: ("auto" | "yes" | "no" | "no-hide-descendants") | undefined | undefined;
-    "aria-hidden"?: boolean | undefined | undefined;
-    "aria-live"?: ("polite" | "assertive" | "off") | undefined | undefined;
-    "aria-modal"?: boolean | undefined | undefined;
-    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined | undefined;
-    accessibilityLabelledBy?: string | string[] | undefined | undefined;
-    accessibilityElementsHidden?: boolean | undefined | undefined;
-    accessibilityViewIsModal?: boolean | undefined | undefined;
-    onAccessibilityEscape?: (() => void) | undefined | undefined;
-    onAccessibilityTap?: (() => void) | undefined | undefined;
-    onMagicTap?: (() => void) | undefined | undefined;
-    accessibilityIgnoresInvertColors?: boolean | undefined | undefined;
-    accessibilityLanguage?: string | undefined | undefined;
-    tabIndex?: 0 | -1 | undefined;
-    "aria-activedescendant"?: string | undefined;
-    "aria-atomic"?: boolean | undefined;
-    "aria-autocomplete"?: string | undefined;
-    "aria-colcount"?: number | undefined;
-    "aria-colindex"?: number | undefined;
-    "aria-colspan"?: number | undefined;
-    "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "step" | "location" | "date" | "time" | undefined;
-    "aria-describedby"?: string | undefined;
-    "aria-details"?: string | undefined;
-    "aria-errormessage"?: string | undefined;
-    "aria-flowto"?: string | undefined;
-    "aria-haspopup"?: string | undefined;
-    "aria-invalid"?: boolean | undefined;
-    "aria-keyshortcuts"?: string | undefined;
-    "aria-level"?: number | undefined;
-    "aria-multiline"?: boolean | undefined;
-    "aria-multiselectable"?: boolean | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined;
-    "aria-owns"?: string | undefined;
-    "aria-placeholder"?: string | undefined;
-    "aria-posinset"?: number | undefined;
-    "aria-pressed"?: boolean | undefined;
-    "aria-readonly"?: boolean | undefined;
-    "aria-required"?: boolean | undefined;
-    "aria-roledescription"?: string | undefined;
-    "aria-rowcount"?: number | undefined;
-    "aria-rowindex"?: number | undefined;
-    "aria-rowspan"?: number | undefined;
-    "aria-setsize"?: number | undefined;
-    "aria-sort"?: "ascending" | "descending" | "none" | "other" | undefined;
-    delayLongPress?: number | undefined;
-    delayPressIn?: number | undefined;
-    delayPressOut?: number | undefined;
-    disabled?: boolean | undefined;
-    onBlur?: ((event: import("react-native").NativeSyntheticEvent<React.FocusEvent>) => void) | undefined;
-    onContextMenu?: ((event: import("react-native").NativeSyntheticEvent<React.SyntheticEvent>) => void) | undefined;
-    onFocus?: ((event: import("react-native").NativeSyntheticEvent<React.FocusEvent>) => void) | undefined;
-    onHoverIn?: ((event: unknown) => void) | undefined;
-    onHoverOut?: ((event: unknown) => void) | undefined;
-    onKeyDown?: ((event: import("react-native").NativeSyntheticEvent<React.KeyboardEvent>) => void) | undefined;
-    onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
-    onLongPress?: ((event: unknown) => void) | undefined;
-    onPressIn?: ((event: unknown) => void) | undefined;
-    onPressMove?: ((event: unknown) => void) | undefined;
-    onPressOut?: ((event: unknown) => void) | undefined;
-    testOnly_hovered?: boolean | undefined;
-    testOnly_pressed?: boolean | undefined;
-} & {
-    to: string;
-    replace?: boolean;
-    disabled?: boolean;
-    download?: boolean;
-    target?: NonNullable<HrefAttrs>["target"];
-    style?: TextProps["style"] | ((state: PressableStateCallbackType & {
-        active: boolean;
-    }) => TextProps["style"]);
-    ariaCurrentValue?: "page" | "location";
-    onPress?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
-    children?: TextProps["children"] | ((state: PressableStateCallbackType & {
-        active: boolean;
-    }) => TextProps["children"]);
-} & import("react").RefAttributes<Text>>>;
+export declare const Link: import("react").MemoExoticComponent<({ ref, role, children, disabled, onPress, replace, download, style, target, to, ariaCurrentValue, tabIndex, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element>;

package/src/components/Link.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useLinkProps } from "@swan-io/chicane";
-import { forwardRef, memo } from "react";
+import { memo } from "react";
 import { isNotNullish } from "../utils/nullish";
 import { PressableText } from "./Pressable";
-export const Link = memo(forwardRef(({ role = "link", children, disabled = false, onPress, replace = false, download = false, style, target, to, ariaCurrentValue = "page", tabIndex, ...props }, forwardedRef) => {
+export const Link = memo(({ ref, role = "link", children, disabled = false, onPress, replace = false, download = false, style, target, to, ariaCurrentValue = "page", tabIndex, ...props }) => {
     const { active, onClick } = useLinkProps({ href: to, replace, target });
     return (_jsx(PressableText, { ...props, role: role, disabled: disabled, "aria-disabled": disabled, tabIndex: isNotNullish(tabIndex) ? tabIndex : disabled ? -1 : 0, "aria-current": active ? ariaCurrentValue : undefined, href: !disabled ? to : undefined, onPress: (event) => {
             const e = event;
@@ -14,10 +14,10 @@ export const Link = memo(forwardRef(({ role = "link", children, disabled = false
                 onPress === null || onPress === void 0 ? void 0 : onPress(e);
                 onClick(e);
             }
-        }, ref: forwardedRef, style: typeof style === "function" ? state => style({ ...state, active }) : style, hrefAttrs: {
+        }, ref: ref, style: typeof style === "function" ? state => style({ ...state, active }) : style, hrefAttrs: {
             rel: target && target !== "self" ? "noopener noreferrer" : undefined,
             download,
             target,
         }, children: typeof children === "function" ? state => children({ ...state, active }) : children }));
-}));
+});
 Link.displayName = "Link";

package/src/components/ListRightPanel.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from "react";
+import { Ref } from "react";
 import { StyleProp, ViewStyle } from "react-native";
 import { FocusTrapRef } from "./FocusTrap";
 export declare const ListRightPanelContent: ({ children, large, style, }: {
@@ -7,6 +7,7 @@ export declare const ListRightPanelContent: ({ children, large, style, }: {
     style?: StyleProp<ViewStyle>;
 }) => import("react/jsx-runtime").JSX.Element;
 type Props<T> = {
+    ref?: Ref<FocusTrapRef>;
     items: T[];
     keyExtractor: (item: T) => string;
     activeId: string | null;
@@ -17,7 +18,5 @@ type Props<T> = {
     previousLabel: string;
     nextLabel: string;
 };
-export declare const ListRightPanel: <T>(props: Props<T> & {
-    ref?: MutableRefObject<FocusTrapRef | null>;
-}) => React.ReactElement;
+export declare const ListRightPanel: <T>({ ref, items, keyExtractor, activeId, onActiveIdChange, onClose, render, closeLabel, previousLabel, nextLabel, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/ListRightPanel.js

@@ -1,7 +1,6 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Array, Option } from "@swan-io/boxed";
-import { forwardRef } from "react";
 import { StyleSheet, View } from "react-native";
 import { match } from "ts-pattern";
 import { animations, colors, spacings } from "../constants/design";
@@ -36,7 +35,7 @@ const styles = StyleSheet.create({
 export const ListRightPanelContent = ({ children, large, style, }) => {
     return _jsx(View, { style: [large ? styles.contentLarge : styles.content, style], children: children });
 };
-const ListRightPanel_ = forwardRef(({ items, keyExtractor, activeId, onActiveIdChange, onClose, render, closeLabel, previousLabel, nextLabel, }, ref) => {
+export const ListRightPanel = ({ ref, items, keyExtractor, activeId, onActiveIdChange, onClose, render, closeLabel, previousLabel, nextLabel, }) => {
     const activeItem = items.find(item => keyExtractor(item) === activeId);
     // use `Array.getIndexBy` instead of `Array.findIndex` to avoid -1 value
     const activeItemIndex = Array.findIndex(items, item => keyExtractor(item) === activeId).toUndefined();
@@ -79,6 +78,4 @@ const ListRightPanel_ = forwardRef(({ items, keyExtractor, activeId, onActiveIdC
                                 : []),
                         ]
                         : null })] })) }));
-});
-// @ts-expect-error this is the only way I found to use generic props with forwardRef
-export const ListRightPanel = ListRightPanel_;
+};

package/src/components/LoadingView.d.ts

@@ -1,8 +1,10 @@
+import { Ref } from "react";
 import { StyleProp, View, ViewStyle } from "react-native";
 type Props = {
+    ref?: Ref<View>;
     color?: string;
     delay?: number;
     style?: StyleProp<ViewStyle>;
 };
-export declare const LoadingView: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<View>>;
+export declare const LoadingView: ({ ref, color, delay, style, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/LoadingView.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
 import { ActivityIndicator, StyleSheet, View } from "react-native";
 import { colors } from "../constants/design";
 const styles = StyleSheet.create({
@@ -21,4 +20,4 @@ const styles = StyleSheet.create({
     },
 });
 const isDev = process.env.NODE_ENV === "development";
-export const LoadingView = forwardRef(({ color = colors.gray[400], delay = isDev ? 0 : 1000, style }, forwardedRef) => (_jsx(View, { ref: forwardedRef, style: [styles.base, style], children: _jsx(ActivityIndicator, { size: "small", color: color, style: [styles.indicator, delay > 0 && { animationDelay: delay.toString() + "ms" }] }) })));
+export const LoadingView = ({ ref, color = colors.gray[400], delay = isDev ? 0 : 1000, style, }) => (_jsx(View, { ref: ref, style: [styles.base, style], children: _jsx(ActivityIndicator, { size: "small", color: color, style: [styles.indicator, delay > 0 && { animationDelay: delay.toString() + "ms" }] }) }));

package/src/components/PlainListView.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode } from "react";
-import { PressableStateCallbackType, ViewStyle } from "react-native";
+import { ReactElement, ReactNode, Ref } from "react";
+import { View, ViewStyle } from "react-native";
 import { ColumnCellConfig, ColumnTitleConfig, LinkConfig } from "./VirtualizedList";
 export type { LinkConfig } from "./VirtualizedList";
 export type ColumnConfig<T, ExtraInfo> = {
@@ -24,7 +24,9 @@ type Props<T, ExtraInfo> = {
     headerStyle?: ViewStyle | null | undefined;
     rowStyle?: (item: T, large: boolean) => ViewStyle | null | undefined;
     getRowLink?: (config: LinkConfig<T, ExtraInfo>) => ReactElement<{
-        children: (state: PressableStateCallbackType) => React.ReactNode;
+        children: ReactNode;
+        ref?: Ref<View>;
+        style?: ViewStyle;
     }>;
     renderEmptyList?: () => ReactNode;
     groupBy?: (item: T) => string;

package/src/components/Popover.d.ts

@@ -12,7 +12,7 @@ type Props = {
     matchReferenceMinWidth?: boolean;
     onDismiss?: () => void;
     onEscapeKey?: () => void;
-    referenceRef: RefObject<View | Text>;
+    referenceRef: RefObject<View | Text | null>;
     returnFocus?: boolean;
     autoFocus?: boolean;
     visible: boolean;

package/src/components/Pressable.d.ts

@@ -3,6 +3,7 @@ import { HrefAttrs, NativeSyntheticEvent, PressableProps, PressableStateCallback
 import { Except, Merge } from "type-fest";
 import { PressResponderConfig } from "../hooks/usePressEvents";
 type Props<BaseProps extends TextProps | TextInputProps> = Merge<BaseProps, {
+    ref?: Ref<unknown>;
     children?: ReactNode | ((state: PressableStateCallbackType) => ReactNode);
     delayLongPress?: number;
     delayPressIn?: number;

package/src/components/Pressable.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// https://github.com/necolas/react-native-web/blob/0.19.1/packages/react-native-web/src/exports/Pressable/index.js
-import { forwardRef, memo, useCallback, useMemo, useRef, } from "react";
+// https://github.com/necolas/react-native-web/blob/0.20.0/packages/react-native-web/src/exports/Pressable/index.js
+import { memo, useCallback, useMemo, useRef } from "react";
 import { StyleSheet, Text, View, } from "react-native";
 import { match } from "ts-pattern";
 import { useForceableState } from "../hooks/useForceableState";
@@ -20,13 +20,13 @@ const getPressable = (
 // biome-ignore lint/suspicious/noExplicitAny:
 Component, config = {}) => {
     const { applyPressStyle = true } = config;
-    return forwardRef((props, forwardedRef) => {
-        const { 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;
+    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 [hovered, setHovered] = useForceableState(testOnly_hovered === true);
         const [focused, setFocused] = useForceableState(false);
         const [pressed, setPressed] = useForceableState(testOnly_pressed === true);
         const hostRef = useRef(null);
-        const setRef = useMergeRefs(forwardedRef, hostRef);
+        const setRef = useMergeRefs(ref, hostRef);
         const pressConfig = useMemo(() => ({
             delayLongPress,
             delayPressStart: delayPressIn,
@@ -98,7 +98,7 @@ Component, config = {}) => {
                     .otherwise(() => null),
                 typeof style === "function" ? style(interactionState) : style,
             ], tabIndex: _tabIndex, children: typeof children === "function" ? children(interactionState) : children }));
-    });
+    };
 };
 export const Pressable = memo(getPressable(View, { applyPressStyle: true }));
 export const PressableText = memo(getPressable(Text, { applyPressStyle: true }));

package/src/components/RightPanel.d.ts

@@ -1,10 +1,11 @@
-import { ReactNode } from "react";
+import { ReactNode, Ref } from "react";
 import { FocusTrapRef } from "./FocusTrap";
 import { Context } from "./ResponsiveContainer";
 type Props = {
+    ref?: Ref<FocusTrapRef>;
     visible: boolean;
     children: ReactNode | ((context: Context) => ReactNode);
     onPressClose?: () => void;
 };
-export declare const RightPanel: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<FocusTrapRef>>;
+export declare const RightPanel: ({ ref, visible, children, onPressClose }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/RightPanel.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { backgroundColor, breakpoints } from "../constants/design";
 import { useBodyClassName } from "../hooks/useBodyClassName";
@@ -97,11 +97,11 @@ const styles = StyleSheet.create({
     },
 });
 const rootNode = document.querySelector("#full-page-layer-root");
-export const RightPanel = forwardRef(({ visible, children, onPressClose }, ref) => {
+export const RightPanel = ({ ref, visible, children, onPressClose }) => {
     const [delayedVisible, setDelayedVisible] = useState(visible);
     useEffect(() => {
         setDelayedVisible(visible);
     }, [visible]);
     useBodyClassName("RightPanelOpen", { enabled: visible });
     return (_jsx(Portal, { container: rootNode, children: _jsx(View, { style: [styles.root, !visible && styles.inert], children: _jsx(ResponsiveContainer, { style: styles.root, breakpoint: breakpoints.small, children: ({ large }) => (_jsxs(_Fragment, { children: [_jsx(TransitionView, { style: styles.fill, enter: styles.overlayEnter, leave: styles.overlayLeave, children: visible ? (onPressClose != null ? (_jsx(Pressable, { style: styles.overlay, onPress: onPressClose })) : (_jsx(View, { style: styles.overlay }))) : null }), _jsx(Suspendable, { fallback: _jsx(LoadingView, { color: backgroundColor.accented, delay: 0 }), children: _jsx(TransitionView, { style: [styles.fillMax, large && styles.fillMaxLarge], enter: styles.containerEnter, leave: styles.containerLeave, children: delayedVisible ? (_jsx(FocusTrap, { onEscapeKey: onPressClose, focusLock: true, autoFocus: true, returnFocus: true, ref: ref, style: styles.container, children: _jsx(TransitionView, { style: styles.contentsContainer, enter: styles.contentsEnter, leave: styles.contentsLeave, children: _jsx(View, { style: styles.contents, children: _jsx(View, { style: styles.contentsContainer, children: typeof children === "function" ? (_jsx(ResponsiveContainer, { style: styles.root, breakpoint: breakpoints.small, children: children })) : (children) }) }) }) })) : null }) })] })) }) }) }));
-});
+};

package/src/components/ScrollView.d.ts

@@ -1,3 +1,4 @@
+import { Ref } from "react";
 import { NativeScrollEvent, NativeSyntheticEvent, StyleProp, ViewProps, ViewStyle } from "react-native";
 export type ScrollViewRef = {
     element: HTMLElement | null;
@@ -8,6 +9,7 @@ export type ScrollViewRef = {
     }) => void;
 };
 export type ScrollViewProps = ViewProps & {
+    ref?: Ref<ScrollViewRef>;
     contentContainerStyle?: StyleProp<ViewStyle>;
     horizontal?: boolean;
     both?: boolean;
@@ -15,11 +17,4 @@ export type ScrollViewProps = ViewProps & {
     scrollEventThrottle?: number;
     showsScrollIndicators?: boolean;
 };
-export declare const ScrollView: import("react").ForwardRefExoticComponent<ViewProps & {
-    contentContainerStyle?: StyleProp<ViewStyle>;
-    horizontal?: boolean;
-    both?: boolean;
-    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
-    scrollEventThrottle?: number;
-    showsScrollIndicators?: boolean;
-} & import("react").RefAttributes<ScrollViewRef>>;
+export declare const ScrollView: ({ ref, children, contentContainerStyle, horizontal, both, onScroll, scrollEventThrottle, showsScrollIndicators, style, ...viewProps }: ScrollViewProps) => import("react/jsx-runtime").JSX.Element;

package/src/components/ScrollView.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useImperativeHandle, useRef, } from "react";
+import { useCallback, useImperativeHandle, useRef } from "react";
 import { StyleSheet, View, } from "react-native";
 const styles = StyleSheet.create({
     base: {
@@ -60,7 +60,7 @@ const normalizeScrollEvent = (event) => {
     };
 };
 const shouldEmitScrollEvent = (state, eventThrottle) => !state.scrolling || (eventThrottle > 0 && Date.now() - state.lastTick >= eventThrottle);
-export const ScrollView = forwardRef(({ children, contentContainerStyle, horizontal = false, both = false, onScroll, scrollEventThrottle = 16, showsScrollIndicators = true, style, ...viewProps }, forwardedRef) => {
+export const ScrollView = ({ ref, children, contentContainerStyle, horizontal = false, both = false, onScroll, scrollEventThrottle = 16, showsScrollIndicators = true, style, ...viewProps }) => {
     const innerRef = useRef(null);
     const stateRef = useRef({ lastTick: 0, scrolling: false });
     const timeoutRef = useRef(null);
@@ -92,7 +92,7 @@ export const ScrollView = forwardRef(({ children, contentContainerStyle, horizon
             }
         }
     }, []);
-    useImperativeHandle(forwardedRef, () => ({
+    useImperativeHandle(ref, () => ({
         element: innerRef.current,
         scrollTo,
     }));
@@ -103,4 +103,4 @@ export const ScrollView = forwardRef(({ children, contentContainerStyle, horizon
             both && styles.both,
             !showsScrollIndicators && styles.hideScrollbars,
         ], children: _jsx(View, { style: [horizontal && styles.contentHorizontal, contentContainerStyle], children: children }) }));
-});
+};

package/src/components/SectionList.d.ts

@@ -1,4 +1,4 @@
-import { ForwardedRef, ReactNode } from "react";
+import { ReactNode, Ref } from "react";
 import { StyleProp, ViewStyle, WebRole } from "react-native";
 import { ListRenderItemInfo } from "./FlatList";
 import { ScrollViewProps, ScrollViewRef } from "./ScrollView";
@@ -8,6 +8,7 @@ type Section<T> = {
     data: T[];
 };
 type Props<T> = {
+    ref?: Ref<SectionListRef>;
     ItemSeparatorComponent?: ReactNode;
     ListEmptyComponent?: ReactNode;
     ListFooterComponent?: ReactNode;
@@ -27,8 +28,5 @@ type Props<T> = {
     showsScrollIndicators?: boolean;
     style?: StyleProp<ViewStyle>;
 };
-declare const SectionListWithRef: <T>({ ItemSeparatorComponent, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, contentContainerStyle, horizontal, keyExtractor, onEndReached, onEndReachedThresholdPx, onKeyDown, onScroll, renderItem, renderSectionHeader, role, scrollEventThrottle, sections, showsScrollIndicators, style, }: Props<T>, forwardedRef: ForwardedRef<SectionListRef>) => import("react/jsx-runtime").JSX.Element;
-export declare const SectionList: <T>(props: Props<T> & {
-    ref?: ForwardedRef<SectionListRef>;
-}) => ReturnType<typeof SectionListWithRef>;
+export declare const SectionList: <T>({ ref, ItemSeparatorComponent, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, contentContainerStyle, horizontal, keyExtractor, onEndReached, onEndReachedThresholdPx, onKeyDown, onScroll, renderItem, renderSectionHeader, role, scrollEventThrottle, sections, showsScrollIndicators, style, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/SectionList.js

@@ -1,5 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Fragment, forwardRef, useEffect, useId, useRef } from "react";
+import { Fragment, useEffect, useId, useRef } from "react";
 import { StyleSheet, View } from "react-native";
 import { ScrollView } from "./ScrollView";
 const styles = StyleSheet.create({
@@ -10,7 +10,7 @@ const styles = StyleSheet.create({
         bottom: 0,
     },
 });
-const SectionListWithRef = ({ ItemSeparatorComponent, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, contentContainerStyle, horizontal = false, keyExtractor, onEndReached, onEndReachedThresholdPx = 200, onKeyDown, onScroll, renderItem, renderSectionHeader, role, scrollEventThrottle = 16, sections, showsScrollIndicators = true, style, }, forwardedRef) => {
+export const SectionList = ({ ref, ItemSeparatorComponent, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, contentContainerStyle, horizontal = false, keyExtractor, onEndReached, onEndReachedThresholdPx = 200, onKeyDown, onScroll, renderItem, renderSectionHeader, role, scrollEventThrottle = 16, sections, showsScrollIndicators = true, style, }) => {
     const groupId = useId();
     const scrollTrackerRef = useRef(null);
     const scrollTrackerStyle = horizontal
@@ -35,8 +35,7 @@ const SectionListWithRef = ({ ItemSeparatorComponent, ListEmptyComponent, ListFo
         }
         // re-create an observer only on list length change
     }, [sections.length]);
-    return (_jsxs(ScrollView, { contentContainerStyle: contentContainerStyle, horizontal: horizontal, onKeyDown: onKeyDown, onScroll: onScroll, ref: forwardedRef, role: role, scrollEventThrottle: scrollEventThrottle, showsScrollIndicators: showsScrollIndicators, style: style, children: [ListHeaderComponent, sections.length <= 0
+    return (_jsxs(ScrollView, { contentContainerStyle: contentContainerStyle, horizontal: horizontal, onKeyDown: onKeyDown, onScroll: onScroll, ref: ref, role: role, scrollEventThrottle: scrollEventThrottle, showsScrollIndicators: showsScrollIndicators, style: style, children: [ListHeaderComponent, sections.length <= 0
                 ? ListEmptyComponent
                 : sections.map(section => (_jsxs(Fragment, { children: [renderSectionHeader === null || renderSectionHeader === void 0 ? void 0 : renderSectionHeader(section), section.data.map((item, index) => (_jsxs(Fragment, { children: [index !== 0 && ItemSeparatorComponent, renderItem({ item, index })] }, keyExtractor(item, index))))] }, `group-${groupId}-${section.title}`))), ListFooterComponent, _jsx(View, { role: "none", ref: scrollTrackerRef, style: [styles.scrollTracker, scrollTrackerStyle] })] }));
 };
-export const SectionList = forwardRef(SectionListWithRef);

package/src/components/Stack.d.ts

@@ -1,14 +1,10 @@
+import { Ref } from "react";
 import { View } from "react-native";
+import { BoxProps } from "./Box";
 import { SpacingValue } from "./Space";
-export declare const Stack: import("react").ForwardRefExoticComponent<import("react-native").ViewProps & {
-    alignItems?: "end" | "start" | "center" | "stretch" | "baseline";
-    children?: import("react").ReactNode;
-    direction?: "row" | "column" | "columnReverse" | "rowReverse";
-    justifyContent?: "end" | "start" | "normal" | "center" | "spaceBetween" | "spaceAround" | "spaceEvenly";
-    wrap?: "nowrap" | "wrap" | "wrapReverse";
-    grow?: number;
-    shrink?: number;
-    style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
-} & {
+type Props = BoxProps & {
+    ref?: Ref<View>;
     space?: SpacingValue;
-} & import("react").RefAttributes<View>>;
+};
+export declare const Stack: ({ ref, children, space, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/Stack.js

@@ -1,18 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, forwardRef, Fragment } from "react";
+import { Children, Fragment } from "react";
 import { isNullish } from "../utils/nullish";
 import { Box } from "./Box";
 import { Space } from "./Space";
-export const Stack = forwardRef(
-// Default <View /> styles https://github.com/necolas/react-native-web/blob/0.19.10/packages/react-native-web/src/exports/View/index.js#L146
-({ children, space, ...props }, forwardedRef) => {
+// Default <View /> styles https://github.com/necolas/react-native-web/blob/0.20.0/packages/react-native-web/src/exports/View/index.js#L149
+export const Stack = ({ ref, children, space, ...props }) => {
     const { direction = "column" } = props;
     const horizontal = direction === "row" || direction === "rowReverse";
-    return (_jsx(Box, { ref: forwardedRef, ...props, children: Children.map(children, (child, index) => {
+    return (_jsx(Box, { ref: ref, ...props, children: Children.map(children, (child, index) => {
             // null, undefined, true and false are valid children. They simply don’t render
             if (isNullish(child) || typeof child === "boolean") {
                 return child;
             }
             return (_jsxs(Fragment, { children: [index !== 0 && (horizontal ? _jsx(Space, { width: space }) : _jsx(Space, { height: space })), child] }));
         }) }));
-});
+};

package/src/components/Switch.d.ts

@@ -1,8 +1,10 @@
+import { Ref } from "react";
 import { View } from "react-native";
 type Props = {
+    ref?: Ref<View>;
     value: boolean;
     onValueChange?: (value: boolean) => void;
     disabled?: boolean;
 };
-export declare const Switch: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<View>>>;
+export declare const Switch: import("react").MemoExoticComponent<({ ref, value, disabled, onValueChange }: Props) => import("react/jsx-runtime").JSX.Element>;
 export {};

package/src/components/Switch.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, memo } from "react";
+import { memo } from "react";
 import { Pressable, StyleSheet, View } from "react-native";
 import { backgroundColor, colors, shadows } from "../constants/design";
 import { Icon } from "./Icon";
@@ -61,6 +61,4 @@ const styles = StyleSheet.create({
         transitionDuration: "250ms",
     },
 });
-export const Switch = memo(forwardRef(({ value, disabled = false, onValueChange }, ref) => {
-    return (_jsx(Pressable, { ref: ref, role: "switch", "aria-checked": value, disabled: disabled, onPress: () => onValueChange === null || onValueChange === void 0 ? void 0 : 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, { style: [styles.button, value && styles.buttonActive], children: _jsx(Icon, { color: colors.positive[400], name: "checkmark-filled", size: 10, style: [styles.icon, value && styles.opaque] }) }) })] })) }));
-}));
+export const Switch = memo(({ ref, value, disabled = false, onValueChange }) => (_jsx(Pressable, { ref: ref, role: "switch", "aria-checked": value, disabled: disabled, onPress: () => onValueChange === null || onValueChange === void 0 ? void 0 : 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, { style: [styles.button, value && styles.buttonActive], children: _jsx(Icon, { color: colors.positive[400], name: "checkmark-filled", size: 10, style: [styles.icon, value && styles.opaque] }) }) })] })) })));

package/src/components/TabView.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useLocation } from "@swan-io/chicane";
-import { Fragment, forwardRef, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, } from "react";
+import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, } from "react";
 import { StyleSheet, Text, View, } from "react-native";
 import { P, match } from "ts-pattern";
 import { animations, backgroundColor, colors, negativeSpacings, radii, shadows, spacings, texts, } from "../constants/design";
@@ -121,7 +121,7 @@ const styles = StyleSheet.create({
         top: -1,
     },
 });
-const TabViewLink = forwardRef(({ children, style, tab, onChange, activeTabId, onBlur, onFocus, onPress }, ref) => {
+const TabViewLink = ({ ref, children, style, tab, onChange, activeTabId, onBlur, onFocus, onPress, }) => {
     return match(tab)
         .with({ url: P.string }, ({ url }) => (_jsx(Link, { ref: ref, to: url, style: style, onFocus: onFocus, onBlur: onBlur, onPress: onPress, children: children })))
         .with({ id: P.string }, ({ id }) => {
@@ -132,7 +132,7 @@ const TabViewLink = forwardRef(({ children, style, tab, onChange, activeTabId, o
             }, onFocus: onFocus, onBlur: onBlur, children: children }));
     })
         .exhaustive();
-});
+};
 const Dropdown = ({ tabs, onHoverStart, onHoverEnd, onLinkFocus, onLinkBlur, onLinkPress, activeTabId, onChange, }) => {
     const containerRef = useRef(null);
     useHover(containerRef, {
@@ -151,7 +151,7 @@ const Dropdown = ({ tabs, onHoverStart, onHoverEnd, onLinkFocus, onLinkBlur, onL
 const SHOULD_AUTOFOCUS = new Set(["ForcedOpen", "OpenFromFocus"]);
 const SHOULD_OPEN = new Set(["Open", "ForcedOpen", "OpenFromFocus"]);
 const SHOULD_LOCK_FOCUS = new Set(["ForcedOpen"]);
-const DropdownItems = forwardRef(({ tabs, otherLabel, currentUrl, activeTabId, onChange }, ref) => {
+const DropdownItems = ({ ref, tabs, otherLabel, currentUrl, activeTabId, onChange, }) => {
     const [openingStatus, dispatch] = useReducer((state, action) => {
         return match([action, state])
             .returnType()
@@ -269,7 +269,7 @@ const DropdownItems = forwardRef(({ tabs, otherLabel, currentUrl, activeTabId, o
                     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, { onChange: onChange, activeTabId: activeTabId, tabs: tabs, onHoverStart: onHoverStart, onHoverEnd: onHoverEnd, onLinkFocus: onLinkFocus, onLinkBlur: onAnyBlur, onLinkPress: onEscapeKey }) })) : null })] }));
-});
+};
 const isTabActive = ({ tab, activeTabId, currentLocationURL }) => match(tab)
     .with({ url: P.string }, ({ url }) => currentLocationURL.startsWith(url))
     .with({ id: P.string }, ({ id }) => isNotNullish(activeTabId) && id === activeTabId)