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

package/dist/oklab-color.js

@@ -0,0 +1,396 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod2) => __copyProps(__defProp({}, "__esModule", { value: true }), mod2);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/oklab-color.ts
+var oklab_color_exports = {};
+__export(oklab_color_exports, {
+  OklabColor: () => OklabColor,
+  OklchColor: () => OklchColor,
+  parseOklabParams: () => parseOklabParams,
+  parseOklchParams: () => parseOklchParams
+});
+module.exports = __toCommonJS(oklab_color_exports);
+var import_utils = require("@zag-js/utils");
+var import_color = require("./color.js");
+var import_hsb_color = require("./hsb-color.js");
+var import_rgb_color = require("./rgb-color.js");
+var import_oklab_math = require("./oklab-math.js");
+function oklabToHsb(L, a, b, alpha) {
+  const lin = (0, import_oklab_math.oklabToLinearRgb)(L, a, b);
+  return import_hsb_color.HSBColor.fromSrgbFloat(
+    (0, import_oklab_math.linearChannelToSrgb)(lin.r),
+    (0, import_oklab_math.linearChannelToSrgb)(lin.g),
+    (0, import_oklab_math.linearChannelToSrgb)(lin.b),
+    alpha
+  );
+}
+var OKLAB_HEAD = /^oklab\(\s*/i;
+function parseCssNumber(token) {
+  const t = token.trim().toLowerCase();
+  if (t === "none") return void 0;
+  if (t.endsWith("%")) return Number.parseFloat(t) / 100;
+  const n = Number.parseFloat(t);
+  return Number.isFinite(n) ? n : void 0;
+}
+function parseOklabParams(inner) {
+  const [main, alphaPart] = inner.split(/\s*\/\s*/);
+  const tokens = main.trim().split(/\s+/).filter(Boolean);
+  if (tokens.length < 3) return;
+  const L = parseCssNumber(tokens[0]);
+  const a = parseCssNumber(tokens[1]);
+  const b = parseCssNumber(tokens[2]);
+  if (L === void 0 || a === void 0 || b === void 0) return;
+  let alpha = 1;
+  if (alphaPart) {
+    const at = alphaPart.trim().toLowerCase();
+    if (at !== "none") {
+      const av = at.endsWith("%") ? Number.parseFloat(at) / 100 : Number.parseFloat(at);
+      if (Number.isFinite(av)) alpha = (0, import_utils.clampValue)(av, 0, 1);
+    }
+  }
+  return { L: (0, import_utils.clampValue)(L, 0, 1), a, b, alpha };
+}
+var _OklabColor = class _OklabColor extends import_color.Color {
+  constructor(lightness, a, b, alpha) {
+    super();
+    __publicField(this, "lightness", lightness);
+    __publicField(this, "a", a);
+    __publicField(this, "b", b);
+    __publicField(this, "alpha", alpha);
+  }
+  static parse(value) {
+    if (!OKLAB_HEAD.test(value)) return;
+    const end = value.lastIndexOf(")");
+    if (end < 0) return;
+    const inner = value.slice(value.indexOf("(") + 1, end);
+    const p = parseOklabParams(inner);
+    if (!p) return;
+    return new _OklabColor(p.L, p.a, p.b, p.alpha);
+  }
+  toString(format = "css") {
+    switch (format) {
+      case "hex":
+        return this.toFormat("rgba").toString("hex");
+      case "hexa":
+        return this.toFormat("rgba").toString("hexa");
+      case "oklab":
+        return formatOklabCss(this.lightness, this.a, this.b, this.alpha);
+      case "css":
+        return formatOklabCss(this.lightness, this.a, this.b, this.alpha);
+      default:
+        return this.toFormat(format).toString(format);
+    }
+  }
+  toFormat(format) {
+    switch (format) {
+      case "oklab":
+        return this;
+      case "oklch":
+        return this.toOklch();
+      case "rgba":
+        return this.toRgb();
+      case "hsla":
+        return this.toRgb().toFormat("hsla");
+      case "hsba":
+        return oklabToHsb(this.lightness, this.a, this.b, this.alpha);
+      default:
+        throw new Error("Unsupported color conversion: oklab -> " + format);
+    }
+  }
+  toRgb() {
+    const { r, g, b } = (0, import_oklab_math.linearRgbToSrgb)((0, import_oklab_math.oklabToLinearRgb)(this.lightness, this.a, this.b));
+    return new import_rgb_color.RGBColor(r, g, b, (0, import_utils.toFixedNumber)(this.alpha, 4));
+  }
+  toOklch() {
+    const { L, C, H } = (0, import_oklab_math.oklabToOklch)(this.lightness, this.a, this.b);
+    return new OklchColor(L, H, C, (0, import_utils.toFixedNumber)(this.alpha, 4));
+  }
+  clone() {
+    return new _OklabColor(this.lightness, this.a, this.b, this.alpha);
+  }
+  getChannelValue(channel) {
+    switch (channel) {
+      case "lightness":
+        return this.lightness;
+      case "a":
+        return this.a;
+      case "b":
+        return this.b;
+      case "alpha":
+        return this.alpha;
+      default:
+        throw new Error("Unsupported color channel: " + channel);
+    }
+  }
+  withChannelValue(channel, value) {
+    const { minValue, maxValue } = this.getChannelRange(channel);
+    const v = (0, import_utils.clampValue)(value, minValue, maxValue);
+    switch (channel) {
+      case "lightness":
+        return new _OklabColor(v, this.a, this.b, this.alpha);
+      case "a":
+        return new _OklabColor(this.lightness, v, this.b, this.alpha);
+      case "b":
+        return new _OklabColor(this.lightness, this.a, v, this.alpha);
+      case "alpha":
+        return new _OklabColor(this.lightness, this.a, this.b, v);
+      default:
+        throw new Error("Unsupported color channel: " + channel);
+    }
+  }
+  formatChannelValue(channel, locale) {
+    const options = this.getChannelFormatOptions(channel);
+    const val = this.getChannelValue(channel);
+    return new Intl.NumberFormat(locale, options).format(val);
+  }
+  getChannelFormatOptions(channel) {
+    switch (channel) {
+      case "lightness":
+      case "a":
+      case "b":
+      case "alpha":
+        return { style: "decimal", maximumFractionDigits: 4 };
+      default:
+        throw new Error("Unknown color channel: " + channel);
+    }
+  }
+  getChannelRange(channel) {
+    switch (channel) {
+      case "lightness":
+        return { minValue: 0, maxValue: 1, step: 1e-3, pageSize: 0.05 };
+      case "a":
+      case "b":
+        return { minValue: -0.4, maxValue: 0.4, step: 1e-3, pageSize: 0.02 };
+      case "alpha":
+        return { minValue: 0, maxValue: 1, step: 0.01, pageSize: 0.1 };
+      default:
+        throw new Error("Unknown color channel: " + channel);
+    }
+  }
+  toJSON() {
+    return { l: this.lightness, a: this.a, b: this.b, alpha: this.alpha };
+  }
+  getFormat() {
+    return "oklab";
+  }
+  getChannels() {
+    return _OklabColor.colorChannels;
+  }
+  isEqual(color) {
+    if (color.getFormat() !== "oklab") return super.isEqual(color);
+    const o = color;
+    return this.lightness === o.lightness && this.a === o.a && this.b === o.b && this.alpha === o.alpha;
+  }
+};
+__publicField(_OklabColor, "colorChannels", ["lightness", "a", "b"]);
+var OklabColor = _OklabColor;
+function formatOklabCss(L, a, b, alpha) {
+  const l = (0, import_utils.toFixedNumber)(L, 4);
+  const aa = (0, import_utils.toFixedNumber)(a, 4);
+  const bb = (0, import_utils.toFixedNumber)(b, 4);
+  if (alpha >= 1) return `oklab(${l} ${aa} ${bb})`;
+  return `oklab(${l} ${aa} ${bb} / ${(0, import_utils.toFixedNumber)(alpha, 4)})`;
+}
+var OKLCH_HEAD = /^oklch\(\s*/i;
+function parseCssNumberOrAngle(token) {
+  const t = token.trim().toLowerCase();
+  if (t === "none") return void 0;
+  if (t.endsWith("deg")) return Number.parseFloat(t);
+  if (t.endsWith("turn")) return Number.parseFloat(t) * 360;
+  if (t.endsWith("grad")) return Number.parseFloat(t) / 400 * 360;
+  if (t.endsWith("rad")) return Number.parseFloat(t) * 180 / Math.PI;
+  if (t.endsWith("%")) return Number.parseFloat(t) / 100;
+  const n = Number.parseFloat(t);
+  return Number.isFinite(n) ? n : void 0;
+}
+function parseOklchParams(inner) {
+  const [main, alphaPart] = inner.split(/\s*\/\s*/);
+  const tokens = main.trim().split(/\s+/).filter(Boolean);
+  if (tokens.length < 3) return;
+  const Lraw = parseCssNumberOrAngle(tokens[0]);
+  const Craw = parseCssNumberOrAngle(tokens[1]);
+  const Hraw = parseCssNumberOrAngle(tokens[2]);
+  if (Lraw === void 0 || Craw === void 0 || Hraw === void 0) return;
+  const L = tokens[0].trim().endsWith("%") ? Lraw : (0, import_utils.clampValue)(Lraw, 0, 1);
+  const C = tokens[1].trim().endsWith("%") ? Craw * 0.5 : Craw;
+  const H = (0, import_utils.mod)(Hraw, 360);
+  let alpha = 1;
+  if (alphaPart) {
+    const at = alphaPart.trim().toLowerCase();
+    if (at !== "none") {
+      const av = at.endsWith("%") ? Number.parseFloat(at) / 100 : Number.parseFloat(at);
+      if (Number.isFinite(av)) alpha = (0, import_utils.clampValue)(av, 0, 1);
+    }
+  }
+  return { L, C: (0, import_utils.clampValue)(C, 0, 0.5), H, alpha };
+}
+var _OklchColor = class _OklchColor extends import_color.Color {
+  constructor(lightness, hue, chroma, alpha) {
+    super();
+    __publicField(this, "lightness", lightness);
+    __publicField(this, "hue", hue);
+    __publicField(this, "chroma", chroma);
+    __publicField(this, "alpha", alpha);
+  }
+  static parse(value) {
+    if (!OKLCH_HEAD.test(value)) return;
+    const end = value.lastIndexOf(")");
+    if (end < 0) return;
+    const inner = value.slice(value.indexOf("(") + 1, end);
+    const p = parseOklchParams(inner);
+    if (!p) return;
+    return new _OklchColor(p.L, p.H, p.C, p.alpha);
+  }
+  toString(format = "css") {
+    switch (format) {
+      case "hex":
+        return this.toFormat("rgba").toString("hex");
+      case "hexa":
+        return this.toFormat("rgba").toString("hexa");
+      case "oklch":
+        return formatOklchCss(this.lightness, this.chroma, this.hue, this.alpha);
+      case "css":
+        return formatOklchCss(this.lightness, this.chroma, this.hue, this.alpha);
+      default:
+        return this.toFormat(format).toString(format);
+    }
+  }
+  toFormat(format) {
+    switch (format) {
+      case "oklch":
+        return this;
+      case "oklab":
+        return this.toOklab();
+      case "rgba":
+        return this.toRgb();
+      case "hsla":
+        return this.toRgb().toFormat("hsla");
+      case "hsba": {
+        const { a, b, L } = (0, import_oklab_math.oklchToOklab)(this.lightness, this.chroma, this.hue);
+        return oklabToHsb(L, a, b, this.alpha);
+      }
+      default:
+        throw new Error("Unsupported color conversion: oklch -> " + format);
+    }
+  }
+  toOklab() {
+    const { a, b, L } = (0, import_oklab_math.oklchToOklab)(this.lightness, this.chroma, this.hue);
+    return new OklabColor(L, a, b, (0, import_utils.toFixedNumber)(this.alpha, 4));
+  }
+  toRgb() {
+    return this.toOklab().toFormat("rgba");
+  }
+  clone() {
+    return new _OklchColor(this.lightness, this.hue, this.chroma, this.alpha);
+  }
+  getChannelValue(channel) {
+    switch (channel) {
+      case "lightness":
+        return this.lightness;
+      case "hue":
+        return this.hue;
+      case "chroma":
+        return this.chroma;
+      case "alpha":
+        return this.alpha;
+      default:
+        throw new Error("Unsupported color channel: " + channel);
+    }
+  }
+  withChannelValue(channel, value) {
+    const { minValue, maxValue } = this.getChannelRange(channel);
+    let v = (0, import_utils.clampValue)(value, minValue, maxValue);
+    if (channel === "hue") v = (0, import_utils.mod)(v, 360);
+    switch (channel) {
+      case "lightness":
+        return new _OklchColor(v, this.hue, this.chroma, this.alpha);
+      case "hue":
+        return new _OklchColor(this.lightness, v, this.chroma, this.alpha);
+      case "chroma":
+        return new _OklchColor(this.lightness, this.hue, v, this.alpha);
+      case "alpha":
+        return new _OklchColor(this.lightness, this.hue, this.chroma, v);
+      default:
+        throw new Error("Unsupported color channel: " + channel);
+    }
+  }
+  formatChannelValue(channel, locale) {
+    const options = this.getChannelFormatOptions(channel);
+    const val = this.getChannelValue(channel);
+    return new Intl.NumberFormat(locale, options).format(val);
+  }
+  getChannelFormatOptions(channel) {
+    switch (channel) {
+      case "lightness":
+      case "chroma":
+      case "alpha":
+        return { style: "decimal", maximumFractionDigits: 4 };
+      case "hue":
+        return { style: "unit", unit: "degree", unitDisplay: "narrow" };
+      default:
+        throw new Error("Unknown color channel: " + channel);
+    }
+  }
+  getChannelRange(channel) {
+    switch (channel) {
+      case "lightness":
+        return { minValue: 0, maxValue: 1, step: 1e-3, pageSize: 0.05 };
+      case "hue":
+        return { minValue: 0, maxValue: 360, step: 0.01, pageSize: 15 };
+      case "chroma":
+        return { minValue: 0, maxValue: 0.5, step: 1e-3, pageSize: 0.02 };
+      case "alpha":
+        return { minValue: 0, maxValue: 1, step: 0.01, pageSize: 0.1 };
+      default:
+        throw new Error("Unknown color channel: " + channel);
+    }
+  }
+  toJSON() {
+    return { l: this.lightness, h: this.hue, c: this.chroma, alpha: this.alpha };
+  }
+  getFormat() {
+    return "oklch";
+  }
+  getChannels() {
+    return _OklchColor.colorChannels;
+  }
+  isEqual(color) {
+    if (color.getFormat() !== "oklch") return super.isEqual(color);
+    const o = color;
+    return this.lightness === o.lightness && this.hue === o.hue && this.chroma === o.chroma && this.alpha === o.alpha;
+  }
+};
+__publicField(_OklchColor, "colorChannels", ["lightness", "hue", "chroma"]);
+var OklchColor = _OklchColor;
+function formatOklchCss(L, C, H, alpha) {
+  const l = (0, import_utils.toFixedNumber)(L, 4);
+  const c = (0, import_utils.toFixedNumber)(C, 4);
+  const h = (0, import_utils.toFixedNumber)(H, 2);
+  if (alpha >= 1) return `oklch(${l} ${c} ${h})`;
+  return `oklch(${l} ${c} ${h} / ${(0, import_utils.toFixedNumber)(alpha, 4)})`;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  OklabColor,
+  OklchColor,
+  parseOklabParams,
+  parseOklchParams
+});