@zag-js/color-picker 0.55.0 → 0.56.1

package/dist/index.js

@@ -91,8 +91,7 @@ var dom = (0, import_dom_query.createScope)({
   getAreaEl: (ctx) => dom.getById(ctx, dom.getAreaId(ctx)),
   getAreaValueFromPoint(ctx, point) {
     const areaEl = dom.getAreaEl(ctx);
-    if (!areaEl)
-      return;
+    if (!areaEl) return;
     const { percent } = (0, import_dom_event.getRelativePoint)(point, areaEl);
     return percent;
   },
@@ -104,8 +103,7 @@ var dom = (0, import_dom_query.createScope)({
   },
   getChannelSliderValueFromPoint(ctx, point, channel) {
     const trackEl = dom.getChannelSliderTrackEl(ctx, channel);
-    if (!trackEl)
-      return;
+    if (!trackEl) return;
     const { percent } = (0, import_dom_event.getRelativePoint)(point, trackEl);
     return percent;
   },
@@ -141,8 +139,7 @@ function getChannelDisplayColor(color, channel) {
 // src/utils/get-channel-input-value.ts
 var import_color_utils2 = require("@zag-js/color-utils");
 function getChannelValue(color, channel) {
-  if (channel == null)
-    return "";
+  if (channel == null) return "";
   if (channel === "hex") {
     return color.toString("hex");
   }
@@ -273,8 +270,7 @@ function connect(state, send, normalize) {
     valueAsString,
     value,
     setOpen(nextOpen) {
-      if (nextOpen === open)
-        return;
+      if (nextOpen === open) return;
       send({ type: nextOpen ? "OPEN" : "CLOSE" });
     },
     setValue(value2) {
@@ -353,13 +349,11 @@ function connect(state, send, normalize) {
         "data-focus": (0, import_dom_query2.dataAttr)(focused),
         type: "button",
         onClick() {
-          if (!interactive)
-            return;
+          if (!interactive) return;
           send({ type: "TRIGGER.CLICK" });
         },
         onBlur() {
-          if (!interactive)
-            return;
+          if (!interactive) return;
           send({ type: "TRIGGER.BLUR" });
         },
         style: {
@@ -397,12 +391,9 @@ function connect(state, send, normalize) {
         id: dom.getAreaId(state.context),
         role: "group",
         onPointerDown(event) {
-          if (!interactive)
-            return;
-          if (!(0, import_dom_event2.isLeftClick)(event))
-            return;
-          if ((0, import_dom_event2.isModifierKey)(event))
-            return;
+          if (!interactive) return;
+          if (!(0, import_dom_event2.isLeftClick)(event)) return;
+          if ((0, import_dom_event2.isModifierKey)(event)) return;
           const point = (0, import_dom_event2.getEventPoint)(event);
           const channel = { xChannel, yChannel };
           send({ type: "AREA.POINTER_DOWN", point, channel, id: "area" });
@@ -464,15 +455,12 @@ function connect(state, send, normalize) {
           background: areaValue.withChannelValue("alpha", 1).toString("css")
         },
         onFocus() {
-          if (!interactive)
-            return;
+          if (!interactive) return;
           send({ type: "AREA.FOCUS", id: "area", channel });
         },
         onKeyDown(event) {
-          if (event.defaultPrevented)
-            return;
-          if (!interactive)
-            return;
+          if (event.defaultPrevented) return;
+          if (!interactive) return;
           const step = (0, import_dom_event2.getEventStep)(event);
           const keyMap = {
             ArrowUp() {
@@ -531,12 +519,9 @@ function connect(state, send, normalize) {
         "data-orientation": orientation,
         role: "presentation",
         onPointerDown(event) {
-          if (!interactive)
-            return;
-          if (!(0, import_dom_event2.isLeftClick)(event))
-            return;
-          if ((0, import_dom_event2.isModifierKey)(event))
-            return;
+          if (!interactive) return;
+          if (!(0, import_dom_event2.isLeftClick)(event)) return;
+          if ((0, import_dom_event2.isModifierKey)(event)) return;
           const point = (0, import_dom_event2.getEventPoint)(event);
           send({ type: "CHANNEL_SLIDER.POINTER_DOWN", channel, point, id: channel, orientation });
           event.preventDefault();
@@ -595,15 +580,12 @@ function connect(state, send, normalize) {
           ...placementStyles
         },
         onFocus() {
-          if (!interactive)
-            return;
+          if (!interactive) return;
           send({ type: "CHANNEL_SLIDER.FOCUS", channel });
         },
         onKeyDown(event) {
-          if (event.defaultPrevented)
-            return;
-          if (!interactive)
-            return;
+          if (event.defaultPrevented) return;
+          if (!interactive) return;
           const step = (0, import_dom_event2.getEventStep)(event) * stepValue;
           const keyMap = {
             ArrowUp() {
@@ -662,30 +644,25 @@ function connect(state, send, normalize) {
         max: range?.maxValue,
         step: range?.step,
         onBeforeInput(event) {
-          if (isTextField || !interactive)
-            return;
+          if (isTextField || !interactive) return;
           const value2 = event.currentTarget.value;
           if (value2.match(/[^0-9.]/g)) {
             event.preventDefault();
           }
         },
         onFocus(event) {
-          if (!interactive)
-            return;
+          if (!interactive) return;
           send({ type: "CHANNEL_INPUT.FOCUS", channel });
           event.target.select();
         },
         onBlur(event) {
-          if (!interactive)
-            return;
+          if (!interactive) return;
           const value2 = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
           send({ type: "CHANNEL_INPUT.BLUR", channel, value: value2, isTextField });
         },
         onKeyDown(event) {
-          if (event.defaultPrevented)
-            return;
-          if (!interactive)
-            return;
+          if (event.defaultPrevented) return;
+          if (!interactive) return;
           if (event.key === "Enter") {
             const value2 = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
             send({ type: "CHANNEL_INPUT.CHANGE", channel, value: value2, isTextField });
@@ -718,8 +695,7 @@ function connect(state, send, normalize) {
         "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
         "aria-label": "Pick a color from the screen",
         onClick() {
-          if (!interactive)
-            return;
+          if (!interactive) return;
           send("EYEDROPPER.CLICK");
         }
       });
@@ -743,8 +719,7 @@ function connect(state, send, normalize) {
         "data-value": swatchState.valueAsString,
         "data-disabled": (0, import_dom_query2.dataAttr)(swatchState.disabled),
         onClick() {
-          if (swatchState.disabled)
-            return;
+          if (swatchState.disabled) return;
           send({ type: "SWATCH_TRIGGER.CLICK", value: swatchState.value });
         },
         style: {
@@ -781,8 +756,7 @@ function connect(state, send, normalize) {
         type: "button",
         "aria-label": `change color format to ${getNextFormat(state.context.format)}`,
         onClick(event) {
-          if (event.currentTarget.disabled)
-            return;
+          if (event.currentTarget.disabled) return;
           const nextFormat = getNextFormat(state.context.format);
           send({ type: "FORMAT.SET", format: nextFormat, src: "format-trigger" });
         }
@@ -810,8 +784,7 @@ function getNextFormat(format) {
   return formats[index + 1] ?? formats[0];
 }
 function assertFormat(format) {
-  if (formatRegex.test(format))
-    return format;
+  if (formatRegex.test(format)) return format;
   throw new Error(`Unsupported color format: ${format}`);
 }
 
@@ -1168,8 +1141,7 @@ function machine(userContext) {
             defer: true,
             onInteractOutside(event) {
               ctx2.onInteractOutside?.(event);
-              if (event.defaultPrevented)
-                return;
+              if (event.defaultPrevented) return;
               ctx2.restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
             },
             onPointerDownOutside: ctx2.onPointerDownOutside,
@@ -1209,8 +1181,7 @@ function machine(userContext) {
       actions: {
         openEyeDropper(ctx2) {
           const isSupported = "EyeDropper" in dom.getWin(ctx2);
-          if (!isSupported)
-            return;
+          if (!isSupported) return;
           const win = dom.getWin(ctx2);
           const picker = new win.EyeDropper();
           picker.open().then(({ sRGBHex }) => {
@@ -1222,10 +1193,8 @@ function machine(userContext) {
         },
         setActiveChannel(ctx2, evt) {
           ctx2.activeId = evt.id;
-          if (evt.channel)
-            ctx2.activeChannel = evt.channel;
-          if (evt.orientation)
-            ctx2.activeOrientation = evt.orientation;
+          if (evt.channel) ctx2.activeChannel = evt.channel;
+          if (evt.orientation) ctx2.activeOrientation = evt.orientation;
         },
         clearActiveChannel(ctx2) {
           ctx2.activeChannel = null;
@@ -1235,8 +1204,7 @@ function machine(userContext) {
         setAreaColorFromPoint(ctx2, evt) {
           const { xChannel, yChannel } = evt.channel || ctx2.activeChannel;
           const percent = dom.getAreaValueFromPoint(ctx2, evt.point);
-          if (!percent)
-            return;
+          if (!percent) return;
           const xValue = ctx2.areaValue.getChannelPercentValue(xChannel, percent.x);
           const yValue = ctx2.areaValue.getChannelPercentValue(yChannel, 1 - percent.y);
           const color = ctx2.areaValue.withChannelValue(xChannel, xValue).withChannelValue(yChannel, yValue);
@@ -1245,8 +1213,7 @@ function machine(userContext) {
         setChannelColorFromPoint(ctx2, evt) {
           const channel = evt.channel || ctx2.activeId;
           const percent = dom.getChannelSliderValueFromPoint(ctx2, evt.point, channel);
-          if (!percent)
-            return;
+          if (!percent) return;
           const orientation = ctx2.activeOrientation || "horizontal";
           const channelPercent = orientation === "horizontal" ? percent.x : percent.y;
           const value = ctx2.areaValue.getChannelPercentValue(channel, channelPercent);
@@ -1408,14 +1375,12 @@ var invoke = {
 };
 var set = {
   value(ctx, color) {
-    if (!color || ctx.value.isEqual(color))
-      return;
+    if (!color || ctx.value.isEqual(color)) return;
     ctx.value = color;
     invoke.change(ctx);
   },
   format(ctx, format) {
-    if (ctx.format === format)
-      return;
+    if (ctx.format === format) return;
     ctx.format = format;
     invoke.formatChange(ctx);
   }