@zag-js/color-picker 0.10.2 → 0.10.4

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

@@ -1,29 +1,7 @@
-"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' });
 
-// 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":
@@ -43,8 +21,6 @@ function getChannelInputRange(color, channel) {
       return color.getChannelRange(channel);
   }
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  getChannelInputRange,
-  getChannelInputValue
-});
+
+exports.getChannelInputRange = getChannelInputRange;
+exports.getChannelInputValue = getChannelInputValue;

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

@@ -1,8 +1,21 @@
-import {
-  getChannelInputRange,
-  getChannelInputValue
-} from "../chunk-2ERX54SV.mjs";
-export {
-  getChannelInputRange,
-  getChannelInputValue
-};
+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,11 +1,7 @@
-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;
+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;
 };
-
-export { getColorAreaGradient };

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

@@ -1,151 +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';
 
-// src/utils/get-color-area-gradient.ts
-var get_color_area_gradient_exports = {};
-__export(get_color_area_gradient_exports, {
-  getColorAreaGradient: () => getColorAreaGradient
-});
-module.exports = __toCommonJS(get_color_area_gradient_exports);
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// src/utils/generate-format-background.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;
-};
+const generateFormatBackground = require('./generate-format-background.js');
 
-// src/utils/get-color-area-gradient.ts
 function getColorAreaGradient(ctx, xChannel, yChannel) {
   const value = ctx.valueAsColor;
   const { zChannel } = value.getColorSpaceAxes({ xChannel, yChannel });
@@ -159,51 +17,49 @@ function getColorAreaGradient(ctx, xChannel, yChannel) {
   switch (zChannel) {
     case "red": {
       dir = xChannel === "green";
-      background = generateRGB_R(orientation, dir, zValue);
+      background = generateFormatBackground.generateRGB_R(orientation, dir, zValue);
       break;
     }
     case "green": {
       dir = xChannel === "red";
-      background = generateRGB_G(orientation, dir, zValue);
+      background = generateFormatBackground.generateRGB_G(orientation, dir, zValue);
       break;
     }
     case "blue": {
       dir = xChannel === "red";
-      background = generateRGB_B(orientation, dir, zValue);
+      background = generateFormatBackground.generateRGB_B(orientation, dir, zValue);
       break;
     }
     case "hue": {
       dir = xChannel !== "saturation";
       if (isHSL) {
-        background = generateHSL_H(orientation, dir, zValue);
+        background = generateFormatBackground.generateHSL_H(orientation, dir, zValue);
       } else {
-        background = generateHSB_H(orientation, dir, zValue);
+        background = generateFormatBackground.generateHSB_H(orientation, dir, zValue);
       }
       break;
     }
     case "saturation": {
       dir = xChannel === "hue";
       if (isHSL) {
-        background = generateHSL_S(orientation, dir, alphaValue);
+        background = generateFormatBackground.generateHSL_S(orientation, dir, alphaValue);
       } else {
-        background = generateHSB_S(orientation, dir, alphaValue);
+        background = generateFormatBackground.generateHSB_S(orientation, dir, alphaValue);
       }
       break;
     }
     case "brightness": {
       dir = xChannel === "hue";
-      background = generateHSB_B(orientation, dir, alphaValue);
+      background = generateFormatBackground.generateHSB_B(orientation, dir, alphaValue);
       break;
     }
     case "lightness": {
       dir = xChannel === "hue";
-      background = generateHSL_L(orientation, dir, zValue);
+      background = generateFormatBackground.generateHSL_L(orientation, dir, zValue);
       break;
     }
   }
   return background;
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  getColorAreaGradient
-});
+
+exports.getColorAreaGradient = getColorAreaGradient;

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

@@ -1,7 +1,61 @@
-import {
-  getColorAreaGradient
-} from "../chunk-KO4TBUXB.mjs";
-import "../chunk-OY3B7NXA.mjs";
-export {
-  getColorAreaGradient
-};
+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,8 +1,2 @@
-import { MachineContext, ColorChannelProps } from '../color-picker.types.js';
-import '@zag-js/color-utils';
-import '@zag-js/core';
-import '@zag-js/types';
-
-declare const getSliderBgImage: (ctx: MachineContext, props: Required<ColorChannelProps>) => string;
-
-export { getSliderBgImage };
+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,28 +1,7 @@
-"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' });
 
-// src/utils/get-slider-background.ts
-var get_slider_background_exports = {};
-__export(get_slider_background_exports, {
-  getSliderBgImage: () => getSliderBgImage
-});
-module.exports = __toCommonJS(get_slider_background_exports);
 function getSliderBgDirection(orientation, dir) {
   if (orientation === "vertical") {
     return "top";
@@ -32,7 +11,7 @@ function getSliderBgDirection(orientation, dir) {
     return "left";
   }
 }
-var getSliderBgImage = (ctx, props) => {
+const getSliderBgImage = (ctx, props) => {
   const { channel } = props;
   const dir = getSliderBgDirection(props.orientation, ctx.dir);
   const value = ctx.valueAsColor;
@@ -60,7 +39,5 @@ var getSliderBgImage = (ctx, props) => {
       throw new Error("Unknown color channel: " + channel);
   }
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  getSliderBgImage
-});
+
+exports.getSliderBgImage = getSliderBgImage;

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

@@ -1,6 +1,39 @@
-import {
-  getSliderBgImage
-} from "../chunk-3XH465XT.mjs";
-export {
-  getSliderBgImage
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/color-picker",
-  "version": "0.10.2",
+  "version": "0.10.4",
   "description": "Core logic for the color-picker widget implemented as a state machine",
   "keywords": [
     "js",
@@ -28,15 +28,15 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.10.2",
-    "@zag-js/anatomy": "0.10.2",
-    "@zag-js/dom-query": "0.10.2",
-    "@zag-js/dom-event": "0.10.2",
-    "@zag-js/utils": "0.10.2",
-    "@zag-js/color-utils": "0.10.2",
-    "@zag-js/numeric-range": "0.10.2",
-    "@zag-js/text-selection": "0.10.2",
-    "@zag-js/types": "0.10.2"
+    "@zag-js/core": "0.10.4",
+    "@zag-js/anatomy": "0.10.4",
+    "@zag-js/dom-query": "0.10.4",
+    "@zag-js/dom-event": "0.10.4",
+    "@zag-js/utils": "0.10.4",
+    "@zag-js/color-utils": "0.10.4",
+    "@zag-js/numeric-range": "0.10.4",
+    "@zag-js/text-selection": "0.10.4",
+    "@zag-js/types": "0.10.4"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
@@ -53,13 +53,8 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build-fast": "tsup src",
-    "start": "pnpm build --watch",
-    "build": "tsup src --dts",
-    "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
+    "build": "vite build -c ../../../vite.config.ts",
     "lint": "eslint src --ext .ts,.tsx",
-    "test-ci": "pnpm test --ci --runInBand",
-    "test-watch": "pnpm test --watch -u",
     "typecheck": "tsc --noEmit"
   }
 }

package/src/color-picker.connect.ts

@@ -1,4 +1,4 @@
-import { Color, ColorChannel, ColorFormat, normalizeColor } from "@zag-js/color-utils"
+import { Color, normalizeColor, type ColorChannel, type ColorFormat } from "@zag-js/color-utils"
 import {
   EventKeyMap,
   getEventKey,

package/src/color-picker.dom.ts

@@ -1,4 +1,4 @@
-import { ColorChannel } from "@zag-js/color-utils"
+import { type ColorChannel } from "@zag-js/color-utils"
 import { getRelativePoint, type Point } from "@zag-js/dom-event"
 import { createScope, queryAll } from "@zag-js/dom-query"
 import type { MachineContext as Ctx } from "./color-picker.types"

package/src/color-picker.types.ts

@@ -1,4 +1,4 @@
-import { Color, ColorAxes, ColorChannel } from "@zag-js/color-utils"
+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"
 
@@ -111,3 +111,5 @@ export type MachineState = {
 export type State = S.State<MachineContext, MachineState>
 
 export type Send = S.Send<S.AnyEventObject>
+
+export type { Color, ColorChannel, ColorFormat }

package/src/index.ts

@@ -2,7 +2,9 @@ export { anatomy } from "./color-picker.anatomy"
 export { connect } from "./color-picker.connect"
 export { machine } from "./color-picker.machine"
 export type {
+  Color,
   ColorAreaProps,
+  ColorChannel,
   ColorChannelProps,
   ColorSwatchProps,
   UserDefinedContext as Context,

package/src/utils/get-channel-details.ts

@@ -1,5 +1,5 @@
-import { Color, ColorChannel } from "@zag-js/color-utils"
-import { snapValueToStep, getPercentValue } from "@zag-js/numeric-range"
+import { Color, type ColorChannel } from "@zag-js/color-utils"
+import { getPercentValue, snapValueToStep } from "@zag-js/numeric-range"
 
 export function getChannelDetails(color: Color, xChannel: ColorChannel, yChannel: ColorChannel) {
   const channels = color.getColorSpaceAxes({ xChannel, yChannel })

package/src/utils/get-channel-display-color.ts

@@ -1,4 +1,4 @@
-import { Color, ColorChannel, parseColor } from "@zag-js/color-utils"
+import { Color, parseColor, type ColorChannel } from "@zag-js/color-utils"
 
 export function getChannelDisplayColor(color: Color, channel: ColorChannel) {
   switch (channel) {

package/src/utils/get-color-area-gradient.ts

@@ -1,4 +1,4 @@
-import { ColorChannel } from "@zag-js/color-utils"
+import { type ColorChannel } from "@zag-js/color-utils"
 import { Style } from "@zag-js/types"
 import { MachineContext } from "../color-picker.types"
 import {

package/dist/chunk-2ERX54SV.mjs

@@ -1,25 +0,0 @@
-// src/utils/get-channel-input-value.ts
-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 {
-  getChannelInputValue,
-  getChannelInputRange
-};

package/dist/chunk-3XH465XT.mjs

@@ -1,42 +0,0 @@
-// src/utils/get-slider-background.ts
-function getSliderBgDirection(orientation, dir) {
-  if (orientation === "vertical") {
-    return "top";
-  } else if (dir === "ltr") {
-    return "right";
-  } else {
-    return "left";
-  }
-}
-var 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
-};