@zag-js/color-utils 1.34.1 → 1.35.1

package/dist/native-color.d.mts

@@ -0,0 +1,3 @@
+declare const nativeColorMap: Map<string, string>;
+
+export { nativeColorMap };

package/dist/native-color.d.ts

@@ -0,0 +1,3 @@
+declare const nativeColorMap: Map<string, string>;
+
+export { nativeColorMap };

package/dist/native-color.js

@@ -0,0 +1,41 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/native-color.ts
+var native_color_exports = {};
+__export(native_color_exports, {
+  nativeColorMap: () => nativeColorMap
+});
+module.exports = __toCommonJS(native_color_exports);
+var nativeColors = "aliceblue:f0f8ff,antiquewhite:faebd7,aqua:00ffff,aquamarine:7fffd4,azure:f0ffff,beige:f5f5dc,bisque:ffe4c4,black:000000,blanchedalmond:ffebcd,blue:0000ff,blueviolet:8a2be2,brown:a52a2a,burlywood:deb887,cadetblue:5f9ea0,chartreuse:7fff00,chocolate:d2691e,coral:ff7f50,cornflowerblue:6495ed,cornsilk:fff8dc,crimson:dc143c,cyan:00ffff,darkblue:00008b,darkcyan:008b8b,darkgoldenrod:b8860b,darkgray:a9a9a9,darkgreen:006400,darkkhaki:bdb76b,darkmagenta:8b008b,darkolivegreen:556b2f,darkorange:ff8c00,darkorchid:9932cc,darkred:8b0000,darksalmon:e9967a,darkseagreen:8fbc8f,darkslateblue:483d8b,darkslategray:2f4f4f,darkturquoise:00ced1,darkviolet:9400d3,deeppink:ff1493,deepskyblue:00bfff,dimgray:696969,dodgerblue:1e90ff,firebrick:b22222,floralwhite:fffaf0,forestgreen:228b22,fuchsia:ff00ff,gainsboro:dcdcdc,ghostwhite:f8f8ff,gold:ffd700,goldenrod:daa520,gray:808080,green:008000,greenyellow:adff2f,honeydew:f0fff0,hotpink:ff69b4,indianred:cd5c5c,indigo:4b0082,ivory:fffff0,khaki:f0e68c,lavender:e6e6fa,lavenderblush:fff0f5,lawngreen:7cfc00,lemonchiffon:fffacd,lightblue:add8e6,lightcoral:f08080,lightcyan:e0ffff,lightgoldenrodyellow:fafad2,lightgrey:d3d3d3,lightgreen:90ee90,lightpink:ffb6c1,lightsalmon:ffa07a,lightseagreen:20b2aa,lightskyblue:87cefa,lightslategray:778899,lightsteelblue:b0c4de,lightyellow:ffffe0,lime:00ff00,limegreen:32cd32,linen:faf0e6,magenta:ff00ff,maroon:800000,mediumaquamarine:66cdaa,mediumblue:0000cd,mediumorchid:ba55d3,mediumpurple:9370d8,mediumseagreen:3cb371,mediumslateblue:7b68ee,mediumspringgreen:00fa9a,mediumturquoise:48d1cc,mediumvioletred:c71585,midnightblue:191970,mintcream:f5fffa,mistyrose:ffe4e1,moccasin:ffe4b5,navajowhite:ffdead,navy:000080,oldlace:fdf5e6,olive:808000,olivedrab:6b8e23,orange:ffa500,orangered:ff4500,orchid:da70d6,palegoldenrod:eee8aa,palegreen:98fb98,paleturquoise:afeeee,palevioletred:d87093,papayawhip:ffefd5,peachpuff:ffdab9,peru:cd853f,pink:ffc0cb,plum:dda0dd,powderblue:b0e0e6,purple:800080,rebeccapurple:663399,red:ff0000,rosybrown:bc8f8f,royalblue:4169e1,saddlebrown:8b4513,salmon:fa8072,sandybrown:f4a460,seagreen:2e8b57,seashell:fff5ee,sienna:a0522d,silver:c0c0c0,skyblue:87ceeb,slateblue:6a5acd,slategray:708090,snow:fffafa,springgreen:00ff7f,steelblue:4682b4,tan:d2b48c,teal:008080,thistle:d8bfd8,tomato:ff6347,turquoise:40e0d0,violet:ee82ee,wheat:f5deb3,white:ffffff,whitesmoke:f5f5f5,yellow:ffff00,yellowgreen:9acd32";
+var makeMap = (str) => {
+  const map = /* @__PURE__ */ new Map();
+  const list = str.split(",");
+  for (let i = 0; i < list.length; i++) {
+    const [key, val] = list[i].split(":");
+    map.set(key, `#${val}`);
+    if (key.includes("gray")) map.set(key.replace("gray", "grey"), `#${val}`);
+  }
+  return map;
+};
+var nativeColorMap = makeMap(nativeColors);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  nativeColorMap
+});

package/dist/native-color.mjs

@@ -0,0 +1,18 @@
+import "./chunk-QZ7TP4HQ.mjs";
+
+// src/native-color.ts
+var nativeColors = "aliceblue:f0f8ff,antiquewhite:faebd7,aqua:00ffff,aquamarine:7fffd4,azure:f0ffff,beige:f5f5dc,bisque:ffe4c4,black:000000,blanchedalmond:ffebcd,blue:0000ff,blueviolet:8a2be2,brown:a52a2a,burlywood:deb887,cadetblue:5f9ea0,chartreuse:7fff00,chocolate:d2691e,coral:ff7f50,cornflowerblue:6495ed,cornsilk:fff8dc,crimson:dc143c,cyan:00ffff,darkblue:00008b,darkcyan:008b8b,darkgoldenrod:b8860b,darkgray:a9a9a9,darkgreen:006400,darkkhaki:bdb76b,darkmagenta:8b008b,darkolivegreen:556b2f,darkorange:ff8c00,darkorchid:9932cc,darkred:8b0000,darksalmon:e9967a,darkseagreen:8fbc8f,darkslateblue:483d8b,darkslategray:2f4f4f,darkturquoise:00ced1,darkviolet:9400d3,deeppink:ff1493,deepskyblue:00bfff,dimgray:696969,dodgerblue:1e90ff,firebrick:b22222,floralwhite:fffaf0,forestgreen:228b22,fuchsia:ff00ff,gainsboro:dcdcdc,ghostwhite:f8f8ff,gold:ffd700,goldenrod:daa520,gray:808080,green:008000,greenyellow:adff2f,honeydew:f0fff0,hotpink:ff69b4,indianred:cd5c5c,indigo:4b0082,ivory:fffff0,khaki:f0e68c,lavender:e6e6fa,lavenderblush:fff0f5,lawngreen:7cfc00,lemonchiffon:fffacd,lightblue:add8e6,lightcoral:f08080,lightcyan:e0ffff,lightgoldenrodyellow:fafad2,lightgrey:d3d3d3,lightgreen:90ee90,lightpink:ffb6c1,lightsalmon:ffa07a,lightseagreen:20b2aa,lightskyblue:87cefa,lightslategray:778899,lightsteelblue:b0c4de,lightyellow:ffffe0,lime:00ff00,limegreen:32cd32,linen:faf0e6,magenta:ff00ff,maroon:800000,mediumaquamarine:66cdaa,mediumblue:0000cd,mediumorchid:ba55d3,mediumpurple:9370d8,mediumseagreen:3cb371,mediumslateblue:7b68ee,mediumspringgreen:00fa9a,mediumturquoise:48d1cc,mediumvioletred:c71585,midnightblue:191970,mintcream:f5fffa,mistyrose:ffe4e1,moccasin:ffe4b5,navajowhite:ffdead,navy:000080,oldlace:fdf5e6,olive:808000,olivedrab:6b8e23,orange:ffa500,orangered:ff4500,orchid:da70d6,palegoldenrod:eee8aa,palegreen:98fb98,paleturquoise:afeeee,palevioletred:d87093,papayawhip:ffefd5,peachpuff:ffdab9,peru:cd853f,pink:ffc0cb,plum:dda0dd,powderblue:b0e0e6,purple:800080,rebeccapurple:663399,red:ff0000,rosybrown:bc8f8f,royalblue:4169e1,saddlebrown:8b4513,salmon:fa8072,sandybrown:f4a460,seagreen:2e8b57,seashell:fff5ee,sienna:a0522d,silver:c0c0c0,skyblue:87ceeb,slateblue:6a5acd,slategray:708090,snow:fffafa,springgreen:00ff7f,steelblue:4682b4,tan:d2b48c,teal:008080,thistle:d8bfd8,tomato:ff6347,turquoise:40e0d0,violet:ee82ee,wheat:f5deb3,white:ffffff,whitesmoke:f5f5f5,yellow:ffff00,yellowgreen:9acd32";
+var makeMap = (str) => {
+  const map = /* @__PURE__ */ new Map();
+  const list = str.split(",");
+  for (let i = 0; i < list.length; i++) {
+    const [key, val] = list[i].split(":");
+    map.set(key, `#${val}`);
+    if (key.includes("gray")) map.set(key.replace("gray", "grey"), `#${val}`);
+  }
+  return map;
+};
+var nativeColorMap = makeMap(nativeColors);
+export {
+  nativeColorMap
+};

package/dist/parse-color.d.mts

@@ -0,0 +1,6 @@
+import { ColorType } from './types.mjs';
+
+declare const parseColor: (value: string) => ColorType;
+declare const normalizeColor: (v: string | ColorType) => ColorType;
+
+export { normalizeColor, parseColor };

package/dist/parse-color.d.ts

@@ -0,0 +1,6 @@
+import { ColorType } from './types.js';
+
+declare const parseColor: (value: string) => ColorType;
+declare const normalizeColor: (v: string | ColorType) => ColorType;
+
+export { normalizeColor, parseColor };

package/dist/parse-color.js

@@ -0,0 +1,50 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/parse-color.ts
+var parse_color_exports = {};
+__export(parse_color_exports, {
+  normalizeColor: () => normalizeColor,
+  parseColor: () => parseColor
+});
+module.exports = __toCommonJS(parse_color_exports);
+var import_hsb_color = require("./hsb-color.cjs");
+var import_hsl_color = require("./hsl-color.cjs");
+var import_native_color = require("./native-color.cjs");
+var import_rgb_color = require("./rgb-color.cjs");
+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);
+  if (!result) {
+    const error = new Error("Invalid color value: " + value);
+    Error.captureStackTrace?.(error, parseColor);
+    throw error;
+  }
+  return result;
+};
+var normalizeColor = (v) => {
+  return typeof v === "string" ? parseColor(v) : v;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  normalizeColor,
+  parseColor
+});

package/dist/parse-color.mjs

@@ -0,0 +1,26 @@
+import "./chunk-QZ7TP4HQ.mjs";
+
+// src/parse-color.ts
+import { HSBColor } from "./hsb-color.mjs";
+import { HSLColor } from "./hsl-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);
+  if (!result) {
+    const error = new Error("Invalid color value: " + value);
+    Error.captureStackTrace?.(error, parseColor);
+    throw error;
+  }
+  return result;
+};
+var normalizeColor = (v) => {
+  return typeof v === "string" ? parseColor(v) : v;
+};
+export {
+  normalizeColor,
+  parseColor
+};

package/dist/rgb-color.d.mts

@@ -0,0 +1,36 @@
+import { Color } from './color.mjs';
+import { ColorStringFormat, ColorFormat, ColorType, ColorChannel, ColorChannelRange } from './types.mjs';
+
+declare class RGBColor extends Color {
+    private red;
+    private green;
+    private blue;
+    private alpha;
+    constructor(red: number, green: number, blue: number, alpha: number);
+    static parse(value: string): RGBColor | undefined;
+    toString(format?: ColorStringFormat): string;
+    toFormat(format: ColorFormat): ColorType;
+    toHexInt(): number;
+    /**
+     * Converts an RGB color value to HSB.
+     * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB.
+     * @returns An HSBColor object.
+     */
+    private toHSB;
+    /**
+     * Converts an RGB color value to HSL.
+     * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB.
+     * @returns An HSLColor object.
+     */
+    private toHSL;
+    clone(): ColorType;
+    getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions;
+    formatChannelValue(channel: ColorChannel, locale: string): string;
+    getChannelRange(channel: ColorChannel): ColorChannelRange;
+    toJSON(): Record<"r" | "g" | "b" | "a", number>;
+    getFormat(): ColorFormat;
+    private static colorChannels;
+    getChannels(): [ColorChannel, ColorChannel, ColorChannel];
+}
+
+export { RGBColor };

package/dist/rgb-color.d.ts

@@ -0,0 +1,36 @@
+import { Color } from './color.js';
+import { ColorStringFormat, ColorFormat, ColorType, ColorChannel, ColorChannelRange } from './types.js';
+
+declare class RGBColor extends Color {
+    private red;
+    private green;
+    private blue;
+    private alpha;
+    constructor(red: number, green: number, blue: number, alpha: number);
+    static parse(value: string): RGBColor | undefined;
+    toString(format?: ColorStringFormat): string;
+    toFormat(format: ColorFormat): ColorType;
+    toHexInt(): number;
+    /**
+     * Converts an RGB color value to HSB.
+     * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB.
+     * @returns An HSBColor object.
+     */
+    private toHSB;
+    /**
+     * Converts an RGB color value to HSL.
+     * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB.
+     * @returns An HSLColor object.
+     */
+    private toHSL;
+    clone(): ColorType;
+    getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions;
+    formatChannelValue(channel: ColorChannel, locale: string): string;
+    getChannelRange(channel: ColorChannel): ColorChannelRange;
+    toJSON(): Record<"r" | "g" | "b" | "a", number>;
+    getFormat(): ColorFormat;
+    private static colorChannels;
+    getChannels(): [ColorChannel, ColorChannel, ColorChannel];
+}
+
+export { RGBColor };

package/dist/rgb-color.js

@@ -0,0 +1,213 @@
+"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 = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/rgb-color.ts
+var rgb_color_exports = {};
+__export(rgb_color_exports, {
+  RGBColor: () => RGBColor
+});
+module.exports = __toCommonJS(rgb_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_hsl_color = require("./hsl-color.cjs");
+var HEX_COLOR_REGEX = /^#[\da-f]+$/i;
+var RGB_COLOR_REGEX = /^rgba?\((.*)\)$/;
+var HEX_STARTING_REGEX = /[^#]/gi;
+var _RGBColor = class _RGBColor extends import_color.Color {
+  constructor(red, green, blue, alpha) {
+    super();
+    this.red = red;
+    this.green = green;
+    this.blue = blue;
+    this.alpha = alpha;
+  }
+  static parse(value) {
+    let colors = [];
+    if (HEX_COLOR_REGEX.test(value) && [4, 5, 7, 9].includes(value.length)) {
+      const values = (value.length < 6 ? value.replace(HEX_STARTING_REGEX, "$&$&") : value).slice(1).split("");
+      while (values.length > 0) {
+        colors.push(parseInt(values.splice(0, 2).join(""), 16));
+      }
+      colors[3] = colors[3] !== void 0 ? colors[3] / 255 : void 0;
+    }
+    const match = value.match(RGB_COLOR_REGEX);
+    if (match?.[1]) {
+      colors = match[1].split(",").map((value2) => Number(value2.trim())).map((num, i) => (0, import_utils.clampValue)(num, 0, i < 3 ? 255 : 1));
+    }
+    return colors.length < 3 ? void 0 : new _RGBColor(colors[0], colors[1], colors[2], colors[3] ?? 1);
+  }
+  toString(format = "css") {
+    switch (format) {
+      case "hex":
+        return "#" + (this.red.toString(16).padStart(2, "0") + this.green.toString(16).padStart(2, "0") + this.blue.toString(16).padStart(2, "0")).toUpperCase();
+      case "hexa":
+        return "#" + (this.red.toString(16).padStart(2, "0") + this.green.toString(16).padStart(2, "0") + this.blue.toString(16).padStart(2, "0") + Math.round(this.alpha * 255).toString(16).padStart(2, "0")).toUpperCase();
+      case "rgb":
+        return `rgb(${this.red}, ${this.green}, ${this.blue})`;
+      case "css":
+      case "rgba":
+        return `rgba(${this.red}, ${this.green}, ${this.blue}, ${this.alpha})`;
+      case "hsl":
+        return this.toHSL().toString("hsl");
+      case "hsb":
+        return this.toHSB().toString("hsb");
+      default:
+        return this.toFormat(format).toString(format);
+    }
+  }
+  toFormat(format) {
+    switch (format) {
+      case "rgba":
+        return this;
+      case "hsba":
+        return this.toHSB();
+      case "hsla":
+        return this.toHSL();
+      default:
+        throw new Error("Unsupported color conversion: rgb -> " + format);
+    }
+  }
+  toHexInt() {
+    return this.red << 16 | this.green << 8 | this.blue;
+  }
+  /**
+   * Converts an RGB color value to HSB.
+   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB.
+   * @returns An HSBColor object.
+   */
+  toHSB() {
+    const red = this.red / 255;
+    const green = this.green / 255;
+    const blue = this.blue / 255;
+    const min = Math.min(red, green, blue);
+    const brightness = Math.max(red, green, blue);
+    const chroma = brightness - min;
+    const saturation = brightness === 0 ? 0 : chroma / brightness;
+    let hue = 0;
+    if (chroma !== 0) {
+      switch (brightness) {
+        case red:
+          hue = (green - blue) / chroma + (green < blue ? 6 : 0);
+          break;
+        case green:
+          hue = (blue - red) / chroma + 2;
+          break;
+        case blue:
+          hue = (red - green) / chroma + 4;
+          break;
+      }
+      hue /= 6;
+    }
+    return new import_hsb_color.HSBColor(
+      (0, import_utils.toFixedNumber)(hue * 360, 2),
+      (0, import_utils.toFixedNumber)(saturation * 100, 2),
+      (0, import_utils.toFixedNumber)(brightness * 100, 2),
+      (0, import_utils.toFixedNumber)(this.alpha, 2)
+    );
+  }
+  /**
+   * Converts an RGB color value to HSL.
+   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB.
+   * @returns An HSLColor object.
+   */
+  toHSL() {
+    const red = this.red / 255;
+    const green = this.green / 255;
+    const blue = this.blue / 255;
+    const min = Math.min(red, green, blue);
+    const max = Math.max(red, green, blue);
+    const lightness = (max + min) / 2;
+    const chroma = max - min;
+    let hue = -1;
+    let saturation = -1;
+    if (chroma === 0) {
+      hue = saturation = 0;
+    } else {
+      saturation = chroma / (lightness < 0.5 ? max + min : 2 - max - min);
+      switch (max) {
+        case red:
+          hue = (green - blue) / chroma + (green < blue ? 6 : 0);
+          break;
+        case green:
+          hue = (blue - red) / chroma + 2;
+          break;
+        case blue:
+          hue = (red - green) / chroma + 4;
+          break;
+      }
+      hue /= 6;
+    }
+    return new import_hsl_color.HSLColor(
+      (0, import_utils.toFixedNumber)(hue * 360, 2),
+      (0, import_utils.toFixedNumber)(saturation * 100, 2),
+      (0, import_utils.toFixedNumber)(lightness * 100, 2),
+      (0, import_utils.toFixedNumber)(this.alpha, 2)
+    );
+  }
+  clone() {
+    return new _RGBColor(this.red, this.green, this.blue, this.alpha);
+  }
+  getChannelFormatOptions(channel) {
+    switch (channel) {
+      case "red":
+      case "green":
+      case "blue":
+        return { style: "decimal" };
+      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);
+    return new Intl.NumberFormat(locale, options).format(value);
+  }
+  getChannelRange(channel) {
+    switch (channel) {
+      case "red":
+      case "green":
+      case "blue":
+        return { minValue: 0, maxValue: 255, step: 1, pageSize: 17 };
+      case "alpha":
+        return { minValue: 0, maxValue: 1, step: 0.01, pageSize: 0.1 };
+      default:
+        throw new Error("Unknown color channel: " + channel);
+    }
+  }
+  toJSON() {
+    return { r: this.red, g: this.green, b: this.blue, a: this.alpha };
+  }
+  getFormat() {
+    return "rgba";
+  }
+  getChannels() {
+    return _RGBColor.colorChannels;
+  }
+};
+__publicField(_RGBColor, "colorChannels", ["red", "green", "blue"]);
+var RGBColor = _RGBColor;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RGBColor
+});

package/dist/rgb-color.mjs

@@ -0,0 +1,190 @@
+import {
+  __publicField
+} from "./chunk-QZ7TP4HQ.mjs";
+
+// src/rgb-color.ts
+import { clampValue, toFixedNumber } from "@zag-js/utils";
+import { Color } from "./color.mjs";
+import { HSBColor } from "./hsb-color.mjs";
+import { HSLColor } from "./hsl-color.mjs";
+var HEX_COLOR_REGEX = /^#[\da-f]+$/i;
+var RGB_COLOR_REGEX = /^rgba?\((.*)\)$/;
+var HEX_STARTING_REGEX = /[^#]/gi;
+var _RGBColor = class _RGBColor extends Color {
+  constructor(red, green, blue, alpha) {
+    super();
+    this.red = red;
+    this.green = green;
+    this.blue = blue;
+    this.alpha = alpha;
+  }
+  static parse(value) {
+    let colors = [];
+    if (HEX_COLOR_REGEX.test(value) && [4, 5, 7, 9].includes(value.length)) {
+      const values = (value.length < 6 ? value.replace(HEX_STARTING_REGEX, "$&$&") : value).slice(1).split("");
+      while (values.length > 0) {
+        colors.push(parseInt(values.splice(0, 2).join(""), 16));
+      }
+      colors[3] = colors[3] !== void 0 ? colors[3] / 255 : void 0;
+    }
+    const match = value.match(RGB_COLOR_REGEX);
+    if (match?.[1]) {
+      colors = match[1].split(",").map((value2) => Number(value2.trim())).map((num, i) => clampValue(num, 0, i < 3 ? 255 : 1));
+    }
+    return colors.length < 3 ? void 0 : new _RGBColor(colors[0], colors[1], colors[2], colors[3] ?? 1);
+  }
+  toString(format = "css") {
+    switch (format) {
+      case "hex":
+        return "#" + (this.red.toString(16).padStart(2, "0") + this.green.toString(16).padStart(2, "0") + this.blue.toString(16).padStart(2, "0")).toUpperCase();
+      case "hexa":
+        return "#" + (this.red.toString(16).padStart(2, "0") + this.green.toString(16).padStart(2, "0") + this.blue.toString(16).padStart(2, "0") + Math.round(this.alpha * 255).toString(16).padStart(2, "0")).toUpperCase();
+      case "rgb":
+        return `rgb(${this.red}, ${this.green}, ${this.blue})`;
+      case "css":
+      case "rgba":
+        return `rgba(${this.red}, ${this.green}, ${this.blue}, ${this.alpha})`;
+      case "hsl":
+        return this.toHSL().toString("hsl");
+      case "hsb":
+        return this.toHSB().toString("hsb");
+      default:
+        return this.toFormat(format).toString(format);
+    }
+  }
+  toFormat(format) {
+    switch (format) {
+      case "rgba":
+        return this;
+      case "hsba":
+        return this.toHSB();
+      case "hsla":
+        return this.toHSL();
+      default:
+        throw new Error("Unsupported color conversion: rgb -> " + format);
+    }
+  }
+  toHexInt() {
+    return this.red << 16 | this.green << 8 | this.blue;
+  }
+  /**
+   * Converts an RGB color value to HSB.
+   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB.
+   * @returns An HSBColor object.
+   */
+  toHSB() {
+    const red = this.red / 255;
+    const green = this.green / 255;
+    const blue = this.blue / 255;
+    const min = Math.min(red, green, blue);
+    const brightness = Math.max(red, green, blue);
+    const chroma = brightness - min;
+    const saturation = brightness === 0 ? 0 : chroma / brightness;
+    let hue = 0;
+    if (chroma !== 0) {
+      switch (brightness) {
+        case red:
+          hue = (green - blue) / chroma + (green < blue ? 6 : 0);
+          break;
+        case green:
+          hue = (blue - red) / chroma + 2;
+          break;
+        case blue:
+          hue = (red - green) / chroma + 4;
+          break;
+      }
+      hue /= 6;
+    }
+    return new HSBColor(
+      toFixedNumber(hue * 360, 2),
+      toFixedNumber(saturation * 100, 2),
+      toFixedNumber(brightness * 100, 2),
+      toFixedNumber(this.alpha, 2)
+    );
+  }
+  /**
+   * Converts an RGB color value to HSL.
+   * Conversion formula adapted from https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB.
+   * @returns An HSLColor object.
+   */
+  toHSL() {
+    const red = this.red / 255;
+    const green = this.green / 255;
+    const blue = this.blue / 255;
+    const min = Math.min(red, green, blue);
+    const max = Math.max(red, green, blue);
+    const lightness = (max + min) / 2;
+    const chroma = max - min;
+    let hue = -1;
+    let saturation = -1;
+    if (chroma === 0) {
+      hue = saturation = 0;
+    } else {
+      saturation = chroma / (lightness < 0.5 ? max + min : 2 - max - min);
+      switch (max) {
+        case red:
+          hue = (green - blue) / chroma + (green < blue ? 6 : 0);
+          break;
+        case green:
+          hue = (blue - red) / chroma + 2;
+          break;
+        case blue:
+          hue = (red - green) / chroma + 4;
+          break;
+      }
+      hue /= 6;
+    }
+    return new HSLColor(
+      toFixedNumber(hue * 360, 2),
+      toFixedNumber(saturation * 100, 2),
+      toFixedNumber(lightness * 100, 2),
+      toFixedNumber(this.alpha, 2)
+    );
+  }
+  clone() {
+    return new _RGBColor(this.red, this.green, this.blue, this.alpha);
+  }
+  getChannelFormatOptions(channel) {
+    switch (channel) {
+      case "red":
+      case "green":
+      case "blue":
+        return { style: "decimal" };
+      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);
+    return new Intl.NumberFormat(locale, options).format(value);
+  }
+  getChannelRange(channel) {
+    switch (channel) {
+      case "red":
+      case "green":
+      case "blue":
+        return { minValue: 0, maxValue: 255, step: 1, pageSize: 17 };
+      case "alpha":
+        return { minValue: 0, maxValue: 1, step: 0.01, pageSize: 0.1 };
+      default:
+        throw new Error("Unknown color channel: " + channel);
+    }
+  }
+  toJSON() {
+    return { r: this.red, g: this.green, b: this.blue, a: this.alpha };
+  }
+  getFormat() {
+    return "rgba";
+  }
+  getChannels() {
+    return _RGBColor.colorChannels;
+  }
+};
+__publicField(_RGBColor, "colorChannels", ["red", "green", "blue"]);
+var RGBColor = _RGBColor;
+export {
+  RGBColor
+};