@zag-js/color-utils 0.69.0 → 0.71.0

package/src/hsl-color.ts

@@ -1,153 +0,0 @@
-import { clampValue, mod, toFixedNumber } from "@zag-js/numeric-range"
-import { Color } from "./color"
-import { HSBColor } from "./hsb-color"
-import { RGBColor } from "./rgb-color"
-import type { ColorChannel, ColorChannelRange, ColorFormat, ColorStringFormat, ColorType } from "./types"
-
-export const 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+)?)\)/
-
-export class HSLColor extends Color {
-  constructor(
-    private hue: number,
-    private saturation: number,
-    private lightness: number,
-    private alpha: number,
-  ) {
-    super()
-  }
-
-  static parse(value: string): HSLColor | void {
-    let m: RegExpMatchArray | null
-    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: ColorStringFormat) {
-    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: ColorFormat): ColorType {
-    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.
-   */
-  private toHSB(): ColorType {
-    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.
-   */
-  private toRGB(): ColorType {
-    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: number, 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(): ColorType {
-    return new HSLColor(this.hue, this.saturation, this.lightness, this.alpha)
-  }
-
-  getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions {
-    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: ColorChannel, locale: string) {
-    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: ColorChannel): ColorChannelRange {
-    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(): Record<"h" | "s" | "l" | "a", number> {
-    return { h: this.hue, s: this.saturation, l: this.lightness, a: this.alpha }
-  }
-
-  getFormat(): ColorFormat {
-    return "hsla"
-  }
-
-  private static colorChannels: [ColorChannel, ColorChannel, ColorChannel] = ["hue", "saturation", "lightness"]
-
-  getChannels(): [ColorChannel, ColorChannel, ColorChannel] {
-    return HSLColor.colorChannels
-  }
-}

package/src/index.ts

@@ -1,4 +0,0 @@
-export { getColorAreaGradient } from "./area-gradient"
-export { Color } from "./color"
-export { normalizeColor, parseColor } from "./parse-color"
-export type { ColorAxes, ColorChannel, ColorChannelRange, ColorFormat, ColorType } from "./types"

package/src/native-color.ts

@@ -1,14 +0,0 @@
-const nativeColors /* @__PURE__ */ =
-  "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,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"
-
-const makeMap = (str: string) => {
-  const map = new Map<string, string>()
-  const list = str.split(",")
-  for (let i = 0; i < list.length; i++) {
-    const [key, val] = list[i].split(":")
-    map.set(key, `#${val}`)
-  }
-  return map
-}
-
-export const nativeColorMap /* @__PURE__ */ = makeMap(nativeColors)

package/src/parse-color.ts

@@ -1,25 +0,0 @@
-import { HSBColor } from "./hsb-color"
-import { HSLColor } from "./hsl-color"
-import { nativeColorMap } from "./native-color"
-import { RGBColor } from "./rgb-color"
-import type { ColorType } from "./types"
-
-export const parseColor = (value: string): ColorType => {
-  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
-}
-
-export const normalizeColor = (v: string | ColorType) => {
-  return typeof v === "string" ? parseColor(v) : v
-}

package/src/rgb-color.ts

@@ -1,230 +0,0 @@
-import { clampValue, toFixedNumber } from "@zag-js/numeric-range"
-import { Color } from "./color"
-import { HSBColor } from "./hsb-color"
-import { HSLColor } from "./hsl-color"
-import type { ColorChannel, ColorChannelRange, ColorFormat, ColorStringFormat, ColorType } from "./types"
-
-export class RGBColor extends Color {
-  constructor(
-    private red: number,
-    private green: number,
-    private blue: number,
-    private alpha: number,
-  ) {
-    super()
-  }
-
-  static parse(value: string) {
-    let colors: (number | undefined)[] = []
-
-    // matching #rgb, #rgba, #rrggbb, #rrggbbaa
-    if (/^#[\da-f]+$/i.test(value) && [4, 5, 7, 9].includes(value.length)) {
-      const values = (value.length < 6 ? value.replace(/[^#]/gi, "$&$&") : value).slice(1).split("")
-      while (values.length > 0) {
-        colors.push(parseInt(values.splice(0, 2).join(""), 16))
-      }
-      colors[3] = colors[3] !== undefined ? colors[3] / 255 : undefined
-    }
-
-    // matching rgb(rrr, ggg, bbb), rgba(rrr, ggg, bbb, 0.a)
-    const match = value.match(/^rgba?\((.*)\)$/)
-
-    if (match?.[1]) {
-      colors = match[1]
-        .split(",")
-        .map((value) => Number(value.trim()))
-        .map((num, i) => clampValue(num, 0, i < 3 ? 255 : 1))
-    }
-
-    //@ts-expect-error
-    return colors.length < 3 ? undefined : new RGBColor(colors[0], colors[1], colors[2], colors[3] ?? 1)
-  }
-
-  toString(format: ColorStringFormat) {
-    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: ColorFormat): ColorType {
-    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(): number {
-    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.
-   */
-  private toHSB(): ColorType {
-    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 // achromatic
-
-    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.
-   */
-  private toHSL(): ColorType {
-    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 // achromatic
-    } 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(): ColorType {
-    return new RGBColor(this.red, this.green, this.blue, this.alpha)
-  }
-
-  getChannelFormatOptions(channel: ColorChannel): Intl.NumberFormatOptions {
-    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: ColorChannel, locale: string) {
-    let options = this.getChannelFormatOptions(channel)
-    let value = this.getChannelValue(channel)
-    return new Intl.NumberFormat(locale, options).format(value)
-  }
-
-  getChannelRange(channel: ColorChannel): ColorChannelRange {
-    switch (channel) {
-      case "red":
-      case "green":
-      case "blue":
-        return { minValue: 0x0, maxValue: 0xff, step: 0x1, pageSize: 0x11 }
-      case "alpha":
-        return { minValue: 0, maxValue: 1, step: 0.01, pageSize: 0.1 }
-      default:
-        throw new Error("Unknown color channel: " + channel)
-    }
-  }
-
-  toJSON(): Record<"r" | "g" | "b" | "a", number> {
-    return { r: this.red, g: this.green, b: this.blue, a: this.alpha }
-  }
-
-  getFormat(): ColorFormat {
-    return "rgba"
-  }
-
-  private static colorChannels: [ColorChannel, ColorChannel, ColorChannel] = ["red", "green", "blue"]
-
-  getChannels(): [ColorChannel, ColorChannel, ColorChannel] {
-    return RGBColor.colorChannels
-  }
-}

package/src/types.ts

@@ -1,94 +0,0 @@
-export type ColorHexFormat = "hex" | "hexa"
-
-export type ColorFormat = "rgba" | "hsla" | "hsba"
-
-export type ColorStringFormat = ColorHexFormat | ColorFormat | "rgb" | "hsl" | "hsb" | "css"
-
-export type ColorChannel = "hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha"
-
-export interface Color2DAxes {
-  xChannel: ColorChannel
-  yChannel: ColorChannel
-}
-
-export interface ColorAxes extends Color2DAxes {
-  zChannel: ColorChannel
-}
-
-export 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
-}
-
-export 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. */
-  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
-}