@zag-js/color-picker 1.34.1 → 1.35.0

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

@@ -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.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,23 @@
+// src/utils/get-channel-display-color.ts
+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.mts

@@ -0,0 +1,11 @@
+import { Color, ColorChannelRange } from '@zag-js/color-utils';
+import { ExtendedColorChannel } from '../color-picker.types.mjs';
+import '@zag-js/core';
+import '@zag-js/dismissable';
+import '@zag-js/popper';
+import '@zag-js/types';
+
+declare function getChannelValue(color: Color, channel: ExtendedColorChannel | null | undefined): string;
+declare function getChannelRange(color: Color, channel: ExtendedColorChannel): ColorChannelRange | undefined;
+
+export { getChannelRange, getChannelValue };

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

@@ -0,0 +1,11 @@
+import { Color, ColorChannelRange } from '@zag-js/color-utils';
+import { ExtendedColorChannel } from '../color-picker.types.js';
+import '@zag-js/core';
+import '@zag-js/dismissable';
+import '@zag-js/popper';
+import '@zag-js/types';
+
+declare function getChannelValue(color: Color, channel: ExtendedColorChannel | null | undefined): string;
+declare function getChannelRange(color: Color, channel: ExtendedColorChannel): ColorChannelRange | undefined;
+
+export { getChannelRange, getChannelValue };

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

@@ -0,0 +1,88 @@
+"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, {
+  getChannelRange: () => getChannelRange,
+  getChannelValue: () => getChannelValue
+});
+module.exports = __toCommonJS(get_channel_input_value_exports);
+var import_color_utils = require("@zag-js/color-utils");
+function getChannelValue(color, channel) {
+  if (channel == null) return "";
+  if (channel === "hex") {
+    return color.toString("hex");
+  }
+  if (channel === "css") {
+    return color.toString("css");
+  }
+  if (channel in color) {
+    return color.getChannelValue(channel).toString();
+  }
+  const isHSL = color.getFormat() === "hsla";
+  switch (channel) {
+    case "hue":
+      return isHSL ? color.toFormat("hsla").getChannelValue("hue").toString() : color.toFormat("hsba").getChannelValue("hue").toString();
+    case "saturation":
+      return isHSL ? color.toFormat("hsla").getChannelValue("saturation").toString() : color.toFormat("hsba").getChannelValue("saturation").toString();
+    case "lightness":
+      return color.toFormat("hsla").getChannelValue("lightness").toString();
+    case "brightness":
+      return color.toFormat("hsba").getChannelValue("brightness").toString();
+    case "red":
+    case "green":
+    case "blue":
+      return color.toFormat("rgba").getChannelValue(channel).toString();
+    default:
+      return color.getChannelValue(channel).toString();
+  }
+}
+function getChannelRange(color, channel) {
+  switch (channel) {
+    case "hex":
+      const minColor = (0, import_color_utils.parseColor)("#000000");
+      const maxColor = (0, import_color_utils.parseColor)("#FFFFFF");
+      return {
+        minValue: minColor.toHexInt(),
+        maxValue: maxColor.toHexInt(),
+        pageSize: 10,
+        step: 1
+      };
+    case "css":
+      return void 0;
+    case "hue":
+    case "saturation":
+    case "lightness":
+      return color.toFormat("hsla").getChannelRange(channel);
+    case "brightness":
+      return color.toFormat("hsba").getChannelRange(channel);
+    case "red":
+    case "green":
+    case "blue":
+      return color.toFormat("rgba").getChannelRange(channel);
+    default:
+      return color.getChannelRange(channel);
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getChannelRange,
+  getChannelValue
+});

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

@@ -0,0 +1,62 @@
+// src/utils/get-channel-input-value.ts
+import { parseColor } from "@zag-js/color-utils";
+function getChannelValue(color, channel) {
+  if (channel == null) return "";
+  if (channel === "hex") {
+    return color.toString("hex");
+  }
+  if (channel === "css") {
+    return color.toString("css");
+  }
+  if (channel in color) {
+    return color.getChannelValue(channel).toString();
+  }
+  const isHSL = color.getFormat() === "hsla";
+  switch (channel) {
+    case "hue":
+      return isHSL ? color.toFormat("hsla").getChannelValue("hue").toString() : color.toFormat("hsba").getChannelValue("hue").toString();
+    case "saturation":
+      return isHSL ? color.toFormat("hsla").getChannelValue("saturation").toString() : color.toFormat("hsba").getChannelValue("saturation").toString();
+    case "lightness":
+      return color.toFormat("hsla").getChannelValue("lightness").toString();
+    case "brightness":
+      return color.toFormat("hsba").getChannelValue("brightness").toString();
+    case "red":
+    case "green":
+    case "blue":
+      return color.toFormat("rgba").getChannelValue(channel).toString();
+    default:
+      return color.getChannelValue(channel).toString();
+  }
+}
+function getChannelRange(color, channel) {
+  switch (channel) {
+    case "hex":
+      const minColor = parseColor("#000000");
+      const maxColor = parseColor("#FFFFFF");
+      return {
+        minValue: minColor.toHexInt(),
+        maxValue: maxColor.toHexInt(),
+        pageSize: 10,
+        step: 1
+      };
+    case "css":
+      return void 0;
+    case "hue":
+    case "saturation":
+    case "lightness":
+      return color.toFormat("hsla").getChannelRange(channel);
+    case "brightness":
+      return color.toFormat("hsba").getChannelRange(channel);
+    case "red":
+    case "green":
+    case "blue":
+      return color.toFormat("rgba").getChannelRange(channel);
+    default:
+      return color.getChannelRange(channel);
+  }
+}
+export {
+  getChannelRange,
+  getChannelValue
+};

package/dist/utils/get-slider-background.d.mts

@@ -0,0 +1,14 @@
+import { ChannelProps, ColorPickerProps } from '../color-picker.types.mjs';
+import { Color } from '@zag-js/color-utils';
+import '@zag-js/core';
+import '@zag-js/dismissable';
+import '@zag-js/popper';
+import '@zag-js/types';
+
+interface SliderBackgroundProps extends Required<ChannelProps> {
+    value: Color;
+    dir: ColorPickerProps["dir"];
+}
+declare const getSliderBackground: (props: SliderBackgroundProps) => string;
+
+export { getSliderBackground };

package/dist/utils/get-slider-background.d.ts

@@ -0,0 +1,14 @@
+import { ChannelProps, ColorPickerProps } from '../color-picker.types.js';
+import { Color } from '@zag-js/color-utils';
+import '@zag-js/core';
+import '@zag-js/dismissable';
+import '@zag-js/popper';
+import '@zag-js/types';
+
+interface SliderBackgroundProps extends Required<ChannelProps> {
+    value: Color;
+    dir: ColorPickerProps["dir"];
+}
+declare const getSliderBackground: (props: SliderBackgroundProps) => string;
+
+export { getSliderBackground };

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

@@ -0,0 +1,65 @@
+"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-slider-background.ts
+var get_slider_background_exports = {};
+__export(get_slider_background_exports, {
+  getSliderBackground: () => getSliderBackground
+});
+module.exports = __toCommonJS(get_slider_background_exports);
+function getSliderBackgroundDirection(orientation, dir) {
+  if (orientation === "vertical") {
+    return "top";
+  } else if (dir === "ltr") {
+    return "right";
+  } else {
+    return "left";
+  }
+}
+var getSliderBackground = (props) => {
+  const { channel, value, dir, orientation } = props;
+  const bgDirection = getSliderBackgroundDirection(orientation, dir);
+  const { minValue, maxValue } = value.getChannelRange(channel);
+  switch (channel) {
+    case "hue":
+      return `linear-gradient(to ${bgDirection}, 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 = value.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 ${bgDirection}, ${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 ${bgDirection}, ${start}, ${end})`;
+    }
+    default:
+      throw new Error("Unknown color channel: " + channel);
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getSliderBackground
+});

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

@@ -0,0 +1,40 @@
+// src/utils/get-slider-background.ts
+function getSliderBackgroundDirection(orientation, dir) {
+  if (orientation === "vertical") {
+    return "top";
+  } else if (dir === "ltr") {
+    return "right";
+  } else {
+    return "left";
+  }
+}
+var getSliderBackground = (props) => {
+  const { channel, value, dir, orientation } = props;
+  const bgDirection = getSliderBackgroundDirection(orientation, dir);
+  const { minValue, maxValue } = value.getChannelRange(channel);
+  switch (channel) {
+    case "hue":
+      return `linear-gradient(to ${bgDirection}, 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 = value.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 ${bgDirection}, ${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 ${bgDirection}, ${start}, ${end})`;
+    }
+    default:
+      throw new Error("Unknown color channel: " + channel);
+  }
+};
+export {
+  getSliderBackground
+};

package/dist/utils/is-valid-hex.d.mts

@@ -0,0 +1,4 @@
+declare function isValidHex(value: string): boolean;
+declare function prefixHex(value: string): string;
+
+export { isValidHex, prefixHex };

package/dist/utils/is-valid-hex.d.ts

@@ -0,0 +1,4 @@
+declare function isValidHex(value: string): boolean;
+declare function prefixHex(value: string): string;
+
+export { isValidHex, prefixHex };

package/dist/utils/is-valid-hex.js

@@ -0,0 +1,40 @@
+"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/is-valid-hex.ts
+var is_valid_hex_exports = {};
+__export(is_valid_hex_exports, {
+  isValidHex: () => isValidHex,
+  prefixHex: () => prefixHex
+});
+module.exports = __toCommonJS(is_valid_hex_exports);
+var HEX_REGEX = /^[0-9a-fA-F]{3,8}$/;
+function isValidHex(value) {
+  return HEX_REGEX.test(value);
+}
+function prefixHex(value) {
+  if (value.startsWith("#")) return value;
+  if (isValidHex(value)) return `#${value}`;
+  return value;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  isValidHex,
+  prefixHex
+});

package/dist/utils/is-valid-hex.mjs

@@ -0,0 +1,14 @@
+// src/utils/is-valid-hex.ts
+var HEX_REGEX = /^[0-9a-fA-F]{3,8}$/;
+function isValidHex(value) {
+  return HEX_REGEX.test(value);
+}
+function prefixHex(value) {
+  if (value.startsWith("#")) return value;
+  if (isValidHex(value)) return `#${value}`;
+  return value;
+}
+export {
+  isValidHex,
+  prefixHex
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/color-picker",
-  "version": "1.34.1",
+  "version": "1.35.0",
   "description": "Core logic for the color-picker widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,19 +27,19 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "1.34.1",
-    "@zag-js/anatomy": "1.34.1",
-    "@zag-js/dom-query": "1.34.1",
-    "@zag-js/dismissable": "1.34.1",
-    "@zag-js/utils": "1.34.1",
-    "@zag-js/color-utils": "1.34.1",
-    "@zag-js/popper": "1.34.1",
-    "@zag-js/types": "1.34.1"
+    "@zag-js/core": "1.35.0",
+    "@zag-js/anatomy": "1.35.0",
+    "@zag-js/dom-query": "1.35.0",
+    "@zag-js/dismissable": "1.35.0",
+    "@zag-js/utils": "1.35.0",
+    "@zag-js/color-utils": "1.35.0",
+    "@zag-js/popper": "1.35.0",
+    "@zag-js/types": "1.35.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
   },
-  "clean-package": "../../../clean-package.config.json",
+  "clean-package": "./clean-package.config.json",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "exports": {
@@ -53,6 +53,16 @@
         "default": "./dist/index.js"
       }
     },
+    "./anatomy": {
+      "import": {
+        "types": "./dist/color-picker.anatomy.d.mts",
+        "default": "./dist/color-picker.anatomy.mjs"
+      },
+      "require": {
+        "types": "./dist/color-picker.anatomy.d.ts",
+        "default": "./dist/color-picker.anatomy.js"
+      }
+    },
     "./package.json": "./package.json"
   },
   "scripts": {