@yamada-ui/utils 0.2.1 → 0.3.0

package/dist/{chunk-ANJGKDOC.mjs → chunk-OL4TBQN7.mjs}

@@ -180,13 +180,32 @@ import {
   darken,
   lighten
 } from "color2k";
+var hues = [
+  50,
+  100,
+  200,
+  300,
+  400,
+  500,
+  600,
+  700,
+  800,
+  900,
+  950
+];
 var isGray = (colorScheme) => colorScheme === "gray" || colorScheme === "zinc" || colorScheme === "neutral" || colorScheme === "stone";
-var getColor = (color, fallback) => (theme, colorMode) => {
+var getColor = (color, fallback) => (theme = {}, colorMode) => {
+  var _a, _b, _c;
+  const [token, hue] = color.split(".");
+  const [, relatedToken] = (_c = Object.entries((_b = (_a = theme.semantics) == null ? void 0 : _a.colorSchemes) != null ? _b : {}).find(
+    ([semanticToken]) => token === semanticToken
+  )) != null ? _c : [];
+  if (relatedToken)
+    color = `${relatedToken}.${hue}`;
   const hex = getMemoizedObject(theme, `colors.${color}`, color);
   try {
     if (isArray(hex)) {
-      const [lightHex, darkHex] = hex;
-      return toHex(String(colorMode !== "dark" ? lightHex : darkHex));
+      return toHex(String(colorMode !== "dark" ? hex[0] : hex[1]));
     } else {
       return toHex(String(hex));
     }
@@ -195,30 +214,30 @@ var getColor = (color, fallback) => (theme, colorMode) => {
   }
 };
 var lightenColor = (color, amount) => (theme, colorMode) => {
-  const raw = theme ? getColor(color)(theme, colorMode) : color;
+  const raw = getColor(color, color)(theme, colorMode);
   return toHex(lighten(raw, amount / 100));
 };
 var darkenColor = (color, amount) => (theme, colorMode) => {
-  const raw = theme ? getColor(color)(theme, colorMode) : color;
+  const raw = getColor(color, color)(theme, colorMode);
   return toHex(darken(raw, amount / 100));
 };
 var tintColor = (color, amount) => (theme, colorMode) => {
-  const raw = theme ? getColor(color)(theme, colorMode) : color;
+  const raw = getColor(color, color)(theme, colorMode);
   return toHex(mix(raw, "#fff", amount));
 };
 var shadeColor = (color, amount) => (theme, colorMode) => {
-  const raw = theme ? getColor(color)(theme, colorMode) : color;
+  const raw = getColor(color, color)(theme, colorMode);
   return toHex(mix(raw, "#000", amount / 100));
 };
 var transparentizeColor = (color, alpha) => (theme, colorMode) => {
-  const raw = theme ? getColor(color)(theme, colorMode) : color;
+  const raw = getColor(color, color)(theme, colorMode);
   return transparentize(raw, 1 - alpha);
 };
-var toneColor = (color, l) => (theme, colorMode) => {
-  const raw = theme ? getColor(color)(theme, colorMode) : color;
-  if (l < 0 || 900 < l)
+var toneColor = (color, hue) => (theme, colorMode) => {
+  const raw = getColor(color, color)(theme, colorMode);
+  if (hue < 50 || 950 < hue)
     return color;
-  let n = (l - 500) / 10;
+  let n = (hue - 500) / 10;
   const isLighten = n <= 0;
   if (isLighten)
     n *= -1;
@@ -457,6 +476,7 @@ export {
   useAsync,
   useAsyncFunc,
   useAsyncRetry,
+  hues,
   isGray,
   getColor,
   lightenColor,

package/dist/color.d.mts

@@ -1,13 +1,14 @@
 import { Dict } from './index.types.mjs';
 
+declare const hues: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
 declare const isGray: (colorScheme: string) => boolean;
-declare const getColor: (color: string, fallback?: string) => (theme: Dict, colorMode?: 'light' | 'dark') => string;
+declare const getColor: (color: string, fallback?: string) => (theme?: Dict, colorMode?: 'light' | 'dark') => string;
 declare const lightenColor: (color: string, amount: number) => (theme?: Dict, colorMode?: 'light' | 'dark') => string;
 declare const darkenColor: (color: string, amount: number) => (theme?: Dict, colorMode?: 'light' | 'dark') => string;
 declare const tintColor: (color: string, amount: number) => (theme?: Dict, colorMode?: 'light' | 'dark') => string;
 declare const shadeColor: (color: string, amount: number) => (theme?: Dict, colorMode?: 'light' | 'dark') => string;
 declare const transparentizeColor: (color: string, alpha: number) => (theme?: Dict, colorMode?: 'light' | 'dark') => string;
-declare const toneColor: (color: string, l: number) => (theme?: Dict, colorMode?: 'light' | 'dark') => string;
+declare const toneColor: (color: string, hue: (typeof hues)[number]) => (theme?: Dict, colorMode?: 'light' | 'dark') => string;
 declare const randomColor: ({ string, colors, }?: {
     string?: string | undefined;
     colors?: string[] | undefined;
@@ -16,4 +17,4 @@ declare const isTone: (color: string) => (theme?: Dict, colorMode?: 'light' | 'd
 declare const isLight: (color: string) => (theme?: Dict, colorMode?: 'light' | 'dark') => boolean;
 declare const isDark: (color: string) => (theme?: Dict, colorMode?: 'light' | 'dark') => boolean;
 
-export { darkenColor, getColor, isDark, isGray, isLight, isTone, lightenColor, randomColor, shadeColor, tintColor, toneColor, transparentizeColor };
+export { darkenColor, getColor, hues, isDark, isGray, isLight, isTone, lightenColor, randomColor, shadeColor, tintColor, toneColor, transparentizeColor };

package/dist/color.d.ts

@@ -1,13 +1,14 @@
 import { Dict } from './index.types.js';
 
+declare const hues: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
 declare const isGray: (colorScheme: string) => boolean;
-declare const getColor: (color: string, fallback?: string) => (theme: Dict, colorMode?: 'light' | 'dark') => string;
+declare const getColor: (color: string, fallback?: string) => (theme?: Dict, colorMode?: 'light' | 'dark') => string;
 declare const lightenColor: (color: string, amount: number) => (theme?: Dict, colorMode?: 'light' | 'dark') => string;
 declare const darkenColor: (color: string, amount: number) => (theme?: Dict, colorMode?: 'light' | 'dark') => string;
 declare const tintColor: (color: string, amount: number) => (theme?: Dict, colorMode?: 'light' | 'dark') => string;
 declare const shadeColor: (color: string, amount: number) => (theme?: Dict, colorMode?: 'light' | 'dark') => string;
 declare const transparentizeColor: (color: string, alpha: number) => (theme?: Dict, colorMode?: 'light' | 'dark') => string;
-declare const toneColor: (color: string, l: number) => (theme?: Dict, colorMode?: 'light' | 'dark') => string;
+declare const toneColor: (color: string, hue: (typeof hues)[number]) => (theme?: Dict, colorMode?: 'light' | 'dark') => string;
 declare const randomColor: ({ string, colors, }?: {
     string?: string | undefined;
     colors?: string[] | undefined;
@@ -16,4 +17,4 @@ declare const isTone: (color: string) => (theme?: Dict, colorMode?: 'light' | 'd
 declare const isLight: (color: string) => (theme?: Dict, colorMode?: 'light' | 'dark') => boolean;
 declare const isDark: (color: string) => (theme?: Dict, colorMode?: 'light' | 'dark') => boolean;
 
-export { darkenColor, getColor, isDark, isGray, isLight, isTone, lightenColor, randomColor, shadeColor, tintColor, toneColor, transparentizeColor };
+export { darkenColor, getColor, hues, isDark, isGray, isLight, isTone, lightenColor, randomColor, shadeColor, tintColor, toneColor, transparentizeColor };

package/dist/color.js

@@ -22,6 +22,7 @@ var color_exports = {};
 __export(color_exports, {
   darkenColor: () => darkenColor,
   getColor: () => getColor,
+  hues: () => hues,
   isDark: () => isDark,
   isGray: () => isGray,
   isLight: () => isLight,
@@ -69,13 +70,32 @@ var memoizeObject = (func) => {
 var getMemoizedObject = memoizeObject(getObject);
 
 // src/color.ts
+var hues = [
+  50,
+  100,
+  200,
+  300,
+  400,
+  500,
+  600,
+  700,
+  800,
+  900,
+  950
+];
 var isGray = (colorScheme) => colorScheme === "gray" || colorScheme === "zinc" || colorScheme === "neutral" || colorScheme === "stone";
-var getColor = (color, fallback) => (theme, colorMode) => {
+var getColor = (color, fallback) => (theme = {}, colorMode) => {
+  var _a, _b, _c;
+  const [token, hue] = color.split(".");
+  const [, relatedToken] = (_c = Object.entries((_b = (_a = theme.semantics) == null ? void 0 : _a.colorSchemes) != null ? _b : {}).find(
+    ([semanticToken]) => token === semanticToken
+  )) != null ? _c : [];
+  if (relatedToken)
+    color = `${relatedToken}.${hue}`;
   const hex = getMemoizedObject(theme, `colors.${color}`, color);
   try {
     if (isArray(hex)) {
-      const [lightHex, darkHex] = hex;
-      return (0, import_color2k.toHex)(String(colorMode !== "dark" ? lightHex : darkHex));
+      return (0, import_color2k.toHex)(String(colorMode !== "dark" ? hex[0] : hex[1]));
     } else {
       return (0, import_color2k.toHex)(String(hex));
     }
@@ -84,30 +104,30 @@ var getColor = (color, fallback) => (theme, colorMode) => {
   }
 };
 var lightenColor = (color, amount) => (theme, colorMode) => {
-  const raw = theme ? getColor(color)(theme, colorMode) : color;
+  const raw = getColor(color, color)(theme, colorMode);
   return (0, import_color2k.toHex)((0, import_color2k.lighten)(raw, amount / 100));
 };
 var darkenColor = (color, amount) => (theme, colorMode) => {
-  const raw = theme ? getColor(color)(theme, colorMode) : color;
+  const raw = getColor(color, color)(theme, colorMode);
   return (0, import_color2k.toHex)((0, import_color2k.darken)(raw, amount / 100));
 };
 var tintColor = (color, amount) => (theme, colorMode) => {
-  const raw = theme ? getColor(color)(theme, colorMode) : color;
+  const raw = getColor(color, color)(theme, colorMode);
   return (0, import_color2k.toHex)((0, import_color2k.mix)(raw, "#fff", amount));
 };
 var shadeColor = (color, amount) => (theme, colorMode) => {
-  const raw = theme ? getColor(color)(theme, colorMode) : color;
+  const raw = getColor(color, color)(theme, colorMode);
   return (0, import_color2k.toHex)((0, import_color2k.mix)(raw, "#000", amount / 100));
 };
 var transparentizeColor = (color, alpha) => (theme, colorMode) => {
-  const raw = theme ? getColor(color)(theme, colorMode) : color;
+  const raw = getColor(color, color)(theme, colorMode);
   return (0, import_color2k.transparentize)(raw, 1 - alpha);
 };
-var toneColor = (color, l) => (theme, colorMode) => {
-  const raw = theme ? getColor(color)(theme, colorMode) : color;
-  if (l < 0 || 900 < l)
+var toneColor = (color, hue) => (theme, colorMode) => {
+  const raw = getColor(color, color)(theme, colorMode);
+  if (hue < 50 || 950 < hue)
     return color;
-  let n = (l - 500) / 10;
+  let n = (hue - 500) / 10;
   const isLighten = n <= 0;
   if (isLighten)
     n *= -1;
@@ -172,6 +192,7 @@ var isDark = (color) => (theme, colorMode) => isTone(color)(theme, colorMode) ==
 0 && (module.exports = {
   darkenColor,
   getColor,
+  hues,
   isDark,
   isGray,
   isLight,

package/dist/color.mjs

@@ -1,6 +1,7 @@
 import {
   darkenColor,
   getColor,
+  hues,
   isDark,
   isGray,
   isLight,
@@ -11,7 +12,7 @@ import {
   tintColor,
   toneColor,
   transparentizeColor
-} from "./chunk-ANJGKDOC.mjs";
+} from "./chunk-OL4TBQN7.mjs";
 import "./chunk-SLJ4M7XC.mjs";
 import "./chunk-VYMGBE25.mjs";
 import "./chunk-BZAW2D6U.mjs";
@@ -23,6 +24,7 @@ import "./chunk-G7Q2EDJF.mjs";
 export {
   darkenColor,
   getColor,
+  hues,
   isDark,
   isGray,
   isLight,

package/dist/function.mjs

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

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-export { Dict, DynamicRecord, Length, Path, StringLiteral, Union } from './index.types.mjs';
+export { Dict, Length, Path, StringLiteral, Union } from './index.types.mjs';
 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';
@@ -6,7 +6,7 @@ export { AsyncFnReturn, AsyncState, AsyncStateRetry, DOMAttributes, FunctionRetu
 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, isDark, isGray, isLight, isTone, lightenColor, randomColor, shadeColor, tintColor, toneColor, transparentizeColor } from './color.mjs';
+export { darkenColor, getColor, hues, isDark, isGray, isLight, isTone, lightenColor, randomColor, shadeColor, tintColor, toneColor, 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

@@ -1,4 +1,4 @@
-export { Dict, DynamicRecord, Length, Path, StringLiteral, Union } from './index.types.js';
+export { Dict, Length, Path, StringLiteral, Union } from './index.types.js';
 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';
@@ -6,7 +6,7 @@ export { AsyncFnReturn, AsyncState, AsyncStateRetry, DOMAttributes, FunctionRetu
 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, isDark, isGray, isLight, isTone, lightenColor, randomColor, shadeColor, tintColor, toneColor, transparentizeColor } from './color.js';
+export { darkenColor, getColor, hues, isDark, isGray, isLight, isTone, lightenColor, randomColor, shadeColor, tintColor, toneColor, 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

@@ -66,6 +66,7 @@ __export(src_exports, {
   handlerAll: () => handlerAll,
   hasNegativeTabIndex: () => hasNegativeTabIndex,
   hasTabIndex: () => hasTabIndex,
+  hues: () => hues,
   includesChildren: () => includesChildren,
   isActiveElement: () => isActiveElement,
   isApple: () => isApple,
@@ -583,13 +584,32 @@ var calc = Object.assign(
 
 // src/color.ts
 var import_color2k = require("color2k");
+var hues = [
+  50,
+  100,
+  200,
+  300,
+  400,
+  500,
+  600,
+  700,
+  800,
+  900,
+  950
+];
 var isGray = (colorScheme) => colorScheme === "gray" || colorScheme === "zinc" || colorScheme === "neutral" || colorScheme === "stone";
-var getColor = (color, fallback) => (theme, colorMode) => {
+var getColor = (color, fallback) => (theme = {}, colorMode) => {
+  var _a, _b, _c;
+  const [token, hue] = color.split(".");
+  const [, relatedToken] = (_c = Object.entries((_b = (_a = theme.semantics) == null ? void 0 : _a.colorSchemes) != null ? _b : {}).find(
+    ([semanticToken]) => token === semanticToken
+  )) != null ? _c : [];
+  if (relatedToken)
+    color = `${relatedToken}.${hue}`;
   const hex = getMemoizedObject(theme, `colors.${color}`, color);
   try {
     if (isArray(hex)) {
-      const [lightHex, darkHex] = hex;
-      return (0, import_color2k.toHex)(String(colorMode !== "dark" ? lightHex : darkHex));
+      return (0, import_color2k.toHex)(String(colorMode !== "dark" ? hex[0] : hex[1]));
     } else {
       return (0, import_color2k.toHex)(String(hex));
     }
@@ -598,30 +618,30 @@ var getColor = (color, fallback) => (theme, colorMode) => {
   }
 };
 var lightenColor = (color, amount) => (theme, colorMode) => {
-  const raw = theme ? getColor(color)(theme, colorMode) : color;
+  const raw = getColor(color, color)(theme, colorMode);
   return (0, import_color2k.toHex)((0, import_color2k.lighten)(raw, amount / 100));
 };
 var darkenColor = (color, amount) => (theme, colorMode) => {
-  const raw = theme ? getColor(color)(theme, colorMode) : color;
+  const raw = getColor(color, color)(theme, colorMode);
   return (0, import_color2k.toHex)((0, import_color2k.darken)(raw, amount / 100));
 };
 var tintColor = (color, amount) => (theme, colorMode) => {
-  const raw = theme ? getColor(color)(theme, colorMode) : color;
+  const raw = getColor(color, color)(theme, colorMode);
   return (0, import_color2k.toHex)((0, import_color2k.mix)(raw, "#fff", amount));
 };
 var shadeColor = (color, amount) => (theme, colorMode) => {
-  const raw = theme ? getColor(color)(theme, colorMode) : color;
+  const raw = getColor(color, color)(theme, colorMode);
   return (0, import_color2k.toHex)((0, import_color2k.mix)(raw, "#000", amount / 100));
 };
 var transparentizeColor = (color, alpha) => (theme, colorMode) => {
-  const raw = theme ? getColor(color)(theme, colorMode) : color;
+  const raw = getColor(color, color)(theme, colorMode);
   return (0, import_color2k.transparentize)(raw, 1 - alpha);
 };
-var toneColor = (color, l) => (theme, colorMode) => {
-  const raw = theme ? getColor(color)(theme, colorMode) : color;
-  if (l < 0 || 900 < l)
+var toneColor = (color, hue) => (theme, colorMode) => {
+  const raw = getColor(color, color)(theme, colorMode);
+  if (hue < 50 || 950 < hue)
     return color;
-  let n = (l - 500) / 10;
+  let n = (hue - 500) / 10;
   const isLighten = n <= 0;
   if (isLighten)
     n *= -1;
@@ -794,6 +814,7 @@ var addPointerEvent = (target, type, cb, options) => addDomEvent(target, type, w
   handlerAll,
   hasNegativeTabIndex,
   hasTabIndex,
+  hues,
   includesChildren,
   isActiveElement,
   isApple,

package/dist/index.mjs

@@ -14,6 +14,7 @@ import {
   getObject,
   getValidChildren,
   handlerAll,
+  hues,
   includesChildren,
   isDark,
   isGray,
@@ -49,7 +50,7 @@ import {
   useSafeLayoutEffect,
   useUnmountEffect,
   useUpdateEffect
-} from "./chunk-ANJGKDOC.mjs";
+} from "./chunk-OL4TBQN7.mjs";
 import "./chunk-SLJ4M7XC.mjs";
 import {
   clampNumber,
@@ -157,6 +158,7 @@ export {
   handlerAll,
   hasNegativeTabIndex,
   hasTabIndex,
+  hues,
   includesChildren,
   isActiveElement,
   isApple,

package/dist/index.types.d.mts

@@ -7,8 +7,5 @@ type Dict<T = any> = Record<string, T>;
 type StringLiteral = string & {};
 type Union<T> = T | StringLiteral;
 type Length = string | 0 | number;
-type DynamicRecord<T> = {
-    [K in keyof T]-?: T[K] extends Primitive ? string | number : DynamicRecord<T[K]>;
-};
 
-export { Dict, DynamicRecord, Length, Path, StringLiteral, Union };
+export { Dict, Length, Path, StringLiteral, Union };

package/dist/index.types.d.ts

@@ -7,8 +7,5 @@ type Dict<T = any> = Record<string, T>;
 type StringLiteral = string & {};
 type Union<T> = T | StringLiteral;
 type Length = string | 0 | number;
-type DynamicRecord<T> = {
-    [K in keyof T]-?: T[K] extends Primitive ? string | number : DynamicRecord<T[K]>;
-};
 
-export { Dict, DynamicRecord, Length, Path, StringLiteral, Union };
+export { Dict, Length, Path, StringLiteral, Union };

package/dist/object.mjs

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

package/dist/react.mjs

@@ -19,7 +19,7 @@ import {
   useSafeLayoutEffect,
   useUnmountEffect,
   useUpdateEffect
-} from "./chunk-ANJGKDOC.mjs";
+} from "./chunk-OL4TBQN7.mjs";
 import "./chunk-SLJ4M7XC.mjs";
 import "./chunk-VYMGBE25.mjs";
 import "./chunk-BZAW2D6U.mjs";

package/package.json

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