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

package/dist/color-picker.anatomy.d.mts

@@ -1,6 +1,6 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 
-declare const anatomy: _zag_js_anatomy.Anatomy<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
-declare const parts: Record<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect", _zag_js_anatomy.AnatomyPart>;
+declare const anatomy: _zag_js_anatomy.Anatomy<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "gamutOverlay" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
+declare const parts: Record<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "gamutOverlay" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect", _zag_js_anatomy.AnatomyPart>;
 
 export { anatomy, parts };

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

@@ -1,6 +1,6 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 
-declare const anatomy: _zag_js_anatomy.Anatomy<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
-declare const parts: Record<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect", _zag_js_anatomy.AnatomyPart>;
+declare const anatomy: _zag_js_anatomy.Anatomy<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "gamutOverlay" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
+declare const parts: Record<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "gamutOverlay" | "valueText" | "areaBackground" | "channelSlider" | "channelSliderLabel" | "channelSliderTrack" | "channelSliderThumb" | "channelSliderValueText" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect", _zag_js_anatomy.AnatomyPart>;
 
 export { anatomy, parts };

package/dist/color-picker.anatomy.js

@@ -34,6 +34,7 @@ var anatomy = (0, import_anatomy.createAnatomy)("color-picker", [
   "content",
   "area",
   "areaThumb",
+  "gamutOverlay",
   "valueText",
   "areaBackground",
   "channelSlider",

package/dist/color-picker.anatomy.mjs

@@ -9,6 +9,7 @@ var anatomy = createAnatomy("color-picker", [
   "content",
   "area",
   "areaThumb",
+  "gamutOverlay",
   "valueText",
   "areaBackground",
   "channelSlider",

package/dist/color-picker.connect.d.mts

@@ -1,6 +1,7 @@
 import { PropTypes, NormalizeProps } from '@zag-js/types';
 import { ColorPickerService, ColorPickerApi } from './color-picker.types.mjs';
 import '@zag-js/color-utils';
+import './utils/get-gamut-overlay-path.mjs';
 import '@zag-js/core';
 import '@zag-js/dismissable';
 import '@zag-js/popper';

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

@@ -1,6 +1,7 @@
 import { PropTypes, NormalizeProps } from '@zag-js/types';
 import { ColorPickerService, ColorPickerApi } from './color-picker.types.js';
 import '@zag-js/color-utils';
+import './utils/get-gamut-overlay-path.js';
 import '@zag-js/core';
 import '@zag-js/dismissable';
 import '@zag-js/popper';

package/dist/color-picker.connect.js

@@ -41,12 +41,14 @@ var import_color_picker = require("./color-picker.anatomy.js");
 var dom = __toESM(require("./color-picker.dom.js"));
 var import_get_channel_display_color = require("./utils/get-channel-display-color.js");
 var import_get_channel_input_value = require("./utils/get-channel-input-value.js");
+var import_get_gamut_overlay_path = require("./utils/get-gamut-overlay-path.js");
 var import_get_slider_background = require("./utils/get-slider-background.js");
 function connect(service, normalize) {
   const { context, send, prop, computed, state, scope } = service;
   const value = context.get("value");
   const format = context.get("format");
   const areaValue = computed("areaValue");
+  const stableAreaValue = context.get("areaBaseColor") ?? areaValue;
   const valueAsString = computed("valueAsString");
   const disabled = computed("disabled");
   const readOnly = !!prop("readOnly");
@@ -63,11 +65,21 @@ function connect(service, normalize) {
       yChannel: props.yChannel ?? channels[2]
     };
   };
+  function getDefaultDevicePixelRatio() {
+    if (typeof globalThis === "undefined") return 1;
+    const dpr = globalThis.devicePixelRatio;
+    return typeof dpr === "number" && Number.isFinite(dpr) ? dpr : 1;
+  }
+  function resolveGamutOverlay(props = {}) {
+    const pixelRatio = props.pixelRatio ?? getDefaultDevicePixelRatio();
+    return (0, import_get_gamut_overlay_path.getGamutOverlayData)(stableAreaValue, getAreaChannels(props), format, { pixelRatio });
+  }
   const currentPlacement = context.get("currentPlacement");
   const currentPlacementSide = currentPlacement ? (0, import_popper.getPlacementSide)(currentPlacement) : void 0;
   const popperStyles = (0, import_popper.getPlacementStyles)({
     ...prop("positioning"),
-    placement: currentPlacement
+    placement: currentPlacement,
+    positioned: context.get("positioned")
   });
   function getSwatchTriggerState(props) {
     const color = (0, import_color_utils.normalizeColor)(props.value).toFormat(context.get("format"));
@@ -83,6 +95,10 @@ function connect(service, normalize) {
     open,
     valueAsString,
     value,
+    isInSrgbGamut: (0, import_color_utils.isInSrgbGamut)(value),
+    getGamutOverlay(props = {}) {
+      return resolveGamutOverlay(props);
+    },
     inline: !!prop("inline"),
     setOpen(nextOpen) {
       if (prop("inline")) return;
@@ -104,9 +120,8 @@ function connect(service, normalize) {
       send({ type: "VALUE.SET", value: color, src: "set-channel" });
     },
     format: context.get("format"),
-    setFormat(format2) {
-      const formatValue = value.toFormat(format2);
-      send({ type: "VALUE.SET", value: formatValue, src: "set-format" });
+    setFormat(nextFormat) {
+      send({ type: "FORMAT.SET", format: nextFormat, src: "set-format" });
     },
     alpha: value.getChannelValue("alpha"),
     setAlpha(alphaValue) {
@@ -115,9 +130,8 @@ function connect(service, normalize) {
     },
     getRootProps() {
       return normalize.element({
-        ...import_color_picker.parts.root.attrs,
+        ...import_color_picker.parts.root.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getRootId(scope),
         "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
         "data-readonly": (0, import_dom_query2.dataAttr)(readOnly),
         "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
@@ -128,7 +142,7 @@ function connect(service, normalize) {
     },
     getLabelProps() {
       return normalize.element({
-        ...import_color_picker.parts.label.attrs,
+        ...import_color_picker.parts.label.attrs(scope.id),
         dir: prop("dir"),
         id: dom.getLabelId(scope),
         htmlFor: dom.getHiddenInputId(scope),
@@ -146,8 +160,7 @@ function connect(service, normalize) {
     },
     getControlProps() {
       return normalize.element({
-        ...import_color_picker.parts.control.attrs,
-        id: dom.getControlId(scope),
+        ...import_color_picker.parts.control.attrs(scope.id),
         dir: prop("dir"),
         "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
         "data-readonly": (0, import_dom_query2.dataAttr)(readOnly),
@@ -158,7 +171,7 @@ function connect(service, normalize) {
     },
     getTriggerProps() {
       return normalize.button({
-        ...import_color_picker.parts.trigger.attrs,
+        ...import_color_picker.parts.trigger.attrs(scope.id),
         id: dom.getTriggerId(scope),
         dir: prop("dir"),
         disabled,
@@ -190,15 +203,14 @@ function connect(service, normalize) {
     },
     getPositionerProps() {
       return normalize.element({
-        ...import_color_picker.parts.positioner.attrs,
-        id: dom.getPositionerId(scope),
+        ...import_color_picker.parts.positioner.attrs(scope.id),
         dir: prop("dir"),
         style: popperStyles.floating
       });
     },
     getContentProps() {
       return normalize.element({
-        ...import_color_picker.parts.content.attrs,
+        ...import_color_picker.parts.content.attrs(scope.id),
         id: dom.getContentId(scope),
         dir: prop("dir"),
         role: prop("inline") ? void 0 : "dialog",
@@ -211,7 +223,7 @@ function connect(service, normalize) {
     },
     getValueTextProps() {
       return normalize.element({
-        ...import_color_picker.parts.valueText.attrs,
+        ...import_color_picker.parts.valueText.attrs(scope.id),
         dir: prop("dir"),
         "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
         "data-focus": (0, import_dom_query2.dataAttr)(focused)
@@ -219,14 +231,13 @@ function connect(service, normalize) {
     },
     getAreaProps(props = {}) {
       const { xChannel, yChannel } = getAreaChannels(props);
-      const { areaStyles } = (0, import_color_utils.getColorAreaGradient)(areaValue, {
+      const { areaStyles } = (0, import_color_utils.getColorAreaGradient)(stableAreaValue, {
         xChannel,
         yChannel,
         dir: prop("dir")
       });
       return normalize.element({
-        ...import_color_picker.parts.area.attrs,
-        id: dom.getAreaId(scope),
+        ...import_color_picker.parts.area.attrs(scope.id),
         role: "group",
         "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
         "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
@@ -250,14 +261,13 @@ function connect(service, normalize) {
     },
     getAreaBackgroundProps(props = {}) {
       const { xChannel, yChannel } = getAreaChannels(props);
-      const { areaGradientStyles } = (0, import_color_utils.getColorAreaGradient)(areaValue, {
+      const { areaGradientStyles } = (0, import_color_utils.getColorAreaGradient)(stableAreaValue, {
         xChannel,
         yChannel,
         dir: prop("dir")
       });
       return normalize.element({
-        ...import_color_picker.parts.areaBackground.attrs,
-        id: dom.getAreaGradientId(scope),
+        ...import_color_picker.parts.areaBackground.attrs(scope.id),
         "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
         "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
         "data-readonly": (0, import_dom_query2.dataAttr)(readOnly),
@@ -269,18 +279,45 @@ function connect(service, normalize) {
         }
       });
     },
+    getGamutOverlayProps(props = {}) {
+      const data = resolveGamutOverlay(props);
+      return normalize.element({
+        ...import_color_picker.parts.gamutOverlay.attrs(scope.id),
+        viewBox: "0 0 100 100",
+        preserveAspectRatio: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "aria-hidden": true,
+        "data-state": data ? "visible" : "hidden",
+        style: {
+          position: "absolute",
+          inset: "0",
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          pointerEvents: "none"
+        }
+      });
+    },
     getAreaThumbProps(props = {}) {
       const { xChannel, yChannel } = getAreaChannels(props);
       const channel = { xChannel, yChannel };
-      const xPercent = areaValue.getChannelValuePercent(xChannel);
-      const yPercent = 1 - areaValue.getChannelValuePercent(yChannel);
+      const dragPos = context.get("areaDragPosition");
       const isRtl = prop("dir") === "rtl";
+      let xPercent;
+      let yPercent;
+      if (dragPos) {
+        xPercent = dragPos.x;
+        yPercent = dragPos.y;
+      } else {
+        xPercent = areaValue.getChannelValuePercent(xChannel);
+        yPercent = 1 - areaValue.getChannelValuePercent(yChannel);
+      }
       const finalXPercent = isRtl ? 1 - xPercent : xPercent;
       const xValue = areaValue.getChannelValue(xChannel);
       const yValue = areaValue.getChannelValue(yChannel);
       const color = areaValue.withChannelValue("alpha", 1).toString("css");
       return normalize.element({
-        ...import_color_picker.parts.areaThumb.attrs,
+        ...import_color_picker.parts.areaThumb.attrs(scope.id),
         id: dom.getAreaThumbId(scope),
         dir: prop("dir"),
         tabIndex: disabled ? void 0 : 0,
@@ -348,7 +385,7 @@ function connect(service, normalize) {
     getTransparencyGridProps(props = {}) {
       const { size = "12px" } = props;
       return normalize.element({
-        ...import_color_picker.parts.transparencyGrid.attrs,
+        ...import_color_picker.parts.transparencyGrid.attrs(scope.id),
         style: {
           "--size": size,
           width: "100%",
@@ -366,7 +403,7 @@ function connect(service, normalize) {
     getChannelSliderProps(props) {
       const { orientation = "horizontal", channel, format: format2 } = props;
       return normalize.element({
-        ...import_color_picker.parts.channelSlider.attrs,
+        ...import_color_picker.parts.channelSlider.attrs(scope.id),
         "data-channel": channel,
         "data-orientation": orientation,
         role: "presentation",
@@ -386,10 +423,9 @@ function connect(service, normalize) {
     },
     getChannelSliderTrackProps(props) {
       const { orientation = "horizontal", channel, format: format2 } = props;
-      const normalizedValue = format2 ? value.toFormat(format2) : areaValue;
+      const normalizedValue = format2 ? value.toFormat(format2) : stableAreaValue;
       return normalize.element({
-        ...import_color_picker.parts.channelSliderTrack.attrs,
-        id: dom.getChannelSliderTrackId(scope, channel),
+        ...import_color_picker.parts.channelSliderTrack.attrs(scope.id),
         role: "group",
         "data-channel": channel,
         "data-orientation": orientation,
@@ -408,7 +444,7 @@ function connect(service, normalize) {
     getChannelSliderLabelProps(props) {
       const { channel } = props;
       return normalize.element({
-        ...import_color_picker.parts.channelSliderLabel.attrs,
+        ...import_color_picker.parts.channelSliderLabel.attrs(scope.id),
         "data-channel": channel,
         onClick(event) {
           if (!interactive) return;
@@ -424,13 +460,13 @@ function connect(service, normalize) {
     },
     getChannelSliderValueTextProps(props) {
       return normalize.element({
-        ...import_color_picker.parts.channelSliderValueText.attrs,
+        ...import_color_picker.parts.channelSliderValueText.attrs(scope.id),
         "data-channel": props.channel
       });
     },
     getChannelSliderThumbProps(props) {
       const { orientation = "horizontal", channel, format: format2 } = props;
-      const normalizedValue = format2 ? value.toFormat(format2) : areaValue;
+      const normalizedValue = format2 ? value.toFormat(format2) : stableAreaValue;
       const channelRange = normalizedValue.getChannelRange(channel);
       const channelValue = normalizedValue.getChannelValue(channel);
       const offset = (channelValue - channelRange.minValue) / (channelRange.maxValue - channelRange.minValue);
@@ -438,7 +474,7 @@ function connect(service, normalize) {
       const finalOffset = orientation === "horizontal" && isRtl ? 1 - offset : offset;
       const placementStyles = orientation === "horizontal" ? { left: `${finalOffset * 100}%`, top: "50%" } : { top: `${offset * 100}%`, left: "50%" };
       return normalize.element({
-        ...import_color_picker.parts.channelSliderThumb.attrs,
+        ...import_color_picker.parts.channelSliderThumb.attrs(scope.id),
         id: dom.getChannelSliderThumbId(scope, channel),
         role: "slider",
         "aria-label": channel,
@@ -455,7 +491,7 @@ function connect(service, normalize) {
         style: {
           forcedColorAdjust: "none",
           position: "absolute",
-          background: (0, import_get_channel_display_color.getChannelDisplayColor)(areaValue, channel).toString("css"),
+          background: (0, import_get_channel_display_color.getChannelDisplayColor)(stableAreaValue, channel).toString("css"),
           ...placementStyles
         },
         onFocus() {
@@ -510,7 +546,7 @@ function connect(service, normalize) {
       const isTextField = channel === "hex" || channel === "css";
       const channelRange = (0, import_get_channel_input_value.getChannelRange)(value, channel);
       return normalize.input({
-        ...import_color_picker.parts.channelInput.attrs,
+        ...import_color_picker.parts.channelInput.attrs(scope.id),
         dir: prop("dir"),
         type: isTextField ? "text" : "number",
         "data-channel": channel,
@@ -574,7 +610,7 @@ function connect(service, normalize) {
     },
     getEyeDropperTriggerProps() {
       return normalize.button({
-        ...import_color_picker.parts.eyeDropperTrigger.attrs,
+        ...import_color_picker.parts.eyeDropperTrigger.attrs(scope.id),
         type: "button",
         dir: prop("dir"),
         disabled,
@@ -590,7 +626,7 @@ function connect(service, normalize) {
     },
     getSwatchGroupProps() {
       return normalize.element({
-        ...import_color_picker.parts.swatchGroup.attrs,
+        ...import_color_picker.parts.swatchGroup.attrs(scope.id),
         role: "group"
       });
     },
@@ -598,7 +634,7 @@ function connect(service, normalize) {
     getSwatchTriggerProps(props) {
       const swatchState = getSwatchTriggerState(props);
       return normalize.button({
-        ...import_color_picker.parts.swatchTrigger.attrs,
+        ...import_color_picker.parts.swatchTrigger.attrs(scope.id),
         disabled: swatchState.disabled,
         dir: prop("dir"),
         type: "button",
@@ -619,7 +655,7 @@ function connect(service, normalize) {
     getSwatchIndicatorProps(props) {
       const swatchState = getSwatchTriggerState(props);
       return normalize.element({
-        ...import_color_picker.parts.swatchIndicator.attrs,
+        ...import_color_picker.parts.swatchIndicator.attrs(scope.id),
         dir: prop("dir"),
         hidden: !swatchState.checked
       });
@@ -629,7 +665,7 @@ function connect(service, normalize) {
       const swatchState = getSwatchTriggerState(props);
       const color = swatchState.value.toString(respectAlpha ? "css" : "hex");
       return normalize.element({
-        ...import_color_picker.parts.swatch.attrs,
+        ...import_color_picker.parts.swatch.attrs(scope.id),
         dir: prop("dir"),
         "data-state": swatchState.checked ? "checked" : "unchecked",
         "data-value": swatchState.valueAsString,
@@ -642,7 +678,7 @@ function connect(service, normalize) {
     },
     getFormatTriggerProps() {
       return normalize.button({
-        ...import_color_picker.parts.formatTrigger.attrs,
+        ...import_color_picker.parts.formatTrigger.attrs(scope.id),
         dir: prop("dir"),
         type: "button",
         "aria-label": `change color format to ${getNextFormat(format)}`,
@@ -655,7 +691,7 @@ function connect(service, normalize) {
     },
     getFormatSelectProps() {
       return normalize.select({
-        ...import_color_picker.parts.formatSelect.attrs,
+        ...import_color_picker.parts.formatSelect.attrs(scope.id),
         "aria-label": "change color format",
         dir: prop("dir"),
         defaultValue: prop("format"),
@@ -668,7 +704,7 @@ function connect(service, normalize) {
     }
   };
 }
-var formats = ["hsba", "hsla", "rgba"];
+var formats = ["hsba", "hsla", "rgba", "oklab", "oklch"];
 var formatRegex = new RegExp(`^(${formats.join("|")})$`);
 function getNextFormat(format) {
   const index = formats.indexOf(format);