@canlooks/can-ui 0.0.42 → 0.0.43

package/dist/cjs/components/slidableActions/slidableActions.style.js

@@ -9,29 +9,29 @@ exports.classes = (0, utils_1.defineInnerClasses)('slidable-actions', [
     'actionsLeft',
     'actionsRight',
     'actionItem',
-    'actionItemWrap',
+    'actionItemButton',
     'actionItemIcon'
 ]);
 exports.style = (0, utils_1.defineCss)(({ background }) => (0, react_1.css) `
     position: relative;
     overflow: hidden;
-    
+
     .${exports.classes.content} {
         touch-action: pan-y;
         position: relative;
         z-index: 1;
     }
-    
+
     .${exports.classes.actions} {
         position: absolute;
         inset: 0;
-    
+
         .${exports.classes.actionsLeft}, .${exports.classes.actionsRight} {
             width: 100%;
             height: 100%;
             position: absolute;
             top: 0;
-    
+
             .${exports.classes.actionItem} {
                 width: 100%;
                 height: 100%;
@@ -41,34 +41,35 @@ exports.style = (0, utils_1.defineCss)(({ background }) => (0, react_1.css) `
                 color: ${background.content};
                 position: absolute;
                 top: 0;
-    
-                .${exports.classes.actionItemWrap} {
+
+                .${exports.classes.actionItemButton} {
                     flex: 1;
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                     justify-content: center;
-                    padding: 0 18px;    
+                    padding: 0 18px;
+                    border-radius: 0;
                 }
-    
+
                 .${exports.classes.actionItemIcon} {
                     display: flex;
                 }
             }
         }
-    
+
         .${exports.classes.actionsLeft} {
             right: 100%;
-    
+
             .${exports.classes.actionItem} {
                 align-items: flex-end;
                 right: 0;
             }
         }
-    
+
         .${exports.classes.actionsRight} {
             left: 100%;
-    
+
             .${exports.classes.actionItem} {
                 align-items: flex-start;
                 left: 0;

package/dist/cjs/components/slidableActions/slidableActionsAction.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { ColorPropsValue, DivProps } from '../../types';
 import { ButtonProps } from '../button';
 export interface SlidableActionsActionProps extends DivProps {
@@ -6,7 +6,9 @@ export interface SlidableActionsActionProps extends DivProps {
     label?: ReactNode;
     icon?: ReactNode;
     buttonProps?: Omit<ButtonProps, 'onClick'>;
+    /** 点击action后是否自动归位，默认为`true` */
+    autoReturn?: boolean;
     /** @private */
     _index?: number;
 }
-export declare const SlidableActionsAction: import("react").MemoExoticComponent<({ color, label, icon, buttonProps, _index, ...props }: SlidableActionsActionProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const SlidableActionsAction: React.MemoExoticComponent<({ color, label, icon, buttonProps, _index, ...props }: SlidableActionsActionProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

package/dist/cjs/components/slidableActions/slidableActionsAction.js

@@ -9,7 +9,7 @@ const utils_1 = require("../../utils");
 const theme_1 = require("../theme");
 const slidableActions_1 = require("./slidableActions");
 exports.SlidableActionsAction = (0, react_1.memo)(({ color = 'default', label, icon, buttonProps, _index, ...props }) => {
-    const { actionsContainer, translate, maxDistance } = (0, slidableActions_1.useSlidableActionsContext)();
+    const { actionsContainer, translate, resetTranslate, maxDistance, autoReturn } = (0, slidableActions_1.useSlidableActionsContext)();
     const innerButtonRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         actionsContainer[_index] = innerButtonRef.current;
@@ -32,8 +32,12 @@ exports.SlidableActionsAction = (0, react_1.memo)(({ color = 'default', label, i
             ? '#aaaaaa'
             : (0, utils_1.colorTransfer)(color, theme);
     }, [color, theme]);
+    const clickHandler = (e) => {
+        props.onClick?.(e);
+        autoReturn && resetTranslate();
+    };
     return ((0, jsx_runtime_1.jsx)("div", { ...props, className: slidableActions_style_1.classes.actionItem, style: {
             translate: `${currentTranslate}px 0`,
             backgroundColor
-        }, children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...buttonProps, ref: (0, utils_1.cloneRef)(buttonProps?.ref, innerButtonRef), className: (0, utils_1.clsx)(slidableActions_style_1.classes.actionItemWrap, buttonProps?.className), prefix: icon, variant: "plain", color: "#ffffff", children: label }) }));
+        }, onClick: clickHandler, children: (0, jsx_runtime_1.jsx)(button_1.Button, { ...buttonProps, ref: (0, utils_1.cloneRef)(buttonProps?.ref, innerButtonRef), className: (0, utils_1.clsx)(slidableActions_style_1.classes.actionItemButton, buttonProps?.className), prefix: icon, color: color, variant: "flatted", children: label }) }));
 });

package/dist/cjs/components/slider/slider.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode, JSX } from 'react';
-import { DraggableOptions } from '../../utils';
+import { GestureOptions } from '../../utils';
 import { ColorPropsValue, DivProps } from '../../types';
 import { TooltipProps } from '../tooltip';
 export interface MarkItem extends DivProps {
@@ -41,7 +41,7 @@ interface SliderBaseProps extends Omit<DivProps, 'defaultValue' | 'onChange' | '
     markLabelOffset?: number;
     markSize?: number;
     disableTrack?: boolean;
-    draggableOptions?: DraggableOptions;
+    gestureOptions?: GestureOptions;
 }
 export interface SliderSingleProps extends SliderBaseProps {
     defaultValue?: number;
@@ -58,5 +58,5 @@ export interface SliderRangeProps extends SliderBaseProps {
     suffix?: ReactNode | ((value: [number, number]) => ReactNode);
 }
 export type SliderProps = SliderSingleProps | SliderRangeProps;
-export declare const Slider: import("react").MemoExoticComponent<({ color, orientation, variant, inset, railSize, railProps, renderRail, handleSize, handleProps, disableHandleOutline, renderHandle, tooltipProps, min, max, step, marks, markLabelOffset, prefix, suffix, disableTrack, draggableOptions, defaultValue, value, onChange, ...props }: SliderProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Slider: import("react").MemoExoticComponent<({ color, orientation, variant, inset, railSize, railProps, renderRail, handleSize, handleProps, disableHandleOutline, renderHandle, tooltipProps, min, max, step, marks, markLabelOffset, prefix, suffix, disableTrack, gestureOptions, defaultValue, value, onChange, ...props }: SliderProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
 export {};

package/dist/cjs/components/slider/slider.js

@@ -8,7 +8,7 @@ const utils_1 = require("../../utils");
 const slider_style_1 = require("./slider.style");
 const tooltip_1 = require("../tooltip");
 const theme_1 = require("../theme");
-exports.Slider = (0, react_2.memo)(({ color = 'primary', orientation = 'horizontal', variant = 'filled', inset, railSize = inset ? 14 : 4, railProps, renderRail, handleSize = 14, handleProps, disableHandleOutline, renderHandle, tooltipProps, min = 0, max = 100, step = 1, marks, markLabelOffset, prefix, suffix, disableTrack, draggableOptions, defaultValue = min, value, onChange, ...props }) => {
+exports.Slider = (0, react_2.memo)(({ color = 'primary', orientation = 'horizontal', variant = 'filled', inset, railSize = inset ? 14 : 4, railProps, renderRail, handleSize = 14, handleProps, disableHandleOutline, renderHandle, tooltipProps, min = 0, max = 100, step = 1, marks, markLabelOffset, prefix, suffix, disableTrack, gestureOptions, defaultValue = min, value, onChange, ...props }) => {
     const { spacing } = (0, theme_1.useTheme)();
     markLabelOffset ??= inset ? spacing[1] : spacing[2];
     const orderedMarks = (0, react_2.useMemo)(() => {
@@ -90,10 +90,10 @@ exports.Slider = (0, react_2.memo)(({ color = 'primary', orientation = 'horizont
     const railRef = (0, react_2.useRef)(null);
     const handleRefs = (0, react_2.useRef)([]);
     const dragStartData = (0, react_2.useRef)(void 0);
-    const draggableHandle = (0, utils_1.useDraggableHandle)({
-        ...draggableOptions,
+    const draggableHandles = (0, utils_1.useDraggable)({
+        ...gestureOptions,
         onDragStart(e) {
-            draggableOptions?.onDragStart?.(e);
+            gestureOptions?.onDragStart?.(e);
             const railLength = orientation === 'horizontal' ? railRef.current.offsetWidth : railRef.current.offsetHeight;
             let handleIndex = 0;
             let percent;
@@ -150,9 +150,9 @@ exports.Slider = (0, react_2.memo)(({ color = 'primary', orientation = 'horizont
             dragStartData.current = { railLength, percent, handleIndex };
         },
         onDrag(info, e) {
-            draggableOptions?.onDrag?.(info, e);
+            gestureOptions?.onDrag?.(info, e);
             const { percent, railLength, handleIndex } = dragStartData.current;
-            const delta = orientation === 'horizontal' ? info.deltaX : -info.deltaY;
+            const delta = orientation === 'horizontal' ? info.diff[0] : -info.diff[1];
             setInnerValue(percentToValue(percent + delta / railLength * 100), handleIndex);
         }
     });
@@ -187,7 +187,7 @@ exports.Slider = (0, react_2.memo)(({ color = 'primary', orientation = 'horizont
                 onPointerDown(e) {
                     e.stopPropagation();
                     handleProps?.onPointerDown?.(e);
-                    draggableHandle.onPointerDown(e);
+                    draggableHandles.onPointerDown(e);
                 }
             };
             return renderHandle
@@ -229,7 +229,7 @@ exports.Slider = (0, react_2.memo)(({ color = 'primary', orientation = 'horizont
             },
             onPointerDown: e => {
                 railProps?.onPointerDown?.(e);
-                draggableHandle.onPointerDown(e);
+                draggableHandles.onPointerDown(e);
             },
             children: ((0, jsx_runtime_1.jsxs)("div", { className: slider_style_1.classes.railWrap, children: [!disableTrack &&
                         (0, jsx_runtime_1.jsx)("div", { className: slider_style_1.classes.track, style: valueIsArray

package/dist/cjs/components/tabs/tabs.js

@@ -98,7 +98,7 @@ exports.Tabs = (0, react_1.memo)(({ tabs, labelKey = 'label', primaryKey = 'valu
             });
         };
         if (position === 'top' || position === 'bottom') {
-            scroller.addEventListener('wheel', onWheel, { passive: false });
+            scroller.addEventListener('wheel', onWheel);
         }
         const resizeObserver = new ResizeObserver(setShadow);
         resizeObserver.observe(scroller);

package/dist/cjs/components/theme/themeVariables.js

@@ -109,7 +109,7 @@ exports.defaultBreakpoints = {
     sm: 600,
     md: 900,
     lg: 1200,
-    xl: 1536
+    xl: 1500
 };
 exports.defaultFontFamily = `-apple-system, BlinkMacSystemFont, 'Segoe UI',
     Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji',

package/dist/cjs/components/upload/itemStatus.d.ts

@@ -1,7 +1,7 @@
 import { Dispatch, Ref, SetStateAction } from 'react';
 import { UploadSharedProps, UploadFile, UploadStatus } from './upload';
 export type ItemRef<R, A extends any[]> = {
-    upload(...args: A): Promise<R>;
+    upload(...args: A): Promise<R | undefined>;
     setStatus: Dispatch<SetStateAction<UploadStatus>>;
     setProgress: Dispatch<SetStateAction<number>>;
 };

package/dist/cjs/components/upload/itemStatus.js

@@ -7,6 +7,9 @@ function useItemStatus(props) {
         props.file.url ||= URL.createObjectURL(props.file);
     }
     const upload = props.file.upload = async (...args) => {
+        if (!props.onUpload) {
+            return;
+        }
         try {
             setStatus('uploading');
             setProgress(0);

package/dist/cjs/components/upload/upload.d.ts

@@ -8,11 +8,11 @@ export interface UploadFile<R, A extends any[]> extends File {
     progress?: number;
     status?: UploadStatus;
     url?: string;
-    upload?(...args: A): Promise<R>;
+    upload?(...args: A): Promise<R | undefined>;
 }
 export interface UploadSharedProps<R, A extends any[]> {
     type?: 'file' | 'image';
-    onUpload(files: UploadFile<R, A>[], setProgress: Dispatch<SetStateAction<number>>, ...args: A): Promise<R>;
+    onUpload?(files: UploadFile<R, A>[], setProgress: Dispatch<SetStateAction<number>>, ...args: A): Promise<R>;
 }
 export interface UploadProps<R, A extends any[]> extends UploadSharedProps<R, A>, Omit<DivProps, 'defaultValue' | 'onChange'> {
     inputProps?: JSX.IntrinsicElements['input'];
@@ -37,7 +37,7 @@ export interface UploadProps<R, A extends any[]> extends UploadSharedProps<R, A>
     onChange?(value: UploadFile<R, A>[]): void;
 }
 export interface UploadRef<R = any, A extends any[] = any[]> extends HTMLDivElement {
-    upload(...args: A): Promise<R>;
+    upload(...args: A): Promise<R | undefined>;
 }
 export declare const Upload: {
     <R, A extends any[]>(props: UploadProps<R, A>): ReactElement;

package/dist/cjs/components/upload/upload.js

@@ -34,7 +34,7 @@ exports.Upload = (0, react_1.memo)(({ inputProps, type = 'file', accept = type =
                 itemRef?.setProgress(0);
             }
             try {
-                const ret = await onUpload(innerValue.current, progress => {
+                const ret = await onUpload?.(innerValue.current, progress => {
                     for (const [, itemRef] of itemRefs.current) {
                         itemRef?.setProgress(progress);
                     }

package/dist/cjs/extensions/documentViewer/documentViewer.js

@@ -13,7 +13,6 @@ const button_1 = require("../../components/button");
 const documentViewer_style_1 = require("./documentViewer.style");
 const utils_1 = require("../../utils");
 const pdfViewer_1 = require("./pdfViewer");
-const image_1 = require("../../components/image");
 const __1 = require("../..");
 const faDownload_1 = require("@fortawesome/free-solid-svg-icons/faDownload");
 exports.DocumentViewer = (0, react_1.memo)(({ src, filename, onError, type, extension, setDocumentTitle = true }) => {
@@ -65,7 +64,7 @@ exports.DocumentViewer = (0, react_1.memo)(({ src, filename, onError, type, exte
     }
     // image
     if (mimeType.includes('image/')) {
-        return (0, jsx_runtime_1.jsx)(image_1.ImagePreview, { src: src, open: true, showClose: false });
+        return (0, jsx_runtime_1.jsx)(__1.Gallery, { src: src, open: true, showClose: false });
     }
     return empty;
 });

package/dist/cjs/index.d.ts

@@ -37,6 +37,7 @@ export * from './components/dropdown';
 export * from './components/flex';
 export * from './components/form';
 export * from './components/formDialog';
+export * from './components/gallery';
 export * from './components/grid';
 export * from './components/highlight';
 export * from './components/image';
@@ -52,6 +53,7 @@ export * from './components/overlayBase';
 export * from './components/pagination';
 export * from './components/palette';
 export * from './components/pickerDialog';
+export * from './components/pinchable';
 export * from './components/placeholder';
 export * from './components/popper';
 export * from './components/progress';

package/dist/cjs/index.js

@@ -42,6 +42,7 @@ tslib_1.__exportStar(require("./components/dropdown"), exports);
 tslib_1.__exportStar(require("./components/flex"), exports);
 tslib_1.__exportStar(require("./components/form"), exports);
 tslib_1.__exportStar(require("./components/formDialog"), exports);
+tslib_1.__exportStar(require("./components/gallery"), exports);
 tslib_1.__exportStar(require("./components/grid"), exports);
 tslib_1.__exportStar(require("./components/highlight"), exports);
 tslib_1.__exportStar(require("./components/image"), exports);
@@ -57,6 +58,7 @@ tslib_1.__exportStar(require("./components/overlayBase"), exports);
 tslib_1.__exportStar(require("./components/pagination"), exports);
 tslib_1.__exportStar(require("./components/palette"), exports);
 tslib_1.__exportStar(require("./components/pickerDialog"), exports);
+tslib_1.__exportStar(require("./components/pinchable"), exports);
 tslib_1.__exportStar(require("./components/placeholder"), exports);
 tslib_1.__exportStar(require("./components/popper"), exports);
 tslib_1.__exportStar(require("./components/progress"), exports);

package/dist/cjs/utils/dnd.d.ts

@@ -1,4 +1,3 @@
-import React, { HTMLAttributes } from 'react';
 import { DragEndEvent } from '@dnd-kit/core';
 import { Obj } from '../types';
 /**
@@ -12,44 +11,3 @@ export declare function useDndSensors(): import("@dnd-kit/core").SensorDescripto
  * @param primaryKey 索引用的主键
  */
 export declare function onDndDragEnd<S extends Obj>(e: DragEndEvent, prevState: S[], primaryKey?: string): S[] | undefined;
-export type DraggableOptions<T extends Element = Element, D = any> = {
-    disabled?: boolean;
-    /** 按下后经过一段时间才触发拖拽事件，单位ms */
-    delay?: number;
-    /** 拖拽一段距离后才触发拖拽事件，单位px */
-    distance?: number;
-    onDragStart?(e: React.PointerEvent<T>): D;
-    onDrag?(info: DragInfo<D>, e: PointerEvent): void;
-    onDragEnd?(info: DragEndInfo<D>): void;
-    onDragCancel?(info: DragEndInfo<D>): void;
-    /** 若设为true，则会禁用浏览器默认拖拽行为，通常在触屏端使用 */
-    disableNativeTouchMove?: boolean;
-    /** 托管原有的onPointerDown、onTouchStart、onClick事件 */
-    onPointerDown?(e: React.PointerEvent<T>): void;
-    onTouchStart?(e: React.TouchEvent<T>): void;
-    onClick?(e: React.MouseEvent<T>): void;
-    /** 若拖拽节点受zoom样式的影响，可传入zoom值修正 */
-    zoom?: number;
-};
-export type DragInfo<T> = {
-    /** 开始位置 */
-    startX: number;
-    startY: number;
-    /** 当前位置 */
-    currentX: number;
-    currentY: number;
-    /** 拖拽距离，往右下拖拽为正数，往左上拖拽为负数 */
-    deltaX: number;
-    deltaY: number;
-    /** `onDragStart`的返回值 */
-    startData: T | undefined;
-};
-export interface DragEndInfo<T> extends DragInfo<T> {
-    /** 从按下到抬起经过的时长（ms） */
-    duration: number;
-    /** 拖拽速度（px/ms） */
-    speedX: number;
-    speedY: number;
-}
-export type HandleProps<T extends Element> = Required<Pick<HTMLAttributes<T>, 'onPointerDown' | 'onTouchStart' | 'onClick' | 'onDragStart'>>;
-export declare function useDraggableHandle<T extends Element, D = any>(options?: DraggableOptions<T, D>): HandleProps<T>;

package/dist/cjs/utils/dnd.js

@@ -2,12 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDndSensors = useDndSensors;
 exports.onDndDragEnd = onDndDragEnd;
-exports.useDraggableHandle = useDraggableHandle;
-const react_1 = require("react");
-const hooks_1 = require("./hooks");
 const core_1 = require("@dnd-kit/core");
 const sortable_1 = require("@dnd-kit/sortable");
-const theme_1 = require("../components/theme");
 /**
  * 默认提供给@dnd-kit的sensors属性
  */
@@ -34,120 +30,3 @@ function onDndDragEnd(e, prevState, primaryKey = 'id') {
     const newIndex = prevState.findIndex(v => v[primaryKey] === over.id);
     return (0, sortable_1.arrayMove)(prevState, oldIndex, newIndex);
 }
-function useDraggableHandle(options = {}) {
-    const { zoom } = (0, theme_1.useTheme)();
-    options.zoom ||= zoom;
-    const syncOptions = (0, hooks_1.useSync)(options);
-    const preventDefaultCallback = (0, react_1.useRef)(void 0);
-    const onTouchStart = (0, react_1.useCallback)(() => {
-        if (syncOptions.current.disabled || !syncOptions.current.disableNativeTouchMove) {
-            return;
-        }
-        addEventListener('touchmove', preventDefaultCallback.current = e => {
-            e.cancelable && e.preventDefault();
-        }, { passive: false });
-    }, []);
-    const startTime = (0, react_1.useRef)(0);
-    const startPosition = (0, react_1.useRef)([0, 0]);
-    const delay = (0, react_1.useRef)(void 0);
-    const data = (0, react_1.useRef)(void 0);
-    const onPointerDown = (0, react_1.useCallback)((e) => {
-        if (syncOptions.current.disabled) {
-            return;
-        }
-        isDragged.current = false;
-        const dragStart = () => {
-            startTime.current = Date.now();
-            startPosition.current = [e.clientX, e.clientY];
-            data.current = syncOptions.current.onDragStart?.(e);
-            document.documentElement.style.userSelect = 'none';
-        };
-        if (syncOptions.current.delay) {
-            delay.current = setTimeout(() => {
-                delay.current = void 0;
-                dragStart();
-            }, syncOptions.current.delay);
-        }
-        else {
-            dragStart();
-        }
-        addEventListener('pointermove', onPointerMove);
-        addEventListener('pointerup', onPointerUp);
-        addEventListener('pointercancel', onPointerCancel);
-    }, []);
-    const buildDragInfo = ({ clientX, clientY }) => {
-        const [startX, startY] = startPosition.current;
-        const deltaX = (clientX - startX) / (syncOptions.current.zoom);
-        const deltaY = (clientY - startY) / (syncOptions.current.zoom);
-        return {
-            startX, startY,
-            currentX: clientX, currentY: clientY,
-            deltaX, deltaY,
-            startData: data.current
-        };
-    };
-    const onPointerMove = (e) => {
-        e.preventDefault();
-        const dragInfo = buildDragInfo(e);
-        const absDeltaX = Math.abs(dragInfo.deltaX);
-        const absDeltaY = Math.abs(dragInfo.deltaY);
-        if (delay.current) {
-            // 延迟尚未结束，但偏移量过大，取消拖拽
-            (absDeltaX > 5 || absDeltaY > 5) && onPointerCancel(e);
-            return;
-        }
-        const distance = syncOptions.current.distance || 0;
-        if (absDeltaX < distance && absDeltaY < distance) {
-            // 拖拽距离未达到起步距离
-            return;
-        }
-        isDragged.current = true;
-        syncOptions.current.onDrag?.(dragInfo, e);
-    };
-    const removeListener = () => {
-        delay.current && clearTimeout(delay.current);
-        delay.current = void 0;
-        if (preventDefaultCallback.current) {
-            removeEventListener('touchmove', preventDefaultCallback.current);
-            preventDefaultCallback.current = void 0;
-        }
-        document.documentElement.style.userSelect = '';
-        removeEventListener('pointermove', onPointerMove);
-        removeEventListener('pointerup', onPointerUp);
-        removeEventListener('pointercancel', onPointerCancel);
-    };
-    const buildDragEndInfo = (e) => {
-        const dragInfo = buildDragInfo(e);
-        const duration = Date.now() - startTime.current;
-        return {
-            ...dragInfo,
-            duration,
-            speedX: Math.abs(dragInfo.deltaX / duration),
-            speedY: Math.abs(dragInfo.deltaY / duration)
-        };
-    };
-    const onPointerUp = (e) => {
-        removeListener();
-        syncOptions.current.onDragEnd?.(buildDragEndInfo(e));
-    };
-    const onPointerCancel = (e) => {
-        removeListener();
-        const callback = syncOptions.current.onDragCancel || syncOptions.current.onDragEnd;
-        callback?.(buildDragEndInfo(e));
-    };
-    const isDragged = (0, react_1.useRef)(false);
-    const onClick = (0, react_1.useCallback)((e) => {
-        if (isDragged.current) {
-            // 已经触发了拖拽，避免触发点击事件
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        else {
-            syncOptions.current.onClick?.(e);
-        }
-    }, []);
-    const onDragStart = (0, react_1.useCallback)((e) => {
-        e.preventDefault();
-    }, []);
-    return { onTouchStart, onPointerDown, onClick, onDragStart };
-}

package/dist/cjs/utils/gesture.d.ts

@@ -0,0 +1,69 @@
+import React, { HTMLAttributes, MouseEventHandler } from 'react';
+type Point = [number, number];
+export type DragInfo<D = any> = {
+    /** 开始位置 */
+    start: Point;
+    /** 当前位置 */
+    current: Point;
+    /** 拖拽距离，往右下拖拽为正数，往左上拖拽为负数 */
+    diff: Point;
+    /** {@link GestureOptions.onDragStart}的返回值 */
+    data: D;
+};
+export interface DragEndInfo<D = any> extends DragInfo<D> {
+    /** 从按下到抬起经过的时长（ms） */
+    duration: number;
+    /** 拖拽速度（px/ms） */
+    speed: Point;
+}
+export type PinchStartInfo = {
+    /** 两指中点 */
+    startMiddle: Point;
+    /** 两指间距 */
+    startSpacing: number;
+};
+export interface PinchInfo<P = any> extends PinchStartInfo {
+    currentMiddle: Point;
+    diffMiddle: Point;
+    currentSpacing: number;
+    diffSpacing: number;
+    data: P;
+}
+type SharedGestureOptions = {
+    disabled?: boolean;
+    /** 通常无需使用，若元素受zoom样式的影响，可传入zoom值修正 */
+    zoom?: number;
+    /** 托管点击事件 */
+    onClick?: MouseEventHandler;
+};
+export interface DraggableGestureOptions<D = any> extends SharedGestureOptions {
+    /** 按下后经过一段时间才触发拖拽事件，单位ms */
+    delay?: number;
+    /** 拖拽一段距离后才触发拖拽事件，单位px */
+    distance?: number;
+    onDragStart?(e: React.PointerEvent): D;
+    onDrag?(info: DragInfo<D>, e: PointerEvent): void;
+    onDragEnd?(info: DragEndInfo<D>): void;
+    onDragCancel?(info: DragEndInfo<D>): void;
+    /** 若设为true，则会禁用浏览器默认拖拽行为，通常在触屏端使用，默认为`true` */
+    preventNativeTouchMove?: boolean;
+}
+export interface PinchableGestureOptions<P = any> extends SharedGestureOptions {
+    onPinchStart?(info: PinchStartInfo): P;
+    onPinch?(info: PinchInfo<P>): void;
+    onPinchEnd?(info: PinchInfo<P>): void;
+}
+export declare function useDraggable<D = any>({ disabled, ...options }: DraggableGestureOptions<D>): HandleProps;
+export declare function usePinchable<P = any>({ disabled, ...options }: PinchableGestureOptions<P>): HandleProps;
+export interface GestureOptions<D = any, P = any> extends Omit<DraggableGestureOptions<D>, 'disabled'>, Omit<PinchableGestureOptions<P>, 'disabled'> {
+    /** 是否可拖拽，默认为`true` */
+    draggable?: boolean;
+    /** 是否可捏合缩放，默认为`false` */
+    pinchable?: boolean;
+}
+export type HandleProps = Required<Pick<HTMLAttributes<Element>, 'onPointerDown'>> & Pick<HTMLAttributes<Element>, 'onTouchStart' | 'onClick'>;
+export declare function useGesture<D = any, P = any>(options: GestureOptions<D, P>): {
+    draggableHandles: HandleProps;
+    pinchableHandles: HandleProps;
+};
+export {};