@zag-js/color-picker 0.10.4 → 0.11.0

package/dist/color-picker.types.d.ts

@@ -1,99 +0,0 @@
-import { Color, type ColorAxes, type ColorChannel, type ColorFormat } from "@zag-js/color-utils";
-import type { StateMachine as S } from "@zag-js/core";
-import type { CommonProperties, Context, Orientation, RequiredBy } from "@zag-js/types";
-export type ColorChannelProps = {
-    channel: ColorChannel;
-    orientation?: Orientation;
-};
-export type ExtendedColorChannel = ColorChannel | "hex" | "css";
-export type ColorChannelInputProps = {
-    channel: ExtendedColorChannel;
-    orientation?: Orientation;
-};
-export type ColorAreaProps = {
-    xChannel: ColorChannel;
-    yChannel: ColorChannel;
-};
-export type ColorSwatchProps = {
-    readOnly?: boolean;
-    value: string | Color;
-};
-type ChangeDetails = {
-    value: string;
-    valueAsColor: Color;
-};
-type ElementIds = Partial<{
-    content: string;
-    area: string;
-    areaGradient: string;
-    areaThumb: string;
-    channelInput(id: string): string;
-    channelSliderTrack(id: ColorChannel): string;
-    channelSliderThumb(id: ColorChannel): string;
-}>;
-type PublicContext = CommonProperties & {
-    /**
-     * The ids of the elements in the color picker. Useful for composition.
-     */
-    ids?: ElementIds;
-    /**
-     * The direction of the color picker
-     */
-    dir: "ltr" | "rtl";
-    /**
-     * The current color value
-     */
-    value: string;
-    /**
-     * Whether the color picker is disabled
-     */
-    disabled?: boolean;
-    /**
-     * Whether the color picker is read-only
-     */
-    readOnly?: boolean;
-    /**
-     * Handler that is called when the value changes, as the user drags.
-     */
-    onChange?: (details: ChangeDetails) => void;
-    /**
-     * Handler that is called when the user stops dragging.
-     */
-    onChangeEnd?: (details: ChangeDetails) => void;
-};
-type PrivateContext = Context<{
-    /**
-     * The id of the thumb that is currently being dragged
-     */
-    activeId: string | null;
-    /**
-     * The color value as a Color object
-     */
-    valueAsColor: Color;
-    /**
-     * The channel that is currently being interacted with
-     */
-    activeChannel: Partial<ColorAxes> | null;
-    /**
-     * The orientation of the channel that is currently being interacted with
-     */
-    activeOrientation: Orientation | null;
-}>;
-type ComputedContext = Readonly<{
-    /**
-     * Whether the color picker is in RTL mode
-     */
-    isRtl: boolean;
-    /**
-     * Whether the color picker is interactive
-     */
-    isInteractive: boolean;
-}>;
-export type UserDefinedContext = RequiredBy<PublicContext, "id">;
-export type MachineContext = PublicContext & PrivateContext & ComputedContext;
-export type MachineState = {
-    value: "idle" | "focused" | "dragging";
-};
-export type State = S.State<MachineContext, MachineState>;
-export type Send = S.Send<S.AnyEventObject>;
-export type { Color, ColorChannel, ColorFormat };

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

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

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

@@ -1,133 +0,0 @@
-'use strict';
-
-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: {
-      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;
-};
-
-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,121 +0,0 @@
-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,19 +0,0 @@
-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;
-    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;
-};

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

@@ -1,57 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const numericRange = 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 : numericRange.snapValueToStep(xValue + stepSize, minValueX, maxValueX, stepX);
-    },
-    incrementY(stepSize) {
-      return yValue + stepSize > maxValueY ? maxValueY : numericRange.snapValueToStep(yValue + stepSize, minValueY, maxValueY, stepY);
-    },
-    decrementX(stepSize) {
-      return numericRange.snapValueToStep(xValue - stepSize, minValueX, maxValueX, stepX);
-    },
-    decrementY(stepSize) {
-      return numericRange.snapValueToStep(yValue - stepSize, minValueY, maxValueY, stepY);
-    },
-    getColorFromPoint(x, y) {
-      let newXValue = numericRange.getPercentValue(x, minValueX, maxValueX, stepX);
-      let newYValue = numericRange.getPercentValue(1 - y, minValueY, maxValueY, stepY);
-      let newColor;
-      if (newXValue !== xValue) {
-        newXValue = numericRange.snapValueToStep(newXValue, minValueX, maxValueX, stepX);
-        newColor = color.withChannelValue(channels.xChannel, newXValue);
-      }
-      if (newYValue !== yValue) {
-        newYValue = numericRange.snapValueToStep(newYValue, minValueY, maxValueY, stepY);
-        newColor = (newColor || color).withChannelValue(channels.yChannel, newYValue);
-      }
-      return newColor;
-    }
-  };
-}
-
-exports.getChannelDetails = getChannelDetails;

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

@@ -1,53 +0,0 @@
-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,3 +0,0 @@
-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,26 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const colorUtils = require('@zag-js/color-utils');
-
-function getChannelDisplayColor(color, channel) {
-  switch (channel) {
-    case "hue":
-      return colorUtils.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);
-  }
-}
-
-exports.getChannelDisplayColor = getChannelDisplayColor;

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

@@ -1,22 +0,0 @@
-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,5 +0,0 @@
-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;

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

@@ -1,26 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-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);
-  }
-}
-
-exports.getChannelInputRange = getChannelInputRange;
-exports.getChannelInputValue = getChannelInputValue;

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

@@ -1,21 +0,0 @@
-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);
-  }
-}
-
-export { getChannelInputRange, getChannelInputValue };

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

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