@swan-io/lake 1.0.0

package/src/components/Pressable.d.ts

@@ -0,0 +1,348 @@
+import { FC, ReactNode, Ref } from "react";
+import { NativeSyntheticEvent, PressableProps, PressableStateCallbackType, Text, TextInput, 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, {
+    children?: ReactNode | ((state: PressableStateCallbackType) => ReactNode);
+    delayLongPress?: number;
+    delayPressIn?: number;
+    delayPressOut?: number;
+    disabled?: boolean;
+    focusable?: boolean;
+    onBlur?: (event: NativeSyntheticEvent<React.FocusEvent>) => void;
+    onContextMenu?: (event: NativeSyntheticEvent<React.SyntheticEvent>) => void;
+    onFocus?: (event: NativeSyntheticEvent<React.FocusEvent>) => void;
+    onHoverIn?: (event: unknown) => void;
+    onHoverOut?: (event: unknown) => void;
+    onKeyDown?: (event: NativeSyntheticEvent<React.KeyboardEvent>) => void;
+    onLayout?: BaseProps["onLayout"];
+    onLongPress?: PressResponderConfig["onLongPress"];
+    onPress?: PressResponderConfig["onPress"];
+    onPressIn?: PressResponderConfig["onPressStart"];
+    onPressMove?: PressResponderConfig["onPressMove"];
+    onPressOut?: PressResponderConfig["onPressEnd"];
+    style?: BaseProps["style"] | ((state: PressableStateCallbackType) => BaseProps["style"]);
+    /**
+     * Used only for documentation or testing (e.g. snapshot testing).
+     */
+    testOnly_hovered?: boolean;
+    testOnly_pressed?: boolean;
+}>;
+type ExtraProps = {
+    href?: string;
+    hrefAttrs?: {
+        download?: boolean;
+        rel?: string;
+        target?: string;
+    };
+};
+export type PressableViewProps = Except<Props<ViewProps>, "children">;
+export type PressableTextProps = Props<TextProps>;
+export type PressableTextInputProps = Except<Props<TextInputProps>, "children">;
+export declare const Pressable: FC<PressableProps & ExtraProps & {
+    ref?: Ref<View> | undefined;
+}>;
+export declare const PressableText: FC<{
+    testID?: string | undefined;
+    style?: false | import("react-native").TextStyle | import("react-native").RegisteredStyle<import("react-native").TextStyle> | import("react-native").RecursiveArray<import("react-native").TextStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<import("react-native").TextStyle>> | ((state: PressableStateCallbackType) => import("react-native").StyleProp<import("react-native").TextStyle>) | null | undefined;
+    children?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | import("react").ReactPortal | ((state: PressableStateCallbackType) => ReactNode) | null | undefined;
+    onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+    nativeID?: string | undefined;
+    accessibilityRole?: import("react-native").WebAccessibilityRole | undefined;
+    onKeyDown?: ((event: NativeSyntheticEvent<React.KeyboardEvent>) => void) | undefined;
+    focusable?: boolean | undefined;
+    accessible?: boolean | undefined;
+    accessibilityActions?: readonly Readonly<{
+        name: string;
+        label?: string | undefined;
+    }>[] | undefined;
+    accessibilityLabel?: string | undefined;
+    accessibilityState?: import("react-native").AccessibilityState | undefined;
+    accessibilityHint?: string | undefined;
+    accessibilityValue?: import("react-native").AccessibilityValue | undefined;
+    onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
+    accessibilityLabelledBy?: string | string[] | undefined;
+    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
+    importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
+    accessibilityElementsHidden?: boolean | undefined;
+    accessibilityLanguage?: string | undefined;
+    accessibilityViewIsModal?: boolean | undefined;
+    onAccessibilityEscape?: (() => void) | undefined;
+    onAccessibilityTap?: (() => void) | undefined;
+    onMagicTap?: (() => void) | undefined;
+    accessibilityIgnoresInvertColors?: boolean | undefined;
+    accessibilityActiveDescendant?: string | undefined;
+    accessibilityAtomic?: boolean | undefined;
+    accessibilityAutoComplete?: string | undefined;
+    accessibilityBusy?: boolean | undefined;
+    accessibilityChecked?: boolean | "mixed" | undefined;
+    accessibilityColumnCount?: number | undefined;
+    accessibilityColumnIndex?: number | undefined;
+    accessibilityColumnSpan?: number | undefined;
+    accessibilityControls?: string | undefined;
+    accessibilityCurrent?: boolean | "page" | "step" | "location" | "date" | "time" | undefined;
+    accessibilityDescribedBy?: string | undefined;
+    accessibilityDetails?: string | undefined;
+    accessibilityDisabled?: boolean | undefined;
+    accessibilityErrorMessage?: string | undefined;
+    accessibilityExpanded?: boolean | undefined;
+    accessibilityFlowTo?: string | undefined;
+    accessibilityHasPopup?: string | undefined;
+    accessibilityHidden?: boolean | undefined;
+    accessibilityInvalid?: boolean | undefined;
+    accessibilityKeyShortcuts?: string[] | undefined;
+    accessibilityLevel?: number | undefined;
+    accessibilityModal?: boolean | undefined;
+    accessibilityMultiSelectable?: boolean | undefined;
+    accessibilityMultiline?: boolean | undefined;
+    accessibilityOrientation?: "horizontal" | "vertical" | undefined;
+    accessibilityOwns?: string | undefined;
+    accessibilityPlaceholder?: string | undefined;
+    accessibilityPosInSet?: number | undefined;
+    accessibilityPressed?: boolean | undefined;
+    accessibilityReadOnly?: boolean | undefined;
+    accessibilityRequired?: boolean | undefined;
+    accessibilityRoleDescription?: string | undefined;
+    accessibilityRowCount?: number | undefined;
+    accessibilityRowIndex?: number | undefined;
+    accessibilityRowSpan?: number | undefined;
+    accessibilitySelected?: boolean | undefined;
+    accessibilitySetSize?: number | undefined;
+    accessibilitySort?: "none" | "ascending" | "descending" | "other" | undefined;
+    accessibilityValueMax?: number | undefined;
+    accessibilityValueMin?: number | undefined;
+    accessibilityValueNow?: number | undefined;
+    accessibilityValueText?: string | undefined;
+    allowFontScaling?: boolean | undefined;
+    ellipsizeMode?: "clip" | "head" | "middle" | "tail" | undefined;
+    lineBreakMode?: "clip" | "head" | "middle" | "tail" | undefined;
+    numberOfLines?: number | undefined;
+    onTextLayout?: ((event: NativeSyntheticEvent<import("react-native").TextLayoutEventData>) => void) | undefined;
+    onPress?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onPressIn?: ((event: unknown) => void) | undefined;
+    onPressOut?: ((event: unknown) => void) | undefined;
+    onLongPress?: ((event: unknown) => void) | undefined;
+    maxFontSizeMultiplier?: number | null | undefined;
+    href?: string | undefined;
+    hrefAttrs?: import("react-native").HrefAttrs | undefined;
+    lang?: string | undefined;
+    adjustsFontSizeToFit?: boolean | undefined;
+    minimumFontScale?: number | undefined;
+    suppressHighlighting?: boolean | undefined;
+    disabled?: boolean | undefined;
+    selectable?: boolean | undefined;
+    selectionColor?: import("react-native").ColorValue | undefined;
+    textBreakStrategy?: "simple" | "highQuality" | "balanced" | undefined;
+    dataDetectorType?: "none" | "all" | "link" | "phoneNumber" | "email" | null | undefined;
+    android_hyphenationFrequency?: "none" | "normal" | "full" | undefined;
+    onBlur?: ((event: NativeSyntheticEvent<React.FocusEvent>) => void) | undefined;
+    onFocus?: ((event: NativeSyntheticEvent<React.FocusEvent>) => void) | undefined;
+    onPressMove?: ((event: unknown) => void) | undefined;
+    delayLongPress?: number | undefined;
+    delayPressIn?: number | undefined;
+    delayPressOut?: number | undefined;
+    onContextMenu?: ((event: NativeSyntheticEvent<React.SyntheticEvent>) => void) | undefined;
+    onHoverIn?: ((event: unknown) => void) | undefined;
+    onHoverOut?: ((event: unknown) => void) | undefined;
+    testOnly_hovered?: boolean | undefined;
+    testOnly_pressed?: boolean | undefined;
+} & {
+    ref?: Ref<Text> | undefined;
+}>;
+export declare const PressableTextInput: FC<Except<{
+    textAlign?: "center" | "left" | "right" | undefined;
+    testID?: string | undefined;
+    textAlignVertical?: "auto" | "center" | "bottom" | "top" | undefined;
+    style?: false | import("react-native").TextStyle | import("react-native").RegisteredStyle<import("react-native").TextStyle> | import("react-native").RecursiveArray<import("react-native").TextStyle | import("react-native").Falsy | import("react-native").RegisteredStyle<import("react-native").TextStyle>> | ((state: PressableStateCallbackType) => import("react-native").StyleProp<import("react-native").TextStyle>) | null | undefined;
+    children?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactFragment | import("react").ReactPortal | ((state: PressableStateCallbackType) => ReactNode) | null | undefined;
+    hitSlop?: import("react-native").Insets | undefined;
+    onLayout?: ((event: import("react-native").LayoutChangeEvent) => void) | undefined;
+    pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
+    removeClippedSubviews?: boolean | undefined;
+    nativeID?: string | undefined;
+    accessibilityRole?: import("react-native").WebAccessibilityRole | undefined;
+    onKeyDown?: ((event: NativeSyntheticEvent<React.KeyboardEvent>) => void) | undefined;
+    onKeyDownCapture?: ((event: NativeSyntheticEvent<import("react").KeyboardEvent<Element>>) => void) | undefined;
+    onKeyUp?: ((event: NativeSyntheticEvent<import("react").KeyboardEvent<Element>>) => void) | undefined;
+    onKeyUpCapture?: ((event: NativeSyntheticEvent<import("react").KeyboardEvent<Element>>) => void) | undefined;
+    collapsable?: boolean | undefined;
+    needsOffscreenAlphaCompositing?: boolean | undefined;
+    renderToHardwareTextureAndroid?: boolean | undefined;
+    focusable?: boolean | undefined;
+    shouldRasterizeIOS?: boolean | undefined;
+    isTVSelectable?: boolean | undefined;
+    hasTVPreferredFocus?: boolean | undefined;
+    tvParallaxProperties?: import("react-native").TVParallaxProperties | undefined;
+    tvParallaxShiftDistanceX?: number | undefined;
+    tvParallaxShiftDistanceY?: number | undefined;
+    tvParallaxTiltAngle?: number | undefined;
+    tvParallaxMagnification?: number | undefined;
+    onStartShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onMoveShouldSetResponder?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onResponderEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderGrant?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderReject?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderRelease?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onResponderTerminationRequest?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onResponderTerminate?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onStartShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onMoveShouldSetResponderCapture?: ((event: import("react-native").GestureResponderEvent) => boolean) | undefined;
+    onTouchStart?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchMove?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchEnd?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchCancel?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onTouchEndCapture?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onPointerEnter?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerEnterCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerLeave?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerLeaveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerMove?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerMoveCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerCancel?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerCancelCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerDown?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerDownCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerUp?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    onPointerUpCapture?: ((event: import("react-native").PointerEvent) => void) | undefined;
+    accessible?: boolean | undefined;
+    accessibilityActions?: readonly Readonly<{
+        name: string;
+        label?: string | undefined;
+    }>[] | undefined;
+    accessibilityLabel?: string | undefined;
+    accessibilityState?: import("react-native").AccessibilityState | undefined;
+    accessibilityHint?: string | undefined;
+    accessibilityValue?: import("react-native").AccessibilityValue | undefined;
+    onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
+    accessibilityLabelledBy?: string | string[] | undefined;
+    accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
+    importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
+    accessibilityElementsHidden?: boolean | undefined;
+    accessibilityLanguage?: string | undefined;
+    accessibilityViewIsModal?: boolean | undefined;
+    onAccessibilityEscape?: (() => void) | undefined;
+    onAccessibilityTap?: (() => void) | undefined;
+    onMagicTap?: (() => void) | undefined;
+    accessibilityIgnoresInvertColors?: boolean | undefined;
+    accessibilityActiveDescendant?: string | undefined;
+    accessibilityAtomic?: boolean | undefined;
+    accessibilityAutoComplete?: string | undefined;
+    accessibilityBusy?: boolean | undefined;
+    accessibilityChecked?: boolean | "mixed" | undefined;
+    accessibilityColumnCount?: number | undefined;
+    accessibilityColumnIndex?: number | undefined;
+    accessibilityColumnSpan?: number | undefined;
+    accessibilityControls?: string | undefined;
+    accessibilityCurrent?: boolean | "page" | "step" | "location" | "date" | "time" | undefined;
+    accessibilityDescribedBy?: string | undefined;
+    accessibilityDetails?: string | undefined;
+    accessibilityDisabled?: boolean | undefined;
+    accessibilityErrorMessage?: string | undefined;
+    accessibilityExpanded?: boolean | undefined;
+    accessibilityFlowTo?: string | undefined;
+    accessibilityHasPopup?: string | undefined;
+    accessibilityHidden?: boolean | undefined;
+    accessibilityInvalid?: boolean | undefined;
+    accessibilityKeyShortcuts?: string[] | undefined;
+    accessibilityLevel?: number | undefined;
+    accessibilityModal?: boolean | undefined;
+    accessibilityMultiSelectable?: boolean | undefined;
+    accessibilityMultiline?: boolean | undefined;
+    accessibilityOrientation?: "horizontal" | "vertical" | undefined;
+    accessibilityOwns?: string | undefined;
+    accessibilityPlaceholder?: string | undefined;
+    accessibilityPosInSet?: number | undefined;
+    accessibilityPressed?: boolean | undefined;
+    accessibilityReadOnly?: boolean | undefined;
+    accessibilityRequired?: boolean | undefined;
+    accessibilityRoleDescription?: string | undefined;
+    accessibilityRowCount?: number | undefined;
+    accessibilityRowIndex?: number | undefined;
+    accessibilityRowSpan?: number | undefined;
+    accessibilitySelected?: boolean | undefined;
+    accessibilitySetSize?: number | undefined;
+    accessibilitySort?: "none" | "ascending" | "descending" | "other" | undefined;
+    accessibilityValueMax?: number | undefined;
+    accessibilityValueMin?: number | undefined;
+    accessibilityValueNow?: number | undefined;
+    accessibilityValueText?: string | undefined;
+    allowFontScaling?: boolean | undefined;
+    numberOfLines?: number | undefined;
+    onPress?: ((event: import("react-native").GestureResponderEvent) => void) | undefined;
+    onPressIn?: ((event: unknown) => void) | undefined;
+    onPressOut?: ((event: unknown) => void) | undefined;
+    onLongPress?: ((event: unknown) => void) | undefined;
+    maxFontSizeMultiplier?: number | null | undefined;
+    lang?: string | undefined;
+    disabled?: boolean | undefined;
+    selectionColor?: import("react-native").ColorValue | undefined;
+    textBreakStrategy?: "simple" | "highQuality" | "balanced" | undefined;
+    value?: string | undefined;
+    autoCapitalize?: "none" | "sentences" | "words" | "characters" | undefined;
+    autoCorrect?: boolean | undefined;
+    autoFocus?: boolean | undefined;
+    blurOnSubmit?: boolean | undefined;
+    caretHidden?: boolean | undefined;
+    contextMenuHidden?: boolean | undefined;
+    defaultValue?: string | undefined;
+    editable?: boolean | undefined;
+    keyboardType?: import("react-native").KeyboardTypeOptions | undefined;
+    maxLength?: number | undefined;
+    multiline?: boolean | undefined;
+    onBlur?: ((event: NativeSyntheticEvent<React.FocusEvent>) => void) | undefined;
+    onChange?: ((e: NativeSyntheticEvent<import("react-native").TextInputChangeEventData>) => void) | undefined;
+    onChangeText?: ((text: string) => void) | undefined;
+    onContentSizeChange?: ((e: NativeSyntheticEvent<import("react-native").TextInputContentSizeChangeEventData>) => void) | undefined;
+    onEndEditing?: ((e: NativeSyntheticEvent<import("react-native").TextInputEndEditingEventData>) => void) | undefined;
+    onFocus?: ((event: NativeSyntheticEvent<React.FocusEvent>) => void) | undefined;
+    onSelectionChange?: ((e: NativeSyntheticEvent<import("react-native").TextInputSelectionChangeEventData>) => void) | undefined;
+    onSubmitEditing?: ((e: NativeSyntheticEvent<import("react-native").TextInputSubmitEditingEventData>) => void) | undefined;
+    onTextInput?: ((e: NativeSyntheticEvent<import("react-native").TextInputTextInputEventData>) => void) | undefined;
+    onScroll?: ((e: NativeSyntheticEvent<import("react-native").TextInputScrollEventData>) => void) | undefined;
+    onKeyPress?: ((e: NativeSyntheticEvent<import("react-native").TextInputKeyPressEventData>) => void) | undefined;
+    placeholder?: string | undefined;
+    placeholderTextColor?: import("react-native").ColorValue | undefined;
+    returnKeyType?: import("react-native").ReturnKeyTypeOptions | undefined;
+    secureTextEntry?: boolean | undefined;
+    selectTextOnFocus?: boolean | undefined;
+    selection?: {
+        start: number;
+        end?: number | undefined;
+    } | undefined;
+    inputAccessoryViewID?: string | undefined;
+    initialValue?: string | undefined;
+    autoComplete?: "name" | "email" | "url" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday" | "bday-day" | "bday-month" | "bday-year" | "cc-additional-name" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "impp" | "language" | "new-password" | "nickname" | "off" | "on" | "one-time-code" | "organization" | "organization-title" | "postal-code" | "sex" | "street-address" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "transaction-amount" | "transaction-currency" | "username" | undefined;
+    clearButtonMode?: "never" | "while-editing" | "unless-editing" | "always" | undefined;
+    clearTextOnFocus?: boolean | undefined;
+    dataDetectorTypes?: import("react-native").DataDetectorTypes | import("react-native").DataDetectorTypes[] | undefined;
+    enablesReturnKeyAutomatically?: boolean | undefined;
+    keyboardAppearance?: "default" | "light" | "dark" | undefined;
+    passwordRules?: string | null | undefined;
+    rejectResponderTermination?: boolean | null | undefined;
+    selectionState?: import("react-native").DocumentSelectionState | undefined;
+    spellCheck?: boolean | undefined;
+    textContentType?: "none" | "location" | "name" | "nickname" | "username" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "emailAddress" | "familyName" | "fullStreetAddress" | "givenName" | "jobTitle" | "middleName" | "namePrefix" | "nameSuffix" | "organizationName" | "postalCode" | "streetAddressLine1" | "streetAddressLine2" | "sublocality" | "telephoneNumber" | "password" | "newPassword" | "oneTimeCode" | undefined;
+    scrollEnabled?: boolean | undefined;
+    cursorColor?: import("react-native").ColorValue | null | undefined;
+    importantForAutofill?: "auto" | "yes" | "no" | "noExcludeDescendants" | "yesExcludeDescendants" | undefined;
+    disableFullscreenUI?: boolean | undefined;
+    inlineImageLeft?: string | undefined;
+    inlineImagePadding?: number | undefined;
+    returnKeyLabel?: string | undefined;
+    underlineColorAndroid?: import("react-native").ColorValue | undefined;
+    showSoftInputOnFocus?: boolean | undefined;
+    onPressMove?: ((event: unknown) => void) | undefined;
+    delayLongPress?: number | undefined;
+    delayPressIn?: number | undefined;
+    delayPressOut?: number | undefined;
+    onContextMenu?: ((event: NativeSyntheticEvent<React.SyntheticEvent>) => void) | undefined;
+    onHoverIn?: ((event: unknown) => void) | undefined;
+    onHoverOut?: ((event: unknown) => void) | undefined;
+    testOnly_hovered?: boolean | undefined;
+    testOnly_pressed?: boolean | undefined;
+}, "children"> & {
+    ref?: Ref<TextInput> | undefined;
+}>;
+export {};

package/src/components/Pressable.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/exports/Pressable/index.js
+import { forwardRef, memo, useCallback, useMemo, useRef, } from "react";
+import { StyleSheet, Text, TextInput, View, } from "react-native";
+import { useForceableState } from "../hooks/useForceableState";
+import { useHover } from "../hooks/useHover";
+import { useMergeRefs } from "../hooks/useMergeRefs";
+import { usePressEvents } from "../hooks/usePressEvents";
+const styles = StyleSheet.create({
+    root: {
+        cursor: "pointer",
+        touchAction: "manipulation",
+    },
+});
+const getPressable = (
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+Component, config = {}) => {
+    const { applyPressStyle = true } = config;
+    return forwardRef((props, forwardedRef) => {
+        const { children, delayLongPress, delayPressIn, delayPressOut, disabled = false, focusable, onBlur, onContextMenu, onFocus, onHoverIn, onHoverOut, onKeyDown, onLongPress, onPress, onPressMove, onPressIn, onPressOut, style, 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 pressConfig = useMemo(() => ({
+            delayLongPress,
+            delayPressStart: delayPressIn,
+            delayPressEnd: delayPressOut,
+            disabled,
+            onLongPress,
+            onPress,
+            onPressChange: setPressed,
+            onPressStart: onPressIn,
+            onPressMove,
+            onPressEnd: onPressOut,
+        }), [
+            delayLongPress,
+            delayPressIn,
+            delayPressOut,
+            disabled,
+            onLongPress,
+            onPress,
+            onPressIn,
+            onPressMove,
+            onPressOut,
+            setPressed,
+        ]);
+        // @ts-expect-error
+        const pressEventHandlers = usePressEvents(hostRef, pressConfig);
+        const { onContextMenu: onContextMenuPress, onKeyDown: onKeyDownPress } = pressEventHandlers;
+        useHover(hostRef, {
+            // The following line has been commented out as we want to event to bubble up
+            // contain: true,
+            disabled,
+            onHoverChange: setHovered,
+            onHoverStart: onHoverIn,
+            onHoverEnd: onHoverOut,
+        });
+        const interactionState = { hovered, focused, pressed };
+        const blurHandler = useCallback((e) => {
+            if (e.nativeEvent.target === hostRef.current) {
+                setFocused(false);
+                onBlur?.(e);
+            }
+        }, [hostRef, setFocused, onBlur]);
+        const focusHandler = useCallback((e) => {
+            if (e.nativeEvent.target === hostRef.current) {
+                setFocused(true);
+                onFocus?.(e);
+            }
+        }, [hostRef, setFocused, onFocus]);
+        const contextMenuHandler = useCallback((e) => {
+            onContextMenuPress?.(e);
+            onContextMenu?.(e);
+        }, [onContextMenu, onContextMenuPress]);
+        const keyDownHandler = useCallback((e) => {
+            onKeyDownPress?.(e);
+            onKeyDown?.(e);
+        }, [onKeyDown, onKeyDownPress]);
+        return (_jsx(Component, { ...rest, ...pressEventHandlers, accessibilityDisabled: disabled, focusable: !disabled && focusable !== false, onBlur: blurHandler, onContextmenu: contextMenuHandler, onFocus: focusHandler, onKeyDown: keyDownHandler, ref: setRef, style: [
+                !disabled && applyPressStyle && styles.root,
+                typeof style === "function" ? style(interactionState) : style,
+            ], children: typeof children === "function" ? children(interactionState) : children }));
+    });
+};
+export const Pressable = memo(getPressable(View, { applyPressStyle: true }));
+export const PressableText = memo(getPressable(Text, { applyPressStyle: true }));
+export const PressableTextInput = memo(getPressable(TextInput, { applyPressStyle: false }));
+PressableText.displayName = "PressableText";
+PressableTextInput.displayName = "PressableTextInput";

package/src/components/ProgressBar.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+type Props = {
+    color: string;
+    label: string;
+    progressLabel: string;
+    minValue: number;
+    maxValue: number;
+    value: number;
+};
+export declare const ProgressBar: ({ color, label, progressLabel, minValue, maxValue, value }: Props) => JSX.Element;
+export {};

package/src/components/ProgressBar.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { StyleSheet, Text, View } from "react-native";
+import { colors } from "../constants/colors";
+import { typography } from "../constants/typography";
+import { useComputedColors } from "../hooks/useComputedColors";
+import { interpolate } from "../utils/math";
+import { Box } from "./Box";
+import { Fill } from "./Fill";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    label: {
+        ...typography.bodySmall,
+        lineHeight: typography.lineHeights.title,
+        color: colors.gray[50],
+    },
+    progressLabel: {
+        ...typography.bodySmall,
+        fontWeight: typography.fontWeights.demi,
+        color: colors.gray[100],
+        whiteSpace: "nowrap",
+    },
+    bar: {
+        height: 8,
+        borderRadius: 4,
+        backgroundColor: colors.gray[10],
+    },
+    progressBar: {
+        height: "100%",
+        borderRadius: 4,
+    },
+});
+export const ProgressBar = ({ color, label, progressLabel, minValue, maxValue, value }) => {
+    const computedColors = useComputedColors(color);
+    const labelId = `label-${useId()}`;
+    const percentage = interpolate({
+        inputRange: [minValue, maxValue],
+        outputRange: [0, 100],
+        clamp: true,
+    })(value);
+    const fillWidth = `${Math.round(percentage)}%`;
+    return (_jsxs(View, { accessibilityRole: "progressbar", accessibilityLabelledBy: labelId, accessibilityValueMin: minValue, accessibilityValueMax: maxValue, accessibilityValueNow: value, accessibilityValueText: progressLabel, children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(Text, { nativeID: labelId, style: styles.label, children: label }), _jsx(Fill, { minWidth: 16 }), _jsx(Text, { style: styles.progressLabel, children: progressLabel })] }), _jsx(Space, { height: 8 }), _jsx(View, { style: styles.bar, children: _jsx(View, { style: [
+                        styles.progressBar,
+                        { backgroundColor: computedColors.progress, width: fillWidth },
+                    ] }) })] }));
+};

package/src/components/ProjectEnvTag.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type Props = {
+    projectEnv: "Live" | "Sandbox";
+    iconOnly?: boolean;
+};
+export declare const ProjectEnvTag: (props: Props) => JSX.Element;
+export {};

package/src/components/ProjectEnvTag.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tag } from "@swan-io/lake/src/components/Tag";
+import { match } from "ts-pattern";
+import { Icon } from "./Icon";
+export const ProjectEnvTag = (props) => {
+    const isLive = props.projectEnv === "Live";
+    return (_jsx(Tag, { color: isLive ? "live" : "sandbox", children: match(props)
+            .with({ iconOnly: true, projectEnv: "Live" }, () => _jsx(Icon, { name: "live-regular", size: 20 }))
+            .with({ iconOnly: true, projectEnv: "Sandbox" }, () => (_jsx(Icon, { name: "beaker-regular", size: 20 })))
+            .with({ projectEnv: "Sandbox" }, { projectEnv: "Live" }, ({ projectEnv }) => projectEnv)
+            .exhaustive() }));
+};

package/src/components/QuickActions.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { IconName } from "./Icon";
+export type QuickAction = {
+    icon: IconName;
+    label: string;
+    onPress: () => void;
+    isLoading?: boolean;
+    backgroundColor?: string;
+    color?: string;
+};
+type Props = {
+    actions: QuickAction[];
+};
+export declare const QuickActions: ({ actions }: Props) => JSX.Element;
+export {};

package/src/components/QuickActions.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ActivityIndicator, StyleSheet, View } from "react-native";
+import { colors, spacings } from "../constants/design";
+import { Icon } from "./Icon";
+import { LakeText } from "./LakeText";
+import { Pressable } from "./Pressable";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        alignItems: "flex-start",
+        justifyContent: "center",
+    },
+    icon: {
+        borderColor: colors.gray[300],
+        borderWidth: 1,
+        borderStyle: "solid",
+        paddingHorizontal: spacings[24],
+        paddingVertical: spacings[12],
+        borderRadius: 32,
+    },
+    action: {
+        alignItems: "center",
+        paddingHorizontal: spacings[12],
+        flexBasis: "30%",
+    },
+    label: {
+        lineHeight: 16,
+    },
+});
+export const QuickActions = ({ actions }) => {
+    return (_jsx(View, { style: styles.container, children: actions.map((action, index) => (_jsxs(Pressable, { onPress: action.onPress, style: styles.action, disabled: action.isLoading === true, children: [_jsx(View, { style: [
+                        styles.icon,
+                        action.backgroundColor != null
+                            ? { backgroundColor: action.backgroundColor, borderColor: action.backgroundColor }
+                            : null,
+                    ], children: action.isLoading === true ? (_jsx(ActivityIndicator, { color: action.color ?? colors.gray[300], size: 16 })) : (_jsx(Icon, { name: action.icon, size: 16, color: action.color ?? colors.gray[300] })) }), _jsx(Space, { height: 8 }), _jsx(LakeText, { variant: "smallRegular", align: "center", style: styles.label, children: action.label })] }, index))) }));
+};

package/src/components/RadioGroup.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ColorVariants } from "../constants/design";
+export type RadioGroupItem<V> = {
+    name: string;
+    value: V;
+    disabled?: boolean;
+};
+export type RadioGroupProps<V> = {
+    items: RadioGroupItem<V>[];
+    direction?: "column" | "row";
+    color?: ColorVariants;
+    disabled?: boolean;
+    value?: V;
+    onValueChange: (value: V) => void;
+};
+export declare function RadioGroup<V>({ items, direction, color, disabled, value, onValueChange, }: RadioGroupProps<V>): JSX.Element;

package/src/components/RadioGroup.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { StyleSheet } from "react-native";
+import { colors } from "../constants/design";
+import { isNullish } from "../utils/nullish";
+import { Box } from "./Box";
+import { LakeRadio } from "./LakeRadio";
+import { LakeText } from "./LakeText";
+import { Pressable } from "./Pressable";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    container: {
+        flexWrap: "wrap",
+    },
+    item: {
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    rowItem: {
+        // use margin instead of <Space /> to avoid line starting with <Space /> because of flex-wrap
+        marginRight: 24,
+    },
+});
+export function RadioGroup({ items, direction = "column", color = "current", disabled = false, value, onValueChange, }) {
+    return (_jsx(Box, { direction: direction, style: styles.container, children: items.map((item, index) => {
+            const isLast = index === items.length - 1;
+            const isDisabled = disabled || !isNullish(item.disabled);
+            return (_jsxs(Fragment, { children: [_jsxs(Pressable, { disabled: isDisabled, onPress: () => {
+                            if (item.value !== value) {
+                                onValueChange(item.value);
+                            }
+                        }, style: [styles.item, direction === "row" && !isLast && styles.rowItem], children: [_jsx(LakeRadio, { disabled: isDisabled, color: color, value: item.value === value }), _jsx(Space, { width: 12 }), _jsx(LakeText, { color: isDisabled ? colors.gray[300] : colors.gray[900], children: item.name })] }), !isLast && _jsx(Space, { height: direction === "column" ? 12 : 32 })] }, index));
+        }) }));
+}

package/src/components/ReadOnlyFieldList.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+type Props = {
+    children: ReactNode;
+};
+export declare const ReadOnlyFieldList: ({ children }: Props) => JSX.Element;
+export {};

package/src/components/ReadOnlyFieldList.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Separator } from "@swan-io/lake/src/components/Separator";
+import { isNotNullish } from "@swan-io/lake/src/utils/nullish";
+import { Children } from "react";
+import { View } from "react-native";
+export const ReadOnlyFieldList = ({ children }) => (_jsx(_Fragment, { children: Children.toArray(children)
+        .filter(isNotNullish)
+        .map((node, index) => (_jsxs(View, { children: [index !== 0 && _jsx(Separator, { horizontal: false, space: 8 }), node] }, index))) }));