@zag-js/color-picker 0.0.0-dev-20230414151834

package/dist/index.mjs

@@ -0,0 +1,18 @@
+import {
+  connect
+} from "./chunk-J3XCPS5T.mjs";
+import "./chunk-JNBNPPMF.mjs";
+import "./chunk-KO4TBUXB.mjs";
+import "./chunk-3XH465XT.mjs";
+import "./chunk-75JXJMB5.mjs";
+import {
+  machine
+} from "./chunk-ZBNUATFY.mjs";
+import "./chunk-2ERX54SV.mjs";
+import "./chunk-ACSV4TXB.mjs";
+import "./chunk-OY3B7NXA.mjs";
+import "./chunk-KLLIOTK6.mjs";
+export {
+  connect,
+  machine
+};

package/dist/utils/generate-format-background.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/utils/generate-format-background.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/utils/generate-format-background.ts
+var generate_format_background_exports = {};
+__export(generate_format_background_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(generate_format_background_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/utils/generate-format-background.mjs

@@ -0,0 +1,22 @@
+import {
+  generateHSB_B,
+  generateHSB_H,
+  generateHSB_S,
+  generateHSL_H,
+  generateHSL_L,
+  generateHSL_S,
+  generateRGB_B,
+  generateRGB_G,
+  generateRGB_R
+} from "../chunk-OY3B7NXA.mjs";
+export {
+  generateHSB_B,
+  generateHSB_H,
+  generateHSB_S,
+  generateHSL_H,
+  generateHSL_L,
+  generateHSL_S,
+  generateRGB_B,
+  generateRGB_G,
+  generateRGB_R
+};

package/dist/utils/get-channel-details.d.ts

@@ -0,0 +1,23 @@
+import * as _zag_js_color_utils from '@zag-js/color-utils';
+import { Color, ColorChannel } from '@zag-js/color-utils';
+
+declare function getChannelDetails(color: Color, xChannel: ColorChannel, yChannel: ColorChannel): {
+    channels: _zag_js_color_utils.ColorAxes;
+    xChannelStep: number;
+    yChannelStep: number;
+    xChannelPageStep: number;
+    yChannelPageStep: number;
+    xValue: number;
+    yValue: number;
+    getThumbPosition(): {
+        x: number;
+        y: number;
+    };
+    incrementX(stepSize: number): number;
+    incrementY(stepSize: number): number;
+    decrementX(stepSize: number): number;
+    decrementY(stepSize: number): number;
+    getColorFromPoint(x: number, y: number): Color | undefined;
+};
+
+export { getChannelDetails };

package/dist/utils/get-channel-details.js

@@ -0,0 +1,79 @@
+"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/utils/get-channel-details.ts
+var get_channel_details_exports = {};
+__export(get_channel_details_exports, {
+  getChannelDetails: () => getChannelDetails
+});
+module.exports = __toCommonJS(get_channel_details_exports);
+var import_numeric_range = require("@zag-js/numeric-range");
+function getChannelDetails(color, xChannel, yChannel) {
+  const channels = color.getColorSpaceAxes({ xChannel, yChannel });
+  const xChannelRange = color.getChannelRange(channels.xChannel);
+  const yChannelRange = color.getChannelRange(channels.yChannel);
+  const { minValue: minValueX, maxValue: maxValueX, step: stepX, pageSize: pageSizeX } = xChannelRange;
+  const { minValue: minValueY, maxValue: maxValueY, step: stepY, pageSize: pageSizeY } = yChannelRange;
+  const xValue = color.getChannelValue(channels.xChannel);
+  const yValue = color.getChannelValue(channels.yChannel);
+  return {
+    channels,
+    xChannelStep: stepX,
+    yChannelStep: stepY,
+    xChannelPageStep: pageSizeX,
+    yChannelPageStep: pageSizeY,
+    xValue,
+    yValue,
+    getThumbPosition() {
+      let x = (xValue - minValueX) / (maxValueX - minValueX);
+      let y = 1 - (yValue - minValueY) / (maxValueY - minValueY);
+      return { x, y };
+    },
+    incrementX(stepSize) {
+      return xValue + stepSize > maxValueX ? maxValueX : (0, import_numeric_range.snapValueToStep)(xValue + stepSize, minValueX, maxValueX, stepX);
+    },
+    incrementY(stepSize) {
+      return yValue + stepSize > maxValueY ? maxValueY : (0, import_numeric_range.snapValueToStep)(yValue + stepSize, minValueY, maxValueY, stepY);
+    },
+    decrementX(stepSize) {
+      return (0, import_numeric_range.snapValueToStep)(xValue - stepSize, minValueX, maxValueX, stepX);
+    },
+    decrementY(stepSize) {
+      return (0, import_numeric_range.snapValueToStep)(yValue - stepSize, minValueY, maxValueY, stepY);
+    },
+    getColorFromPoint(x, y) {
+      let newXValue = (0, import_numeric_range.getPercentValue)(x, minValueX, maxValueX, stepX);
+      let newYValue = (0, import_numeric_range.getPercentValue)(1 - y, minValueY, maxValueY, stepY);
+      let newColor;
+      if (newXValue !== xValue) {
+        newXValue = (0, import_numeric_range.snapValueToStep)(newXValue, minValueX, maxValueX, stepX);
+        newColor = color.withChannelValue(channels.xChannel, newXValue);
+      }
+      if (newYValue !== yValue) {
+        newYValue = (0, import_numeric_range.snapValueToStep)(newYValue, minValueY, maxValueY, stepY);
+        newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);
+      }
+      return newColor;
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getChannelDetails
+});

package/dist/utils/get-channel-details.mjs

@@ -0,0 +1,6 @@
+import {
+  getChannelDetails
+} from "../chunk-KLLIOTK6.mjs";
+export {
+  getChannelDetails
+};

package/dist/utils/get-channel-display-color.d.ts

@@ -0,0 +1,5 @@
+import { Color, ColorChannel } from '@zag-js/color-utils';
+
+declare function getChannelDisplayColor(color: Color, channel: ColorChannel): Color;
+
+export { getChannelDisplayColor };

package/dist/utils/get-channel-display-color.js

@@ -0,0 +1,48 @@
+"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/utils/get-channel-display-color.ts
+var get_channel_display_color_exports = {};
+__export(get_channel_display_color_exports, {
+  getChannelDisplayColor: () => getChannelDisplayColor
+});
+module.exports = __toCommonJS(get_channel_display_color_exports);
+var import_color_utils = require("@zag-js/color-utils");
+function getChannelDisplayColor(color, channel) {
+  switch (channel) {
+    case "hue":
+      return (0, import_color_utils.parseColor)(`hsl(${color.getChannelValue("hue")}, 100%, 50%)`);
+    case "lightness":
+    case "brightness":
+    case "saturation":
+    case "red":
+    case "green":
+    case "blue":
+      return color.withChannelValue("alpha", 1);
+    case "alpha": {
+      return color;
+    }
+    default:
+      throw new Error("Unknown color channel: " + channel);
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getChannelDisplayColor
+});

package/dist/utils/get-channel-display-color.mjs

@@ -0,0 +1,6 @@
+import {
+  getChannelDisplayColor
+} from "../chunk-JNBNPPMF.mjs";
+export {
+  getChannelDisplayColor
+};

package/dist/utils/get-channel-input-value.d.ts

@@ -0,0 +1,10 @@
+import * as _zag_js_color_utils_src_types from '@zag-js/color-utils/src/types';
+import { Color } from '@zag-js/color-utils';
+import { ExtendedColorChannel } from '../color-picker.types.js';
+import '@zag-js/core';
+import '@zag-js/types';
+
+declare function getChannelInputValue(color: Color, channel: ExtendedColorChannel): string;
+declare function getChannelInputRange(color: Color, channel: ExtendedColorChannel): _zag_js_color_utils_src_types.ColorChannelRange | undefined;
+
+export { getChannelInputRange, getChannelInputValue };

package/dist/utils/get-channel-input-value.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/utils/get-channel-input-value.ts
+var get_channel_input_value_exports = {};
+__export(get_channel_input_value_exports, {
+  getChannelInputRange: () => getChannelInputRange,
+  getChannelInputValue: () => getChannelInputValue
+});
+module.exports = __toCommonJS(get_channel_input_value_exports);
+function getChannelInputValue(color, channel) {
+  switch (channel) {
+    case "hex":
+      return color.toString("hex");
+    case "css":
+      return color.toString("css");
+    default:
+      return color.getChannelValue(channel).toString();
+  }
+}
+function getChannelInputRange(color, channel) {
+  switch (channel) {
+    case "hex":
+    case "css":
+      return void 0;
+    default:
+      return color.getChannelRange(channel);
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getChannelInputRange,
+  getChannelInputValue
+});

package/dist/utils/get-channel-input-value.mjs

@@ -0,0 +1,8 @@
+import {
+  getChannelInputRange,
+  getChannelInputValue
+} from "../chunk-2ERX54SV.mjs";
+export {
+  getChannelInputRange,
+  getChannelInputValue
+};

package/dist/utils/get-color-area-gradient.d.ts

@@ -0,0 +1,11 @@
+import * as _zag_js_types from '@zag-js/types';
+import { ColorChannel } from '@zag-js/color-utils';
+import { MachineContext } from '../color-picker.types.js';
+import '@zag-js/core';
+
+declare function getColorAreaGradient(ctx: MachineContext, xChannel: ColorChannel, yChannel: ColorChannel): {
+    areaStyles: _zag_js_types.JSX.CSSProperties;
+    areaGradientStyles: _zag_js_types.JSX.CSSProperties;
+};
+
+export { getColorAreaGradient };