zkit-ui 1.0.0

package/dist/ui/SliderCaptcha/index.js

@@ -0,0 +1,586 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SliderCaptcha = SliderCaptcha;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const vector_icons_1 = require("@expo/vector-icons");
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const react_native_worklets_1 = require("react-native-worklets");
+const zkit_tools_1 = require("zkit-tools");
+const useI18n_1 = require("../../i18n/useI18n");
+const useTheme_1 = require("../../theme/useTheme");
+const Text_1 = require("../Text");
+const DEFAULT_CHALLENGE_WIDTH = 320;
+const DEFAULT_CHALLENGE_HEIGHT = 220;
+const DEFAULT_BLOCK_SIZE = 50;
+const DEFAULT_SUCCESS_DURATION = 500;
+const DEFAULT_ERROR_DURATION = 700;
+const DEFAULT_CARD_MAX_WIDTH = (0, zkit_tools_1.wp)(340);
+const CARD_HORIZONTAL_PADDING = (0, zkit_tools_1.wp)(24);
+const CANVAS_BORDER_WIDTH = (0, zkit_tools_1.wp)(1);
+const CAPTCHA_LAYER_Z_INDEX = 4000;
+const SLIDER_THUMB_SIZE = (0, zkit_tools_1.wp)(44);
+const CAPTCHA_ENTER_DURATION = 280;
+const CAPTCHA_EXIT_DURATION = 220;
+const CAPTCHA_CARD_OFFSET_Y = (0, zkit_tools_1.wp)(18);
+const CAPTCHA_ENTER_EASING = react_native_reanimated_1.Easing.bezier(0.22, 1, 0.36, 1);
+const CAPTCHA_EXIT_EASING = react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.cubic);
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+function normalizeImageUri(value) {
+    if (!value)
+        return '';
+    if (/^(data:|https?:\/\/|file:\/\/|content:\/\/|asset:|ph:)/.test(value)) {
+        return value;
+    }
+    return `data:image/png;base64,${value}`;
+}
+function parseVerifyResult(result) {
+    if (typeof result === 'object' && result !== null) {
+        return {
+            success: Boolean(result.success),
+            message: result.message,
+        };
+    }
+    if (typeof result === 'boolean') {
+        return { success: result };
+    }
+    return { success: true };
+}
+function getSafePositiveNumber(value, fallback) {
+    if (typeof value !== 'number' || !Number.isFinite(value) || value <= 0) {
+        return fallback;
+    }
+    return value;
+}
+const styles = react_native_1.StyleSheet.create({
+    modalRoot: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        zIndex: CAPTCHA_LAYER_Z_INDEX,
+        elevation: react_native_1.Platform.OS === 'android' ? CAPTCHA_LAYER_Z_INDEX : 0,
+    },
+    overlayBackdrop: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        backgroundColor: 'rgba(0,0,0,0.55)',
+    },
+    overlayPressable: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: (0, zkit_tools_1.wp)(20),
+    },
+    cardContainer: {
+        width: '100%',
+        alignItems: 'center',
+    },
+    card: {
+        width: '100%',
+        borderRadius: (0, zkit_tools_1.wp)(16),
+        paddingHorizontal: CARD_HORIZONTAL_PADDING,
+        paddingTop: (0, zkit_tools_1.wp)(18),
+        paddingBottom: (0, zkit_tools_1.wp)(20),
+        shadowOffset: { width: 0, height: (0, zkit_tools_1.wp)(10) },
+        shadowOpacity: 0.1,
+        shadowRadius: (0, zkit_tools_1.wp)(20),
+        elevation: 10,
+    },
+    titleRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: (0, zkit_tools_1.wp)(14),
+    },
+    title: {
+        fontSize: (0, zkit_tools_1.wp)(16),
+        fontWeight: '500',
+    },
+    headerActions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    headerActionButton: {
+        width: (0, zkit_tools_1.wp)(28),
+        height: (0, zkit_tools_1.wp)(28),
+        borderRadius: (0, zkit_tools_1.wp)(14),
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowOffset: { width: 0, height: (0, zkit_tools_1.wp)(2) },
+        shadowOpacity: 0.08,
+        shadowRadius: (0, zkit_tools_1.wp)(4),
+        elevation: 3,
+    },
+    headerActionSpacing: {
+        marginLeft: (0, zkit_tools_1.wp)(8),
+    },
+    canvasWrapper: {
+        width: '100%',
+        overflow: 'hidden',
+        alignSelf: 'center',
+        position: 'relative',
+        borderWidth: CANVAS_BORDER_WIDTH,
+        borderRadius: (0, zkit_tools_1.wp)(16),
+    },
+    canvasImage: {
+        width: '100%',
+        height: '100%',
+    },
+    block: {
+        position: 'absolute',
+        left: 0,
+    },
+    feedbackOverlay: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: (0, zkit_tools_1.wp)(36),
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 20,
+    },
+    feedbackError: {
+        backgroundColor: 'rgba(239, 68, 68, 0.9)',
+    },
+    feedbackSuccess: {
+        backgroundColor: 'rgba(34, 197, 94, 0.9)',
+    },
+    feedbackText: {
+        color: '#FFFFFF',
+        fontSize: (0, zkit_tools_1.wp)(14),
+        fontWeight: '600',
+        letterSpacing: 0.5,
+    },
+    placeholder: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    sliderTrack: {
+        marginTop: (0, zkit_tools_1.wp)(16),
+        marginBottom: (0, zkit_tools_1.wp)(4),
+        height: SLIDER_THUMB_SIZE,
+        borderRadius: SLIDER_THUMB_SIZE / 2,
+        overflow: 'hidden',
+        justifyContent: 'center',
+    },
+    sliderThumb: {
+        position: 'absolute',
+        left: 0,
+        width: SLIDER_THUMB_SIZE,
+        height: SLIDER_THUMB_SIZE,
+        borderRadius: SLIDER_THUMB_SIZE / 2,
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowOffset: { width: 0, height: (0, zkit_tools_1.wp)(2) },
+        shadowOpacity: 0.15,
+        shadowRadius: (0, zkit_tools_1.wp)(4),
+        elevation: 3,
+        borderWidth: (0, zkit_tools_1.wp)(0.5),
+    },
+});
+function SliderCaptcha({ visible, onClose, initialChallenge = null, loadChallenge, verifyChallenge, onVerified, onError, texts, dismissOnBackdropPress = true, reloadOnOpen = true, successFeedbackDuration = DEFAULT_SUCCESS_DURATION, errorFeedbackDuration = DEFAULT_ERROR_DURATION, maxCardWidth = DEFAULT_CARD_MAX_WIDTH, cardStyle, }) {
+    var _a, _b, _c;
+    const { t } = (0, useI18n_1.useI18n)();
+    const theme = (0, useTheme_1.useTheme)();
+    const [mounted, setMounted] = React.useState(visible);
+    const [challenge, setChallenge] = React.useState(null);
+    const [status, setStatus] = React.useState('idle');
+    const [feedbackMessage, setFeedbackMessage] = React.useState();
+    const [canvasLayoutWidth, setCanvasLayoutWidth] = React.useState(0);
+    const presentationProgress = (0, react_native_reanimated_1.useSharedValue)(0);
+    const thumbX = (0, react_native_reanimated_1.useSharedValue)(0);
+    const thumbXRef = React.useRef(0);
+    const thumbStartRef = React.useRef(0);
+    const visibleRef = React.useRef(visible);
+    const visibilityAnimationIdRef = React.useRef(0);
+    const loadRequestIdRef = React.useRef(0);
+    const verifyRequestIdRef = React.useRef(0);
+    const timeoutRef = React.useRef(null);
+    const animationFrameRefs = React.useRef([]);
+    const resolvedTexts = React.useMemo(() => {
+        var _a, _b, _c;
+        return ({
+            title: (_a = texts === null || texts === void 0 ? void 0 : texts.title) !== null && _a !== void 0 ? _a : t('sliderCaptcha.title'),
+            verifyFailed: (_b = texts === null || texts === void 0 ? void 0 : texts.verifyFailed) !== null && _b !== void 0 ? _b : t('sliderCaptcha.verifyFailed'),
+            verifySuccess: (_c = texts === null || texts === void 0 ? void 0 : texts.verifySuccess) !== null && _c !== void 0 ? _c : t('sliderCaptcha.verifySuccess'),
+        });
+    }, [t, texts === null || texts === void 0 ? void 0 : texts.title, texts === null || texts === void 0 ? void 0 : texts.verifyFailed, texts === null || texts === void 0 ? void 0 : texts.verifySuccess]);
+    const clearPendingTimeout = React.useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+    }, []);
+    const clearPendingAnimationFrames = React.useCallback(() => {
+        animationFrameRefs.current.forEach((frameId) => cancelAnimationFrame(frameId));
+        animationFrameRefs.current = [];
+    }, []);
+    const resetThumbPosition = React.useCallback(() => {
+        thumbX.value = 0;
+        thumbXRef.current = 0;
+        thumbStartRef.current = 0;
+    }, [thumbX]);
+    const resetCaptchaState = React.useCallback(() => {
+        setStatus('idle');
+        setFeedbackMessage(undefined);
+        setChallenge(null);
+        resetThumbPosition();
+    }, [resetThumbPosition]);
+    const originalWidth = getSafePositiveNumber(challenge === null || challenge === void 0 ? void 0 : challenge.originalWidth, DEFAULT_CHALLENGE_WIDTH);
+    const originalHeight = getSafePositiveNumber(challenge === null || challenge === void 0 ? void 0 : challenge.originalHeight, DEFAULT_CHALLENGE_HEIGHT);
+    const blockWidth = getSafePositiveNumber(challenge === null || challenge === void 0 ? void 0 : challenge.blockWidth, DEFAULT_BLOCK_SIZE);
+    const blockHeight = getSafePositiveNumber(challenge === null || challenge === void 0 ? void 0 : challenge.blockHeight, blockWidth);
+    const canvasOuterWidth = canvasLayoutWidth > 0
+        ? canvasLayoutWidth
+        : Math.max(maxCardWidth - CARD_HORIZONTAL_PADDING * 2, 0);
+    // Use the drawable content box for coordinate mapping; including the border
+    // here introduces the exact sub-pixel Y drift seen when the puzzle piece joins.
+    const canvasContentWidth = Math.max(canvasOuterWidth - CANVAS_BORDER_WIDTH * 2, 0);
+    const scale = canvasContentWidth > 0 ? canvasContentWidth / originalWidth : 0;
+    const displayHeight = Math.max((canvasContentWidth * originalHeight) / originalWidth, 0) + CANVAS_BORDER_WIDTH * 2;
+    const blockDisplayWidth = blockWidth * scale;
+    const blockDisplayHeight = blockHeight * scale;
+    const blockTop = Math.max(0, ((_a = challenge === null || challenge === void 0 ? void 0 : challenge.blockY) !== null && _a !== void 0 ? _a : 0) * scale);
+    const maxBlockOffset = Math.max(canvasContentWidth - blockDisplayWidth, 0);
+    const maxThumbOffset = Math.max(canvasOuterWidth - SLIDER_THUMB_SIZE, 0);
+    const blockTranslateRatio = maxThumbOffset > 0 ? maxBlockOffset / maxThumbOffset : 0;
+    const isBusy = status === 'loading' || status === 'verifying';
+    const canSlide = visible && Boolean(challenge) && !isBusy;
+    const backgroundImageUri = normalizeImageUri((_b = challenge === null || challenge === void 0 ? void 0 : challenge.backgroundImage) !== null && _b !== void 0 ? _b : '');
+    const blockImageUri = normalizeImageUri((_c = challenge === null || challenge === void 0 ? void 0 : challenge.blockImage) !== null && _c !== void 0 ? _c : '');
+    const requestChallenge = React.useCallback(async (reason) => {
+        if (!visibleRef.current)
+            return;
+        clearPendingTimeout();
+        if (reason === 'open') {
+            setChallenge(null);
+        }
+        setFeedbackMessage(undefined);
+        setStatus('loading');
+        const requestId = loadRequestIdRef.current + 1;
+        loadRequestIdRef.current = requestId;
+        try {
+            const nextChallenge = await loadChallenge({ reason });
+            if (!visibleRef.current || loadRequestIdRef.current !== requestId)
+                return;
+            setChallenge(nextChallenge);
+            resetThumbPosition();
+            setStatus('idle');
+        }
+        catch (error) {
+            if (!visibleRef.current || loadRequestIdRef.current !== requestId)
+                return;
+            setStatus('idle');
+            onError === null || onError === void 0 ? void 0 : onError(error, { stage: 'load', reason });
+        }
+    }, [clearPendingTimeout, loadChallenge, onError, resetThumbPosition]);
+    const verifyCurrentChallenge = React.useCallback(async () => {
+        var _a, _b;
+        if (!challenge || isBusy)
+            return;
+        clearPendingTimeout();
+        setFeedbackMessage(undefined);
+        setStatus('verifying');
+        const progress = maxThumbOffset > 0 ? thumbXRef.current / maxThumbOffset : 0;
+        const displayOffsetX = progress * maxBlockOffset;
+        const offsetX = scale > 0 ? Math.round(displayOffsetX / scale) : 0;
+        const payload = {
+            challenge,
+            offsetX,
+            offsetY: challenge.blockY,
+            displayOffsetX,
+            progress,
+            scale,
+        };
+        const requestId = verifyRequestIdRef.current + 1;
+        verifyRequestIdRef.current = requestId;
+        try {
+            const rawResult = await verifyChallenge(payload);
+            if (!visibleRef.current || verifyRequestIdRef.current !== requestId)
+                return;
+            const result = parseVerifyResult(rawResult);
+            if (result.success) {
+                setFeedbackMessage((_a = result.message) !== null && _a !== void 0 ? _a : resolvedTexts.verifySuccess);
+                setStatus('success');
+                timeoutRef.current = setTimeout(() => {
+                    if (!visibleRef.current || verifyRequestIdRef.current !== requestId)
+                        return;
+                    onVerified === null || onVerified === void 0 ? void 0 : onVerified(payload);
+                }, successFeedbackDuration);
+                return;
+            }
+            setFeedbackMessage((_b = result.message) !== null && _b !== void 0 ? _b : resolvedTexts.verifyFailed);
+            setStatus('error');
+            timeoutRef.current = setTimeout(() => {
+                if (!visibleRef.current || verifyRequestIdRef.current !== requestId)
+                    return;
+                void requestChallenge('retry');
+            }, errorFeedbackDuration);
+        }
+        catch (error) {
+            if (!visibleRef.current || verifyRequestIdRef.current !== requestId)
+                return;
+            setFeedbackMessage(resolvedTexts.verifyFailed);
+            setStatus('error');
+            onError === null || onError === void 0 ? void 0 : onError(error, { stage: 'verify', challenge });
+            timeoutRef.current = setTimeout(() => {
+                if (!visibleRef.current || verifyRequestIdRef.current !== requestId)
+                    return;
+                void requestChallenge('retry');
+            }, errorFeedbackDuration);
+        }
+    }, [
+        challenge,
+        clearPendingTimeout,
+        errorFeedbackDuration,
+        isBusy,
+        maxBlockOffset,
+        maxThumbOffset,
+        onError,
+        onVerified,
+        requestChallenge,
+        resolvedTexts.verifyFailed,
+        resolvedTexts.verifySuccess,
+        scale,
+        successFeedbackDuration,
+        verifyChallenge,
+    ]);
+    React.useEffect(() => {
+        visibleRef.current = visible;
+    }, [visible]);
+    const handleDismissAnimationFinished = React.useCallback((animationId) => {
+        if (animationId !== visibilityAnimationIdRef.current || visibleRef.current)
+            return;
+        setMounted(false);
+        resetCaptchaState();
+    }, [resetCaptchaState]);
+    React.useEffect(() => {
+        if (visible && !mounted) {
+            setMounted(true);
+        }
+    }, [mounted, visible]);
+    React.useEffect(() => {
+        if (!mounted)
+            return;
+        clearPendingAnimationFrames();
+        (0, react_native_reanimated_1.cancelAnimation)(presentationProgress);
+        const animationId = visibilityAnimationIdRef.current + 1;
+        visibilityAnimationIdRef.current = animationId;
+        if (visible) {
+            setStatus('idle');
+            setFeedbackMessage(undefined);
+            resetThumbPosition();
+            const frameId = requestAnimationFrame(() => {
+                const nestedFrameId = requestAnimationFrame(() => {
+                    if (visibilityAnimationIdRef.current !== animationId || !visibleRef.current)
+                        return;
+                    presentationProgress.value = (0, react_native_reanimated_1.withTiming)(1, {
+                        duration: CAPTCHA_ENTER_DURATION,
+                        easing: CAPTCHA_ENTER_EASING,
+                    });
+                });
+                animationFrameRefs.current.push(nestedFrameId);
+            });
+            animationFrameRefs.current.push(frameId);
+            if (initialChallenge) {
+                setChallenge(initialChallenge);
+            }
+            else if (reloadOnOpen || challenge === null) {
+                void requestChallenge('open');
+            }
+            return () => {
+                clearPendingAnimationFrames();
+            };
+        }
+        loadRequestIdRef.current += 1;
+        verifyRequestIdRef.current += 1;
+        clearPendingTimeout();
+        setStatus('idle');
+        setFeedbackMessage(undefined);
+        presentationProgress.value = (0, react_native_reanimated_1.withTiming)(0, {
+            duration: CAPTCHA_EXIT_DURATION,
+            easing: CAPTCHA_EXIT_EASING,
+        }, (finished) => {
+            if (finished) {
+                (0, react_native_worklets_1.scheduleOnRN)(handleDismissAnimationFinished, animationId);
+            }
+        });
+    }, [
+        challenge,
+        clearPendingAnimationFrames,
+        clearPendingTimeout,
+        handleDismissAnimationFinished,
+        initialChallenge,
+        mounted,
+        presentationProgress,
+        reloadOnOpen,
+        requestChallenge,
+        resetThumbPosition,
+        visible,
+    ]);
+    React.useEffect(() => () => {
+        clearPendingAnimationFrames();
+        clearPendingTimeout();
+        (0, react_native_reanimated_1.cancelAnimation)(presentationProgress);
+    }, [clearPendingAnimationFrames, clearPendingTimeout, presentationProgress]);
+    React.useEffect(() => {
+        if (!visible || react_native_1.Platform.OS !== 'android')
+            return;
+        const subscription = react_native_1.BackHandler.addEventListener('hardwareBackPress', () => {
+            onClose();
+            return true;
+        });
+        return () => subscription.remove();
+    }, [onClose, visible]);
+    const handleCanvasLayout = React.useCallback((event) => {
+        const nextWidth = event.nativeEvent.layout.width;
+        if (!Number.isFinite(nextWidth) || nextWidth <= 0)
+            return;
+        setCanvasLayoutWidth((currentWidth) => {
+            if (Math.abs(currentWidth - nextWidth) < 0.5) {
+                return currentWidth;
+            }
+            return nextWidth;
+        });
+    }, []);
+    const handleRefresh = React.useCallback(() => {
+        if (!visible || isBusy)
+            return;
+        void requestChallenge('refresh');
+    }, [isBusy, requestChallenge, visible]);
+    const handleBackdropPress = React.useCallback(() => {
+        if (!visible || !dismissOnBackdropPress)
+            return;
+        onClose();
+    }, [dismissOnBackdropPress, onClose, visible]);
+    const handleRequestClose = React.useCallback(() => {
+        if (!visible)
+            return;
+        onClose();
+    }, [onClose, visible]);
+    const backdropAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        opacity: presentationProgress.value,
+    }));
+    const cardAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const progress = presentationProgress.value;
+        return {
+            opacity: progress,
+            transform: [
+                { translateY: (1 - progress) * CAPTCHA_CARD_OFFSET_Y },
+                { scale: 0.96 + progress * 0.04 },
+            ],
+        };
+    });
+    const thumbAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        transform: [{ translateX: thumbX.value }],
+    }));
+    const blockAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        transform: [{ translateX: thumbX.value * blockTranslateRatio }],
+    }));
+    const panResponder = React.useMemo(() => react_native_1.PanResponder.create({
+        onStartShouldSetPanResponder: () => canSlide,
+        onMoveShouldSetPanResponder: () => canSlide,
+        onPanResponderGrant: () => {
+            thumbStartRef.current = thumbXRef.current;
+        },
+        onPanResponderMove: (_event, gestureState) => {
+            if (!canSlide)
+                return;
+            const next = clamp(thumbStartRef.current + gestureState.dx, 0, maxThumbOffset);
+            thumbX.value = next;
+            thumbXRef.current = next;
+        },
+        onPanResponderRelease: () => {
+            void verifyCurrentChallenge();
+        },
+    }), [canSlide, maxThumbOffset, thumbX, verifyCurrentChallenge]);
+    if (!mounted)
+        return null;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { pointerEvents: "box-none", style: styles.modalRoot, children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.overlayBackdrop, backdropAnimatedStyle] }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: styles.overlayPressable, onPress: handleBackdropPress, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.cardContainer, cardAnimatedStyle], collapsable: false, renderToHardwareTextureAndroid: react_native_1.Platform.OS === 'android', shouldRasterizeIOS: react_native_1.Platform.OS === 'ios', needsOffscreenAlphaCompositing: react_native_1.Platform.OS === 'android', children: (0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { style: [
+                            styles.card,
+                            {
+                                maxWidth: maxCardWidth,
+                                backgroundColor: theme.colors.surface,
+                                shadowColor: theme.colors.onSurface,
+                            },
+                            cardStyle,
+                        ], onPress: () => { }, collapsable: false, renderToHardwareTextureAndroid: react_native_1.Platform.OS === 'android', shouldRasterizeIOS: react_native_1.Platform.OS === 'ios', needsOffscreenAlphaCompositing: react_native_1.Platform.OS === 'android', children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.titleRow, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { style: [styles.title, { color: theme.colors.onSurface }], children: resolvedTexts.title }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.headerActions, children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: [
+                                                    styles.headerActionButton,
+                                                    {
+                                                        backgroundColor: theme.colors.surface,
+                                                        borderColor: theme.colors.border,
+                                                        borderWidth: (0, zkit_tools_1.wp)(0.5),
+                                                        shadowColor: theme.colors.onSurface,
+                                                    },
+                                                ], onPress: handleRefresh, disabled: !visible || isBusy, hitSlop: 10, children: isBusy ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: theme.colors.muted })) : ((0, jsx_runtime_1.jsx)(vector_icons_1.Feather, { name: "refresh-cw", size: (0, zkit_tools_1.wp)(16), color: theme.colors.muted })) }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: [
+                                                    styles.headerActionButton,
+                                                    styles.headerActionSpacing,
+                                                    {
+                                                        backgroundColor: theme.colors.secondary,
+                                                        shadowColor: theme.colors.onSurface,
+                                                    },
+                                                ], onPress: handleRequestClose, disabled: !visible, hitSlop: 10, children: (0, jsx_runtime_1.jsx)(vector_icons_1.Feather, { name: "x", size: (0, zkit_tools_1.wp)(18), color: theme.colors.muted }) })] })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                    styles.canvasWrapper,
+                                    {
+                                        height: displayHeight,
+                                        backgroundColor: theme.colors.secondary,
+                                        borderColor: theme.colors.border,
+                                    },
+                                ], onLayout: handleCanvasLayout, children: [backgroundImageUri ? ((0, jsx_runtime_1.jsx)(react_native_1.Image, { style: styles.canvasImage, resizeMode: "cover", source: { uri: backgroundImageUri } })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.canvasImage, styles.placeholder], children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: theme.colors.muted }) })), blockImageUri ? ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: "none", style: [
+                                            styles.block,
+                                            {
+                                                top: blockTop,
+                                                width: blockDisplayWidth,
+                                                height: blockDisplayHeight,
+                                            },
+                                            blockAnimatedStyle,
+                                        ], children: (0, jsx_runtime_1.jsx)(react_native_1.Image, { style: styles.canvasImage, resizeMode: "cover", source: { uri: blockImageUri } }) })) : null, (status === 'error' || status === 'success') && feedbackMessage ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                            styles.feedbackOverlay,
+                                            status === 'error' ? styles.feedbackError : styles.feedbackSuccess,
+                                        ], children: (0, jsx_runtime_1.jsx)(Text_1.Text, { style: styles.feedbackText, children: feedbackMessage }) })) : null] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                    styles.sliderTrack,
+                                    { backgroundColor: theme.colors.secondary, borderColor: theme.colors.border },
+                                ], ...panResponder.panHandlers, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
+                                        styles.sliderThumb,
+                                        thumbAnimatedStyle,
+                                        {
+                                            backgroundColor: theme.colors.primary,
+                                            borderColor: 'rgba(0,0,0,0.04)',
+                                            shadowColor: theme.colors.onSurface,
+                                        },
+                                    ], children: isBusy ? ((0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: "small", color: theme.colors.onPrimary })) : ((0, jsx_runtime_1.jsx)(vector_icons_1.Feather, { name: "arrow-right", size: (0, zkit_tools_1.wp)(20), color: theme.colors.onPrimary })) }) })] }) }) })] }));
+}

package/dist/ui/Switch/index.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { Pressable, View } from 'react-native';
+export type SwitchSize = 'sm' | 'md' | 'lg';
+export type SwitchTone = 'primary' | 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+export type SwitchLabelPlacement = 'start' | 'end';
+export type SwitchStateText = {
+    checked?: string;
+    unchecked?: string;
+};
+export type SwitchLayout = {
+    width?: number;
+    height?: number;
+    thumbInset?: number;
+    radius?: number;
+    labelGap?: number;
+    textInset?: number;
+    textSize?: number;
+    textLineHeight?: number;
+};
+export type SwitchColors = {
+    checkedTrack?: string;
+    uncheckedTrack?: string;
+    thumb?: string;
+    checkedThumb?: string;
+    uncheckedThumb?: string;
+    checkedText?: string;
+    uncheckedText?: string;
+    focusRing?: string;
+    loading?: string;
+};
+export type SwitchSlotProps = {
+    checked: boolean;
+    disabled: boolean;
+    loading: boolean;
+    interactive: boolean;
+    size: SwitchSize;
+    tone: SwitchTone;
+    toggle: () => void;
+};
+type NativePressableProps = Omit<React.ComponentPropsWithoutRef<typeof Pressable>, 'accessibilityRole' | 'accessibilityState' | 'children' | 'disabled' | 'style' | 'onChange'>;
+export type SwitchRef = React.ComponentRef<typeof Pressable>;
+export interface SwitchProps extends NativePressableProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    loading?: boolean;
+    loadingIndicator?: React.ReactNode;
+    size?: SwitchSize;
+    tone?: SwitchTone;
+    duration?: number;
+    color?: string;
+    colors?: SwitchColors;
+    layout?: SwitchLayout;
+    stateText?: SwitchStateText;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    labelPlacement?: SwitchLabelPlacement;
+    children?: React.ReactNode | ((slot: SwitchSlotProps) => React.ReactNode);
+    style?: React.ComponentPropsWithoutRef<typeof Pressable>['style'];
+    contentStyle?: StyleProp<ViewStyle>;
+    trackStyle?: StyleProp<ViewStyle>;
+    thumbStyle?: StyleProp<ViewStyle>;
+    labelStyle?: StyleProp<TextStyle>;
+    descriptionStyle?: StyleProp<TextStyle>;
+    stateTextStyle?: StyleProp<TextStyle>;
+    accessibilityState?: React.ComponentPropsWithoutRef<typeof Pressable>['accessibilityState'];
+}
+export declare const Switch: React.NamedExoticComponent<SwitchProps & React.RefAttributes<View>>;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/Switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Switch/index.tsx"],"names":[],"mappings":"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"}