@zag-js/color-picker 0.10.4 → 0.11.0

package/dist/utils/get-color-area-gradient.js

@@ -1,65 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const generateFormatBackground = require('./generate-format-background.js');
-
-function getColorAreaGradient(ctx, xChannel, yChannel) {
-  const value = ctx.valueAsColor;
-  const { zChannel } = value.getColorSpaceAxes({ xChannel, yChannel });
-  const zValue = value.getChannelValue(zChannel);
-  const { minValue: zMin, maxValue: zMax } = value.getChannelRange(zChannel);
-  const orientation = ["top", ctx.dir === "rtl" ? "left" : "right"];
-  let dir = false;
-  let background = { areaStyles: {}, areaGradientStyles: {} };
-  let alphaValue = (zValue - zMin) / (zMax - zMin);
-  let isHSL = value.getColorSpace() === "hsl";
-  switch (zChannel) {
-    case "red": {
-      dir = xChannel === "green";
-      background = generateFormatBackground.generateRGB_R(orientation, dir, zValue);
-      break;
-    }
-    case "green": {
-      dir = xChannel === "red";
-      background = generateFormatBackground.generateRGB_G(orientation, dir, zValue);
-      break;
-    }
-    case "blue": {
-      dir = xChannel === "red";
-      background = generateFormatBackground.generateRGB_B(orientation, dir, zValue);
-      break;
-    }
-    case "hue": {
-      dir = xChannel !== "saturation";
-      if (isHSL) {
-        background = generateFormatBackground.generateHSL_H(orientation, dir, zValue);
-      } else {
-        background = generateFormatBackground.generateHSB_H(orientation, dir, zValue);
-      }
-      break;
-    }
-    case "saturation": {
-      dir = xChannel === "hue";
-      if (isHSL) {
-        background = generateFormatBackground.generateHSL_S(orientation, dir, alphaValue);
-      } else {
-        background = generateFormatBackground.generateHSB_S(orientation, dir, alphaValue);
-      }
-      break;
-    }
-    case "brightness": {
-      dir = xChannel === "hue";
-      background = generateFormatBackground.generateHSB_B(orientation, dir, alphaValue);
-      break;
-    }
-    case "lightness": {
-      dir = xChannel === "hue";
-      background = generateFormatBackground.generateHSL_L(orientation, dir, zValue);
-      break;
-    }
-  }
-  return background;
-}
-
-exports.getColorAreaGradient = getColorAreaGradient;

package/dist/utils/get-color-area-gradient.mjs

@@ -1,61 +0,0 @@
-import { generateHSL_L, generateHSB_B, generateHSL_S, generateHSB_S, generateHSL_H, generateHSB_H, generateRGB_B, generateRGB_G, generateRGB_R } from './generate-format-background.mjs';
-
-function getColorAreaGradient(ctx, xChannel, yChannel) {
-  const value = ctx.valueAsColor;
-  const { zChannel } = value.getColorSpaceAxes({ xChannel, yChannel });
-  const zValue = value.getChannelValue(zChannel);
-  const { minValue: zMin, maxValue: zMax } = value.getChannelRange(zChannel);
-  const orientation = ["top", ctx.dir === "rtl" ? "left" : "right"];
-  let dir = false;
-  let background = { areaStyles: {}, areaGradientStyles: {} };
-  let alphaValue = (zValue - zMin) / (zMax - zMin);
-  let isHSL = value.getColorSpace() === "hsl";
-  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/utils/get-slider-background.d.ts

@@ -1,2 +0,0 @@
-import { ColorChannelProps, MachineContext } from "../color-picker.types";
-export declare const getSliderBgImage: (ctx: MachineContext, props: Required<ColorChannelProps>) => string;

package/dist/utils/get-slider-background.js

@@ -1,43 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-function getSliderBgDirection(orientation, dir) {
-  if (orientation === "vertical") {
-    return "top";
-  } else if (dir === "ltr") {
-    return "right";
-  } else {
-    return "left";
-  }
-}
-const getSliderBgImage = (ctx, props) => {
-  const { channel } = props;
-  const dir = getSliderBgDirection(props.orientation, ctx.dir);
-  const value = ctx.valueAsColor;
-  const { minValue, maxValue } = ctx.valueAsColor.getChannelRange(channel);
-  switch (channel) {
-    case "hue":
-      return `linear-gradient(to ${dir}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;
-    case "lightness": {
-      let start = ctx.valueAsColor.withChannelValue(channel, minValue).toString("css");
-      let middle = value.withChannelValue(channel, (maxValue - minValue) / 2).toString("css");
-      let end = value.withChannelValue(channel, maxValue).toString("css");
-      return `linear-gradient(to ${dir}, ${start}, ${middle}, ${end})`;
-    }
-    case "saturation":
-    case "brightness":
-    case "red":
-    case "green":
-    case "blue":
-    case "alpha": {
-      let start = value.withChannelValue(channel, minValue).toString("css");
-      let end = value.withChannelValue(channel, maxValue).toString("css");
-      return `linear-gradient(to ${dir}, ${start}, ${end})`;
-    }
-    default:
-      throw new Error("Unknown color channel: " + channel);
-  }
-};
-
-exports.getSliderBgImage = getSliderBgImage;

package/dist/utils/get-slider-background.mjs

@@ -1,39 +0,0 @@
-function getSliderBgDirection(orientation, dir) {
-  if (orientation === "vertical") {
-    return "top";
-  } else if (dir === "ltr") {
-    return "right";
-  } else {
-    return "left";
-  }
-}
-const getSliderBgImage = (ctx, props) => {
-  const { channel } = props;
-  const dir = getSliderBgDirection(props.orientation, ctx.dir);
-  const value = ctx.valueAsColor;
-  const { minValue, maxValue } = ctx.valueAsColor.getChannelRange(channel);
-  switch (channel) {
-    case "hue":
-      return `linear-gradient(to ${dir}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;
-    case "lightness": {
-      let start = ctx.valueAsColor.withChannelValue(channel, minValue).toString("css");
-      let middle = value.withChannelValue(channel, (maxValue - minValue) / 2).toString("css");
-      let end = value.withChannelValue(channel, maxValue).toString("css");
-      return `linear-gradient(to ${dir}, ${start}, ${middle}, ${end})`;
-    }
-    case "saturation":
-    case "brightness":
-    case "red":
-    case "green":
-    case "blue":
-    case "alpha": {
-      let start = value.withChannelValue(channel, minValue).toString("css");
-      let end = value.withChannelValue(channel, maxValue).toString("css");
-      return `linear-gradient(to ${dir}, ${start}, ${end})`;
-    }
-    default:
-      throw new Error("Unknown color channel: " + channel);
-  }
-};
-
-export { getSliderBgImage };