@aiszlab/relax 1.4.6 → 1.5.0

package/dist/hooks/{use-refs.cjs → use-composed-ref.cjs}

@@ -3,7 +3,7 @@
 var mountRef = require('../react/mount-ref.cjs');
 var useEvent = require('./use-event.cjs');
 
-var useRefs = function useRefs() {
+var useComposeRef = function useComposeRef() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
     refs[_key] = arguments[_key];
   }
@@ -15,4 +15,4 @@ var useRefs = function useRefs() {
   });
 };
 
-exports.useRefs = useRefs;
+exports.useComposeRef = useComposeRef;

package/dist/hooks/{use-refs.d.ts → use-composed-ref.d.ts}

@@ -1,3 +1,3 @@
 import type { Nullable, Voidable } from "@aiszlab/relax/types";
 import { type Refable } from "../react/mount-ref";
-export declare const useRefs: <T>(...refs: Voidable<Refable<Nullable<T>>>[]) => (reference: T) => void;
+export declare const useComposeRef: <T>(...refs: Voidable<Refable<Nullable<T>>>[]) => (reference: T) => void;

package/dist/hooks/{use-refs.mjs → use-composed-ref.mjs}

@@ -1,7 +1,7 @@
 import { mountRef } from '../react/mount-ref.mjs';
 import { useEvent } from './use-event.mjs';
 
-var useRefs = function useRefs() {
+var useComposeRef = function useComposeRef() {
   for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
     refs[_key] = arguments[_key];
   }
@@ -13,4 +13,4 @@ var useRefs = function useRefs() {
   });
 };
 
-export { useRefs };
+export { useComposeRef };

package/dist/hooks/use-default.cjs

@@ -10,7 +10,9 @@ var toFunction = require('../utils/to-function.cjs');
  * state always be same after first render
  */
 var useDefault = function useDefault(initialState) {
-  return react.useMemo(toFunction.toFunction(initialState), []);
+  return react.useMemo(function () {
+    return toFunction.toFunction(initialState)();
+  }, []);
 };
 
 exports.useDefault = useDefault;

package/dist/hooks/use-default.mjs

@@ -8,7 +8,9 @@ import { toFunction } from '../utils/to-function.mjs';
  * state always be same after first render
  */
 var useDefault = function useDefault(initialState) {
-  return useMemo(toFunction(initialState), []);
+  return useMemo(function () {
+    return toFunction(initialState)();
+  }, []);
 };
 
 export { useDefault };

package/dist/hooks/use-focus.cjs

@@ -1,33 +1,39 @@
 'use strict';
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var react = require('react');
 var useBoolean = require('./use-boolean.cjs');
 var chain = require('../utils/chain.cjs');
+var useEvent = require('./use-event.cjs');
+var useDefault = require('./use-default.cjs');
 
-var useFocus = function useFocus(props) {
+var useFocus = function useFocus() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _onBlur = _ref.onBlur,
+    _onFocus = _ref.onFocus,
+    onFocusChange = _ref.onFocusChange;
   var _useBoolean = useBoolean.useBoolean(false),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     isFocused = _useBoolean2[0],
     _useBoolean2$ = _useBoolean2[1],
     turnOn = _useBoolean2$.turnOn,
     turnOff = _useBoolean2$.turnOff;
-  var onFocus = react.useCallback(function (e) {
-    chain.chain(props === null || props === void 0 ? void 0 : props.onFocus, turnOn, function () {
-      var _props$onFocusChange;
-      return props === null || props === void 0 || (_props$onFocusChange = props.onFocusChange) === null || _props$onFocusChange === void 0 ? void 0 : _props$onFocusChange.call(props, true);
-    })(e);
-  }, [props === null || props === void 0 ? void 0 : props.onFocus, props === null || props === void 0 ? void 0 : props.onFocusChange]);
-  var onBlur = react.useCallback(function (e) {
-    chain.chain(props === null || props === void 0 ? void 0 : props.onBlur, turnOff, function () {
-      var _props$onFocusChange2;
-      return props === null || props === void 0 || (_props$onFocusChange2 = props.onFocusChange) === null || _props$onFocusChange2 === void 0 ? void 0 : _props$onFocusChange2.call(props, false);
-    })(e);
-  }, [props === null || props === void 0 ? void 0 : props.onBlur, props === null || props === void 0 ? void 0 : props.onFocusChange]);
-  return [isFocused, {
-    onFocus: onFocus,
-    onBlur: onBlur
-  }];
+  var onFocus = useEvent.useEvent(function (event) {
+    chain.chain(_onFocus, turnOn, function () {
+      return onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(true);
+    })(event);
+  });
+  var onBlur = useEvent.useEvent(function (event) {
+    chain.chain(_onBlur, turnOff, function () {
+      return onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(false);
+    })(event);
+  });
+  var focusProps = useDefault.useDefault(function () {
+    return {
+      onBlur: onBlur,
+      onFocus: onFocus
+    };
+  });
+  return [isFocused, focusProps];
 };
 
 exports.useFocus = useFocus;

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

@@ -3,7 +3,7 @@ import { type DOMAttributes } from "react";
  * @description
  * hooks for focus
  */
-type Props<T> = Pick<DOMAttributes<T>, "onFocus" | "onBlur"> & {
+type UsingFocus<T> = Pick<DOMAttributes<T>, "onFocus" | "onBlur"> & {
     onFocusChange?: (isFocused: boolean) => void;
 };
 /**
@@ -11,5 +11,5 @@ type Props<T> = Pick<DOMAttributes<T>, "onFocus" | "onBlur"> & {
  * dom attributes
  */
 type UsedFocus<T> = [boolean, Required<Pick<DOMAttributes<T>, "onFocus" | "onBlur">>];
-export declare const useFocus: <T extends Element = Element>(props?: Props<T>) => UsedFocus<T>;
+export declare const useFocus: <T extends Element = Element>({ onBlur: _onBlur, onFocus: _onFocus, onFocusChange, }?: UsingFocus<T>) => UsedFocus<T>;
 export {};

package/dist/hooks/use-focus.mjs

@@ -1,31 +1,37 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useCallback } from 'react';
 import { useBoolean } from './use-boolean.mjs';
 import { chain } from '../utils/chain.mjs';
+import { useEvent } from './use-event.mjs';
+import { useDefault } from './use-default.mjs';
 
-var useFocus = function useFocus(props) {
+var useFocus = function useFocus() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _onBlur = _ref.onBlur,
+    _onFocus = _ref.onFocus,
+    onFocusChange = _ref.onFocusChange;
   var _useBoolean = useBoolean(false),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     isFocused = _useBoolean2[0],
     _useBoolean2$ = _useBoolean2[1],
     turnOn = _useBoolean2$.turnOn,
     turnOff = _useBoolean2$.turnOff;
-  var onFocus = useCallback(function (e) {
-    chain(props === null || props === void 0 ? void 0 : props.onFocus, turnOn, function () {
-      var _props$onFocusChange;
-      return props === null || props === void 0 || (_props$onFocusChange = props.onFocusChange) === null || _props$onFocusChange === void 0 ? void 0 : _props$onFocusChange.call(props, true);
-    })(e);
-  }, [props === null || props === void 0 ? void 0 : props.onFocus, props === null || props === void 0 ? void 0 : props.onFocusChange]);
-  var onBlur = useCallback(function (e) {
-    chain(props === null || props === void 0 ? void 0 : props.onBlur, turnOff, function () {
-      var _props$onFocusChange2;
-      return props === null || props === void 0 || (_props$onFocusChange2 = props.onFocusChange) === null || _props$onFocusChange2 === void 0 ? void 0 : _props$onFocusChange2.call(props, false);
-    })(e);
-  }, [props === null || props === void 0 ? void 0 : props.onBlur, props === null || props === void 0 ? void 0 : props.onFocusChange]);
-  return [isFocused, {
-    onFocus: onFocus,
-    onBlur: onBlur
-  }];
+  var onFocus = useEvent(function (event) {
+    chain(_onFocus, turnOn, function () {
+      return onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(true);
+    })(event);
+  });
+  var onBlur = useEvent(function (event) {
+    chain(_onBlur, turnOff, function () {
+      return onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(false);
+    })(event);
+  });
+  var focusProps = useDefault(function () {
+    return {
+      onBlur: onBlur,
+      onFocus: onFocus
+    };
+  });
+  return [isFocused, focusProps];
 };
 
 export { useFocus };

package/dist/hooks/use-hover.cjs

@@ -4,8 +4,12 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var useBoolean = require('./use-boolean.cjs');
 var chain = require('../utils/chain.cjs');
 var useEvent = require('./use-event.cjs');
+var useDefault = require('./use-default.cjs');
 
-var useHover = function useHover(props) {
+var useHover = function useHover() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    onEnter = _ref.onEnter,
+    onLeave = _ref.onLeave;
   var _useBoolean = useBoolean.useBoolean(false),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     isHovered = _useBoolean2[0],
@@ -13,15 +17,18 @@ var useHover = function useHover(props) {
     turnOn = _useBoolean2$.turnOn,
     turnOff = _useBoolean2$.turnOff;
   var onPointerEnter = useEvent.useEvent(function (event) {
-    chain.chain(props === null || props === void 0 ? void 0 : props.onEnter, turnOn)(event);
+    chain.chain(onEnter, turnOn)(event);
   });
   var onPointerLeave = useEvent.useEvent(function (event) {
-    chain.chain(props === null || props === void 0 ? void 0 : props.onLeave, turnOff)(event);
+    chain.chain(onLeave, turnOff)(event);
   });
-  return [isHovered, {
-    onPointerEnter: onPointerEnter,
-    onPointerLeave: onPointerLeave
-  }];
+  var hoverProps = useDefault.useDefault(function () {
+    return {
+      onPointerEnter: onPointerEnter,
+      onPointerLeave: onPointerLeave
+    };
+  });
+  return [isHovered, hoverProps];
 };
 
 exports.useHover = useHover;

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

@@ -1,5 +1,5 @@
 import { type PointerEventHandler } from "react";
-type UseHoverBy<T> = {
+type UsingHover<T> = {
     onEnter?: PointerEventHandler<T>;
     onLeave?: PointerEventHandler<T>;
 };
@@ -10,5 +10,5 @@ type UsedHover<T> = [
         onPointerLeave: PointerEventHandler<T>;
     }
 ];
-export declare const useHover: <T extends Element = Element>(props?: UseHoverBy<T>) => UsedHover<T>;
+export declare const useHover: <T extends Element = Element>({ onEnter, onLeave, }?: UsingHover<T>) => UsedHover<T>;
 export {};

package/dist/hooks/use-hover.mjs

@@ -2,8 +2,12 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useBoolean } from './use-boolean.mjs';
 import { chain } from '../utils/chain.mjs';
 import { useEvent } from './use-event.mjs';
+import { useDefault } from './use-default.mjs';
 
-var useHover = function useHover(props) {
+var useHover = function useHover() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    onEnter = _ref.onEnter,
+    onLeave = _ref.onLeave;
   var _useBoolean = useBoolean(false),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     isHovered = _useBoolean2[0],
@@ -11,15 +15,18 @@ var useHover = function useHover(props) {
     turnOn = _useBoolean2$.turnOn,
     turnOff = _useBoolean2$.turnOff;
   var onPointerEnter = useEvent(function (event) {
-    chain(props === null || props === void 0 ? void 0 : props.onEnter, turnOn)(event);
+    chain(onEnter, turnOn)(event);
   });
   var onPointerLeave = useEvent(function (event) {
-    chain(props === null || props === void 0 ? void 0 : props.onLeave, turnOff)(event);
+    chain(onLeave, turnOff)(event);
   });
-  return [isHovered, {
-    onPointerEnter: onPointerEnter,
-    onPointerLeave: onPointerLeave
-  }];
+  var hoverProps = useDefault(function () {
+    return {
+      onPointerEnter: onPointerEnter,
+      onPointerLeave: onPointerLeave
+    };
+  });
+  return [isHovered, hoverProps];
 };
 
 export { useHover };

package/dist/index.cjs

@@ -12,7 +12,7 @@ var useDefault = require('./hooks/use-default.cjs');
 var useScrollLocker = require('./hooks/use-scroll-locker.cjs');
 var useForceUpdate = require('./hooks/use-force-update.cjs');
 var useScrollable = require('./hooks/use-scrollable.cjs');
-var useRefs = require('./hooks/use-refs.cjs');
+var useComposedRef = require('./hooks/use-composed-ref.cjs');
 var useTogglable = require('./hooks/use-togglable.cjs');
 var useEvent = require('./hooks/use-event.cjs');
 var useUpdateEffect = require('./hooks/use-update-effect.cjs');
@@ -73,6 +73,7 @@ var last = require('./utils/last.cjs');
 var merge = require('./utils/merge.cjs');
 var max = require('./utils/max.cjs');
 var min = require('./utils/min.cjs');
+var load = require('./utils/load.cjs');
 
 
 
@@ -88,7 +89,7 @@ exports.useDefault = useDefault.useDefault;
 exports.useScrollLocker = useScrollLocker.useScrollLocker;
 exports.useForceUpdate = useForceUpdate.useForceUpdate;
 exports.useScrollable = useScrollable.useScrollable;
-exports.useRefs = useRefs.useRefs;
+exports.useComposeRef = useComposedRef.useComposeRef;
 exports.useTogglable = useTogglable.useTogglable;
 exports.useEvent = useEvent.useEvent;
 exports.useUpdateEffect = useUpdateEffect.useUpdateEffect;
@@ -149,3 +150,4 @@ exports.last = last.last;
 exports.merge = merge.merge;
 exports.max = max.max;
 exports.min = min.min;
+exports.load = load.load;

package/dist/index.d.ts

@@ -14,7 +14,7 @@ export { useDefault } from "./hooks/use-default";
 export { useScrollLocker } from "./hooks/use-scroll-locker";
 export { useForceUpdate } from "./hooks/use-force-update";
 export { useScrollable } from "./hooks/use-scrollable";
-export { useRefs } from "./hooks/use-refs";
+export { useComposeRef } from "./hooks/use-composed-ref";
 export { useTogglable } from "./hooks/use-togglable";
 export { useEvent } from "./hooks/use-event";
 export { useUpdateEffect } from "./hooks/use-update-effect";
@@ -83,3 +83,4 @@ export { last } from "./utils/last";
 export { merge } from "./utils/merge";
 export { max } from "./utils/max";
 export { min } from "./utils/min";
+export { load } from "./utils/load";

package/dist/index.mjs

@@ -10,7 +10,7 @@ export { useDefault } from './hooks/use-default.mjs';
 export { useScrollLocker } from './hooks/use-scroll-locker.mjs';
 export { useForceUpdate } from './hooks/use-force-update.mjs';
 export { useScrollable } from './hooks/use-scrollable.mjs';
-export { useRefs } from './hooks/use-refs.mjs';
+export { useComposeRef } from './hooks/use-composed-ref.mjs';
 export { useTogglable } from './hooks/use-togglable.mjs';
 export { useEvent } from './hooks/use-event.mjs';
 export { useUpdateEffect } from './hooks/use-update-effect.mjs';
@@ -71,3 +71,4 @@ export { last } from './utils/last.mjs';
 export { merge } from './utils/merge.mjs';
 export { max } from './utils/max.mjs';
 export { min } from './utils/min.mjs';
+export { load } from './utils/load.mjs';

package/dist/is/is-boolean.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+var isBoolean = function isBoolean(value) {
+  return typeof value === "boolean";
+};
+
+exports.isBoolean = isBoolean;

package/dist/is/is-boolean.d.ts

@@ -0,0 +1 @@
+export declare const isBoolean: (value: unknown) => value is boolean;

package/dist/is/is-boolean.mjs

@@ -0,0 +1,5 @@
+var isBoolean = function isBoolean(value) {
+  return typeof value === "boolean";
+};
+
+export { isBoolean };

package/dist/react/index.cjs

@@ -2,8 +2,10 @@
 
 var mountRef = require('./mount-ref.cjs');
 var isClassComponent = require('./is-class-component.cjs');
+var using = require('./using.cjs');
 
 
 
 exports.mountRef = mountRef.mountRef;
 exports.isClassComponent = isClassComponent.isClassComponent;
+exports.using = using.using;

package/dist/react/index.d.ts

@@ -1,4 +1,6 @@
 import { mountRef, type Refable } from "./mount-ref";
 import { isClassComponent } from "./is-class-component";
+import { using } from "./using";
 export { mountRef, isClassComponent };
 export type { Refable };
+export { using };

package/dist/react/index.mjs

@@ -1,2 +1,3 @@
 export { mountRef } from './mount-ref.mjs';
 export { isClassComponent } from './is-class-component.mjs';
+export { using } from './using.mjs';

package/dist/react/using.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var react = require('react');
+var chain = require('../utils/chain.cjs');
+var toFunction = require('../utils/to-function.cjs');
+
+/**
+ * @description
+ * use closure make memoize
+ */
+var initialize = function initialize(initializer) {
+  var listeners = new Set();
+  // create a proxy object to store state
+  // when update, call listeners
+  var store = new Proxy({
+    state: null
+  }, {
+    set: function set(target, key, value) {
+      Reflect.set(target, key, value);
+      chain.chain.apply(void 0, _toConsumableArray(listeners))();
+      return Reflect.get(target, key);
+    }
+  });
+  var subscribe = function subscribe(listener) {
+    listeners.add(listener);
+    return function () {
+      return listeners["delete"](listener);
+    };
+  };
+  var setState = function setState(previous) {
+    var _store$state;
+    store.state = toFunction.toFunction(previous)((_store$state = store.state) !== null && _store$state !== void 0 ? _store$state : _initialState);
+  };
+  // initialize state
+  var _initialState = store.state = initializer(setState);
+  return {
+    subscribe: subscribe,
+    state: function state() {
+      var _store$state2;
+      return (_store$state2 = store.state) !== null && _store$state2 !== void 0 ? _store$state2 : _initialState;
+    },
+    initialState: function initialState() {
+      return _initialState;
+    }
+  };
+};
+var using = function using(initializer) {
+  var _initialize = initialize(initializer),
+    subscribe = _initialize.subscribe,
+    initialState = _initialize.initialState,
+    state = _initialize.state;
+  // return as hooks
+  return function () {
+    return react.useSyncExternalStore(subscribe, state, initialState);
+  };
+};
+
+exports.using = using;

package/dist/react/using.d.ts

@@ -0,0 +1,4 @@
+type SetState<T> = (state: T | ((previous: T) => T)) => void;
+type Initializer<T> = (setState: SetState<T>) => T;
+declare const using: <T>(initializer: Initializer<T>) => (() => T);
+export { using };

package/dist/react/using.mjs

@@ -0,0 +1,57 @@
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { useSyncExternalStore } from 'react';
+import { chain } from '../utils/chain.mjs';
+import { toFunction } from '../utils/to-function.mjs';
+
+/**
+ * @description
+ * use closure make memoize
+ */
+var initialize = function initialize(initializer) {
+  var listeners = new Set();
+  // create a proxy object to store state
+  // when update, call listeners
+  var store = new Proxy({
+    state: null
+  }, {
+    set: function set(target, key, value) {
+      Reflect.set(target, key, value);
+      chain.apply(void 0, _toConsumableArray(listeners))();
+      return Reflect.get(target, key);
+    }
+  });
+  var subscribe = function subscribe(listener) {
+    listeners.add(listener);
+    return function () {
+      return listeners["delete"](listener);
+    };
+  };
+  var setState = function setState(previous) {
+    var _store$state;
+    store.state = toFunction(previous)((_store$state = store.state) !== null && _store$state !== void 0 ? _store$state : _initialState);
+  };
+  // initialize state
+  var _initialState = store.state = initializer(setState);
+  return {
+    subscribe: subscribe,
+    state: function state() {
+      var _store$state2;
+      return (_store$state2 = store.state) !== null && _store$state2 !== void 0 ? _store$state2 : _initialState;
+    },
+    initialState: function initialState() {
+      return _initialState;
+    }
+  };
+};
+var using = function using(initializer) {
+  var _initialize = initialize(initializer),
+    subscribe = _initialize.subscribe,
+    initialState = _initialize.initialState,
+    state = _initialize.state;
+  // return as hooks
+  return function () {
+    return useSyncExternalStore(subscribe, state, initialState);
+  };
+};
+
+export { using };

package/dist/utils/clsx.cjs

@@ -2,19 +2,20 @@
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var isArray = require('../is/is-array.cjs');
+var isBoolean = require('../is/is-boolean.cjs');
 var isNumber = require('../is/is-number.cjs');
 var isString = require('../is/is-string.cjs');
 var isVoid = require('../is/is-void.cjs');
 
-var _toClassNames = function toClassNames(value) {
-  if (isVoid.isVoid(value)) return [];
-  if (isString.isString(value) || isNumber.isNumber(value)) return [value.toString()];
-  if (isArray.isArray(value)) {
-    return value.reduce(function (classNames, item) {
+var _toClassNames = function toClassNames(_classNames) {
+  if (isVoid.isVoid(_classNames) || isBoolean.isBoolean(_classNames)) return [];
+  if (isString.isString(_classNames) || isNumber.isNumber(_classNames)) return [_classNames.toString()];
+  if (isArray.isArray(_classNames)) {
+    return _classNames.reduce(function (classNames, item) {
       return classNames.concat(_toClassNames(item));
     }, []);
   }
-  return Object.entries(value).reduce(function (classNames, _ref) {
+  return Object.entries(_classNames).reduce(function (classNames, _ref) {
     var _ref2 = _slicedToArray(_ref, 2),
       className = _ref2[0],
       isValid = _ref2[1];
@@ -25,10 +26,10 @@ var _toClassNames = function toClassNames(value) {
   }, []);
 };
 var clsx = function clsx() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
+  for (var _len = arguments.length, _classNames = new Array(_len), _key = 0; _key < _len; _key++) {
+    _classNames[_key] = arguments[_key];
   }
-  return _toClassNames(args).join(" ");
+  return _toClassNames(_classNames).join(" ");
 };
 
 exports.clsx = clsx;

package/dist/utils/clsx.d.ts

@@ -1,3 +1,3 @@
-type Value = string | number | Record<string, boolean> | Value[] | null | undefined;
-export declare const clsx: (...args: Value[]) => string;
+type ClassNames = string | number | Record<string, boolean> | ClassNames[] | null | undefined | boolean;
+export declare const clsx: (..._classNames: ClassNames[]) => string;
 export {};

package/dist/utils/clsx.mjs

@@ -1,18 +1,19 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { isArray } from '../is/is-array.mjs';
+import { isBoolean } from '../is/is-boolean.mjs';
 import { isNumber } from '../is/is-number.mjs';
 import { isString } from '../is/is-string.mjs';
 import { isVoid } from '../is/is-void.mjs';
 
-var _toClassNames = function toClassNames(value) {
-  if (isVoid(value)) return [];
-  if (isString(value) || isNumber(value)) return [value.toString()];
-  if (isArray(value)) {
-    return value.reduce(function (classNames, item) {
+var _toClassNames = function toClassNames(_classNames) {
+  if (isVoid(_classNames) || isBoolean(_classNames)) return [];
+  if (isString(_classNames) || isNumber(_classNames)) return [_classNames.toString()];
+  if (isArray(_classNames)) {
+    return _classNames.reduce(function (classNames, item) {
       return classNames.concat(_toClassNames(item));
     }, []);
   }
-  return Object.entries(value).reduce(function (classNames, _ref) {
+  return Object.entries(_classNames).reduce(function (classNames, _ref) {
     var _ref2 = _slicedToArray(_ref, 2),
       className = _ref2[0],
       isValid = _ref2[1];
@@ -23,10 +24,10 @@ var _toClassNames = function toClassNames(value) {
   }, []);
 };
 var clsx = function clsx() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
+  for (var _len = arguments.length, _classNames = new Array(_len), _key = 0; _key < _len; _key++) {
+    _classNames[_key] = arguments[_key];
   }
-  return _toClassNames(args).join(" ");
+  return _toClassNames(_classNames).join(" ");
 };
 
 export { clsx };

package/dist/utils/load.cjs

@@ -0,0 +1,55 @@
+'use strict';
+
+var isDomUsable = require('../is/is-dom-usable.cjs');
+
+var loadScript = function loadScript(url) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$defer = _ref.defer,
+    defer = _ref$defer === void 0 ? false : _ref$defer;
+  var _Promise$withResolver = Promise.withResolvers(),
+    promise = _Promise$withResolver.promise,
+    reject = _Promise$withResolver.reject,
+    resolve = _Promise$withResolver.resolve;
+  var script = document.createElement("script");
+  script.src = url;
+  script.async = true;
+  script.crossOrigin = "anonymous";
+  script.defer = defer;
+  script.addEventListener("load", function () {
+    resolve();
+  });
+  script.addEventListener("error", function () {
+    reject();
+  });
+  document.head.appendChild(script);
+  return promise;
+};
+var loadLink = function loadLink(url) {
+  var _Promise$withResolver2 = Promise.withResolvers(),
+    promise = _Promise$withResolver2.promise,
+    reject = _Promise$withResolver2.reject,
+    resolve = _Promise$withResolver2.resolve;
+  var link = document.createElement("link");
+  link.href = url;
+  link.addEventListener("load", function () {
+    resolve();
+  });
+  link.addEventListener("error", function () {
+    reject();
+  });
+  document.head.appendChild(link);
+  return promise;
+};
+function load(type, url, loading) {
+  if (!isDomUsable.isDomUsable()) return null;
+  switch (type) {
+    case "script":
+      return loadScript(url, loading);
+    case "link":
+      return loadLink(url);
+    default:
+      return Promise.resolve();
+  }
+}
+
+exports.load = load;

package/dist/utils/load.d.ts

@@ -0,0 +1,10 @@
+type ScriptLoading = {
+    defer?: boolean;
+};
+/**
+ * @description
+ * load remote resource
+ */
+declare function load(type: "script", url: string, loading?: ScriptLoading): Promise<void>;
+declare function load(type: "link", url: string): Promise<void>;
+export { load };

package/dist/utils/load.mjs

@@ -0,0 +1,53 @@
+import { isDomUsable } from '../is/is-dom-usable.mjs';
+
+var loadScript = function loadScript(url) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$defer = _ref.defer,
+    defer = _ref$defer === void 0 ? false : _ref$defer;
+  var _Promise$withResolver = Promise.withResolvers(),
+    promise = _Promise$withResolver.promise,
+    reject = _Promise$withResolver.reject,
+    resolve = _Promise$withResolver.resolve;
+  var script = document.createElement("script");
+  script.src = url;
+  script.async = true;
+  script.crossOrigin = "anonymous";
+  script.defer = defer;
+  script.addEventListener("load", function () {
+    resolve();
+  });
+  script.addEventListener("error", function () {
+    reject();
+  });
+  document.head.appendChild(script);
+  return promise;
+};
+var loadLink = function loadLink(url) {
+  var _Promise$withResolver2 = Promise.withResolvers(),
+    promise = _Promise$withResolver2.promise,
+    reject = _Promise$withResolver2.reject,
+    resolve = _Promise$withResolver2.resolve;
+  var link = document.createElement("link");
+  link.href = url;
+  link.addEventListener("load", function () {
+    resolve();
+  });
+  link.addEventListener("error", function () {
+    reject();
+  });
+  document.head.appendChild(link);
+  return promise;
+};
+function load(type, url, loading) {
+  if (!isDomUsable()) return null;
+  switch (type) {
+    case "script":
+      return loadScript(url, loading);
+    case "link":
+      return loadLink(url);
+    default:
+      return Promise.resolve();
+  }
+}
+
+export { load };

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

@@ -1,4 +1,4 @@
-import type { AnyFunction } from "../types";
-type Functionable<T> = T extends AnyFunction ? T : T extends Function ? T : () => T;
-export declare const toFunction: <T>(value: unknown) => Functionable<T>;
+import type { AnyFunction, State } from "../types";
+type Functioned<T> = T extends State<infer R> ? () => R : T extends AnyFunction ? T : T extends Function ? T : () => T;
+export declare const toFunction: <T = unknown>(value: T) => Functioned<T>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiszlab/relax",
-  "version": "1.4.6",
+  "version": "1.5.0",
   "description": "react utils collection",
   "exports": {
     ".": {