@yamada-ui/utils 0.4.0 → 0.4.1

package/README.md

@@ -24,7 +24,7 @@ $ npm install @yamada-ui/utils
 
 Wouldn't you like to contribute? That's amazing! We have prepared a [contribution guide](https://github.com/hirotomoyamada/yamada-ui/blob/main/CONTRIBUTING.md) to assist you.
 
-## Licence
+## License
 
 This package is licensed under the terms of the
 

package/dist/{chunk-RJN7NAQE.mjs → chunk-IL6ZQBL5.mjs}

@@ -170,6 +170,7 @@ var useAsyncRetry = (func, deps = []) => {
   }, [...deps, stateLoading]);
   return { ...state, retry };
 };
+var createId = (prefix) => `${prefix}-${(/* @__PURE__ */ new Date()).getTime()}`;
 
 // src/color.ts
 import {
@@ -180,7 +181,6 @@ import {
   darken,
   lighten
 } from "color2k";
-var coef = 0.75;
 var hues = [
   50,
   100,
@@ -195,6 +195,7 @@ var hues = [
   950
 ];
 var isGray = (colorScheme) => colorScheme === "gray" || colorScheme === "neutral";
+var isAccessible = (colorScheme) => colorScheme === "yellow" || colorScheme === "cyan" || colorScheme === "lime";
 var getColor = (color, fallback) => (theme = {}, colorMode) => {
   var _a, _b, _c;
   const [token, hue] = color.split(".");
@@ -224,7 +225,7 @@ var darkenColor = (color, amount) => (theme, colorMode) => {
 };
 var tintColor = (color, amount) => (theme, colorMode) => {
   const raw = getColor(color, color)(theme, colorMode);
-  return toHex(mix(raw, "#fff", amount));
+  return toHex(mix(raw, "#fff", amount / 100));
 };
 var shadeColor = (color, amount) => (theme, colorMode) => {
   const raw = getColor(color, color)(theme, colorMode);
@@ -234,18 +235,20 @@ var transparentizeColor = (color, alpha) => (theme, colorMode) => {
   const raw = getColor(color, color)(theme, colorMode);
   return transparentize(raw, 1 - alpha);
 };
-var toneColor = (color, hue) => (theme, colorMode) => {
+var toneColor = (color, hue, lCoef = 0.94, dCoef = 0.86) => (theme, colorMode) => {
   if (hue < 50 || 950 < hue)
     return color;
   let raw = color;
   if (theme && colorMode)
     getColor(color, color)(theme, colorMode);
+  const coef = hue < 500 ? lCoef : dCoef;
   const amount = (500 - hue) * 1e-3 * coef;
   return toHex(lighten(raw, amount));
 };
-var toneColors = (color) => {
+var toneColors = (color, lCoef = 0.94, dCoef = 0.86) => {
   const colors = {};
   hues.forEach((hue) => {
+    const coef = hue < 500 ? lCoef : dCoef;
     const amount = (500 - hue) * 1e-3 * coef;
     colors[hue] = toHex(lighten(color, amount));
   });
@@ -481,8 +484,10 @@ export {
   useAsync,
   useAsyncFunc,
   useAsyncRetry,
+  createId,
   hues,
   isGray,
+  isAccessible,
   getColor,
   lightenColor,
   darkenColor,

package/dist/color.d.mts

@@ -3,14 +3,15 @@ import { Dict } from './index.types.mjs';
 type ColorMode = "light" | "dark";
 declare const hues: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
 declare const isGray: (colorScheme: string) => boolean;
+declare const isAccessible: (colorScheme: string) => boolean;
 declare const getColor: (color: string, fallback?: string) => (theme?: Dict, colorMode?: ColorMode) => string;
 declare const lightenColor: (color: string, amount: number) => (theme?: Dict, colorMode?: ColorMode) => string;
 declare const darkenColor: (color: string, amount: number) => (theme?: Dict, colorMode?: ColorMode) => string;
 declare const tintColor: (color: string, amount: number) => (theme?: Dict, colorMode?: ColorMode) => string;
 declare const shadeColor: (color: string, amount: number) => (theme?: Dict, colorMode?: ColorMode) => string;
 declare const transparentizeColor: (color: string, alpha: number) => (theme?: Dict, colorMode?: ColorMode) => string;
-declare const toneColor: (color: string, hue: (typeof hues)[number]) => (theme?: Dict, colorMode?: ColorMode) => string;
-declare const toneColors: (color: string) => Record<string, string>;
+declare const toneColor: (color: string, hue: (typeof hues)[number], lCoef?: number, dCoef?: number) => (theme?: Dict, colorMode?: ColorMode) => string;
+declare const toneColors: (color: string, lCoef?: number, dCoef?: number) => Record<string, string>;
 declare const randomColor: ({ string, colors, }?: {
     string?: string | undefined;
     colors?: string[] | undefined;
@@ -19,4 +20,4 @@ declare const isTone: (color: string) => (theme?: Dict, colorMode?: ColorMode) =
 declare const isLight: (color: string) => (theme?: Dict, colorMode?: ColorMode) => boolean;
 declare const isDark: (color: string) => (theme?: Dict, colorMode?: ColorMode) => boolean;
 
-export { darkenColor, getColor, hues, isDark, isGray, isLight, isTone, lightenColor, randomColor, shadeColor, tintColor, toneColor, toneColors, transparentizeColor };
+export { darkenColor, getColor, hues, isAccessible, isDark, isGray, isLight, isTone, lightenColor, randomColor, shadeColor, tintColor, toneColor, toneColors, transparentizeColor };

package/dist/color.d.ts

@@ -3,14 +3,15 @@ import { Dict } from './index.types.js';
 type ColorMode = "light" | "dark";
 declare const hues: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
 declare const isGray: (colorScheme: string) => boolean;
+declare const isAccessible: (colorScheme: string) => boolean;
 declare const getColor: (color: string, fallback?: string) => (theme?: Dict, colorMode?: ColorMode) => string;
 declare const lightenColor: (color: string, amount: number) => (theme?: Dict, colorMode?: ColorMode) => string;
 declare const darkenColor: (color: string, amount: number) => (theme?: Dict, colorMode?: ColorMode) => string;
 declare const tintColor: (color: string, amount: number) => (theme?: Dict, colorMode?: ColorMode) => string;
 declare const shadeColor: (color: string, amount: number) => (theme?: Dict, colorMode?: ColorMode) => string;
 declare const transparentizeColor: (color: string, alpha: number) => (theme?: Dict, colorMode?: ColorMode) => string;
-declare const toneColor: (color: string, hue: (typeof hues)[number]) => (theme?: Dict, colorMode?: ColorMode) => string;
-declare const toneColors: (color: string) => Record<string, string>;
+declare const toneColor: (color: string, hue: (typeof hues)[number], lCoef?: number, dCoef?: number) => (theme?: Dict, colorMode?: ColorMode) => string;
+declare const toneColors: (color: string, lCoef?: number, dCoef?: number) => Record<string, string>;
 declare const randomColor: ({ string, colors, }?: {
     string?: string | undefined;
     colors?: string[] | undefined;
@@ -19,4 +20,4 @@ declare const isTone: (color: string) => (theme?: Dict, colorMode?: ColorMode) =
 declare const isLight: (color: string) => (theme?: Dict, colorMode?: ColorMode) => boolean;
 declare const isDark: (color: string) => (theme?: Dict, colorMode?: ColorMode) => boolean;
 
-export { darkenColor, getColor, hues, isDark, isGray, isLight, isTone, lightenColor, randomColor, shadeColor, tintColor, toneColor, toneColors, transparentizeColor };
+export { darkenColor, getColor, hues, isAccessible, isDark, isGray, isLight, isTone, lightenColor, randomColor, shadeColor, tintColor, toneColor, toneColors, transparentizeColor };

package/dist/color.js

@@ -23,6 +23,7 @@ __export(color_exports, {
   darkenColor: () => darkenColor,
   getColor: () => getColor,
   hues: () => hues,
+  isAccessible: () => isAccessible,
   isDark: () => isDark,
   isGray: () => isGray,
   isLight: () => isLight,
@@ -70,7 +71,6 @@ var memoizeObject = (func) => {
 var getMemoizedObject = memoizeObject(getObject);
 
 // src/color.ts
-var coef = 0.75;
 var hues = [
   50,
   100,
@@ -85,6 +85,7 @@ var hues = [
   950
 ];
 var isGray = (colorScheme) => colorScheme === "gray" || colorScheme === "neutral";
+var isAccessible = (colorScheme) => colorScheme === "yellow" || colorScheme === "cyan" || colorScheme === "lime";
 var getColor = (color, fallback) => (theme = {}, colorMode) => {
   var _a, _b, _c;
   const [token, hue] = color.split(".");
@@ -114,7 +115,7 @@ var darkenColor = (color, amount) => (theme, colorMode) => {
 };
 var tintColor = (color, amount) => (theme, colorMode) => {
   const raw = getColor(color, color)(theme, colorMode);
-  return (0, import_color2k.toHex)((0, import_color2k.mix)(raw, "#fff", amount));
+  return (0, import_color2k.toHex)((0, import_color2k.mix)(raw, "#fff", amount / 100));
 };
 var shadeColor = (color, amount) => (theme, colorMode) => {
   const raw = getColor(color, color)(theme, colorMode);
@@ -124,18 +125,20 @@ var transparentizeColor = (color, alpha) => (theme, colorMode) => {
   const raw = getColor(color, color)(theme, colorMode);
   return (0, import_color2k.transparentize)(raw, 1 - alpha);
 };
-var toneColor = (color, hue) => (theme, colorMode) => {
+var toneColor = (color, hue, lCoef = 0.94, dCoef = 0.86) => (theme, colorMode) => {
   if (hue < 50 || 950 < hue)
     return color;
   let raw = color;
   if (theme && colorMode)
     getColor(color, color)(theme, colorMode);
+  const coef = hue < 500 ? lCoef : dCoef;
   const amount = (500 - hue) * 1e-3 * coef;
   return (0, import_color2k.toHex)((0, import_color2k.lighten)(raw, amount));
 };
-var toneColors = (color) => {
+var toneColors = (color, lCoef = 0.94, dCoef = 0.86) => {
   const colors = {};
   hues.forEach((hue) => {
+    const coef = hue < 500 ? lCoef : dCoef;
     const amount = (500 - hue) * 1e-3 * coef;
     colors[hue] = (0, import_color2k.toHex)((0, import_color2k.lighten)(color, amount));
   });
@@ -199,6 +202,7 @@ var isDark = (color) => (theme, colorMode) => isTone(color)(theme, colorMode) ==
   darkenColor,
   getColor,
   hues,
+  isAccessible,
   isDark,
   isGray,
   isLight,

package/dist/color.mjs

@@ -2,6 +2,7 @@ import {
   darkenColor,
   getColor,
   hues,
+  isAccessible,
   isDark,
   isGray,
   isLight,
@@ -13,7 +14,7 @@ import {
   toneColor,
   toneColors,
   transparentizeColor
-} from "./chunk-RJN7NAQE.mjs";
+} from "./chunk-IL6ZQBL5.mjs";
 import "./chunk-SLJ4M7XC.mjs";
 import "./chunk-VYMGBE25.mjs";
 import "./chunk-BZAW2D6U.mjs";
@@ -26,6 +27,7 @@ export {
   darkenColor,
   getColor,
   hues,
+  isAccessible,
   isDark,
   isGray,
   isLight,

package/dist/function.mjs

@@ -3,7 +3,7 @@ import {
   handlerAll,
   noop,
   runIfFunc
-} from "./chunk-RJN7NAQE.mjs";
+} from "./chunk-IL6ZQBL5.mjs";
 import "./chunk-SLJ4M7XC.mjs";
 import "./chunk-VYMGBE25.mjs";
 import "./chunk-BZAW2D6U.mjs";

package/dist/index.d.mts

@@ -2,11 +2,11 @@ export { Dict, Length, Merge, Path, Primitive, StringLiteral, Union } from './in
 export { cast, isArray, isEmpty, isFunction, isNotNumber, isNull, isNumber, isNumeric, isObject, isString, isUndefined, isUnit } from './assertion.mjs';
 export { assignAfter, filterObject, filterUndefined, flattenObject, getMemoizedObject, getObject, keysFormObject, memoizeObject, merge, objectFromEntries, omitObject, pickObject, replaceObject, splitObject } from './object.mjs';
 export { funcAll, handlerAll, noop, runIfFunc } from './function.mjs';
-export { AsyncFnReturn, AsyncState, AsyncStateRetry, DOMAttributes, FunctionReturningPromise, MaybeRenderProp, PromiseType, PropGetter, RequiredPropGetter, assignRef, createContext, cx, findChildren, getValidChildren, includesChildren, isRefObject, isValidElement, mergeRefs, omitChildren, pickChildren, useAsync, useAsyncFunc, useAsyncRetry, useCallbackRef, useIsMounted, useMergeRefs, useSafeLayoutEffect, useUnmountEffect, useUpdateEffect } from './react.mjs';
+export { AsyncFnReturn, AsyncState, AsyncStateRetry, DOMAttributes, FunctionReturningPromise, MaybeRenderProp, PromiseType, PropGetter, RequiredPropGetter, assignRef, createContext, createId, cx, findChildren, getValidChildren, includesChildren, isRefObject, isValidElement, mergeRefs, omitChildren, pickChildren, useAsync, useAsyncFunc, useAsyncRetry, useCallbackRef, useIsMounted, useMergeRefs, useSafeLayoutEffect, useUnmountEffect, useUpdateEffect } from './react.mjs';
 export { FocusableElement, ariaAttr, createdDom, dataAttr, getActiveElement, getAllFocusable, getEventRelatedTarget, getOwnerDocument, getOwnerWindow, getPlatform, hasNegativeTabIndex, hasTabIndex, isActiveElement, isApple, isContains, isContentEditable, isDisabled, isElement, isFocusable, isHTMLElement, isHidden, isMac, isSafari, isTabbable, platform, vendor } from './dom.mjs';
 export { escape } from './string.mjs';
 export { Operand, calc } from './calc.mjs';
-export { darkenColor, getColor, hues, isDark, isGray, isLight, isTone, lightenColor, randomColor, shadeColor, tintColor, toneColor, toneColors, transparentizeColor } from './color.mjs';
+export { darkenColor, getColor, hues, isAccessible, isDark, isGray, isLight, isTone, lightenColor, randomColor, shadeColor, tintColor, toneColor, toneColors, transparentizeColor } from './color.mjs';
 export { filterEmpty } from './array.mjs';
 export { clampNumber, countDecimal, percentToValue, roundNumberToStep, toPrecision, valueToPercent } from './number.mjs';
 export { AnyPointerEvent, MixedEventListener, Point, PointType, PointerEventInfo, addDomEvent, addPointerEvent, getEventPoint, getEventWindow, isMouseEvent, isMultiTouchEvent, isTouchEvent, pointFromMouse, pointFromTouch } from './event.mjs';

package/dist/index.d.ts

@@ -2,11 +2,11 @@ export { Dict, Length, Merge, Path, Primitive, StringLiteral, Union } from './in
 export { cast, isArray, isEmpty, isFunction, isNotNumber, isNull, isNumber, isNumeric, isObject, isString, isUndefined, isUnit } from './assertion.js';
 export { assignAfter, filterObject, filterUndefined, flattenObject, getMemoizedObject, getObject, keysFormObject, memoizeObject, merge, objectFromEntries, omitObject, pickObject, replaceObject, splitObject } from './object.js';
 export { funcAll, handlerAll, noop, runIfFunc } from './function.js';
-export { AsyncFnReturn, AsyncState, AsyncStateRetry, DOMAttributes, FunctionReturningPromise, MaybeRenderProp, PromiseType, PropGetter, RequiredPropGetter, assignRef, createContext, cx, findChildren, getValidChildren, includesChildren, isRefObject, isValidElement, mergeRefs, omitChildren, pickChildren, useAsync, useAsyncFunc, useAsyncRetry, useCallbackRef, useIsMounted, useMergeRefs, useSafeLayoutEffect, useUnmountEffect, useUpdateEffect } from './react.js';
+export { AsyncFnReturn, AsyncState, AsyncStateRetry, DOMAttributes, FunctionReturningPromise, MaybeRenderProp, PromiseType, PropGetter, RequiredPropGetter, assignRef, createContext, createId, cx, findChildren, getValidChildren, includesChildren, isRefObject, isValidElement, mergeRefs, omitChildren, pickChildren, useAsync, useAsyncFunc, useAsyncRetry, useCallbackRef, useIsMounted, useMergeRefs, useSafeLayoutEffect, useUnmountEffect, useUpdateEffect } from './react.js';
 export { FocusableElement, ariaAttr, createdDom, dataAttr, getActiveElement, getAllFocusable, getEventRelatedTarget, getOwnerDocument, getOwnerWindow, getPlatform, hasNegativeTabIndex, hasTabIndex, isActiveElement, isApple, isContains, isContentEditable, isDisabled, isElement, isFocusable, isHTMLElement, isHidden, isMac, isSafari, isTabbable, platform, vendor } from './dom.js';
 export { escape } from './string.js';
 export { Operand, calc } from './calc.js';
-export { darkenColor, getColor, hues, isDark, isGray, isLight, isTone, lightenColor, randomColor, shadeColor, tintColor, toneColor, toneColors, transparentizeColor } from './color.js';
+export { darkenColor, getColor, hues, isAccessible, isDark, isGray, isLight, isTone, lightenColor, randomColor, shadeColor, tintColor, toneColor, toneColors, transparentizeColor } from './color.js';
 export { filterEmpty } from './array.js';
 export { clampNumber, countDecimal, percentToValue, roundNumberToStep, toPrecision, valueToPercent } from './number.js';
 export { AnyPointerEvent, MixedEventListener, Point, PointType, PointerEventInfo, addDomEvent, addPointerEvent, getEventPoint, getEventWindow, isMouseEvent, isMultiTouchEvent, isTouchEvent, pointFromMouse, pointFromTouch } from './event.js';

package/dist/index.js

@@ -40,6 +40,7 @@ __export(src_exports, {
   clampNumber: () => clampNumber,
   countDecimal: () => countDecimal,
   createContext: () => createContext2,
+  createId: () => createId,
   createdDom: () => createdDom,
   cx: () => cx,
   darkenColor: () => darkenColor,
@@ -68,6 +69,7 @@ __export(src_exports, {
   hasTabIndex: () => hasTabIndex,
   hues: () => hues,
   includesChildren: () => includesChildren,
+  isAccessible: () => isAccessible,
   isActiveElement: () => isActiveElement,
   isApple: () => isApple,
   isArray: () => isArray,
@@ -455,6 +457,7 @@ var useAsyncRetry = (func, deps = []) => {
   }, [...deps, stateLoading]);
   return { ...state, retry };
 };
+var createId = (prefix) => `${prefix}-${(/* @__PURE__ */ new Date()).getTime()}`;
 
 // src/dom.ts
 var createdDom = () => !!(typeof window !== "undefined" && window.document && window.document.createElement);
@@ -584,7 +587,6 @@ var calc = Object.assign(
 
 // src/color.ts
 var import_color2k = require("color2k");
-var coef = 0.75;
 var hues = [
   50,
   100,
@@ -599,6 +601,7 @@ var hues = [
   950
 ];
 var isGray = (colorScheme) => colorScheme === "gray" || colorScheme === "neutral";
+var isAccessible = (colorScheme) => colorScheme === "yellow" || colorScheme === "cyan" || colorScheme === "lime";
 var getColor = (color, fallback) => (theme = {}, colorMode) => {
   var _a, _b, _c;
   const [token, hue] = color.split(".");
@@ -628,7 +631,7 @@ var darkenColor = (color, amount) => (theme, colorMode) => {
 };
 var tintColor = (color, amount) => (theme, colorMode) => {
   const raw = getColor(color, color)(theme, colorMode);
-  return (0, import_color2k.toHex)((0, import_color2k.mix)(raw, "#fff", amount));
+  return (0, import_color2k.toHex)((0, import_color2k.mix)(raw, "#fff", amount / 100));
 };
 var shadeColor = (color, amount) => (theme, colorMode) => {
   const raw = getColor(color, color)(theme, colorMode);
@@ -638,18 +641,20 @@ var transparentizeColor = (color, alpha) => (theme, colorMode) => {
   const raw = getColor(color, color)(theme, colorMode);
   return (0, import_color2k.transparentize)(raw, 1 - alpha);
 };
-var toneColor = (color, hue) => (theme, colorMode) => {
+var toneColor = (color, hue, lCoef = 0.94, dCoef = 0.86) => (theme, colorMode) => {
   if (hue < 50 || 950 < hue)
     return color;
   let raw = color;
   if (theme && colorMode)
     getColor(color, color)(theme, colorMode);
+  const coef = hue < 500 ? lCoef : dCoef;
   const amount = (500 - hue) * 1e-3 * coef;
   return (0, import_color2k.toHex)((0, import_color2k.lighten)(raw, amount));
 };
-var toneColors = (color) => {
+var toneColors = (color, lCoef = 0.94, dCoef = 0.86) => {
   const colors = {};
   hues.forEach((hue) => {
+    const coef = hue < 500 ? lCoef : dCoef;
     const amount = (500 - hue) * 1e-3 * coef;
     colors[hue] = (0, import_color2k.toHex)((0, import_color2k.lighten)(color, amount));
   });
@@ -794,6 +799,7 @@ var addPointerEvent = (target, type, cb, options) => addDomEvent(target, type, w
   clampNumber,
   countDecimal,
   createContext,
+  createId,
   createdDom,
   cx,
   darkenColor,
@@ -822,6 +828,7 @@ var addPointerEvent = (target, type, cb, options) => addDomEvent(target, type, w
   hasTabIndex,
   hues,
   includesChildren,
+  isAccessible,
   isActiveElement,
   isApple,
   isArray,

package/dist/index.mjs

@@ -2,6 +2,7 @@ import {
   assignAfter,
   assignRef,
   createContext,
+  createId,
   cx,
   darkenColor,
   filterObject,
@@ -16,6 +17,7 @@ import {
   handlerAll,
   hues,
   includesChildren,
+  isAccessible,
   isDark,
   isGray,
   isLight,
@@ -51,7 +53,7 @@ import {
   useSafeLayoutEffect,
   useUnmountEffect,
   useUpdateEffect
-} from "./chunk-RJN7NAQE.mjs";
+} from "./chunk-IL6ZQBL5.mjs";
 import "./chunk-SLJ4M7XC.mjs";
 import {
   clampNumber,
@@ -133,6 +135,7 @@ export {
   clampNumber,
   countDecimal,
   createContext,
+  createId,
   createdDom,
   cx,
   darkenColor,
@@ -161,6 +164,7 @@ export {
   hasTabIndex,
   hues,
   includesChildren,
+  isAccessible,
   isActiveElement,
   isApple,
   isArray,

package/dist/object.mjs

@@ -13,7 +13,7 @@ import {
   pickObject,
   replaceObject,
   splitObject
-} from "./chunk-RJN7NAQE.mjs";
+} from "./chunk-IL6ZQBL5.mjs";
 import "./chunk-SLJ4M7XC.mjs";
 import "./chunk-VYMGBE25.mjs";
 import "./chunk-BZAW2D6U.mjs";

package/dist/react.d.mts

@@ -87,5 +87,6 @@ declare const useAsyncRetry: <T>(func: () => Promise<T>, deps?: React.Dependency
     error?: undefined;
     value: T;
 };
+declare const createId: (prefix: string) => string;
 
-export { type AsyncFnReturn, type AsyncState, type AsyncStateRetry, type DOMAttributes, type FunctionReturningPromise, type MaybeRenderProp, type PromiseType, type PropGetter, type RequiredPropGetter, assignRef, createContext, cx, findChildren, getValidChildren, includesChildren, isRefObject, isValidElement, mergeRefs, omitChildren, pickChildren, useAsync, useAsyncFunc, useAsyncRetry, useCallbackRef, useIsMounted, useMergeRefs, useSafeLayoutEffect, useUnmountEffect, useUpdateEffect };
+export { type AsyncFnReturn, type AsyncState, type AsyncStateRetry, type DOMAttributes, type FunctionReturningPromise, type MaybeRenderProp, type PromiseType, type PropGetter, type RequiredPropGetter, assignRef, createContext, createId, cx, findChildren, getValidChildren, includesChildren, isRefObject, isValidElement, mergeRefs, omitChildren, pickChildren, useAsync, useAsyncFunc, useAsyncRetry, useCallbackRef, useIsMounted, useMergeRefs, useSafeLayoutEffect, useUnmountEffect, useUpdateEffect };

package/dist/react.d.ts

@@ -87,5 +87,6 @@ declare const useAsyncRetry: <T>(func: () => Promise<T>, deps?: React.Dependency
     error?: undefined;
     value: T;
 };
+declare const createId: (prefix: string) => string;
 
-export { type AsyncFnReturn, type AsyncState, type AsyncStateRetry, type DOMAttributes, type FunctionReturningPromise, type MaybeRenderProp, type PromiseType, type PropGetter, type RequiredPropGetter, assignRef, createContext, cx, findChildren, getValidChildren, includesChildren, isRefObject, isValidElement, mergeRefs, omitChildren, pickChildren, useAsync, useAsyncFunc, useAsyncRetry, useCallbackRef, useIsMounted, useMergeRefs, useSafeLayoutEffect, useUnmountEffect, useUpdateEffect };
+export { type AsyncFnReturn, type AsyncState, type AsyncStateRetry, type DOMAttributes, type FunctionReturningPromise, type MaybeRenderProp, type PromiseType, type PropGetter, type RequiredPropGetter, assignRef, createContext, createId, cx, findChildren, getValidChildren, includesChildren, isRefObject, isValidElement, mergeRefs, omitChildren, pickChildren, useAsync, useAsyncFunc, useAsyncRetry, useCallbackRef, useIsMounted, useMergeRefs, useSafeLayoutEffect, useUnmountEffect, useUpdateEffect };

package/dist/react.js

@@ -32,6 +32,7 @@ var react_exports = {};
 __export(react_exports, {
   assignRef: () => assignRef,
   createContext: () => createContext2,
+  createId: () => createId,
   cx: () => cx,
   findChildren: () => findChildren,
   getValidChildren: () => getValidChildren,
@@ -209,10 +210,12 @@ var useAsyncRetry = (func, deps = []) => {
   }, [...deps, stateLoading]);
   return { ...state, retry };
 };
+var createId = (prefix) => `${prefix}-${(/* @__PURE__ */ new Date()).getTime()}`;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   assignRef,
   createContext,
+  createId,
   cx,
   findChildren,
   getValidChildren,

package/dist/react.mjs

@@ -1,6 +1,7 @@
 import {
   assignRef,
   createContext,
+  createId,
   cx,
   findChildren,
   getValidChildren,
@@ -19,7 +20,7 @@ import {
   useSafeLayoutEffect,
   useUnmountEffect,
   useUpdateEffect
-} from "./chunk-RJN7NAQE.mjs";
+} from "./chunk-IL6ZQBL5.mjs";
 import "./chunk-SLJ4M7XC.mjs";
 import "./chunk-VYMGBE25.mjs";
 import "./chunk-BZAW2D6U.mjs";
@@ -31,6 +32,7 @@ import "./chunk-G7Q2EDJF.mjs";
 export {
   assignRef,
   createContext,
+  createId,
   cx,
   findChildren,
   getValidChildren,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/utils",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Yamada UI utils",
   "keywords": [
     "utils",