@aiszlab/relax 1.2.25 → 1.2.26

package/dist/hooks/use-boolean.d.ts

@@ -1,14 +1,19 @@
-/// <reference types="react" />
+import { type Dispatch, type SetStateAction } from 'react';
+import type { State } from "../types";
+type UsedBoolean = [
+    boolean,
+    {
+        turnOn: () => void;
+        turnOff: () => void;
+        toggle: () => void;
+        setBoolean: Dispatch<SetStateAction<boolean>>;
+    }
+];
 /**
  * @author murukal
  *
  * @description
- * boolean state
+ * boolean state, in relax, we already create some api to easy use
  */
-export declare const useBoolean: (initialValue?: boolean) => {
-    isOn: boolean;
-    turnOn: () => void;
-    turnOff: () => void;
-    toggle: () => void;
-    setIsOn: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-};
+export declare const useBoolean: (initialState?: State<boolean>) => UsedBoolean;
+export {};

package/dist/hooks/use-boolean.mjs

@@ -4,20 +4,19 @@ import { useState, useCallback } from 'react';
  * @author murukal
  *
  * @description
- * boolean state
+ * boolean state, in relax, we already create some api to easy use
  */
-const useBoolean = (initialValue) => {
-    const [isOn, setIsOn] = useState(initialValue || false);
+const useBoolean = (initialState) => {
+    const [isOn, setIsOn] = useState(initialState !== null && initialState !== void 0 ? initialState : false);
     const turnOn = useCallback(() => setIsOn(true), []);
     const turnOff = useCallback(() => setIsOn(false), []);
     const toggle = useCallback(() => setIsOn((_isOn) => !_isOn), []);
-    return {
-        isOn,
-        turnOn,
-        turnOff,
-        toggle,
-        setIsOn
-    };
+    return [isOn, {
+            turnOn,
+            turnOff,
+            toggle,
+            setBoolean: setIsOn
+        }];
 };
 
 export { useBoolean };

package/dist/hooks/use-controlled-state.d.ts

@@ -1,5 +1,5 @@
 import { type Dispatch, type SetStateAction } from 'react';
-import { type State } from '../is/is-state-getter';
+import type { State } from "../types";
 interface Dependencies<T> {
     defaultState?: State<T>;
 }

package/dist/hooks/use-counter.d.ts

@@ -1,34 +1,38 @@
-/// <reference types="react" />
-interface Props {
+import { type Dispatch, type SetStateAction } from 'react';
+import type { State } from '../types';
+type Props = {
     /**
      * @description
      * initial value
      */
-    initialValue?: number;
+    initialState?: State<number>;
     /**
      * @description
-     * max
+     * max: count will not be greater than max
      */
     max?: number;
     /**
      * @description
-     * min
+     * min: count will not be smaller than min
      */
     min?: number;
-}
+};
+type UsedCounter = [
+    number,
+    {
+        add: (step?: number) => void;
+        subtract: (step?: number) => void;
+        first: () => void;
+        last: () => void;
+        reset: () => void;
+        setCount: Dispatch<SetStateAction<number>>;
+    }
+];
 /**
  * @author murukal
  *
  * @description
  * a number counter with some useful apis
  */
-export declare const useCounter: ({ max, min, ...props }?: Props) => {
-    count: number;
-    next: (step?: number) => void;
-    prev: (step?: number) => void;
-    first: () => void;
-    last: () => void;
-    reset: () => void;
-    setCount: import("react").Dispatch<import("react").SetStateAction<number>>;
-};
+export declare const useCounter: (initialState?: State<number>, { max, min }?: Props) => UsedCounter;
 export {};

package/dist/hooks/use-counter.mjs

@@ -1,6 +1,12 @@
-import { __rest } from '../node_modules/tslib/tslib.es6.mjs';
-import { useMemo, useState, useCallback } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import { clamp } from '../utils/clamp.mjs';
+import '../utils/debounce.mjs';
+import 'rxjs';
+import { useDefault } from './use-default.mjs';
+import './use-scroll-locker.mjs';
+import '../dom/scroll-to.mjs';
+import './use-toggleable.mjs';
+import 'react-is';
 
 /**
  * @author murukal
@@ -8,34 +14,26 @@ import { clamp } from '../utils/clamp.mjs';
  * @description
  * a number counter with some useful apis
  */
-const useCounter = (_a = { initialValue: 0, max: Infinity, min: 0 }) => {
-    var { max = Infinity, min = 0 } = _a, props = __rest(_a, ["max", "min"]);
-    const initialValue = useMemo(() => { var _a; return clamp((_a = props.initialValue) !== null && _a !== void 0 ? _a : 0, min, max); }, [max, min, props.initialValue]);
-    const [count, setCount] = useState(initialValue);
-    const next = useCallback((step = 1) => {
-        setCount((prev) => Math.min(max, prev + step));
+const useCounter = (initialState, { max = Infinity, min = 0 } = { max: Infinity, min: 0 }) => {
+    const defaultState = useDefault(initialState !== null && initialState !== void 0 ? initialState : 0);
+    const [_count, _setCount] = useState(defaultState);
+    const add = useCallback((step = 1) => {
+        _setCount((prev) => Math.min(max, prev + step));
     }, [max]);
-    const prev = useCallback((step = 1) => {
-        setCount((prev) => Math.max(min, prev - step));
+    const subtract = useCallback((step = 1) => {
+        _setCount((prev) => Math.max(min, prev - step));
     }, [min]);
     const first = useCallback(() => {
-        setCount(min);
+        _setCount(min);
     }, [min]);
     const last = useCallback(() => {
-        setCount(max);
+        _setCount(max);
     }, [max]);
     const reset = useCallback(() => {
-        setCount(initialValue);
-    }, [initialValue]);
-    return {
-        count,
-        next,
-        prev,
-        first,
-        last,
-        reset,
-        setCount
-    };
+        _setCount(defaultState);
+    }, []);
+    const count = useMemo(() => clamp(_count, min, max), [min, max]);
+    return [count, { add, subtract, first, last, reset, setCount: _setCount }];
 };
 
 export { useCounter };

package/dist/hooks/use-default.d.ts

@@ -1,4 +1,4 @@
-import { type State } from '../is/is-state-getter';
+import type { State } from '../types';
 /**
  * @author murukal
  *

package/dist/hooks/use-default.mjs

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { isStateGetter } from '../is/is-state-getter.mjs';
+import { toFunction } from '../utils/to-function.mjs';
 
 /**
  * @author murukal
@@ -8,14 +8,7 @@ import { isStateGetter } from '../is/is-state-getter.mjs';
  * state always be same after first render
  */
 const useDefault = (initialState) => {
-    return useMemo(() => {
-        if (isStateGetter(initialState)) {
-            return initialState();
-        }
-        else {
-            return initialState;
-        }
-    }, []);
+    return useMemo(toFunction(initialState), []);
 };
 
 export { useDefault };

package/dist/hooks/use-focus.d.ts

@@ -0,0 +1,9 @@
+type UsedFocus = [
+    boolean,
+    {
+        onFocus: () => void;
+        onBlur: () => void;
+    }
+];
+export declare const useFoucs: () => UsedFocus;
+export {};

package/dist/hooks/use-hover.d.ts

@@ -1,5 +1,9 @@
-export declare const useHover: () => {
-    isHovered: boolean;
-    onPointerEnter: () => void;
-    onPointerLeave: () => void;
-};
+type UsedHover = [
+    boolean,
+    {
+        onPointerEnter: () => void;
+        onPointerLeave: () => void;
+    }
+];
+export declare const useHover: () => UsedHover;
+export {};

package/dist/hooks/use-hover.mjs

@@ -1,19 +1,15 @@
+import { useCallback } from 'react';
 import { useBoolean } from './use-boolean.mjs';
-import { useEvent } from './use-event.mjs';
 
 const useHover = () => {
-    const { isOn: isHovered, turnOff, turnOn } = useBoolean(false);
-    const onPointerEnter = useEvent(() => {
+    const [isHovered, { turnOn, turnOff }] = useBoolean(false);
+    const onPointerEnter = useCallback(() => {
         turnOn();
-    });
-    const onPointerLeave = useEvent(() => {
+    }, []);
+    const onPointerLeave = useCallback(() => {
         turnOff();
-    });
-    return {
-        isHovered,
-        onPointerEnter,
-        onPointerLeave
-    };
+    }, []);
+    return [isHovered, { onPointerEnter, onPointerLeave }];
 };
 
 export { useHover };

package/dist/hooks/use-image-loader.d.ts

@@ -1,5 +1,5 @@
 type Status = 'none' | 'loading' | 'error' | 'loaded';
-interface Dependencies {
+interface Props {
     src: string;
 }
 /**
@@ -8,5 +8,5 @@ interface Dependencies {
  * @description
  * image loader
  */
-export declare const useImageLoader: ({ src }: Dependencies) => Status;
+export declare const useImageLoader: ({ src }: Props) => Status;
 export {};

package/dist/hooks/use-reactive.d.ts

@@ -1,4 +1,4 @@
-import { State } from '../is/is-state-getter';
+import type { State } from '../types';
 /**
  * @description
  * use reactive

package/dist/hooks/use-scroll-locker.mjs

@@ -3,25 +3,22 @@ import { useId, useLayoutEffect } from 'react';
 import { isOverflow } from '../is/is-overflow.mjs';
 import { isStyleElement } from '../is/is-style-element.mjs';
 
-var _ScrollLocker_scrollLocker, _ScrollLocker_barSize;
+var _a, _ScrollLocker_scrollLocker, _ScrollLocker_barSize;
 const isComputable = (value) => /^(.*)px$/.test(value);
 class ScrollLocker {
     constructor() {
-        var _a;
-        // singleton mode
-        _ScrollLocker_scrollLocker.set(this, null
-        // bar size
-        );
+        var _b;
+        var _c;
         // bar size
         _ScrollLocker_barSize.set(this, null);
-        return (__classPrivateFieldSet(this, _ScrollLocker_scrollLocker, (_a = __classPrivateFieldGet(this, _ScrollLocker_scrollLocker, "f")) !== null && _a !== void 0 ? _a : this, "f"));
+        return (__classPrivateFieldSet(_c = _a, _a, (_b = __classPrivateFieldGet(_c, _a, "f", _ScrollLocker_scrollLocker)) !== null && _b !== void 0 ? _b : this, "f", _ScrollLocker_scrollLocker));
     }
     get barSize() {
-        var _a;
+        var _b;
         if (__classPrivateFieldGet(this, _ScrollLocker_barSize, "f"))
             return __classPrivateFieldGet(this, _ScrollLocker_barSize, "f");
         const { width, height } = getComputedStyle(document.body, '::-webkit-scrollbar');
-        return (__classPrivateFieldSet(this, _ScrollLocker_barSize, (_a = __classPrivateFieldGet(this, _ScrollLocker_barSize, "f")) !== null && _a !== void 0 ? _a : {
+        return (__classPrivateFieldSet(this, _ScrollLocker_barSize, (_b = __classPrivateFieldGet(this, _ScrollLocker_barSize, "f")) !== null && _b !== void 0 ? _b : {
             width: isComputable(width) ? width : '0',
             height: isComputable(height) ? height : '0'
         }, "f"));
@@ -64,7 +61,9 @@ class ScrollLocker {
         this.container.removeChild(locked);
     }
 }
-_ScrollLocker_scrollLocker = new WeakMap(), _ScrollLocker_barSize = new WeakMap();
+_a = ScrollLocker, _ScrollLocker_barSize = new WeakMap();
+// singleton mode
+_ScrollLocker_scrollLocker = { value: null };
 const useScrollLocker = (isLock) => {
     const id = useId();
     useLayoutEffect(() => {

package/dist/hooks/use-timeout.d.ts

@@ -7,5 +7,5 @@ interface Options {
  * @description
  * timeout effect
  */
-export declare const useTimeout: (handler: UnderlyingSinkCloseCallback, { duration }: Options) => void;
+export declare const useTimeout: (handler: Function, { duration }: Options) => void;
 export {};

package/dist/hooks/use-timeout.mjs

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from 'react';
+import { useEffect } from 'react';
 
 /**
  * @author murukal
@@ -7,13 +7,12 @@ import { useRef, useEffect } from 'react';
  * timeout effect
  */
 const useTimeout = (handler, { duration }) => {
-    const timer = useRef(null);
     useEffect(() => {
-        timer.current = setTimeout(handler, duration);
+        const timer = setTimeout(handler, duration);
         return () => {
-            if (!timer.current)
+            if (!timer)
                 return;
-            clearTimeout(timer.current);
+            clearTimeout(timer);
         };
     }, [duration]);
 };

package/dist/index.d.ts

@@ -48,3 +48,5 @@ export { range } from './utils/range';
 export { clamp } from './utils/clamp';
 export { chain } from './utils/chain';
 export { debounce } from './utils/debounce';
+export { toArray } from './utils/to-array';
+export { toFunction } from './utils/to-function';

package/dist/index.mjs

@@ -36,3 +36,5 @@ export { range } from './utils/range.mjs';
 export { clamp } from './utils/clamp.mjs';
 export { chain } from './utils/chain.mjs';
 export { debounce } from './utils/debounce.mjs';
+export { toArray } from './utils/to-array.mjs';
+export { toFunction } from './utils/to-function.mjs';

package/dist/is/is-state-getter.d.ts

@@ -1,14 +1,6 @@
-type StateGetter<T> = () => T;
-/**
- * @description
- * state setter
- *
- * used by initial state, default state, controlled state
- */
-export type State<T> = T | StateGetter<T>;
+import type { State, StateGetter } from "../types";
 /**
  * @description
  * is state getter
  */
 export declare const isStateGetter: <T>(state: State<T>) => state is StateGetter<T>;
-export {};

package/dist/types/index.d.ts

@@ -4,3 +4,4 @@ export type { Partialable } from './partialable';
 export type { RequiredIn } from './required-in';
 export type { ThenableEffectCallback } from './thenable-effect-callback';
 export type { First } from './first';
+export type { State, StateGetter } from './state';

package/dist/types/state.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description
+ * in react, define some initial state always use a value getter
+ */
+export type StateGetter<T> = () => T;
+/**
+ * @description
+ * value or state setter
+ */
+export type State<T> = T | StateGetter<T>;

package/dist/utils/to-array.mjs

@@ -0,0 +1,12 @@
+/**
+ * @description
+ * convert any type data to a array
+ */
+const toArray = (value) => {
+    if (Array.isArray(value)) {
+        return value;
+    }
+    return [value];
+};
+
+export { toArray };

package/dist/utils/to-function.d.ts

@@ -0,0 +1 @@
+export declare const toFunction: <T extends Function>(value: unknown) => T;

package/dist/utils/to-function.mjs

@@ -0,0 +1,11 @@
+import { isFunction } from '../is/is-function.mjs';
+
+const toFunction = (value) => {
+    const _isFunction = isFunction(value);
+    if (_isFunction) {
+        return value;
+    }
+    return (() => value);
+};
+
+export { toFunction };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiszlab/relax",
-  "version": "1.2.25",
+  "version": "1.2.26",
   "description": "react utils collection",
   "type": "module",
   "exports": {
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",
-    "@babel/preset-env": "^7.22.5",
+    "@babel/preset-env": "^7.24.0",
     "@babel/preset-typescript": "^7.22.5",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-node-resolve": "^15.1.0",