@zuzjs/ui 0.8.1 → 0.8.3

package/dist/esm/comps/TextWheel/index.js

@@ -17,11 +17,11 @@ const TextWheel = forwardRef((props, ref) => {
             this.updateValue(v);
             if (divRef.current) {
                 const chars = v.toString().split('');
-                divRef.current.querySelectorAll('.wheel-char').forEach((charElement, index) => {
+                divRef.current.querySelectorAll('.--wheel-char').forEach((charElement, index) => {
                     const char = chars[index];
                     if (charElement instanceof HTMLElement) {
                         charElement.setAttribute('data-value', char);
-                        const track = charElement.querySelector('.wheel-char-track');
+                        const track = charElement.querySelector('.--wheel-char-track');
                         if (track instanceof HTMLElement) {
                             track.style.setProperty('--v', char);
                         }
@@ -50,5 +50,5 @@ const TextWheel = forwardRef((props, ref) => {
                     background: `linear-gradient(0deg, ${color}, transparent, transparent, transparent, ${color})`,
                 } })] });
 });
-TextWheel.displayName = `TextWheel`;
+TextWheel.displayName = `Zuz.TextWheel`;
 export default TextWheel;

package/dist/esm/comps/Tooltip/index.js

@@ -53,5 +53,5 @@ const ToolTip = forwardRef((props, ref) => {
                     when: hovered
                 }, children: _jsx(Text, { className: `--text rel`, children: title }) })] });
 });
-ToolTip.displayName = `ToolTip`;
+ToolTip.displayName = `Zuz.ToolTip`;
 export default ToolTip;

package/dist/esm/comps/Treeview/index.js

@@ -22,5 +22,5 @@ const TreeView = forwardRef((props, ref) => {
             .filter(node => roots.includes(node.tag))
             .map(node => _jsx(TreeItem, { treeTag: treeViewTag ? `-${treeViewTag}` : ``, selected: selected, onSelect: e => handleSelect(e), icons: icons, meta: node, roots: roots, expanded: node.expanded || false, skeleton: rest.skeleton, nodes: nodes }, `--node-${node.tag}`)) });
 });
-TreeView.displayName = `ZuzUI.TreeView`;
+TreeView.displayName = `Zuz.TreeView`;
 export default TreeView;

package/dist/esm/comps/Treeview/item.js

@@ -27,7 +27,7 @@ const TreeItem = forwardRef((props, ref) => {
                             : _nodes.length == 0 ? SVGIcons.chevronBottom : isOpen ? SVGIcons.chevronBottom : SVGIcons.chevronRight }), _jsxs(Button, { className: `--node-meta flex aic`, onClick: (e) => onSelect(tag), children: [((icons?.nodeOpen && icons?.nodeClose) || (isRoot && icons?.rootOpen && icons?.rootClose)) &&
                                 _jsx(Icon, { skeleton: rest.skeleton, className: `--node-icon ${isRoot ? `--icon-root` : ``}`, name: icon || (isOpen ?
                                         isRoot ? icons?.rootOpen || icons.nodeOpen : icons.nodeOpen
-                                        : isRoot ? icons?.rootClose || icons?.nodeClose : icons?.nodeClose) }), _jsx(Text, { ...{ className: `--node-label` }, skeleton: rest.skeleton, children: label })] })] }), isOpen && _nodes.length > 0 && _jsx(Box, { className: `--sub-node tree-sub-node-${tag} flex cols`, children: _nodes.map(node => _jsx(TreeItem, { treeTag: treeTag, selected: selected, onSelect: onSelect, icons: icons, roots: roots, expanded: node.expanded || false, meta: node, nodes: nodes }, `--node-${node.tag}`)) })] });
+                                        : isRoot ? icons?.rootClose || icons?.nodeClose : icons?.nodeClose) }), _jsx(Text, { ...{ className: `--node-label ${isRoot ? `--node-label-root` : ``}`.trim() }, skeleton: rest.skeleton, children: label })] })] }), isOpen && _nodes.length > 0 && _jsx(Box, { className: `--sub-node tree-sub-node-${tag} flex cols`, children: _nodes.map(node => _jsx(TreeItem, { treeTag: treeTag, selected: selected, onSelect: onSelect, icons: icons, roots: roots, expanded: node.expanded || false, meta: node, nodes: nodes }, `--node-${node.tag}`)) })] });
 });
 TreeItem.displayName = `TreeItem`;
 export default TreeItem;

package/dist/esm/comps/VideoPlayer/index.js

@@ -4,4 +4,5 @@ import Box from "../Box";
 const VideoPlayer = forwardRef((props, ref) => {
     return _jsx(Box, { children: _jsx("video", {}) });
 });
+VideoPlayer.displayName = `Zuz.VideoPlayer`;
 export default VideoPlayer;

package/dist/esm/comps/index.d.ts

@@ -20,6 +20,8 @@ export * from './ContextMenu/types';
 export { default as CookiesConsent } from './CookiesConsent';
 export * from './CookiesConsent/types';
 export { default as Cover, type CoverProps } from './Cover';
+export { default as Cropper } from './Cropper';
+export * from './Cropper/types';
 export { default as Crumb } from './Crumb';
 export * from './Crumb/types';
 export { default as Drawer } from './Drawer';

package/dist/esm/comps/index.js

@@ -20,6 +20,8 @@ export * from './ContextMenu/types';
 export { default as CookiesConsent } from './CookiesConsent';
 export * from './CookiesConsent/types';
 export { default as Cover } from './Cover';
+export { default as Cropper } from './Cropper';
+export * from './Cropper/types';
 export { default as Crumb } from './Crumb';
 export * from './Crumb/types';
 export { default as Drawer } from './Drawer';

package/dist/esm/funs/events.d.ts

@@ -1,17 +1,41 @@
+export interface EventListener {
+    fun: (...args: any[]) => void;
+    context?: any;
+    id: symbol;
+}
 export interface Event {
     event: String | Symbol;
-    listeners: Array<{
-        fun: (...args: any[]) => void;
-        context?: any;
-    }>;
+    listeners: Array<EventListener>;
 }
 declare class Events {
     _events: Event[];
     constructor();
-    addEvent(event: String | Symbol, fun: (...args: any[]) => void, context?: any): number | undefined;
-    removeEvent(event: String | Symbol, fun: (...args: any[]) => void): void;
-    on(event: String | Symbol, fun: (...args: any[]) => void, context?: any): number | undefined;
+    /**
+     * Registers an event listener.
+     * @param event The name of the event.
+     * @param fun The callback function.
+     * @param context Optional context (this) for the callback.
+     * @returns A function to unsubscribe this specific listener.
+     */
+    on(event: String | Symbol, fun: (...args: any[]) => void, context?: any): () => void;
+    /**
+     * Removes event listeners matching a specific event and function.
+     * Note: This removes *all* listeners for the event that use the exact same function reference.
+     * It's often more reliable to use the unsubscribe function returned by 'on'.
+     * @param event The name of the event.
+     * @param fun The callback function to remove.
+     */
     off(event: String | Symbol, fun: (...args: any[]) => void): void;
+    /**
+     * Emits an event, calling all registered listeners.
+     * @param event The name of the event.
+     * @param args Arguments to pass to the listeners.
+     */
     emit(event: String | Symbol, ...args: any[]): void;
+    /**
+     * Removes all listeners for a specific event.
+     * @param event The name of the event.
+     */
+    removeAllListeners(event: String | Symbol): void;
 }
 export default Events;

package/dist/esm/funs/events.js

@@ -3,42 +3,80 @@ class Events {
     constructor() {
         this._events = [];
     }
-    addEvent(event, fun, context) {
-        const evt = this._events.find(x => x.event == event);
-        const listener = { fun: context ? fun.bind(context) : fun, context };
+    /**
+     * Registers an event listener.
+     * @param event The name of the event.
+     * @param fun The callback function.
+     * @param context Optional context (this) for the callback.
+     * @returns A function to unsubscribe this specific listener.
+     */
+    on(event, fun, context) {
+        const evt = this._events.find(x => x.event === event);
+        const id = Symbol('listener_id'); // Give each listener a unique ID
+        const listener = {
+            fun: fun, // Store original function
+            context: context,
+            id: id,
+        };
         if (!evt) {
-            return this._events.push({ event: event, listeners: [listener] });
+            this._events.push({ event: event, listeners: [listener] });
         }
-        if (!evt.listeners.find(x => x.fun == fun)) {
+        else {
             evt.listeners.push(listener);
         }
+        // Return an unsubscribe function
+        return () => {
+            const currentEvt = this._events.find(x => x.event === event);
+            if (currentEvt) {
+                currentEvt.listeners = currentEvt.listeners.filter(l => l.id !== id);
+                if (currentEvt.listeners.length === 0) {
+                    this._events = this._events.filter(e => e.event !== event);
+                }
+            }
+        };
     }
-    removeEvent(event, fun) {
-        const evt = this._events.find(x => x.event == event);
+    /**
+     * Removes event listeners matching a specific event and function.
+     * Note: This removes *all* listeners for the event that use the exact same function reference.
+     * It's often more reliable to use the unsubscribe function returned by 'on'.
+     * @param event The name of the event.
+     * @param fun The callback function to remove.
+     */
+    off(event, fun) {
+        const evt = this._events.find(x => x.event === event);
         if (evt) {
-            evt.listeners = evt.listeners.filter(x => x.fun != fun);
+            // Filter out listeners where the 'fun' property matches the provided function.
+            evt.listeners = evt.listeners.filter(listener => listener.fun !== fun);
+            // Optional: If no listeners remain for this event, remove the event entry.
+            if (evt.listeners.length === 0) {
+                this._events = this._events.filter(e => e.event !== event);
+            }
         }
     }
-    on(event, fun, context) {
-        return this.addEvent(event, fun, context);
-    }
-    off(event, fun) {
-        this.removeEvent(event, fun);
-    }
+    /**
+     * Emits an event, calling all registered listeners.
+     * @param event The name of the event.
+     * @param args Arguments to pass to the listeners.
+     */
     emit(event, ...args) {
-        const evt = this._events.find(x => x.event == event);
+        const evt = this._events.find(x => x.event === event);
         if (evt) {
-            // console.log(evt)
-            evt.listeners.forEach(({ fun, context }) => {
+            [...evt.listeners].forEach(({ fun, context }) => {
                 try {
-                    // f(args)
                     fun.apply(context, args);
                 }
                 catch (e) {
-                    console.error(e);
+                    console.error(`Error during event '${String(event)}' emission:`, e);
                 }
             });
         }
     }
+    /**
+     * Removes all listeners for a specific event.
+     * @param event The name of the event.
+     */
+    removeAllListeners(event) {
+        this._events = this._events.filter(e => e.event !== event);
+    }
 }
 export default Events;

package/dist/esm/funs/index.d.ts

@@ -1,4 +1,3 @@
-import { AxiosProgressEvent } from "axios";
 import { ReactElement, ReactNode, Ref } from "react";
 import { KeyCode } from "../types/enums.js";
 import { dynamicObject, FormatNumberParams, sortOptions } from "../types/index.js";
@@ -49,8 +48,6 @@ export declare const cleanProps: <T extends dynamicObject>(props: T, withProps?:
 export declare const withZuz: (cx: string | string[]) => string;
 export declare const setDeep: (object: dynamicObject, path: string, value: any, seperator?: string) => dynamicObject;
 export declare const removeDuplicatesFromArray: <T>(array: T[]) => T[];
-export declare const withPost: <T>(uri: string, data: dynamicObject | FormData, timeout?: number, onProgress?: (ev: AxiosProgressEvent) => void) => Promise<T>;
-export declare const withGet: <T>(uri: string, timeout?: number, ignoreKind?: boolean) => Promise<T>;
 export declare const withTime: (fun: (...args: any[]) => any) => {
     result: any;
     executionTime: number;
@@ -75,3 +72,8 @@ export declare const clamp: (value: number, min: number, max: number) => number;
 export declare function mergeRefs<T>(...refs: (Ref<T> | undefined)[]): Ref<T>;
 export declare const slugify: (text: string, separator?: string) => string;
 export declare const truncate: (selector: string, lines?: number) => void;
+export declare const checkPasswordStrength: (password: string) => {
+    score: number;
+    result: string;
+    suggestion: string[];
+};

package/dist/esm/funs/index.js

@@ -1,6 +1,4 @@
-import axios from "axios";
 import Hashids from "hashids";
-import Cookies from "js-cookie";
 import md5 from "md5";
 import moment from "moment";
 import { nanoid } from "nanoid";
@@ -205,88 +203,6 @@ export const removeDuplicatesFromArray = (array) => {
         return accumulator;
     }, []);
 };
-export const withPost = async (uri, data, timeout = 60, onProgress) => {
-    const _cookies = Cookies.get();
-    if (data instanceof FormData) {
-        for (const c in _cookies) {
-            data.append(c, _cookies[c]);
-        }
-        return new Promise((resolve, reject) => {
-            axios({
-                method: 'post',
-                url: uri,
-                data: data,
-                timeout: timeout * 1000,
-                headers: {
-                    'Content-Type': 'multipart/form-data',
-                },
-                onUploadProgress: ev => onProgress && onProgress(ev)
-            })
-                .then(resp => {
-                if (resp.data && "kind" in resp.data) {
-                    resolve(resp.data);
-                }
-                else {
-                    reject(resp.data);
-                }
-            })
-                .catch(err => reject(err));
-        });
-    }
-    return new Promise((resolve, reject) => {
-        axios.post(uri, {
-            ...data,
-            ..._cookies,
-            __stmp: new Date().getTime() / 1000
-        }, {
-            timeout: 1000 * timeout,
-            headers: {
-                'Content-Type': 'application/json',
-            }
-        })
-            .then(resp => {
-            if (resp.data && "kind" in resp.data) {
-                resolve(resp.data);
-            }
-            else {
-                reject(resp.data);
-            }
-        })
-            .catch(err => {
-            if (err?.response?.data)
-                reject(err.response.data);
-            else
-                reject(err.code && err.code == `ERR_NETWORK` ? { error: err.code, message: navigator.onLine ? `Unable to connect to the server. It may be temporarily down.` : `Network error: Unable to connect. Please check your internet connection and try again.` } : err);
-        });
-    });
-};
-export const withGet = async (uri, timeout = 60, ignoreKind = false) => {
-    return new Promise((resolve, reject) => {
-        axios
-            .get(uri, { timeout: timeout * 1000 })
-            .then((resp) => {
-            if (ignoreKind || (resp.data && "kind" in resp.data)) {
-                resolve(resp.data);
-            }
-            else {
-                reject(resp.data);
-            }
-        })
-            .catch((err) => {
-            if (err?.response?.data)
-                reject(err.response.data);
-            else
-                reject(err.code === `ERR_NETWORK`
-                    ? {
-                        error: err.code,
-                        message: navigator.onLine
-                            ? `Unable to connect to the server. It may be temporarily down.`
-                            : `Network error: Unable to connect. Please check your internet connection and try again.`,
-                    }
-                    : err);
-        });
-    });
-};
 export const withTime = (fun) => {
     const start = new Date().getTime();
     const result = fun();
@@ -546,3 +462,42 @@ export const truncate = (selector, lines = 2) => {
         }
     });
 };
+export const checkPasswordStrength = (password) => {
+    const suggestions = [];
+    let score = 0;
+    if (password.length >= 8) {
+        score++;
+    }
+    else {
+        suggestions.push("Use at least 8 characters");
+    }
+    if (/[a-z]/.test(password)) {
+        score++;
+    }
+    else {
+        suggestions.push("Add lowercase letters");
+    }
+    if (/[A-Z]/.test(password)) {
+        score++;
+    }
+    else {
+        suggestions.push("Add uppercase letters");
+    }
+    if (/\d/.test(password)) {
+        score++;
+    }
+    else {
+        suggestions.push("Include numbers");
+    }
+    if (/[^A-Za-z0-9]/.test(password)) {
+        score++;
+    }
+    else {
+        suggestions.push("Add special characters (e.g. !, @, #)");
+    }
+    return {
+        score,
+        result: score <= 2 ? "Weak" : score == 3 ? "Moderate" : score == 4 ? "Strong" : "Excellent",
+        suggestion: suggestions
+    };
+};

package/dist/esm/hooks/index.d.ts

@@ -19,6 +19,7 @@ export { default as useFileManager } from './useFileManager';
 export { default as useFacebookPixel } from './useFacebookPixel';
 export { default as useGoogleTagManager } from './useGoogleTagManager';
 export { default as useImage } from './useImage';
+export { default as useImageCropper } from './useImageCropper';
 export { default as useIntersectionObserver } from './useIntersectionObserver';
 export { default as useScrollbar } from './useScrollbar';
 export { default as useSheet } from './useSheet';
@@ -27,5 +28,6 @@ export { default as useNetworkStatus } from './useNetworkStatus';
 export { default as useResizeObserver } from './useResizeObserver';
 export { default as useSlider } from './useSlider';
 export { default as useTruncateText } from './useTruncateText';
+export { default as useUploader } from './useUploader';
 export { default as useViewTransition } from './useViewTransition';
 export { default as useWebSocket, type WebSocketOptions } from './useWebSocket';

package/dist/esm/hooks/index.js

@@ -20,6 +20,7 @@ export { default as useFileManager } from './useFileManager';
 export { default as useFacebookPixel } from './useFacebookPixel';
 export { default as useGoogleTagManager } from './useGoogleTagManager';
 export { default as useImage } from './useImage';
+export { default as useImageCropper } from './useImageCropper';
 export { default as useIntersectionObserver } from './useIntersectionObserver';
 export { default as useScrollbar } from './useScrollbar';
 export { default as useSheet } from './useSheet';
@@ -28,5 +29,6 @@ export { default as useNetworkStatus } from './useNetworkStatus';
 export { default as useResizeObserver } from './useResizeObserver';
 export { default as useSlider } from './useSlider';
 export { default as useTruncateText } from './useTruncateText';
+export { default as useUploader } from './useUploader';
 export { default as useViewTransition } from './useViewTransition';
 export { default as useWebSocket } from './useWebSocket';

package/dist/esm/hooks/useDB.d.ts

@@ -17,10 +17,14 @@ export interface IDBSchema {
     unique?: boolean;
 }
 declare const useDB: (options: IDBOptions) => {
+    getAll: <T>(storeName: string) => Promise<T>;
     getByID: <T>(storeName: string, id: string | number) => Promise<T>;
     getStore: <T>(storeName: string, id: string | number) => Promise<T>;
     insert: <T>(storeName: string, value: T, key?: any) => Promise<number>;
-    update: <T>(storeName: string, value: T, key: IDBValidKey) => Promise<void>;
+    update: <T>(storeName: string, values: {
+        [x: string | number | symbol]: T;
+    }) => Promise<void>;
+    update_one: <T extends Object>(storeName: string, value: Partial<T>, key: IDBValidKey) => Promise<void>;
     remove: (storeName: string, key: IDBValidKey) => Promise<void>;
     error: string | null;
 };

package/dist/esm/hooks/useDB.js

@@ -65,6 +65,25 @@ const useDB = (options) => {
             reject(err.message || 'Database either corrupted or not initialized');
         });
     });
+    const getAll = (storeName) => new Promise((resolve, reject) => {
+        connect().then((db) => {
+            const { store } = createTransaction(storeName, DBMode.readOnly);
+            const request = store.getAll();
+            request.onsuccess = (evt) => {
+                const result = evt.target.result;
+                if (undefined == result)
+                    reject('Record not found');
+                resolve(evt.target.result);
+            };
+            request.onerror = (evt) => {
+                reject(`SELECT Failed. ${evt.target.result}`);
+            };
+        })
+            .catch(err => {
+            console.log(`[getAll]`, err);
+            reject('Database either corrupted or not initialized');
+        });
+    });
     const getByID = (storeName, id) => new Promise((resolve, reject) => {
         connect().then((db) => {
             const { store } = createTransaction(storeName, DBMode.readOnly);
@@ -80,7 +99,7 @@ const useDB = (options) => {
             };
         })
             .catch(err => {
-            // console.log(`getByID`, err)
+            console.log(`[getByID]`, err);
             reject('Database either corrupted or not initialized');
         });
     });
@@ -99,16 +118,43 @@ const useDB = (options) => {
             reject(err.message || 'Database either corrupted or not initialized');
         });
     });
-    const update = (storeName, value, key) => new Promise((resolve, reject) => {
+    const update_one = (storeName, value, key) => new Promise((resolve, reject) => {
         connect().then((db) => {
             const { store } = createTransaction(storeName, DBMode.readWrite);
-            const request = store.put(value, key);
+            const getReq = store.get(key);
+            getReq.onsuccess = () => {
+                const existing = getReq.result;
+                if (!existing) {
+                    reject(`Record with key ${key} not found.`);
+                    return;
+                }
+                const updateReq = store.put({ ...existing, ...value });
+                updateReq.onsuccess = () => resolve();
+                updateReq.onerror = (evt) => reject(`Update failed. ${evt.target.error}`);
+            };
+            getReq.onerror = (evt) => {
+                reject(`Failed to get existing record. ${evt.target.error}`);
+            };
+        })
+            .catch(err => {
+            reject('Database either corrupted or not initialized');
+        });
+    });
+    const update = (storeName, values) => new Promise((resolve, reject) => {
+        connect().then((db) => {
+            const { store } = createTransaction(storeName, DBMode.readWrite);
+            let completed = 0;
+            const request = store.put(values);
             request.onsuccess = (evt) => {
                 resolve();
             };
+            request.onerror = (evt) => {
+                reject(`UPDATE Failed. ${evt.target.result}`);
+            };
         })
             .catch(err => {
-            reject('Database either corrupted or not initialized');
+            reject(`UPDATE Failed. ${err}`);
+            // reject('Database either corrupted or not initialized');
         });
     });
     const remove = (storeName, key) => new Promise((resolve, reject) => {
@@ -125,10 +171,12 @@ const useDB = (options) => {
         });
     });
     return {
+        getAll,
         getByID,
         getStore,
         insert,
         update,
+        update_one,
         remove,
         error
     };

package/dist/esm/hooks/useImage.js

@@ -1,8 +1,8 @@
 "use client";
 import { useEffect, useRef, useState } from "react";
 const useImage = (url, crossOrigin, referrerPolicy) => {
-    const img = useRef(null);
     const [state, setState] = useState({ loaded: false, error: null });
+    const img = useRef(null);
     useEffect(() => {
         if (url && url !== ``) {
             var _img = new Image();
@@ -17,7 +17,7 @@ const useImage = (url, crossOrigin, referrerPolicy) => {
             };
             _img.src = url;
         }
-    }, []);
+    }, [url]);
     return [img.current ? img.current.src : ``, state.loaded, state.error];
 };
 export default useImage;

package/dist/esm/hooks/useImageCropper.d.ts

@@ -0,0 +1,10 @@
+import { CropShape } from '..';
+declare const useImageCropper: (imageUrl: string, cropSize: number, cropShape?: CropShape, scale?: number) => {
+    canvasRef: import("react").RefObject<HTMLCanvasElement | null>;
+    crop: () => string | null;
+    setScale: import("react").Dispatch<import("react").SetStateAction<number>>;
+    handleMouseDown: () => void;
+    handleMouseUp: () => void;
+    handleMouseMove: (e: React.MouseEvent<HTMLCanvasElement>) => void;
+};
+export default useImageCropper;

package/dist/esm/hooks/useImageCropper.js

@@ -0,0 +1,67 @@
+import { useEffect, useRef, useState } from 'react';
+import { CropShape } from '..';
+const useImageCropper = (imageUrl, cropSize, cropShape = CropShape.Circle, scale = 1) => {
+    const [dragging, setDragging] = useState(false);
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
+    const [_scale, setScale] = useState(scale);
+    const imgRef = useRef(null);
+    const canvasRef = useRef(null);
+    const draw = () => {
+        const canvas = canvasRef.current;
+        const ctx = canvas?.getContext('2d');
+        const img = imgRef.current;
+        if (!canvas || !ctx || !img)
+            return;
+        canvas.width = cropSize;
+        canvas.height = cropSize;
+        ctx.clearRect(0, 0, cropSize, cropSize);
+        ctx.globalAlpha = 0.5;
+        ctx.drawImage(img, offset.x, offset.y, img.width * _scale, img.height * _scale);
+        ctx.globalAlpha = 1.0;
+        ctx.save();
+        if (cropShape === CropShape.Circle) {
+            ctx.beginPath();
+            ctx.arc(cropSize / 2, cropSize / 2, cropSize / 2, 0, Math.PI * 2);
+            ctx.closePath();
+            ctx.clip();
+        }
+        ctx.drawImage(img, offset.x, offset.y, img.width * _scale, img.height * _scale);
+        ctx.restore();
+    };
+    useEffect(draw, [_scale]);
+    useEffect(() => {
+        if (imageUrl) {
+            const img = new Image();
+            img.onload = () => {
+                imgRef.current = img;
+                draw();
+            };
+            img.src = imageUrl;
+        }
+    }, [imageUrl, offset]);
+    const handleMouseDown = () => setDragging(true);
+    const handleMouseUp = () => setDragging(false);
+    const handleMouseMove = (e) => {
+        if (!dragging || !imgRef.current)
+            return;
+        setOffset(prev => ({
+            x: prev.x + e.movementX,
+            y: prev.y + e.movementY,
+        }));
+    };
+    const crop = () => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return null;
+        return canvas.toDataURL('image/png');
+    };
+    return {
+        canvasRef,
+        crop,
+        setScale,
+        handleMouseDown,
+        handleMouseUp,
+        handleMouseMove,
+    };
+};
+export default useImageCropper;

package/dist/esm/hooks/useSlider.d.ts

@@ -2,6 +2,6 @@ declare const useSlider: () => {
     push: (key: string) => void;
     goBack: () => void;
     prevKey: string | null;
-    direction: "right" | "left";
+    direction: "left" | "right";
 };
 export default useSlider;