@zag-js/color-picker 0.12.0 → 0.14.0

package/dist/index.mjs

@@ -5,14 +5,15 @@ var anatomy = createAnatomy("color-picker", [
   "areaThumb",
   "areaGradient",
   "channelSliderTrack",
-  "channelSliderTrackBg",
+  "channelSliderTrackBackground",
   "channelSliderThumb",
   "channelInput",
   "swatch",
-  "swatchBg",
+  "swatchBackground",
   "content",
   "label",
-  "eyeDropTrigger"
+  "hiddenInput",
+  "eyeDropperTrigger"
 ]);
 var parts = anatomy.build();
 
@@ -27,6 +28,7 @@ import {
   isModifiedEvent
 } from "@zag-js/dom-event";
 import { dataAttr } from "@zag-js/dom-query";
+import { visuallyHiddenStyle } from "@zag-js/visually-hidden";
 
 // src/color-picker.dom.ts
 import { getRelativePoint } from "@zag-js/dom-event";
@@ -39,20 +41,28 @@ var dom = createScope({
   getChannelSliderTrackId: (ctx, channel) => ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`,
   getChannelInputId: (ctx, channel) => ctx.ids?.channelInput?.(channel) ?? `color-picker:${ctx.id}:input:${channel}`,
   getChannelSliderThumbId: (ctx, channel) => ctx.ids?.channelSliderThumb?.(channel) ?? `color-picker:${ctx.id}:slider-thumb:${channel}`,
-  getContentEl: (ctx) => dom.queryById(ctx, dom.getContentId(ctx)),
-  getAreaThumbEl: (ctx) => dom.queryById(ctx, dom.getAreaThumbId(ctx)),
-  getChannelSliderThumbEl: (ctx, channel) => dom.queryById(ctx, dom.getChannelSliderThumbId(ctx, channel)),
-  getChannelInputEl: (ctx, channel) => dom.queryById(ctx, dom.getChannelInputId(ctx, channel)),
-  getAreaEl: (ctx) => dom.queryById(ctx, dom.getAreaId(ctx)),
+  getHiddenInputId: (ctx) => `color-picker:${ctx.id}:hidden-input`,
+  getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
+  getAreaThumbEl: (ctx) => dom.getById(ctx, dom.getAreaThumbId(ctx)),
+  getChannelSliderThumbEl: (ctx, channel) => dom.getById(ctx, dom.getChannelSliderThumbId(ctx, channel)),
+  getChannelInputEl: (ctx, channel) => dom.getById(ctx, dom.getChannelInputId(ctx, channel)),
+  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
+  getAreaEl: (ctx) => dom.getById(ctx, dom.getAreaId(ctx)),
   getAreaValueFromPoint(ctx, point) {
-    const { percent } = getRelativePoint(point, dom.getAreaEl(ctx));
+    const areaEl = dom.getAreaEl(ctx);
+    if (!areaEl)
+      return;
+    const { percent } = getRelativePoint(point, areaEl);
     return percent;
   },
   getChannelSliderTrackEl: (ctx, channel) => {
-    return dom.queryById(ctx, dom.getChannelSliderTrackId(ctx, channel));
+    return dom.getById(ctx, dom.getChannelSliderTrackId(ctx, channel));
   },
   getChannelSliderValueFromPoint(ctx, point, channel) {
-    const { percent } = getRelativePoint(point, dom.getChannelSliderTrackEl(ctx, channel));
+    const trackEl = dom.getChannelSliderTrackEl(ctx, channel);
+    if (!trackEl)
+      return;
+    const { percent } = getRelativePoint(point, trackEl);
     return percent;
   },
   getChannelInputEls: (ctx) => {
@@ -376,25 +386,31 @@ var getSliderBgImage = (ctx, props) => {
 // src/color-picker.connect.ts
 function connect(state, send, normalize) {
   const valueAsColor = state.context.valueAsColor;
+  const value = state.context.value;
   const isDisabled = state.context.disabled;
   const isInteractive = state.context.isInteractive;
   const isDragging = state.matches("dragging");
   const channels = valueAsColor.getColorChannels();
   return {
     isDragging,
-    value: state.context.value,
+    value,
     valueAsColor,
+    alpha: valueAsColor.getChannelValue("alpha"),
     channels,
-    setColor(value) {
-      send({ type: "VALUE.SET", value: normalizeColor(value), src: "set-color" });
+    setColor(value2) {
+      send({ type: "VALUE.SET", value: normalizeColor(value2), src: "set-color" });
     },
-    setChannelValue(channel, value) {
-      const color = valueAsColor.withChannelValue(channel, value);
+    setChannelValue(channel, value2) {
+      const color = valueAsColor.withChannelValue(channel, value2);
       send({ type: "VALUE.SET", value: color, src: "set-channel" });
     },
     setFormat(format) {
-      const value = valueAsColor.toFormat(format);
-      send({ type: "VALUE.SET", value, src: "set-format" });
+      const value2 = valueAsColor.toFormat(format);
+      send({ type: "VALUE.SET", value: value2, src: "set-format" });
+    },
+    setAlpha(value2) {
+      const color = valueAsColor.withChannelValue("alpha", value2);
+      send({ type: "VALUE.SET", value: color, src: "set-alpha" });
     },
     contentProps: normalize.element({
       ...parts.content.attrs,
@@ -525,7 +541,7 @@ function connect(state, send, normalize) {
     getChannelSliderBackgroundProps(props) {
       const { orientation = "horizontal", channel } = props;
       return normalize.element({
-        ...parts.channelSliderTrackBg.attrs,
+        ...parts.channelSliderTrackBackground.attrs,
         "data-orientation": orientation,
         "data-channel": channel,
         style: {
@@ -641,19 +657,19 @@ function connect(state, send, normalize) {
         onChange(event) {
           if (isTextField)
             return;
-          const value = event.currentTarget.value;
-          send({ type: "CHANNEL_INPUT.CHANGE", channel, value, isTextField });
+          const value2 = event.currentTarget.value;
+          send({ type: "CHANNEL_INPUT.CHANGE", channel, value: value2, isTextField });
         },
         onBlur(event) {
-          const value = event.currentTarget.value;
-          send({ type: "CHANNEL_INPUT.BLUR", channel, value, isTextField });
+          const value2 = event.currentTarget.value;
+          send({ type: "CHANNEL_INPUT.BLUR", channel, value: value2, isTextField });
         },
         onKeyDown(event) {
           if (!isTextField)
             return;
           if (event.key === "Enter") {
-            const value = event.currentTarget.value;
-            send({ type: "CHANNEL_INPUT.CHANGE", channel, value, isTextField });
+            const value2 = event.currentTarget.value;
+            send({ type: "CHANNEL_INPUT.CHANGE", channel, value: value2, isTextField });
           }
         },
         style: {
@@ -663,17 +679,35 @@ function connect(state, send, normalize) {
         }
       });
     },
+    hiddenInputProps: normalize.input({
+      ...parts.hiddenInput.attrs,
+      type: "text",
+      disabled: isDisabled,
+      name: state.context.name,
+      id: dom.getHiddenInputId(state.context),
+      style: visuallyHiddenStyle,
+      defaultValue: value,
+      onChange(event) {
+        const value2 = event.currentTarget.value;
+        send({ type: "VALUE.SET", value: value2, src: "input.change" });
+      }
+    }),
     eyeDropperTriggerProps: normalize.button({
-      ...parts.eyeDropTrigger.attrs,
+      ...parts.eyeDropperTrigger.attrs,
+      disabled: isDisabled,
+      "data-disabled": dataAttr(isDisabled),
+      "aria-label": "Pick a color from the screen",
       onClick() {
+        if (!isInteractive)
+          return;
         send("EYEDROPPER.CLICK");
       }
     }),
     getSwatchBackgroundProps(props) {
-      const { value } = props;
-      const alpha = normalizeColor(value).getChannelValue("alpha");
+      const { value: value2 } = props;
+      const alpha = normalizeColor(value2).getChannelValue("alpha");
       return normalize.element({
-        ...parts.swatchBg.attrs,
+        ...parts.swatchBackground.attrs,
         "data-alpha": alpha,
         style: {
           width: "100%",
@@ -694,12 +728,12 @@ function connect(state, send, normalize) {
       });
     },
     getSwatchProps(props) {
-      const { value, readOnly } = props;
-      const color = normalizeColor(value).toFormat(valueAsColor.getColorSpace());
+      const { value: value2, readOnly } = props;
+      const color = normalizeColor(value2).toFormat(valueAsColor.getColorSpace());
       return normalize.element({
         ...parts.swatch.attrs,
         onClick() {
-          if (readOnly)
+          if (readOnly || !isInteractive)
             return;
           send({ type: "VALUE.SET", value: color });
         },
@@ -717,6 +751,7 @@ import { parseColor as parseColor2 } from "@zag-js/color-utils";
 import { createMachine } from "@zag-js/core";
 import { trackPointerMove } from "@zag-js/dom-event";
 import { raf } from "@zag-js/dom-query";
+import { trackFormControl } from "@zag-js/form-utils";
 import { clampValue, getPercentValue as getPercentValue2, snapValueToStep as snapValueToStep2 } from "@zag-js/numeric-range";
 import { disableTextSelection } from "@zag-js/text-selection";
 import { compact } from "@zag-js/utils";
@@ -732,21 +767,21 @@ function machine(userContext) {
         activeChannel: null,
         activeOrientation: null,
         value: "#D9D9D9",
-        ...ctx,
-        valueAsColor: parseColor2(ctx.value || "#D9D9D9")
+        ...ctx
       },
       computed: {
         isRtl: (ctx2) => ctx2.dir === "rtl",
-        isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readOnly)
+        isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readOnly),
+        valueAsColor: (ctx2) => parseColor2(ctx2.value)
       },
       on: {
         "VALUE.SET": {
           actions: ["setValue"]
         }
       },
-      created: ["setValueAsColor"],
+      activities: ["trackFormControl"],
       watch: {
-        value: ["setValueAsColor", "syncChannelInputs", "invokeOnChange"]
+        value: ["syncInputElements", "invokeOnChange"]
       },
       states: {
         idle: {
@@ -766,6 +801,10 @@ function machine(userContext) {
               target: "dragging",
               actions: ["setActiveChannel", "setChannelColorFromPoint", "focusChannelThumb"]
             },
+            "CHANNEL_SLIDER.FOCUS": {
+              target: "focused",
+              actions: ["setActiveChannel"]
+            },
             "CHANNEL_INPUT.FOCUS": {
               target: "focused",
               actions: ["setActiveChannel"]
@@ -876,6 +915,17 @@ function machine(userContext) {
         isTextField: (_ctx, evt) => !!evt.isTextField
       },
       activities: {
+        trackFormControl(ctx2, _evt, { send, initialContext }) {
+          const inputEl = dom.getHiddenInputEl(ctx2);
+          return trackFormControl(inputEl, {
+            onFieldsetDisabled() {
+              ctx2.disabled = true;
+            },
+            onFormReset() {
+              send({ type: "VALUE.SET", value: initialContext.value, src: "form.reset" });
+            }
+          });
+        },
         trackPointerMove(ctx2, _evt, { send }) {
           return trackPointerMove(dom.getDoc(ctx2), {
             onPointerMove({ point }) {
@@ -923,6 +973,8 @@ function machine(userContext) {
         setAreaColorFromPoint(ctx2, evt) {
           const { xChannel, yChannel } = evt.channel || ctx2.activeChannel;
           const percent = dom.getAreaValueFromPoint(ctx2, evt.point);
+          if (!percent)
+            return;
           const { getColorFromPoint } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
           const color = getColorFromPoint(percent.x, percent.y);
           if (!color)
@@ -932,6 +984,8 @@ function machine(userContext) {
         setChannelColorFromPoint(ctx2, evt) {
           const channel = evt.channel || ctx2.activeId;
           const percent = dom.getChannelSliderValueFromPoint(ctx2, evt.point, channel);
+          if (!percent)
+            return;
           const { minValue, maxValue, step } = ctx2.valueAsColor.getChannelRange(channel);
           const orientation = ctx2.activeOrientation || "horizontal";
           const point = orientation === "horizontal" ? percent.x : percent.y;
@@ -943,24 +997,18 @@ function machine(userContext) {
         setValue(ctx2, evt) {
           setColor(ctx2, evt.value);
         },
-        setValueAsColor(ctx2) {
-          try {
-            const color = parseColor2(ctx2.value);
-            if (color.isEqual(ctx2.valueAsColor))
-              return;
-            ctx2.valueAsColor = color;
-          } catch {
-          }
-        },
-        syncChannelInputs(ctx2) {
+        syncInputElements(ctx2) {
           const inputs = dom.getChannelInputEls(ctx2);
           inputs.forEach((input) => {
-            const channel = input.getAttribute("data-channel");
+            const channel = input.dataset.channel;
             if (!channel)
               return;
-            const value = getChannelInputValue(ctx2.valueAsColor, channel);
-            input.value = value.toString();
+            input.value = getChannelInputValue(ctx2.valueAsColor, channel);
           });
+          const hiddenInput = dom.getHiddenInputEl(ctx2);
+          if (!hiddenInput)
+            return;
+          hiddenInput.value = ctx2.value;
         },
         setChannelColorFromInput(ctx2, evt) {
           const { channel, isTextField, value } = evt;
@@ -1045,7 +1093,6 @@ function machine(userContext) {
 }
 var setColor = (ctx, color) => {
   ctx.value = color.toString("css");
-  ctx.valueAsColor = color;
 };
 export {
   anatomy,