@zag-js/color-picker 0.20.0 → 0.22.0

package/dist/index.mjs

@@ -17,7 +17,10 @@ var anatomy = createAnatomy("color-picker", [
 var parts = anatomy.build();
 
 // src/color-picker.connect.ts
-import { normalizeColor } from "@zag-js/color-utils";
+import {
+  getColorAreaGradient,
+  normalizeColor
+} from "@zag-js/color-utils";
 import {
   getEventKey,
   getEventPoint,
@@ -26,7 +29,7 @@ import {
   isLeftClick,
   isModifiedEvent
 } from "@zag-js/dom-event";
-import { dataAttr } from "@zag-js/dom-query";
+import { dataAttr, raf } from "@zag-js/dom-query";
 import { visuallyHiddenStyle } from "@zag-js/visually-hidden";
 
 // src/color-picker.dom.ts
@@ -151,6 +154,16 @@ function getChannelInputValue(color, channel) {
       return color.toString("hex");
     case "css":
       return color.toString("css");
+    case "hue":
+    case "saturation":
+    case "lightness":
+      return color.toFormat("hsl").getChannelValue("lightness").toString();
+    case "brightness":
+      return color.toFormat("hsb").getChannelValue("brightness").toString();
+    case "red":
+    case "green":
+    case "blue":
+      return color.toFormat("rgb").getChannelValue(channel).toString();
     default:
       return color.getChannelValue(channel).toString();
   }
@@ -160,191 +173,21 @@ function getChannelInputRange(color, channel) {
     case "hex":
     case "css":
       return void 0;
+    case "hue":
+    case "saturation":
+    case "lightness":
+      return color.toFormat("hsl").getChannelRange(channel);
+    case "brightness":
+      return color.toFormat("hsb").getChannelRange(channel);
+    case "red":
+    case "green":
+    case "blue":
+      return color.toFormat("rgb").getChannelRange(channel);
     default:
       return color.getChannelRange(channel);
   }
 }
 
-// src/utils/generate-format-background.ts
-var generateRGB_R = (orientation, dir, zValue) => {
-  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
-  const result = {
-    areaStyles: {
-      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,0),rgb(${zValue},255,0))`
-    },
-    areaGradientStyles: {
-      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(${zValue},0,255),rgb(${zValue},255,255))`,
-      WebkitMaskImage: maskImage,
-      maskImage
-    }
-  };
-  return result;
-};
-var generateRGB_G = (orientation, dir, zValue) => {
-  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
-  const result = {
-    areaStyles: {
-      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},0),rgb(255,${zValue},0))`
-    },
-    areaGradientStyles: {
-      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,${zValue},255),rgb(255,${zValue},255))`,
-      WebkitMaskImage: maskImage,
-      maskImage
-    }
-  };
-  return result;
-};
-var generateRGB_B = (orientation, dir, zValue) => {
-  const maskImage = `linear-gradient(to ${orientation[Number(!dir)]}, transparent, #000)`;
-  const result = {
-    areaStyles: {
-      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,0,${zValue}),rgb(255,0,${zValue}))`
-    },
-    areaGradientStyles: {
-      backgroundImage: `linear-gradient(to ${orientation[Number(dir)]},rgb(0,255,${zValue}),rgb(255,255,${zValue}))`,
-      WebkitMaskImage: maskImage,
-      maskImage
-    }
-  };
-  return result;
-};
-var generateHSL_H = (orientation, dir, zValue) => {
-  const result = {
-    areaStyles: {},
-    areaGradientStyles: {
-      background: [
-        `linear-gradient(to ${orientation[Number(dir)]}, hsla(0,0%,0%,1) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,1) 100%)`,
-        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,50%),hsla(0,0%,50%,0))`,
-        `hsl(${zValue}, 100%, 50%)`
-      ].join(",")
-    }
-  };
-  return result;
-};
-var generateHSL_S = (orientation, dir, alphaValue) => {
-  const result = {
-    areaStyles: {},
-    areaGradientStyles: {
-      background: [
-        `linear-gradient(to ${orientation[Number(!dir)]}, hsla(0,0%,0%,${alphaValue}) 0%, hsla(0,0%,0%,0) 50%, hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,${alphaValue}) 100%)`,
-        `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
-        "hsl(0, 0%, 50%)"
-      ].join(",")
-    }
-  };
-  return result;
-};
-var generateHSL_L = (orientation, dir, zValue) => {
-  const result = {
-    areaStyles: {},
-    areaGradientStyles: {
-      backgroundImage: [
-        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,${zValue}%),hsla(0,0%,${zValue}%,0))`,
-        `linear-gradient(to ${orientation[Number(dir)]},hsl(0,100%,${zValue}%),hsl(60,100%,${zValue}%),hsl(120,100%,${zValue}%),hsl(180,100%,${zValue}%),hsl(240,100%,${zValue}%),hsl(300,100%,${zValue}%),hsl(360,100%,${zValue}%))`
-      ].join(",")
-    }
-  };
-  return result;
-};
-var generateHSB_H = (orientation, dir, zValue) => {
-  const result = {
-    areaStyles: {},
-    areaGradientStyles: {
-      background: [
-        `linear-gradient(to ${orientation[Number(dir)]},hsl(0,0%,0%),hsla(0,0%,0%,0))`,
-        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,100%),hsla(0,0%,100%,0))`,
-        `hsl(${zValue}, 100%, 50%)`
-      ].join(",")
-    }
-  };
-  return result;
-};
-var generateHSB_S = (orientation, dir, alphaValue) => {
-  const result = {
-    areaStyles: {},
-    areaGradientStyles: {
-      background: [
-        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,0%,${alphaValue}),hsla(0,0%,0%,0))`,
-        `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
-        `linear-gradient(to ${orientation[Number(!dir)]},hsl(0,0%,0%),hsl(0,0%,100%))`
-      ].join(",")
-    }
-  };
-  return result;
-};
-var generateHSB_B = (orientation, dir, alphaValue) => {
-  const result = {
-    areaStyles: {},
-    areaGradientStyles: {
-      background: [
-        `linear-gradient(to ${orientation[Number(!dir)]},hsla(0,0%,100%,${alphaValue}),hsla(0,0%,100%,0))`,
-        `linear-gradient(to ${orientation[Number(dir)]},hsla(0,100%,50%,${alphaValue}),hsla(60,100%,50%,${alphaValue}),hsla(120,100%,50%,${alphaValue}),hsla(180,100%,50%,${alphaValue}),hsla(240,100%,50%,${alphaValue}),hsla(300,100%,50%,${alphaValue}),hsla(359,100%,50%,${alphaValue}))`,
-        "#000"
-      ].join(",")
-    }
-  };
-  return result;
-};
-
-// src/utils/get-color-area-gradient.ts
-function getColorAreaGradient(ctx, xChannel, yChannel) {
-  const value = ctx.valueAsColor;
-  const { zChannel } = value.getColorSpaceAxes({ xChannel, yChannel });
-  const zValue = value.getChannelValue(zChannel);
-  const { minValue: zMin, maxValue: zMax } = value.getChannelRange(zChannel);
-  const orientation = ["top", ctx.dir === "rtl" ? "left" : "right"];
-  let dir = false;
-  let background = { areaStyles: {}, areaGradientStyles: {} };
-  let alphaValue = (zValue - zMin) / (zMax - zMin);
-  let isHSL = value.getColorSpace() === "hsl";
-  switch (zChannel) {
-    case "red": {
-      dir = xChannel === "green";
-      background = generateRGB_R(orientation, dir, zValue);
-      break;
-    }
-    case "green": {
-      dir = xChannel === "red";
-      background = generateRGB_G(orientation, dir, zValue);
-      break;
-    }
-    case "blue": {
-      dir = xChannel === "red";
-      background = generateRGB_B(orientation, dir, zValue);
-      break;
-    }
-    case "hue": {
-      dir = xChannel !== "saturation";
-      if (isHSL) {
-        background = generateHSL_H(orientation, dir, zValue);
-      } else {
-        background = generateHSB_H(orientation, dir, zValue);
-      }
-      break;
-    }
-    case "saturation": {
-      dir = xChannel === "hue";
-      if (isHSL) {
-        background = generateHSL_S(orientation, dir, alphaValue);
-      } else {
-        background = generateHSB_S(orientation, dir, alphaValue);
-      }
-      break;
-    }
-    case "brightness": {
-      dir = xChannel === "hue";
-      background = generateHSB_B(orientation, dir, alphaValue);
-      break;
-    }
-    case "lightness": {
-      dir = xChannel === "hue";
-      background = generateHSL_L(orientation, dir, zValue);
-      break;
-    }
-  }
-  return background;
-}
-
 // src/utils/get-slider-background.ts
 function getSliderBgDirection(orientation, dir) {
   if (orientation === "vertical") {
@@ -415,11 +258,16 @@ function connect(state, send, normalize) {
     },
     contentProps: normalize.element({
       ...parts.content.attrs,
-      id: dom.getContentId(state.context)
+      id: dom.getContentId(state.context),
+      dir: state.context.dir
     }),
     getAreaProps(props) {
       const { xChannel, yChannel } = props;
-      const { areaStyles } = getColorAreaGradient(state.context, xChannel, yChannel);
+      const { areaStyles } = getColorAreaGradient(state.context.valueAsColor, {
+        xChannel,
+        yChannel,
+        dir: state.context.dir
+      });
       return normalize.element({
         ...parts.area.attrs,
         id: dom.getAreaId(state.context),
@@ -444,7 +292,11 @@ function connect(state, send, normalize) {
     },
     getAreaGradientProps(props) {
       const { xChannel, yChannel } = props;
-      const { areaGradientStyles } = getColorAreaGradient(state.context, xChannel, yChannel);
+      const { areaGradientStyles } = getColorAreaGradient(valueAsColor, {
+        xChannel,
+        yChannel,
+        dir: state.context.dir
+      });
       return normalize.element({
         ...parts.areaGradient.attrs,
         id: dom.getAreaGradientId(state.context),
@@ -652,22 +504,15 @@ function connect(state, send, normalize) {
         min: range?.minValue,
         max: range?.maxValue,
         step: range?.step,
-        onFocus() {
+        onFocus(event) {
           send({ type: "CHANNEL_INPUT.FOCUS", channel });
-        },
-        onChange(event) {
-          if (isTextField)
-            return;
-          const value2 = event.currentTarget.value;
-          send({ type: "CHANNEL_INPUT.CHANGE", channel, value: value2, isTextField });
+          raf(() => event.target.select());
         },
         onBlur(event) {
           const value2 = event.currentTarget.value;
-          send({ type: "CHANNEL_INPUT.BLUR", channel, value: value2, isTextField });
+          send({ type: "CHANNEL_INPUT.CHANGE", channel, value: value2, isTextField });
         },
         onKeyDown(event) {
-          if (!isTextField)
-            return;
           if (event.key === "Enter") {
             const value2 = event.currentTarget.value;
             send({ type: "CHANNEL_INPUT.CHANGE", channel, value: value2, isTextField });
@@ -729,7 +574,7 @@ function connect(state, send, normalize) {
     },
     getSwatchProps(props) {
       const { value: value2, readOnly } = props;
-      const color = normalizeColor(value2).toFormat(valueAsColor.getColorSpace());
+      const color = normalizeColor(value2).toFormat(valueAsColor.getColorFormat());
       return normalize.element({
         ...parts.swatch.attrs,
         onClick() {
@@ -750,11 +595,11 @@ function connect(state, send, normalize) {
 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 { raf as raf2 } 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";
+import { compact, tryCatch } from "@zag-js/utils";
 function machine(userContext) {
   const ctx = compact(userContext);
   return createMachine(
@@ -875,14 +720,6 @@ function machine(userContext) {
             "CHANNEL_INPUT.CHANGE": {
               actions: ["setChannelColorFromInput"]
             },
-            "CHANNEL_INPUT.BLUR": [
-              {
-                guard: "isTextField",
-                target: "idle",
-                actions: ["setChannelColorFromInput"]
-              },
-              { target: "idle" }
-            ],
             "CHANNEL_SLIDER.BLUR": {
               target: "idle"
             },
@@ -914,9 +751,6 @@ function machine(userContext) {
       }
     },
     {
-      guards: {
-        isTextField: (_ctx, evt) => !!evt.isTextField
-      },
       activities: {
         trackFormControl(ctx2, _evt, { send, initialContext }) {
           const inputEl = dom.getHiddenInputEl(ctx2);
@@ -953,7 +787,7 @@ function machine(userContext) {
           const win = dom.getWin(ctx2);
           const picker = new win.EyeDropper();
           picker.open().then(({ sRGBHex }) => {
-            const format = ctx2.valueAsColor.getColorSpace();
+            const format = ctx2.valueAsColor.getColorFormat();
             const color = parseColor2(sRGBHex).toFormat(format);
             set.value(ctx2, color);
             ctx2.onValueChangeEnd?.({ value: ctx2.value, valueAsColor: color });
@@ -1013,14 +847,25 @@ function machine(userContext) {
         },
         setChannelColorFromInput(ctx2, evt) {
           const { channel, isTextField, value } = evt;
-          try {
-            const format = ctx2.valueAsColor.getColorSpace();
-            const newColor = isTextField ? parseColor2(value).toFormat(format) : ctx2.valueAsColor.withChannelValue(channel, value);
-            set.value(ctx2, newColor);
-          } catch {
+          if (channel === "alpha") {
+            const newColor2 = ctx2.valueAsColor.withChannelValue("alpha", value);
+            set.value(ctx2, newColor2);
+            return;
+          }
+          if (isTextField) {
+            const format = "hsl";
+            const currentAlpha = ctx2.valueAsColor.getChannelValue("alpha");
+            const newColor2 = tryCatch(
+              () => parseColor2(value).toFormat(format).withChannelValue("alpha", currentAlpha),
+              () => ctx2.valueAsColor
+            );
             const inputEl = dom.getChannelInputEl(ctx2, channel);
             dom.setValue(inputEl, getChannelInputValue(ctx2.valueAsColor, channel));
+            set.value(ctx2, newColor2);
+            return;
           }
+          const newColor = ctx2.valueAsColor.withChannelValue(channel, value);
+          set.value(ctx2, newColor);
         },
         incrementChannel(ctx2, evt) {
           const { minValue, maxValue, step } = ctx2.valueAsColor.getChannelRange(evt.channel);
@@ -1071,12 +916,12 @@ function machine(userContext) {
           set.value(ctx2, color);
         },
         focusAreaThumb(ctx2) {
-          raf(() => {
+          raf2(() => {
             dom.getAreaThumbEl(ctx2)?.focus({ preventScroll: true });
           });
         },
         focusChannelThumb(ctx2, evt) {
-          raf(() => {
+          raf2(() => {
             dom.getChannelSliderThumbEl(ctx2, evt.channel)?.focus({ preventScroll: true });
           });
         }