@hanwenbo/x-taro-ui 0.0.1

package/lib/patterns/overlay/types.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Overlay Pattern Types
+ */
+/// <reference types="react" />
+export interface OverlayPosition {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+}
+export interface OverlayAnimation {
+    enter: string;
+    exit: string;
+    duration: number;
+}
+export declare type OverlayPlacement = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/**
+ * Overlay host configuration
+ */
+export declare type OverlayContentAnimation = 'auto' | 'slide' | 'scale' | 'fade' | 'none';
+export interface OverlayHostConfig {
+    zIndex: number;
+    backdrop: boolean;
+    closeOnBackdrop: boolean;
+    closeOnEscape: boolean;
+    /** Keep the content tree mounted while hidden. */
+    keepMounted?: boolean;
+    /** Lock document scrolling while the overlay is visible on H5. */
+    disableBodyScroll?: boolean;
+    enterDuration?: number;
+    exitDuration?: number;
+    contentAnimation?: OverlayContentAnimation;
+    /** Visible backdrop opacity. */
+    backdropOpacity?: number;
+    backdropStyle?: React.CSSProperties;
+    contentStyle?: React.CSSProperties;
+}
+//# sourceMappingURL=types.d.ts.map

package/lib/patterns/overlay/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/patterns/overlay/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/patterns/overlay/useOverlayTransition.d.ts

@@ -0,0 +1,6 @@
+export declare function useOverlayTransition(visible: boolean, exitDuration?: number, enterDuration?: number): {
+    shouldRender: boolean;
+    mounted: boolean;
+    settled: boolean;
+};
+//# sourceMappingURL=useOverlayTransition.d.ts.map

package/lib/patterns/overlay/useOverlayTransition.js

@@ -0,0 +1,61 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/patterns/overlay/useOverlayTransition.ts
+var useOverlayTransition_exports = {};
+__export(useOverlayTransition_exports, {
+  useOverlayTransition: () => useOverlayTransition
+});
+module.exports = __toCommonJS(useOverlayTransition_exports);
+var import_react = require("react");
+var import_design_system = require("../../theme/generated/design-system.generated");
+function useOverlayTransition(visible, exitDuration = import_design_system.designSystemMotion.durationsMs.overlayExit, enterDuration = import_design_system.designSystemMotion.durationsMs.overlayEnter) {
+  const [shouldRender, setShouldRender] = (0, import_react.useState)(visible);
+  const [mounted, setMounted] = (0, import_react.useState)(false);
+  const [settled, setSettled] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (visible) {
+      setShouldRender(true);
+      setSettled(false);
+      const frame = setTimeout(() => {
+        setMounted(true);
+      }, 0);
+      return () => clearTimeout(frame);
+    }
+    setSettled(false);
+    setMounted(false);
+    const timer = setTimeout(() => {
+      setShouldRender(false);
+    }, exitDuration);
+    return () => clearTimeout(timer);
+  }, [exitDuration, visible]);
+  (0, import_react.useEffect)(() => {
+    if (!mounted) {
+      return void 0;
+    }
+    const timer = setTimeout(() => {
+      setSettled(true);
+    }, enterDuration);
+    return () => clearTimeout(timer);
+  }, [enterDuration, mounted]);
+  return { shouldRender, mounted, settled };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useOverlayTransition
+});

package/lib/patterns/pickerColumns/WheelPicker.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+export interface WheelPickerOption {
+    label: React.ReactNode;
+    value: string | number;
+    disabled?: boolean;
+}
+export interface WheelPickerProps {
+    columns: WheelPickerOption[][];
+    value: number[];
+    onChange: (indices: number[], columnIndex: number) => void;
+    itemHeight: number;
+    height?: number | string;
+    visibleItemCount?: number;
+    itemFontSize?: number;
+    itemLineHeight?: number;
+    itemPaddingX?: number;
+    itemColor?: string;
+    selectedColor?: string;
+    mutedColor?: string;
+    emptyContent?: React.ReactNode;
+    emptyColor?: string;
+    indicatorColor?: string;
+    indicatorInset?: number;
+    indicatorRadius?: number;
+    selectedScale?: number;
+    prefixCls?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const WheelPicker: React.FC<WheelPickerProps>;
+export default WheelPicker;
+//# sourceMappingURL=WheelPicker.d.ts.map

package/lib/patterns/pickerColumns/WheelPicker.js

@@ -0,0 +1,383 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/patterns/pickerColumns/WheelPicker.tsx
+var WheelPicker_exports = {};
+__export(WheelPicker_exports, {
+  WheelPicker: () => WheelPicker,
+  default: () => WheelPicker_default
+});
+module.exports = __toCommonJS(WheelPicker_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("@tarojs/components");
+var import_utils = require("../../utils");
+var import_theme = require("../../theme");
+var clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+function resolveSelectableIndex(column, nextIndex, direction) {
+  var _a, _b, _c;
+  const clampedIndex = clamp(nextIndex, 0, column.length - 1);
+  if (!((_a = column[clampedIndex]) == null ? void 0 : _a.disabled)) return clampedIndex;
+  if (direction === 0) return null;
+  for (let candidate = clampedIndex + direction; candidate >= 0 && candidate < column.length; candidate += direction) {
+    if (!((_b = column[candidate]) == null ? void 0 : _b.disabled)) return candidate;
+  }
+  for (let candidate = clampedIndex - direction; candidate >= 0 && candidate < column.length; candidate -= direction) {
+    if (!((_c = column[candidate]) == null ? void 0 : _c.disabled)) return candidate;
+  }
+  return null;
+}
+function getTouchY(event) {
+  var _a, _b;
+  const touch = ((_a = event.touches) == null ? void 0 : _a[0]) ?? ((_b = event.changedTouches) == null ? void 0 : _b[0]);
+  const value = (touch == null ? void 0 : touch.clientY) ?? (touch == null ? void 0 : touch.pageY);
+  return typeof value === "number" ? value : null;
+}
+var WheelPicker = ({
+  columns,
+  value,
+  onChange,
+  itemHeight,
+  height,
+  visibleItemCount = 5,
+  itemFontSize = 16,
+  itemLineHeight = 20,
+  itemPaddingX = 0,
+  itemColor = "inherit",
+  selectedColor,
+  mutedColor = "inherit",
+  emptyContent = "暂无可选项",
+  emptyColor,
+  indicatorColor,
+  indicatorInset = 14,
+  indicatorRadius = 6,
+  selectedScale = 1.03,
+  prefixCls = "x",
+  className,
+  style
+}) => {
+  const { colors, motion } = (0, import_theme.useTokens)();
+  const fallbackHeight = itemHeight * visibleItemCount;
+  const containerHeight = height ?? fallbackHeight;
+  const resolvedSelectedColor = selectedColor ?? itemColor;
+  const resolvedEmptyColor = emptyColor ?? mutedColor;
+  const renderedColumns = (0, import_react.useMemo)(() => columns.length > 0 ? columns : [[]], [columns]);
+  const dragStateRef = (0, import_react.useRef)(null);
+  const suppressClickRef = (0, import_react.useRef)({});
+  const [dragOffsets, setDragOffsets] = (0, import_react.useState)({});
+  const selectedIndices = (0, import_react.useMemo)(
+    () => renderedColumns.map((column, columnIndex) => {
+      var _a;
+      if (column.length === 0) return -1;
+      const rawIndex = value[columnIndex] ?? 0;
+      const clampedIndex = clamp(rawIndex, 0, column.length - 1);
+      if (!((_a = column[clampedIndex]) == null ? void 0 : _a.disabled)) return clampedIndex;
+      return resolveSelectableIndex(column, clampedIndex, 1) ?? -1;
+    }),
+    [renderedColumns, value]
+  );
+  const updateColumn = (0, import_react.useCallback)(
+    (columnIndex, nextIndex, direction = 0) => {
+      const column = columns[columnIndex];
+      if (!(column == null ? void 0 : column.length)) {
+        return;
+      }
+      const resolvedIndex = resolveSelectableIndex(column, nextIndex, direction);
+      if (resolvedIndex === null) return;
+      if (resolvedIndex === selectedIndices[columnIndex]) return;
+      const nextValue = [...selectedIndices];
+      nextValue[columnIndex] = resolvedIndex;
+      onChange(nextValue, columnIndex);
+    },
+    [columns, onChange, selectedIndices]
+  );
+  const handleWheel = (0, import_react.useCallback)(
+    (columnIndex, event) => {
+      event.preventDefault();
+      if (!event.deltaY) return;
+      const delta = event.deltaY > 0 ? 1 : -1;
+      updateColumn(columnIndex, selectedIndices[columnIndex] + delta, delta);
+    },
+    [selectedIndices, updateColumn]
+  );
+  const handleTouchStart = (0, import_react.useCallback)((columnIndex, event) => {
+    const y = getTouchY(event);
+    if (y === null) return;
+    dragStateRef.current = { columnIndex, startY: y, currentY: y };
+    suppressClickRef.current[columnIndex] = false;
+  }, []);
+  const handleTouchMove = (0, import_react.useCallback)((columnIndex, event) => {
+    var _a;
+    const y = getTouchY(event);
+    const drag = dragStateRef.current;
+    if (y === null || !drag || drag.columnIndex !== columnIndex) return;
+    (_a = event.preventDefault) == null ? void 0 : _a.call(event);
+    drag.currentY = y;
+    const offset = y - drag.startY;
+    if (Math.abs(offset) > 4) suppressClickRef.current[columnIndex] = true;
+    setDragOffsets((current) => ({ ...current, [columnIndex]: offset }));
+  }, []);
+  const finishTouch = (0, import_react.useCallback)(
+    (columnIndex, event) => {
+      const drag = dragStateRef.current;
+      if (!drag || drag.columnIndex !== columnIndex) return;
+      const endY = getTouchY(event) ?? drag.currentY;
+      const delta = endY - drag.startY;
+      const steps = Math.round(-delta / itemHeight);
+      dragStateRef.current = null;
+      setDragOffsets((current) => ({ ...current, [columnIndex]: 0 }));
+      if (steps !== 0) {
+        const direction = steps > 0 ? 1 : -1;
+        updateColumn(columnIndex, selectedIndices[columnIndex] + steps, direction);
+      }
+    },
+    [itemHeight, selectedIndices, updateColumn]
+  );
+  const cancelTouch = (0, import_react.useCallback)((columnIndex) => {
+    const drag = dragStateRef.current;
+    if (!drag || drag.columnIndex !== columnIndex) return;
+    dragStateRef.current = null;
+    suppressClickRef.current[columnIndex] = false;
+    setDragOffsets((current) => ({ ...current, [columnIndex]: 0 }));
+  }, []);
+  const handleOptionClick = (0, import_react.useCallback)(
+    (columnIndex, optionIndex) => {
+      if (suppressClickRef.current[columnIndex]) {
+        suppressClickRef.current[columnIndex] = false;
+        return;
+      }
+      updateColumn(columnIndex, optionIndex);
+    },
+    [updateColumn]
+  );
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      className: (0, import_utils.classNames)(`${prefixCls}-wheel-picker`, className),
+      "data-slot": "wheel-picker",
+      style: {
+        position: "relative",
+        display: "flex",
+        flexDirection: "row",
+        height: containerHeight,
+        overflow: "hidden",
+        userSelect: "none",
+        touchAction: "none",
+        maskImage: "linear-gradient(to top, transparent, transparent 5%, black 20%, black 80%, transparent 95%, transparent)",
+        WebkitMaskImage: "linear-gradient(to top, transparent, transparent 5%, black 20%, black 80%, transparent 95%, transparent)",
+        ...style
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        className: `${prefixCls}-wheel-picker__indicator`,
+        "data-slot": "wheel-picker-indicator",
+        style: {
+          pointerEvents: "none",
+          position: "absolute",
+          left: indicatorInset,
+          right: indicatorInset,
+          top: "50%",
+          height: itemHeight,
+          marginTop: -itemHeight / 2,
+          borderRadius: indicatorRadius,
+          backgroundColor: indicatorColor ?? colors.muted,
+          zIndex: 0
+        }
+      }
+    ),
+    renderedColumns.map((column, columnIndex) => {
+      var _a;
+      const selectedIndex = selectedIndices[columnIndex];
+      const trackIndex = Math.max(selectedIndex, 0);
+      const dragOffset = dragOffsets[columnIndex] ?? 0;
+      const offsetY = -itemHeight / 2 - trackIndex * itemHeight + dragOffset;
+      const isDragging = ((_a = dragStateRef.current) == null ? void 0 : _a.columnIndex) === columnIndex;
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          key: columnIndex,
+          className: `${prefixCls}-wheel-picker__column`,
+          style: {
+            flex: 1,
+            minWidth: 0,
+            position: "relative",
+            height: "100%",
+            overflow: "hidden",
+            zIndex: 1
+          },
+          onWheel: (event) => handleWheel(
+            columnIndex,
+            event
+          ),
+          onTouchStart: (event) => handleTouchStart(columnIndex, event),
+          onTouchMove: (event) => handleTouchMove(columnIndex, event),
+          onTouchEnd: (event) => finishTouch(columnIndex, event),
+          onTouchCancel: () => cancelTouch(columnIndex),
+          catchMove: true,
+          role: "listbox",
+          ariaRole: "listbox",
+          ariaLabel: `选择列 ${columnIndex + 1}`
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            className: `${prefixCls}-wheel-picker__track`,
+            style: {
+              position: "absolute",
+              top: "50%",
+              right: 0,
+              left: 0,
+              transform: `translateY(${offsetY}px)`,
+              transition: isDragging ? "none" : `transform ${motion.durationsMs.emphasis}ms ${motion.easing.decelerate}`
+            }
+          },
+          column.length === 0 ? /* @__PURE__ */ import_react.default.createElement(
+            import_components.View,
+            {
+              className: `${prefixCls}-wheel-picker__empty`,
+              "data-slot": "wheel-picker-empty",
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "100%",
+                minWidth: 0,
+                height: itemHeight,
+                paddingLeft: itemPaddingX,
+                paddingRight: itemPaddingX,
+                boxSizing: "border-box"
+              },
+              role: "status",
+              ariaRole: "text",
+              ariaLabel: typeof emptyContent === "string" ? emptyContent : "暂无可选项"
+            },
+            /* @__PURE__ */ import_react.default.createElement(
+              import_components.Text,
+              {
+                style: {
+                  display: "block",
+                  width: "100%",
+                  minWidth: 0,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
+                  color: resolvedEmptyColor,
+                  fontSize: itemFontSize,
+                  lineHeight: `${itemLineHeight}px`,
+                  textAlign: "center"
+                }
+              },
+              emptyContent
+            )
+          ) : column.map((option, optionIndex) => {
+            const isSelected = optionIndex === selectedIndex;
+            const isPrimitiveLabel = typeof option.label === "string" || typeof option.label === "number";
+            return /* @__PURE__ */ import_react.default.createElement(
+              import_components.View,
+              {
+                key: `${columnIndex}-${option.value}`,
+                className: (0, import_utils.classNames)(
+                  `${prefixCls}-wheel-picker__item`,
+                  isSelected && `${prefixCls}-wheel-picker__item--selected`,
+                  option.disabled && `${prefixCls}-wheel-picker__item--disabled`
+                ),
+                "data-slot": "wheel-picker-item",
+                "data-selected": isSelected ? "true" : "false",
+                "data-disabled": option.disabled ? "true" : "false",
+                style: {
+                  height: itemHeight,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  cursor: option.disabled ? "not-allowed" : "pointer",
+                  opacity: option.disabled ? 0.4 : 1,
+                  transform: isSelected ? `scale(${selectedScale})` : "scale(1)",
+                  transition: `opacity ${motion.durationsMs.standard}ms ${motion.easing.standard}, transform ${motion.durationsMs.standard}ms ${motion.easing.standard}`
+                },
+                onClick: () => handleOptionClick(columnIndex, optionIndex),
+                role: "option",
+                ariaRole: "option",
+                ariaLabel: `${typeof option.label === "string" || typeof option.label === "number" ? String(option.label) : "选项"}${isSelected ? "，已选择" : ""}${option.disabled ? "，已禁用" : ""}`
+              },
+              /* @__PURE__ */ import_react.default.createElement(
+                import_components.View,
+                {
+                  className: `${prefixCls}-wheel-picker__item-label`,
+                  style: {
+                    display: "block",
+                    width: "100%",
+                    minWidth: 0,
+                    boxSizing: "border-box",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    fontSize: itemFontSize,
+                    lineHeight: `${itemLineHeight}px`,
+                    paddingLeft: isPrimitiveLabel ? 0 : itemPaddingX,
+                    paddingRight: isPrimitiveLabel ? 0 : itemPaddingX,
+                    fontWeight: isSelected ? 600 : 400,
+                    color: option.disabled ? mutedColor : isSelected ? resolvedSelectedColor : itemColor,
+                    textAlign: "center"
+                  }
+                },
+                isPrimitiveLabel ? /* @__PURE__ */ import_react.default.createElement(
+                  import_components.Text,
+                  {
+                    style: {
+                      display: "block",
+                      width: "100%",
+                      minWidth: 0,
+                      boxSizing: "border-box",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                      fontSize: itemFontSize,
+                      lineHeight: `${itemLineHeight}px`,
+                      paddingLeft: itemPaddingX,
+                      paddingRight: itemPaddingX,
+                      fontWeight: isSelected ? 600 : 400,
+                      color: option.disabled ? mutedColor : isSelected ? resolvedSelectedColor : itemColor,
+                      textAlign: "center"
+                    }
+                  },
+                  option.label
+                ) : option.label
+              )
+            );
+          })
+        )
+      );
+    })
+  );
+};
+var WheelPicker_default = WheelPicker;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  WheelPicker
+});

package/lib/patterns/pickerColumns/index.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Picker Columns Pattern
+ * Unified picker wheel behavior
+ */
+/// <reference types="react" />
+export { WheelPicker } from './WheelPicker';
+export type { WheelPickerOption, WheelPickerProps } from './WheelPicker';
+export interface PickerColumn<T> {
+    key: string;
+    values: T[];
+    labels?: string[];
+}
+export interface PickerValue {
+    [key: string]: string | number;
+}
+export interface UsePickerColumnsOptions<T> {
+    columns: PickerColumn<T>[];
+    defaultValue?: PickerValue;
+    onChange?: (value: PickerValue) => void;
+}
+/**
+ * Hook for picker columns state management
+ */
+export declare function usePickerColumns<T>(options: UsePickerColumnsOptions<T>): {
+    value: PickerValue;
+    setValue: import("react").Dispatch<import("react").SetStateAction<PickerValue>>;
+    updateValue: (columnKey: string, itemValue: string | number) => void;
+    getSelectedIndex: (columnKey: string) => number;
+};
+/**
+ * Get picker item style for wheel position
+ */
+export declare function getPickerItemStyle(index: number, selectedIndex: number, itemHeight?: number): React.CSSProperties;
+/**
+ * Get picker wheel container style
+ */
+export declare function getPickerWheelStyle(visibleItems?: number, itemHeight?: number): React.CSSProperties;
+//# sourceMappingURL=index.d.ts.map

package/lib/patterns/pickerColumns/index.js

@@ -0,0 +1,84 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/patterns/pickerColumns/index.ts
+var index_exports = {};
+__export(index_exports, {
+  WheelPicker: () => import_WheelPicker.WheelPicker,
+  getPickerItemStyle: () => getPickerItemStyle,
+  getPickerWheelStyle: () => getPickerWheelStyle,
+  usePickerColumns: () => usePickerColumns
+});
+module.exports = __toCommonJS(index_exports);
+var import_WheelPicker = require("./WheelPicker");
+var import_react = require("react");
+function usePickerColumns(options) {
+  const { columns, defaultValue = {}, onChange } = options;
+  const [value, setValue] = (0, import_react.useState)(defaultValue);
+  const updateValue = (0, import_react.useCallback)(
+    (columnKey, itemValue) => {
+      setValue((prev) => {
+        const newValue = { ...prev, [columnKey]: itemValue };
+        onChange == null ? void 0 : onChange(newValue);
+        return newValue;
+      });
+    },
+    [onChange]
+  );
+  const getSelectedIndex = (0, import_react.useCallback)(
+    (columnKey) => {
+      const column = columns.find((c) => c.key === columnKey);
+      if (!column) return 0;
+      const selectedValue = value[columnKey];
+      return column.values.findIndex((v) => v === selectedValue);
+    },
+    [columns, value]
+  );
+  return {
+    value,
+    setValue,
+    updateValue,
+    getSelectedIndex
+  };
+}
+function getPickerItemStyle(index, selectedIndex, itemHeight = 44) {
+  const offset = (index - selectedIndex) * itemHeight;
+  const distance = Math.abs(index - selectedIndex);
+  const opacity = Math.max(0.3, 1 - distance * 0.2);
+  const scale = Math.max(0.8, 1 - distance * 0.05);
+  return {
+    transform: `translateY(${offset}px) scale(${scale})`,
+    opacity,
+    height: itemHeight,
+    lineHeight: `${itemHeight}px`
+  };
+}
+function getPickerWheelStyle(visibleItems = 5, itemHeight = 44) {
+  return {
+    height: visibleItems * itemHeight,
+    overflow: "hidden",
+    position: "relative"
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  WheelPicker,
+  getPickerItemStyle,
+  getPickerWheelStyle,
+  usePickerColumns
+});