@zag-js/color-utils 1.41.1 → 2.0.0-next.0

package/dist/oklab-math.mjs

@@ -0,0 +1,133 @@
+import "./chunk-QZ7TP4HQ.mjs";
+
+// src/oklab-math.ts
+function srgbChannelToLinear(c) {
+  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+}
+function linearChannelToSrgb(c) {
+  return c <= 31308e-7 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055;
+}
+function srgbToLinearRgb(r255, g255, b255) {
+  return {
+    r: srgbChannelToLinear(r255 / 255),
+    g: srgbChannelToLinear(g255 / 255),
+    b: srgbChannelToLinear(b255 / 255)
+  };
+}
+function linearRgbToSrgb({ r, g, b }) {
+  return {
+    r: Math.round(clamp01(linearChannelToSrgb(r)) * 255),
+    g: Math.round(clamp01(linearChannelToSrgb(g)) * 255),
+    b: Math.round(clamp01(linearChannelToSrgb(b)) * 255)
+  };
+}
+function clamp01(x) {
+  return x < 0 ? 0 : x > 1 ? 1 : x;
+}
+function linearRgbToOklab({ r, g, b }) {
+  const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
+  const m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
+  const s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
+  const l_ = Math.cbrt(l);
+  const m_ = Math.cbrt(m);
+  const s_ = Math.cbrt(s);
+  return {
+    L: 0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_,
+    a: 1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_,
+    b: 0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_
+  };
+}
+function oklabToLinearRgb(L, a, b) {
+  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+  return {
+    r: 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    g: -1.2684380046 * l + 2.6097574011 * m - 0.341319396 * s,
+    b: -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  };
+}
+function oklchToOklab(L, C, Hdeg) {
+  const h = Hdeg * Math.PI / 180;
+  return {
+    L,
+    a: C * Math.cos(h),
+    b: C * Math.sin(h)
+  };
+}
+function oklabToOklch(L, a, b) {
+  const C = Math.sqrt(a * a + b * b);
+  let H = Math.atan2(b, a) * 180 / Math.PI;
+  if (H < 0) H += 360;
+  return { L, C, H };
+}
+function isLinearRgbInSrgbGamut({ r, g, b }, eps = 1e-3) {
+  return r >= -eps && r <= 1 + eps && g >= -eps && g <= 1 + eps && b >= -eps && b <= 1 + eps;
+}
+function linearDisplayP3ToLinearSrgb(r, g, b) {
+  const x = 0.4865709486482162 * r + 0.26566769316909306 * g + 0.1982172852343625 * b;
+  const y = 0.2289745640697488 * r + 0.6917385218365064 * g + 0.079286914093745 * b;
+  const z = 0 * r + 0.04511338185890264 * g + 1.043944368900976 * b;
+  return {
+    r: 3.2404541621141054 * x - 1.5371385940306088 * y - 0.4985314095560158 * z,
+    g: -0.9692660305051868 * x + 1.8760108454466942 * y + 0.0415560175303498 * z,
+    b: 0.0556434309591147 * x - 0.2039769598730574 * y + 1.0572251882231791 * z
+  };
+}
+function hsvToRgb(h, s, v) {
+  const c = v * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = v - c;
+  let r1 = 0, g1 = 0, b1 = 0;
+  if (h < 60) {
+    r1 = c;
+    g1 = x;
+    b1 = 0;
+  } else if (h < 120) {
+    r1 = x;
+    g1 = c;
+    b1 = 0;
+  } else if (h < 180) {
+    r1 = 0;
+    g1 = c;
+    b1 = x;
+  } else if (h < 240) {
+    r1 = 0;
+    g1 = x;
+    b1 = c;
+  } else if (h < 300) {
+    r1 = x;
+    g1 = 0;
+    b1 = c;
+  } else {
+    r1 = c;
+    g1 = 0;
+    b1 = x;
+  }
+  return [r1 + m, g1 + m, b1 + m];
+}
+function isDisplayP3HsvInSrgbGamut(h, s, v, eps = 1e-3) {
+  const [r, g, b] = hsvToRgb(h, s, v);
+  const lr = srgbChannelToLinear(r);
+  const lg = srgbChannelToLinear(g);
+  const lb = srgbChannelToLinear(b);
+  const srgb = linearDisplayP3ToLinearSrgb(lr, lg, lb);
+  return isLinearRgbInSrgbGamut(srgb, eps);
+}
+export {
+  hsvToRgb,
+  isDisplayP3HsvInSrgbGamut,
+  isLinearRgbInSrgbGamut,
+  linearChannelToSrgb,
+  linearDisplayP3ToLinearSrgb,
+  linearRgbToOklab,
+  linearRgbToSrgb,
+  oklabToLinearRgb,
+  oklabToOklch,
+  oklchToOklab,
+  srgbChannelToLinear,
+  srgbToLinearRgb
+};

package/dist/parse-color.js

@@ -26,13 +26,14 @@ __export(parse_color_exports, {
 module.exports = __toCommonJS(parse_color_exports);
 var import_hsb_color = require("./hsb-color.js");
 var import_hsl_color = require("./hsl-color.js");
+var import_oklab_color = require("./oklab-color.js");
 var import_native_color = require("./native-color.js");
 var import_rgb_color = require("./rgb-color.js");
 var parseColor = (value) => {
   if (import_native_color.nativeColorMap.has(value)) {
     return parseColor(import_native_color.nativeColorMap.get(value));
   }
-  const result = import_rgb_color.RGBColor.parse(value) || import_hsb_color.HSBColor.parse(value) || import_hsl_color.HSLColor.parse(value);
+  const result = import_oklab_color.OklabColor.parse(value) || import_oklab_color.OklchColor.parse(value) || import_rgb_color.RGBColor.parse(value) || import_hsb_color.HSBColor.parse(value) || import_hsl_color.HSLColor.parse(value);
   if (!result) {
     const error = new Error("Invalid color value: " + value);
     Error.captureStackTrace?.(error, parseColor);

package/dist/parse-color.mjs

@@ -3,13 +3,14 @@ import "./chunk-QZ7TP4HQ.mjs";
 // src/parse-color.ts
 import { HSBColor } from "./hsb-color.mjs";
 import { HSLColor } from "./hsl-color.mjs";
+import { OklabColor, OklchColor } from "./oklab-color.mjs";
 import { nativeColorMap } from "./native-color.mjs";
 import { RGBColor } from "./rgb-color.mjs";
 var parseColor = (value) => {
   if (nativeColorMap.has(value)) {
     return parseColor(nativeColorMap.get(value));
   }
-  const result = RGBColor.parse(value) || HSBColor.parse(value) || HSLColor.parse(value);
+  const result = OklabColor.parse(value) || OklchColor.parse(value) || RGBColor.parse(value) || HSBColor.parse(value) || HSLColor.parse(value);
   if (!result) {
     const error = new Error("Invalid color value: " + value);
     Error.captureStackTrace?.(error, parseColor);

package/dist/rgb-color.js

@@ -29,6 +29,8 @@ var import_utils = require("@zag-js/utils");
 var import_color = require("./color.js");
 var import_hsb_color = require("./hsb-color.js");
 var import_hsl_color = require("./hsl-color.js");
+var import_oklab_math = require("./oklab-math.js");
+var import_oklab_color = require("./oklab-color.js");
 var HEX_COLOR_REGEX = /^#[\da-f]+$/i;
 var RGB_COLOR_REGEX = /^rgba?\((.*)\)$/;
 var HEX_STARTING_REGEX = /[^#]/gi;
@@ -82,6 +84,13 @@ var _RGBColor = class _RGBColor extends import_color.Color {
         return this.toHSB();
       case "hsla":
         return this.toHSL();
+      case "oklab": {
+        const lin = (0, import_oklab_math.srgbToLinearRgb)(this.red, this.green, this.blue);
+        const { L, a, b } = (0, import_oklab_math.linearRgbToOklab)(lin);
+        return new import_oklab_color.OklabColor(L, a, b, (0, import_utils.toFixedNumber)(this.alpha, 4));
+      }
+      case "oklch":
+        return this.toFormat("oklab").toFormat("oklch");
       default:
         throw new Error("Unsupported color conversion: rgb -> " + format);
     }

package/dist/rgb-color.mjs

@@ -7,6 +7,8 @@ import { clampValue, toFixedNumber } from "@zag-js/utils";
 import { Color } from "./color.mjs";
 import { HSBColor } from "./hsb-color.mjs";
 import { HSLColor } from "./hsl-color.mjs";
+import { linearRgbToOklab, srgbToLinearRgb } from "./oklab-math.mjs";
+import { OklabColor } from "./oklab-color.mjs";
 var HEX_COLOR_REGEX = /^#[\da-f]+$/i;
 var RGB_COLOR_REGEX = /^rgba?\((.*)\)$/;
 var HEX_STARTING_REGEX = /[^#]/gi;
@@ -60,6 +62,13 @@ var _RGBColor = class _RGBColor extends Color {
         return this.toHSB();
       case "hsla":
         return this.toHSL();
+      case "oklab": {
+        const lin = srgbToLinearRgb(this.red, this.green, this.blue);
+        const { L, a, b } = linearRgbToOklab(lin);
+        return new OklabColor(L, a, b, toFixedNumber(this.alpha, 4));
+      }
+      case "oklch":
+        return this.toFormat("oklab").toFormat("oklch");
       default:
         throw new Error("Unsupported color conversion: rgb -> " + format);
     }

package/dist/types.d.mts

@@ -1,7 +1,7 @@
 type ColorHexFormat = "hex" | "hexa";
-type ColorFormat = "rgba" | "hsla" | "hsba";
+type ColorFormat = "rgba" | "hsla" | "hsba" | "oklab" | "oklch";
 type ColorStringFormat = ColorHexFormat | ColorFormat | "rgb" | "hsl" | "hsb" | "css";
-type ColorChannel = "hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha";
+type ColorChannel = "hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "a" | "b" | "chroma" | "alpha";
 interface Color2DAxes {
     xChannel: ColorChannel;
     yChannel: ColorChannel;

package/dist/types.d.ts

@@ -1,7 +1,7 @@
 type ColorHexFormat = "hex" | "hexa";
-type ColorFormat = "rgba" | "hsla" | "hsba";
+type ColorFormat = "rgba" | "hsla" | "hsba" | "oklab" | "oklch";
 type ColorStringFormat = ColorHexFormat | ColorFormat | "rgb" | "hsl" | "hsb" | "css";
-type ColorChannel = "hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha";
+type ColorChannel = "hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "a" | "b" | "chroma" | "alpha";
 interface Color2DAxes {
     xChannel: ColorChannel;
     yChannel: ColorChannel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/color-utils",
-  "version": "1.41.1",
+  "version": "2.0.0-next.0",
   "description": "Color utilities for zag.js",
   "keywords": [
     "js",
@@ -24,7 +24,7 @@
   },
   "clean-package": "../../../clean-package.config.json",
   "dependencies": {
-    "@zag-js/utils": "1.41.1"
+    "@zag-js/utils": "2.0.0-next.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"