@zag-js/color-utils 1.34.1 → 1.35.1

package/dist/hsl-color.js

@@ -0,0 +1,167 @@
+"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/hsl-color.ts
+var hsl_color_exports = {};
+__export(hsl_color_exports, {
+  HSLColor: () => HSLColor,
+  HSL_REGEX: () => HSL_REGEX
+});
+module.exports = __toCommonJS(hsl_color_exports);
+var import_utils = require("@zag-js/utils");
+var import_color = require("./color.cjs");
+var import_hsb_color = require("./hsb-color.cjs");
+var import_rgb_color = require("./rgb-color.cjs");
+var HSL_REGEX = /hsl\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%)\)|hsla\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d(.\d+)?)\)/;
+var _HSLColor = class _HSLColor extends import_color.Color {
+  constructor(hue, saturation, lightness, alpha) {
+    super();
+    this.hue = hue;
+    this.saturation = saturation;
+    this.lightness = lightness;
+    this.alpha = alpha;
+  }
+  static parse(value) {
+    let m;
+    if (m = value.match(HSL_REGEX)) {
+      const [h, s, l, a] = (m[1] ?? m[2]).split(",").map((n) => Number(n.trim().replace("%", "")));
+      return new _HSLColor((0, import_utils.mod)(h, 360), (0, import_utils.clampValue)(s, 0, 100), (0, import_utils.clampValue)(l, 0, 100), (0, import_utils.clampValue)(a ?? 1, 0, 1));
+    }
+  }
+  toString(format = "css") {
+    switch (format) {
+      case "hex":
+        return this.toRGB().toString("hex");
+      case "hexa":
+        return this.toRGB().toString("hexa");
+      case "hsl":
+        return `hsl(${this.hue}, ${(0, import_utils.toFixedNumber)(this.saturation, 2)}%, ${(0, import_utils.toFixedNumber)(this.lightness, 2)}%)`;
+      case "css":
+      case "hsla":
+        return `hsla(${this.hue}, ${(0, import_utils.toFixedNumber)(this.saturation, 2)}%, ${(0, import_utils.toFixedNumber)(this.lightness, 2)}%, ${this.alpha})`;
+      case "hsb":
+        return this.toHSB().toString("hsb");
+      case "rgb":
+        return this.toRGB().toString("rgb");
+      default:
+        return this.toFormat(format).toString(format);
+    }
+  }
+  toFormat(format) {
+    switch (format) {
+      case "hsla":
+        return this;
+      case "hsba":
+        return this.toHSB();
+      case "rgba":
+        return this.toRGB();
+      default:
+        throw new Error("Unsupported color conversion: hsl -> " + format);
+    }
+  }
+  /**
+   * Converts a HSL color to HSB.
+   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_HSV.
+   * @returns An HSBColor object.
+   */
+  toHSB() {
+    let saturation = this.saturation / 100;
+    let lightness = this.lightness / 100;
+    let brightness = lightness + saturation * Math.min(lightness, 1 - lightness);
+    saturation = brightness === 0 ? 0 : 2 * (1 - lightness / brightness);
+    return new import_hsb_color.HSBColor(
+      (0, import_utils.toFixedNumber)(this.hue, 2),
+      (0, import_utils.toFixedNumber)(saturation * 100, 2),
+      (0, import_utils.toFixedNumber)(brightness * 100, 2),
+      (0, import_utils.toFixedNumber)(this.alpha, 2)
+    );
+  }
+  /**
+   * Converts a HSL color to RGB.
+   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative.
+   * @returns An RGBColor object.
+   */
+  toRGB() {
+    let hue = this.hue;
+    let saturation = this.saturation / 100;
+    let lightness = this.lightness / 100;
+    let a = saturation * Math.min(lightness, 1 - lightness);
+    let fn = (n, k = (n + hue / 30) % 12) => lightness - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return new import_rgb_color.RGBColor(
+      Math.round(fn(0) * 255),
+      Math.round(fn(8) * 255),
+      Math.round(fn(4) * 255),
+      (0, import_utils.toFixedNumber)(this.alpha, 2)
+    );
+  }
+  clone() {
+    return new _HSLColor(this.hue, this.saturation, this.lightness, this.alpha);
+  }
+  getChannelFormatOptions(channel) {
+    switch (channel) {
+      case "hue":
+        return { style: "unit", unit: "degree", unitDisplay: "narrow" };
+      case "saturation":
+      case "lightness":
+      case "alpha":
+        return { style: "percent" };
+      default:
+        throw new Error("Unknown color channel: " + channel);
+    }
+  }
+  formatChannelValue(channel, locale) {
+    let options = this.getChannelFormatOptions(channel);
+    let value = this.getChannelValue(channel);
+    if (channel === "saturation" || channel === "lightness") {
+      value /= 100;
+    }
+    return new Intl.NumberFormat(locale, options).format(value);
+  }
+  getChannelRange(channel) {
+    switch (channel) {
+      case "hue":
+        return { minValue: 0, maxValue: 360, step: 1, pageSize: 15 };
+      case "saturation":
+      case "lightness":
+        return { minValue: 0, maxValue: 100, step: 1, pageSize: 10 };
+      case "alpha":
+        return { minValue: 0, maxValue: 1, step: 0.01, pageSize: 0.1 };
+      default:
+        throw new Error("Unknown color channel: " + channel);
+    }
+  }
+  toJSON() {
+    return { h: this.hue, s: this.saturation, l: this.lightness, a: this.alpha };
+  }
+  getFormat() {
+    return "hsla";
+  }
+  getChannels() {
+    return _HSLColor.colorChannels;
+  }
+};
+__publicField(_HSLColor, "colorChannels", ["hue", "saturation", "lightness"]);
+var HSLColor = _HSLColor;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  HSLColor,
+  HSL_REGEX
+});

package/dist/hsl-color.mjs

@@ -0,0 +1,143 @@
+import {
+  __publicField
+} from "./chunk-QZ7TP4HQ.mjs";
+
+// src/hsl-color.ts
+import { clampValue, mod, toFixedNumber } from "@zag-js/utils";
+import { Color } from "./color.mjs";
+import { HSBColor } from "./hsb-color.mjs";
+import { RGBColor } from "./rgb-color.mjs";
+var HSL_REGEX = /hsl\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%)\)|hsla\(([-+]?\d+(?:.\d+)?\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d+(?:.\d+)?%\s*,\s*[-+]?\d(.\d+)?)\)/;
+var _HSLColor = class _HSLColor extends Color {
+  constructor(hue, saturation, lightness, alpha) {
+    super();
+    this.hue = hue;
+    this.saturation = saturation;
+    this.lightness = lightness;
+    this.alpha = alpha;
+  }
+  static parse(value) {
+    let m;
+    if (m = value.match(HSL_REGEX)) {
+      const [h, s, l, a] = (m[1] ?? m[2]).split(",").map((n) => Number(n.trim().replace("%", "")));
+      return new _HSLColor(mod(h, 360), clampValue(s, 0, 100), clampValue(l, 0, 100), clampValue(a ?? 1, 0, 1));
+    }
+  }
+  toString(format = "css") {
+    switch (format) {
+      case "hex":
+        return this.toRGB().toString("hex");
+      case "hexa":
+        return this.toRGB().toString("hexa");
+      case "hsl":
+        return `hsl(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.lightness, 2)}%)`;
+      case "css":
+      case "hsla":
+        return `hsla(${this.hue}, ${toFixedNumber(this.saturation, 2)}%, ${toFixedNumber(this.lightness, 2)}%, ${this.alpha})`;
+      case "hsb":
+        return this.toHSB().toString("hsb");
+      case "rgb":
+        return this.toRGB().toString("rgb");
+      default:
+        return this.toFormat(format).toString(format);
+    }
+  }
+  toFormat(format) {
+    switch (format) {
+      case "hsla":
+        return this;
+      case "hsba":
+        return this.toHSB();
+      case "rgba":
+        return this.toRGB();
+      default:
+        throw new Error("Unsupported color conversion: hsl -> " + format);
+    }
+  }
+  /**
+   * Converts a HSL color to HSB.
+   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_HSV.
+   * @returns An HSBColor object.
+   */
+  toHSB() {
+    let saturation = this.saturation / 100;
+    let lightness = this.lightness / 100;
+    let brightness = lightness + saturation * Math.min(lightness, 1 - lightness);
+    saturation = brightness === 0 ? 0 : 2 * (1 - lightness / brightness);
+    return new HSBColor(
+      toFixedNumber(this.hue, 2),
+      toFixedNumber(saturation * 100, 2),
+      toFixedNumber(brightness * 100, 2),
+      toFixedNumber(this.alpha, 2)
+    );
+  }
+  /**
+   * Converts a HSL color to RGB.
+   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB_alternative.
+   * @returns An RGBColor object.
+   */
+  toRGB() {
+    let hue = this.hue;
+    let saturation = this.saturation / 100;
+    let lightness = this.lightness / 100;
+    let a = saturation * Math.min(lightness, 1 - lightness);
+    let fn = (n, k = (n + hue / 30) % 12) => lightness - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return new RGBColor(
+      Math.round(fn(0) * 255),
+      Math.round(fn(8) * 255),
+      Math.round(fn(4) * 255),
+      toFixedNumber(this.alpha, 2)
+    );
+  }
+  clone() {
+    return new _HSLColor(this.hue, this.saturation, this.lightness, this.alpha);
+  }
+  getChannelFormatOptions(channel) {
+    switch (channel) {
+      case "hue":
+        return { style: "unit", unit: "degree", unitDisplay: "narrow" };
+      case "saturation":
+      case "lightness":
+      case "alpha":
+        return { style: "percent" };
+      default:
+        throw new Error("Unknown color channel: " + channel);
+    }
+  }
+  formatChannelValue(channel, locale) {
+    let options = this.getChannelFormatOptions(channel);
+    let value = this.getChannelValue(channel);
+    if (channel === "saturation" || channel === "lightness") {
+      value /= 100;
+    }
+    return new Intl.NumberFormat(locale, options).format(value);
+  }
+  getChannelRange(channel) {
+    switch (channel) {
+      case "hue":
+        return { minValue: 0, maxValue: 360, step: 1, pageSize: 15 };
+      case "saturation":
+      case "lightness":
+        return { minValue: 0, maxValue: 100, step: 1, pageSize: 10 };
+      case "alpha":
+        return { minValue: 0, maxValue: 1, step: 0.01, pageSize: 0.1 };
+      default:
+        throw new Error("Unknown color channel: " + channel);
+    }
+  }
+  toJSON() {
+    return { h: this.hue, s: this.saturation, l: this.lightness, a: this.alpha };
+  }
+  getFormat() {
+    return "hsla";
+  }
+  getChannels() {
+    return _HSLColor.colorChannels;
+  }
+};
+__publicField(_HSLColor, "colorChannels", ["hue", "saturation", "lightness"]);
+var HSLColor = _HSLColor;
+export {
+  HSLColor,
+  HSL_REGEX
+};

package/dist/index.d.mts

@@ -1,121 +1,4 @@
-type ColorHexFormat = "hex" | "hexa";
-type ColorFormat = "rgba" | "hsla" | "hsba";
-type ColorStringFormat = ColorHexFormat | ColorFormat | "rgb" | "hsl" | "hsb" | "css";
-type ColorChannel = "hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha";
-interface Color2DAxes {
-    xChannel: ColorChannel;
-    yChannel: ColorChannel;
-}
-interface ColorAxes extends Color2DAxes {
-    zChannel: ColorChannel;
-}
-interface ColorChannelRange {
-    /** The minimum value of the color channel. */
-    minValue: number;
-    /** The maximum value of the color channel. */
-    maxValue: number;
-    /** The step value of the color channel, used when incrementing and decrementing. */
-    step: number;
-    /** The page step value of the color channel, used when incrementing and decrementing. */
-    pageSize: number;
-}
-interface ColorType {
-    /** Converts the color to the given color format, and returns a new Color object. */
-    toFormat(format: ColorFormat): ColorType;
-    /** Converts the color to a JSON object. */
-    toJSON(): Record<string, number>;
-    /** Converts the color to a string in the given format. Defaults to CSS format. */
-    toString(format?: ColorStringFormat): string;
-    /** Converts the color to hex, and returns an integer representation. */
-    toHexInt(): number;
-    /**
-     * Returns the numeric value for a given channel.
-     * Throws an error if the channel is unsupported in the current color format.
-     */
-    getChannelValue(channel: ColorChannel): number;
-    /**
-     * Sets the numeric value for a given channel, and returns a new Color object.
-     * Throws an error if the channel is unsupported in the current color format.
-     */
-    withChannelValue(channel: ColorChannel, value: number): ColorType;
-    /**
-     * Returns the formatted value for a given channel.
-     */
-    formatChannelValue(channel: ColorChannel, locale: string): string;
-    /**
-     * Returns the minimum, maximum, and step values for a given channel.
-     */
-    getChannelRange(channel: ColorChannel): ColorChannelRange;
-    /**
-     * Returns the color space, 'rgb', 'hsb' or 'hsl', for the current color.
-     */
-    getFormat(): ColorFormat;
-    /**
-     * Returns the color space axes, xChannel, yChannel, zChannel.
-     */
-    getColorAxes(xyChannels: Color2DAxes): ColorAxes;
-    /**
-     * Returns an array of the color channels within the current color space space.
-     */
-    getChannels(): [ColorChannel, ColorChannel, ColorChannel];
-    /**
-     * Returns a new Color object with the same values as the current color.
-     */
-    clone(): ColorType;
-    /**
-     * Whether the color is equal to another color.
-     */
-    isEqual(color: ColorType): boolean;
-    /**
-     * Increments the color channel by the given step size, and returns a new Color object.
-     */
-    incrementChannel(channel: ColorChannel, stepSize: number): ColorType;
-    /**
-     * Decrements the color channel by the given step size, and returns a new Color object.
-     */
-    decrementChannel(channel: ColorChannel, stepSize: number): ColorType;
-    /**
-     * Returns the color channel value as a percentage of the channel range.
-     */
-    getChannelValuePercent(channel: ColorChannel, value?: number): number;
-    /**
-     * Returns the color channel value for a given percentage of the channel range.
-     */
-    getChannelPercentValue(channel: ColorChannel, percent: number): number;
-}
-
-declare abstract class Color implements ColorType {
-    abstract toFormat(format: ColorFormat): ColorType;
-    abstract toJSON(): Record<string, number>;
-    abstract toString(format?: ColorStringFormat): string;
-    abstract clone(): ColorType;
-    abstract getChannelRange(channel: ColorChannel): ColorChannelRange;
-    abstract getFormat(): ColorFormat;
-    abstract getChannels(): [ColorChannel, ColorChannel, ColorChannel];
-    abstract formatChannelValue(channel: ColorChannel, locale: string): string;
-    toHexInt(): number;
-    getChannelValue(channel: ColorChannel): number;
-    getChannelValuePercent(channel: ColorChannel, valueToCheck?: number): number;
-    getChannelPercentValue(channel: ColorChannel, percentToCheck: number): number;
-    withChannelValue(channel: ColorChannel, value: number): ColorType;
-    getColorAxes(xyChannels: Color2DAxes): ColorAxes;
-    incrementChannel(channel: ColorChannel, stepSize: number): ColorType;
-    decrementChannel(channel: ColorChannel, stepSize: number): ColorType;
-    isEqual(color: ColorType): boolean;
-}
-
-interface GradientOptions {
-    xChannel: ColorChannel;
-    yChannel: ColorChannel;
-    dir?: "rtl" | "ltr" | undefined;
-}
-interface GradientStyles {
-    areaStyles: Record<string, string>;
-    areaGradientStyles: Record<string, string>;
-}
-declare function getColorAreaGradient(color: Color, options: GradientOptions): GradientStyles;
-
-declare const parseColor: (value: string) => ColorType;
-declare const normalizeColor: (v: string | ColorType) => ColorType;
-
-export { Color, type ColorAxes, type ColorChannel, type ColorChannelRange, type ColorFormat, type ColorStringFormat, type ColorType, getColorAreaGradient, normalizeColor, parseColor };
+export { getColorAreaGradient } from './area-gradient.mjs';
+export { Color } from './color.mjs';
+export { normalizeColor, parseColor } from './parse-color.mjs';
+export { ColorAxes, ColorChannel, ColorChannelRange, ColorFormat, ColorStringFormat, ColorType } from './types.mjs';

package/dist/index.d.ts

@@ -1,121 +1,4 @@
-type ColorHexFormat = "hex" | "hexa";
-type ColorFormat = "rgba" | "hsla" | "hsba";
-type ColorStringFormat = ColorHexFormat | ColorFormat | "rgb" | "hsl" | "hsb" | "css";
-type ColorChannel = "hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha";
-interface Color2DAxes {
-    xChannel: ColorChannel;
-    yChannel: ColorChannel;
-}
-interface ColorAxes extends Color2DAxes {
-    zChannel: ColorChannel;
-}
-interface ColorChannelRange {
-    /** The minimum value of the color channel. */
-    minValue: number;
-    /** The maximum value of the color channel. */
-    maxValue: number;
-    /** The step value of the color channel, used when incrementing and decrementing. */
-    step: number;
-    /** The page step value of the color channel, used when incrementing and decrementing. */
-    pageSize: number;
-}
-interface ColorType {
-    /** Converts the color to the given color format, and returns a new Color object. */
-    toFormat(format: ColorFormat): ColorType;
-    /** Converts the color to a JSON object. */
-    toJSON(): Record<string, number>;
-    /** Converts the color to a string in the given format. Defaults to CSS format. */
-    toString(format?: ColorStringFormat): string;
-    /** Converts the color to hex, and returns an integer representation. */
-    toHexInt(): number;
-    /**
-     * Returns the numeric value for a given channel.
-     * Throws an error if the channel is unsupported in the current color format.
-     */
-    getChannelValue(channel: ColorChannel): number;
-    /**
-     * Sets the numeric value for a given channel, and returns a new Color object.
-     * Throws an error if the channel is unsupported in the current color format.
-     */
-    withChannelValue(channel: ColorChannel, value: number): ColorType;
-    /**
-     * Returns the formatted value for a given channel.
-     */
-    formatChannelValue(channel: ColorChannel, locale: string): string;
-    /**
-     * Returns the minimum, maximum, and step values for a given channel.
-     */
-    getChannelRange(channel: ColorChannel): ColorChannelRange;
-    /**
-     * Returns the color space, 'rgb', 'hsb' or 'hsl', for the current color.
-     */
-    getFormat(): ColorFormat;
-    /**
-     * Returns the color space axes, xChannel, yChannel, zChannel.
-     */
-    getColorAxes(xyChannels: Color2DAxes): ColorAxes;
-    /**
-     * Returns an array of the color channels within the current color space space.
-     */
-    getChannels(): [ColorChannel, ColorChannel, ColorChannel];
-    /**
-     * Returns a new Color object with the same values as the current color.
-     */
-    clone(): ColorType;
-    /**
-     * Whether the color is equal to another color.
-     */
-    isEqual(color: ColorType): boolean;
-    /**
-     * Increments the color channel by the given step size, and returns a new Color object.
-     */
-    incrementChannel(channel: ColorChannel, stepSize: number): ColorType;
-    /**
-     * Decrements the color channel by the given step size, and returns a new Color object.
-     */
-    decrementChannel(channel: ColorChannel, stepSize: number): ColorType;
-    /**
-     * Returns the color channel value as a percentage of the channel range.
-     */
-    getChannelValuePercent(channel: ColorChannel, value?: number): number;
-    /**
-     * Returns the color channel value for a given percentage of the channel range.
-     */
-    getChannelPercentValue(channel: ColorChannel, percent: number): number;
-}
-
-declare abstract class Color implements ColorType {
-    abstract toFormat(format: ColorFormat): ColorType;
-    abstract toJSON(): Record<string, number>;
-    abstract toString(format?: ColorStringFormat): string;
-    abstract clone(): ColorType;
-    abstract getChannelRange(channel: ColorChannel): ColorChannelRange;
-    abstract getFormat(): ColorFormat;
-    abstract getChannels(): [ColorChannel, ColorChannel, ColorChannel];
-    abstract formatChannelValue(channel: ColorChannel, locale: string): string;
-    toHexInt(): number;
-    getChannelValue(channel: ColorChannel): number;
-    getChannelValuePercent(channel: ColorChannel, valueToCheck?: number): number;
-    getChannelPercentValue(channel: ColorChannel, percentToCheck: number): number;
-    withChannelValue(channel: ColorChannel, value: number): ColorType;
-    getColorAxes(xyChannels: Color2DAxes): ColorAxes;
-    incrementChannel(channel: ColorChannel, stepSize: number): ColorType;
-    decrementChannel(channel: ColorChannel, stepSize: number): ColorType;
-    isEqual(color: ColorType): boolean;
-}
-
-interface GradientOptions {
-    xChannel: ColorChannel;
-    yChannel: ColorChannel;
-    dir?: "rtl" | "ltr" | undefined;
-}
-interface GradientStyles {
-    areaStyles: Record<string, string>;
-    areaGradientStyles: Record<string, string>;
-}
-declare function getColorAreaGradient(color: Color, options: GradientOptions): GradientStyles;
-
-declare const parseColor: (value: string) => ColorType;
-declare const normalizeColor: (v: string | ColorType) => ColorType;
-
-export { Color, type ColorAxes, type ColorChannel, type ColorChannelRange, type ColorFormat, type ColorStringFormat, type ColorType, getColorAreaGradient, normalizeColor, parseColor };
+export { getColorAreaGradient } from './area-gradient.js';
+export { Color } from './color.js';
+export { normalizeColor, parseColor } from './parse-color.js';
+export { ColorAxes, ColorChannel, ColorChannelRange, ColorFormat, ColorStringFormat, ColorType } from './types.js';