@zag-js/color-picker 1.43.0 → 2.0.0-next.1

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

@@ -12,8 +12,14 @@ var getSliderBackground = (props) => {
   const { channel, value, dir, orientation } = props;
   const bgDirection = getSliderBackgroundDirection(orientation, dir);
   const { minValue, maxValue } = value.getChannelRange(channel);
+  const fmt = value.getFormat();
   switch (channel) {
     case "hue":
+      if (fmt === "oklch") {
+        const L = value.getChannelValue("lightness");
+        const C = value.getChannelValue("chroma");
+        return `linear-gradient(to ${bgDirection} in oklch increasing hue, oklch(${L} ${C} 0), oklch(${L} ${C} 360))`;
+      }
       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");
@@ -26,9 +32,18 @@ var getSliderBackground = (props) => {
     case "red":
     case "green":
     case "blue":
-    case "alpha": {
+    case "alpha":
+    case "a":
+    case "b":
+    case "chroma": {
       let start = value.withChannelValue(channel, minValue).toString("css");
       let end = value.withChannelValue(channel, maxValue).toString("css");
+      if (fmt === "oklab" && (channel === "a" || channel === "b")) {
+        return `linear-gradient(to ${bgDirection} in oklab, ${start}, ${end})`;
+      }
+      if (fmt === "oklch" && channel === "chroma") {
+        return `linear-gradient(to ${bgDirection} in oklch, ${start}, ${end})`;
+      }
       return `linear-gradient(to ${bgDirection}, ${start}, ${end})`;
     }
     default:

package/dist/utils/is-srgb-gamut.d.mts

@@ -0,0 +1,6 @@
+import { Color } from '@zag-js/color-utils';
+
+/** Whether the color lies inside the sRGB cube (after conversion from the working space). */
+declare function isSrgbGamutColor(color: Color): boolean;
+
+export { isSrgbGamutColor };

package/dist/utils/is-srgb-gamut.d.ts

@@ -0,0 +1,6 @@
+import { Color } from '@zag-js/color-utils';
+
+/** Whether the color lies inside the sRGB cube (after conversion from the working space). */
+declare function isSrgbGamutColor(color: Color): boolean;
+
+export { isSrgbGamutColor };

package/dist/utils/is-srgb-gamut.js

@@ -0,0 +1,33 @@
+"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-srgb-gamut.ts
+var is_srgb_gamut_exports = {};
+__export(is_srgb_gamut_exports, {
+  isSrgbGamutColor: () => isSrgbGamutColor
+});
+module.exports = __toCommonJS(is_srgb_gamut_exports);
+var import_color_utils = require("@zag-js/color-utils");
+function isSrgbGamutColor(color) {
+  return (0, import_color_utils.isInSrgbGamut)(color);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  isSrgbGamutColor
+});

package/dist/utils/is-srgb-gamut.mjs

@@ -0,0 +1,8 @@
+// src/utils/is-srgb-gamut.ts
+import { isInSrgbGamut } from "@zag-js/color-utils";
+function isSrgbGamutColor(color) {
+  return isInSrgbGamut(color);
+}
+export {
+  isSrgbGamutColor
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/color-picker",
-  "version": "1.43.0",
+  "version": "2.0.0-next.1",
   "description": "Core logic for the color-picker widget implemented as a state machine",
   "keywords": [
     "js",
@@ -30,14 +30,14 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "1.43.0",
-    "@zag-js/anatomy": "1.43.0",
-    "@zag-js/dom-query": "1.43.0",
-    "@zag-js/dismissable": "1.43.0",
-    "@zag-js/utils": "1.43.0",
-    "@zag-js/color-utils": "1.43.0",
-    "@zag-js/popper": "1.43.0",
-    "@zag-js/types": "1.43.0"
+    "@zag-js/core": "2.0.0-next.1",
+    "@zag-js/anatomy": "2.0.0-next.1",
+    "@zag-js/dom-query": "2.0.0-next.1",
+    "@zag-js/dismissable": "2.0.0-next.1",
+    "@zag-js/utils": "2.0.0-next.1",
+    "@zag-js/color-utils": "2.0.0-next.1",
+    "@zag-js/popper": "2.0.0-next.1",
+    "@zag-js/types": "2.0.0-next.1"
   },
   "devDependencies": {
     "clean-package": "2.2.0"