@helpdice/theme 1.0.0

package/esm/use-media-query/use-media-query.js

@@ -0,0 +1,81 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/* "use client" */
+
+import { useEffect, useMemo, useState } from 'react';
+import useTheme from '../use-theme';
+import { tuple } from '../utils/prop-types';
+var breakpoints = tuple('xs', 'sm', 'md', 'lg', 'xl', 'mobile');
+var matchType = tuple('up', 'down', 'default');
+var defaultResponsiveOptions = {
+  match: 'default'
+};
+var makeQueries = function makeQueries(bp, up, down) {
+  var queryString = function queryString(item) {
+    var upQuery = "(min-width: ".concat(item.min, ")");
+    var downQuery = "(max-width: ".concat(item.max, ")");
+    return up ? upQuery : down ? downQuery : "".concat(upQuery, " and ").concat(downQuery);
+  };
+  var xs = queryString(bp.xs);
+  return {
+    xs: xs,
+    mobile: xs,
+    sm: queryString(bp.sm),
+    md: queryString(bp.md),
+    lg: queryString(bp.lg),
+    xl: queryString(bp.xl)
+  };
+};
+var useMediaQuery = function useMediaQuery(breakpoint) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultResponsiveOptions;
+  var _options$match = options.match,
+    matchType = _options$match === void 0 ? 'default' : _options$match,
+    _options$ssrMatchMedi = options.ssrMatchMedia,
+    ssrMatchMedia = _options$ssrMatchMedi === void 0 ? null : _options$ssrMatchMedi;
+  var supportMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
+  var theme = useTheme();
+  var mediaQueries = useMemo(function () {
+    var up = matchType === 'up';
+    var down = matchType === 'down';
+    return makeQueries(theme.breakpoints, up, down);
+  }, [theme.breakpoints, options]);
+  var query = useMemo(function () {
+    return mediaQueries[breakpoint];
+  }, [mediaQueries, breakpoint]);
+  var matchQuery = function matchQuery(q) {
+    return window.matchMedia(q);
+  };
+
+  /**
+   * Do nothing in the server-side rendering.
+   * If server match query fucntion is simulated, return user-defined value first.
+   */
+  var _useState = useState(function () {
+      if (supportMedia) return matchQuery(query).matches;
+      if (ssrMatchMedia && typeof ssrMatchMedia === 'function') {
+        return ssrMatchMedia(query).matches;
+      }
+      return false;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  useEffect(function () {
+    if (!supportMedia) return;
+    var queryList = matchQuery(query);
+    var update = function update() {
+      return setState(matchQuery(query).matches);
+    };
+    update();
+
+    /**
+     * addListener is deprecated. EventTarget.addEventListener is recommended.
+     * But in some old browsers, MediaQueryList does not inherit from EventTarget.
+     */
+    queryList.addListener(update);
+    return function () {
+      queryList.removeListener(update);
+    };
+  }, [supportMedia]);
+  return state;
+};
+export default useMediaQuery;

package/esm/use-theme/index.d.ts

@@ -0,0 +1,2 @@
+import { useTheme } from './theme-context';
+export default useTheme;

package/esm/use-theme/index.js

@@ -0,0 +1,2 @@
+import { useTheme } from './theme-context';
+export default useTheme;

package/esm/use-theme/theme-context.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { HUIThemes } from '../themes/presets';
+export declare const ThemeContext: React.Context<HUIThemes>;
+export declare const useTheme: () => HUIThemes;

package/esm/use-theme/theme-context.js

@@ -0,0 +1,9 @@
+/* "use client" */
+
+import React from 'react';
+import Themes from '../themes';
+var defaultTheme = Themes.getPresetStaticTheme();
+export var ThemeContext = /*#__PURE__*/React.createContext(defaultTheme);
+export var useTheme = function useTheme() {
+  return React.useContext(ThemeContext);
+};

package/esm/use-toasts/helpers.d.ts

@@ -0,0 +1,18 @@
+import { Toast } from './use-toast';
+import React from 'react';
+import { HUIThemesPalette } from '../themes';
+import { NormalTypes } from '../utils/prop-types';
+export declare const makeToastActions: (actions: Toast["actions"], cancelHandle: () => void) => React.JSX.Element[] | null;
+export declare const getColors: (palette: HUIThemesPalette, type?: NormalTypes) => {
+    bgColor: string;
+    color: string;
+};
+declare const toastPlacement: ["topLeft", "topRight", "bottomLeft", "bottomRight"];
+export type ToastPlacement = typeof toastPlacement[number];
+export declare const isTopPlacement: (placement: ToastPlacement) => boolean;
+export declare const isLeftPlacement: (placement: ToastPlacement) => boolean;
+export declare const getTranslateByPlacement: (placement: ToastPlacement) => {
+    enter: string;
+    leave: string;
+};
+export {};

package/esm/use-toasts/helpers.js

@@ -0,0 +1,66 @@
+import React from 'react';
+// import Button from '../button'
+
+import { tuple } from '../utils/prop-types';
+export var makeToastActions = function makeToastActions(actions, cancelHandle) {
+  var handler = function handler(event, userHandler) {
+    userHandler && userHandler(event, cancelHandle);
+  };
+  if (!actions || !actions.length) return null;
+  return actions.map(function (action, index) {
+    return /*#__PURE__*/React.createElement("button", {
+      color: action.passive ? 'default' : 'secondary',
+      key: "action-".concat(index),
+      onClick: function onClick(event) {
+        return handler(event, action.handler);
+      }
+    }, action.name);
+  });
+};
+export var getColors = function getColors(palette, type) {
+  var colors = {
+    "default": palette.background,
+    secondary: palette.secondary,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error
+  };
+  var isDefault = !type || type === 'default';
+  if (isDefault) return {
+    bgColor: colors["default"],
+    color: palette.foreground
+  };
+  /**
+   * Prevent main color change in special types.
+   * The color will only follow the theme when it is in the default type.
+   */
+  return {
+    bgColor: colors[type],
+    color: 'white'
+  };
+};
+var toastPlacement = tuple('topLeft', 'topRight', 'bottomLeft', 'bottomRight');
+export var isTopPlacement = function isTopPlacement(placement) {
+  return "".concat(placement).toLowerCase().startsWith('top');
+};
+export var isLeftPlacement = function isLeftPlacement(placement) {
+  return "".concat(placement).toLowerCase().endsWith('left');
+};
+export var getTranslateByPlacement = function getTranslateByPlacement(placement) {
+  var translateInByPlacement = {
+    topLeft: 'translate(-60px, -60px)',
+    topRight: 'translate(60px, -60px)',
+    bottomLeft: 'translate(-60px, 60px)',
+    bottomRight: 'translate(60px, 60px)'
+  };
+  var translateOutByPlacement = {
+    topLeft: 'translate(-50px, 15px) scale(0.85)',
+    topRight: 'translate(50px, 15px) scale(0.85)',
+    bottomLeft: 'translate(-50px, -15px) scale(0.85)',
+    bottomRight: 'translate(50px, -15px) scale(0.85)'
+  };
+  return {
+    enter: translateInByPlacement[placement],
+    leave: translateOutByPlacement[placement]
+  };
+};

package/esm/use-toasts/index.js

@@ -0,0 +1,2 @@
+import useToasts from './use-toast';
+export default useToasts;

package/esm/use-toasts/toast-container.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ToastContainer: React.FC<React.PropsWithChildren<unknown>>;
+export default ToastContainer;

package/esm/use-toasts/toast-container.js

@@ -0,0 +1,120 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _JSXStyle from "../styled-jsx.es.js";
+/* "use client" */
+
+import React, { useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import usePortal from '../utils/use-portal';
+import useTheme from '../use-theme';
+import { useHUIContext } from '../utils/use-hd-ui-context';
+import ToastItem from './toast-item';
+import useClasses from '../use-classes';
+import { isLeftPlacement, isTopPlacement } from './helpers';
+import useCurrentState from '../utils/use-current-state';
+var ToastContainer = function ToastContainer() {
+  var theme = useTheme();
+  var portal = usePortal('toast');
+  var _useCurrentState = useCurrentState(false),
+    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+    setHovering = _useCurrentState2[1],
+    hoveringRef = _useCurrentState2[2];
+  var _useHUIContext = useHUIContext(),
+    toasts = _useHUIContext.toasts,
+    updateToasts = _useHUIContext.updateToasts,
+    toastLayout = _useHUIContext.toastLayout,
+    lastUpdateToastId = _useHUIContext.lastUpdateToastId;
+  var memoizedLayout = useMemo(function () {
+    return toastLayout;
+  }, [toastLayout]);
+  var toastElements = useMemo(function () {
+    return toasts.map(function (toast) {
+      return /*#__PURE__*/React.createElement(ToastItem, {
+        toast: toast,
+        layout: memoizedLayout,
+        key: toast._internalIdent
+      });
+    });
+  }, [toasts, memoizedLayout]);
+  var classNames = useMemo(function () {
+    return useClasses('toasts', {
+      top: isTopPlacement(toastLayout.placement),
+      left: isLeftPlacement(toastLayout.placement)
+    });
+  }, [memoizedLayout]);
+  var hoverHandler = function hoverHandler(isHovering) {
+    setHovering(isHovering);
+    if (isHovering) {
+      return updateToasts(function (last) {
+        return last.map(function (toast) {
+          if (!toast.visible) return toast;
+          toast._timeout && window.clearTimeout(toast._timeout);
+          return _extends({}, toast, {
+            timeout: null
+          });
+        });
+      });
+    }
+    updateToasts(function (last) {
+      return last.map(function (toast, index) {
+        if (!toast.visible) return toast;
+        toast._timeout && window.clearTimeout(toast._timeout);
+        return _extends({}, toast, {
+          _timeout: function () {
+            var timer = window.setTimeout(function () {
+              toast.cancel();
+              window.clearTimeout(timer);
+            }, toast.delay + index * 100);
+            return timer;
+          }()
+        });
+      });
+    });
+  };
+  useEffect(function () {
+    var index = toasts.findIndex(function (r) {
+      return r._internalIdent === lastUpdateToastId;
+    });
+    var toast = toasts[index];
+    if (!toast || toast.visible || !hoveringRef.current) return;
+    var hasVisible = toasts.find(function (r, i) {
+      return i < index && r.visible;
+    });
+    if (hasVisible || !hoveringRef.current) return;
+    hoverHandler(false);
+  }, [toasts, lastUpdateToastId]);
+  useEffect(function () {
+    var timeout = null;
+    var timer = window.setInterval(function () {
+      if (toasts.length === 0) return;
+      timeout = window.setTimeout(function () {
+        var allInvisible = !toasts.find(function (r) {
+          return r.visible;
+        });
+        allInvisible && updateToasts(function () {
+          return [];
+        });
+        timeout && clearTimeout(timeout);
+      }, 350);
+    }, 5000);
+    return function () {
+      timer && clearInterval(timer);
+      timeout && clearTimeout(timeout);
+    };
+  }, [toasts]);
+  if (!portal) return null;
+  if (!toasts || toasts.length === 0) return null;
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", {
+    onMouseEnter: function onMouseEnter() {
+      return hoverHandler(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return hoverHandler(false);
+    },
+    className: _JSXStyle.dynamic([["622610754", [theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.layout.gap]]]) + " " + (classNames || "")
+  }, toastElements, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "622610754",
+    dynamic: [theme.layout.gap, theme.layout.gap, theme.layout.gap, theme.layout.gap]
+  }, ".toasts.__jsx-style-dynamic-selector{position:fixed;width:auto;max-width:100%;right:".concat(theme.layout.gap, ";bottom:").concat(theme.layout.gap, ";z-index:2000;-webkit-transition:all 400ms ease;transition:all 400ms ease;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.top.__jsx-style-dynamic-selector{bottom:unset;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;top:").concat(theme.layout.gap, ";}.left.__jsx-style-dynamic-selector{right:unset;left:").concat(theme.layout.gap, ";}"))), portal);
+};
+export default ToastContainer;

package/esm/use-toasts/toast-item.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { Toast, ToastLayout } from './use-toast';
+export interface ToastItemProps {
+    toast: Toast;
+    layout: Required<ToastLayout>;
+}
+declare const ToastItem: React.FC<ToastItemProps>;
+export default ToastItem;

package/esm/use-toasts/toast-item.js

@@ -0,0 +1,45 @@
+import _JSXStyle from "../styled-jsx.es.js";
+/* "use client" */
+
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import CssTransition from '../shared/css-transition';
+import { makeToastActions, getColors, getTranslateByPlacement } from './helpers';
+var ToastItem = /*#__PURE__*/React.memo(function (_ref) {
+  var toast = _ref.toast,
+    layout = _ref.layout;
+  var theme = useTheme();
+  var _useMemo = useMemo(function () {
+      return getColors(theme.palette, toast.type);
+    }, [theme.palette, toast.type]),
+    color = _useMemo.color,
+    bgColor = _useMemo.bgColor;
+  var isReactNode = typeof toast.text !== 'string';
+  var padding = layout.padding,
+    margin = layout.margin,
+    maxHeight = layout.maxHeight,
+    maxWidth = layout.maxWidth,
+    width = layout.width,
+    placement = layout.placement;
+  var _useMemo2 = useMemo(function () {
+      return getTranslateByPlacement(placement);
+    }, [placement]),
+    enter = _useMemo2.enter,
+    leave = _useMemo2.leave;
+  return /*#__PURE__*/React.createElement(CssTransition, {
+    name: "toast",
+    visible: toast.visible,
+    clearTime: 350
+  }, /*#__PURE__*/React.createElement("div", {
+    key: toast.id,
+    className: _JSXStyle.dynamic([["1407001838", [width, maxWidth, maxHeight, theme.palette.foreground, bgColor, color, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, enter, margin, padding, margin, padding, leave]]]) + " " + "toast"
+  }, isReactNode ? toast.text : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1407001838", [width, maxWidth, maxHeight, theme.palette.foreground, bgColor, color, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, enter, margin, padding, margin, padding, leave]]]) + " " + "message"
+  }, toast.text), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["1407001838", [width, maxWidth, maxHeight, theme.palette.foreground, bgColor, color, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, enter, margin, padding, margin, padding, leave]]]) + " " + "action"
+  }, makeToastActions(toast.actions, toast.cancel))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1407001838",
+    dynamic: [width, maxWidth, maxHeight, theme.palette.foreground, bgColor, color, theme.layout.radius, theme.expressiveness.shadowSmall, theme.layout.gapHalf, enter, margin, padding, margin, padding, leave]
+  }, ".toast.__jsx-style-dynamic-selector{width:".concat(width, ";max-width:").concat(maxWidth, ";max-height:").concat(maxHeight, ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:").concat(theme.palette.foreground, ";background-color:").concat(bgColor, ";color:").concat(color, ";border:0;border-radius:").concat(theme.layout.radius, ";opacity:1;box-shadow:").concat(theme.expressiveness.shadowSmall, ";-webkit-transition:all 350ms cubic-bezier(0.1,0.2,0.1,1);transition:all 350ms cubic-bezier(0.1,0.2,0.1,1);overflow:hidden;}.message.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;font-size:0.875em;display:-webkit-box;word-break:break-all;padding-right:").concat(theme.layout.gapHalf, ";overflow:hidden;max-height:100%;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.1rem;}.toast-enter.__jsx-style-dynamic-selector{opacity:0;height:0;padding:0;margin:0;-webkit-transform:").concat(enter, ";-ms-transform:").concat(enter, ";transform:").concat(enter, ";}.toast-enter-active.__jsx-style-dynamic-selector{opacity:1;height:auto;margin:").concat(margin, ";padding:").concat(padding, ";-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);}.toast-leave.__jsx-style-dynamic-selector{opacity:1;-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);height:auto;margin:").concat(margin, ";padding:").concat(padding, ";}.toast-leave-active.__jsx-style-dynamic-selector{opacity:0;-webkit-transform:").concat(leave, ";-ms-transform:").concat(leave, ";transform:").concat(leave, ";}"))));
+});
+export default ToastItem;

package/esm/use-toasts/use-toast.d.ts

@@ -0,0 +1,40 @@
+import React, { CSSProperties } from 'react';
+import type { NormalTypes } from '../utils/prop-types';
+import { ToastPlacement } from '../use-toasts/helpers';
+export interface ToastAction {
+    name: string;
+    handler: (event: React.MouseEvent<HTMLButtonElement>, cancel: () => void) => void;
+    passive?: boolean;
+}
+export type ToastTypes = NormalTypes;
+export type ToastLayout = {
+    padding?: CSSProperties['padding'];
+    margin?: CSSProperties['margin'];
+    width?: CSSProperties['width'];
+    maxWidth?: CSSProperties['maxWidth'];
+    maxHeight?: CSSProperties['maxHeight'];
+    placement?: ToastPlacement;
+};
+export interface ToastInput {
+    text: string | React.ReactNode;
+    type?: ToastTypes;
+    id?: string;
+    delay?: number;
+    actions?: Array<ToastAction>;
+}
+export type ToastInstance = {
+    visible: boolean;
+    cancel: () => void;
+    _timeout: null | number;
+    _internalIdent: string;
+};
+export type Toast = Required<ToastInput> & ToastInstance;
+export type ToastHooksResult = {
+    toasts: Array<Toast>;
+    setToast: (toast: ToastInput) => void;
+    removeAll: () => void;
+    findToastOneByID: (ident: string) => Toast | undefined;
+    removeToastOneByID: (ident: string) => void;
+};
+declare const useToasts: (layout?: ToastLayout) => ToastHooksResult;
+export default useToasts;

package/esm/use-toasts/use-toast.js

@@ -0,0 +1,103 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+/* "use client" */
+
+import { useEffect } from 'react';
+import { defaultToastLayout, useHUIContext } from '../utils/use-hd-ui-context';
+import { getId } from '../utils/collections';
+var defaultToast = {
+  delay: 2000,
+  type: 'default'
+};
+var useToasts = function useToasts(layout) {
+  var _useHUIContext = useHUIContext(),
+    updateToasts = _useHUIContext.updateToasts,
+    toasts = _useHUIContext.toasts,
+    updateToastLayout = _useHUIContext.updateToastLayout,
+    updateLastToastId = _useHUIContext.updateLastToastId;
+  useEffect(function () {
+    if (!layout) return;
+    updateToastLayout(function () {
+      return layout ? _extends({}, defaultToastLayout, layout) : defaultToastLayout;
+    });
+  }, []);
+  var _cancel = function cancel(internalId) {
+    updateToasts(function (currentToasts) {
+      return currentToasts.map(function (item) {
+        if (item._internalIdent !== internalId) return item;
+        return _extends({}, item, {
+          visible: false
+        });
+      });
+    });
+    updateLastToastId(function () {
+      return internalId;
+    });
+  };
+  var removeAll = function removeAll() {
+    updateToasts(function (last) {
+      return last.map(function (toast) {
+        return _extends({}, toast, {
+          visible: false
+        });
+      });
+    });
+  };
+  var findToastOneByID = function findToastOneByID(id) {
+    return toasts.find(function (t) {
+      return t.id === id;
+    });
+  };
+  var removeToastOneByID = function removeToastOneByID(id) {
+    updateToasts(function (last) {
+      return last.map(function (toast) {
+        if (toast.id !== id) return toast;
+        return _extends({}, toast, {
+          visible: false
+        });
+      });
+    });
+  };
+  var setToast = function setToast(toast) {
+    var internalIdent = "toast-".concat(getId());
+    var delay = toast.delay || defaultToast.delay;
+    if (toast.id) {
+      var hasIdent = toasts.find(function (t) {
+        return t.id === toast.id;
+      });
+      if (hasIdent) {
+        throw new Error('Toast: Already have the same key: "ident"');
+      }
+    }
+    updateToasts(function (last) {
+      var newToast = {
+        delay: delay,
+        text: toast.text,
+        visible: true,
+        type: toast.type || defaultToast.type,
+        id: toast.id || internalIdent,
+        actions: toast.actions || [],
+        _internalIdent: internalIdent,
+        _timeout: window.setTimeout(function () {
+          _cancel(internalIdent);
+          if (newToast._timeout) {
+            window.clearTimeout(newToast._timeout);
+            newToast._timeout = null;
+          }
+        }, delay),
+        cancel: function cancel() {
+          return _cancel(internalIdent);
+        }
+      };
+      return [].concat(_toConsumableArray(last), [newToast]);
+    });
+  };
+  return {
+    toasts: toasts,
+    setToast: setToast,
+    removeAll: removeAll,
+    findToastOneByID: findToastOneByID,
+    removeToastOneByID: removeToastOneByID
+  };
+};
+export default useToasts;

package/esm/utils/calculations.js

@@ -0,0 +1,29 @@
+/* "use client" */
+
+import { useMemo } from 'react';
+
+/**
+ * Calculate the ratio of two numbers, maximum decimal length can be specified.
+ *
+ * (0, 100) => 0
+ * (50, 100) => 50
+ * (11.22, 100) => 11.22
+ * (11.22, 100, 4) => 11.2200
+ */
+export var getProportions = function getProportions(value, max) {
+  var maxFixed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
+  var val = value / max;
+  var couldBeDecimalValue = (Number.isNaN(val) ? 0 : val) * 100;
+  if (couldBeDecimalValue > 100) return 100;
+  if (couldBeDecimalValue < 0) return 0;
+  if (!"".concat(couldBeDecimalValue).includes('.')) return couldBeDecimalValue;
+  var decimal = "".concat(couldBeDecimalValue).split('.')[1];
+  if (decimal.length < maxFixed) return couldBeDecimalValue;
+  return +couldBeDecimalValue.toFixed(maxFixed);
+};
+export var useProportions = function useProportions(value, max) {
+  var maxFixed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 2;
+  return useMemo(function () {
+    return getProportions(value, max, maxFixed);
+  }, [value, max, maxFixed]);
+};

package/esm/utils/collections.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode } from 'react';
+export declare const getId: () => string;
+export declare const capitalize: (str: string | symbol | number | undefined | null) => string;
+export declare const hasChild: (children: ReactNode | undefined, child: React.ElementType) => boolean;
+export declare const pickChild: (children: ReactNode | undefined, targetChild: React.ElementType) => [ReactNode | undefined, ReactNode | undefined];
+export declare const pickChildByProps: (children: ReactNode | undefined, key: string, value: any) => [ReactNode | undefined, ReactNode | undefined];
+export declare const pickChildrenFirst: (children: ReactNode | undefined) => ReactNode | undefined;
+export declare const setChildrenProps: (children: ReactNode | undefined, props: Record<string, unknown>, targetComponents?: Array<React.ElementType>) => ReactNode | undefined;
+export declare const setChildrenIndex: (children: ReactNode | undefined, targetComponents?: Array<React.ElementType>) => ReactNode | undefined;
+export declare const getReactNode: (node?: React.ReactNode | (() => React.ReactNode)) => React.ReactNode;
+export declare const isChildElement: (parent: Element | null | undefined, child: Element | null | undefined) => boolean;
+export declare const isUiElement: (el?: HTMLElement) => boolean;
+export declare const isBrowser: () => boolean;
+export declare const isMac: () => boolean;
+export declare const isCSSNumberValue: (value?: string | number) => boolean;