@zag-js/color-picker 1.21.8 → 1.22.0

package/dist/index.js

@@ -56,21 +56,27 @@ var getChannelSliderThumbEl = (ctx, channel) => ctx.getById(getChannelSliderThum
 var getFormatSelectEl = (ctx) => ctx.getById(getFormatSelectId(ctx));
 var getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
 var getAreaEl = (ctx) => ctx.getById(getAreaId(ctx));
-var getAreaValueFromPoint = (ctx, point) => {
+var getAreaValueFromPoint = (ctx, point, dir) => {
   const areaEl = getAreaEl(ctx);
   if (!areaEl) return;
-  const { percent } = domQuery.getRelativePoint(point, areaEl);
-  return percent;
+  const { getPercentValue } = domQuery.getRelativePoint(point, areaEl);
+  return {
+    x: getPercentValue({ dir, orientation: "horizontal" }),
+    y: getPercentValue({ orientation: "vertical" })
+  };
 };
 var getControlEl = (ctx) => ctx.getById(getControlId(ctx));
 var getTriggerEl = (ctx) => ctx.getById(getTriggerId(ctx));
 var getPositionerEl = (ctx) => ctx.getById(getPositionerId(ctx));
 var getChannelSliderTrackEl = (ctx, channel) => ctx.getById(getChannelSliderTrackId(ctx, channel));
-var getChannelSliderValueFromPoint = (ctx, point, channel) => {
+var getChannelSliderValueFromPoint = (ctx, point, channel, dir) => {
   const trackEl = getChannelSliderTrackEl(ctx, channel);
   if (!trackEl) return;
-  const { percent } = domQuery.getRelativePoint(point, trackEl);
-  return percent;
+  const { getPercentValue } = domQuery.getRelativePoint(point, trackEl);
+  return {
+    x: getPercentValue({ dir, orientation: "horizontal" }),
+    y: getPercentValue({ orientation: "vertical" })
+  };
 };
 var getChannelInputEls = (ctx) => {
   return [
@@ -415,6 +421,8 @@ function connect(service, normalize) {
       const channel = { xChannel, yChannel };
       const xPercent = areaValue.getChannelValuePercent(xChannel);
       const yPercent = 1 - areaValue.getChannelValuePercent(yChannel);
+      const isRtl = prop("dir") === "rtl";
+      const finalXPercent = isRtl ? 1 - xPercent : xPercent;
       const xValue = areaValue.getChannelValue(xChannel);
       const yValue = areaValue.getChannelValue(yChannel);
       const color = areaValue.withChannelValue("alpha", 1).toString("css");
@@ -435,7 +443,7 @@ function connect(service, normalize) {
         "aria-valuetext": `${xChannel} ${xValue}, ${yChannel} ${yValue}`,
         style: {
           position: "absolute",
-          left: `${xPercent * 100}%`,
+          left: `${finalXPercent * 100}%`,
           top: `${yPercent * 100}%`,
           transform: "translate(-50%, -50%)",
           touchAction: "none",
@@ -573,7 +581,9 @@ function connect(service, normalize) {
       const channelRange = normalizedValue.getChannelRange(channel);
       const channelValue = normalizedValue.getChannelValue(channel);
       const offset = (channelValue - channelRange.minValue) / (channelRange.maxValue - channelRange.minValue);
-      const placementStyles = orientation === "horizontal" ? { left: `${offset * 100}%`, top: "50%" } : { top: `${offset * 100}%`, left: "50%" };
+      const isRtl = prop("dir") === "rtl";
+      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({
         ...parts.channelSliderThumb.attrs,
         id: getChannelSliderThumbId(scope, channel),
@@ -1269,20 +1279,20 @@ var machine = core.createMachine({
         context.set("activeId", null);
         context.set("activeOrientation", null);
       },
-      setAreaColorFromPoint({ context, event, computed, scope }) {
+      setAreaColorFromPoint({ context, event, computed, scope, prop }) {
         const v = event.format ? context.get("value").toFormat(event.format) : computed("areaValue");
         const { xChannel, yChannel } = event.channel || context.get("activeChannel");
-        const percent = getAreaValueFromPoint(scope, event.point);
+        const percent = getAreaValueFromPoint(scope, event.point, prop("dir"));
         if (!percent) return;
         const xValue = v.getChannelPercentValue(xChannel, percent.x);
         const yValue = v.getChannelPercentValue(yChannel, 1 - percent.y);
         const color = v.withChannelValue(xChannel, xValue).withChannelValue(yChannel, yValue);
         context.set("value", color);
       },
-      setChannelColorFromPoint({ context, event, computed, scope }) {
+      setChannelColorFromPoint({ context, event, computed, scope, prop }) {
         const channel = event.channel || context.get("activeId");
         const normalizedValue = event.format ? context.get("value").toFormat(event.format) : computed("areaValue");
-        const percent = getChannelSliderValueFromPoint(scope, event.point, channel);
+        const percent = getChannelSliderValueFromPoint(scope, event.point, channel, prop("dir"));
         if (!percent) return;
         const orientation = context.get("activeOrientation") || "horizontal";
         const channelPercent = orientation === "horizontal" ? percent.x : percent.y;

package/dist/index.mjs

@@ -54,21 +54,27 @@ var getChannelSliderThumbEl = (ctx, channel) => ctx.getById(getChannelSliderThum
 var getFormatSelectEl = (ctx) => ctx.getById(getFormatSelectId(ctx));
 var getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
 var getAreaEl = (ctx) => ctx.getById(getAreaId(ctx));
-var getAreaValueFromPoint = (ctx, point) => {
+var getAreaValueFromPoint = (ctx, point, dir) => {
   const areaEl = getAreaEl(ctx);
   if (!areaEl) return;
-  const { percent } = getRelativePoint(point, areaEl);
-  return percent;
+  const { getPercentValue } = getRelativePoint(point, areaEl);
+  return {
+    x: getPercentValue({ dir, orientation: "horizontal" }),
+    y: getPercentValue({ orientation: "vertical" })
+  };
 };
 var getControlEl = (ctx) => ctx.getById(getControlId(ctx));
 var getTriggerEl = (ctx) => ctx.getById(getTriggerId(ctx));
 var getPositionerEl = (ctx) => ctx.getById(getPositionerId(ctx));
 var getChannelSliderTrackEl = (ctx, channel) => ctx.getById(getChannelSliderTrackId(ctx, channel));
-var getChannelSliderValueFromPoint = (ctx, point, channel) => {
+var getChannelSliderValueFromPoint = (ctx, point, channel, dir) => {
   const trackEl = getChannelSliderTrackEl(ctx, channel);
   if (!trackEl) return;
-  const { percent } = getRelativePoint(point, trackEl);
-  return percent;
+  const { getPercentValue } = getRelativePoint(point, trackEl);
+  return {
+    x: getPercentValue({ dir, orientation: "horizontal" }),
+    y: getPercentValue({ orientation: "vertical" })
+  };
 };
 var getChannelInputEls = (ctx) => {
   return [
@@ -413,6 +419,8 @@ function connect(service, normalize) {
       const channel = { xChannel, yChannel };
       const xPercent = areaValue.getChannelValuePercent(xChannel);
       const yPercent = 1 - areaValue.getChannelValuePercent(yChannel);
+      const isRtl = prop("dir") === "rtl";
+      const finalXPercent = isRtl ? 1 - xPercent : xPercent;
       const xValue = areaValue.getChannelValue(xChannel);
       const yValue = areaValue.getChannelValue(yChannel);
       const color = areaValue.withChannelValue("alpha", 1).toString("css");
@@ -433,7 +441,7 @@ function connect(service, normalize) {
         "aria-valuetext": `${xChannel} ${xValue}, ${yChannel} ${yValue}`,
         style: {
           position: "absolute",
-          left: `${xPercent * 100}%`,
+          left: `${finalXPercent * 100}%`,
           top: `${yPercent * 100}%`,
           transform: "translate(-50%, -50%)",
           touchAction: "none",
@@ -571,7 +579,9 @@ function connect(service, normalize) {
       const channelRange = normalizedValue.getChannelRange(channel);
       const channelValue = normalizedValue.getChannelValue(channel);
       const offset = (channelValue - channelRange.minValue) / (channelRange.maxValue - channelRange.minValue);
-      const placementStyles = orientation === "horizontal" ? { left: `${offset * 100}%`, top: "50%" } : { top: `${offset * 100}%`, left: "50%" };
+      const isRtl = prop("dir") === "rtl";
+      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({
         ...parts.channelSliderThumb.attrs,
         id: getChannelSliderThumbId(scope, channel),
@@ -1267,20 +1277,20 @@ var machine = createMachine({
         context.set("activeId", null);
         context.set("activeOrientation", null);
       },
-      setAreaColorFromPoint({ context, event, computed, scope }) {
+      setAreaColorFromPoint({ context, event, computed, scope, prop }) {
         const v = event.format ? context.get("value").toFormat(event.format) : computed("areaValue");
         const { xChannel, yChannel } = event.channel || context.get("activeChannel");
-        const percent = getAreaValueFromPoint(scope, event.point);
+        const percent = getAreaValueFromPoint(scope, event.point, prop("dir"));
         if (!percent) return;
         const xValue = v.getChannelPercentValue(xChannel, percent.x);
         const yValue = v.getChannelPercentValue(yChannel, 1 - percent.y);
         const color = v.withChannelValue(xChannel, xValue).withChannelValue(yChannel, yValue);
         context.set("value", color);
       },
-      setChannelColorFromPoint({ context, event, computed, scope }) {
+      setChannelColorFromPoint({ context, event, computed, scope, prop }) {
         const channel = event.channel || context.get("activeId");
         const normalizedValue = event.format ? context.get("value").toFormat(event.format) : computed("areaValue");
-        const percent = getChannelSliderValueFromPoint(scope, event.point, channel);
+        const percent = getChannelSliderValueFromPoint(scope, event.point, channel, prop("dir"));
         if (!percent) return;
         const orientation = context.get("activeOrientation") || "horizontal";
         const channelPercent = orientation === "horizontal" ? percent.x : percent.y;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/color-picker",
-  "version": "1.21.8",
+  "version": "1.22.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/core": "1.21.8",
-    "@zag-js/anatomy": "1.21.8",
-    "@zag-js/dom-query": "1.21.8",
-    "@zag-js/dismissable": "1.21.8",
-    "@zag-js/utils": "1.21.8",
-    "@zag-js/color-utils": "1.21.8",
-    "@zag-js/popper": "1.21.8",
-    "@zag-js/types": "1.21.8"
+    "@zag-js/core": "1.22.0",
+    "@zag-js/anatomy": "1.22.0",
+    "@zag-js/dom-query": "1.22.0",
+    "@zag-js/dismissable": "1.22.0",
+    "@zag-js/utils": "1.22.0",
+    "@zag-js/color-utils": "1.22.0",
+    "@zag-js/popper": "1.22.0",
+    "@zag-js/types": "1.22.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"