zkit-ui 1.0.0

package/dist/ui/Switch/index.js

@@ -0,0 +1,671 @@
+"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.Switch = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_reanimated_1 = __importStar(require("react-native-reanimated"));
+const zkit_tools_1 = require("zkit-tools");
+const useTheme_1 = require("../../theme/useTheme");
+const LoadingSpinner_1 = require("../LoadingSpinner");
+const Text_1 = require("../Text");
+const SEMANTIC_COLORS = {
+    danger: '#DC2626',
+    error: '#DC2626',
+    info: '#2563EB',
+    success: '#16A34A',
+    warn: '#D97706',
+    warning: '#D97706',
+};
+const SIZE_TOKENS = {
+    sm: {
+        width: 44,
+        height: 26,
+        thumbInset: 2,
+        labelGap: 10,
+        textInset: 4,
+        textSize: 11,
+        textLineHeight: 13,
+        textSlotMinWidth: 24,
+    },
+    md: {
+        width: 52,
+        height: 32,
+        thumbInset: 3,
+        labelGap: 12,
+        textInset: 5,
+        textSize: 12,
+        textLineHeight: 14,
+        textSlotMinWidth: 30,
+    },
+    lg: {
+        width: 64,
+        height: 38,
+        thumbInset: 3,
+        labelGap: 14,
+        textInset: 6,
+        textSize: 13,
+        textLineHeight: 16,
+        textSlotMinWidth: 36,
+    },
+};
+const PRESSED_OPACITY = 0.92;
+const STATE_TEXT_WIDTH_FACTOR = 0.58;
+const STATE_TEXT_WIDTH_GUARD_FACTOR = 0.25;
+const VALUE_TIMING_DURATION = 180;
+const PRESS_IN_DURATION = 90;
+const PRESS_OUT_DURATION = 140;
+const FOCUS_DURATION = 120;
+function resolveSwitchMetrics(size) {
+    var _a;
+    const token = (_a = SIZE_TOKENS[size]) !== null && _a !== void 0 ? _a : SIZE_TOKENS.md;
+    return {
+        width: (0, zkit_tools_1.wp)(token.width),
+        height: (0, zkit_tools_1.wp)(token.height),
+        thumbInset: (0, zkit_tools_1.wp)(token.thumbInset),
+        labelGap: (0, zkit_tools_1.wp)(token.labelGap),
+        textInset: (0, zkit_tools_1.wp)(token.textInset),
+        textSize: (0, zkit_tools_1.wp)(token.textSize),
+        textLineHeight: (0, zkit_tools_1.wp)(token.textLineHeight),
+        textSlotMinWidth: (0, zkit_tools_1.wp)(token.textSlotMinWidth),
+        minTouchTarget: (0, zkit_tools_1.wp)(44),
+        focusRingWidth: (0, zkit_tools_1.wp)(2),
+        focusRingOffset: (0, zkit_tools_1.wp)(3),
+    };
+}
+function isProcessableColor(color) {
+    return (0, react_native_1.processColor)(color) != null;
+}
+function colorToRgba(color, alpha) {
+    const processed = (0, react_native_1.processColor)(color);
+    if (typeof processed !== 'number')
+        return undefined;
+    const normalized = processed >>> 0;
+    const r = (normalized >> 16) & 255;
+    const g = (normalized >> 8) & 255;
+    const b = normalized & 255;
+    const a = Math.max(0, Math.min(1, alpha));
+    return `rgba(${r},${g},${b},${a})`;
+}
+function colorToChannels(color) {
+    const processed = (0, react_native_1.processColor)(color);
+    if (typeof processed !== 'number')
+        return undefined;
+    const normalized = processed >>> 0;
+    return {
+        r: (normalized >> 16) & 255,
+        g: (normalized >> 8) & 255,
+        b: normalized & 255,
+        a: ((normalized >> 24) & 255) / 255,
+    };
+}
+function overlayColor(foreground, background, opacity) {
+    const fg = colorToChannels(foreground);
+    const bg = colorToChannels(background);
+    if (!fg || !bg)
+        return undefined;
+    const fgAlpha = Math.max(0, Math.min(1, opacity)) * fg.a;
+    const bgAlpha = bg.a;
+    const alpha = fgAlpha + bgAlpha * (1 - fgAlpha);
+    if (alpha <= 0)
+        return 'rgba(0,0,0,0)';
+    const r = Math.round((fg.r * fgAlpha + bg.r * bgAlpha * (1 - fgAlpha)) / alpha);
+    const g = Math.round((fg.g * fgAlpha + bg.g * bgAlpha * (1 - fgAlpha)) / alpha);
+    const b = Math.round((fg.b * fgAlpha + bg.b * bgAlpha * (1 - fgAlpha)) / alpha);
+    return `rgba(${r},${g},${b},${Math.round(alpha * 1000) / 1000})`;
+}
+function resolveColorToken(input, fallback, theme) {
+    var _a;
+    if (input == null)
+        return fallback;
+    const key = input.trim();
+    if (!key)
+        return fallback;
+    const resolved = key === 'primary'
+        ? theme.colors.primary
+        : key === 'onPrimary'
+            ? theme.colors.onPrimary
+            : key === 'secondary' || key === 'neutral'
+                ? theme.colors.secondary
+                : key === 'onSecondary'
+                    ? theme.colors.onSecondary
+                    : key === 'surface'
+                        ? theme.colors.surface
+                        : key === 'onSurface'
+                            ? theme.colors.onSurface
+                            : key === 'border'
+                                ? theme.colors.border
+                                : key === 'muted'
+                                    ? theme.colors.muted
+                                    : key === 'disabled'
+                                        ? theme.colors.disabled
+                                        : (_a = SEMANTIC_COLORS[key]) !== null && _a !== void 0 ? _a : key;
+    return isProcessableColor(resolved) ? resolved : fallback;
+}
+function resolveTonePalette(tone, theme) {
+    if (tone === 'neutral') {
+        return {
+            checkedTrack: theme.colors.onSurface,
+            checkedText: theme.colors.surface,
+        };
+    }
+    if (tone === 'success') {
+        return {
+            checkedTrack: SEMANTIC_COLORS.success,
+            checkedText: '#FFFFFF',
+        };
+    }
+    if (tone === 'warning') {
+        return {
+            checkedTrack: SEMANTIC_COLORS.warning,
+            checkedText: '#111827',
+        };
+    }
+    if (tone === 'danger') {
+        return {
+            checkedTrack: SEMANTIC_COLORS.danger,
+            checkedText: '#FFFFFF',
+        };
+    }
+    if (tone === 'info') {
+        return {
+            checkedTrack: SEMANTIC_COLORS.info,
+            checkedText: '#FFFFFF',
+        };
+    }
+    return {
+        checkedTrack: theme.colors.primary,
+        checkedText: theme.colors.onPrimary,
+    };
+}
+function resolveUncheckedTrackFallback(scheme, theme) {
+    var _a;
+    if (scheme === 'dark')
+        return '#374151';
+    return (_a = colorToRgba(theme.colors.onSurface, 0.12)) !== null && _a !== void 0 ? _a : theme.colors.border;
+}
+function clampNumber(value, min, max) {
+    if (!Number.isFinite(value))
+        return min;
+    return Math.min(Math.max(value, min), max);
+}
+function resolvePositiveNumber(value, fallback) {
+    return typeof value === 'number' && Number.isFinite(value) && value > 0 ? value : fallback;
+}
+function resolveNonNegativeNumber(value, fallback) {
+    return typeof value === 'number' && Number.isFinite(value) && value >= 0 ? value : fallback;
+}
+function resolveDuration(duration) {
+    if (duration == null || !Number.isFinite(duration))
+        return VALUE_TIMING_DURATION;
+    return Math.max(0, duration);
+}
+function toTimingConfig(duration) {
+    return {
+        duration,
+        easing: react_native_reanimated_1.Easing.out(react_native_reanimated_1.Easing.cubic),
+        reduceMotion: react_native_reanimated_1.ReduceMotion.System,
+    };
+}
+function resolveHitSlop(width, height, minTouchTarget) {
+    const vertical = Math.max(0, (minTouchTarget - height) / 2);
+    const horizontal = Math.max(0, (minTouchTarget - width) / 2);
+    if (vertical === 0 && horizontal === 0)
+        return undefined;
+    return {
+        top: vertical,
+        bottom: vertical,
+        left: horizontal,
+        right: horizontal,
+    };
+}
+function resolveWebCursorStyle(disabled) {
+    if (react_native_1.Platform.OS !== 'web')
+        return undefined;
+    return { cursor: disabled ? 'not-allowed' : 'pointer' };
+}
+function isPrimitiveText(node) {
+    return typeof node === 'string' || typeof node === 'number';
+}
+function isRenderProp(children) {
+    return typeof children === 'function';
+}
+function getTextLength(text) {
+    return text == null ? 0 : Array.from(text).length;
+}
+function isWideGlyph(codePoint) {
+    return ((codePoint >= 0x1100 && codePoint <= 0x115f) ||
+        (codePoint >= 0x2329 && codePoint <= 0x232a) ||
+        (codePoint >= 0x2e80 && codePoint <= 0xa4cf) ||
+        (codePoint >= 0xac00 && codePoint <= 0xd7a3) ||
+        (codePoint >= 0xf900 && codePoint <= 0xfaff) ||
+        (codePoint >= 0xfe10 && codePoint <= 0xfe6f) ||
+        (codePoint >= 0xff00 && codePoint <= 0xff60) ||
+        (codePoint >= 0xffe0 && codePoint <= 0xffe6) ||
+        (codePoint >= 0x1f000 && codePoint <= 0x1faff));
+}
+function estimateStateTextWidth(text, fontSize) {
+    var _a;
+    const glyphs = Array.from(text !== null && text !== void 0 ? text : '');
+    if (glyphs.length === 0)
+        return 0;
+    let widthUnits = 0;
+    for (const glyph of glyphs) {
+        const codePoint = (_a = glyph.codePointAt(0)) !== null && _a !== void 0 ? _a : 0;
+        if (isWideGlyph(codePoint)) {
+            widthUnits += 1;
+        }
+        else if (/\s/.test(glyph)) {
+            widthUnits += 0.32;
+        }
+        else if (/[ilI.,'`|!]/.test(glyph)) {
+            widthUnits += 0.34;
+        }
+        else if (/[mwMW@#%&]/.test(glyph)) {
+            widthUnits += 0.82;
+        }
+        else if (/[A-Z0-9]/.test(glyph)) {
+            widthUnits += 0.62;
+        }
+        else {
+            widthUnits += 0.56;
+        }
+    }
+    return Math.max(getTextLength(text) * fontSize * STATE_TEXT_WIDTH_FACTOR, widthUnits * fontSize);
+}
+function SwitchImpl({ checked: checkedProp, defaultChecked = false, onCheckedChange, disabled = false, loading = false, loadingIndicator, size = 'md', tone = 'primary', duration, color, colors, layout, stateText, label, description, labelPlacement = 'start', children, style, contentStyle, trackStyle, thumbStyle, labelStyle, descriptionStyle, stateTextStyle, accessibilityLabel, accessibilityState, accessibilityValue, hitSlop, onPress, onPressIn, onPressOut, onFocus, onBlur, testID, ...pressableProps }, ref) {
+    var _a, _b, _c, _d, _e;
+    const theme = (0, useTheme_1.useTheme)();
+    const scheme = (0, react_native_1.useColorScheme)();
+    const { width: viewportWidth } = (0, react_native_1.useWindowDimensions)();
+    const isRTL = react_native_1.I18nManager.isRTL;
+    const isControlled = checkedProp !== undefined;
+    const [uncontrolledChecked, setUncontrolledChecked] = React.useState(() => defaultChecked);
+    const checked = isControlled ? checkedProp : uncontrolledChecked;
+    const checkedRef = React.useRef(checked);
+    checkedRef.current = checked;
+    const interactionDisabled = disabled || loading;
+    const interactive = !interactionDisabled;
+    const metrics = React.useMemo(() => resolveSwitchMetrics(size), [size, viewportWidth]);
+    const tonePalette = React.useMemo(() => resolveTonePalette(tone, theme), [theme, tone]);
+    const checkedTrackColor = React.useMemo(() => resolveColorToken(color !== null && color !== void 0 ? color : colors === null || colors === void 0 ? void 0 : colors.checkedTrack, tonePalette.checkedTrack, theme), [color, colors === null || colors === void 0 ? void 0 : colors.checkedTrack, theme, tonePalette.checkedTrack]);
+    const uncheckedTrackColor = React.useMemo(() => resolveColorToken(colors === null || colors === void 0 ? void 0 : colors.uncheckedTrack, resolveUncheckedTrackFallback(scheme, theme), theme), [colors === null || colors === void 0 ? void 0 : colors.uncheckedTrack, scheme, theme]);
+    const checkedThumbColor = React.useMemo(() => { var _a; return resolveColorToken((_a = colors === null || colors === void 0 ? void 0 : colors.checkedThumb) !== null && _a !== void 0 ? _a : colors === null || colors === void 0 ? void 0 : colors.thumb, theme.colors.surface, theme); }, [colors === null || colors === void 0 ? void 0 : colors.checkedThumb, colors === null || colors === void 0 ? void 0 : colors.thumb, theme]);
+    const uncheckedThumbColor = React.useMemo(() => { var _a; return resolveColorToken((_a = colors === null || colors === void 0 ? void 0 : colors.uncheckedThumb) !== null && _a !== void 0 ? _a : colors === null || colors === void 0 ? void 0 : colors.thumb, theme.colors.surface, theme); }, [colors === null || colors === void 0 ? void 0 : colors.thumb, colors === null || colors === void 0 ? void 0 : colors.uncheckedThumb, theme]);
+    const checkedTextColor = React.useMemo(() => resolveColorToken(colors === null || colors === void 0 ? void 0 : colors.checkedText, tonePalette.checkedText, theme), [colors === null || colors === void 0 ? void 0 : colors.checkedText, theme, tonePalette.checkedText]);
+    const uncheckedTextColor = React.useMemo(() => resolveColorToken(colors === null || colors === void 0 ? void 0 : colors.uncheckedText, scheme === 'dark' ? '#E5E7EB' : theme.colors.muted, theme), [colors === null || colors === void 0 ? void 0 : colors.uncheckedText, scheme, theme]);
+    const focusRingColor = React.useMemo(() => {
+        var _a;
+        return resolveColorToken(colors === null || colors === void 0 ? void 0 : colors.focusRing, (_a = colorToRgba(checkedTrackColor, scheme === 'dark' ? 0.36 : 0.28)) !== null && _a !== void 0 ? _a : checkedTrackColor, theme);
+    }, [checkedTrackColor, colors === null || colors === void 0 ? void 0 : colors.focusRing, scheme, theme]);
+    const disabledUncheckedTrackColor = React.useMemo(() => {
+        var _a;
+        return (_a = overlayColor(uncheckedTrackColor, theme.colors.surface, scheme === 'dark' ? 0.68 : 0.56)) !== null && _a !== void 0 ? _a : uncheckedTrackColor;
+    }, [scheme, theme.colors.surface, uncheckedTrackColor]);
+    const disabledCheckedTrackColor = React.useMemo(() => {
+        var _a;
+        return (_a = overlayColor(checkedTrackColor, theme.colors.surface, scheme === 'dark' ? 0.5 : 0.56)) !== null && _a !== void 0 ? _a : checkedTrackColor;
+    }, [checkedTrackColor, scheme, theme.colors.surface]);
+    const visualUncheckedTrackColor = disabled ? disabledUncheckedTrackColor : uncheckedTrackColor;
+    const visualCheckedTrackColor = disabled ? disabledCheckedTrackColor : checkedTrackColor;
+    const disabledUncheckedThumbColor = React.useMemo(() => {
+        var _a;
+        return (_a = overlayColor(uncheckedThumbColor, disabledUncheckedTrackColor, scheme === 'dark' ? 0.84 : 0.95)) !== null && _a !== void 0 ? _a : uncheckedThumbColor;
+    }, [disabledUncheckedTrackColor, scheme, uncheckedThumbColor]);
+    const disabledCheckedThumbColor = React.useMemo(() => {
+        var _a;
+        return (_a = overlayColor(checkedThumbColor, disabledCheckedTrackColor, scheme === 'dark' ? 0.84 : 0.92)) !== null && _a !== void 0 ? _a : checkedThumbColor;
+    }, [checkedThumbColor, disabledCheckedTrackColor, scheme]);
+    const visualUncheckedThumbColor = disabled ? disabledUncheckedThumbColor : uncheckedThumbColor;
+    const visualCheckedThumbColor = disabled ? disabledCheckedThumbColor : checkedThumbColor;
+    const visualCheckedTextColor = React.useMemo(() => {
+        var _a;
+        return disabled
+            ? (_a = overlayColor(checkedTextColor, disabledCheckedTrackColor, scheme === 'dark' ? 0.78 : 0.72)) !== null && _a !== void 0 ? _a : checkedTextColor
+            : checkedTextColor;
+    }, [checkedTextColor, disabled, disabledCheckedTrackColor, scheme]);
+    const visualUncheckedTextColor = React.useMemo(() => {
+        var _a;
+        return disabled
+            ? (_a = overlayColor(uncheckedTextColor, disabledUncheckedTrackColor, scheme === 'dark' ? 0.78 : 0.72)) !== null && _a !== void 0 ? _a : uncheckedTextColor
+            : uncheckedTextColor;
+    }, [disabled, disabledUncheckedTrackColor, scheme, uncheckedTextColor]);
+    const loadingColor = React.useMemo(() => resolveColorToken(colors === null || colors === void 0 ? void 0 : colors.loading, checked ? visualCheckedTrackColor : theme.colors.muted, theme), [checked, colors === null || colors === void 0 ? void 0 : colors.loading, theme, visualCheckedTrackColor]);
+    const thumbColorChanges = visualCheckedThumbColor !== visualUncheckedThumbColor;
+    const trackHeight = resolvePositiveNumber(layout === null || layout === void 0 ? void 0 : layout.height, metrics.height);
+    const baseTrackWidth = Math.max(trackHeight, resolvePositiveNumber(layout === null || layout === void 0 ? void 0 : layout.width, metrics.width));
+    const onePx = (0, zkit_tools_1.wp)(1);
+    const resolvedThumbInset = clampNumber(resolveNonNegativeNumber(layout === null || layout === void 0 ? void 0 : layout.thumbInset, metrics.thumbInset), 0, Math.max(0, (trackHeight - onePx) / 2));
+    const thumbSize = Math.max(onePx, trackHeight - resolvedThumbInset * 2);
+    const stateTextSize = resolvePositiveNumber(layout === null || layout === void 0 ? void 0 : layout.textSize, metrics.textSize);
+    const stateTextLineHeight = resolvePositiveNumber(layout === null || layout === void 0 ? void 0 : layout.textLineHeight, metrics.textLineHeight);
+    const stateTextInset = resolveNonNegativeNumber(layout === null || layout === void 0 ? void 0 : layout.textInset, metrics.textInset);
+    const labelGap = resolveNonNegativeNumber(layout === null || layout === void 0 ? void 0 : layout.labelGap, metrics.labelGap);
+    const hasStateText = (stateText === null || stateText === void 0 ? void 0 : stateText.checked) != null || (stateText === null || stateText === void 0 ? void 0 : stateText.unchecked) != null;
+    const maxStateTextWidth = Math.max(estimateStateTextWidth(stateText === null || stateText === void 0 ? void 0 : stateText.checked, stateTextSize), estimateStateTextWidth(stateText === null || stateText === void 0 ? void 0 : stateText.unchecked, stateTextSize));
+    const stateTextSlotWidth = hasStateText
+        ? Math.max(metrics.textSlotMinWidth, maxStateTextWidth + stateTextSize * STATE_TEXT_WIDTH_GUARD_FACTOR + stateTextInset * 2)
+        : 0;
+    const trackWidth = hasStateText
+        ? Math.max(baseTrackWidth, thumbSize + resolvedThumbInset + stateTextSlotWidth)
+        : baseTrackWidth;
+    const travel = Math.max(0, trackWidth - thumbSize - resolvedThumbInset * 2);
+    const thumbStart = isRTL ? trackWidth - thumbSize - resolvedThumbInset : resolvedThumbInset;
+    const travelDirection = isRTL ? -1 : 1;
+    const trackRadius = Math.max(0, (_a = layout === null || layout === void 0 ? void 0 : layout.radius) !== null && _a !== void 0 ? _a : trackHeight / 2);
+    const thumbRadius = thumbSize / 2;
+    const defaultHitSlop = React.useMemo(() => resolveHitSlop(trackWidth, trackHeight, metrics.minTouchTarget), [metrics.minTouchTarget, trackHeight, trackWidth]);
+    const thumbShadowStyle = React.useMemo(() => ({
+        shadowColor: '#000000',
+        shadowOffset: { width: 0, height: (0, zkit_tools_1.wp)(1) },
+        shadowOpacity: disabled ? 0 : scheme === 'dark' ? 0.28 : 0.14,
+        shadowRadius: disabled ? 0 : (0, zkit_tools_1.wp)(4),
+        elevation: disabled ? 0 : (0, zkit_tools_1.wp)(1),
+    }), [disabled, scheme]);
+    const webCursorStyle = React.useMemo(() => resolveWebCursorStyle(interactionDisabled), [interactionDisabled]);
+    const resolvedDuration = resolveDuration(duration);
+    const valueTiming = React.useMemo(() => toTimingConfig(resolvedDuration), [resolvedDuration]);
+    const pressInTiming = React.useMemo(() => toTimingConfig(PRESS_IN_DURATION), []);
+    const pressOutTiming = React.useMemo(() => toTimingConfig(PRESS_OUT_DURATION), []);
+    const focusTiming = React.useMemo(() => toTimingConfig(FOCUS_DURATION), []);
+    const progressSv = (0, react_native_reanimated_1.useSharedValue)(checked ? 1 : 0);
+    const pressSv = (0, react_native_reanimated_1.useSharedValue)(0);
+    const focusSv = (0, react_native_reanimated_1.useSharedValue)(0);
+    React.useEffect(() => {
+        if (!isControlled)
+            return;
+        progressSv.value = (0, react_native_reanimated_1.withTiming)(checked ? 1 : 0, valueTiming);
+    }, [checked, isControlled, progressSv, valueTiming]);
+    React.useEffect(() => {
+        if (interactive)
+            return;
+        pressSv.value = (0, react_native_reanimated_1.withTiming)(0, pressOutTiming);
+        focusSv.value = (0, react_native_reanimated_1.withTiming)(0, focusTiming);
+    }, [focusSv, focusTiming, interactive, pressOutTiming, pressSv]);
+    const commitChecked = React.useCallback((next) => {
+        if (!isControlled) {
+            checkedRef.current = next;
+            progressSv.value = (0, react_native_reanimated_1.withTiming)(next ? 1 : 0, valueTiming);
+            setUncontrolledChecked(next);
+        }
+        onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(next);
+    }, [isControlled, onCheckedChange, progressSv, valueTiming]);
+    const toggle = React.useCallback(() => {
+        if (interactionDisabled)
+            return;
+        commitChecked(!checkedRef.current);
+    }, [commitChecked, interactionDisabled]);
+    const handlePress = React.useCallback((event) => {
+        if (!interactionDisabled) {
+            commitChecked(!checkedRef.current);
+        }
+        onPress === null || onPress === void 0 ? void 0 : onPress(event);
+    }, [commitChecked, interactionDisabled, onPress]);
+    const handlePressIn = React.useCallback((event) => {
+        if (!interactionDisabled) {
+            pressSv.value = (0, react_native_reanimated_1.withTiming)(1, pressInTiming);
+        }
+        onPressIn === null || onPressIn === void 0 ? void 0 : onPressIn(event);
+    }, [interactionDisabled, onPressIn, pressInTiming, pressSv]);
+    const handlePressOut = React.useCallback((event) => {
+        pressSv.value = (0, react_native_reanimated_1.withTiming)(0, pressOutTiming);
+        onPressOut === null || onPressOut === void 0 ? void 0 : onPressOut(event);
+    }, [onPressOut, pressOutTiming, pressSv]);
+    const handleFocus = React.useCallback((event) => {
+        if (!interactionDisabled) {
+            focusSv.value = (0, react_native_reanimated_1.withTiming)(1, focusTiming);
+        }
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    }, [focusSv, focusTiming, interactionDisabled, onFocus]);
+    const handleBlur = React.useCallback((event) => {
+        focusSv.value = (0, react_native_reanimated_1.withTiming)(0, focusTiming);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }, [focusSv, focusTiming, onBlur]);
+    const visualAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const pressedOpacity = (0, react_native_reanimated_1.interpolate)(pressSv.value, [0, 1], [1, PRESSED_OPACITY]);
+        return { opacity: pressedOpacity };
+    });
+    const focusRingAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const opacity = (0, react_native_reanimated_1.interpolate)(focusSv.value, [0, 1], [0, 1]);
+        const scale = (0, react_native_reanimated_1.interpolate)(focusSv.value, [0, 1], [0.96, 1]);
+        return {
+            opacity,
+            transform: [{ scale }],
+        };
+    });
+    const checkedTrackAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        return { opacity: progressSv.value };
+    });
+    const thumbAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        if (!thumbColorChanges) {
+            return {
+                transform: [{ translateX: travel * travelDirection * progressSv.value }],
+            };
+        }
+        return {
+            backgroundColor: (0, react_native_reanimated_1.interpolateColor)(progressSv.value, [0, 1], [visualUncheckedThumbColor, visualCheckedThumbColor]),
+            transform: [{ translateX: travel * travelDirection * progressSv.value }],
+        };
+    }, [thumbColorChanges, travel, travelDirection, visualCheckedThumbColor, visualUncheckedThumbColor]);
+    const checkedTextAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        return { opacity: progressSv.value };
+    });
+    const uncheckedTextAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        return { opacity: 1 - progressSv.value };
+    });
+    const checkedTextSlotStyle = React.useMemo(() => isRTL
+        ? {
+            left: thumbSize + resolvedThumbInset,
+            right: 0,
+            paddingLeft: stateTextInset,
+            paddingRight: stateTextInset,
+        }
+        : {
+            left: 0,
+            right: thumbSize + resolvedThumbInset,
+            paddingLeft: stateTextInset,
+            paddingRight: stateTextInset,
+        }, [isRTL, resolvedThumbInset, stateTextInset, thumbSize]);
+    const uncheckedTextSlotStyle = React.useMemo(() => isRTL
+        ? {
+            left: 0,
+            right: thumbSize + resolvedThumbInset,
+            paddingLeft: stateTextInset,
+            paddingRight: stateTextInset,
+        }
+        : {
+            left: thumbSize + resolvedThumbInset,
+            right: 0,
+            paddingLeft: stateTextInset,
+            paddingRight: stateTextInset,
+        }, [isRTL, resolvedThumbInset, stateTextInset, thumbSize]);
+    const slot = React.useMemo(() => ({
+        checked,
+        disabled: interactionDisabled,
+        loading,
+        interactive,
+        size,
+        tone,
+        toggle,
+    }), [checked, interactionDisabled, interactive, loading, size, tone, toggle]);
+    const renderedContent = React.useMemo(() => {
+        if (isRenderProp(children))
+            return children(slot);
+        if (children != null)
+            return children;
+        if (label == null && description == null)
+            return null;
+        return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.copy, children: [label != null ? (isPrimitiveText(label) ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { disabled: interactionDisabled, numberOfLines: 1, variant: "label", style: labelStyle, children: label })) : (label)) : null, description != null ? (isPrimitiveText(description) ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { disabled: interactionDisabled, numberOfLines: 2, tone: interactionDisabled ? 'disabled' : 'muted', variant: "caption", style: descriptionStyle, children: description })) : (description)) : null] }));
+    }, [children, description, descriptionStyle, interactionDisabled, label, labelStyle, slot]);
+    const hasContent = renderedContent != null;
+    const inferredAccessibilityLabel = isPrimitiveText(label) ? String(label) : undefined;
+    const resolvedAccessibilityValue = accessibilityValue !== null && accessibilityValue !== void 0 ? accessibilityValue : (hasStateText
+        ? {
+            text: checked ? ((_b = stateText === null || stateText === void 0 ? void 0 : stateText.checked) !== null && _b !== void 0 ? _b : '') : ((_c = stateText === null || stateText === void 0 ? void 0 : stateText.unchecked) !== null && _c !== void 0 ? _c : ''),
+        }
+        : undefined);
+    const resolvedStyle = React.useCallback((state) => {
+        const userStyle = typeof style === 'function' ? style(state) : style;
+        return [styles.root, webCursorStyle, userStyle];
+    }, [style, webCursorStyle]);
+    const switchNode = ((0, jsx_runtime_1.jsxs)(react_native_reanimated_1.default.View, { style: [
+            styles.visual,
+            {
+                width: trackWidth,
+                height: trackHeight,
+                borderRadius: trackRadius,
+            },
+            visualAnimatedStyle,
+        ], children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: "none", style: [
+                    styles.focusRing,
+                    {
+                        top: -metrics.focusRingOffset,
+                        bottom: -metrics.focusRingOffset,
+                        left: -metrics.focusRingOffset,
+                        right: -metrics.focusRingOffset,
+                        borderWidth: metrics.focusRingWidth,
+                        borderRadius: trackRadius + metrics.focusRingOffset,
+                        borderColor: focusRingColor,
+                    },
+                    focusRingAnimatedStyle,
+                ] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                    react_native_1.StyleSheet.absoluteFillObject,
+                    {
+                        borderRadius: trackRadius,
+                        backgroundColor: visualUncheckedTrackColor,
+                    },
+                    trackStyle,
+                ] }), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { pointerEvents: "none", style: [
+                    react_native_1.StyleSheet.absoluteFillObject,
+                    {
+                        borderRadius: trackRadius,
+                        backgroundColor: visualCheckedTrackColor,
+                    },
+                    checkedTrackAnimatedStyle,
+                ] }), hasStateText ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { pointerEvents: "none", style: styles.stateTextLayer, children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.stateTextSlot, checkedTextSlotStyle, checkedTextAnimatedStyle], children: (0, jsx_runtime_1.jsx)(Text_1.Text, { allowFontScaling: false, ellipsizeMode: "clip", numberOfLines: 1, style: [
+                                styles.stateText,
+                                {
+                                    color: visualCheckedTextColor,
+                                    fontSize: stateTextSize,
+                                    lineHeight: stateTextLineHeight,
+                                },
+                                stateTextStyle,
+                            ], children: (_d = stateText === null || stateText === void 0 ? void 0 : stateText.checked) !== null && _d !== void 0 ? _d : '' }) }), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.stateTextSlot, uncheckedTextSlotStyle, uncheckedTextAnimatedStyle], children: (0, jsx_runtime_1.jsx)(Text_1.Text, { allowFontScaling: false, ellipsizeMode: "clip", numberOfLines: 1, style: [
+                                styles.stateText,
+                                {
+                                    color: visualUncheckedTextColor,
+                                    fontSize: stateTextSize,
+                                    lineHeight: stateTextLineHeight,
+                                },
+                                stateTextStyle,
+                            ], children: (_e = stateText === null || stateText === void 0 ? void 0 : stateText.unchecked) !== null && _e !== void 0 ? _e : '' }) })] })) : null, (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
+                    styles.thumb,
+                    {
+                        width: thumbSize,
+                        height: thumbSize,
+                        left: thumbStart,
+                        top: resolvedThumbInset,
+                        borderRadius: thumbRadius,
+                        backgroundColor: visualUncheckedThumbColor,
+                    },
+                    thumbAnimatedStyle,
+                    thumbShadowStyle,
+                    thumbStyle,
+                ], children: loading ? (loadingIndicator !== null && loadingIndicator !== void 0 ? loadingIndicator : ((0, jsx_runtime_1.jsx)(LoadingSpinner_1.LoadingSpinner, { size: Math.max((0, zkit_tools_1.wp)(12), thumbSize * 0.58), color: loadingColor }))) : null })] }));
+    const contentNode = hasContent ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+            styles.content,
+            contentStyle,
+        ], children: labelPlacement === 'start' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.contentSlot, { marginEnd: labelGap }], children: renderedContent }), switchNode] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [switchNode, (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.contentSlot, { marginStart: labelGap }], children: renderedContent })] })) })) : (switchNode);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { ...pressableProps, ref: ref, accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : inferredAccessibilityLabel, accessibilityRole: "switch", accessibilityState: {
+            ...accessibilityState,
+            checked,
+            disabled: Boolean(interactionDisabled),
+            busy: Boolean(loading || (accessibilityState === null || accessibilityState === void 0 ? void 0 : accessibilityState.busy)),
+        }, accessibilityValue: resolvedAccessibilityValue, disabled: interactionDisabled, hitSlop: hitSlop !== null && hitSlop !== void 0 ? hitSlop : defaultHitSlop, onBlur: handleBlur, onFocus: handleFocus, onPress: handlePress, onPressIn: handlePressIn, onPressOut: handlePressOut, style: resolvedStyle, testID: testID, children: contentNode }));
+}
+const SwitchWithRef = React.forwardRef(SwitchImpl);
+SwitchWithRef.displayName = 'Switch';
+exports.Switch = React.memo(SwitchWithRef);
+exports.Switch.displayName = 'Switch';
+const styles = react_native_1.StyleSheet.create({
+    root: {
+        alignSelf: 'flex-start',
+    },
+    content: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        minWidth: 0,
+    },
+    contentSlot: {
+        flexGrow: 1,
+        flexShrink: 1,
+        minWidth: 0,
+    },
+    copy: {
+        flexShrink: 1,
+        minWidth: 0,
+    },
+    visual: {
+        flexShrink: 0,
+        overflow: 'visible',
+    },
+    focusRing: {
+        position: 'absolute',
+    },
+    stateTextLayer: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    stateTextSlot: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+    },
+    stateText: {
+        includeFontPadding: false,
+        fontWeight: '600',
+        margin: 0,
+        padding: 0,
+        textAlign: 'center',
+    },
+    thumb: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'absolute',
+    },
+});