react-native-system-ui 0.0.7 → 1.0.1

package/dist/es/components/picker/Picker.js

@@ -2,130 +2,115 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Pressable, Text, View, Platform, StyleSheet, ScrollView, PanResponder } from 'react-native';
 import Loading from '../loading';
+import { useLocale } from '../config-provider/useLocale';
 import { withAlpha } from '../../utils/color';
 import { isFiniteNumber, isText } from '../../utils/validate';
 import { clamp, isObject, shallowEqualArray } from '../../utils';
 import { usePickerTokens } from './tokens';
-export const toArrayValue = value => {
-  if (Array.isArray(value)) return value.filter(v => v !== undefined && v !== null);
-  if (value === undefined || value === null) return [];
-  return [value];
-};
+import { createHairlineView } from '../../utils/hairline';
+export const toArrayValue = value => Array.isArray(value) ? value.filter(v => v !== undefined && v !== null) : value == null ? [] : [value];
 const isColumnWithOptions = col => !!col && isObject(col) && 'options' in col && Array.isArray(col.options);
-const hasChildren = option => {
-  return !!option && isObject(option) && Array.isArray(option.children) && option.children.length > 0;
-};
-export const findEnabledIndex = (options, startIndex) => {
+const hasChildren = option => !!option && isObject(option) && Array.isArray(option.children) && option.children.length > 0;
+export const findEnabledIndex = (options, startIdx) => {
   if (!options.length) return -1;
-  const clampIndex = Math.min(Math.max(startIndex, 0), options.length - 1);
-  if (!options[clampIndex]?.disabled) return clampIndex;
-  for (let i = clampIndex + 1; i < options.length; i += 1) {
+  const clampIdx = Math.min(Math.max(startIdx, 0), options.length - 1);
+  if (!options[clampIdx]?.disabled) return clampIdx;
+  for (let i = clampIdx + 1; i < options.length; i += 1) {
     if (!options[i]?.disabled) return i;
   }
-  for (let i = clampIndex - 1; i >= 0; i -= 1) {
+  for (let i = clampIdx - 1; i >= 0; i -= 1) {
     if (!options[i]?.disabled) return i;
   }
   return -1;
 };
-const normalizeMultiple = (columnsList, defaults, rawValue) => {
-  const values = [];
-  const options = [];
-  columnsList.forEach((opts, index) => {
-    const current = rawValue[index];
-    const defaultIndex = defaults[index] !== undefined ? opts.findIndex(item => item.value === defaults[index]) : -1;
-    const currentIndex = opts.findIndex(item => item.value === current);
-    const startIndex = currentIndex >= 0 ? currentIndex : defaultIndex >= 0 ? defaultIndex : 0;
-    const targetIndex = findEnabledIndex(opts, startIndex);
-    const target = targetIndex >= 0 ? opts[targetIndex] : undefined;
-    const valid = currentIndex >= 0 && !opts[currentIndex]?.disabled;
-    values[index] = valid ? current : target?.value ?? defaults[index] ?? opts[0]?.value;
-    options[index] = target;
+const normalizeMultiple = (cols, defs, raw) => {
+  const vals = [],
+    opts = [];
+  cols.forEach((colOpts, idx) => {
+    const curr = raw[idx];
+    const defIdx = defs[idx] !== undefined ? colOpts.findIndex(item => item.value === defs[idx]) : -1;
+    const currIdx = colOpts.findIndex(item => item.value === curr);
+    const startIdx = currIdx >= 0 ? currIdx : defIdx >= 0 ? defIdx : 0;
+    const tgtIdx = findEnabledIndex(colOpts, startIdx);
+    const tgt = tgtIdx >= 0 ? colOpts[tgtIdx] : undefined;
+    const valid = currIdx >= 0 && !colOpts[currIdx]?.disabled;
+    vals[idx] = valid ? curr : tgt?.value ?? defs[idx] ?? colOpts[0]?.value;
+    opts[idx] = tgt;
   });
   return {
-    columns: columnsList,
-    values,
-    options
+    columns: cols,
+    values: vals,
+    options: opts
   };
 };
-const normalizeCascade = (rootOptions, rawValue) => {
-  const columns = [];
-  const values = [];
-  const options = [];
-  let currentOptions = rootOptions;
-  let depth = 0;
-  while (currentOptions && currentOptions.length && depth < 10) {
-    columns.push(currentOptions);
-    const current = rawValue[depth];
-    const startIndex = currentOptions.findIndex(item => item.value === current || String(item.value) === String(current));
-    const targetIndex = findEnabledIndex(currentOptions, startIndex >= 0 ? startIndex : 0);
-    const target = targetIndex >= 0 ? currentOptions[targetIndex] : currentOptions[0];
-    values[depth] = target?.value;
-    options[depth] = target;
-    if (target && hasChildren(target)) {
-      currentOptions = target.children;
-      depth += 1;
-    } else {
-      break;
-    }
+const normalizeCascade = (root, raw) => {
+  const cols = [],
+    vals = [],
+    opts = [];
+  let curr = root;
+  let d = 0;
+  while (curr && curr.length && d < 10) {
+    cols.push(curr);
+    const c = raw[d];
+    const startIdx = curr.findIndex(item => item.value === c || String(item.value) === String(c));
+    const tgtIdx = findEnabledIndex(curr, startIdx >= 0 ? startIdx : 0);
+    const tgt = tgtIdx >= 0 ? curr[tgtIdx] : curr[0];
+    vals[d] = tgt?.value;
+    opts[d] = tgt;
+    if (tgt && hasChildren(tgt)) {
+      curr = tgt.children;
+      d += 1;
+    } else break;
   }
   return {
-    columns,
-    values,
-    options
+    columns: cols,
+    values: vals,
+    options: opts
   };
 };
-export const prepareColumns = (columnsInput = []) => {
-  if (!Array.isArray(columnsInput) || columnsInput.length === 0) {
-    return {
-      type: 'single',
-      columnsList: [],
-      defaults: [],
-      cascadeRoot: []
-    };
-  }
-  const everyPlainOption = columnsInput.every(item => !Array.isArray(item) && !isColumnWithOptions(item));
-  const cascade = everyPlainOption && columnsInput.some(item => hasChildren(item));
-  if (cascade) {
-    return {
-      type: 'cascade',
-      columnsList: [],
-      defaults: [],
-      cascadeRoot: columnsInput
-    };
-  }
-  const asArray = columnsInput;
-  const columnsList = [];
-  const defaults = [];
-  const treatAsSingleColumn = everyPlainOption && !cascade;
-  if (treatAsSingleColumn) {
-    columnsList.push(columnsInput);
-    defaults.push(undefined);
-  } else {
-    asArray.forEach(col => {
-      if (Array.isArray(col)) {
-        columnsList.push(col);
-        defaults.push(undefined);
-      } else if (isColumnWithOptions(col)) {
-        const c = col;
-        columnsList.push(c.options ?? []);
-        defaults.push(c.defaultValue);
-      }
-    });
-  }
+export const prepareColumns = (input = []) => {
+  if (!Array.isArray(input) || input.length === 0) return {
+    type: 'single',
+    columnsList: [],
+    defaults: [],
+    cascadeRoot: []
+  };
+  const everyPlain = input.every(item => !Array.isArray(item) && !isColumnWithOptions(item));
+  const cascade = everyPlain && input.some(item => hasChildren(item));
+  if (cascade) return {
+    type: 'cascade',
+    columnsList: [],
+    defaults: [],
+    cascadeRoot: input
+  };
+  const asArray = input;
+  const cols = [],
+    defs = [];
+  const treatAsSingle = everyPlain && !cascade;
+  if (treatAsSingle) {
+    cols.push(input);
+    defs.push(undefined);
+  } else asArray.forEach(col => {
+    if (Array.isArray(col)) {
+      cols.push(col);
+      defs.push(undefined);
+    } else if (isColumnWithOptions(col)) {
+      const c = col;
+      cols.push(c.options ?? []);
+      defs.push(c.defaultValue);
+    }
+  });
   return {
     type: 'multiple',
-    columnsList,
-    defaults
+    columnsList: cols,
+    defaults: defs
   };
 };
-export const normalizePicker = (prepared, rawValueInput = []) => {
-  const rawValue = Array.isArray(rawValueInput) ? rawValueInput : [];
-  if (prepared.type === 'cascade' && prepared.cascadeRoot?.length) {
-    return normalizeCascade(prepared.cascadeRoot, rawValue);
-  }
-  return normalizeMultiple(prepared.columnsList, prepared.defaults, rawValue);
+export const normalizePicker = (prep, raw = []) => {
+  const rawVal = Array.isArray(raw) ? raw : [];
+  return prep.type === 'cascade' && prep.cascadeRoot?.length ? normalizeCascade(prep.cascadeRoot, rawVal) : normalizeMultiple(prep.columnsList, prep.defaults, rawVal);
 };
-const wheelStyles = StyleSheet.create({
+const W = StyleSheet.create({
   column: {
     flex: 1
   },
@@ -133,13 +118,10 @@ const wheelStyles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center'
   },
-  indicator: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    zIndex: 3
+  grab: {
+    cursor: 'pointer',
+    userSelect: 'none',
+    touchAction: 'none'
   }
 });
 const WheelPickerItemInner = ({
@@ -155,44 +137,44 @@ const WheelPickerItemInner = ({
     disabled
   });
   return /*#__PURE__*/React.createElement(View, {
-    style: [wheelStyles.option, {
+    style: [W.option, {
       height: itemHeight
     }]
   }, content);
 };
-const WheelPickerItem = /*#__PURE__*/React.memo(WheelPickerItemInner, (prev, next) => prev.item === next.item && prev.index === next.index && prev.itemHeight === next.itemHeight && prev.active === next.active && prev.disabled === next.disabled && prev.renderItem === next.renderItem);
-const getVelocityBucket = velocity => {
-  const abs = Math.abs(velocity);
+const WheelPickerItem = /*#__PURE__*/React.memo(WheelPickerItemInner);
+const getVelocityBucket = v => {
+  const abs = Math.abs(v);
   if (abs > 1.2) return 2;
   if (abs > 0.6) return 1;
   return 0;
 };
-const adjustIndex = (index, options) => {
-  const total = options.length;
+const adjustIndex = (idx, opts) => {
+  const total = opts.length;
   if (!total) return 0;
-  const i = clamp(index, 0, total - 1);
-  const next = findEnabledIndex(options, i);
+  const i = clamp(idx, 0, total - 1);
+  const next = findEnabledIndex(opts, i);
   return next >= 0 ? next : i;
 };
-const indexToOffset = (index, itemHeight) => -index * itemHeight;
-const offsetToIndex = (offset, itemHeight, total, options) => {
-  const minOffset = -Math.max(0, total - 1) * itemHeight;
-  const off = clamp(offset, minOffset, 0);
-  let index = Math.round(-off / itemHeight);
-  index = adjustIndex(index, options);
-  const snapOffset = indexToOffset(index, itemHeight);
+const indexToOffset = (idx, h) => -idx * h;
+const offsetToIndex = (off, h, total, opts) => {
+  const minOff = -Math.max(0, total - 1) * h;
+  const offClamped = clamp(off, minOff, 0);
+  let idx = Math.round(-offClamped / h);
+  idx = adjustIndex(idx, opts);
+  const snapOff = indexToOffset(idx, h);
   return {
-    index,
-    snapOffset
+    index: idx,
+    snapOffset: snapOff
   };
 };
-const shouldMomentum = (distance, duration) => duration < 500 && Math.abs(distance) > 8;
-const momentumTarget = (distance, duration, currentOffset, itemHeight, minOffset) => {
-  const speed = Math.abs(distance / duration);
-  const extra = speed / 0.0025 * (distance < 0 ? -1 : 1);
-  const target = clamp(currentOffset + extra, minOffset, 0);
-  const snapIndex = Math.round(-target / itemHeight);
-  return indexToOffset(snapIndex, itemHeight);
+const shouldMomentum = (dist, dur) => dur < 500 && Math.abs(dist) > 8;
+const momentumTarget = (dist, dur, currOff, h, minOff) => {
+  const speed = Math.abs(dist / dur);
+  const extra = speed / 0.0025 * (dist < 0 ? -1 : 1);
+  const tgt = clamp(currOff + extra, minOff, 0);
+  const snapIdx = Math.round(-tgt / h);
+  return indexToOffset(snapIdx, h);
 };
 const WheelPickerInner = ({
   data,
@@ -214,86 +196,89 @@ const WheelPickerInner = ({
   swipeDuration = 300
 }) => {
   const isWeb = Platform.OS === 'web';
-  const listRef = useRef(null);
-  const scrollRef = useRef(null);
+  const listRef = useRef(null),
+    scrollRef = useRef(null);
   const spacerHeight = visibleRest * itemHeight;
   const total = data.length;
-  const maxIndex = Math.max(0, total - 1);
-  const minOffset = -maxIndex * itemHeight;
+  const maxIdx = Math.max(0, total - 1);
+  const minOff = -maxIdx * itemHeight;
   const containerHeight = itemHeight * (visibleRest * 2 + 1);
-  const rawSelectedIndex = clamp(selectedIndex, 0, maxIndex);
-  const enabledSelectedIndex = findEnabledIndex(data, rawSelectedIndex);
-  const safeSelectedIndex = enabledSelectedIndex >= 0 ? enabledSelectedIndex : rawSelectedIndex;
-  const visibleCount = visibleRest * 2 + 1;
-  const effectiveScrollThrottle = total > visibleCount * 20 ? 32 : scrollEventThrottle;
-  const webVirtualEnabled = total > visibleCount * 4;
+  const rawSelIdx = clamp(selectedIndex, 0, maxIdx);
+  const enabledSelIdx = findEnabledIndex(data, rawSelIdx);
+  const safeSelIdx = enabledSelIdx >= 0 ? enabledSelIdx : rawSelIdx;
+  const visibleCnt = visibleRest * 2 + 1;
+  const effectiveScrollThrottle = total > visibleCnt * 20 ? 32 : scrollEventThrottle;
+  const webVirtualEnabled = total > visibleCnt * 4;
   const Spacer = useCallback(() => /*#__PURE__*/React.createElement(View, {
     style: {
       height: spacerHeight
     }
   }), [spacerHeight]);
-  const indicatorStyle = useMemo(() => [wheelStyles.indicator, {
+  const indicatorStyle = useMemo(() => [S.indicator, {
     height: itemHeight,
-    top: itemHeight * visibleRest,
-    borderColor: indicatorColor
-  }], [itemHeight, visibleRest, indicatorColor]);
-  const dragEndTimerRef = useRef(null);
-  const momentumRef = useRef(false);
-  const lastOffsetRef = useRef(0);
+    top: itemHeight * visibleRest
+  }], [itemHeight, visibleRest]);
+  const dragEndTimerRef = useRef(null),
+    momentumRef = useRef(false),
+    lastOffsetRef = useRef(0);
   const clearDragEndTimer = useCallback(() => {
     if (dragEndTimerRef.current) {
       clearTimeout(dragEndTimerRef.current);
       dragEndTimerRef.current = null;
     }
   }, []);
-  const emitIndexFromOffset = useCallback((offsetY, animated) => {
+  const emitIdx = useCallback((offsetY, animated) => {
     if (readOnly) return;
     const {
       index,
       snapOffset
     } = offsetToIndex(-offsetY, itemHeight, total, data);
-    const nextOffset = -snapOffset;
-    if (Math.abs(nextOffset - offsetY) > 0.5) {
+    const nextOff = -snapOffset;
+    if (Math.abs(nextOff - offsetY) > 0.5) {
       listRef.current?.scrollToOffset({
-        offset: nextOffset,
+        offset: nextOff,
         animated
       });
     }
     onChange(index);
   }, [data, itemHeight, onChange, readOnly, total]);
   useEffect(() => {
-    const offset = safeSelectedIndex * itemHeight;
+    const offset = safeSelIdx * itemHeight;
     if (isWeb) return;
     scrollRef.current?.scrollTo({
       y: offset,
       animated: false
     });
-  }, [isWeb, itemHeight, safeSelectedIndex]);
-  const [webOffset, setWebOffset] = useState(() => indexToOffset(safeSelectedIndex, itemHeight));
-  const webOffsetRef = useRef(webOffset);
-  const startOffsetRef = useRef(0);
-  const startTimeRef = useRef(0);
+  }, [isWeb, itemHeight, safeSelIdx]);
+  const [webOffset, setWebOffset] = useState(() => indexToOffset(safeSelIdx, itemHeight));
+  const webOffsetRef = useRef(webOffset),
+    startOffsetRef = useRef(0),
+    startTimeRef = useRef(0);
   const [webTransition, setWebTransition] = useState(0);
   const [webVelocityBucket, setWebVelocityBucket] = useState(0);
-  const webVelocityBucketRef = useRef(0);
-  const lastWheelTimeRef = useRef(null);
-  const wheelDeltaRef = useRef(0);
-  const wheelRafRef = useRef(null);
-  const pendingIndexRef = useRef(null);
-  const pendingTimerRef = useRef(null);
-  const rafIdRef = useRef(null);
-  const isInteractingRef = useRef(false);
-  const notifyInteractStart = useCallback(() => {
+  const webVelocityBucketRef = useRef(0),
+    lastWheelTimeRef = useRef(null),
+    wheelDeltaRef = useRef(0),
+    wheelRafRef = useRef(null),
+    pendingIndexRef = useRef(null),
+    pendingTimerRef = useRef(null),
+    rafIdRef = useRef(null),
+    isInteractingRef = useRef(false);
+  const onInteractStartRef = useRef(onInteractStart);
+  onInteractStartRef.current = onInteractStart;
+  const onInteractEndRef = useRef(onInteractEnd);
+  onInteractEndRef.current = onInteractEnd;
+  const notifyStart = useCallback(() => {
     if (readOnly) return;
     if (isInteractingRef.current) return;
     isInteractingRef.current = true;
-    onInteractStart?.();
-  }, [onInteractStart, readOnly]);
-  const notifyInteractEnd = useCallback(() => {
+    onInteractStartRef.current?.();
+  }, [readOnly]);
+  const notifyEnd = useCallback(() => {
     if (!isInteractingRef.current) return;
     isInteractingRef.current = false;
-    onInteractEnd?.();
-  }, [onInteractEnd]);
+    onInteractEndRef.current?.();
+  }, []);
   const stopRaf = useCallback(() => {
     if (rafIdRef.current != null && typeof cancelAnimationFrame !== 'undefined') {
       cancelAnimationFrame(rafIdRef.current);
@@ -338,44 +323,42 @@ const WheelPickerInner = ({
     clearPendingTimer();
     pendingIndexRef.current = null;
     setWebTransition(0);
-    const next = indexToOffset(safeSelectedIndex, itemHeight);
+    const next = indexToOffset(safeSelIdx, itemHeight);
     webOffsetRef.current = next;
     setWebOffset(next);
-  }, [clearPendingTimer, isWeb, itemHeight, safeSelectedIndex, setWebTransition]);
+  }, [clearPendingTimer, isWeb, itemHeight, safeSelIdx, setWebTransition]);
   const finalizePendingChange = useCallback(() => {
     if (readOnly) return;
-    const nextIndex = pendingIndexRef.current;
-    if (nextIndex == null) return;
+    const nextIdx = pendingIndexRef.current;
+    if (nextIdx == null) return;
     pendingIndexRef.current = null;
     clearPendingTimer();
     setWebTransition(0);
-    notifyInteractEnd();
-    onChange(nextIndex);
+    notifyEnd();
+    onChange(nextIdx);
   }, [clearPendingTimer, onChange, readOnly, setWebTransition]);
-  const startWebSnap = useCallback(targetIndex => {
+  const startWebSnap = useCallback(targetIdx => {
     if (readOnly) return;
-    notifyInteractStart();
-    const clampedIndex = clamp(targetIndex, 0, maxIndex);
-    const targetOffset = indexToOffset(clampedIndex, itemHeight);
+    notifyStart();
+    const clampedIdx = clamp(targetIdx, 0, maxIdx);
+    const targetOff = indexToOffset(clampedIdx, itemHeight);
     clearPendingTimer();
-    pendingIndexRef.current = clampedIndex;
-    webOffsetRef.current = targetOffset;
+    pendingIndexRef.current = clampedIdx;
+    webOffsetRef.current = targetOff;
     setWebTransition(swipeDuration);
-    setWebOffset(targetOffset);
+    setWebOffset(targetOff);
     if (swipeDuration <= 0) {
       finalizePendingChange();
     } else {
       pendingTimerRef.current = setTimeout(finalizePendingChange, swipeDuration + 80);
     }
-  }, [clearPendingTimer, finalizePendingChange, itemHeight, maxIndex, readOnly, swipeDuration]);
+  }, [clearPendingTimer, finalizePendingChange, itemHeight, maxIdx, readOnly, swipeDuration]);
   const handleWheel = useCallback(event => {
     if (readOnly) return;
     const delta = event.nativeEvent?.deltaY ?? 0;
     if (!delta) return;
     wheelDeltaRef.current += delta;
-    if (wheelRafRef.current != null || typeof requestAnimationFrame === 'undefined') {
-      return;
-    }
+    if (wheelRafRef.current != null || typeof requestAnimationFrame === 'undefined') return;
     wheelRafRef.current = requestAnimationFrame(() => {
       wheelRafRef.current = null;
       const queued = wheelDeltaRef.current;
@@ -386,11 +369,11 @@ const WheelPickerInner = ({
       const {
         index
       } = offsetToIndex(webOffsetRef.current, itemHeight, total, data);
-      const nextIndex = clamp(index + direction, 0, maxIndex);
-      startWebSnap(nextIndex);
+      const nextIdx = clamp(index + direction, 0, maxIdx);
+      startWebSnap(nextIdx);
     });
-  }, [data, itemHeight, maxIndex, readOnly, startWebSnap, total, updateWheelVelocity]);
-  const webIndex = clamp(Math.round(-webOffset / itemHeight), 0, maxIndex);
+  }, [data, itemHeight, maxIdx, readOnly, startWebSnap, total, updateWheelVelocity]);
+  const webIdx = clamp(Math.round(-webOffset / itemHeight), 0, maxIdx);
   const webRender = useMemo(() => {
     if (!isWeb || total <= 0) {
       return {
@@ -399,17 +382,17 @@ const WheelPickerInner = ({
         bottomSpacer: null
       };
     }
-    let startIndex = 0;
-    let endIndex = maxIndex;
+    let startIdx = 0;
+    let endIdx = maxIdx;
     if (webVirtualEnabled) {
-      const baseBuffer = Math.max(visibleCount * 2, 8);
-      const velocityBoost = webVelocityBucket === 2 ? visibleCount * 4 : webVelocityBucket === 1 ? visibleCount * 2 : 0;
-      const buffer = Math.min(baseBuffer + velocityBoost, Math.max(visibleCount * 6, 24));
-      startIndex = clamp(webIndex - buffer, 0, maxIndex);
-      endIndex = clamp(webIndex + buffer, 0, maxIndex);
+      const baseBuffer = Math.max(visibleCnt * 2, 8);
+      const velocityBoost = webVelocityBucket === 2 ? visibleCnt * 4 : webVelocityBucket === 1 ? visibleCnt * 2 : 0;
+      const buffer = Math.min(baseBuffer + velocityBoost, Math.max(visibleCnt * 6, 24));
+      startIdx = clamp(webIdx - buffer, 0, maxIdx);
+      endIdx = clamp(webIdx + buffer, 0, maxIdx);
     }
     const items = [];
-    for (let index = startIndex; index <= endIndex; index += 1) {
+    for (let index = startIdx; index <= endIdx; index += 1) {
       const item = data[index];
       if (!item) continue;
       items.push(/*#__PURE__*/React.createElement(WheelPickerItem, {
@@ -417,27 +400,27 @@ const WheelPickerInner = ({
         item: item,
         index: index,
         itemHeight: itemHeight,
-        active: index === safeSelectedIndex,
+        active: index === safeSelIdx,
         disabled: !!item.disabled,
         renderItem: renderItem
       }));
     }
-    const topHeight = startIndex * itemHeight;
-    const bottomHeight = (maxIndex - endIndex) * itemHeight;
+    const topH = startIdx * itemHeight;
+    const bottomH = (maxIdx - endIdx) * itemHeight;
     return {
       items,
-      topSpacer: topHeight > 0 && /*#__PURE__*/React.createElement(View, {
+      topSpacer: topH > 0 && /*#__PURE__*/React.createElement(View, {
         style: {
-          height: topHeight
+          height: topH
         }
       }),
-      bottomSpacer: bottomHeight > 0 && /*#__PURE__*/React.createElement(View, {
+      bottomSpacer: bottomH > 0 && /*#__PURE__*/React.createElement(View, {
         style: {
-          height: bottomHeight
+          height: bottomH
         }
       })
     };
-  }, [data, isWeb, itemHeight, maxIndex, renderItem, safeSelectedIndex, total, visibleCount, webIndex, webVelocityBucket, webVirtualEnabled]);
+  }, [data, isWeb, itemHeight, maxIdx, renderItem, safeSelIdx, total, visibleCnt, webIdx, webVelocityBucket, webVirtualEnabled]);
   const webTransform = useMemo(() => ({
     transform: [{
       translateY: webOffset
@@ -445,7 +428,7 @@ const WheelPickerInner = ({
   }), [webOffset]);
   const webTransitionStyle = useMemo(() => webTransition ? {
     transitionProperty: 'transform',
-    transitionDuration: `${webTransition}ms`,
+    transitionDuration: webTransition + 'ms',
     transitionTimingFunction: 'cubic-bezier(0.23, 1, 0.68, 1)',
     willChange: 'transform'
   } : undefined, [webTransition]);
@@ -460,7 +443,7 @@ const WheelPickerInner = ({
     onPanResponderGrant: () => {
       stopRaf();
       pendingIndexRef.current = null;
-      notifyInteractStart();
+      notifyStart();
       setWebTransition(0);
       startOffsetRef.current = webOffsetRef.current;
       startTimeRef.current = Date.now();
@@ -468,7 +451,7 @@ const WheelPickerInner = ({
     onPanResponderMove: (_, gesture) => {
       if (readOnly) return;
       setVelocityBucket(gesture.vy);
-      const next = clamp(startOffsetRef.current + gesture.dy, minOffset, 0);
+      const next = clamp(startOffsetRef.current + gesture.dy, minOff, 0);
       webOffsetRef.current = next;
       if (typeof requestAnimationFrame === 'undefined') {
         setWebOffset(next);
@@ -485,9 +468,9 @@ const WheelPickerInner = ({
       setVelocityBucket(0);
       const duration = Date.now() - startTimeRef.current;
       const distance = gesture.dy;
-      let target = clamp(startOffsetRef.current + distance, minOffset, 0);
+      let target = clamp(startOffsetRef.current + distance, minOff, 0);
       if (shouldMomentum(distance, duration)) {
-        target = momentumTarget(distance, duration, startOffsetRef.current, itemHeight, minOffset);
+        target = momentumTarget(distance, duration, startOffsetRef.current, itemHeight, minOff);
       }
       const {
         index
@@ -496,37 +479,99 @@ const WheelPickerInner = ({
     },
     onPanResponderTerminationRequest: () => false,
     onPanResponderTerminate: () => {
-      notifyInteractEnd();
+      notifyEnd();
       setWebTransition(0);
     }
-  }), [data, itemHeight, minOffset, notifyInteractEnd, notifyInteractStart, readOnly, setVelocityBucket, startWebSnap, stopRaf, total]);
+  }), [data, itemHeight, minOff, notifyEnd, notifyStart, readOnly, setVelocityBucket, startWebSnap, stopRaf, total]);
+  const shouldCapture = !readOnly;
+  const handleResponderCapture = useCallback(() => shouldCapture, [shouldCapture]);
+  const nativeContainerStyle = useMemo(() => ({
+    paddingVertical: spacerHeight
+  }), [spacerHeight]);
+  const handleScroll = useCallback(e => {
+    lastOffsetRef.current = e.nativeEvent.contentOffset.y;
+  }, []);
+  const onDragStart = useCallback(() => {
+    momentumRef.current = false;
+    clearDragEndTimer();
+    notifyStart();
+  }, [clearDragEndTimer, notifyStart]);
+  const handleScrollEndDrag = useCallback(e => {
+    if (readOnly) return;
+    const y = e.nativeEvent.contentOffset.y;
+    lastOffsetRef.current = y;
+    clearDragEndTimer();
+    dragEndTimerRef.current = setTimeout(() => {
+      if (!momentumRef.current) {
+        emitIdx(lastOffsetRef.current, true);
+        notifyEnd();
+      }
+    }, 80);
+  }, [clearDragEndTimer, emitIdx, notifyEnd, readOnly]);
+  const handleMomentumScrollBegin = useCallback(() => {
+    momentumRef.current = true;
+    clearDragEndTimer();
+    notifyStart();
+  }, [clearDragEndTimer, notifyStart]);
+  const onMomEnd = useCallback(e => {
+    momentumRef.current = false;
+    clearDragEndTimer();
+    const y = e.nativeEvent.contentOffset.y;
+    lastOffsetRef.current = y;
+    emitIdx(y, false);
+    notifyEnd();
+  }, [clearDragEndTimer, emitIdx, notifyEnd]);
   if (isWeb) {
     return /*#__PURE__*/React.createElement(View, _extends({
-      style: [wheelStyles.column, {
+      style: [W.column, {
         height: containerHeight
-      }, webOnlyStyles.grab],
+      }, W.grab],
       onWheel: handleWheel
     }, panResponder.panHandlers), /*#__PURE__*/React.createElement(View, {
       style: indicatorStyle,
       pointerEvents: "none"
+    }, /*#__PURE__*/React.createElement(View, {
+      style: createHairlineView({
+        position: 'top',
+        color: indicatorColor,
+        left: 0,
+        right: 0
+      })
     }), /*#__PURE__*/React.createElement(View, {
-      style: [webTransform, isWeb ? webTransitionStyle : undefined],
+      style: createHairlineView({
+        position: 'bottom',
+        color: indicatorColor,
+        left: 0,
+        right: 0
+      })
+    })), /*#__PURE__*/React.createElement(View, {
+      style: [webTransform, webTransitionStyle],
       onTransitionEnd: handleWebTransitionEnd
     }, /*#__PURE__*/React.createElement(Spacer, null), webRender.topSpacer, webRender.items, webRender.bottomSpacer, /*#__PURE__*/React.createElement(Spacer, null)));
   }
-  const shouldCapture = !readOnly;
-  const contentContainerStyle = useMemo(() => ({
-    paddingVertical: spacerHeight
-  }), [spacerHeight]);
   return /*#__PURE__*/React.createElement(View, {
-    style: [wheelStyles.column, {
+    style: [W.column, {
       height: containerHeight
     }],
     collapsable: false
   }, /*#__PURE__*/React.createElement(View, {
     style: indicatorStyle,
     pointerEvents: "none"
-  }), /*#__PURE__*/React.createElement(ScrollView, {
+  }, /*#__PURE__*/React.createElement(View, {
+    style: createHairlineView({
+      position: 'top',
+      color: indicatorColor,
+      left: 0,
+      right: 0
+    })
+  }), /*#__PURE__*/React.createElement(View, {
+    style: createHairlineView({
+      position: 'bottom',
+      color: indicatorColor,
+      left: 0,
+      right: 0
+    })
+  })), /*#__PURE__*/React.createElement(ScrollView, {
     ref: scrollRef,
     showsVerticalScrollIndicator: false,
     scrollEventThrottle: effectiveScrollThrottle,
@@ -536,61 +581,26 @@ const WheelPickerInner = ({
     bounces: false,
     overScrollMode: "never",
     nestedScrollEnabled: true,
-    contentContainerStyle: contentContainerStyle,
-    onStartShouldSetResponderCapture: () => shouldCapture,
-    onMoveShouldSetResponderCapture: () => shouldCapture,
-    onScroll: e => {
-      lastOffsetRef.current = e.nativeEvent.contentOffset.y;
-    },
-    onScrollBeginDrag: () => {
-      momentumRef.current = false;
-      clearDragEndTimer();
-      notifyInteractStart();
-    },
-    onScrollEndDrag: e => {
-      if (readOnly) return;
-      const y = e.nativeEvent.contentOffset.y;
-      lastOffsetRef.current = y;
-      clearDragEndTimer();
-      dragEndTimerRef.current = setTimeout(() => {
-        if (!momentumRef.current) {
-          emitIndexFromOffset(lastOffsetRef.current, true);
-          notifyInteractEnd();
-        }
-      }, 80);
-    },
-    onMomentumScrollBegin: () => {
-      momentumRef.current = true;
-      clearDragEndTimer();
-      notifyInteractStart();
-    },
-    onMomentumScrollEnd: e => {
-      momentumRef.current = false;
-      clearDragEndTimer();
-      const y = e.nativeEvent.contentOffset.y;
-      lastOffsetRef.current = y;
-      emitIndexFromOffset(y, false);
-      notifyInteractEnd();
-    },
+    contentContainerStyle: nativeContainerStyle,
+    onStartShouldSetResponderCapture: handleResponderCapture,
+    onMoveShouldSetResponderCapture: handleResponderCapture,
+    onScroll: handleScroll,
+    onScrollBeginDrag: onDragStart,
+    onScrollEndDrag: handleScrollEndDrag,
+    onMomentumScrollBegin: handleMomentumScrollBegin,
+    onMomentumScrollEnd: onMomEnd,
     scrollEnabled: !readOnly
   }, data.map((item, index) => /*#__PURE__*/React.createElement(WheelPickerItem, {
     key: `${index}-${String(item.value ?? '')}`,
     item: item,
     index: index,
     itemHeight: itemHeight,
-    active: index === safeSelectedIndex,
+    active: index === safeSelIdx,
     disabled: !!item.disabled,
     renderItem: renderItem
   }))));
 };
 const WheelPicker = /*#__PURE__*/React.memo(WheelPickerInner);
-const webOnlyStyles = StyleSheet.create({
-  grab: {
-    cursor: 'pointer',
-    userSelect: 'none',
-    touchAction: 'none'
-  }
-});
 export function usePickerValue({
   columns,
   valueProp,
@@ -599,13 +609,15 @@ export function usePickerValue({
   onChange,
   onConfirm
 }) {
-  const preparedColumns = useMemo(() => prepareColumns(columns), [columns]);
+  const prep = useMemo(() => prepareColumns(columns), [columns]);
   const isControlled = valueProp !== undefined;
-  const [innerValue, setInnerValue] = useState(() => {
-    const initial = toArrayValue(valueProp ?? defaultValue);
-    return normalizePicker(preparedColumns, initial).values;
-  });
+  const onChangeRef = useRef(onChange);
+  const onConfirmRef = useRef(onConfirm);
+  onChangeRef.current = onChange;
+  onConfirmRef.current = onConfirm;
+  const [innerValue, setInnerValue] = useState(() => normalizePicker(prep, toArrayValue(valueProp ?? defaultValue)).values);
   const innerValueRef = useRef(innerValue);
+  innerValueRef.current = innerValue;
   const commitValue = useCallback(next => {
     innerValueRef.current = next;
     setInnerValue(next);
@@ -613,91 +625,79 @@ export function usePickerValue({
   useEffect(() => {
     if (!isControlled) return;
     const next = toArrayValue(valueProp);
-    if (!shallowEqualArray(innerValueRef.current, next)) {
-      commitValue(next);
-    }
+    if (!shallowEqualArray(innerValueRef.current, next)) commitValue(next);
   }, [commitValue, isControlled, valueProp]);
-  const normalized = useMemo(() => normalizePicker(preparedColumns, innerValue), [preparedColumns, innerValue]);
+  const norm = useMemo(() => normalizePicker(prep, innerValue), [prep, innerValue]);
   useEffect(() => {
     if (isControlled) return;
-    if (!shallowEqualArray(innerValue, normalized.values)) {
-      commitValue(normalized.values);
-      onChange?.(normalized.values, normalized.options);
-      if (emitConfirmOnAutoSelect) {
-        onConfirm?.(normalized.values, normalized.options);
-      }
+    if (!shallowEqualArray(innerValue, norm.values)) {
+      commitValue(norm.values);
+      onChangeRef.current?.(norm.values, norm.options);
+      if (emitConfirmOnAutoSelect) onConfirmRef.current?.(norm.values, norm.options);
     }
-  }, [commitValue, emitConfirmOnAutoSelect, innerValue, isControlled, normalized, onChange, onConfirm]);
-  const handleSelect = useCallback((option, columnIndex) => {
+  }, [commitValue, emitConfirmOnAutoSelect, innerValue, isControlled, norm]);
+  const handleSelect = useCallback((option, colIdx) => {
     const next = [...innerValueRef.current];
-    next[columnIndex] = option.value;
-    if (preparedColumns.type === 'cascade') {
-      next.length = columnIndex + 1;
-    }
-    const final = normalizePicker(preparedColumns, next);
+    next[colIdx] = option.value;
+    if (prep.type === 'cascade') next.length = colIdx + 1;
+    const final = normalizePicker(prep, next);
     if (shallowEqualArray(innerValueRef.current, final.values)) return;
     commitValue(final.values);
-    onChange?.(final.values, final.options);
-  }, [commitValue, onChange, preparedColumns]);
+    onChangeRef.current?.(final.values, final.options);
+  }, [commitValue, prep]);
   const handleConfirm = useCallback(() => {
-    onConfirm?.(normalized.values, normalized.options);
-  }, [normalized, onConfirm]);
+    onConfirmRef.current?.(norm.values, norm.options);
+  }, [norm]);
   return {
-    preparedColumns,
-    normalized,
+    preparedColumns: prep,
+    normalized: norm,
     handleSelect,
     handleConfirm
   };
 }
 const getVisibleCount = count => {
-  const normalized = isFiniteNumber(count) ? Math.max(3, Math.floor(count)) : 5;
-  return normalized % 2 === 0 ? normalized + 1 : normalized;
+  const n = isFiniteNumber(count) ? Math.max(3, Math.floor(count)) : 5;
+  return n % 2 === 0 ? n + 1 : n;
 };
 const GRADIENT_OVERLAY_ALPHA = 0.25;
 const GRADIENT_STEPS = [0.95, 0.75, 0.55, 0.35];
-const GRADIENT_STEPS_REVERSED = [...GRADIENT_STEPS].reverse();
+const GRADIENT_STEPS_REVERSED = [0.35, 0.55, 0.75, 0.95];
 const GradientMask = ({
   height,
   color,
   position,
   maskType
 }) => {
-  const isWeb = Platform.OS === 'web';
-  const baseStyle = useMemo(() => [styles.gradientMask, {
+  const baseStyle = [S.gMask, {
     height
   }, position === 'top' ? {
     top: 0
   } : {
     bottom: 0
-  }], [height, position]);
-  const overlayColor = useMemo(() => withAlpha(color, GRADIENT_OVERLAY_ALPHA), [color]);
-  if (maskType === 'solid') {
-    return /*#__PURE__*/React.createElement(View, {
-      pointerEvents: "none",
-      style: [...baseStyle, {
-        backgroundColor: withAlpha(color, 0.9)
-      }]
-    });
-  }
-  if (isWeb) {
+  }];
+  const overlayColor = withAlpha(color, GRADIENT_OVERLAY_ALPHA);
+  if (maskType === 'solid') return /*#__PURE__*/React.createElement(View, {
+    pointerEvents: "none",
+    style: [...baseStyle, {
+      backgroundColor: withAlpha(color, 0.9)
+    }]
+  });
+  if (Platform.OS === 'web') {
     const angle = position === 'top' ? '180deg' : '0deg';
-    const gradientStart = withAlpha(color, 0.98);
-    const gradientEnd = withAlpha(color, 0.4);
     return /*#__PURE__*/React.createElement(View, {
       pointerEvents: "none",
       style: [...baseStyle, {
         backgroundColor: overlayColor,
-        backgroundImage: `linear-gradient(${angle}, ${gradientStart}, ${gradientEnd})`
+        backgroundImage: `linear-gradient(${angle}, ${withAlpha(color, 0.98)}, ${withAlpha(color, 0.4)})`
       }]
     });
   }
-  const steps = position === 'top' ? GRADIENT_STEPS : GRADIENT_STEPS_REVERSED;
   return /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none",
     style: [...baseStyle, {
       backgroundColor: overlayColor
     }]
-  }, steps.map((opacity, idx) => /*#__PURE__*/React.createElement(View, {
+  }, (position === 'top' ? GRADIENT_STEPS : GRADIENT_STEPS_REVERSED).map((opacity, idx) => /*#__PURE__*/React.createElement(View, {
     key: idx,
     style: {
       flex: 1,
@@ -723,74 +723,85 @@ const PickerColumn = /*#__PURE__*/React.memo(props => {
     swipeDuration
   } = props;
   const restVisible = Math.max(1, Math.floor((visibleItemCount - 1) / 2));
-  const valueIndexMap = useMemo(() => new Map(options.map((option, idx) => [option.value, idx])), [options]);
-  const selectedIndex = useMemo(() => {
+  const valueIndexMap = useMemo(() => new Map(options.map((opt, idx) => [opt.value, idx])), [options]);
+  const selIdx = useMemo(() => {
     if (!options.length) return 0;
     const idx = valueIndexMap.get(value);
-    const startIndex = typeof idx === 'number' && idx >= 0 ? idx : 0;
-    return findEnabledIndex(options, startIndex);
+    const startIdx = typeof idx === 'number' && idx >= 0 ? idx : 0;
+    return findEnabledIndex(options, startIdx);
   }, [options, value, valueIndexMap]);
   const handleChange = useCallback(index => {
-    const target = findEnabledIndex(options, index);
-    const option = options[target];
-    if (!option || option.disabled) return;
-    onSelect(option, columnIndex, target);
+    const tgt = findEnabledIndex(options, index);
+    const opt = options[tgt];
+    if (!opt || opt.disabled) return;
+    onSelect(opt, columnIndex, tgt);
   }, [columnIndex, onSelect, options]);
+  const {
+    text: cText,
+    textDisabled: cDisabled,
+    textMuted: cMuted
+  } = tokens.colors;
+  const optFont = {
+    fontSize: tokens.typography.optionSize,
+    fontFamily: tokens.typography.fontFamily,
+    fontWeight: tokens.typography.optionWeight
+  };
+  const renderItemStable = useCallback((item, _index, meta) => {
+    const {
+      active = false,
+      disabled = false
+    } = meta ?? {};
+    const clr = disabled ? cDisabled : active ? cText : cMuted;
+    const cnt = optionRender ? optionRender(item, {
+      columnIndex,
+      active
+    }) : item.label ?? item.value;
+    const testID = getOptionTestID?.(item, {
+      columnIndex,
+      active
+    });
+    const a11y = getOptionA11yLabel?.(item, {
+      columnIndex,
+      active
+    });
+    return /*#__PURE__*/React.createElement(View, {
+      style: [W.option, {
+        opacity: disabled ? 0.5 : 1,
+        minHeight: itemHeight
+      }],
+      testID: testID,
+      accessible: !!a11y,
+      accessibilityLabel: a11y
+    }, isText(cnt) ? /*#__PURE__*/React.createElement(Text, {
+      numberOfLines: 1,
+      style: [S.optTxt, optFont, {
+        color: clr
+      }]
+    }, cnt) : cnt);
+  }, [cText, cDisabled, cMuted, columnIndex, getOptionA11yLabel, getOptionTestID, itemHeight, optFont, optionRender]);
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles.column, {
+    style: [W.column, {
       height: itemHeight * visibleItemCount
     }]
   }, /*#__PURE__*/React.createElement(WheelPicker, {
     data: options,
     itemHeight: itemHeight,
     visibleRest: restVisible,
-    selectedIndex: Math.max(0, selectedIndex),
+    selectedIndex: Math.max(0, selIdx),
     onChange: handleChange,
     readOnly: readOnly,
     indicatorColor: tokens.colors.indicator,
     decelerationRate: decelerationRate,
     scrollEventThrottle: scrollEventThrottle,
     swipeDuration: swipeDuration,
-    renderItem: (item, _index, meta) => {
-      const active = meta?.active ?? false;
-      const disabled = meta?.disabled ?? false;
-      const textColor = disabled ? tokens.colors.textDisabled : active ? tokens.colors.text : tokens.colors.textMuted;
-      const content = optionRender ? optionRender(item, {
-        columnIndex,
-        active
-      }) : item.label ?? item.value;
-      const testID = getOptionTestID?.(item, {
-        columnIndex,
-        active
-      });
-      const a11yLabel = getOptionA11yLabel?.(item, {
-        columnIndex,
-        active
-      });
-      return /*#__PURE__*/React.createElement(View, {
-        style: [styles.option, {
-          opacity: disabled ? 0.5 : 1,
-          minHeight: itemHeight
-        }],
-        testID: testID,
-        accessible: !!a11yLabel,
-        accessibilityLabel: a11yLabel
-      }, isText(content) ? /*#__PURE__*/React.createElement(Text, {
-        numberOfLines: 1,
-        style: [styles.optionText, {
-          color: textColor,
-          fontSize: tokens.typography.optionSize,
-          fontFamily: tokens.typography.fontFamily,
-          fontWeight: tokens.typography.optionWeight
-        }]
-      }, content) : content);
-    }
+    renderItem: renderItemStable
   }));
 });
-const Picker = props => {
+const PickerImpl = props => {
   const {
     tokensOverride
   } = props;
+  const locale = useLocale();
   const tokens = usePickerTokens(tokensOverride);
   const {
     columns = [],
@@ -799,8 +810,8 @@ const Picker = props => {
     title,
     showToolbar = tokens.defaults.showToolbar,
     toolbarPosition = tokens.defaults.toolbarPosition,
-    confirmButtonText = '确定',
-    cancelButtonText = '取消',
+    confirmButtonText = locale?.confirm ?? 'Confirm',
+    cancelButtonText = locale?.cancel ?? 'Cancel',
     itemHeight = tokens.defaults.itemHeight,
     visibleItemCount: visibleItemCountProp = tokens.defaults.visibleItemCount,
     loading = false,
@@ -827,12 +838,12 @@ const Picker = props => {
     testID,
     ...rest
   } = props;
-  const visibleItemCount = getVisibleCount(visibleItemCountProp ?? tokens.defaults.visibleItemCount);
+  const visCnt = getVisibleCount(visibleItemCountProp ?? tokens.defaults.visibleItemCount);
   const {
-    normalized,
+    normalized: norm,
     handleSelect,
     handleConfirm,
-    preparedColumns
+    preparedColumns: prep
   } = usePickerValue({
     columns,
     valueProp,
@@ -841,52 +852,33 @@ const Picker = props => {
     onChange,
     onConfirm
   });
-  const isCascade = preparedColumns.type === 'cascade';
-  const renderActionContent = (content, color) => {
-    if (/*#__PURE__*/React.isValidElement(content)) return /*#__PURE__*/React.createElement(View, {
-      style: {
-        minWidth: 44,
-        alignItems: 'center',
-        justifyContent: 'center'
-      }
-    }, content);
-    if (isText(content)) return /*#__PURE__*/React.createElement(Text, {
-      numberOfLines: 1,
-      style: [styles.actionText, {
-        color,
-        fontSize: tokens.typography.toolbarSize,
-        fontFamily: tokens.typography.fontFamily,
-        fontWeight: tokens.typography.toolbarWeight
-      }]
-    }, content);
-    return /*#__PURE__*/React.createElement(View, {
-      style: {
-        minWidth: 44
-      }
-    });
-  };
-  const renderTitleContent = content => {
-    if (content == null) return /*#__PURE__*/React.createElement(View, null);
-    if (/*#__PURE__*/React.isValidElement(content)) return /*#__PURE__*/React.createElement(View, {
-      style: [styles.title, {
-        alignItems: 'center',
-        justifyContent: 'center'
-      }]
-    }, content);
-    return /*#__PURE__*/React.createElement(Text, {
-      style: [styles.title, {
-        fontSize: tokens.typography.toolbarSize,
-        fontFamily: tokens.typography.fontFamily,
-        color: tokens.colors.text,
-        fontWeight: tokens.typography.toolbarWeight
-      }],
-      numberOfLines: 1
-    }, content);
+  const isCascade = prep.type === 'cascade';
+  const toolbarFont = {
+    fontSize: tokens.typography.toolbarSize,
+    fontFamily: tokens.typography.fontFamily,
+    fontWeight: tokens.typography.toolbarWeight
   };
+  const renderActionContent = (content, color) => /*#__PURE__*/React.isValidElement(content) ? /*#__PURE__*/React.createElement(View, {
+    style: S.actW
+  }, content) : isText(content) ? /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: [S.actTxt, toolbarFont, {
+      color
+    }]
+  }, content) : /*#__PURE__*/React.createElement(View, {
+    style: S.actW
+  });
+  const renderTitleContent = content => content == null ? /*#__PURE__*/React.createElement(View, null) : /*#__PURE__*/React.isValidElement(content) ? /*#__PURE__*/React.createElement(View, {
+    style: S.ttlW
+  }, content) : /*#__PURE__*/React.createElement(Text, {
+    style: [S.title, toolbarFont, {
+      color: tokens.colors.text
+    }],
+    numberOfLines: 1
+  }, content);
   const toolbar = showToolbar ? /*#__PURE__*/React.createElement(View, {
-    style: [styles.toolbar, {
+    style: [S.toolbar, {
       height: tokens.spacing.toolbarHeight,
-      borderColor: tokens.colors.indicator,
       paddingHorizontal: tokens.spacing.actionPadding
     }]
   }, /*#__PURE__*/React.createElement(Pressable, {
@@ -895,22 +887,29 @@ const Picker = props => {
   }, renderActionContent(cancelButtonText, tokens.colors.cancel)), renderTitleContent(title), /*#__PURE__*/React.createElement(Pressable, {
     onPress: handleConfirm,
     accessibilityRole: "button"
-  }, renderActionContent(confirmButtonText, tokens.colors.confirm))) : null;
-  const wrapperHeight = itemHeight * visibleItemCount;
-  const maskVisibleCount = Math.max(1, Math.floor((visibleItemCount - 1) / 2));
-  const indicatorOffset = itemHeight * maskVisibleCount;
-  const maskHeight = indicatorOffset;
-  const hasColumns = normalized.columns.length > 0;
-  const effectiveMaskColor = maskColor ?? tokens.colors.mask;
-  const columnsContent = hasColumns ? normalized.columns.map((column, columnIndex) => {
-    const key = isCascade ? `${columnIndex}-${normalized.values.slice(0, columnIndex).map(String).join('|')}` : String(columnIndex);
+  }, renderActionContent(confirmButtonText, tokens.colors.confirm)), /*#__PURE__*/React.createElement(View, {
+    style: createHairlineView({
+      position: 'bottom',
+      color: tokens.colors.indicator,
+      left: 0,
+      right: 0
+    })
+  })) : null;
+  const wrapperH = itemHeight * visCnt;
+  const maskVisCnt = Math.max(1, Math.floor((visCnt - 1) / 2));
+  const indicatorOff = itemHeight * maskVisCnt;
+  const maskH = indicatorOff;
+  const hasCols = norm.columns.length > 0;
+  const effMaskColor = maskColor ?? tokens.colors.mask;
+  const columnsContent = hasCols ? norm.columns.map((column, colIdx) => {
+    const key = isCascade ? `${colIdx}-${norm.values.slice(0, colIdx).map(String).join('|')}` : String(colIdx);
     return /*#__PURE__*/React.createElement(PickerColumn, {
       key: key,
-      columnIndex: columnIndex,
+      columnIndex: colIdx,
       options: column,
-      value: normalized.values[columnIndex],
+      value: norm.values[colIdx],
       itemHeight: itemHeight,
-      visibleItemCount: visibleItemCount,
+      visibleItemCount: visCnt,
       decelerationRate: decelerationRate,
       scrollEventThrottle: scrollEventThrottle,
       optionRender: optionRender,
@@ -923,43 +922,55 @@ const Picker = props => {
     });
   }) : null;
   return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
-    style: [styles.container, {
+    style: [{
       backgroundColor: tokens.colors.background,
       borderRadius: tokens.radius.container
     }, style],
     testID: testID
   }), toolbarPosition === 'top' && toolbar, /*#__PURE__*/React.createElement(View, {
-    style: [styles.body, {
-      height: wrapperHeight
+    style: [S.body, {
+      height: wrapperH
     }]
   }, /*#__PURE__*/React.createElement(View, {
-    style: styles.columns,
+    style: S.columns,
     pointerEvents: loading ? 'none' : 'auto'
-  }, columnsTop, columnsContent, columnsBottom, hasColumns && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+  }, columnsTop, columnsContent, columnsBottom, hasCols && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none",
-    style: [styles.indicator, {
-      top: indicatorOffset,
-      height: itemHeight,
-      borderColor: tokens.colors.indicator
+    style: [S.indicator, {
+      top: indicatorOff,
+      height: itemHeight
     }]
-  }), /*#__PURE__*/React.createElement(GradientMask, {
+  }, /*#__PURE__*/React.createElement(View, {
+    style: createHairlineView({
+      position: 'top',
+      color: tokens.colors.indicator,
+      left: 0,
+      right: 0
+    })
+  }), /*#__PURE__*/React.createElement(View, {
+    style: createHairlineView({
+      position: 'bottom',
+      color: tokens.colors.indicator,
+      left: 0,
+      right: 0
+    })
+  })), /*#__PURE__*/React.createElement(GradientMask, {
     position: "top",
-    height: maskHeight,
-    color: effectiveMaskColor,
+    height: maskH,
+    color: effMaskColor,
     maskType: maskType
   }), /*#__PURE__*/React.createElement(GradientMask, {
     position: "bottom",
-    height: maskHeight,
-    color: effectiveMaskColor,
+    height: maskH,
+    color: effMaskColor,
     maskType: maskType
   }))), loading && /*#__PURE__*/React.createElement(View, {
-    style: [styles.loading, {
+    style: [S.loading, {
       backgroundColor: tokens.colors.loadingMask
     }]
   }, /*#__PURE__*/React.createElement(Loading, null))), toolbarPosition === 'bottom' && toolbar);
 };
-const styles = StyleSheet.create({
-  container: {},
+const S = StyleSheet.create({
   body: {
     position: 'relative',
     overflow: 'hidden'
@@ -968,25 +979,16 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row'
   },
-  column: {
-    flex: 1
-  },
-  option: {
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  optionText: {
+  optTxt: {
     includeFontPadding: false
   },
   indicator: {
     position: 'absolute',
     left: 0,
     right: 0,
-    borderTopWidth: StyleSheet.hairlineWidth,
-    borderBottomWidth: StyleSheet.hairlineWidth,
     zIndex: 3
   },
-  gradientMask: {
+  gMask: {
     position: 'absolute',
     left: 0,
     right: 0,
@@ -995,17 +997,26 @@ const styles = StyleSheet.create({
   toolbar: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
-    borderBottomWidth: StyleSheet.hairlineWidth
+    justifyContent: 'space-between'
   },
   title: {
     flex: 1,
     textAlign: 'center'
   },
-  actionText: {
+  ttlW: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  actTxt: {
     minWidth: 44,
     textAlign: 'center'
   },
+  actW: {
+    minWidth: 44,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
   loading: {
     position: 'absolute',
     top: 0,
@@ -1016,5 +1027,5 @@ const styles = StyleSheet.create({
     justifyContent: 'center'
   }
 });
-Picker.displayName = 'Picker';
+const Picker = /*#__PURE__*/React.memo(PickerImpl);
 export default Picker;