@zag-js/color-picker 0.10.2 → 0.10.4

package/dist/index.mjs

@@ -1,21 +1,3 @@
-import {
-  connect
-} from "./chunk-5QSFKCT5.mjs";
-import "./chunk-JNBNPPMF.mjs";
-import "./chunk-KO4TBUXB.mjs";
-import "./chunk-3XH465XT.mjs";
-import {
-  anatomy
-} from "./chunk-75JXJMB5.mjs";
-import {
-  machine
-} from "./chunk-ML3WX6YS.mjs";
-import "./chunk-2ERX54SV.mjs";
-import "./chunk-SPSDVZCT.mjs";
-import "./chunk-OY3B7NXA.mjs";
-import "./chunk-KLLIOTK6.mjs";
-export {
-  anatomy,
-  connect,
-  machine
-};
+export { anatomy } from './color-picker.anatomy.mjs';
+export { connect } from './color-picker.connect.mjs';
+export { machine } from './color-picker.machine.mjs';

package/dist/utils/generate-format-background.d.ts

@@ -1,4 +1,4 @@
-declare const generateRGB_R: (orientation: [string, string], dir: boolean, zValue: number) => {
+export declare const generateRGB_R: (orientation: [string, string], dir: boolean, zValue: number) => {
     areaStyles: {
         backgroundImage: string;
     };
@@ -8,7 +8,7 @@ declare const generateRGB_R: (orientation: [string, string], dir: boolean, zValu
         maskImage: string;
     };
 };
-declare const generateRGB_G: (orientation: [string, string], dir: boolean, zValue: number) => {
+export declare const generateRGB_G: (orientation: [string, string], dir: boolean, zValue: number) => {
     areaStyles: {
         backgroundImage: string;
     };
@@ -18,7 +18,7 @@ declare const generateRGB_G: (orientation: [string, string], dir: boolean, zValu
         maskImage: string;
     };
 };
-declare const generateRGB_B: (orientation: [string, string], dir: boolean, zValue: number) => {
+export declare const generateRGB_B: (orientation: [string, string], dir: boolean, zValue: number) => {
     areaStyles: {
         backgroundImage: string;
     };
@@ -28,41 +28,39 @@ declare const generateRGB_B: (orientation: [string, string], dir: boolean, zValu
         maskImage: string;
     };
 };
-declare const generateHSL_H: (orientation: [string, string], dir: boolean, zValue: number) => {
+export 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) => {
+export 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) => {
+export 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) => {
+export 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) => {
+export 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) => {
+export 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

@@ -1,37 +1,8 @@
-"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);
+'use strict';
 
-// 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) => {
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const generateRGB_R = (orientation, dir, zValue) => {
   const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
   const result = {
     areaStyles: {
@@ -45,7 +16,7 @@ var generateRGB_R = (orientation, dir, zValue) => {
   };
   return result;
 };
-var generateRGB_G = (orientation, dir, zValue) => {
+const generateRGB_G = (orientation, dir, zValue) => {
   const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
   const result = {
     areaStyles: {
@@ -59,7 +30,7 @@ var generateRGB_G = (orientation, dir, zValue) => {
   };
   return result;
 };
-var generateRGB_B = (orientation, dir, zValue) => {
+const generateRGB_B = (orientation, dir, zValue) => {
   const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
   const result = {
     areaStyles: {
@@ -73,7 +44,7 @@ var generateRGB_B = (orientation, dir, zValue) => {
   };
   return result;
 };
-var generateHSL_H = (orientation, dir, zValue) => {
+const generateHSL_H = (orientation, dir, zValue) => {
   const result = {
     areaStyles: {},
     areaGradientStyles: {
@@ -86,7 +57,7 @@ var generateHSL_H = (orientation, dir, zValue) => {
   };
   return result;
 };
-var generateHSL_S = (orientation, dir, alphaValue) => {
+const generateHSL_S = (orientation, dir, alphaValue) => {
   const result = {
     areaStyles: {},
     areaGradientStyles: {
@@ -99,7 +70,7 @@ var generateHSL_S = (orientation, dir, alphaValue) => {
   };
   return result;
 };
-var generateHSL_L = (orientation, dir, zValue) => {
+const generateHSL_L = (orientation, dir, zValue) => {
   const result = {
     areaStyles: {},
     areaGradientStyles: {
@@ -111,7 +82,7 @@ var generateHSL_L = (orientation, dir, zValue) => {
   };
   return result;
 };
-var generateHSB_H = (orientation, dir, zValue) => {
+const generateHSB_H = (orientation, dir, zValue) => {
   const result = {
     areaStyles: {},
     areaGradientStyles: {
@@ -124,7 +95,7 @@ var generateHSB_H = (orientation, dir, zValue) => {
   };
   return result;
 };
-var generateHSB_S = (orientation, dir, alphaValue) => {
+const generateHSB_S = (orientation, dir, alphaValue) => {
   const result = {
     areaStyles: {},
     areaGradientStyles: {
@@ -137,7 +108,7 @@ var generateHSB_S = (orientation, dir, alphaValue) => {
   };
   return result;
 };
-var generateHSB_B = (orientation, dir, alphaValue) => {
+const generateHSB_B = (orientation, dir, alphaValue) => {
   const result = {
     areaStyles: {},
     areaGradientStyles: {
@@ -150,15 +121,13 @@ var generateHSB_B = (orientation, dir, alphaValue) => {
   };
   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
-});
+
+exports.generateHSB_B = generateHSB_B;
+exports.generateHSB_H = generateHSB_H;
+exports.generateHSB_S = generateHSB_S;
+exports.generateHSL_H = generateHSL_H;
+exports.generateHSL_L = generateHSL_L;
+exports.generateHSL_S = generateHSL_S;
+exports.generateRGB_B = generateRGB_B;
+exports.generateRGB_G = generateRGB_G;
+exports.generateRGB_R = generateRGB_R;

package/dist/utils/generate-format-background.mjs

@@ -1,22 +1,121 @@
-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
+const 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;
 };
+const 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;
+};
+const 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;
+};
+const 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;
+};
+const 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;
+};
+const 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;
+};
+const 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;
+};
+const 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;
+};
+const 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/utils/get-channel-details.d.ts

@@ -1,8 +1,6 @@
-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;
+import { ColorAxes, Color, type ColorChannel } from '@zag-js/color-utils';
+export declare function getChannelDetails(color: Color, xChannel: ColorChannel, yChannel: ColorChannel): {
+    channels: ColorAxes;
     xChannelStep: number;
     yChannelStep: number;
     xChannelPageStep: number;
@@ -19,5 +17,3 @@ declare function getChannelDetails(color: Color, xChannel: ColorChannel, yChanne
     decrementY(stepSize: number): number;
     getColorFromPoint(x: number, y: number): Color | undefined;
 };
-
-export { getChannelDetails };

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

@@ -1,29 +1,9 @@
-"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);
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const numericRange = require('@zag-js/numeric-range');
 
-// 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);
@@ -46,34 +26,32 @@ function getChannelDetails(color, xChannel, yChannel) {
       return { x, y };
     },
     incrementX(stepSize) {
-      return xValue + stepSize > maxValueX ? maxValueX : (0, import_numeric_range.snapValueToStep)(xValue + stepSize, minValueX, maxValueX, stepX);
+      return xValue + stepSize > maxValueX ? maxValueX : numericRange.snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX);
     },
     incrementY(stepSize) {
-      return yValue + stepSize > maxValueY ? maxValueY : (0, import_numeric_range.snapValueToStep)(yValue + stepSize, minValueY, maxValueY, stepY);
+      return yValue + stepSize > maxValueY ? maxValueY : numericRange.snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY);
     },
     decrementX(stepSize) {
-      return (0, import_numeric_range.snapValueToStep)(xValue - stepSize, minValueX, maxValueX, stepX);
+      return numericRange.snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX);
     },
     decrementY(stepSize) {
-      return (0, import_numeric_range.snapValueToStep)(yValue - stepSize, minValueY, maxValueY, stepY);
+      return numericRange.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 newXValue = numericRange.getPercentValue(x, minValueX, maxValueX, stepX);
+      let newYValue = numericRange.getPercentValue(1 - y, minValueY, maxValueY, stepY);
       let newColor;
       if (newXValue !== xValue) {
-        newXValue = (0, import_numeric_range.snapValueToStep)(newXValue, minValueX, maxValueX, stepX);
+        newXValue = numericRange.snapValueToStep(newXValue, minValueX, maxValueX, stepX);
         newColor = color.withChannelValue(channels.xChannel, newXValue);
       }
       if (newYValue !== yValue) {
-        newYValue = (0, import_numeric_range.snapValueToStep)(newYValue, minValueY, maxValueY, stepY);
+        newYValue = numericRange.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
-});
+
+exports.getChannelDetails = getChannelDetails;

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

@@ -1,6 +1,53 @@
-import {
-  getChannelDetails
-} from "../chunk-KLLIOTK6.mjs";
-export {
-  getChannelDetails
-};
+import { snapValueToStep, getPercentValue } from '@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 : snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX);
+    },
+    incrementY(stepSize) {
+      return yValue + stepSize > maxValueY ? maxValueY : snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY);
+    },
+    decrementX(stepSize) {
+      return snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX);
+    },
+    decrementY(stepSize) {
+      return snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY);
+    },
+    getColorFromPoint(x, y) {
+      let newXValue = getPercentValue(x, minValueX, maxValueX, stepX);
+      let newYValue = getPercentValue(1 - y, minValueY, maxValueY, stepY);
+      let newColor;
+      if (newXValue !== xValue) {
+        newXValue = snapValueToStep(newXValue, minValueX, maxValueX, stepX);
+        newColor = color.withChannelValue(channels.xChannel, newXValue);
+      }
+      if (newYValue !== yValue) {
+        newYValue = snapValueToStep(newYValue, minValueY, maxValueY, stepY);
+        newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);
+      }
+      return newColor;
+    }
+  };
+}
+
+export { getChannelDetails };

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

@@ -1,5 +1,3 @@
-import { Color, ColorChannel } from '@zag-js/color-utils';
-
-declare function getChannelDisplayColor(color: Color, channel: ColorChannel): Color;
-
-export { getChannelDisplayColor };
+import { ColorType } from '@zag-js/color-utils/src/types';
+import { Color, type ColorChannel } from "@zag-js/color-utils";
+export declare function getChannelDisplayColor(color: Color, channel: ColorChannel): ColorType;

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

@@ -1,33 +1,13 @@
-"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);
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const colorUtils = require('@zag-js/color-utils');
 
-// 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%)`);
+      return colorUtils.parseColor(`hsl(${color.getChannelValue("hue")}, 100%, 50%)`);
     case "lightness":
     case "brightness":
     case "saturation":
@@ -42,7 +22,5 @@ function getChannelDisplayColor(color, channel) {
       throw new Error("Unknown color channel: " + channel);
   }
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  getChannelDisplayColor
-});
+
+exports.getChannelDisplayColor = getChannelDisplayColor;

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

@@ -1,6 +1,22 @@
-import {
-  getChannelDisplayColor
-} from "../chunk-JNBNPPMF.mjs";
-export {
-  getChannelDisplayColor
-};
+import { parseColor } from '@zag-js/color-utils';
+
+function getChannelDisplayColor(color, channel) {
+  switch (channel) {
+    case "hue":
+      return 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);
+  }
+}
+
+export { getChannelDisplayColor };

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

@@ -1,10 +1,5 @@
-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 };
+import { ColorChannelRange } from '@zag-js/color-utils/src/types';
+import { Color } from "@zag-js/color-utils";
+import { ExtendedColorChannel } from "../color-picker.types";
+export declare function getChannelInputValue(color: Color, channel: ExtendedColorChannel): string;
+export declare function getChannelInputRange(color: Color, channel: ExtendedColorChannel): ColorChannelRange | undefined;