@zag-js/color-picker 1.41.0 → 2.0.0-next.0

package/dist/utils/get-gamut-overlay-path.d.ts

@@ -0,0 +1,33 @@
+import { Color, ColorChannel, ColorFormat } from '@zag-js/color-utils';
+
+interface GamutOverlayOptions {
+    xChannel: ColorChannel;
+    yChannel: ColorChannel;
+}
+interface GamutOverlayData {
+    path: string;
+    labelPosition: {
+        x: number;
+        y: number;
+    };
+}
+interface GamutOverlayComputeOptions {
+    /**
+     * Device pixel ratio; higher values sample more rows along brightness (Chrome DevTools–style).
+     * Default `1` when not passed (callers may pass `globalThis.devicePixelRatio` in browsers).
+     */
+    pixelRatio?: number | undefined;
+}
+/**
+ * Computes an SVG path (0–100 user units) tracing the sRGB gamut boundary
+ * over the HSB color area when in a wide-gamut output format (oklch/oklab).
+ *
+ * Approach (matching Chrome DevTools): treat the HSV area as Display P3 gamut,
+ * then for each brightness row, sweep saturation left→right to find where
+ * the P3 color exits the sRGB gamut.
+ */
+declare function getGamutOverlayData(areaValue: Color, axes: GamutOverlayOptions, format: ColorFormat, options?: GamutOverlayComputeOptions): GamutOverlayData | null;
+/** Visible boundary rows scale with DPR (analogous to Chrome `step = 1 / devicePixelRatio` in px space). */
+declare function gamutOverlayRowCount(pixelRatio: number): number;
+
+export { type GamutOverlayComputeOptions, type GamutOverlayData, gamutOverlayRowCount, getGamutOverlayData };

package/dist/utils/get-gamut-overlay-path.js

@@ -0,0 +1,81 @@
+"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-gamut-overlay-path.ts
+var get_gamut_overlay_path_exports = {};
+__export(get_gamut_overlay_path_exports, {
+  gamutOverlayRowCount: () => gamutOverlayRowCount,
+  getGamutOverlayData: () => getGamutOverlayData
+});
+module.exports = __toCommonJS(get_gamut_overlay_path_exports);
+var import_color_utils = require("@zag-js/color-utils");
+function getGamutOverlayData(areaValue, axes, format, options) {
+  if (format !== "oklch" && format !== "oklab") return null;
+  if (axes.xChannel !== "saturation" || axes.yChannel !== "brightness") return null;
+  const hue = areaValue.getChannelValue("hue");
+  const pixelRatio = options?.pixelRatio ?? 1;
+  return buildDisplayP3GamutPath(hue, pixelRatio);
+}
+function gamutOverlayRowCount(pixelRatio) {
+  const pr = Math.max(1, pixelRatio);
+  return Math.min(200, Math.max(32, Math.round(80 * pr)));
+}
+function buildDisplayP3GamutPath(hue, pixelRatio) {
+  const steps = gamutOverlayRowCount(pixelRatio);
+  const points = [];
+  for (let i = 0; i <= steps; i++) {
+    const brightness = i / steps;
+    if (brightness < 0.01) continue;
+    let lo = 0;
+    let hi = 1;
+    for (let j = 0; j < 20; j++) {
+      const mid = (lo + hi) / 2;
+      if ((0, import_color_utils.isDisplayP3HsvInSrgbGamut)(hue, mid, brightness)) {
+        lo = mid;
+      } else {
+        hi = mid;
+      }
+    }
+    const xp = Math.min(lo * 100, 100);
+    const yp = 100 - brightness * 100;
+    points.push({ x: xp, y: yp });
+  }
+  if (points.length < 2) return null;
+  const cmds = points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x.toFixed(2)} ${p.y.toFixed(2)}`);
+  const labelY = 96;
+  let labelX = points[0].x;
+  for (let i = 0; i < points.length - 1; i++) {
+    const a = points[i], b = points[i + 1];
+    if (a.y >= labelY && b.y <= labelY || a.y <= labelY && b.y >= labelY) {
+      const t = (labelY - a.y) / (b.y - a.y);
+      labelX = a.x + t * (b.x - a.x);
+      break;
+    }
+  }
+  if (points[0].y < labelY) labelX = points[0].x;
+  return {
+    path: cmds.join(" "),
+    labelPosition: { x: Math.min(labelX - 16, 99), y: labelY }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  gamutOverlayRowCount,
+  getGamutOverlayData
+});

package/dist/utils/get-gamut-overlay-path.mjs

@@ -0,0 +1,55 @@
+// src/utils/get-gamut-overlay-path.ts
+import { isDisplayP3HsvInSrgbGamut } from "@zag-js/color-utils";
+function getGamutOverlayData(areaValue, axes, format, options) {
+  if (format !== "oklch" && format !== "oklab") return null;
+  if (axes.xChannel !== "saturation" || axes.yChannel !== "brightness") return null;
+  const hue = areaValue.getChannelValue("hue");
+  const pixelRatio = options?.pixelRatio ?? 1;
+  return buildDisplayP3GamutPath(hue, pixelRatio);
+}
+function gamutOverlayRowCount(pixelRatio) {
+  const pr = Math.max(1, pixelRatio);
+  return Math.min(200, Math.max(32, Math.round(80 * pr)));
+}
+function buildDisplayP3GamutPath(hue, pixelRatio) {
+  const steps = gamutOverlayRowCount(pixelRatio);
+  const points = [];
+  for (let i = 0; i <= steps; i++) {
+    const brightness = i / steps;
+    if (brightness < 0.01) continue;
+    let lo = 0;
+    let hi = 1;
+    for (let j = 0; j < 20; j++) {
+      const mid = (lo + hi) / 2;
+      if (isDisplayP3HsvInSrgbGamut(hue, mid, brightness)) {
+        lo = mid;
+      } else {
+        hi = mid;
+      }
+    }
+    const xp = Math.min(lo * 100, 100);
+    const yp = 100 - brightness * 100;
+    points.push({ x: xp, y: yp });
+  }
+  if (points.length < 2) return null;
+  const cmds = points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x.toFixed(2)} ${p.y.toFixed(2)}`);
+  const labelY = 96;
+  let labelX = points[0].x;
+  for (let i = 0; i < points.length - 1; i++) {
+    const a = points[i], b = points[i + 1];
+    if (a.y >= labelY && b.y <= labelY || a.y <= labelY && b.y >= labelY) {
+      const t = (labelY - a.y) / (b.y - a.y);
+      labelX = a.x + t * (b.x - a.x);
+      break;
+    }
+  }
+  if (points[0].y < labelY) labelX = points[0].x;
+  return {
+    path: cmds.join(" "),
+    labelPosition: { x: Math.min(labelX - 16, 99), y: labelY }
+  };
+}
+export {
+  gamutOverlayRowCount,
+  getGamutOverlayData
+};

package/dist/utils/get-gamut-overlay-path.test.d.mts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/utils/get-gamut-overlay-path.test.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/utils/get-gamut-overlay-path.test.js

@@ -0,0 +1,35 @@
+"use strict";
+
+// src/utils/get-gamut-overlay-path.test.ts
+var import_vitest = require("vitest.js");
+var import_color_utils = require("@zag-js/color-utils");
+var import_get_gamut_overlay_path = require("./get-gamut-overlay-path.js");
+(0, import_vitest.describe)("get-gamut-overlay-path", () => {
+  const hsba = (0, import_color_utils.parseColor)("hsba(0, 100%, 100%, 1)");
+  (0, import_vitest.test)("wrong area axes returns null", () => {
+    (0, import_vitest.expect)(
+      (0, import_get_gamut_overlay_path.getGamutOverlayData)(hsba, { xChannel: "hue", yChannel: "saturation" }, "oklch", { pixelRatio: 1 })
+    ).toBeNull();
+  });
+  (0, import_vitest.test)("non-wide format returns null", () => {
+    (0, import_vitest.expect)((0, import_get_gamut_overlay_path.getGamutOverlayData)(hsba, { xChannel: "saturation", yChannel: "brightness" }, "hsla")).toBeNull();
+  });
+  (0, import_vitest.test)("higher pixelRatio increases row count and path complexity", () => {
+    const low = (0, import_get_gamut_overlay_path.getGamutOverlayData)(hsba, { xChannel: "saturation", yChannel: "brightness" }, "oklch", {
+      pixelRatio: 1
+    });
+    const high = (0, import_get_gamut_overlay_path.getGamutOverlayData)(hsba, { xChannel: "saturation", yChannel: "brightness" }, "oklch", {
+      pixelRatio: 2
+    });
+    (0, import_vitest.expect)(low).not.toBeNull();
+    (0, import_vitest.expect)(high).not.toBeNull();
+    (0, import_vitest.expect)((0, import_get_gamut_overlay_path.gamutOverlayRowCount)(2)).toBeGreaterThan((0, import_get_gamut_overlay_path.gamutOverlayRowCount)(1));
+    (0, import_vitest.expect)(high.path.length).toBeGreaterThan(low.path.length);
+  });
+  (0, import_vitest.test)("gamutOverlayRowCount scales with DPR and caps at 200", () => {
+    (0, import_vitest.expect)((0, import_get_gamut_overlay_path.gamutOverlayRowCount)(1)).toBe(80);
+    (0, import_vitest.expect)((0, import_get_gamut_overlay_path.gamutOverlayRowCount)(2)).toBe(160);
+    (0, import_vitest.expect)((0, import_get_gamut_overlay_path.gamutOverlayRowCount)(100)).toBe(200);
+    (0, import_vitest.expect)((0, import_get_gamut_overlay_path.gamutOverlayRowCount)(0.5)).toBe(80);
+  });
+});

package/dist/utils/get-gamut-overlay-path.test.mjs

@@ -0,0 +1,33 @@
+// src/utils/get-gamut-overlay-path.test.ts
+import { describe, expect, test } from "vitest.mjs";
+import { parseColor } from "@zag-js/color-utils";
+import { gamutOverlayRowCount, getGamutOverlayData } from "./get-gamut-overlay-path.mjs";
+describe("get-gamut-overlay-path", () => {
+  const hsba = parseColor("hsba(0, 100%, 100%, 1)");
+  test("wrong area axes returns null", () => {
+    expect(
+      getGamutOverlayData(hsba, { xChannel: "hue", yChannel: "saturation" }, "oklch", { pixelRatio: 1 })
+    ).toBeNull();
+  });
+  test("non-wide format returns null", () => {
+    expect(getGamutOverlayData(hsba, { xChannel: "saturation", yChannel: "brightness" }, "hsla")).toBeNull();
+  });
+  test("higher pixelRatio increases row count and path complexity", () => {
+    const low = getGamutOverlayData(hsba, { xChannel: "saturation", yChannel: "brightness" }, "oklch", {
+      pixelRatio: 1
+    });
+    const high = getGamutOverlayData(hsba, { xChannel: "saturation", yChannel: "brightness" }, "oklch", {
+      pixelRatio: 2
+    });
+    expect(low).not.toBeNull();
+    expect(high).not.toBeNull();
+    expect(gamutOverlayRowCount(2)).toBeGreaterThan(gamutOverlayRowCount(1));
+    expect(high.path.length).toBeGreaterThan(low.path.length);
+  });
+  test("gamutOverlayRowCount scales with DPR and caps at 200", () => {
+    expect(gamutOverlayRowCount(1)).toBe(80);
+    expect(gamutOverlayRowCount(2)).toBe(160);
+    expect(gamutOverlayRowCount(100)).toBe(200);
+    expect(gamutOverlayRowCount(0.5)).toBe(80);
+  });
+});

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

@@ -1,5 +1,6 @@
 import { ChannelProps, ColorPickerProps } from '../color-picker.types.mjs';
 import { Color } from '@zag-js/color-utils';
+import './get-gamut-overlay-path.mjs';
 import '@zag-js/core';
 import '@zag-js/dismissable';
 import '@zag-js/popper';

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

@@ -1,5 +1,6 @@
 import { ChannelProps, ColorPickerProps } from '../color-picker.types.js';
 import { Color } from '@zag-js/color-utils';
+import './get-gamut-overlay-path.js';
 import '@zag-js/core';
 import '@zag-js/dismissable';
 import '@zag-js/popper';

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

@@ -36,8 +36,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");
@@ -50,9 +56,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/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.41.0",
+  "version": "2.0.0-next.0",
   "description": "Core logic for the color-picker widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,14 +27,14 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.41.0",
-    "@zag-js/dismissable": "1.41.0",
-    "@zag-js/core": "1.41.0",
-    "@zag-js/utils": "1.41.0",
-    "@zag-js/dom-query": "1.41.0",
-    "@zag-js/color-utils": "1.41.0",
-    "@zag-js/popper": "1.41.0",
-    "@zag-js/types": "1.41.0"
+    "@zag-js/core": "2.0.0-next.0",
+    "@zag-js/anatomy": "2.0.0-next.0",
+    "@zag-js/dom-query": "2.0.0-next.0",
+    "@zag-js/dismissable": "2.0.0-next.0",
+    "@zag-js/utils": "2.0.0-next.0",
+    "@zag-js/color-utils": "2.0.0-next.0",
+    "@zag-js/popper": "2.0.0-next.0",
+    "@zag-js/types": "2.0.0-next.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"