@yamada-ui/utils 0.3.3 → 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/calc.d.mts

@@ -14,4 +14,4 @@ declare const calc: ((x: Operand) => Calc) & {
     negate: (value: Operand) => string;
 };
 
-export { Operand, calc };
+export { type Operand, calc };

package/dist/calc.d.ts

@@ -14,4 +14,4 @@ declare const calc: ((x: Operand) => Calc) & {
     negate: (value: Operand) => string;
 };
 
-export { Operand, calc };
+export { type Operand, calc };

package/dist/{chunk-5OQGKXOK.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 {
@@ -193,7 +194,8 @@ var hues = [
   900,
   950
 ];
-var isGray = (colorScheme) => colorScheme === "gray" || colorScheme === "zinc" || colorScheme === "neutral" || colorScheme === "stone";
+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(".");
@@ -223,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);
@@ -233,17 +235,24 @@ var transparentizeColor = (color, alpha) => (theme, colorMode) => {
   const raw = getColor(color, color)(theme, colorMode);
   return transparentize(raw, 1 - alpha);
 };
-var toneColor = (color, hue) => (theme, colorMode) => {
-  const raw = getColor(color, color)(theme, colorMode);
+var toneColor = (color, hue, lCoef = 0.94, dCoef = 0.86) => (theme, colorMode) => {
   if (hue < 50 || 950 < hue)
     return color;
-  let n = (hue - 500) / 10;
-  const isLighten = n <= 0;
-  if (isLighten)
-    n *= -1;
-  if (n !== 0)
-    n = n - 5 * (isLighten ? 1 : -1);
-  return toHex(isLighten ? lighten(raw, n / 100) : mix(raw, "#000", n / 100));
+  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, 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));
+  });
+  return colors;
 };
 var randomColor = ({
   string,
@@ -404,9 +413,8 @@ var getObject = (obj, path, fallback, i) => {
 var memoizeObject = (func) => {
   const cache = /* @__PURE__ */ new WeakMap();
   const memoizedFunc = (obj, path, fallback, i) => {
-    if (typeof obj === "undefined") {
+    if (typeof obj === "undefined")
       return func(obj, path, fallback);
-    }
     if (!cache.has(obj))
       cache.set(obj, /* @__PURE__ */ new Map());
     const map = cache.get(obj);
@@ -476,8 +484,10 @@ export {
   useAsync,
   useAsyncFunc,
   useAsyncRetry,
+  createId,
   hues,
   isGray,
+  isAccessible,
   getColor,
   lightenColor,
   darkenColor,
@@ -485,6 +495,7 @@ export {
   shadeColor,
   transparentizeColor,
   toneColor,
+  toneColors,
   randomColor,
   isTone,
   isLight,

package/dist/color.d.mts

@@ -1,15 +1,17 @@
 import { Dict } from './index.types.mjs';
 
-type ColorMode = 'light' | 'dark';
+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 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;
@@ -18,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, transparentizeColor };
+export { darkenColor, getColor, hues, isAccessible, isDark, isGray, isLight, isTone, lightenColor, randomColor, shadeColor, tintColor, toneColor, toneColors, transparentizeColor };

package/dist/color.d.ts

@@ -1,15 +1,17 @@
 import { Dict } from './index.types.js';
 
-type ColorMode = 'light' | 'dark';
+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 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;
@@ -18,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, 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,
@@ -32,6 +33,7 @@ __export(color_exports, {
   shadeColor: () => shadeColor,
   tintColor: () => tintColor,
   toneColor: () => toneColor,
+  toneColors: () => toneColors,
   transparentizeColor: () => transparentizeColor
 });
 module.exports = __toCommonJS(color_exports);
@@ -53,9 +55,8 @@ var getObject = (obj, path, fallback, i) => {
 var memoizeObject = (func) => {
   const cache = /* @__PURE__ */ new WeakMap();
   const memoizedFunc = (obj, path, fallback, i) => {
-    if (typeof obj === "undefined") {
+    if (typeof obj === "undefined")
       return func(obj, path, fallback);
-    }
     if (!cache.has(obj))
       cache.set(obj, /* @__PURE__ */ new Map());
     const map = cache.get(obj);
@@ -83,7 +84,8 @@ var hues = [
   900,
   950
 ];
-var isGray = (colorScheme) => colorScheme === "gray" || colorScheme === "zinc" || colorScheme === "neutral" || colorScheme === "stone";
+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(".");
@@ -113,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);
@@ -123,17 +125,24 @@ 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) => {
-  const raw = getColor(color, color)(theme, colorMode);
+var toneColor = (color, hue, lCoef = 0.94, dCoef = 0.86) => (theme, colorMode) => {
   if (hue < 50 || 950 < hue)
     return color;
-  let n = (hue - 500) / 10;
-  const isLighten = n <= 0;
-  if (isLighten)
-    n *= -1;
-  if (n !== 0)
-    n = n - 5 * (isLighten ? 1 : -1);
-  return (0, import_color2k.toHex)(isLighten ? (0, import_color2k.lighten)(raw, n / 100) : (0, import_color2k.mix)(raw, "#000", n / 100));
+  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, 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));
+  });
+  return colors;
 };
 var randomColor = ({
   string,
@@ -193,6 +202,7 @@ var isDark = (color) => (theme, colorMode) => isTone(color)(theme, colorMode) ==
   darkenColor,
   getColor,
   hues,
+  isAccessible,
   isDark,
   isGray,
   isLight,
@@ -202,5 +212,6 @@ var isDark = (color) => (theme, colorMode) => isTone(color)(theme, colorMode) ==
   shadeColor,
   tintColor,
   toneColor,
+  toneColors,
   transparentizeColor
 });

package/dist/color.mjs

@@ -2,6 +2,7 @@ import {
   darkenColor,
   getColor,
   hues,
+  isAccessible,
   isDark,
   isGray,
   isLight,
@@ -11,8 +12,9 @@ import {
   shadeColor,
   tintColor,
   toneColor,
+  toneColors,
   transparentizeColor
-} from "./chunk-5OQGKXOK.mjs";
+} from "./chunk-IL6ZQBL5.mjs";
 import "./chunk-SLJ4M7XC.mjs";
 import "./chunk-VYMGBE25.mjs";
 import "./chunk-BZAW2D6U.mjs";
@@ -25,6 +27,7 @@ export {
   darkenColor,
   getColor,
   hues,
+  isAccessible,
   isDark,
   isGray,
   isLight,
@@ -34,5 +37,6 @@ export {
   shadeColor,
   tintColor,
   toneColor,
+  toneColors,
   transparentizeColor
 };

package/dist/dom.d.mts

@@ -15,7 +15,7 @@ declare const hasTabIndex: (el: HTMLElement) => boolean;
 declare const isContentEditable: (el: HTMLElement) => boolean;
 declare const isContains: (parent: HTMLElement | null, child: HTMLElement | null) => boolean | undefined;
 declare const getEventRelatedTarget: (ev: React__default.FocusEvent | React__default.MouseEvent) => HTMLElement | null;
-type Booleanish = boolean | 'true' | 'false';
+type Booleanish = boolean | "true" | "false";
 declare const dataAttr: (condition: boolean | undefined) => Booleanish;
 declare const ariaAttr: (condition: boolean | undefined) => boolean | undefined;
 type FocusableElement = {
@@ -30,4 +30,4 @@ declare const getOwnerDocument: (el?: Element | null) => Document;
 declare const getActiveElement: (el?: HTMLElement) => HTMLElement;
 declare const isActiveElement: (el: HTMLElement) => boolean;
 
-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 };
+export { type 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 };

package/dist/dom.d.ts

@@ -15,7 +15,7 @@ declare const hasTabIndex: (el: HTMLElement) => boolean;
 declare const isContentEditable: (el: HTMLElement) => boolean;
 declare const isContains: (parent: HTMLElement | null, child: HTMLElement | null) => boolean | undefined;
 declare const getEventRelatedTarget: (ev: React__default.FocusEvent | React__default.MouseEvent) => HTMLElement | null;
-type Booleanish = boolean | 'true' | 'false';
+type Booleanish = boolean | "true" | "false";
 declare const dataAttr: (condition: boolean | undefined) => Booleanish;
 declare const ariaAttr: (condition: boolean | undefined) => boolean | undefined;
 type FocusableElement = {
@@ -30,4 +30,4 @@ declare const getOwnerDocument: (el?: Element | null) => Document;
 declare const getActiveElement: (el?: HTMLElement) => HTMLElement;
 declare const isActiveElement: (el: HTMLElement) => boolean;
 
-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 };
+export { type 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 };

package/dist/event.d.mts

@@ -1,5 +1,5 @@
 type AnyPointerEvent = MouseEvent | TouchEvent | PointerEvent;
-type PointType = 'page' | 'client';
+type PointType = "page" | "client";
 type Point = {
     x: number;
     y: number;
@@ -27,4 +27,4 @@ declare const getEventPoint: (ev: AnyPointerEvent, type?: PointType) => {
 declare const addDomEvent: (target: EventTarget, type: string, cb: EventListener, options?: AddEventListenerOptions) => () => void;
 declare const addPointerEvent: (target: EventTarget, type: string, cb: MixedEventListener, options?: AddEventListenerOptions) => () => void;
 
-export { AnyPointerEvent, MixedEventListener, Point, PointType, PointerEventInfo, addDomEvent, addPointerEvent, getEventPoint, getEventWindow, isMouseEvent, isMultiTouchEvent, isTouchEvent, pointFromMouse, pointFromTouch };
+export { type AnyPointerEvent, type MixedEventListener, type Point, type PointType, type PointerEventInfo, addDomEvent, addPointerEvent, getEventPoint, getEventWindow, isMouseEvent, isMultiTouchEvent, isTouchEvent, pointFromMouse, pointFromTouch };

package/dist/event.d.ts

@@ -1,5 +1,5 @@
 type AnyPointerEvent = MouseEvent | TouchEvent | PointerEvent;
-type PointType = 'page' | 'client';
+type PointType = "page" | "client";
 type Point = {
     x: number;
     y: number;
@@ -27,4 +27,4 @@ declare const getEventPoint: (ev: AnyPointerEvent, type?: PointType) => {
 declare const addDomEvent: (target: EventTarget, type: string, cb: EventListener, options?: AddEventListenerOptions) => () => void;
 declare const addPointerEvent: (target: EventTarget, type: string, cb: MixedEventListener, options?: AddEventListenerOptions) => () => void;
 
-export { AnyPointerEvent, MixedEventListener, Point, PointType, PointerEventInfo, addDomEvent, addPointerEvent, getEventPoint, getEventWindow, isMouseEvent, isMultiTouchEvent, isTouchEvent, pointFromMouse, pointFromTouch };
+export { type AnyPointerEvent, type MixedEventListener, type Point, type PointType, type PointerEventInfo, addDomEvent, addPointerEvent, getEventPoint, getEventWindow, isMouseEvent, isMultiTouchEvent, isTouchEvent, pointFromMouse, pointFromTouch };

package/dist/function.mjs

@@ -3,7 +3,7 @@ import {
   handlerAll,
   noop,
   runIfFunc
-} from "./chunk-5OQGKXOK.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, 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, 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,
@@ -124,6 +126,7 @@ __export(src_exports, {
   tintColor: () => tintColor,
   toPrecision: () => toPrecision,
   toneColor: () => toneColor,
+  toneColors: () => toneColors,
   transparentizeColor: () => transparentizeColor,
   useAsync: () => useAsync,
   useAsyncFunc: () => useAsyncFunc,
@@ -258,9 +261,8 @@ var getObject = (obj, path, fallback, i) => {
 var memoizeObject = (func) => {
   const cache = /* @__PURE__ */ new WeakMap();
   const memoizedFunc = (obj, path, fallback, i) => {
-    if (typeof obj === "undefined") {
+    if (typeof obj === "undefined")
       return func(obj, path, fallback);
-    }
     if (!cache.has(obj))
       cache.set(obj, /* @__PURE__ */ new Map());
     const map = cache.get(obj);
@@ -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);
@@ -597,7 +600,8 @@ var hues = [
   900,
   950
 ];
-var isGray = (colorScheme) => colorScheme === "gray" || colorScheme === "zinc" || colorScheme === "neutral" || colorScheme === "stone";
+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(".");
@@ -627,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);
@@ -637,17 +641,24 @@ 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) => {
-  const raw = getColor(color, color)(theme, colorMode);
+var toneColor = (color, hue, lCoef = 0.94, dCoef = 0.86) => (theme, colorMode) => {
   if (hue < 50 || 950 < hue)
     return color;
-  let n = (hue - 500) / 10;
-  const isLighten = n <= 0;
-  if (isLighten)
-    n *= -1;
-  if (n !== 0)
-    n = n - 5 * (isLighten ? 1 : -1);
-  return (0, import_color2k.toHex)(isLighten ? (0, import_color2k.lighten)(raw, n / 100) : (0, import_color2k.mix)(raw, "#000", n / 100));
+  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, 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));
+  });
+  return colors;
 };
 var randomColor = ({
   string,
@@ -788,6 +799,7 @@ var addPointerEvent = (target, type, cb, options) => addDomEvent(target, type, w
   clampNumber,
   countDecimal,
   createContext,
+  createId,
   createdDom,
   cx,
   darkenColor,
@@ -816,6 +828,7 @@ var addPointerEvent = (target, type, cb, options) => addDomEvent(target, type, w
   hasTabIndex,
   hues,
   includesChildren,
+  isAccessible,
   isActiveElement,
   isApple,
   isArray,
@@ -872,6 +885,7 @@ var addPointerEvent = (target, type, cb, options) => addDomEvent(target, type, w
   tintColor,
   toPrecision,
   toneColor,
+  toneColors,
   transparentizeColor,
   useAsync,
   useAsyncFunc,

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,
@@ -40,6 +42,7 @@ import {
   splitObject,
   tintColor,
   toneColor,
+  toneColors,
   transparentizeColor,
   useAsync,
   useAsyncFunc,
@@ -50,7 +53,7 @@ import {
   useSafeLayoutEffect,
   useUnmountEffect,
   useUpdateEffect
-} from "./chunk-5OQGKXOK.mjs";
+} from "./chunk-IL6ZQBL5.mjs";
 import "./chunk-SLJ4M7XC.mjs";
 import {
   clampNumber,
@@ -132,6 +135,7 @@ export {
   clampNumber,
   countDecimal,
   createContext,
+  createId,
   createdDom,
   cx,
   darkenColor,
@@ -160,6 +164,7 @@ export {
   hasTabIndex,
   hues,
   includesChildren,
+  isAccessible,
   isActiveElement,
   isApple,
   isArray,
@@ -216,6 +221,7 @@ export {
   tintColor,
   toPrecision,
   toneColor,
+  toneColors,
   transparentizeColor,
   useAsync,
   useAsyncFunc,

package/dist/index.types.d.mts

@@ -11,4 +11,4 @@ type Merge<T extends object> = {
     [K in keyof T]: T[K];
 };
 
-export { Dict, Length, Merge, Path, Primitive, StringLiteral, Union };
+export type { Dict, Length, Merge, Path, Primitive, StringLiteral, Union };

package/dist/index.types.d.ts

@@ -11,4 +11,4 @@ type Merge<T extends object> = {
     [K in keyof T]: T[K];
 };
 
-export { Dict, Length, Merge, Path, Primitive, StringLiteral, Union };
+export type { Dict, Length, Merge, Path, Primitive, StringLiteral, Union };

package/dist/object.js

@@ -147,9 +147,8 @@ var getObject = (obj, path, fallback, i) => {
 var memoizeObject = (func) => {
   const cache = /* @__PURE__ */ new WeakMap();
   const memoizedFunc = (obj, path, fallback, i) => {
-    if (typeof obj === "undefined") {
+    if (typeof obj === "undefined")
       return func(obj, path, fallback);
-    }
     if (!cache.has(obj))
       cache.set(obj, /* @__PURE__ */ new Map());
     const map = cache.get(obj);

package/dist/object.mjs

@@ -13,7 +13,7 @@ import {
   pickObject,
   replaceObject,
   splitObject
-} from "./chunk-5OQGKXOK.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 { 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 };
+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 { 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 };
+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-5OQGKXOK.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.3.3",
+  "version": "0.4.1",
   "description": "Yamada UI utils",
   "keywords": [
     "utils",