zkit-ui 1.0.0

package/dist/ui/LoadingSpinner/index.js

@@ -0,0 +1,122 @@
+"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.LoadingSpinner = LoadingSpinner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const lottie_react_native_1 = __importDefault(require("lottie-react-native"));
+const spinner_json_1 = __importDefault(require("../../assets/animations/spinner.json"));
+function getColorKeyAndRgb(inputColor) {
+    const intColor = (0, react_native_1.processColor)(inputColor);
+    if (typeof intColor !== 'number')
+        return null;
+    const key = String(intColor);
+    const r = (intColor >> 16) & 255;
+    const g = (intColor >> 8) & 255;
+    const b = intColor & 255;
+    return { key, rgb: { r: r / 255, g: g / 255, b: b / 255 } };
+}
+function colorizeLottieJson(json, rgb) {
+    const clone = JSON.parse(JSON.stringify(json));
+    const overrideSolid = (node) => {
+        if (node.c && Array.isArray(node.c.k)) {
+            const k = node.c.k;
+            if (k.length === 3) {
+                node.c.k = [rgb.r, rgb.g, rgb.b];
+            }
+            else if (k.length === 4) {
+                node.c.k = [rgb.r, rgb.g, rgb.b, k[3]];
+            }
+        }
+    };
+    const overrideGradient = (node) => {
+        if (node.g && Array.isArray(node.g.k)) {
+            const arr = node.g.k;
+            for (let i = 0; i < arr.length; i += 4) {
+                if (typeof arr[i] === 'number' && i + 3 < arr.length) {
+                    arr[i + 1] = rgb.r;
+                    arr[i + 2] = rgb.g;
+                    arr[i + 3] = rgb.b;
+                }
+            }
+        }
+    };
+    const traverse = (node) => {
+        if (!node || typeof node !== 'object')
+            return;
+        overrideSolid(node);
+        overrideGradient(node);
+        if (Array.isArray(node)) {
+            node.forEach(traverse);
+        }
+        else {
+            Object.keys(node).forEach((key) => traverse(node[key]));
+        }
+    };
+    traverse(clone);
+    return clone;
+}
+const MAX_CACHE_ENTRIES = 12;
+const sourceCache = new Map();
+function getColoredSource(color) {
+    const keyAndRgb = getColorKeyAndRgb(color);
+    if (!keyAndRgb)
+        return spinner_json_1.default;
+    const cached = sourceCache.get(keyAndRgb.key);
+    if (cached) {
+        sourceCache.delete(keyAndRgb.key);
+        sourceCache.set(keyAndRgb.key, cached);
+        return cached;
+    }
+    const colored = colorizeLottieJson(spinner_json_1.default, keyAndRgb.rgb);
+    sourceCache.set(keyAndRgb.key, colored);
+    while (sourceCache.size > MAX_CACHE_ENTRIES) {
+        const firstKey = sourceCache.keys().next().value;
+        if (firstKey == null)
+            break;
+        sourceCache.delete(firstKey);
+    }
+    return colored;
+}
+function LoadingSpinner({ size = 100, color = 'white', animating = true, speed = 2 }) {
+    if (!animating)
+        return null;
+    const coloredSource = React.useMemo(() => getColoredSource(color), [color]);
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: size, height: size, justifyContent: 'center', alignItems: 'center' }, children: (0, jsx_runtime_1.jsx)(lottie_react_native_1.default, { source: coloredSource, style: { width: size, height: size }, autoPlay: true, loop: true, speed: speed }) }));
+}

package/dist/ui/Picker/actionBar.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export declare function getPickerActionBarBottomInset(bottomInset: number): number;
+export type PickerActionBarProps = {
+    cancelText: React.ReactNode;
+    confirmText: React.ReactNode;
+    onCancel: () => void;
+    onConfirm: () => void;
+    disabled?: boolean;
+    confirmDisabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+};
+export declare function PickerActionBar({ cancelText, confirmText, onCancel, onConfirm, disabled, confirmDisabled, style, }: PickerActionBarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=actionBar.d.ts.map

package/dist/ui/Picker/actionBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actionBar.d.ts","sourceRoot":"","sources":["../../../src/ui/Picker/actionBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAoB,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAIhF,wBAAgB,6BAA6B,CAAC,WAAW,EAAE,MAAM,UAEhE;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAgB,EAChB,eAAuB,EACvB,KAAK,GACN,EAAE,oBAAoB,2CA0BtB"}

package/dist/ui/Picker/actionBar.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPickerActionBarBottomInset = getPickerActionBarBottomInset;
+exports.PickerActionBar = PickerActionBar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const zkit_tools_1 = require("zkit-tools");
+const Button_1 = require("../Button");
+function getPickerActionBarBottomInset(bottomInset) {
+    return Math.max(bottomInset, (0, zkit_tools_1.wp)(12));
+}
+function PickerActionBar({ cancelText, confirmText, onCancel, onConfirm, disabled = false, confirmDisabled = false, style, }) {
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.root, style], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.buttonWrapper, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "soft", onPress: onCancel, disabled: disabled, block: true, layout: ACTION_BUTTON_LAYOUT, children: cancelText }) }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.buttonWrapper, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onPress: onConfirm, disabled: disabled || confirmDisabled, block: true, layout: ACTION_BUTTON_LAYOUT, children: confirmText }) })] }));
+}
+const ACTION_BUTTON_LAYOUT = {
+    minHeight: (0, zkit_tools_1.wp)(44),
+    radius: (0, zkit_tools_1.wp)(14),
+    textSize: (0, zkit_tools_1.sp)(16),
+};
+const styles = react_native_1.StyleSheet.create({
+    root: {
+        flexDirection: 'row',
+        gap: (0, zkit_tools_1.wp)(14),
+    },
+    buttonWrapper: {
+        flex: 1,
+    },
+});

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { PickerHandle, PickerProps } from './types';
+export type { PickerChangePayload, PickerColumnHeaderContext, PickerConfirmPayload, PickerDraftChangePayload, PickerHandle, PickerOption, PickerPrimitiveValue, PickerProps, PickerSelection, PickerTriggerContext, PickerValue, PickerValueMode, } from './types';
+export declare const Picker: <TOption = import("./types").PickerOption>(props: PickerProps<TOption> & React.RefAttributes<PickerHandle>) => React.ReactElement | null;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/Picker/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA0C/B,OAAO,KAAK,EAGV,YAAY,EAGZ,WAAW,EAKZ,MAAM,SAAS,CAAC;AAEjB,YAAY,EACV,mBAAmB,EACnB,yBAAyB,EACzB,oBAAoB,EACpB,wBAAwB,EACxB,YAAY,EACZ,YAAY,EACZ,oBAAoB,EACpB,WAAW,EACX,eAAe,EACf,oBAAoB,EACpB,WAAW,EACX,eAAe,GAChB,MAAM,SAAS,CAAC;AAmJjB,eAAO,MAAM,MAAM,EAmZb,CAAC,OAAO,GAAG,OAAO,SAAS,EAAE,YAAY,EAC7C,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,YAAY,CAAC,KAC5D,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC"}

package/dist/ui/Picker/index.js

@@ -0,0 +1,412 @@
+"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.Picker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const expo_linear_gradient_1 = require("expo-linear-gradient");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+const zkit_tools_1 = require("zkit-tools");
+const useI18n_1 = require("../../i18n/useI18n");
+const useTheme_1 = require("../../theme/useTheme");
+const Sheet_1 = require("../Sheet");
+const Text_1 = require("../Text");
+const WheelColumn_1 = require("../WheelColumn");
+const utils_1 = require("./utils");
+const actionBar_1 = require("./actionBar");
+const ITEM_HEIGHT = WheelColumn_1.WHEEL_ITEM_HEIGHT;
+const VISIBLE_ITEMS = WheelColumn_1.WHEEL_VISIBLE_ITEMS;
+const DEFAULT_MAX_COLUMNS = 5;
+const MAX_COLUMNS_LIMIT = 8;
+function toWheelOptions(options, parentPath, accessors) {
+    return options.map((option, index) => {
+        const path = [...parentPath, option];
+        const value = (0, utils_1.resolveOptionValue)(option, index, path, accessors);
+        const label = (0, utils_1.resolveOptionLabel)(option, index, path, accessors);
+        const record = option != null && typeof option === 'object' ? option : {};
+        return {
+            value,
+            label,
+            disabled: (0, utils_1.resolveOptionDisabled)(option, index, path, accessors),
+            key: typeof record.key === 'string' || typeof record.key === 'number' ? record.key : value,
+            testID: typeof record.testID === 'string' ? record.testID : undefined,
+            accessibilityLabel: typeof record.accessibilityLabel === 'string' ? record.accessibilityLabel : undefined,
+        };
+    });
+}
+const WheelColumnSlot = React.memo(function WheelColumnSlot({ options, columnIndex, parentPath, accessors, selectedIndex, onIndexChange, width, disabled, wheelsRef, }) {
+    var _a, _b;
+    const wheelOptions = React.useMemo(() => toWheelOptions(options, parentPath, accessors), [accessors, options, parentPath]);
+    const selectedValue = (_b = (_a = wheelOptions[Math.max(0, selectedIndex)]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : null;
+    const handleChange = React.useCallback((payload) => onIndexChange(columnIndex, payload.index), [columnIndex, onIndexChange]);
+    return ((0, jsx_runtime_1.jsx)(WheelColumn_1.WheelColumn, { ref: (element) => {
+            wheelsRef.current[columnIndex] = element;
+        }, options: wheelOptions, value: selectedValue, onChange: handleChange, width: width, disabled: disabled }));
+});
+function createEmptyCascadeState() {
+    return {
+        columns: [],
+        indices: [],
+        values: [],
+        labels: [],
+        items: [],
+    };
+}
+function getPreferPathValue(value, valueMode, resolvedColumns) {
+    if (valueMode === 'path')
+        return true;
+    if (valueMode === 'single')
+        return false;
+    if (Array.isArray(value))
+        return true;
+    if (value !== undefined)
+        return false;
+    return resolvedColumns > 1;
+}
+function composeTrigger(children, context) {
+    if (typeof children === 'function') {
+        return composeTrigger(children(context), context);
+    }
+    if (React.isValidElement(children)) {
+        const child = children;
+        const previousOnPress = child.props.onPress;
+        const previousAccessibilityState = child.props.accessibilityState;
+        return React.cloneElement(child, {
+            onPress: (...args) => {
+                previousOnPress === null || previousOnPress === void 0 ? void 0 : previousOnPress(...args);
+                context.open();
+            },
+            disabled: context.disabled || child.props.disabled,
+            accessibilityState: {
+                ...previousAccessibilityState,
+                disabled: context.disabled || (previousAccessibilityState === null || previousAccessibilityState === void 0 ? void 0 : previousAccessibilityState.disabled),
+                expanded: context.isOpen,
+            },
+        });
+    }
+    if (children == null)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityRole: "button", accessibilityState: { disabled: context.disabled, expanded: context.isOpen }, disabled: context.disabled, onPress: context.open, children: children }));
+}
+function normalizeMaxColumns(maxColumns) {
+    if (maxColumns == null)
+        return DEFAULT_MAX_COLUMNS;
+    if (!Number.isFinite(maxColumns))
+        return DEFAULT_MAX_COLUMNS;
+    return (0, utils_1.clampNumber)(Math.round(maxColumns), 1, MAX_COLUMNS_LIMIT);
+}
+exports.Picker = React.forwardRef(function Picker({ options, value: valueProp, defaultValue, onChange, valueMode = 'auto', open: openProp, defaultOpen, onOpenChange, onDismissComplete, title, placeholder = '', cancelText, confirmText, emptyText, separator = '-', formatLabel, renderColumnHeader, maxColumns, getOptionValue, getOptionLabel, getOptionChildren, isOptionDisabled, lazyContent = true, sheetHeight = 'auto', disabled = false, onCancel, onConfirm, onDraftChange, children, }, ref) {
+    const { t } = (0, useI18n_1.useI18n)();
+    const theme = (0, useTheme_1.useTheme)();
+    const { height: screenH, width: screenW } = (0, react_native_1.useWindowDimensions)();
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const safeBottom = (0, actionBar_1.getPickerActionBarBottomInset)(insets.bottom);
+    const effectiveMaxColumns = React.useMemo(() => normalizeMaxColumns(maxColumns), [maxColumns]);
+    const accessors = React.useMemo(() => ({ getOptionValue, getOptionLabel, getOptionChildren, isOptionDisabled }), [getOptionChildren, getOptionLabel, getOptionValue, isOptionDisabled]);
+    const isValueControlled = valueProp !== undefined;
+    const [innerValue, setInnerValue] = React.useState(defaultValue);
+    const value = isValueControlled ? valueProp : innerValue;
+    const isOpenControlled = openProp !== undefined;
+    const [innerOpen, setInnerOpen] = React.useState(!!defaultOpen);
+    const visible = isOpenControlled ? !!openProp : innerOpen;
+    const wheelsRef = React.useRef([]);
+    const confirmingRef = React.useRef(false);
+    const resolveFromValue = React.useCallback((nextValue) => (0, utils_1.resolveCascade)(options, (0, utils_1.toArrayValue)(nextValue), accessors, effectiveMaxColumns), [accessors, effectiveMaxColumns, options]);
+    const createSelection = React.useCallback((state, nextValue = value) => (0, utils_1.createPickerSelection)(state, {
+        separator,
+        valueMode,
+        preferPathValue: getPreferPathValue(nextValue, valueMode, state.columns.length),
+        formatLabel,
+    }), [formatLabel, separator, value, valueMode]);
+    const initialDraft = React.useMemo(() => resolveFromValue(value), [resolveFromValue, value]);
+    const [{ columns: draftColumns, indices: draftIndices, values: draftValues, labels: draftLabels, items: draftItems }, setDraft] = React.useState(initialDraft);
+    React.useEffect(() => {
+        setDraft(resolveFromValue(value));
+    }, [resolveFromValue, value]);
+    React.useEffect(() => {
+        if (!visible)
+            return;
+        setDraft(resolveFromValue(value));
+    }, [resolveFromValue, value, visible]);
+    const committedSelection = React.useMemo(() => {
+        const state = value === undefined ? createEmptyCascadeState() : resolveFromValue(value);
+        return createSelection(state, value);
+    }, [createSelection, resolveFromValue, value]);
+    const draftState = React.useMemo(() => ({
+        columns: draftColumns,
+        indices: draftIndices,
+        values: draftValues,
+        labels: draftLabels,
+        items: draftItems,
+    }), [draftColumns, draftIndices, draftItems, draftLabels, draftValues]);
+    const draftSelection = React.useMemo(() => createSelection(draftState), [createSelection, draftState]);
+    const detents = React.useMemo(() => {
+        if (sheetHeight === 'auto' || sheetHeight == null)
+            return ['auto'];
+        if (!Number.isFinite(sheetHeight) || sheetHeight <= 0)
+            return ['auto'];
+        return [(0, utils_1.clampNumber)(sheetHeight / screenH, 0.1, 0.92)];
+    }, [screenH, sheetHeight]);
+    const setPickerOpen = React.useCallback((nextOpen) => {
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(nextOpen);
+        if (!isOpenControlled)
+            setInnerOpen(nextOpen);
+    }, [isOpenControlled, onOpenChange]);
+    const close = React.useCallback(() => {
+        setPickerOpen(false);
+    }, [setPickerOpen]);
+    const openPicker = React.useCallback(() => {
+        if (disabled)
+            return;
+        setDraft(resolveFromValue(value));
+        if (!visible) {
+            setPickerOpen(true);
+        }
+    }, [disabled, resolveFromValue, setPickerOpen, value, visible]);
+    React.useImperativeHandle(ref, () => ({
+        open: openPicker,
+        close,
+    }), [close, openPicker]);
+    const columnsCount = React.useMemo(() => Math.max(1, Math.min(effectiveMaxColumns, draftColumns.length || 1)), [draftColumns.length, effectiveMaxColumns]);
+    const columnWidth = React.useMemo(() => (screenW - (0, zkit_tools_1.wp)(32)) / columnsCount, [columnsCount, screenW]);
+    const confirmDisabled = disabled || !draftSelection.isComplete;
+    const transparentSurface = React.useMemo(() => (0, utils_1.transparentizeColor)(theme.colors.surface), [theme.colors.surface]);
+    React.useEffect(() => {
+        wheelsRef.current.length = columnsCount;
+    }, [columnsCount]);
+    const emitDraftChange = React.useCallback((nextState) => {
+        const selection = createSelection(nextState);
+        onDraftChange === null || onDraftChange === void 0 ? void 0 : onDraftChange(selection);
+    }, [createSelection, onDraftChange]);
+    const syncDraftFromWheels = React.useCallback(async () => {
+        var _a, _b;
+        const settledIndices = await Promise.all(Array.from({ length: effectiveMaxColumns }, async (_, columnIndex) => {
+            const wheel = wheelsRef.current[columnIndex];
+            if (react_native_1.Platform.OS === 'ios') {
+                return wheel === null || wheel === void 0 ? void 0 : wheel.syncCurrentSelection();
+            }
+            return wheel === null || wheel === void 0 ? void 0 : wheel.settleToNearest(false);
+        }));
+        const desiredValues = [];
+        let currentOptions = Array.isArray(options) ? options : [];
+        let path = [];
+        for (let columnIndex = 0; columnIndex < effectiveMaxColumns; columnIndex += 1) {
+            if (!currentOptions.length)
+                break;
+            const safeIndex = (0, utils_1.findNearestEnabledIndex)(currentOptions, (_b = (_a = settledIndices[columnIndex]) !== null && _a !== void 0 ? _a : draftIndices[columnIndex]) !== null && _b !== void 0 ? _b : 0, path, accessors);
+            if (safeIndex < 0)
+                break;
+            const item = currentOptions[safeIndex];
+            if (item == null)
+                break;
+            const nextPath = [...path, item];
+            desiredValues[columnIndex] = (0, utils_1.resolveOptionValue)(item, safeIndex, nextPath, accessors);
+            currentOptions = (0, utils_1.resolveOptionChildren)(item, safeIndex, nextPath, accessors);
+            path = nextPath;
+        }
+        const nextState = (0, utils_1.resolveCascade)(options, desiredValues, accessors, effectiveMaxColumns);
+        setDraft(nextState);
+        requestAnimationFrame(() => {
+            var _a, _b;
+            for (let i = 0; i < nextState.indices.length; i += 1) {
+                (_a = wheelsRef.current[i]) === null || _a === void 0 ? void 0 : _a.scrollToIndex((_b = nextState.indices[i]) !== null && _b !== void 0 ? _b : 0, false);
+            }
+        });
+        return nextState;
+    }, [accessors, draftIndices, effectiveMaxColumns, options]);
+    const handleWheelIndexChange = React.useCallback((columnIndex, nextIndex) => {
+        var _a, _b;
+        const columnOptions = (_a = draftColumns[columnIndex]) !== null && _a !== void 0 ? _a : [];
+        if (!columnOptions.length)
+            return;
+        const parentPath = draftItems.slice(0, columnIndex);
+        const safeIndex = (0, utils_1.findNearestEnabledIndex)(columnOptions, nextIndex, parentPath, accessors);
+        if (safeIndex < 0)
+            return;
+        if (safeIndex !== nextIndex) {
+            (_b = wheelsRef.current[columnIndex]) === null || _b === void 0 ? void 0 : _b.scrollToIndex(safeIndex, true);
+        }
+        const item = columnOptions[safeIndex];
+        if (item == null)
+            return;
+        const nextPath = [...parentPath, item];
+        const nextDesired = [...draftValues];
+        nextDesired[columnIndex] = (0, utils_1.resolveOptionValue)(item, safeIndex, nextPath, accessors);
+        nextDesired.length = columnIndex + 1;
+        const nextState = (0, utils_1.resolveCascade)(options, nextDesired, accessors, effectiveMaxColumns);
+        setDraft(nextState);
+        requestAnimationFrame(() => {
+            var _a, _b;
+            for (let i = columnIndex + 1; i < nextState.indices.length; i += 1) {
+                (_a = wheelsRef.current[i]) === null || _a === void 0 ? void 0 : _a.scrollToIndex((_b = nextState.indices[i]) !== null && _b !== void 0 ? _b : 0, false);
+            }
+        });
+        emitDraftChange(nextState);
+    }, [accessors, draftColumns, draftItems, draftValues, effectiveMaxColumns, emitDraftChange, options]);
+    const handleCancel = React.useCallback(() => {
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        close();
+    }, [close, onCancel]);
+    const handleConfirm = React.useCallback(async () => {
+        if (confirmDisabled || confirmingRef.current)
+            return;
+        confirmingRef.current = true;
+        try {
+            const syncedState = await syncDraftFromWheels();
+            const selection = createSelection(syncedState);
+            if (!selection.isComplete)
+                return;
+            if (!isValueControlled) {
+                setInnerValue(selection.value);
+            }
+            onChange === null || onChange === void 0 ? void 0 : onChange(selection.value, selection);
+            onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(selection);
+            close();
+        }
+        finally {
+            confirmingRef.current = false;
+        }
+    }, [close, confirmDisabled, createSelection, isValueControlled, onChange, onConfirm, syncDraftFromWheels]);
+    const handleSheetOpenChange = React.useCallback((nextOpen, meta) => {
+        if (!nextOpen && visible && meta.reason !== 'api') {
+            onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        }
+        setPickerOpen(nextOpen);
+    }, [onCancel, setPickerOpen, visible]);
+    const triggerContext = React.useMemo(() => ({
+        ...committedSelection,
+        label: committedSelection.label,
+        open: openPicker,
+        close,
+        isOpen: visible,
+        disabled,
+        placeholder,
+    }), [close, committedSelection, disabled, openPicker, placeholder, visible]);
+    const triggerNode = React.useMemo(() => composeTrigger(children, triggerContext), [children, triggerContext]);
+    const sheetNode = ((0, jsx_runtime_1.jsx)(Sheet_1.Sheet, { placement: "bottom", open: visible, onOpenChange: handleSheetOpenChange, onCloseComplete: onDismissComplete, detents: detents, backgroundColor: theme.colors.surface, handle: false, draggable: false, dismissible: !disabled, nativeProps: { insetAdjustment: 'never' }, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { accessibilityViewIsModal: true, style: [
+                styles.sheetInner,
+                {
+                    backgroundColor: theme.colors.surface,
+                    paddingBottom: safeBottom,
+                },
+            ], pointerEvents: disabled ? 'none' : 'auto', children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.header, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { style: [styles.headerTitle, { color: theme.colors.onSurface }], numberOfLines: 1, children: title !== null && title !== void 0 ? title : t('picker.title') }) }), draftColumns.length > 0 ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.pickerArea, children: [renderColumnHeader && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.columnLabelsRow, children: draftColumns.slice(0, columnsCount).map((columnOptions, columnIndex) => {
+                                const headerContext = {
+                                    columnIndex,
+                                    columnCount: columnsCount,
+                                    options: columnOptions,
+                                    selectedItem: draftItems[columnIndex],
+                                    selectedValue: draftValues[columnIndex],
+                                    selectedLabel: draftLabels[columnIndex],
+                                };
+                                return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.columnLabelItem, { width: columnWidth }], children: renderColumnHeader(headerContext) }, `header-${columnIndex}`));
+                            }) })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.pickerWrapper, children: [react_native_1.Platform.OS !== 'ios' && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.highlightBar, pointerEvents: "none" })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.columnsRow, children: draftColumns.slice(0, columnsCount).map((columnOptions, columnIndex) => {
+                                        var _a;
+                                        return ((0, jsx_runtime_1.jsx)(WheelColumnSlot, { options: columnOptions, columnIndex: columnIndex, parentPath: draftItems.slice(0, columnIndex), accessors: accessors, selectedIndex: Math.max(0, (_a = draftIndices[columnIndex]) !== null && _a !== void 0 ? _a : 0), onIndexChange: handleWheelIndexChange, width: columnWidth, disabled: disabled, wheelsRef: wheelsRef }, `column-${columnIndex}-${columnsCount}`));
+                                    }) }), react_native_1.Platform.OS !== 'ios' && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.topMask, pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(expo_linear_gradient_1.LinearGradient, { colors: [theme.colors.surface, transparentSurface], style: react_native_1.StyleSheet.absoluteFill }) })), react_native_1.Platform.OS !== 'ios' && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.bottomMask, pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(expo_linear_gradient_1.LinearGradient, { colors: [transparentSurface, theme.colors.surface], style: react_native_1.StyleSheet.absoluteFill }) }))] })] })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.emptyState, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { tone: "muted", align: "center", children: emptyText !== null && emptyText !== void 0 ? emptyText : t('picker.empty') }) })), (0, jsx_runtime_1.jsx)(actionBar_1.PickerActionBar, { cancelText: cancelText !== null && cancelText !== void 0 ? cancelText : t('picker.cancel'), confirmText: confirmText !== null && confirmText !== void 0 ? confirmText : t('picker.confirm'), onCancel: handleCancel, onConfirm: handleConfirm, disabled: disabled, confirmDisabled: confirmDisabled })] }) }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [triggerNode, sheetNode] }));
+});
+const styles = react_native_1.StyleSheet.create({
+    sheetInner: {
+        width: '100%',
+        paddingHorizontal: (0, zkit_tools_1.wp)(16),
+        paddingTop: (0, zkit_tools_1.wp)(12),
+    },
+    header: {
+        minHeight: (0, zkit_tools_1.wp)(32),
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: (0, zkit_tools_1.wp)(12),
+    },
+    headerTitle: {
+        fontSize: (0, zkit_tools_1.sp)(16),
+        fontWeight: '600',
+    },
+    pickerArea: {
+        marginTop: (0, zkit_tools_1.wp)(4),
+        paddingVertical: WheelColumn_1.WHEEL_AREA_VERTICAL_INSET,
+    },
+    emptyState: {
+        minHeight: WheelColumn_1.WHEEL_AREA_HEIGHT + (0, zkit_tools_1.wp)(18),
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: (0, zkit_tools_1.wp)(24),
+    },
+    columnLabelsRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginBottom: (0, zkit_tools_1.wp)(6),
+    },
+    columnLabelItem: {
+        alignItems: 'center',
+    },
+    pickerWrapper: {
+        height: ITEM_HEIGHT * VISIBLE_ITEMS,
+        position: 'relative',
+        width: '100%',
+        overflow: 'visible',
+    },
+    highlightBar: {
+        position: 'absolute',
+        top: ITEM_HEIGHT * ((VISIBLE_ITEMS - 1) / 2),
+        left: -(0, zkit_tools_1.wp)(16),
+        right: -(0, zkit_tools_1.wp)(16),
+        height: ITEM_HEIGHT,
+        backgroundColor: WheelColumn_1.WHEEL_SELECTION_BACKGROUND_COLOR,
+        zIndex: 0,
+    },
+    topMask: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        height: ITEM_HEIGHT * ((VISIBLE_ITEMS - 1) / 2),
+        zIndex: 2,
+    },
+    bottomMask: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        height: ITEM_HEIGHT * ((VISIBLE_ITEMS - 1) / 2),
+        zIndex: 2,
+    },
+    columnsRow: {
+        flexDirection: 'row',
+        alignItems: 'stretch',
+        justifyContent: 'space-between',
+        zIndex: 1,
+    },
+});