@yamada-ui/utils - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4-dev-20240119043710

dist/calc.d.ts

@@ -8,2 +8,3 @@ type Operand = string | number;
     negate: () => Calc;
+    toString: () => string;
 };
@@ -10,0 +11,0 @@ declare const calc: ((x: Operand) => Calc) & {

dist/calc.js

@@ -42,3 +42,4 @@ "use strict";
     divide: (...args) => calc(divide(x, ...args)),
-    negate: () => calc(negate(x))
+    negate: () => calc(negate(x)),
+    toString: () => x.toString()
   }),
@@ -45,0 +46,0 @@ {

dist/color.d.ts

 import { Dict } from './index.types.js';
 
 type ColorMode = "light" | "dark";
+type ColorFormat = "hex" | "hexa" | "rgba" | "rgb" | "hsl" | "hsla";
 declare const hues: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
@@ -22,3 +23,13 @@ declare const isGray: (colorScheme: string) => boolean;
 declare const isDark: (color: string) => (theme?: Dict, colorMode?: ColorMode) => boolean;
+declare const convertColor: (color: string, fallback?: string) => (format: ColorFormat) => string | undefined;
+declare const calcFormat: (color: string) => ColorFormat;
+declare const getAlpha: (color: string) => number;
+declare const alphaToHex: (a: number) => string;
+declare const parseToRgba: (color: string, fallback?: string) => [number, number, number, number] | undefined;
+declare const parseToHsla: (color: string, fallback?: string) => [number, number, number, number] | undefined;
+declare const parseToHsv: (color: string, fallback?: string) => [number, number, number, number];
+declare const rgbaTo: ([r, g, b, a]: [number, number, number, number], fallback?: string) => (format?: ColorFormat) => string | undefined;
+declare const hslaTo: ([h, s, l, a]: [number, number, number, number], fallback?: string) => (format?: ColorFormat) => string | undefined;
+declare const hsvTo: ([h, s, v, a]: [number, number, number, number?], fallback?: string) => (format?: ColorFormat) => string | undefined;
 
-export { darkenColor, getColor, hues, isAccessible, isDark, isGray, isLight, isTone, lightenColor, randomColor, shadeColor, tintColor, toneColor, toneColors, transparentizeColor };
+export { type ColorFormat, alphaToHex, calcFormat, convertColor, darkenColor, getAlpha, getColor, hslaTo, hsvTo, hues, isAccessible, isDark, isGray, isLight, isTone, lightenColor, parseToHsla, parseToHsv, parseToRgba, randomColor, rgbaTo, shadeColor, tintColor, toneColor, toneColors, transparentizeColor };

dist/color.js

 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -18,2 +20,10 @@ var __export = (target, all) => {
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
@@ -24,4 +34,10 @@
 __export(color_exports, {
+  alphaToHex: () => alphaToHex,
+  calcFormat: () => calcFormat,
+  convertColor: () => convertColor,
   darkenColor: () => darkenColor,
+  getAlpha: () => getAlpha,
   getColor: () => getColor,
+  hslaTo: () => hslaTo,
+  hsvTo: () => hsvTo,
   hues: () => hues,
@@ -34,3 +50,7 @@ isAccessible: () => isAccessible,
   lightenColor: () => lightenColor,
+  parseToHsla: () => parseToHsla2,
+  parseToHsv: () => parseToHsv,
+  parseToRgba: () => parseToRgba2,
   randomColor: () => randomColor,
+  rgbaTo: () => rgbaTo,
   shadeColor: () => shadeColor,
@@ -43,5 +63,6 @@ tintColor: () => tintColor,
 module.exports = __toCommonJS(color_exports);
-var import_color2k = require("color2k");
+var c = __toESM(require("color2k"));
 
 // src/assertion.ts
+var isNumber = (value) => typeof value === "number";
 var isArray = (value) => Array.isArray(value);
@@ -104,5 +125,5 @@
     if (isArray(hex)) {
-      return (0, import_color2k.toHex)(String(colorMode !== "dark" ? hex[0] : hex[1]));
+      return c.toHex(String(colorMode !== "dark" ? hex[0] : hex[1]));
     } else {
-      return (0, import_color2k.toHex)(String(hex));
+      return c.toHex(String(hex));
     }
@@ -115,19 +136,19 @@ } catch {
   const raw = getColor(color, color)(theme, colorMode);
-  return (0, import_color2k.toHex)((0, import_color2k.lighten)(raw, amount / 100));
+  return c.toHex(c.lighten(raw, amount / 100));
 };
 var darkenColor = (color, amount) => (theme, colorMode) => {
   const raw = getColor(color, color)(theme, colorMode);
-  return (0, import_color2k.toHex)((0, import_color2k.darken)(raw, amount / 100));
+  return c.toHex(c.darken(raw, amount / 100));
 };
 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 / 100));
+  return c.toHex(c.mix(raw, "#fff", amount / 100));
 };
 var shadeColor = (color, amount) => (theme, colorMode) => {
   const raw = getColor(color, color)(theme, colorMode);
-  return (0, import_color2k.toHex)((0, import_color2k.mix)(raw, "#000", amount / 100));
+  return c.toHex(c.mix(raw, "#000", amount / 100));
 };
 var transparentizeColor = (color, alpha) => (theme, colorMode) => {
   const raw = getColor(color, color)(theme, colorMode);
-  return (0, import_color2k.transparentize)(raw, 1 - alpha);
+  return c.transparentize(raw, 1 - alpha);
 };
@@ -142,3 +163,3 @@ var toneColor = (color, hue, lCoef = 0.94, dCoef = 0.86) => (theme, colorMode) => {
   const amount = (500 - hue) * 1e-3 * coef;
-  return (0, import_color2k.toHex)((0, import_color2k.lighten)(raw, amount));
+  return c.toHex(c.lighten(raw, amount));
 };
@@ -150,3 +171,3 @@ var toneColors = (color, lCoef = 0.94, dCoef = 0.86) => {
     const amount = (500 - hue) * 1e-3 * coef;
-    colors[hue] = (0, import_color2k.toHex)((0, import_color2k.lighten)(color, amount));
+    colors[hue] = c.toHex(c.lighten(color, amount));
   });
@@ -197,3 +218,3 @@ return colors;
 var getBrightness = (color) => {
-  const [r, g, b] = (0, import_color2k.parseToRgba)(color);
+  const [r, g, b] = c.parseToRgba(color);
   return (r * 299 + g * 587 + b * 114) / 1e3;
@@ -209,6 +230,138 @@ };
 var isDark = (color) => (theme, colorMode) => isTone(color)(theme, colorMode) === "light";
+var convertColor = (color, fallback) => (format) => {
+  try {
+    const isAlpha = format.endsWith("a");
+    if (format.startsWith("hex")) {
+      let hexa = c.toHex(color);
+      if (isAlpha) {
+        if (hexa.length === 7)
+          hexa += "ff";
+      } else {
+        hexa = hexa.replace(/(?<=^#([0-9a-fA-F]{6}))[0-9a-fA-F]{2}$/, "");
+      }
+      return hexa;
+    } else if (format.startsWith("hsl")) {
+      let hsla2 = c.toHsla(color);
+      if (!isAlpha) {
+        hsla2 = hsla2.replace(/hsla/, "hsl");
+        hsla2 = hsla2.replace(/,\s*\d+(\.\d+)?\)$/, ")");
+      }
+      return hsla2;
+    } else {
+      let rgba2 = c.toRgba(color);
+      if (!isAlpha) {
+        rgba2 = rgba2.replace(/rgba/, "rgb");
+        rgba2 = rgba2.replace(/,\s*\d+(\.\d+)?\)$/, ")");
+      }
+      return rgba2;
+    }
+  } catch {
+    if (fallback)
+      return convertColor(fallback)(format);
+  }
+};
+var calcFormat = (color) => {
+  if (color.startsWith("hsl")) {
+    return color.startsWith("hsla") ? "hsla" : "hsl";
+  } else if (color.startsWith("rgb")) {
+    return color.startsWith("rgba") ? "rgba" : "rgb";
+  } else {
+    return color.length === 9 ? "hexa" : "hex";
+  }
+};
+var getAlpha = (color) => c.parseToRgba(color)[3];
+var alphaToHex = (a) => {
+  if (0 > a)
+    a = 0;
+  if (1 < a)
+    a = 1;
+  return Math.round(a * 255).toString(16).padStart(2, "0");
+};
+var parseToRgba2 = (color, fallback) => {
+  try {
+    return c.parseToRgba(color);
+  } catch {
+    if (fallback)
+      return c.parseToRgba(fallback);
+  }
+};
+var parseToHsla2 = (color, fallback) => {
+  try {
+    return c.parseToHsla(color);
+  } catch {
+    if (fallback)
+      return c.parseToHsla(fallback);
+  }
+};
+var parseToHsv = (color, fallback) => {
+  var _a;
+  let [r, g, b, a] = (_a = parseToRgba2(color, fallback)) != null ? _a : [255, 255, 255, 1];
+  r = r / 255;
+  g = g / 255;
+  b = b / 255;
+  const [min, max] = [Math.min(r, g, b), Math.max(r, g, b)];
+  const delta = max - min;
+  let [h, v, s] = [0, max, max == 0 ? 0 : delta / max];
+  switch (min) {
+    case max:
+      h = 0;
+      break;
+    case r:
+      h = 60 * ((b - g) / delta) + 180;
+      break;
+    case g:
+      h = 60 * ((r - b) / delta) + 300;
+      break;
+    case b:
+      h = 60 * ((g - r) / delta) + 60;
+      break;
+  }
+  return [h, s, v, a];
+};
+var rgbaTo = ([r, g, b, a], fallback) => (format = "hex") => convertColor(c.rgba(r, g, b, a), fallback)(format);
+var hslaTo = ([h, s, l, a], fallback) => (format = "hex") => convertColor(c.hsla(h, s, l, a), fallback)(format);
+var hsvTo = ([h, s, v, a], fallback) => (format = "hex") => {
+  h = h / 60;
+  let rgb = [v, v, v];
+  let i = Math.floor(h);
+  let f = h - i;
+  let p = v * (1 - s);
+  let q = v * (1 - s * f);
+  let t = v * (1 - s * (1 - f));
+  switch (i) {
+    case 0:
+    case 6:
+      rgb = [v, t, p];
+      break;
+    case 1:
+      rgb = [q, v, p];
+      break;
+    case 2:
+      rgb = [p, v, t];
+      break;
+    case 3:
+      rgb = [p, q, v];
+      break;
+    case 4:
+      rgb = [t, p, v];
+      break;
+    case 5:
+      rgb = [v, p, q];
+      break;
+  }
+  let color = `rgb(${rgb.map((v2) => Math.round(v2 * 255)).join(", ")})`;
+  if (isNumber(a))
+    color = color.replace(/\)$/, `, ${a})`);
+  return convertColor(color, fallback)(format);
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  alphaToHex,
+  calcFormat,
+  convertColor,
   darkenColor,
+  getAlpha,
   getColor,
+  hslaTo,
+  hsvTo,
   hues,
@@ -221,3 +374,7 @@ isAccessible,
   lightenColor,
+  parseToHsla,
+  parseToHsv,
+  parseToRgba,
   randomColor,
+  rgbaTo,
   shadeColor,
@@ -224,0 +381,0 @@ tintColor,

dist/index.d.ts

@@ -9,3 +9,3 @@ export { Dict, Length, Merge, Path, Primitive, StringLiteral, Union } from './index.types.js';
 export { Operand, calc } from './calc.js';
-export { darkenColor, getColor, hues, isAccessible, isDark, isGray, isLight, isTone, lightenColor, randomColor, shadeColor, tintColor, toneColor, toneColors, transparentizeColor } from './color.js';
+export { ColorFormat, alphaToHex, calcFormat, convertColor, darkenColor, getAlpha, getColor, hslaTo, hsvTo, hues, isAccessible, isDark, isGray, isLight, isTone, lightenColor, parseToHsla, parseToHsv, parseToRgba, randomColor, rgbaTo, shadeColor, tintColor, toneColor, toneColors, transparentizeColor } from './color.js';
 export { filterEmpty } from './array.js';
@@ -12,0 +12,0 @@ export { clampNumber, countDecimal, percentToValue, roundNumberToStep, toPrecision, valueToPercent } from './number.js';

dist/index.js

@@ -35,2 +35,3 @@ "use strict";
   addPointerEvent: () => addPointerEvent,
+  alphaToHex: () => alphaToHex,
   ariaAttr: () => ariaAttr,
@@ -40,4 +41,6 @@ assignAfter: () => assignAfter,
   calc: () => calc,
+  calcFormat: () => calcFormat,
   cast: () => cast,
   clampNumber: () => clampNumber,
+  convertColor: () => convertColor,
   countDecimal: () => countDecimal,
@@ -59,2 +62,3 @@ createContext: () => createContext2,
   getAllFocusable: () => getAllFocusable,
+  getAlpha: () => getAlpha,
   getColor: () => getColor,
@@ -74,2 +78,4 @@ getEventPoint: () => getEventPoint,
   hasTabIndex: () => hasTabIndex,
+  hslaTo: () => hslaTo,
+  hsvTo: () => hsvTo,
   hues: () => hues,
@@ -120,2 +126,5 @@ includesChildren: () => includesChildren,
   omitObject: () => omitObject,
+  parseToHsla: () => parseToHsla2,
+  parseToHsv: () => parseToHsv,
+  parseToRgba: () => parseToRgba2,
   percentToValue: () => percentToValue,
@@ -129,2 +138,3 @@ pickChildren: () => pickChildren,
   replaceObject: () => replaceObject,
+  rgbaTo: () => rgbaTo,
   roundNumberToStep: () => roundNumberToStep,
@@ -621,3 +631,4 @@ runIfFunc: () => runIfFunc,
     divide: (...args) => calc(divide(x, ...args)),
-    negate: () => calc(negate(x))
+    negate: () => calc(negate(x)),
+    toString: () => x.toString()
   }),
@@ -634,3 +645,3 @@ {
 // src/color.ts
-var import_color2k = require("color2k");
+var c = __toESM(require("color2k"));
 var hues = [
@@ -662,5 +673,5 @@ 50,
     if (isArray(hex)) {
-      return (0, import_color2k.toHex)(String(colorMode !== "dark" ? hex[0] : hex[1]));
+      return c.toHex(String(colorMode !== "dark" ? hex[0] : hex[1]));
     } else {
-      return (0, import_color2k.toHex)(String(hex));
+      return c.toHex(String(hex));
     }
@@ -673,19 +684,19 @@ } catch {
   const raw = getColor(color, color)(theme, colorMode);
-  return (0, import_color2k.toHex)((0, import_color2k.lighten)(raw, amount / 100));
+  return c.toHex(c.lighten(raw, amount / 100));
 };
 var darkenColor = (color, amount) => (theme, colorMode) => {
   const raw = getColor(color, color)(theme, colorMode);
-  return (0, import_color2k.toHex)((0, import_color2k.darken)(raw, amount / 100));
+  return c.toHex(c.darken(raw, amount / 100));
 };
 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 / 100));
+  return c.toHex(c.mix(raw, "#fff", amount / 100));
 };
 var shadeColor = (color, amount) => (theme, colorMode) => {
   const raw = getColor(color, color)(theme, colorMode);
-  return (0, import_color2k.toHex)((0, import_color2k.mix)(raw, "#000", amount / 100));
+  return c.toHex(c.mix(raw, "#000", amount / 100));
 };
 var transparentizeColor = (color, alpha) => (theme, colorMode) => {
   const raw = getColor(color, color)(theme, colorMode);
-  return (0, import_color2k.transparentize)(raw, 1 - alpha);
+  return c.transparentize(raw, 1 - alpha);
 };
@@ -700,3 +711,3 @@ var toneColor = (color, hue, lCoef = 0.94, dCoef = 0.86) => (theme, colorMode) => {
   const amount = (500 - hue) * 1e-3 * coef;
-  return (0, import_color2k.toHex)((0, import_color2k.lighten)(raw, amount));
+  return c.toHex(c.lighten(raw, amount));
 };
@@ -708,3 +719,3 @@ var toneColors = (color, lCoef = 0.94, dCoef = 0.86) => {
     const amount = (500 - hue) * 1e-3 * coef;
-    colors[hue] = (0, import_color2k.toHex)((0, import_color2k.lighten)(color, amount));
+    colors[hue] = c.toHex(c.lighten(color, amount));
   });
@@ -755,3 +766,3 @@ return colors;
 var getBrightness = (color) => {
-  const [r, g, b] = (0, import_color2k.parseToRgba)(color);
+  const [r, g, b] = c.parseToRgba(color);
   return (r * 299 + g * 587 + b * 114) / 1e3;
@@ -767,2 +778,128 @@ };
 var isDark = (color) => (theme, colorMode) => isTone(color)(theme, colorMode) === "light";
+var convertColor = (color, fallback) => (format) => {
+  try {
+    const isAlpha = format.endsWith("a");
+    if (format.startsWith("hex")) {
+      let hexa = c.toHex(color);
+      if (isAlpha) {
+        if (hexa.length === 7)
+          hexa += "ff";
+      } else {
+        hexa = hexa.replace(/(?<=^#([0-9a-fA-F]{6}))[0-9a-fA-F]{2}$/, "");
+      }
+      return hexa;
+    } else if (format.startsWith("hsl")) {
+      let hsla2 = c.toHsla(color);
+      if (!isAlpha) {
+        hsla2 = hsla2.replace(/hsla/, "hsl");
+        hsla2 = hsla2.replace(/,\s*\d+(\.\d+)?\)$/, ")");
+      }
+      return hsla2;
+    } else {
+      let rgba2 = c.toRgba(color);
+      if (!isAlpha) {
+        rgba2 = rgba2.replace(/rgba/, "rgb");
+        rgba2 = rgba2.replace(/,\s*\d+(\.\d+)?\)$/, ")");
+      }
+      return rgba2;
+    }
+  } catch {
+    if (fallback)
+      return convertColor(fallback)(format);
+  }
+};
+var calcFormat = (color) => {
+  if (color.startsWith("hsl")) {
+    return color.startsWith("hsla") ? "hsla" : "hsl";
+  } else if (color.startsWith("rgb")) {
+    return color.startsWith("rgba") ? "rgba" : "rgb";
+  } else {
+    return color.length === 9 ? "hexa" : "hex";
+  }
+};
+var getAlpha = (color) => c.parseToRgba(color)[3];
+var alphaToHex = (a) => {
+  if (0 > a)
+    a = 0;
+  if (1 < a)
+    a = 1;
+  return Math.round(a * 255).toString(16).padStart(2, "0");
+};
+var parseToRgba2 = (color, fallback) => {
+  try {
+    return c.parseToRgba(color);
+  } catch {
+    if (fallback)
+      return c.parseToRgba(fallback);
+  }
+};
+var parseToHsla2 = (color, fallback) => {
+  try {
+    return c.parseToHsla(color);
+  } catch {
+    if (fallback)
+      return c.parseToHsla(fallback);
+  }
+};
+var parseToHsv = (color, fallback) => {
+  var _a;
+  let [r, g, b, a] = (_a = parseToRgba2(color, fallback)) != null ? _a : [255, 255, 255, 1];
+  r = r / 255;
+  g = g / 255;
+  b = b / 255;
+  const [min, max] = [Math.min(r, g, b), Math.max(r, g, b)];
+  const delta = max - min;
+  let [h, v, s] = [0, max, max == 0 ? 0 : delta / max];
+  switch (min) {
+    case max:
+      h = 0;
+      break;
+    case r:
+      h = 60 * ((b - g) / delta) + 180;
+      break;
+    case g:
+      h = 60 * ((r - b) / delta) + 300;
+      break;
+    case b:
+      h = 60 * ((g - r) / delta) + 60;
+      break;
+  }
+  return [h, s, v, a];
+};
+var rgbaTo = ([r, g, b, a], fallback) => (format = "hex") => convertColor(c.rgba(r, g, b, a), fallback)(format);
+var hslaTo = ([h, s, l, a], fallback) => (format = "hex") => convertColor(c.hsla(h, s, l, a), fallback)(format);
+var hsvTo = ([h, s, v, a], fallback) => (format = "hex") => {
+  h = h / 60;
+  let rgb = [v, v, v];
+  let i = Math.floor(h);
+  let f = h - i;
+  let p = v * (1 - s);
+  let q = v * (1 - s * f);
+  let t = v * (1 - s * (1 - f));
+  switch (i) {
+    case 0:
+    case 6:
+      rgb = [v, t, p];
+      break;
+    case 1:
+      rgb = [q, v, p];
+      break;
+    case 2:
+      rgb = [p, v, t];
+      break;
+    case 3:
+      rgb = [p, q, v];
+      break;
+    case 4:
+      rgb = [t, p, v];
+      break;
+    case 5:
+      rgb = [v, p, q];
+      break;
+  }
+  let color = `rgb(${rgb.map((v2) => Math.round(v2 * 255)).join(", ")})`;
+  if (isNumber(a))
+    color = color.replace(/\)$/, `, ${a})`);
+  return convertColor(color, fallback)(format);
+};
 
@@ -849,2 +986,3 @@ // src/array.ts
   addPointerEvent,
+  alphaToHex,
   ariaAttr,
@@ -854,4 +992,6 @@ assignAfter,
   calc,
+  calcFormat,
   cast,
   clampNumber,
+  convertColor,
   countDecimal,
@@ -873,2 +1013,3 @@ createContext,
   getAllFocusable,
+  getAlpha,
   getColor,
@@ -888,2 +1029,4 @@ getEventPoint,
   hasTabIndex,
+  hslaTo,
+  hsvTo,
   hues,
@@ -934,2 +1077,5 @@ includesChildren,
   omitObject,
+  parseToHsla,
+  parseToHsv,
+  parseToRgba,
   percentToValue,
@@ -943,2 +1089,3 @@ pickChildren,
   replaceObject,
+  rgbaTo,
   roundNumberToStep,
@@ -945,0 +1092,0 @@ runIfFunc,

package.json

 {
   "name": "@yamada-ui/utils",
-  "version": "1.0.3",
+  "version": "1.0.4-dev-20240119043710",
   "description": "Yamada UI utils",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

362445

increased by11%

Lines of code

4347

increased by12.67%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes