zkit-ui 1.0.0

package/dist/ui/TextInput/index.js

@@ -0,0 +1,545 @@
+"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.TextInput = exports.TextInputPrimitive = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const MaterialIcons_1 = __importDefault(require("@expo/vector-icons/MaterialIcons"));
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const zkit_tools_1 = require("zkit-tools");
+const useI18n_1 = require("../../i18n/useI18n");
+const useTheme_1 = require("../../theme/useTheme");
+const Text_1 = require("../Text");
+const TextInputPrimitive_1 = require("./TextInputPrimitive");
+var TextInputPrimitive_2 = require("./TextInputPrimitive");
+Object.defineProperty(exports, "TextInputPrimitive", { enumerable: true, get: function () { return TextInputPrimitive_2.TextInputPrimitive; } });
+const SEMANTIC_COLORS = {
+    danger: '#DC2626',
+    error: '#DC2626',
+    info: '#2563EB',
+    success: '#16A34A',
+    warn: '#D97706',
+    warning: '#D97706',
+};
+const SIZE_TOKENS = {
+    sm: {
+        minHeight: 40,
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+        gap: 8,
+        radius: 10,
+        textSize: 14,
+        textLineHeight: 20,
+        clearButtonSize: 26,
+        clearIconSize: 16,
+    },
+    md: {
+        minHeight: 48,
+        paddingHorizontal: 14,
+        paddingVertical: 10,
+        gap: 10,
+        radius: 12,
+        textSize: 15,
+        textLineHeight: 21,
+        clearButtonSize: 28,
+        clearIconSize: 17,
+    },
+    lg: {
+        minHeight: 56,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        gap: 10,
+        radius: 14,
+        textSize: 16,
+        textLineHeight: 22,
+        clearButtonSize: 30,
+        clearIconSize: 18,
+    },
+};
+const WEB_INPUT_RESET_STYLE = react_native_1.Platform.OS === 'web'
+    ? {
+        outlineStyle: 'solid',
+        outlineWidth: 0,
+    }
+    : null;
+const IS_IOS = react_native_1.Platform.OS === 'ios';
+const IS_WEB = react_native_1.Platform.OS === 'web';
+function isPrimitiveNode(node) {
+    return typeof node === 'string' || typeof node === 'number';
+}
+function extractReadableText(node) {
+    if (node == null || typeof node === 'boolean')
+        return undefined;
+    if (isPrimitiveNode(node))
+        return String(node);
+    if (Array.isArray(node)) {
+        const text = node
+            .map((item) => extractReadableText(item))
+            .filter(Boolean)
+            .join(' ')
+            .trim();
+        return text || undefined;
+    }
+    return undefined;
+}
+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 === 'primary'
+        ? theme.colors.primary
+        : key === 'onPrimary'
+            ? theme.colors.onPrimary
+            : key === 'secondary' || key === 'neutral'
+                ? theme.colors.secondary
+                : key === 'onSecondary'
+                    ? theme.colors.onSecondary
+                    : key === 'surface'
+                        ? theme.colors.surface
+                        : key === 'onSurface'
+                            ? theme.colors.onSurface
+                            : key === 'border'
+                                ? theme.colors.border
+                                : key === 'muted'
+                                    ? theme.colors.muted
+                                    : key === 'disabled'
+                                        ? theme.colors.disabled
+                                        : (_a = SEMANTIC_COLORS[key]) !== null && _a !== void 0 ? _a : key;
+    return isProcessableColor(resolved) ? resolved : fallback;
+}
+function resolveToneAccent(tone, theme) {
+    if (tone === 'neutral')
+        return theme.colors.onSurface;
+    if (tone === 'success')
+        return SEMANTIC_COLORS.success;
+    if (tone === 'warning')
+        return SEMANTIC_COLORS.warning;
+    if (tone === 'danger')
+        return SEMANTIC_COLORS.danger;
+    if (tone === 'info')
+        return SEMANTIC_COLORS.info;
+    return theme.colors.primary;
+}
+function resolveMetrics(size, layout) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const token = (_a = SIZE_TOKENS[size]) !== null && _a !== void 0 ? _a : SIZE_TOKENS.md;
+    return {
+        minHeight: (_b = layout === null || layout === void 0 ? void 0 : layout.minHeight) !== null && _b !== void 0 ? _b : (0, zkit_tools_1.wp)(token.minHeight),
+        paddingHorizontal: (_c = layout === null || layout === void 0 ? void 0 : layout.paddingHorizontal) !== null && _c !== void 0 ? _c : (0, zkit_tools_1.wp)(token.paddingHorizontal),
+        paddingVertical: (_d = layout === null || layout === void 0 ? void 0 : layout.paddingVertical) !== null && _d !== void 0 ? _d : (0, zkit_tools_1.wp)(token.paddingVertical),
+        gap: (_e = layout === null || layout === void 0 ? void 0 : layout.gap) !== null && _e !== void 0 ? _e : (0, zkit_tools_1.wp)(token.gap),
+        radius: (_f = layout === null || layout === void 0 ? void 0 : layout.radius) !== null && _f !== void 0 ? _f : (0, zkit_tools_1.wp)(token.radius),
+        textSize: (_g = layout === null || layout === void 0 ? void 0 : layout.textSize) !== null && _g !== void 0 ? _g : (0, zkit_tools_1.wp)(token.textSize),
+        textLineHeight: (_h = layout === null || layout === void 0 ? void 0 : layout.textLineHeight) !== null && _h !== void 0 ? _h : (0, zkit_tools_1.wp)(token.textLineHeight),
+        clearButtonSize: (0, zkit_tools_1.wp)(token.clearButtonSize),
+        clearIconSize: (0, zkit_tools_1.wp)(token.clearIconSize),
+        borderWidth: (0, zkit_tools_1.wp)(1),
+        labelGap: (0, zkit_tools_1.wp)(6),
+        messageGap: (0, zkit_tools_1.wp)(6),
+    };
+}
+function normalizeRows(value, fallback) {
+    if (value == null)
+        return fallback;
+    if (!Number.isFinite(value))
+        return fallback;
+    return Math.max(1, Math.round(value));
+}
+function resolveVisualColors({ colors, disabled, status, theme, variant, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+    const subtleSurface = (_a = colorToRgba(theme.colors.onSurface, 0.04)) !== null && _a !== void 0 ? _a : theme.colors.secondary;
+    const statusColor = status === 'error'
+        ? (_b = colors === null || colors === void 0 ? void 0 : colors.error) !== null && _b !== void 0 ? _b : SEMANTIC_COLORS.danger
+        : status === 'warning'
+            ? (_c = colors === null || colors === void 0 ? void 0 : colors.warning) !== null && _c !== void 0 ? _c : SEMANTIC_COLORS.warning
+            : status === 'success'
+                ? (_d = colors === null || colors === void 0 ? void 0 : colors.success) !== null && _d !== void 0 ? _d : SEMANTIC_COLORS.success
+                : undefined;
+    const baseBackground = variant === 'plain'
+        ? 'transparent'
+        : variant === 'filled'
+            ? subtleSurface
+            : theme.colors.surface;
+    const baseBorder = variant === 'plain' ? 'transparent' : theme.colors.border;
+    const borderColor = (_e = statusColor !== null && statusColor !== void 0 ? statusColor : colors === null || colors === void 0 ? void 0 : colors.border) !== null && _e !== void 0 ? _e : baseBorder;
+    if (disabled) {
+        return {
+            backgroundColor: (_f = colors === null || colors === void 0 ? void 0 : colors.disabledBackground) !== null && _f !== void 0 ? _f : (variant === 'plain' ? 'transparent' : subtleSurface),
+            borderColor: (_g = colors === null || colors === void 0 ? void 0 : colors.disabledBorder) !== null && _g !== void 0 ? _g : (variant === 'plain' ? 'transparent' : theme.colors.border),
+            textColor: (_h = colors === null || colors === void 0 ? void 0 : colors.disabledText) !== null && _h !== void 0 ? _h : theme.colors.disabled,
+            placeholderColor: (_j = colors === null || colors === void 0 ? void 0 : colors.placeholder) !== null && _j !== void 0 ? _j : theme.colors.disabled,
+            labelColor: (_k = colors === null || colors === void 0 ? void 0 : colors.label) !== null && _k !== void 0 ? _k : theme.colors.disabled,
+            messageColor: (_l = colors === null || colors === void 0 ? void 0 : colors.description) !== null && _l !== void 0 ? _l : theme.colors.disabled,
+            countColor: (_m = colors === null || colors === void 0 ? void 0 : colors.description) !== null && _m !== void 0 ? _m : theme.colors.disabled,
+            iconColor: (_o = colors === null || colors === void 0 ? void 0 : colors.icon) !== null && _o !== void 0 ? _o : theme.colors.disabled,
+        };
+    }
+    return {
+        backgroundColor: (_p = colors === null || colors === void 0 ? void 0 : colors.background) !== null && _p !== void 0 ? _p : baseBackground,
+        borderColor,
+        textColor: (_q = colors === null || colors === void 0 ? void 0 : colors.text) !== null && _q !== void 0 ? _q : theme.colors.onSurface,
+        placeholderColor: (_r = colors === null || colors === void 0 ? void 0 : colors.placeholder) !== null && _r !== void 0 ? _r : theme.colors.muted,
+        labelColor: (_s = colors === null || colors === void 0 ? void 0 : colors.label) !== null && _s !== void 0 ? _s : theme.colors.onSurface,
+        messageColor: (_t = statusColor !== null && statusColor !== void 0 ? statusColor : colors === null || colors === void 0 ? void 0 : colors.description) !== null && _t !== void 0 ? _t : theme.colors.muted,
+        countColor: (_u = colors === null || colors === void 0 ? void 0 : colors.description) !== null && _u !== void 0 ? _u : theme.colors.muted,
+        iconColor: (_v = colors === null || colors === void 0 ? void 0 : colors.icon) !== null && _v !== void 0 ? _v : theme.colors.muted,
+    };
+}
+function renderTextNode(node, props) {
+    if (node == null || typeof node === 'boolean')
+        return null;
+    if (isPrimitiveNode(node)) {
+        return (0, jsx_runtime_1.jsx)(Text_1.Text, { ...props, children: node });
+    }
+    return node;
+}
+function renderAffix(node, color, style, textSize, lineHeight) {
+    if (node == null || typeof node === 'boolean')
+        return null;
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { pointerEvents: "box-none", style: [styles.affix, style], children: isPrimitiveNode(node) ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { numberOfLines: 1, style: [
+                styles.affixText,
+                {
+                    color,
+                    fontSize: textSize,
+                    lineHeight,
+                },
+            ], children: node })) : (node) }));
+}
+function assignRef(ref, value) {
+    if (typeof ref === 'function') {
+        ref(value);
+        return;
+    }
+    if (ref) {
+        ref.current = value;
+    }
+}
+const TextInputBase = React.forwardRef(function TextInput({ value, defaultValue = '', onChange, onNativeChange, onSubmit, disabled = false, readOnly = false, required = false, invalid, variant = 'outline', tone = 'primary', status = 'default', size = 'md', color, colors, layout, label, labelAction, description, error, prefix, suffix, clearable = false, clearIcon, clearAccessibilityLabel, onClear, minRows, maxRows, showCount = false, renderCount, style, fieldStyle, inputStyle, labelStyle, descriptionStyle, errorStyle, countStyle, prefixStyle, suffixStyle, clearButtonStyle, maxFontSizeMultiplier, placeholderTextColor, selectionColor, cursorColor, selectionHandleColor, onBlur, onFocus, onSubmitEditing, accessibilityLabel, accessibilityHint, accessibilityState, maxLength, multiline = false, numberOfLines, testID, underlineColorAndroid, ...nativeProps }, forwardedRef) {
+    var _a, _b, _c;
+    const theme = (0, useTheme_1.useTheme)();
+    const { t } = (0, useI18n_1.useI18n)();
+    const inputRef = React.useRef(null);
+    const isControlled = value !== undefined;
+    const initialValueRef = React.useRef(defaultValue);
+    const currentValueRef = React.useRef(isControlled ? value !== null && value !== void 0 ? value : '' : initialValueRef.current);
+    const shouldTrackValue = clearable || showCount || renderCount != null;
+    const hasSyncedUncontrolledValueRef = React.useRef(false);
+    const [, scheduleValueRender] = React.useReducer((revision) => revision + 1, 0);
+    if (isControlled) {
+        currentValueRef.current = value !== null && value !== void 0 ? value : '';
+    }
+    const shouldSyncUncontrolledValue = !isControlled && (shouldTrackValue || hasSyncedUncontrolledValueRef.current);
+    React.useEffect(() => {
+        if (!isControlled && shouldTrackValue) {
+            hasSyncedUncontrolledValueRef.current = true;
+        }
+    }, [isControlled, shouldTrackValue]);
+    const setInputRef = React.useCallback((node) => {
+        inputRef.current = node;
+        assignRef(forwardedRef, node);
+    }, [forwardedRef]);
+    const interactive = !disabled && !readOnly;
+    const resolvedStatus = error != null || invalid ? 'error' : status;
+    const metrics = React.useMemo(() => resolveMetrics(size, layout), [layout, size]);
+    const accentColor = React.useMemo(() => resolveColorToken(color, resolveToneAccent(tone, theme), theme), [color, theme, tone]);
+    const visualColors = React.useMemo(() => resolveVisualColors({
+        colors,
+        disabled,
+        status: resolvedStatus,
+        theme,
+        variant,
+    }), [colors, disabled, resolvedStatus, theme, variant]);
+    const displayValue = isControlled ? value !== null && value !== void 0 ? value : '' : currentValueRef.current;
+    const nativeValue = isControlled || shouldSyncUncontrolledValue ? displayValue : undefined;
+    const nativeDefaultValue = !isControlled && !shouldSyncUncontrolledValue ? initialValueRef.current : undefined;
+    const hasValue = displayValue.length > 0;
+    const count = displayValue.length;
+    const resolvedMinRows = multiline
+        ? normalizeRows(minRows !== null && minRows !== void 0 ? minRows : numberOfLines, 3)
+        : 1;
+    const resolvedMaxRows = multiline && maxRows != null
+        ? Math.max(resolvedMinRows, normalizeRows(maxRows, resolvedMinRows))
+        : undefined;
+    const inputMinHeight = metrics.textLineHeight * resolvedMinRows;
+    const inputMaxHeight = resolvedMaxRows == null ? undefined : metrics.textLineHeight * resolvedMaxRows;
+    const fieldPaddingHorizontal = variant === 'plain' ? 0 : metrics.paddingHorizontal;
+    const fieldPaddingVertical = variant === 'plain' ? 0 : metrics.paddingVertical;
+    const fieldBorderWidth = variant === 'plain' ? 0 : metrics.borderWidth;
+    const fieldMinHeight = Math.max(metrics.minHeight, inputMinHeight + fieldPaddingVertical * 2 + fieldBorderWidth * 2);
+    const singleLineInputHeight = Math.max(metrics.textLineHeight, fieldMinHeight - fieldPaddingVertical * 2 - fieldBorderWidth * 2);
+    const fieldMaxHeight = (_a = layout === null || layout === void 0 ? void 0 : layout.maxHeight) !== null && _a !== void 0 ? _a : (inputMaxHeight == null
+        ? undefined
+        : inputMaxHeight + fieldPaddingVertical * 2 + fieldBorderWidth * 2);
+    const rootSizeStyle = React.useMemo(() => ({
+        ...((layout === null || layout === void 0 ? void 0 : layout.width) !== undefined ? { width: layout.width } : undefined),
+        ...((layout === null || layout === void 0 ? void 0 : layout.minWidth) !== undefined ? { minWidth: layout.minWidth } : undefined),
+        ...((layout === null || layout === void 0 ? void 0 : layout.maxWidth) !== undefined ? { maxWidth: layout.maxWidth } : undefined),
+    }), [layout === null || layout === void 0 ? void 0 : layout.maxWidth, layout === null || layout === void 0 ? void 0 : layout.minWidth, layout === null || layout === void 0 ? void 0 : layout.width]);
+    const fieldSizeStyle = React.useMemo(() => ({
+        ...((layout === null || layout === void 0 ? void 0 : layout.height) !== undefined
+            ? { height: layout.height }
+            : multiline
+                ? undefined
+                : { height: fieldMinHeight }),
+        ...(multiline && fieldMaxHeight !== undefined ? { maxHeight: fieldMaxHeight } : undefined),
+        minHeight: fieldMinHeight,
+        paddingHorizontal: fieldPaddingHorizontal,
+        paddingVertical: fieldPaddingVertical,
+    }), [
+        fieldMaxHeight,
+        fieldMinHeight,
+        fieldPaddingHorizontal,
+        fieldPaddingVertical,
+        layout === null || layout === void 0 ? void 0 : layout.height,
+        multiline,
+    ]);
+    const fieldVisualStyle = React.useMemo(() => ({
+        alignItems: multiline ? 'flex-start' : 'center',
+        backgroundColor: visualColors.backgroundColor,
+        borderColor: visualColors.borderColor,
+        borderRadius: variant === 'plain' ? 0 : metrics.radius,
+        borderWidth: fieldBorderWidth,
+        gap: metrics.gap,
+    }), [
+        fieldBorderWidth,
+        metrics.gap,
+        metrics.radius,
+        multiline,
+        variant,
+        visualColors.backgroundColor,
+        visualColors.borderColor,
+    ]);
+    const inputBaseStyle = React.useMemo(() => ({
+        backgroundColor: 'transparent',
+        borderWidth: 0,
+        color: visualColors.textColor,
+        fontSize: metrics.textSize,
+        includeFontPadding: false,
+        lineHeight: IS_IOS && !multiline ? undefined : metrics.textLineHeight,
+        maxHeight: multiline ? inputMaxHeight : undefined,
+        minHeight: multiline ? inputMinHeight : singleLineInputHeight,
+        padding: 0,
+        paddingBottom: 0,
+        paddingHorizontal: 0,
+        paddingTop: 0,
+        paddingVertical: 0,
+        textAlignVertical: multiline ? 'top' : 'center',
+    }), [
+        inputMaxHeight,
+        inputMinHeight,
+        metrics.textLineHeight,
+        metrics.textSize,
+        multiline,
+        singleLineInputHeight,
+        visualColors.textColor,
+    ]);
+    const finalSelectionColor = selectionColor !== null && selectionColor !== void 0 ? selectionColor : accentColor;
+    const finalCursorColor = cursorColor !== null && cursorColor !== void 0 ? cursorColor : finalSelectionColor;
+    const finalHandleColor = selectionHandleColor !== null && selectionHandleColor !== void 0 ? selectionHandleColor : finalSelectionColor;
+    const webCaretStyle = React.useMemo(() => (IS_WEB ? { caretColor: finalCursorColor } : null), [finalCursorColor]);
+    const computedAccessibilityLabel = (_b = accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : extractReadableText(label)) !== null && _b !== void 0 ? _b : nativeProps.placeholder;
+    const computedAccessibilityHint = accessibilityHint !== null && accessibilityHint !== void 0 ? accessibilityHint : extractReadableText(resolvedStatus === 'error' ? error : description);
+    const finalClearAccessibilityLabel = clearAccessibilityLabel !== null && clearAccessibilityLabel !== void 0 ? clearAccessibilityLabel : t('textInput.clear');
+    const commitValue = React.useCallback((nextValue) => {
+        currentValueRef.current = nextValue;
+        if (shouldSyncUncontrolledValue) {
+            scheduleValueRender();
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
+    }, [onChange, shouldSyncUncontrolledValue]);
+    const handleChangeText = React.useCallback((nextValue) => {
+        commitValue(nextValue);
+    }, [commitValue]);
+    const handleNativeChange = React.useCallback((event) => {
+        onNativeChange === null || onNativeChange === void 0 ? void 0 : onNativeChange(event);
+    }, [onNativeChange]);
+    const handleFocus = React.useCallback((event) => {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    }, [onFocus]);
+    const handleBlur = React.useCallback((event) => {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    }, [onBlur]);
+    const handleSubmitEditing = React.useCallback((event) => {
+        onSubmitEditing === null || onSubmitEditing === void 0 ? void 0 : onSubmitEditing(event);
+        onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(currentValueRef.current, event);
+    }, [onSubmit, onSubmitEditing]);
+    const handleClear = React.useCallback((event) => {
+        var _a, _b;
+        event.preventDefault();
+        if (!interactive)
+            return;
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.clear();
+        commitValue('');
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+        (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+    }, [commitValue, interactive, onClear]);
+    const labelNode = renderTextNode(label, {
+        variant: 'label',
+        color: visualColors.labelColor,
+        weight: 'semibold',
+        style: [styles.labelText, labelStyle],
+    });
+    const messageNode = resolvedStatus === 'error' && error != null
+        ? renderTextNode(error, {
+            variant: 'caption',
+            color: visualColors.messageColor,
+            style: [styles.messageText, errorStyle],
+        })
+        : renderTextNode(description, {
+            variant: 'caption',
+            color: visualColors.messageColor,
+            style: [styles.messageText, descriptionStyle],
+        });
+    const countNode = showCount || renderCount
+        ? renderTextNode((_c = renderCount === null || renderCount === void 0 ? void 0 : renderCount({ count, maxLength })) !== null && _c !== void 0 ? _c : (maxLength != null ? `${count}/${maxLength}` : String(count)), {
+            variant: 'caption',
+            color: visualColors.countColor,
+            style: [styles.countText, countStyle],
+        })
+        : null;
+    const prefixNode = renderAffix(prefix, visualColors.iconColor, prefixStyle, metrics.textSize, metrics.textLineHeight);
+    const suffixNode = renderAffix(suffix, visualColors.iconColor, suffixStyle, metrics.textSize, metrics.textLineHeight);
+    const showClearButton = clearable && interactive && hasValue;
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.root, rootSizeStyle, style], children: [labelNode || labelAction ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.labelRow, { marginBottom: metrics.labelGap }], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.labelContent, children: [labelNode, required && labelNode ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { accessibilityElementsHidden: true, tone: "danger", importantForAccessibility: "no", style: styles.requiredMark, children: "*" })) : null] }), labelAction ? (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.labelAction, children: labelAction }) : null] })) : null, (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.field, fieldSizeStyle, fieldVisualStyle, fieldStyle], children: [prefixNode, (0, jsx_runtime_1.jsx)(TextInputPrimitive_1.TextInputPrimitive, { ref: setInputRef, ...nativeProps, accessibilityHint: computedAccessibilityHint, accessibilityLabel: computedAccessibilityLabel, accessibilityState: {
+                            ...accessibilityState,
+                            disabled,
+                        }, cursorColor: finalCursorColor, defaultValue: nativeDefaultValue, editable: interactive, maxFontSizeMultiplier: maxFontSizeMultiplier, maxLength: maxLength, multiline: multiline, numberOfLines: multiline ? resolvedMinRows : numberOfLines, onBlur: handleBlur, onChange: handleNativeChange, onChangeText: handleChangeText, onFocus: handleFocus, onSubmitEditing: handleSubmitEditing, placeholderTextColor: placeholderTextColor !== null && placeholderTextColor !== void 0 ? placeholderTextColor : visualColors.placeholderColor, readOnly: readOnly || disabled, selectionColor: finalSelectionColor, selectionHandleColor: finalHandleColor, style: [styles.input, inputBaseStyle, WEB_INPUT_RESET_STYLE, webCaretStyle, inputStyle], testID: testID, underlineColorAndroid: underlineColorAndroid !== null && underlineColorAndroid !== void 0 ? underlineColorAndroid : 'transparent', value: nativeValue }), showClearButton ? ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { accessibilityLabel: finalClearAccessibilityLabel, accessibilityRole: "button", hitSlop: {
+                            bottom: (0, zkit_tools_1.wp)(8),
+                            left: (0, zkit_tools_1.wp)(8),
+                            right: (0, zkit_tools_1.wp)(8),
+                            top: (0, zkit_tools_1.wp)(8),
+                        }, onPress: handleClear, style: [
+                            styles.clearButton,
+                            {
+                                height: metrics.clearButtonSize,
+                                width: metrics.clearButtonSize,
+                            },
+                            clearButtonStyle,
+                        ], children: clearIcon !== null && clearIcon !== void 0 ? clearIcon : ((0, jsx_runtime_1.jsx)(MaterialIcons_1.default, { color: visualColors.iconColor, name: "close", size: metrics.clearIconSize })) })) : null, suffixNode] }), messageNode || countNode ? ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [styles.footerRow, { marginTop: metrics.messageGap }], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.messageSlot, children: messageNode }), countNode ? (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.countSlot, children: countNode }) : null] })) : null] }));
+});
+TextInputBase.displayName = 'TextInput';
+exports.TextInput = Object.assign(TextInputBase, { State: TextInputPrimitive_1.TextInputPrimitive.State });
+const styles = react_native_1.StyleSheet.create({
+    root: {
+        width: '100%',
+    },
+    labelRow: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+    labelContent: {
+        alignItems: 'center',
+        flex: 1,
+        flexDirection: 'row',
+        minWidth: 0,
+    },
+    labelText: {
+        flexShrink: 1,
+    },
+    requiredMark: {
+        fontSize: (0, zkit_tools_1.wp)(13),
+        fontWeight: '700',
+        lineHeight: (0, zkit_tools_1.wp)(18),
+        marginLeft: (0, zkit_tools_1.wp)(3),
+    },
+    labelAction: {
+        flexShrink: 0,
+        marginLeft: (0, zkit_tools_1.wp)(12),
+    },
+    field: {
+        flexDirection: 'row',
+        overflow: 'hidden',
+    },
+    input: {
+        flex: 1,
+        margin: 0,
+        minWidth: 0,
+    },
+    affix: {
+        alignItems: 'center',
+        flexShrink: 0,
+        justifyContent: 'center',
+        minHeight: (0, zkit_tools_1.wp)(24),
+    },
+    affixText: {
+        fontWeight: '500',
+    },
+    clearButton: {
+        alignItems: 'center',
+        borderRadius: (0, zkit_tools_1.wp)(999),
+        flexShrink: 0,
+        justifyContent: 'center',
+    },
+    footerRow: {
+        alignItems: 'flex-start',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+    messageSlot: {
+        flex: 1,
+        minWidth: 0,
+    },
+    messageText: {
+        flexShrink: 1,
+    },
+    countSlot: {
+        flexShrink: 0,
+        marginLeft: (0, zkit_tools_1.wp)(12),
+    },
+    countText: {
+        textAlign: 'right',
+    },
+});

package/dist/ui/WheelColumn/ZKitWheelPickerNativeComponent.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { type ColorValue, type NativeSyntheticEvent, type ViewProps } from 'react-native';
+export type ZKitWheelPickerValue = string | number;
+export type ZKitWheelPickerItem = {
+    label: string;
+    value: ZKitWheelPickerValue;
+    textColor?: ColorValue;
+    testID?: string;
+};
+export type ZKitWheelPickerChangeEvent = {
+    newIndex: number;
+    newValue: ZKitWheelPickerValue | null;
+};
+export type ZKitWheelPickerProps = ViewProps & {
+    items: ZKitWheelPickerItem[];
+    selectedIndex: number;
+    color?: ColorValue;
+    fontFamily?: string;
+    fontSize?: number;
+    fontStyle?: string;
+    fontWeight?: string;
+    numberOfLines?: number;
+    rowHeight?: number;
+    onChange?: (event: NativeSyntheticEvent<ZKitWheelPickerChangeEvent>) => void;
+};
+export declare const ZKitWheelPicker: React.ForwardRefExoticComponent<ViewProps & {
+    items: ZKitWheelPickerItem[];
+    selectedIndex: number;
+    color?: ColorValue;
+    fontFamily?: string;
+    fontSize?: number;
+    fontStyle?: string;
+    fontWeight?: string;
+    numberOfLines?: number;
+    rowHeight?: number;
+    onChange?: (event: NativeSyntheticEvent<ZKitWheelPickerChangeEvent>) => void;
+} & React.RefAttributes<React.Component<ZKitWheelPickerProps, {}, any> & import("react-native").NativeMethods>>;
+export declare function syncZKitWheelPickerCurrentSelection(target: unknown): boolean;
+//# sourceMappingURL=ZKitWheelPickerNativeComponent.d.ts.map

package/dist/ui/WheelColumn/ZKitWheelPickerNativeComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ZKitWheelPickerNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/ui/WheelColumn/ZKitWheelPickerNativeComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAKL,KAAK,UAAU,EACf,KAAK,oBAAoB,EACzB,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAItB,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,MAAM,CAAC;AAEnD,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,oBAAoB,CAAC;IAC5B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,oBAAoB,GAAG,IAAI,CAAC;CACvC,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG;IAC7C,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,0BAA0B,CAAC,KAAK,IAAI,CAAC;CAC9E,CAAC;AAOF,eAAO,MAAM,eAAe;WAjBnB,mBAAmB,EAAE;mBACb,MAAM;YACb,UAAU;iBACL,MAAM;eACR,MAAM;gBACL,MAAM;iBACL,MAAM;oBACH,MAAM;gBACV,MAAM;eACP,CAAC,KAAK,EAAE,oBAAoB,CAAC,0BAA0B,CAAC,KAAK,IAAI;+GAiB5E,CAAC;AAEH,wBAAgB,mCAAmC,CAAC,MAAM,EAAE,OAAO,WAWlE"}

package/dist/ui/WheelColumn/ZKitWheelPickerNativeComponent.js

@@ -0,0 +1,60 @@
+"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.ZKitWheelPicker = void 0;
+exports.syncZKitWheelPickerCurrentSelection = syncZKitWheelPickerCurrentSelection;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const COMPONENT_NAME = 'ZKitWheelPicker';
+const NativeZKitWheelPicker = react_native_1.Platform.OS === 'ios' ? (0, react_native_1.requireNativeComponent)(COMPONENT_NAME) : null;
+exports.ZKitWheelPicker = React.forwardRef(function ZKitWheelPicker(props, ref) {
+    if (react_native_1.Platform.OS !== 'ios' || NativeZKitWheelPicker == null) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(NativeZKitWheelPicker, { ...props, ref: ref });
+});
+function syncZKitWheelPickerCurrentSelection(target) {
+    var _a, _b;
+    if (react_native_1.Platform.OS !== 'ios')
+        return false;
+    const command = (_b = (_a = react_native_1.UIManager.getViewManagerConfig(COMPONENT_NAME)) === null || _a === void 0 ? void 0 : _a.Commands) === null || _b === void 0 ? void 0 : _b.syncCurrentSelection;
+    const handle = (0, react_native_1.findNodeHandle)(target);
+    if (command == null || handle == null) {
+        return false;
+    }
+    react_native_1.UIManager.dispatchViewManagerCommand(handle, command, []);
+    return true;
+}

package/dist/ui/WheelColumn/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const WHEEL_SELECTION_BACKGROUND_COLOR = "#F2F2F2";
+//# sourceMappingURL=constants.d.ts.map

package/dist/ui/WheelColumn/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/ui/WheelColumn/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gCAAgC,YAAY,CAAC"}

package/dist/ui/WheelColumn/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WHEEL_SELECTION_BACKGROUND_COLOR = void 0;
+exports.WHEEL_SELECTION_BACKGROUND_COLOR = '#F2F2F2';