@zag-js/color-utils 1.34.1 → 1.35.0

package/dist/area-gradient.d.mts

@@ -0,0 +1,15 @@
+import { Color } from './color.mjs';
+import { ColorChannel } from './types.mjs';
+
+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;
+
+export { getColorAreaGradient };

package/dist/area-gradient.d.ts

@@ -0,0 +1,15 @@
+import { Color } from './color.js';
+import { ColorChannel } from './types.js';
+
+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;
+
+export { getColorAreaGradient };

package/dist/area-gradient.js

@@ -0,0 +1,87 @@
+"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/area-gradient.ts
+var area_gradient_exports = {};
+__export(area_gradient_exports, {
+  getColorAreaGradient: () => getColorAreaGradient
+});
+module.exports = __toCommonJS(area_gradient_exports);
+var import_color_format_gradient = require("./color-format-gradient.cjs");
+function getColorAreaGradient(color, options) {
+  const { xChannel, yChannel, dir: dirProp = "ltr" } = options;
+  const { zChannel } = color.getColorAxes({ xChannel, yChannel });
+  const zValue = color.getChannelValue(zChannel);
+  const { minValue: zMin, maxValue: zMax } = color.getChannelRange(zChannel);
+  const orientation = ["top", dirProp === "rtl" ? "left" : "right"];
+  let dir = false;
+  let background = { areaStyles: {}, areaGradientStyles: {} };
+  let alphaValue = (zValue - zMin) / (zMax - zMin);
+  let isHSL = color.getFormat() === "hsla";
+  switch (zChannel) {
+    case "red": {
+      dir = xChannel === "green";
+      background = (0, import_color_format_gradient.generateRGB_R)(orientation, dir, zValue);
+      break;
+    }
+    case "green": {
+      dir = xChannel === "red";
+      background = (0, import_color_format_gradient.generateRGB_G)(orientation, dir, zValue);
+      break;
+    }
+    case "blue": {
+      dir = xChannel === "red";
+      background = (0, import_color_format_gradient.generateRGB_B)(orientation, dir, zValue);
+      break;
+    }
+    case "hue": {
+      dir = xChannel !== "saturation";
+      if (isHSL) {
+        background = (0, import_color_format_gradient.generateHSL_H)(orientation, dir, zValue);
+      } else {
+        background = (0, import_color_format_gradient.generateHSB_H)(orientation, dir, zValue);
+      }
+      break;
+    }
+    case "saturation": {
+      dir = xChannel === "hue";
+      if (isHSL) {
+        background = (0, import_color_format_gradient.generateHSL_S)(orientation, dir, alphaValue);
+      } else {
+        background = (0, import_color_format_gradient.generateHSB_S)(orientation, dir, alphaValue);
+      }
+      break;
+    }
+    case "brightness": {
+      dir = xChannel === "hue";
+      background = (0, import_color_format_gradient.generateHSB_B)(orientation, dir, alphaValue);
+      break;
+    }
+    case "lightness": {
+      dir = xChannel === "hue";
+      background = (0, import_color_format_gradient.generateHSL_L)(orientation, dir, zValue);
+      break;
+    }
+  }
+  return background;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getColorAreaGradient
+});

package/dist/area-gradient.mjs

@@ -0,0 +1,74 @@
+import "./chunk-QZ7TP4HQ.mjs";
+
+// src/area-gradient.ts
+import {
+  generateRGB_R,
+  generateRGB_G,
+  generateRGB_B,
+  generateHSL_H,
+  generateHSB_H,
+  generateHSL_S,
+  generateHSB_S,
+  generateHSB_B,
+  generateHSL_L
+} from "./color-format-gradient.mjs";
+function getColorAreaGradient(color, options) {
+  const { xChannel, yChannel, dir: dirProp = "ltr" } = options;
+  const { zChannel } = color.getColorAxes({ xChannel, yChannel });
+  const zValue = color.getChannelValue(zChannel);
+  const { minValue: zMin, maxValue: zMax } = color.getChannelRange(zChannel);
+  const orientation = ["top", dirProp === "rtl" ? "left" : "right"];
+  let dir = false;
+  let background = { areaStyles: {}, areaGradientStyles: {} };
+  let alphaValue = (zValue - zMin) / (zMax - zMin);
+  let isHSL = color.getFormat() === "hsla";
+  switch (zChannel) {
+    case "red": {
+      dir = xChannel === "green";
+      background = generateRGB_R(orientation, dir, zValue);
+      break;
+    }
+    case "green": {
+      dir = xChannel === "red";
+      background = generateRGB_G(orientation, dir, zValue);
+      break;
+    }
+    case "blue": {
+      dir = xChannel === "red";
+      background = generateRGB_B(orientation, dir, zValue);
+      break;
+    }
+    case "hue": {
+      dir = xChannel !== "saturation";
+      if (isHSL) {
+        background = generateHSL_H(orientation, dir, zValue);
+      } else {
+        background = generateHSB_H(orientation, dir, zValue);
+      }
+      break;
+    }
+    case "saturation": {
+      dir = xChannel === "hue";
+      if (isHSL) {
+        background = generateHSL_S(orientation, dir, alphaValue);
+      } else {
+        background = generateHSB_S(orientation, dir, alphaValue);
+      }
+      break;
+    }
+    case "brightness": {
+      dir = xChannel === "hue";
+      background = generateHSB_B(orientation, dir, alphaValue);
+      break;
+    }
+    case "lightness": {
+      dir = xChannel === "hue";
+      background = generateHSL_L(orientation, dir, zValue);
+      break;
+    }
+  }
+  return background;
+}
+export {
+  getColorAreaGradient
+};

package/dist/chunk-QZ7TP4HQ.mjs

@@ -0,0 +1,7 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+export {
+  __publicField
+};

package/dist/color-format-gradient.d.mts

@@ -0,0 +1,68 @@
+declare const generateRGB_R: (orientation: [string, string], dir: boolean, zValue: number) => {
+    areaStyles: {
+        backgroundImage: string;
+    };
+    areaGradientStyles: {
+        backgroundImage: string;
+        WebkitMaskImage: string;
+        maskImage: string;
+    };
+};
+declare const generateRGB_G: (orientation: [string, string], dir: boolean, zValue: number) => {
+    areaStyles: {
+        backgroundImage: string;
+    };
+    areaGradientStyles: {
+        backgroundImage: string;
+        WebkitMaskImage: string;
+        maskImage: string;
+    };
+};
+declare const generateRGB_B: (orientation: [string, string], dir: boolean, zValue: number) => {
+    areaStyles: {
+        backgroundImage: string;
+    };
+    areaGradientStyles: {
+        backgroundImage: string;
+        WebkitMaskImage: string;
+        maskImage: string;
+    };
+};
+declare const generateHSL_H: (orientation: [string, string], dir: boolean, zValue: number) => {
+    areaStyles: {};
+    areaGradientStyles: {
+        background: string;
+    };
+};
+declare const generateHSL_S: (orientation: [string, string], dir: boolean, alphaValue: number) => {
+    areaStyles: {};
+    areaGradientStyles: {
+        background: string;
+    };
+};
+declare const generateHSL_L: (orientation: [string, string], dir: boolean, zValue: number) => {
+    areaStyles: {};
+    areaGradientStyles: {
+        backgroundImage: string;
+    };
+};
+declare const generateHSB_H: (orientation: [string, string], dir: boolean, zValue: number) => {
+    areaStyles: {};
+    areaGradientStyles: {
+        background: string;
+    };
+};
+declare const generateHSB_S: (orientation: [string, string], dir: boolean, alphaValue: number) => {
+    areaStyles: {};
+    areaGradientStyles: {
+        background: string;
+    };
+};
+declare const generateHSB_B: (orientation: [string, string], dir: boolean, alphaValue: number) => {
+    areaStyles: {};
+    areaGradientStyles: {
+        background: string;
+    };
+};
+
+export { generateHSB_B, generateHSB_H, generateHSB_S, generateHSL_H, generateHSL_L, generateHSL_S, generateRGB_B, generateRGB_G, generateRGB_R };

package/dist/color-format-gradient.d.ts

@@ -0,0 +1,68 @@
+declare const generateRGB_R: (orientation: [string, string], dir: boolean, zValue: number) => {
+    areaStyles: {
+        backgroundImage: string;
+    };
+    areaGradientStyles: {
+        backgroundImage: string;
+        WebkitMaskImage: string;
+        maskImage: string;
+    };
+};
+declare const generateRGB_G: (orientation: [string, string], dir: boolean, zValue: number) => {
+    areaStyles: {
+        backgroundImage: string;
+    };
+    areaGradientStyles: {
+        backgroundImage: string;
+        WebkitMaskImage: string;
+        maskImage: string;
+    };
+};
+declare const generateRGB_B: (orientation: [string, string], dir: boolean, zValue: number) => {
+    areaStyles: {
+        backgroundImage: string;
+    };
+    areaGradientStyles: {
+        backgroundImage: string;
+        WebkitMaskImage: string;
+        maskImage: string;
+    };
+};
+declare const generateHSL_H: (orientation: [string, string], dir: boolean, zValue: number) => {
+    areaStyles: {};
+    areaGradientStyles: {
+        background: string;
+    };
+};
+declare const generateHSL_S: (orientation: [string, string], dir: boolean, alphaValue: number) => {
+    areaStyles: {};
+    areaGradientStyles: {
+        background: string;
+    };
+};
+declare const generateHSL_L: (orientation: [string, string], dir: boolean, zValue: number) => {
+    areaStyles: {};
+    areaGradientStyles: {
+        backgroundImage: string;
+    };
+};
+declare const generateHSB_H: (orientation: [string, string], dir: boolean, zValue: number) => {
+    areaStyles: {};
+    areaGradientStyles: {
+        background: string;
+    };
+};
+declare const generateHSB_S: (orientation: [string, string], dir: boolean, alphaValue: number) => {
+    areaStyles: {};
+    areaGradientStyles: {
+        background: string;
+    };
+};
+declare const generateHSB_B: (orientation: [string, string], dir: boolean, alphaValue: number) => {
+    areaStyles: {};
+    areaGradientStyles: {
+        background: string;
+    };
+};
+
+export { generateHSB_B, generateHSB_H, generateHSB_S, generateHSL_H, generateHSL_L, generateHSL_S, generateRGB_B, generateRGB_G, generateRGB_R };

package/dist/color-format-gradient.js

@@ -0,0 +1,164 @@
+"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/color-format-gradient.ts
+var color_format_gradient_exports = {};
+__export(color_format_gradient_exports, {
+  generateHSB_B: () => generateHSB_B,
+  generateHSB_H: () => generateHSB_H,
+  generateHSB_S: () => generateHSB_S,
+  generateHSL_H: () => generateHSL_H,
+  generateHSL_L: () => generateHSL_L,
+  generateHSL_S: () => generateHSL_S,
+  generateRGB_B: () => generateRGB_B,
+  generateRGB_G: () => generateRGB_G,
+  generateRGB_R: () => generateRGB_R
+});
+module.exports = __toCommonJS(color_format_gradient_exports);
+var generateRGB_R = (orientation, dir, zValue) => {
+  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
+  const result = {
+    areaStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`
+    },
+    areaGradientStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,
+      WebkitMaskImage: maskImage,
+      maskImage
+    }
+  };
+  return result;
+};
+var generateRGB_G = (orientation, dir, zValue) => {
+  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
+  const result = {
+    areaStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`
+    },
+    areaGradientStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,
+      WebkitMaskImage: maskImage,
+      maskImage
+    }
+  };
+  return result;
+};
+var generateRGB_B = (orientation, dir, zValue) => {
+  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
+  const result = {
+    areaStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`
+    },
+    areaGradientStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,
+      WebkitMaskImage: maskImage,
+      maskImage
+    }
+  };
+  return result;
+};
+var generateHSL_H = (orientation, dir, zValue) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${orientation[Number(dir)]}, hsla(0,0%,0%,1) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,1) 100%)`,
+        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,50%),hsla(0,0%,50%,0))`,
+        `hsl(${zValue}, 100%, 50%)`
+      ].join(",")
+    }
+  };
+  return result;
+};
+var generateHSL_S = (orientation, dir, alphaValue) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${orientation[Number(!dir)]}, hsla(0,0%,0%,${alphaValue}) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,${alphaValue}) 100%)`,
+        `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
+        "hsl(0, 0%, 50%)"
+      ].join(",")
+    }
+  };
+  return result;
+};
+var generateHSL_L = (orientation, dir, zValue) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      backgroundImage: [
+        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,${zValue}%),hsla(0,0%,${zValue}%,0))`,
+        `linear-gradient(to ${orientation[Number(dir)]},hsl(0,100%,${zValue}%),hsl(60,100%,${zValue}%),hsl(120,100%,${zValue}%),hsl(180,100%,${zValue}%),hsl(240,100%,${zValue}%),hsl(300,100%,${zValue}%),hsl(360,100%,${zValue}%))`
+      ].join(",")
+    }
+  };
+  return result;
+};
+var generateHSB_H = (orientation, dir, zValue) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${orientation[Number(dir)]},hsl(0,0%,0%),hsla(0,0%,0%,0))`,
+        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,100%),hsla(0,0%,100%,0))`,
+        `hsl(${zValue}, 100%, 50%)`
+      ].join(",")
+    }
+  };
+  return result;
+};
+var generateHSB_S = (orientation, dir, alphaValue) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,0%,${alphaValue}),hsla(0,0%,0%,0))`,
+        `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
+        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,0%),hsl(0,0%,100%))`
+      ].join(",")
+    }
+  };
+  return result;
+};
+var generateHSB_B = (orientation, dir, alphaValue) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,100%,${alphaValue}),hsla(0,0%,100%,0))`,
+        `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
+        "#000"
+      ].join(",")
+    }
+  };
+  return result;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  generateHSB_B,
+  generateHSB_H,
+  generateHSB_S,
+  generateHSL_H,
+  generateHSL_L,
+  generateHSL_S,
+  generateRGB_B,
+  generateRGB_G,
+  generateRGB_R
+});

package/dist/color-format-gradient.mjs

@@ -0,0 +1,133 @@
+import "./chunk-QZ7TP4HQ.mjs";
+
+// src/color-format-gradient.ts
+var generateRGB_R = (orientation, dir, zValue) => {
+  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
+  const result = {
+    areaStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`
+    },
+    areaGradientStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,
+      WebkitMaskImage: maskImage,
+      maskImage
+    }
+  };
+  return result;
+};
+var generateRGB_G = (orientation, dir, zValue) => {
+  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
+  const result = {
+    areaStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`
+    },
+    areaGradientStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,
+      WebkitMaskImage: maskImage,
+      maskImage
+    }
+  };
+  return result;
+};
+var generateRGB_B = (orientation, dir, zValue) => {
+  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
+  const result = {
+    areaStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`
+    },
+    areaGradientStyles: {
+      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,
+      WebkitMaskImage: maskImage,
+      maskImage
+    }
+  };
+  return result;
+};
+var generateHSL_H = (orientation, dir, zValue) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${orientation[Number(dir)]}, hsla(0,0%,0%,1) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,1) 100%)`,
+        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,50%),hsla(0,0%,50%,0))`,
+        `hsl(${zValue}, 100%, 50%)`
+      ].join(",")
+    }
+  };
+  return result;
+};
+var generateHSL_S = (orientation, dir, alphaValue) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${orientation[Number(!dir)]}, hsla(0,0%,0%,${alphaValue}) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,${alphaValue}) 100%)`,
+        `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
+        "hsl(0, 0%, 50%)"
+      ].join(",")
+    }
+  };
+  return result;
+};
+var generateHSL_L = (orientation, dir, zValue) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      backgroundImage: [
+        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,${zValue}%),hsla(0,0%,${zValue}%,0))`,
+        `linear-gradient(to ${orientation[Number(dir)]},hsl(0,100%,${zValue}%),hsl(60,100%,${zValue}%),hsl(120,100%,${zValue}%),hsl(180,100%,${zValue}%),hsl(240,100%,${zValue}%),hsl(300,100%,${zValue}%),hsl(360,100%,${zValue}%))`
+      ].join(",")
+    }
+  };
+  return result;
+};
+var generateHSB_H = (orientation, dir, zValue) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${orientation[Number(dir)]},hsl(0,0%,0%),hsla(0,0%,0%,0))`,
+        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,100%),hsla(0,0%,100%,0))`,
+        `hsl(${zValue}, 100%, 50%)`
+      ].join(",")
+    }
+  };
+  return result;
+};
+var generateHSB_S = (orientation, dir, alphaValue) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,0%,${alphaValue}),hsla(0,0%,0%,0))`,
+        `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
+        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,0%),hsl(0,0%,100%))`
+      ].join(",")
+    }
+  };
+  return result;
+};
+var generateHSB_B = (orientation, dir, alphaValue) => {
+  const result = {
+    areaStyles: {},
+    areaGradientStyles: {
+      background: [
+        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,100%,${alphaValue}),hsla(0,0%,100%,0))`,
+        `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
+        "#000"
+      ].join(",")
+    }
+  };
+  return result;
+};
+export {
+  generateHSB_B,
+  generateHSB_H,
+  generateHSB_S,
+  generateHSL_H,
+  generateHSL_L,
+  generateHSL_S,
+  generateRGB_B,
+  generateRGB_G,
+  generateRGB_R
+};

package/dist/color.d.mts

@@ -0,0 +1,23 @@
+import { ColorType, ColorFormat, ColorStringFormat, ColorChannel, ColorChannelRange, Color2DAxes, ColorAxes } from './types.mjs';
+
+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;
+}
+
+export { Color };

package/dist/color.d.ts

@@ -0,0 +1,23 @@
+import { ColorType, ColorFormat, ColorStringFormat, ColorChannel, ColorChannelRange, Color2DAxes, ColorAxes } from './types.js';
+
+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;
+}
+
+export { Color };