zkit-ui 1.0.0

package/dist/ui/Checkbox/index.js

@@ -0,0 +1,694 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+exports.CheckboxIndicator = CheckboxIndicator;
+exports.CheckboxGroup = CheckboxGroup;
+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 check_svg_1 = __importDefault(require("../../assets/icons/check.svg"));
+const useTheme_1 = require("../../theme/useTheme");
+const Text_1 = require("../Text");
+const CheckboxIndicatorContext = React.createContext(null);
+const noopSubscribe = () => () => { };
+class CheckboxGroupStore {
+    constructor(initialValues) {
+        this.listeners = new Set();
+        this.subscribe = (listener) => {
+            this.listeners.add(listener);
+            return () => {
+                this.listeners.delete(listener);
+            };
+        };
+        this.has = (value) => this.values.has(value);
+        this.getToggledValues = (value) => {
+            const next = new Set(this.values);
+            if (next.has(value))
+                next.delete(value);
+            else
+                next.add(value);
+            return Array.from(next);
+        };
+        this.setValues = (values) => {
+            const next = new Set(values);
+            if (next.size === this.values.size) {
+                let same = true;
+                for (const value of next) {
+                    if (!this.values.has(value)) {
+                        same = false;
+                        break;
+                    }
+                }
+                if (same)
+                    return false;
+            }
+            this.values = next;
+            this.emit();
+            return true;
+        };
+        this.values = new Set(initialValues);
+    }
+    emit() {
+        for (const listener of this.listeners)
+            listener();
+    }
+}
+const CheckboxGroupContext = React.createContext(null);
+const SEMANTIC_COLORS = {
+    danger: '#DC2626',
+    error: '#DC2626',
+    info: '#2563EB',
+    success: '#16A34A',
+    warn: '#D97706',
+    warning: '#D97706',
+};
+const SIZE_TOKENS = {
+    sm: {
+        indicatorSize: 18,
+        indicatorRadius: 4,
+        indicatorBorderWidth: 1.5,
+        indicatorIconSize: 12,
+        gap: 8,
+    },
+    md: {
+        indicatorSize: 20,
+        indicatorRadius: 5,
+        indicatorBorderWidth: 1.5,
+        indicatorIconSize: 14,
+        gap: 10,
+    },
+    lg: {
+        indicatorSize: 24,
+        indicatorRadius: 6,
+        indicatorBorderWidth: 1.5,
+        indicatorIconSize: 16,
+        gap: 12,
+    },
+};
+const DISABLED_OPACITY = 0.48;
+const PRESSED_OPACITY = 0.86;
+const PRESSED_SCALE = 0.965;
+const VALUE_TIMING_DURATION = 170;
+const PRESS_IN_DURATION = 90;
+const PRESS_OUT_DURATION = 140;
+const FOCUS_DURATION = 120;
+function useCheckboxIndicatorContext() {
+    const context = React.useContext(CheckboxIndicatorContext);
+    if (!context) {
+        throw new Error('[zkit-ui] CheckboxIndicator must be rendered inside <Checkbox />.');
+    }
+    return context;
+}
+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 resolveColorToken(input, fallback, theme) {
+    var _a;
+    if (input == null)
+        return fallback;
+    const key = input.trim();
+    if (!key)
+        return fallback;
+    const resolved = key === 'default' || key === 'neutral' || key === 'onSurface'
+        ? theme.colors.onSurface
+        : key === 'primary'
+            ? theme.colors.primary
+            : key === 'onPrimary' || key === 'inverse'
+                ? theme.colors.onPrimary
+                : key === 'secondary'
+                    ? theme.colors.secondary
+                    : key === 'onSecondary'
+                        ? theme.colors.onSecondary
+                        : key === 'surface'
+                            ? theme.colors.surface
+                            : key === 'border'
+                                ? theme.colors.border
+                                : key === 'muted'
+                                    ? theme.colors.muted
+                                    : key === 'disabled' || key === 'subtle'
+                                        ? 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 {
+            accent: theme.colors.onSurface,
+            onAccent: theme.colors.surface,
+        };
+    }
+    if (tone === 'success') {
+        return {
+            accent: SEMANTIC_COLORS.success,
+            onAccent: '#FFFFFF',
+        };
+    }
+    if (tone === 'warning') {
+        return {
+            accent: SEMANTIC_COLORS.warning,
+            onAccent: '#FFFFFF',
+        };
+    }
+    if (tone === 'danger') {
+        return {
+            accent: SEMANTIC_COLORS.danger,
+            onAccent: '#FFFFFF',
+        };
+    }
+    if (tone === 'info') {
+        return {
+            accent: SEMANTIC_COLORS.info,
+            onAccent: '#FFFFFF',
+        };
+    }
+    return {
+        accent: theme.colors.primary,
+        onAccent: theme.colors.onPrimary,
+    };
+}
+function resolveVariantColors(variant, accent, onAccent, colors, theme, scheme) {
+    var _a, _b, _c;
+    const softAlpha = scheme === 'dark' ? 0.24 : 0.14;
+    const fallbackSoftBackground = (_a = colorToRgba(accent, softAlpha)) !== null && _a !== void 0 ? _a : theme.colors.secondary;
+    const fallbackUncheckedBorder = (_b = colorToRgba(theme.colors.onSurface, scheme === 'dark' ? 0.28 : 0.18)) !== null && _b !== void 0 ? _b : theme.colors.border;
+    const checkedBackground = variant === 'solid'
+        ? accent
+        : variant === 'soft'
+            ? fallbackSoftBackground
+            : theme.colors.surface;
+    const checkedIndicator = variant === 'solid' ? onAccent : accent;
+    const resolvedCheckedBackground = resolveColorToken(colors === null || colors === void 0 ? void 0 : colors.checkedBackground, checkedBackground, theme);
+    const resolvedCheckedBorder = resolveColorToken(colors === null || colors === void 0 ? void 0 : colors.checkedBorder, accent, theme);
+    const resolvedCheckedIndicator = resolveColorToken(colors === null || colors === void 0 ? void 0 : colors.checkedIndicator, checkedIndicator, theme);
+    return {
+        checkedBackground: resolvedCheckedBackground,
+        checkedBorder: resolvedCheckedBorder,
+        checkedIndicator: resolvedCheckedIndicator,
+        indeterminateBackground: resolveColorToken(colors === null || colors === void 0 ? void 0 : colors.indeterminateBackground, resolvedCheckedBackground, theme),
+        indeterminateBorder: resolveColorToken(colors === null || colors === void 0 ? void 0 : colors.indeterminateBorder, resolvedCheckedBorder, theme),
+        indeterminateIndicator: resolveColorToken(colors === null || colors === void 0 ? void 0 : colors.indeterminateIndicator, resolvedCheckedIndicator, theme),
+        uncheckedBackground: resolveColorToken(colors === null || colors === void 0 ? void 0 : colors.uncheckedBackground, theme.colors.surface, theme),
+        uncheckedBorder: resolveColorToken(colors === null || colors === void 0 ? void 0 : colors.uncheckedBorder, fallbackUncheckedBorder, theme),
+        focusRing: resolveColorToken(colors === null || colors === void 0 ? void 0 : colors.focusRing, (_c = colorToRgba(accent, scheme === 'dark' ? 0.36 : 0.28)) !== null && _c !== void 0 ? _c : accent, theme),
+    };
+}
+function resolveCheckboxMetrics(size, shape, layout) {
+    var _a;
+    const token = (_a = SIZE_TOKENS[size]) !== null && _a !== void 0 ? _a : SIZE_TOKENS.md;
+    const indicatorSize = resolvePositiveNumber(layout === null || layout === void 0 ? void 0 : layout.indicatorSize, (0, zkit_tools_1.wp)(token.indicatorSize));
+    const fallbackRadius = shape === 'circle' ? indicatorSize / 2 : shape === 'square' ? 0 : (0, zkit_tools_1.wp)(token.indicatorRadius);
+    return {
+        indicatorSize,
+        indicatorRadius: resolveNonNegativeNumber(layout === null || layout === void 0 ? void 0 : layout.indicatorRadius, fallbackRadius),
+        indicatorBorderWidth: resolvePositiveNumber(layout === null || layout === void 0 ? void 0 : layout.indicatorBorderWidth, (0, zkit_tools_1.wp)(token.indicatorBorderWidth)),
+        indicatorIconSize: resolvePositiveNumber(layout === null || layout === void 0 ? void 0 : layout.indicatorIconSize, (0, zkit_tools_1.wp)(token.indicatorIconSize)),
+        gap: resolveNonNegativeNumber(layout === null || layout === void 0 ? void 0 : layout.gap, (0, zkit_tools_1.wp)(token.gap)),
+        minTouchTarget: resolvePositiveNumber(layout === null || layout === void 0 ? void 0 : layout.minTouchTarget, (0, zkit_tools_1.wp)(44)),
+        focusRingWidth: resolvePositiveNumber(layout === null || layout === void 0 ? void 0 : layout.focusRingWidth, (0, zkit_tools_1.wp)(2)),
+        focusRingOffset: resolveNonNegativeNumber(layout === null || layout === void 0 ? void 0 : layout.focusRingOffset, (0, zkit_tools_1.wp)(3)),
+    };
+}
+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 isIndicatorRenderProp(indicator) {
+    return typeof indicator === 'function';
+}
+function getNextCheckedState(current) {
+    if (current === 'indeterminate')
+        return true;
+    return !current;
+}
+function resolveAlignItems(align) {
+    if (align === 'center')
+        return 'center';
+    if (align === 'end')
+        return 'flex-end';
+    if (align === 'stretch')
+        return 'stretch';
+    return 'flex-start';
+}
+function CheckboxImpl({ value, checked: checkedProp, defaultChecked = false, onChange, disabled = false, size: sizeProp, tone: toneProp, variant: variantProp, shape: shapeProp, duration, color: colorProp, colors: colorsProp, layout: layoutProp, label, description, labelPlacement = 'end', children, showIndicator = true, indicator, style, contentStyle, indicatorStyle, labelStyle, descriptionStyle, accessibilityLabel, accessibilityState, 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 group = React.useContext(CheckboxGroupContext);
+    const isRTL = react_native_1.I18nManager.isRTL;
+    const isStandaloneControlled = checkedProp !== undefined;
+    const isGroupItem = group != null && value !== undefined && !isStandaloneControlled;
+    const [uncontrolledChecked, setUncontrolledChecked] = React.useState(() => defaultChecked);
+    const getGroupCheckedSnapshot = React.useCallback(() => (group && value !== undefined ? group.store.has(value) : false), [group, value]);
+    const groupChecked = React.useSyncExternalStore((_a = group === null || group === void 0 ? void 0 : group.store.subscribe) !== null && _a !== void 0 ? _a : noopSubscribe, getGroupCheckedSnapshot, getGroupCheckedSnapshot);
+    const state = isGroupItem
+        ? groupChecked
+        : isStandaloneControlled
+            ? checkedProp
+            : uncontrolledChecked;
+    const checked = state === true;
+    const indeterminate = state === 'indeterminate';
+    const active = state !== false;
+    const resolvedDisabled = disabled || Boolean(group === null || group === void 0 ? void 0 : group.disabled);
+    const interactive = !resolvedDisabled;
+    const size = (_b = sizeProp !== null && sizeProp !== void 0 ? sizeProp : group === null || group === void 0 ? void 0 : group.size) !== null && _b !== void 0 ? _b : 'md';
+    const tone = (_c = toneProp !== null && toneProp !== void 0 ? toneProp : group === null || group === void 0 ? void 0 : group.tone) !== null && _c !== void 0 ? _c : 'primary';
+    const variant = (_d = variantProp !== null && variantProp !== void 0 ? variantProp : group === null || group === void 0 ? void 0 : group.variant) !== null && _d !== void 0 ? _d : 'solid';
+    const shape = (_e = shapeProp !== null && shapeProp !== void 0 ? shapeProp : group === null || group === void 0 ? void 0 : group.shape) !== null && _e !== void 0 ? _e : 'rounded';
+    const color = colorProp !== null && colorProp !== void 0 ? colorProp : group === null || group === void 0 ? void 0 : group.color;
+    const colors = React.useMemo(() => (group === null || group === void 0 ? void 0 : group.colors) || colorsProp
+        ? {
+            ...group === null || group === void 0 ? void 0 : group.colors,
+            ...colorsProp,
+        }
+        : undefined, [colorsProp, group === null || group === void 0 ? void 0 : group.colors]);
+    const layout = React.useMemo(() => (group === null || group === void 0 ? void 0 : group.layout) || layoutProp
+        ? {
+            ...group === null || group === void 0 ? void 0 : group.layout,
+            ...layoutProp,
+        }
+        : undefined, [group === null || group === void 0 ? void 0 : group.layout, layoutProp]);
+    const metrics = React.useMemo(() => resolveCheckboxMetrics(size, shape, layout), [layout, shape, size, viewportWidth]);
+    const tonePalette = React.useMemo(() => resolveTonePalette(tone, theme), [theme, tone]);
+    const accent = React.useMemo(() => resolveColorToken(color, tonePalette.accent, theme), [color, theme, tonePalette.accent]);
+    const resolvedColors = React.useMemo(() => resolveVariantColors(variant, accent, tonePalette.onAccent, colors, theme, scheme), [accent, colors, scheme, theme, tonePalette.onAccent, variant]);
+    const webCursorStyle = React.useMemo(() => resolveWebCursorStyle(resolvedDisabled), [resolvedDisabled]);
+    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 defaultHitSlop = React.useMemo(() => resolveHitSlop(metrics.indicatorSize, metrics.indicatorSize, metrics.minTouchTarget), [metrics.indicatorSize, metrics.minTouchTarget]);
+    const checkedSv = (0, react_native_reanimated_1.useSharedValue)(active ? 1 : 0);
+    const indeterminateSv = (0, react_native_reanimated_1.useSharedValue)(indeterminate ? 1 : 0);
+    const pressSv = (0, react_native_reanimated_1.useSharedValue)(0);
+    const focusSv = (0, react_native_reanimated_1.useSharedValue)(0);
+    const stateRef = React.useRef(state);
+    stateRef.current = state;
+    const groupCheckedRef = React.useRef(groupChecked);
+    groupCheckedRef.current = groupChecked;
+    React.useEffect(() => {
+        if (!isStandaloneControlled && !isGroupItem)
+            return;
+        checkedSv.value = (0, react_native_reanimated_1.withTiming)(active ? 1 : 0, valueTiming);
+        indeterminateSv.value = (0, react_native_reanimated_1.withTiming)(indeterminate ? 1 : 0, valueTiming);
+    }, [
+        active,
+        checkedSv,
+        indeterminate,
+        indeterminateSv,
+        isGroupItem,
+        isStandaloneControlled,
+        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 commitStandaloneState = React.useCallback((next) => {
+        if (!isStandaloneControlled) {
+            stateRef.current = next;
+            checkedSv.value = (0, react_native_reanimated_1.withTiming)(next !== false ? 1 : 0, valueTiming);
+            indeterminateSv.value = (0, react_native_reanimated_1.withTiming)(next === 'indeterminate' ? 1 : 0, valueTiming);
+            setUncontrolledChecked(next);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    }, [checkedSv, indeterminateSv, isStandaloneControlled, onChange, valueTiming]);
+    const toggle = React.useCallback(() => {
+        if (!interactive)
+            return;
+        if (isGroupItem && group && value !== undefined) {
+            const next = !groupCheckedRef.current;
+            if (!group.isControlled) {
+                checkedSv.value = (0, react_native_reanimated_1.withTiming)(next ? 1 : 0, valueTiming);
+                indeterminateSv.value = (0, react_native_reanimated_1.withTiming)(0, valueTiming);
+            }
+            group.toggleValue(value);
+            onChange === null || onChange === void 0 ? void 0 : onChange(next);
+            return;
+        }
+        commitStandaloneState(getNextCheckedState(stateRef.current));
+    }, [
+        checkedSv,
+        commitStandaloneState,
+        group,
+        indeterminateSv,
+        interactive,
+        isGroupItem,
+        onChange,
+        value,
+        valueTiming,
+    ]);
+    const handlePress = React.useCallback((event) => {
+        if (interactive)
+            toggle();
+        onPress === null || onPress === void 0 ? void 0 : onPress(event);
+    }, [interactive, onPress, toggle]);
+    const handlePressIn = React.useCallback((event) => {
+        if (interactive) {
+            pressSv.value = (0, react_native_reanimated_1.withTiming)(1, pressInTiming);
+        }
+        onPressIn === null || onPressIn === void 0 ? void 0 : onPressIn(event);
+    }, [interactive, 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 (interactive) {
+            focusSv.value = (0, react_native_reanimated_1.withTiming)(1, focusTiming);
+        }
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    }, [focusSv, focusTiming, interactive, 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 slot = React.useMemo(() => ({
+        checked,
+        indeterminate,
+        state,
+        value,
+        disabled: resolvedDisabled,
+        interactive,
+        size,
+        tone,
+        variant,
+        toggle,
+    }), [checked, indeterminate, interactive, resolvedDisabled, size, state, tone, toggle, value, variant]);
+    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, { numberOfLines: 1, variant: "label", style: labelStyle, children: label })) : (label)) : null, description != null ? (isPrimitiveText(description) ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { numberOfLines: 2, tone: "muted", variant: "caption", style: descriptionStyle, children: description })) : (description)) : null] }));
+    }, [children, description, descriptionStyle, label, labelStyle, resolvedDisabled, slot]);
+    const defaultIcon = React.useMemo(() => ((0, jsx_runtime_1.jsx)(check_svg_1.default, { width: metrics.indicatorIconSize, height: metrics.indicatorIconSize, color: resolvedColors.checkedIndicator })), [metrics.indicatorIconSize, resolvedColors.checkedIndicator]);
+    const indicatorContext = React.useMemo(() => ({
+        checkedSv,
+        indeterminateSv,
+        boxSize: metrics.indicatorSize,
+        slot,
+        indeterminateIndicatorColor: resolvedColors.indeterminateIndicator,
+        defaultIcon,
+        customIndicator: indicator,
+    }), [
+        checkedSv,
+        defaultIcon,
+        indicator,
+        indeterminateSv,
+        metrics.indicatorSize,
+        resolvedColors.indeterminateIndicator,
+        slot,
+    ]);
+    const rootAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const opacity = resolvedDisabled
+            ? DISABLED_OPACITY
+            : (0, react_native_reanimated_1.interpolate)(pressSv.value, [0, 1], [1, PRESSED_OPACITY]);
+        return { opacity };
+    }, [resolvedDisabled]);
+    const indicatorPressAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const scale = (0, react_native_reanimated_1.interpolate)(pressSv.value, [0, 1], [1, PRESSED_SCALE]);
+        return { transform: [{ scale }] };
+    });
+    const focusRingAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        return {
+            opacity: focusSv.value,
+            transform: [{ scale: (0, react_native_reanimated_1.interpolate)(focusSv.value, [0, 1], [0.96, 1]) }],
+        };
+    });
+    const indicatorAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const activeBackground = (0, react_native_reanimated_1.interpolateColor)(indeterminateSv.value, [0, 1], [resolvedColors.checkedBackground, resolvedColors.indeterminateBackground]);
+        const activeBorder = (0, react_native_reanimated_1.interpolateColor)(indeterminateSv.value, [0, 1], [resolvedColors.checkedBorder, resolvedColors.indeterminateBorder]);
+        return {
+            backgroundColor: (0, react_native_reanimated_1.interpolateColor)(checkedSv.value, [0, 1], [resolvedColors.uncheckedBackground, activeBackground]),
+            borderColor: (0, react_native_reanimated_1.interpolateColor)(checkedSv.value, [0, 1], [resolvedColors.uncheckedBorder, activeBorder]),
+        };
+    }, [resolvedColors]);
+    const indicatorFrameStyle = React.useMemo(() => ({
+        width: metrics.indicatorSize,
+        height: metrics.indicatorSize,
+        borderRadius: metrics.indicatorRadius,
+        borderWidth: metrics.indicatorBorderWidth,
+    }), [metrics.indicatorBorderWidth, metrics.indicatorRadius, metrics.indicatorSize]);
+    const indicatorNode = showIndicator ? ((0, jsx_runtime_1.jsxs)(react_native_reanimated_1.default.View, { style: [
+            styles.indicatorFrame,
+            indicatorFrameStyle,
+            indicatorPressAnimatedStyle,
+            indicatorAnimatedStyle,
+            indicatorStyle,
+        ], 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,
+                        borderRadius: metrics.indicatorRadius + metrics.focusRingOffset,
+                        borderWidth: metrics.focusRingWidth,
+                        borderColor: resolvedColors.focusRing,
+                    },
+                    focusRingAnimatedStyle,
+                ] }), (0, jsx_runtime_1.jsx)(CheckboxIndicator, {})] })) : null;
+    const hasContent = renderedContent != null;
+    const contentBeforeIndicator = (labelPlacement === 'start' && !isRTL) || (labelPlacement === 'end' && isRTL);
+    const contentNode = hasContent ? ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.content, contentStyle], children: contentBeforeIndicator ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.contentSlot, showIndicator ? { marginEnd: metrics.gap } : null], children: renderedContent }), indicatorNode] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [indicatorNode, (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.contentSlot, showIndicator ? { marginStart: metrics.gap } : null], children: renderedContent })] })) })) : (indicatorNode);
+    const inferredAccessibilityLabel = isPrimitiveText(label) ? String(label) : undefined;
+    const resolvedStyle = React.useCallback((stateArg) => {
+        const userStyle = typeof style === 'function' ? style(stateArg) : style;
+        return [styles.root, webCursorStyle, userStyle];
+    }, [style, webCursorStyle]);
+    return ((0, jsx_runtime_1.jsx)(CheckboxIndicatorContext.Provider, { value: indicatorContext, children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { ...pressableProps, ref: ref, accessibilityLabel: accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : inferredAccessibilityLabel, accessibilityRole: "checkbox", accessibilityState: {
+                ...accessibilityState,
+                checked: indeterminate ? 'mixed' : checked,
+                disabled: Boolean(resolvedDisabled),
+            }, disabled: resolvedDisabled, hitSlop: hitSlop !== null && hitSlop !== void 0 ? hitSlop : defaultHitSlop, onBlur: handleBlur, onFocus: handleFocus, onPress: handlePress, onPressIn: handlePressIn, onPressOut: handlePressOut, style: resolvedStyle, testID: testID, children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.visual, rootAnimatedStyle], children: contentNode }) }) }));
+}
+const CheckboxWithRef = React.forwardRef(CheckboxImpl);
+CheckboxWithRef.displayName = 'Checkbox';
+exports.Checkbox = React.memo(CheckboxWithRef);
+exports.Checkbox.displayName = 'Checkbox';
+function CheckboxIndicator({ children, style }) {
+    const context = useCheckboxIndicatorContext();
+    const customIndicator = children !== null && children !== void 0 ? children : context.customIndicator;
+    const checkedIconAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const opacity = context.checkedSv.value * (1 - context.indeterminateSv.value);
+        const scale = (0, react_native_reanimated_1.interpolate)(context.checkedSv.value, [0, 1], [0.78, 1]);
+        return { opacity, transform: [{ scale }] };
+    });
+    const indeterminateAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const opacity = context.checkedSv.value * context.indeterminateSv.value;
+        const scale = (0, react_native_reanimated_1.interpolate)(context.indeterminateSv.value, [0, 1], [0.82, 1]);
+        return { opacity, transform: [{ scale }] };
+    });
+    const customIndicatorAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
+        const opacity = context.checkedSv.value;
+        const scale = (0, react_native_reanimated_1.interpolate)(context.checkedSv.value, [0, 1], [0.78, 1]);
+        return { opacity, transform: [{ scale }] };
+    });
+    const indeterminateWidth = Math.max((0, zkit_tools_1.wp)(8), Math.round(context.boxSize * 0.56));
+    const indeterminateHeight = Math.max((0, zkit_tools_1.wp)(2), Math.round(context.boxSize * 0.11));
+    const resolvedCustomIndicator = isIndicatorRenderProp(customIndicator)
+        ? customIndicator(context.slot)
+        : customIndicator;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "none", style: [
+            styles.indicatorLayer,
+            {
+                width: context.boxSize,
+                height: context.boxSize,
+            },
+            style,
+        ], children: resolvedCustomIndicator != null ? ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: customIndicatorAnimatedStyle, children: resolvedCustomIndicator })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: indeterminateAnimatedStyle, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                            width: indeterminateWidth,
+                            height: indeterminateHeight,
+                            borderRadius: indeterminateHeight / 2,
+                            backgroundColor: context.indeterminateIndicatorColor,
+                        } }) }), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styles.iconLayer, checkedIconAnimatedStyle], children: context.defaultIcon })] })) }));
+}
+function CheckboxGroup({ value, defaultValue, onChange, disabled = false, orientation = 'horizontal', align = 'start', wrap = false, gap, rowGap, columnGap, size, tone, variant, shape, color, colors, layout, style, children, ...viewProps }) {
+    var _a;
+    const { width: viewportWidth } = (0, react_native_1.useWindowDimensions)();
+    const isControlled = value !== undefined;
+    const storeRef = React.useRef(null);
+    if (!storeRef.current) {
+        storeRef.current = new CheckboxGroupStore((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : []);
+    }
+    React.useLayoutEffect(() => {
+        if (!isControlled)
+            return;
+        storeRef.current.setValues(value !== null && value !== void 0 ? value : []);
+    }, [isControlled, value]);
+    const toggleValue = React.useCallback((nextValue) => {
+        const next = storeRef.current.getToggledValues(nextValue);
+        if (!isControlled)
+            storeRef.current.setValues(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    }, [isControlled, onChange]);
+    const context = React.useMemo(() => ({
+        store: storeRef.current,
+        disabled,
+        isControlled,
+        toggleValue,
+        size,
+        tone,
+        variant,
+        shape,
+        color,
+        colors,
+        layout,
+    }), [
+        color,
+        colors,
+        disabled,
+        isControlled,
+        layout,
+        shape,
+        size,
+        tone,
+        toggleValue,
+        variant,
+    ]);
+    const defaultGap = React.useMemo(() => (0, zkit_tools_1.wp)(12), [viewportWidth]);
+    const resolvedGap = resolveNonNegativeNumber(gap, defaultGap);
+    const resolvedRowGap = resolveNonNegativeNumber(rowGap, resolvedGap);
+    const resolvedColumnGap = resolveNonNegativeNumber(columnGap, resolvedGap);
+    const layoutStyle = React.useMemo(() => ({
+        alignItems: resolveAlignItems(align),
+        columnGap: resolvedColumnGap,
+        flexDirection: orientation === 'vertical' ? 'column' : 'row',
+        flexWrap: wrap ? 'wrap' : 'nowrap',
+        rowGap: resolvedRowGap,
+    }), [align, orientation, resolvedColumnGap, resolvedRowGap, wrap]);
+    return ((0, jsx_runtime_1.jsx)(CheckboxGroupContext.Provider, { value: context, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { ...viewProps, style: [layoutStyle, style], children: children }) }));
+}
+const styles = react_native_1.StyleSheet.create({
+    root: {
+        alignSelf: 'flex-start',
+    },
+    visual: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        minWidth: 0,
+    },
+    content: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        minWidth: 0,
+    },
+    contentSlot: {
+        flexShrink: 1,
+        minWidth: 0,
+    },
+    copy: {
+        flexShrink: 1,
+        minWidth: 0,
+    },
+    indicatorFrame: {
+        alignItems: 'center',
+        flexShrink: 0,
+        justifyContent: 'center',
+        overflow: 'visible',
+    },
+    focusRing: {
+        position: 'absolute',
+    },
+    indicatorLayer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    iconLayer: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});