@yamada-ui/utils 0.1.0 → 0.1.1

package/dist/{chunk-A6J4FUU7.mjs → chunk-HUEOJZVC.mjs}

@@ -120,45 +120,43 @@ var useUpdateEffect = (callback, deps) => {
 };
 
 // src/color.ts
-import { TinyColor } from "@ctrl/tinycolor";
+import { toHex, parseToRgba, transparentize, mix, darken, lighten } from "color2k";
 var getColor = (color, fallback) => (theme, colorMode) => {
   const hex = getMemoizedObject(
     theme,
     `colors.${color}`,
     color
   );
-  if (isArray(hex)) {
-    const [lightHex, darkHex] = hex;
-    const { isValid, originalInput } = new TinyColor(colorMode !== "dark" ? lightHex : darkHex);
-    return isValid ? originalInput : fallback;
-  } else {
-    const { isValid, originalInput } = new TinyColor(hex);
-    return isValid ? originalInput : fallback;
+  try {
+    if (isArray(hex)) {
+      const [lightHex, darkHex] = hex;
+      return toHex(String(colorMode !== "dark" ? lightHex : darkHex));
+    } else {
+      return toHex(String(hex));
+    }
+  } catch {
+    return fallback != null ? fallback : "#000000";
   }
 };
 var lightenColor = (color, amount) => (theme, colorMode) => {
   const raw = getColor(color)(theme, colorMode);
-  return new TinyColor(raw).lighten(amount).toRgbString();
+  return toHex(lighten(raw, amount / 100));
 };
 var darkenColor = (color, amount) => (theme, colorMode) => {
   const raw = getColor(color)(theme, colorMode);
-  return new TinyColor(raw).darken(amount).toRgbString();
-};
-var brightenColor = (color, amount) => (theme, colorMode) => {
-  const raw = getColor(color)(theme, colorMode);
-  return new TinyColor(raw).brighten(amount).toRgbString();
+  return toHex(darken(raw, amount / 100));
 };
 var tintColor = (color, amount) => (theme, colorMode) => {
   const raw = getColor(color)(theme, colorMode);
-  return new TinyColor(raw).tint(amount).toRgbString();
+  return toHex(mix(raw, "#fff", amount));
 };
 var shadeColor = (color, amount) => (theme, colorMode) => {
   const raw = getColor(color)(theme, colorMode);
-  return new TinyColor(raw).shade(amount).toRgbString();
+  return toHex(mix(raw, "#000", amount / 100));
 };
 var transparentizeColor = (color, alpha) => (theme, colorMode) => {
   const raw = getColor(color)(theme, colorMode);
-  return new TinyColor(raw).setAlpha(alpha).toRgbString();
+  return transparentize(raw, 1 - alpha);
 };
 var toneColor = (color, l) => (theme, colorMode) => {
   const raw = getColor(color)(theme, colorMode);
@@ -170,7 +168,7 @@ var toneColor = (color, l) => (theme, colorMode) => {
     n *= -1;
   if (n !== 0)
     n = n - 5 * (isLighten ? 1 : -1);
-  return new TinyColor(raw)[isLighten ? "lighten" : "shade"](n).toString();
+  return toHex(isLighten ? lighten(raw, n / 100) : mix(raw, "#000", n / 100));
 };
 var randomColor = ({ string, colors } = {}) => {
   const fallback = randomHex();
@@ -210,14 +208,18 @@ var randomColorFromList = (str, list) => {
   return list[index];
 };
 var randomFromList = (list) => list[Math.floor(Math.random() * list.length)];
-var isLight = (color) => (theme, colorMode) => {
-  const raw = getColor(color)(theme, colorMode);
-  return new TinyColor(raw).isLight();
+var getBrightness = (color) => {
+  const [r, g, b] = parseToRgba(color);
+  return (r * 299 + g * 587 + b * 114) / 1e3;
 };
-var isDark = (color) => (theme, colorMode) => {
+var isTone = (color) => (theme, colorMode) => {
   const raw = getColor(color)(theme, colorMode);
-  return new TinyColor(raw).isDark();
+  const brightness = getBrightness(raw);
+  const isDark2 = brightness < 128;
+  return isDark2 ? "dark" : "light";
 };
+var isLight = (color) => (theme, colorMode) => isTone(color)(theme, colorMode) === "dark";
+var isDark = (color) => (theme, colorMode) => isTone(color)(theme, colorMode) === "light";
 
 // src/object.ts
 var omitObject = (obj, keys) => {
@@ -390,12 +392,12 @@ export {
   getColor,
   lightenColor,
   darkenColor,
-  brightenColor,
   tintColor,
   shadeColor,
   transparentizeColor,
   toneColor,
   randomColor,
+  isTone,
   isLight,
   isDark
 };

package/dist/color.d.ts

@@ -1,10 +1,8 @@
-import * as _ctrl_tinycolor from '@ctrl/tinycolor';
 import { Dict } from './index.types.js';
 
-declare const getColor: (color: string, fallback?: string) => (theme: Dict, colorMode: 'light' | 'dark' | undefined) => string | number | _ctrl_tinycolor.RGB | _ctrl_tinycolor.HSL | _ctrl_tinycolor.HSV | undefined;
+declare const getColor: (color: string, fallback?: string) => (theme: Dict, colorMode: 'light' | 'dark' | undefined) => string;
 declare const lightenColor: (color: string, amount: number) => (theme: Dict, colorMode: 'light' | 'dark' | undefined) => string;
 declare const darkenColor: (color: string, amount: number) => (theme: Dict, colorMode: 'light' | 'dark' | undefined) => string;
-declare const brightenColor: (color: string, amount: number) => (theme: Dict, colorMode: 'light' | 'dark' | undefined) => string;
 declare const tintColor: (color: string, amount: number) => (theme: Dict, colorMode: 'light' | 'dark' | undefined) => string;
 declare const shadeColor: (color: string, amount: number) => (theme: Dict, colorMode: 'light' | 'dark' | undefined) => string;
 declare const transparentizeColor: (color: string, alpha: number) => (theme: Dict, colorMode: 'light' | 'dark' | undefined) => string;
@@ -13,7 +11,8 @@ declare const randomColor: ({ string, colors }?: {
     string?: string | undefined;
     colors?: string[] | undefined;
 }) => string;
+declare const isTone: (color: string) => (theme: Dict, colorMode: 'light' | 'dark' | undefined) => "light" | "dark";
 declare const isLight: (color: string) => (theme: Dict, colorMode: 'light' | 'dark' | undefined) => boolean;
 declare const isDark: (color: string) => (theme: Dict, colorMode: 'light' | 'dark' | undefined) => boolean;
 
-export { brightenColor, darkenColor, getColor, isDark, isLight, lightenColor, randomColor, shadeColor, tintColor, toneColor, transparentizeColor };
+export { darkenColor, getColor, isDark, isLight, isTone, lightenColor, randomColor, shadeColor, tintColor, toneColor, transparentizeColor };

package/dist/color.js

@@ -20,11 +20,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/color.ts
 var color_exports = {};
 __export(color_exports, {
-  brightenColor: () => brightenColor,
   darkenColor: () => darkenColor,
   getColor: () => getColor,
   isDark: () => isDark,
   isLight: () => isLight,
+  isTone: () => isTone,
   lightenColor: () => lightenColor,
   randomColor: () => randomColor,
   shadeColor: () => shadeColor,
@@ -33,7 +33,7 @@ __export(color_exports, {
   transparentizeColor: () => transparentizeColor
 });
 module.exports = __toCommonJS(color_exports);
-var import_tinycolor = require("@ctrl/tinycolor");
+var import_color2k = require("color2k");
 
 // src/assertion.ts
 var isArray = (value) => Array.isArray(value);
@@ -74,38 +74,36 @@ var getColor = (color, fallback) => (theme, colorMode) => {
     `colors.${color}`,
     color
   );
-  if (isArray(hex)) {
-    const [lightHex, darkHex] = hex;
-    const { isValid, originalInput } = new import_tinycolor.TinyColor(colorMode !== "dark" ? lightHex : darkHex);
-    return isValid ? originalInput : fallback;
-  } else {
-    const { isValid, originalInput } = new import_tinycolor.TinyColor(hex);
-    return isValid ? originalInput : fallback;
+  try {
+    if (isArray(hex)) {
+      const [lightHex, darkHex] = hex;
+      return (0, import_color2k.toHex)(String(colorMode !== "dark" ? lightHex : darkHex));
+    } else {
+      return (0, import_color2k.toHex)(String(hex));
+    }
+  } catch {
+    return fallback != null ? fallback : "#000000";
   }
 };
 var lightenColor = (color, amount) => (theme, colorMode) => {
   const raw = getColor(color)(theme, colorMode);
-  return new import_tinycolor.TinyColor(raw).lighten(amount).toRgbString();
+  return (0, import_color2k.toHex)((0, import_color2k.lighten)(raw, amount / 100));
 };
 var darkenColor = (color, amount) => (theme, colorMode) => {
   const raw = getColor(color)(theme, colorMode);
-  return new import_tinycolor.TinyColor(raw).darken(amount).toRgbString();
-};
-var brightenColor = (color, amount) => (theme, colorMode) => {
-  const raw = getColor(color)(theme, colorMode);
-  return new import_tinycolor.TinyColor(raw).brighten(amount).toRgbString();
+  return (0, import_color2k.toHex)((0, import_color2k.darken)(raw, amount / 100));
 };
 var tintColor = (color, amount) => (theme, colorMode) => {
   const raw = getColor(color)(theme, colorMode);
-  return new import_tinycolor.TinyColor(raw).tint(amount).toRgbString();
+  return (0, import_color2k.toHex)((0, import_color2k.mix)(raw, "#fff", amount));
 };
 var shadeColor = (color, amount) => (theme, colorMode) => {
   const raw = getColor(color)(theme, colorMode);
-  return new import_tinycolor.TinyColor(raw).shade(amount).toRgbString();
+  return (0, import_color2k.toHex)((0, import_color2k.mix)(raw, "#000", amount / 100));
 };
 var transparentizeColor = (color, alpha) => (theme, colorMode) => {
   const raw = getColor(color)(theme, colorMode);
-  return new import_tinycolor.TinyColor(raw).setAlpha(alpha).toRgbString();
+  return (0, import_color2k.transparentize)(raw, 1 - alpha);
 };
 var toneColor = (color, l) => (theme, colorMode) => {
   const raw = getColor(color)(theme, colorMode);
@@ -117,7 +115,7 @@ var toneColor = (color, l) => (theme, colorMode) => {
     n *= -1;
   if (n !== 0)
     n = n - 5 * (isLighten ? 1 : -1);
-  return new import_tinycolor.TinyColor(raw)[isLighten ? "lighten" : "shade"](n).toString();
+  return (0, import_color2k.toHex)(isLighten ? (0, import_color2k.lighten)(raw, n / 100) : (0, import_color2k.mix)(raw, "#000", n / 100));
 };
 var randomColor = ({ string, colors } = {}) => {
   const fallback = randomHex();
@@ -157,21 +155,25 @@ var randomColorFromList = (str, list) => {
   return list[index];
 };
 var randomFromList = (list) => list[Math.floor(Math.random() * list.length)];
-var isLight = (color) => (theme, colorMode) => {
-  const raw = getColor(color)(theme, colorMode);
-  return new import_tinycolor.TinyColor(raw).isLight();
+var getBrightness = (color) => {
+  const [r, g, b] = (0, import_color2k.parseToRgba)(color);
+  return (r * 299 + g * 587 + b * 114) / 1e3;
 };
-var isDark = (color) => (theme, colorMode) => {
+var isTone = (color) => (theme, colorMode) => {
   const raw = getColor(color)(theme, colorMode);
-  return new import_tinycolor.TinyColor(raw).isDark();
+  const brightness = getBrightness(raw);
+  const isDark2 = brightness < 128;
+  return isDark2 ? "dark" : "light";
 };
+var isLight = (color) => (theme, colorMode) => isTone(color)(theme, colorMode) === "dark";
+var isDark = (color) => (theme, colorMode) => isTone(color)(theme, colorMode) === "light";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  brightenColor,
   darkenColor,
   getColor,
   isDark,
   isLight,
+  isTone,
   lightenColor,
   randomColor,
   shadeColor,

package/dist/color.mjs

@@ -1,16 +1,16 @@
 import {
-  brightenColor,
   darkenColor,
   getColor,
   isDark,
   isLight,
+  isTone,
   lightenColor,
   randomColor,
   shadeColor,
   tintColor,
   toneColor,
   transparentizeColor
-} from "./chunk-A6J4FUU7.mjs";
+} from "./chunk-HUEOJZVC.mjs";
 import "./chunk-SLJ4M7XC.mjs";
 import "./chunk-VYMGBE25.mjs";
 import "./chunk-BZAW2D6U.mjs";
@@ -20,11 +20,11 @@ import "./chunk-R5OUKGQ5.mjs";
 import "./chunk-FW7XS4NH.mjs";
 import "./chunk-PF7LRFIA.mjs";
 export {
-  brightenColor,
   darkenColor,
   getColor,
   isDark,
   isLight,
+  isTone,
   lightenColor,
   randomColor,
   shadeColor,

package/dist/function.mjs

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

package/dist/index.d.ts

@@ -6,9 +6,8 @@ export { DOMAttributes, MaybeRenderProp, PropGetter, RequiredPropGetter, assignR
 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 { brightenColor, darkenColor, getColor, isDark, isLight, lightenColor, randomColor, shadeColor, tintColor, toneColor, transparentizeColor } from './color.js';
+export { darkenColor, getColor, isDark, 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';
 import 'react';
-import '@ctrl/tinycolor';

package/dist/index.js

@@ -35,7 +35,6 @@ __export(src_exports, {
   ariaAttr: () => ariaAttr,
   assignAfter: () => assignAfter,
   assignRef: () => assignRef,
-  brightenColor: () => brightenColor,
   calc: () => calc,
   cast: () => cast,
   clampNumber: () => clampNumber,
@@ -94,6 +93,7 @@ __export(src_exports, {
   isSafari: () => isSafari,
   isString: () => isString,
   isTabbable: () => isTabbable,
+  isTone: () => isTone,
   isTouchEvent: () => isTouchEvent,
   isUndefined: () => isUndefined,
   isUnit: () => isUnit,
@@ -518,45 +518,43 @@ var calc = Object.assign(
 );
 
 // src/color.ts
-var import_tinycolor = require("@ctrl/tinycolor");
+var import_color2k = require("color2k");
 var getColor = (color, fallback) => (theme, colorMode) => {
   const hex = getMemoizedObject(
     theme,
     `colors.${color}`,
     color
   );
-  if (isArray(hex)) {
-    const [lightHex, darkHex] = hex;
-    const { isValid, originalInput } = new import_tinycolor.TinyColor(colorMode !== "dark" ? lightHex : darkHex);
-    return isValid ? originalInput : fallback;
-  } else {
-    const { isValid, originalInput } = new import_tinycolor.TinyColor(hex);
-    return isValid ? originalInput : fallback;
+  try {
+    if (isArray(hex)) {
+      const [lightHex, darkHex] = hex;
+      return (0, import_color2k.toHex)(String(colorMode !== "dark" ? lightHex : darkHex));
+    } else {
+      return (0, import_color2k.toHex)(String(hex));
+    }
+  } catch {
+    return fallback != null ? fallback : "#000000";
   }
 };
 var lightenColor = (color, amount) => (theme, colorMode) => {
   const raw = getColor(color)(theme, colorMode);
-  return new import_tinycolor.TinyColor(raw).lighten(amount).toRgbString();
+  return (0, import_color2k.toHex)((0, import_color2k.lighten)(raw, amount / 100));
 };
 var darkenColor = (color, amount) => (theme, colorMode) => {
   const raw = getColor(color)(theme, colorMode);
-  return new import_tinycolor.TinyColor(raw).darken(amount).toRgbString();
-};
-var brightenColor = (color, amount) => (theme, colorMode) => {
-  const raw = getColor(color)(theme, colorMode);
-  return new import_tinycolor.TinyColor(raw).brighten(amount).toRgbString();
+  return (0, import_color2k.toHex)((0, import_color2k.darken)(raw, amount / 100));
 };
 var tintColor = (color, amount) => (theme, colorMode) => {
   const raw = getColor(color)(theme, colorMode);
-  return new import_tinycolor.TinyColor(raw).tint(amount).toRgbString();
+  return (0, import_color2k.toHex)((0, import_color2k.mix)(raw, "#fff", amount));
 };
 var shadeColor = (color, amount) => (theme, colorMode) => {
   const raw = getColor(color)(theme, colorMode);
-  return new import_tinycolor.TinyColor(raw).shade(amount).toRgbString();
+  return (0, import_color2k.toHex)((0, import_color2k.mix)(raw, "#000", amount / 100));
 };
 var transparentizeColor = (color, alpha) => (theme, colorMode) => {
   const raw = getColor(color)(theme, colorMode);
-  return new import_tinycolor.TinyColor(raw).setAlpha(alpha).toRgbString();
+  return (0, import_color2k.transparentize)(raw, 1 - alpha);
 };
 var toneColor = (color, l) => (theme, colorMode) => {
   const raw = getColor(color)(theme, colorMode);
@@ -568,7 +566,7 @@ var toneColor = (color, l) => (theme, colorMode) => {
     n *= -1;
   if (n !== 0)
     n = n - 5 * (isLighten ? 1 : -1);
-  return new import_tinycolor.TinyColor(raw)[isLighten ? "lighten" : "shade"](n).toString();
+  return (0, import_color2k.toHex)(isLighten ? (0, import_color2k.lighten)(raw, n / 100) : (0, import_color2k.mix)(raw, "#000", n / 100));
 };
 var randomColor = ({ string, colors } = {}) => {
   const fallback = randomHex();
@@ -608,14 +606,18 @@ var randomColorFromList = (str, list) => {
   return list[index];
 };
 var randomFromList = (list) => list[Math.floor(Math.random() * list.length)];
-var isLight = (color) => (theme, colorMode) => {
-  const raw = getColor(color)(theme, colorMode);
-  return new import_tinycolor.TinyColor(raw).isLight();
+var getBrightness = (color) => {
+  const [r, g, b] = (0, import_color2k.parseToRgba)(color);
+  return (r * 299 + g * 587 + b * 114) / 1e3;
 };
-var isDark = (color) => (theme, colorMode) => {
+var isTone = (color) => (theme, colorMode) => {
   const raw = getColor(color)(theme, colorMode);
-  return new import_tinycolor.TinyColor(raw).isDark();
+  const brightness = getBrightness(raw);
+  const isDark2 = brightness < 128;
+  return isDark2 ? "dark" : "light";
 };
+var isLight = (color) => (theme, colorMode) => isTone(color)(theme, colorMode) === "dark";
+var isDark = (color) => (theme, colorMode) => isTone(color)(theme, colorMode) === "light";
 
 // src/array.ts
 var filterEmpty = (array) => array.filter((value) => value != null);
@@ -697,7 +699,6 @@ var addPointerEvent = (target, type, cb, options) => addDomEvent(target, type, w
   ariaAttr,
   assignAfter,
   assignRef,
-  brightenColor,
   calc,
   cast,
   clampNumber,
@@ -756,6 +757,7 @@ var addPointerEvent = (target, type, cb, options) => addDomEvent(target, type, w
   isSafari,
   isString,
   isTabbable,
+  isTone,
   isTouchEvent,
   isUndefined,
   isUnit,

package/dist/index.mjs

@@ -1,7 +1,6 @@
 import {
   assignAfter,
   assignRef,
-  brightenColor,
   createContext,
   cx,
   darkenColor,
@@ -19,6 +18,7 @@ import {
   isDark,
   isLight,
   isRefObject,
+  isTone,
   isValidElement,
   keysFormObject,
   lightenColor,
@@ -45,7 +45,7 @@ import {
   useSafeLayoutEffect,
   useUnmountEffect,
   useUpdateEffect
-} from "./chunk-A6J4FUU7.mjs";
+} from "./chunk-HUEOJZVC.mjs";
 import "./chunk-SLJ4M7XC.mjs";
 import {
   clampNumber,
@@ -122,7 +122,6 @@ export {
   ariaAttr,
   assignAfter,
   assignRef,
-  brightenColor,
   calc,
   cast,
   clampNumber,
@@ -181,6 +180,7 @@ export {
   isSafari,
   isString,
   isTabbable,
+  isTone,
   isTouchEvent,
   isUndefined,
   isUnit,

package/dist/object.mjs

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

package/dist/react.mjs

@@ -16,7 +16,7 @@ import {
   useSafeLayoutEffect,
   useUnmountEffect,
   useUpdateEffect
-} from "./chunk-A6J4FUU7.mjs";
+} from "./chunk-HUEOJZVC.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.1.0",
+  "version": "0.1.1",
   "description": "Yamada UI utils",
   "keywords": [
     "utils",
@@ -28,11 +28,11 @@
     "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
   },
   "dependencies": {
-    "@ctrl/tinycolor": "^3.4.1"
+    "color2k": "^2.0.2"
   },
   "devDependencies": {
-    "react": "^18.0.0",
-    "clean-package": "2.2.0"
+    "clean-package": "2.2.0",
+    "react": "^18.0.0"
   },
   "peerDependencies": {
     "react": ">=18"