zkit-ui 1.0.0

package/dist/ui/Radio/index.js

@@ -0,0 +1,633 @@
+"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.Radio = void 0;
+exports.RadioIndicator = RadioIndicator;
+exports.RadioGroup = RadioGroup;
+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 Text_1 = require("../Text");
+const RadioIndicatorContext = React.createContext(null);
+const noopSubscribe = () => () => { };
+class RadioGroupStore {
+    constructor(initialValue) {
+        this.listeners = new Set();
+        this.subscribe = (listener) => {
+            this.listeners.add(listener);
+            return () => {
+                this.listeners.delete(listener);
+            };
+        };
+        this.isSelected = (value) => Object.is(this.value, value);
+        this.setValue = (value) => {
+            if (Object.is(this.value, value))
+                return false;
+            this.value = value;
+            this.emit();
+            return true;
+        };
+        this.value = initialValue;
+    }
+    emit() {
+        for (const listener of this.listeners)
+            listener();
+    }
+}
+const RadioGroupContext = React.createContext(null);
+const SEMANTIC_COLORS = {
+    danger: '#DC2626',
+    error: '#DC2626',
+    info: '#2563EB',
+    success: '#16A34A',
+    warn: '#D97706',
+    warning: '#D97706',
+};
+const SIZE_TOKENS = {
+    sm: {
+        indicatorSize: 18,
+        indicatorDotSize: 8,
+        indicatorBorderWidth: 1.5,
+        gap: 8,
+    },
+    md: {
+        indicatorSize: 20,
+        indicatorDotSize: 9,
+        indicatorBorderWidth: 1.5,
+        gap: 10,
+    },
+    lg: {
+        indicatorSize: 24,
+        indicatorDotSize: 11,
+        indicatorBorderWidth: 1.5,
+        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 useRadioIndicatorContext() {
+    const context = React.useContext(RadioIndicatorContext);
+    if (!context) {
+        throw new Error('[zkit-ui] RadioIndicator must be rendered inside <Radio />.');
+    }
+    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;
+    return {
+        checkedBackground: resolveColorToken(colors === null || colors === void 0 ? void 0 : colors.checkedBackground, checkedBackground, theme),
+        checkedBorder: resolveColorToken(colors === null || colors === void 0 ? void 0 : colors.checkedBorder, accent, theme),
+        checkedIndicator: resolveColorToken(colors === null || colors === void 0 ? void 0 : colors.checkedIndicator, checkedIndicator, 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 resolveRadioMetrics(size, 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));
+    return {
+        indicatorSize,
+        indicatorDotSize: resolvePositiveNumber(layout === null || layout === void 0 ? void 0 : layout.indicatorDotSize, (0, zkit_tools_1.wp)(token.indicatorDotSize)),
+        indicatorBorderWidth: resolvePositiveNumber(layout === null || layout === void 0 ? void 0 : layout.indicatorBorderWidth, (0, zkit_tools_1.wp)(token.indicatorBorderWidth)),
+        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 resolveAlignItems(align) {
+    if (align === 'center')
+        return 'center';
+    if (align === 'end')
+        return 'flex-end';
+    if (align === 'stretch')
+        return 'stretch';
+    return 'flex-start';
+}
+function RadioImpl({ value, checked: checkedProp, defaultChecked = false, onChange, allowDeselect, disabled = false, size: sizeProp, tone: toneProp, variant: variantProp, 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(RadioGroupContext);
+    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.isSelected(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 checked = isGroupItem
+        ? groupChecked
+        : isStandaloneControlled
+            ? checkedProp
+            : uncontrolledChecked;
+    const resolvedDisabled = disabled || Boolean(group === null || group === void 0 ? void 0 : group.disabled);
+    const interactive = !resolvedDisabled;
+    const resolvedAllowDeselect = (_b = allowDeselect !== null && allowDeselect !== void 0 ? allowDeselect : group === null || group === void 0 ? void 0 : group.allowDeselect) !== null && _b !== void 0 ? _b : false;
+    const size = (_c = sizeProp !== null && sizeProp !== void 0 ? sizeProp : group === null || group === void 0 ? void 0 : group.size) !== null && _c !== void 0 ? _c : 'md';
+    const tone = (_d = toneProp !== null && toneProp !== void 0 ? toneProp : group === null || group === void 0 ? void 0 : group.tone) !== null && _d !== void 0 ? _d : 'primary';
+    const variant = (_e = variantProp !== null && variantProp !== void 0 ? variantProp : group === null || group === void 0 ? void 0 : group.variant) !== null && _e !== void 0 ? _e : 'outline';
+    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(() => resolveRadioMetrics(size, layout), [layout, 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 defaultHitSlop = React.useMemo(() => resolveHitSlop(metrics.indicatorSize, metrics.indicatorSize, metrics.minTouchTarget), [metrics.indicatorSize, metrics.minTouchTarget]);
+    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 checkedSv = (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);
+    const checkedRef = React.useRef(checked);
+    checkedRef.current = checked;
+    const groupCheckedRef = React.useRef(groupChecked);
+    groupCheckedRef.current = groupChecked;
+    React.useEffect(() => {
+        if (!isStandaloneControlled && !isGroupItem)
+            return;
+        checkedSv.value = (0, react_native_reanimated_1.withTiming)(checked ? 1 : 0, valueTiming);
+    }, [checked, checkedSv, 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 commitStandaloneChecked = React.useCallback((next) => {
+        if (!isStandaloneControlled) {
+            checkedRef.current = next;
+            checkedSv.value = (0, react_native_reanimated_1.withTiming)(next ? 1 : 0, valueTiming);
+            setUncontrolledChecked(next);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    }, [checkedSv, isStandaloneControlled, onChange, valueTiming]);
+    const select = React.useCallback(() => {
+        if (!interactive)
+            return;
+        if (isGroupItem && group && value !== undefined) {
+            const isSelected = groupCheckedRef.current;
+            if (isSelected && !resolvedAllowDeselect)
+                return;
+            const nextValue = isSelected ? null : value;
+            if (!group.isControlled) {
+                checkedSv.value = (0, react_native_reanimated_1.withTiming)(isSelected ? 0 : 1, valueTiming);
+            }
+            group.selectValue(nextValue);
+            onChange === null || onChange === void 0 ? void 0 : onChange(!isSelected);
+            return;
+        }
+        const current = checkedRef.current;
+        if (current && !resolvedAllowDeselect)
+            return;
+        commitStandaloneChecked(current ? false : true);
+    }, [
+        checkedSv,
+        commitStandaloneChecked,
+        group,
+        interactive,
+        isGroupItem,
+        onChange,
+        resolvedAllowDeselect,
+        value,
+        valueTiming,
+    ]);
+    const handlePress = React.useCallback((event) => {
+        if (interactive)
+            select();
+        onPress === null || onPress === void 0 ? void 0 : onPress(event);
+    }, [interactive, onPress, select]);
+    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,
+        value,
+        disabled: resolvedDisabled,
+        interactive,
+        size,
+        tone,
+        variant,
+        select,
+    }), [checked, interactive, resolvedDisabled, select, size, tone, 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, { disabled: resolvedDisabled, numberOfLines: 1, variant: "label", style: labelStyle, children: label })) : (label)) : null, description != null ? (isPrimitiveText(description) ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { disabled: resolvedDisabled, numberOfLines: 2, tone: resolvedDisabled ? 'disabled' : 'muted', variant: "caption", style: descriptionStyle, children: description })) : (description)) : null] }));
+    }, [
+        children,
+        description,
+        descriptionStyle,
+        label,
+        labelStyle,
+        resolvedDisabled,
+        slot,
+    ]);
+    const indicatorContext = React.useMemo(() => ({
+        checkedSv,
+        indicatorSize: metrics.indicatorSize,
+        indicatorDotSize: metrics.indicatorDotSize,
+        slot,
+        checkedIndicatorColor: resolvedColors.checkedIndicator,
+        customIndicator: indicator,
+    }), [
+        checkedSv,
+        indicator,
+        metrics.indicatorDotSize,
+        metrics.indicatorSize,
+        resolvedColors.checkedIndicator,
+        slot,
+    ]);
+    const visualAnimatedStyle = (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)(() => {
+        return {
+            backgroundColor: (0, react_native_reanimated_1.interpolateColor)(checkedSv.value, [0, 1], [resolvedColors.uncheckedBackground, resolvedColors.checkedBackground]),
+            borderColor: (0, react_native_reanimated_1.interpolateColor)(checkedSv.value, [0, 1], [resolvedColors.uncheckedBorder, resolvedColors.checkedBorder]),
+        };
+    }, [resolvedColors]);
+    const indicatorFrameStyle = React.useMemo(() => ({
+        width: metrics.indicatorSize,
+        height: metrics.indicatorSize,
+        borderRadius: metrics.indicatorSize / 2,
+        borderWidth: metrics.indicatorBorderWidth,
+    }), [metrics.indicatorBorderWidth, 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.indicatorSize / 2 + metrics.focusRingOffset,
+                        borderWidth: metrics.focusRingWidth,
+                        borderColor: resolvedColors.focusRing,
+                    },
+                    focusRingAnimatedStyle,
+                ] }), (0, jsx_runtime_1.jsx)(RadioIndicator, {})] })) : 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((state) => {
+        const userStyle = typeof style === 'function' ? style(state) : style;
+        return [styles.root, webCursorStyle, userStyle];
+    }, [style, webCursorStyle]);
+    return ((0, jsx_runtime_1.jsx)(RadioIndicatorContext.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: "radio", accessibilityState: {
+                ...accessibilityState,
+                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, visualAnimatedStyle], children: contentNode }) }) }));
+}
+const RadioWithRef = React.forwardRef(RadioImpl);
+RadioWithRef.displayName = 'Radio';
+exports.Radio = React.memo(RadioWithRef);
+exports.Radio.displayName = 'Radio';
+function RadioIndicator({ children, style }) {
+    const context = useRadioIndicatorContext();
+    const customIndicator = children !== null && children !== void 0 ? children : context.customIndicator;
+    const dotAnimatedStyle = (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.72, 1]);
+        return { opacity, transform: [{ scale }] };
+    });
+    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.indicatorSize,
+                height: context.indicatorSize,
+            },
+            style,
+        ], children: (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: dotAnimatedStyle, children: resolvedCustomIndicator !== null && resolvedCustomIndicator !== void 0 ? resolvedCustomIndicator : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                    width: context.indicatorDotSize,
+                    height: context.indicatorDotSize,
+                    borderRadius: context.indicatorDotSize / 2,
+                    backgroundColor: context.checkedIndicatorColor,
+                } })) }) }));
+}
+function RadioGroup({ value, defaultValue, onChange, disabled = false, allowDeselect = false, orientation = 'horizontal', align = 'start', wrap = false, gap, rowGap, columnGap, size, tone, variant, color, colors, layout, style, children, accessibilityState, ...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 RadioGroupStore(((_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : null));
+    }
+    React.useLayoutEffect(() => {
+        if (!isControlled)
+            return;
+        storeRef.current.setValue((value !== null && value !== void 0 ? value : null));
+    }, [isControlled, value]);
+    const selectValue = React.useCallback((nextValue) => {
+        if (!isControlled)
+            storeRef.current.setValue(nextValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
+    }, [isControlled, onChange]);
+    const context = React.useMemo(() => ({
+        store: storeRef.current,
+        disabled,
+        isControlled,
+        allowDeselect,
+        selectValue,
+        size,
+        tone,
+        variant,
+        color,
+        colors,
+        layout,
+    }), [
+        allowDeselect,
+        color,
+        colors,
+        disabled,
+        isControlled,
+        layout,
+        selectValue,
+        size,
+        tone,
+        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)(RadioGroupContext.Provider, { value: context, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { ...viewProps, accessibilityRole: "radiogroup", accessibilityState: {
+                ...accessibilityState,
+                disabled: Boolean(disabled),
+            }, 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',
+    },
+});

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { SheetContent, SheetFooter, SheetHeader } from './slots';
+import type { SheetProps, SheetRef } from './types';
+export { SheetContent, SheetFooter, SheetHeader } from './slots';
+export type { SheetAnimationConfig, SheetBackdropConfig, SheetCloseCompleteDetails, SheetCloseOptions, SheetCloseReason, SheetContentProps, SheetDetent, SheetDetentChangePayload, SheetFooterProps, SheetHandleConfig, SheetHeaderProps, SheetNativeProps, SheetOpenChangeDetails, SheetOpenChangeReason, SheetOpenCompleteDetails, SheetOpenOptions, SheetOpenReason, SheetPlacement, SheetProps, SheetRef, SheetRenderContext, SheetSafeAreaEdges, SheetSize, SheetState, } from './types';
+type SheetComponent = React.ForwardRefExoticComponent<SheetProps & React.RefAttributes<SheetRef>> & {
+    Header: typeof SheetHeader;
+    Content: typeof SheetContent;
+    Footer: typeof SheetFooter;
+};
+export declare const Sheet: SheetComponent;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Sheet/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAwB/B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACjE,OAAO,KAAK,EAUV,UAAU,EACV,QAAQ,EAMT,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AACjE,YAAY,EACV,oBAAoB,EACpB,mBAAmB,EACnB,yBAAyB,EACzB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,WAAW,EACX,wBAAwB,EACxB,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,EAChB,gBAAgB,EAChB,sBAAsB,EACtB,qBAAqB,EACrB,wBAAwB,EACxB,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,UAAU,EACV,QAAQ,EACR,kBAAkB,EAClB,kBAAkB,EAClB,SAAS,EACT,UAAU,GACX,MAAM,SAAS,CAAC;AA6/BjB,KAAK,cAAc,GAAG,KAAK,CAAC,yBAAyB,CACnD,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAC3C,GAAG;IACF,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3B,OAAO,EAAE,OAAO,YAAY,CAAC;IAC7B,MAAM,EAAE,OAAO,WAAW,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,KAAK,EAIZ,cAAc,CAAC"}