@zag-js/color-picker 0.9.1 → 0.10.0

package/dist/{chunk-HSUD4DN3.mjs → chunk-5QSFKCT5.mjs}

@@ -16,14 +16,21 @@ import {
 } from "./chunk-2ERX54SV.mjs";
 import {
   dom
-} from "./chunk-JOGAQ7RL.mjs";
+} from "./chunk-SPSDVZCT.mjs";
 import {
   getChannelDetails
 } from "./chunk-KLLIOTK6.mjs";
 
 // src/color-picker.connect.ts
 import { normalizeColor } from "@zag-js/color-utils";
-import { getEventKey, getEventStep, getNativeEvent, isLeftClick, isModifiedEvent } from "@zag-js/dom-event";
+import {
+  getEventKey,
+  getEventPoint,
+  getEventStep,
+  getNativeEvent,
+  isLeftClick,
+  isModifiedEvent
+} from "@zag-js/dom-event";
 import { dataAttr } from "@zag-js/dom-query";
 function connect(state, send, normalize) {
   const valueAsColor = state.context.valueAsColor;
@@ -85,7 +92,7 @@ function connect(state, send, normalize) {
           const evt = getNativeEvent(event);
           if (!isLeftClick(evt) || isModifiedEvent(evt))
             return;
-          const point = { x: evt.clientX, y: evt.clientY };
+          const point = getEventPoint(evt);
           const channel = { xChannel, yChannel };
           send({ type: "AREA.POINTER_DOWN", point, channel, id: "area" });
         },
@@ -180,7 +187,7 @@ function connect(state, send, normalize) {
           const evt = getNativeEvent(event);
           if (!isLeftClick(evt) || isModifiedEvent(evt))
             return;
-          const point = { x: evt.clientX, y: evt.clientY };
+          const point = getEventPoint(evt);
           send({ type: "CHANNEL_SLIDER.POINTER_DOWN", channel, point, id: channel, orientation });
         },
         style: {

package/dist/{chunk-EUTH4EDN.mjs → chunk-ML3WX6YS.mjs}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-2ERX54SV.mjs";
 import {
   dom
-} from "./chunk-JOGAQ7RL.mjs";
+} from "./chunk-SPSDVZCT.mjs";
 import {
   getChannelDetails
 } from "./chunk-KLLIOTK6.mjs";
@@ -40,6 +40,7 @@ function machine(userContext) {
           actions: ["setValue"]
         }
       },
+      created: ["setValueAsColor"],
       watch: {
         value: ["setValueAsColor", "syncChannelInputs", "invokeOnChange"]
       },
@@ -224,8 +225,8 @@ function machine(userContext) {
           const channel = evt.channel || ctx2.activeId;
           const percent = dom.getChannelSliderValueFromPoint(ctx2, evt.point, channel);
           const { minValue, maxValue, step } = ctx2.valueAsColor.getChannelRange(channel);
-          const position = ctx2.activeOrientation || "horizontal";
-          const point = position === "horizontal" ? percent.x : percent.y;
+          const orientation = ctx2.activeOrientation || "horizontal";
+          const point = orientation === "horizontal" ? percent.x : percent.y;
           const channelValue = getPercentValue(point, minValue, maxValue, step);
           const value = snapValueToStep(channelValue - step, minValue, maxValue, step);
           const newColor = ctx2.valueAsColor.withChannelValue(channel, value);

package/dist/{chunk-JOGAQ7RL.mjs → chunk-SPSDVZCT.mjs}

@@ -1,5 +1,5 @@
 // src/color-picker.dom.ts
-import { getRelativePointPercent } from "@zag-js/dom-event";
+import { getRelativePoint } from "@zag-js/dom-event";
 import { createScope, queryAll } from "@zag-js/dom-query";
 var dom = createScope({
   getContentId: (ctx) => ctx.ids?.content ?? `color-picker:${ctx.id}:content`,
@@ -15,15 +15,15 @@ var dom = createScope({
   getChannelInputEl: (ctx, channel) => dom.queryById(ctx, dom.getChannelInputId(ctx, channel)),
   getAreaEl: (ctx) => dom.queryById(ctx, dom.getAreaId(ctx)),
   getAreaValueFromPoint(ctx, point) {
-    const areaEl = dom.getAreaEl(ctx);
-    return getRelativePointPercent(point, areaEl);
+    const { percent } = getRelativePoint(point, dom.getAreaEl(ctx));
+    return percent;
   },
   getChannelSliderTrackEl: (ctx, channel) => {
     return dom.queryById(ctx, dom.getChannelSliderTrackId(ctx, channel));
   },
   getChannelSliderValueFromPoint(ctx, point, channel) {
-    const areaEl = dom.getChannelSliderTrackEl(ctx, channel);
-    return getRelativePointPercent(point, areaEl);
+    const { percent } = getRelativePoint(point, dom.getChannelSliderTrackEl(ctx, channel));
+    return percent;
   },
   getChannelInputEls: (ctx) => {
     return queryAll(dom.getContentEl(ctx), "input[data-channel]");

package/dist/color-picker.connect.js

@@ -62,15 +62,15 @@ var dom = (0, import_dom_query.createScope)({
   getChannelInputEl: (ctx, channel) => dom.queryById(ctx, dom.getChannelInputId(ctx, channel)),
   getAreaEl: (ctx) => dom.queryById(ctx, dom.getAreaId(ctx)),
   getAreaValueFromPoint(ctx, point) {
-    const areaEl = dom.getAreaEl(ctx);
-    return (0, import_dom_event.getRelativePointPercent)(point, areaEl);
+    const { percent } = (0, import_dom_event.getRelativePoint)(point, dom.getAreaEl(ctx));
+    return percent;
   },
   getChannelSliderTrackEl: (ctx, channel) => {
     return dom.queryById(ctx, dom.getChannelSliderTrackId(ctx, channel));
   },
   getChannelSliderValueFromPoint(ctx, point, channel) {
-    const areaEl = dom.getChannelSliderTrackEl(ctx, channel);
-    return (0, import_dom_event.getRelativePointPercent)(point, areaEl);
+    const { percent } = (0, import_dom_event.getRelativePoint)(point, dom.getChannelSliderTrackEl(ctx, channel));
+    return percent;
   },
   getChannelInputEls: (ctx) => {
     return (0, import_dom_query.queryAll)(dom.getContentEl(ctx), "input[data-channel]");
@@ -451,7 +451,7 @@ function connect(state, send, normalize) {
           const evt = (0, import_dom_event2.getNativeEvent)(event);
           if (!(0, import_dom_event2.isLeftClick)(evt) || (0, import_dom_event2.isModifiedEvent)(evt))
             return;
-          const point = { x: evt.clientX, y: evt.clientY };
+          const point = (0, import_dom_event2.getEventPoint)(evt);
           const channel = { xChannel, yChannel };
           send({ type: "AREA.POINTER_DOWN", point, channel, id: "area" });
         },
@@ -546,7 +546,7 @@ function connect(state, send, normalize) {
           const evt = (0, import_dom_event2.getNativeEvent)(event);
           if (!(0, import_dom_event2.isLeftClick)(evt) || (0, import_dom_event2.isModifiedEvent)(evt))
             return;
-          const point = { x: evt.clientX, y: evt.clientY };
+          const point = (0, import_dom_event2.getEventPoint)(evt);
           send({ type: "CHANNEL_SLIDER.POINTER_DOWN", channel, point, id: channel, orientation });
         },
         style: {

package/dist/color-picker.connect.mjs

@@ -1,12 +1,12 @@
 import {
   connect
-} from "./chunk-HSUD4DN3.mjs";
+} from "./chunk-5QSFKCT5.mjs";
 import "./chunk-JNBNPPMF.mjs";
 import "./chunk-KO4TBUXB.mjs";
 import "./chunk-3XH465XT.mjs";
 import "./chunk-75JXJMB5.mjs";
 import "./chunk-2ERX54SV.mjs";
-import "./chunk-JOGAQ7RL.mjs";
+import "./chunk-SPSDVZCT.mjs";
 import "./chunk-OY3B7NXA.mjs";
 import "./chunk-KLLIOTK6.mjs";
 export {

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

@@ -1,12 +1,9 @@
 import { ColorChannel } from '@zag-js/color-utils';
+import { Point } from '@zag-js/dom-event';
 import { MachineContext } from './color-picker.types.js';
 import '@zag-js/core';
 import '@zag-js/types';
 
-type Point = {
-    x: number;
-    y: number;
-};
 declare const dom: {
     getRootNode: (ctx: {
         getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
@@ -42,19 +39,11 @@ declare const dom: {
     getAreaValueFromPoint(ctx: MachineContext, point: Point): {
         x: number;
         y: number;
-        normalize(options?: {
-            dir?: "ltr" | "rtl" | undefined;
-            orientation?: "horizontal" | "vertical" | undefined;
-        }): number;
     };
     getChannelSliderTrackEl: (ctx: MachineContext, channel: ColorChannel) => HTMLElement;
     getChannelSliderValueFromPoint(ctx: MachineContext, point: Point, channel: ColorChannel): {
         x: number;
         y: number;
-        normalize(options?: {
-            dir?: "ltr" | "rtl" | undefined;
-            orientation?: "horizontal" | "vertical" | undefined;
-        }): number;
     };
     getChannelInputEls: (ctx: MachineContext) => HTMLInputElement[];
 };

package/dist/color-picker.dom.js

@@ -39,15 +39,15 @@ var dom = (0, import_dom_query.createScope)({
   getChannelInputEl: (ctx, channel) => dom.queryById(ctx, dom.getChannelInputId(ctx, channel)),
   getAreaEl: (ctx) => dom.queryById(ctx, dom.getAreaId(ctx)),
   getAreaValueFromPoint(ctx, point) {
-    const areaEl = dom.getAreaEl(ctx);
-    return (0, import_dom_event.getRelativePointPercent)(point, areaEl);
+    const { percent } = (0, import_dom_event.getRelativePoint)(point, dom.getAreaEl(ctx));
+    return percent;
   },
   getChannelSliderTrackEl: (ctx, channel) => {
     return dom.queryById(ctx, dom.getChannelSliderTrackId(ctx, channel));
   },
   getChannelSliderValueFromPoint(ctx, point, channel) {
-    const areaEl = dom.getChannelSliderTrackEl(ctx, channel);
-    return (0, import_dom_event.getRelativePointPercent)(point, areaEl);
+    const { percent } = (0, import_dom_event.getRelativePoint)(point, dom.getChannelSliderTrackEl(ctx, channel));
+    return percent;
   },
   getChannelInputEls: (ctx) => {
     return (0, import_dom_query.queryAll)(dom.getContentEl(ctx), "input[data-channel]");

package/dist/color-picker.dom.mjs

@@ -1,6 +1,6 @@
 import {
   dom
-} from "./chunk-JOGAQ7RL.mjs";
+} from "./chunk-SPSDVZCT.mjs";
 export {
   dom
 };

package/dist/color-picker.machine.js

@@ -48,15 +48,15 @@ var dom = (0, import_dom_query.createScope)({
   getChannelInputEl: (ctx, channel) => dom.queryById(ctx, dom.getChannelInputId(ctx, channel)),
   getAreaEl: (ctx) => dom.queryById(ctx, dom.getAreaId(ctx)),
   getAreaValueFromPoint(ctx, point) {
-    const areaEl = dom.getAreaEl(ctx);
-    return (0, import_dom_event.getRelativePointPercent)(point, areaEl);
+    const { percent } = (0, import_dom_event.getRelativePoint)(point, dom.getAreaEl(ctx));
+    return percent;
   },
   getChannelSliderTrackEl: (ctx, channel) => {
     return dom.queryById(ctx, dom.getChannelSliderTrackId(ctx, channel));
   },
   getChannelSliderValueFromPoint(ctx, point, channel) {
-    const areaEl = dom.getChannelSliderTrackEl(ctx, channel);
-    return (0, import_dom_event.getRelativePointPercent)(point, areaEl);
+    const { percent } = (0, import_dom_event.getRelativePoint)(point, dom.getChannelSliderTrackEl(ctx, channel));
+    return percent;
   },
   getChannelInputEls: (ctx) => {
     return (0, import_dom_query.queryAll)(dom.getContentEl(ctx), "input[data-channel]");
@@ -152,6 +152,7 @@ function machine(userContext) {
           actions: ["setValue"]
         }
       },
+      created: ["setValueAsColor"],
       watch: {
         value: ["setValueAsColor", "syncChannelInputs", "invokeOnChange"]
       },
@@ -336,8 +337,8 @@ function machine(userContext) {
           const channel = evt.channel || ctx2.activeId;
           const percent = dom.getChannelSliderValueFromPoint(ctx2, evt.point, channel);
           const { minValue, maxValue, step } = ctx2.valueAsColor.getChannelRange(channel);
-          const position = ctx2.activeOrientation || "horizontal";
-          const point = position === "horizontal" ? percent.x : percent.y;
+          const orientation = ctx2.activeOrientation || "horizontal";
+          const point = orientation === "horizontal" ? percent.x : percent.y;
           const channelValue = (0, import_numeric_range2.getPercentValue)(point, minValue, maxValue, step);
           const value = (0, import_numeric_range2.snapValueToStep)(channelValue - step, minValue, maxValue, step);
           const newColor = ctx2.valueAsColor.withChannelValue(channel, value);

package/dist/color-picker.machine.mjs

@@ -1,8 +1,8 @@
 import {
   machine
-} from "./chunk-EUTH4EDN.mjs";
+} from "./chunk-ML3WX6YS.mjs";
 import "./chunk-2ERX54SV.mjs";
-import "./chunk-JOGAQ7RL.mjs";
+import "./chunk-SPSDVZCT.mjs";
 import "./chunk-KLLIOTK6.mjs";
 export {
   machine

package/dist/index.js

@@ -66,15 +66,15 @@ var dom = (0, import_dom_query.createScope)({
   getChannelInputEl: (ctx, channel) => dom.queryById(ctx, dom.getChannelInputId(ctx, channel)),
   getAreaEl: (ctx) => dom.queryById(ctx, dom.getAreaId(ctx)),
   getAreaValueFromPoint(ctx, point) {
-    const areaEl = dom.getAreaEl(ctx);
-    return (0, import_dom_event.getRelativePointPercent)(point, areaEl);
+    const { percent } = (0, import_dom_event.getRelativePoint)(point, dom.getAreaEl(ctx));
+    return percent;
   },
   getChannelSliderTrackEl: (ctx, channel) => {
     return dom.queryById(ctx, dom.getChannelSliderTrackId(ctx, channel));
   },
   getChannelSliderValueFromPoint(ctx, point, channel) {
-    const areaEl = dom.getChannelSliderTrackEl(ctx, channel);
-    return (0, import_dom_event.getRelativePointPercent)(point, areaEl);
+    const { percent } = (0, import_dom_event.getRelativePoint)(point, dom.getChannelSliderTrackEl(ctx, channel));
+    return percent;
   },
   getChannelInputEls: (ctx) => {
     return (0, import_dom_query.queryAll)(dom.getContentEl(ctx), "input[data-channel]");
@@ -455,7 +455,7 @@ function connect(state, send, normalize) {
           const evt = (0, import_dom_event2.getNativeEvent)(event);
           if (!(0, import_dom_event2.isLeftClick)(evt) || (0, import_dom_event2.isModifiedEvent)(evt))
             return;
-          const point = { x: evt.clientX, y: evt.clientY };
+          const point = (0, import_dom_event2.getEventPoint)(evt);
           const channel = { xChannel, yChannel };
           send({ type: "AREA.POINTER_DOWN", point, channel, id: "area" });
         },
@@ -550,7 +550,7 @@ function connect(state, send, normalize) {
           const evt = (0, import_dom_event2.getNativeEvent)(event);
           if (!(0, import_dom_event2.isLeftClick)(evt) || (0, import_dom_event2.isModifiedEvent)(evt))
             return;
-          const point = { x: evt.clientX, y: evt.clientY };
+          const point = (0, import_dom_event2.getEventPoint)(evt);
           send({ type: "CHANNEL_SLIDER.POINTER_DOWN", channel, point, id: channel, orientation });
         },
         style: {
@@ -783,6 +783,7 @@ function machine(userContext) {
           actions: ["setValue"]
         }
       },
+      created: ["setValueAsColor"],
       watch: {
         value: ["setValueAsColor", "syncChannelInputs", "invokeOnChange"]
       },
@@ -967,8 +968,8 @@ function machine(userContext) {
           const channel = evt.channel || ctx2.activeId;
           const percent = dom.getChannelSliderValueFromPoint(ctx2, evt.point, channel);
           const { minValue, maxValue, step } = ctx2.valueAsColor.getChannelRange(channel);
-          const position = ctx2.activeOrientation || "horizontal";
-          const point = position === "horizontal" ? percent.x : percent.y;
+          const orientation = ctx2.activeOrientation || "horizontal";
+          const point = orientation === "horizontal" ? percent.x : percent.y;
           const channelValue = (0, import_numeric_range2.getPercentValue)(point, minValue, maxValue, step);
           const value = (0, import_numeric_range2.snapValueToStep)(channelValue - step, minValue, maxValue, step);
           const newColor = ctx2.valueAsColor.withChannelValue(channel, value);

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import {
   connect
-} from "./chunk-HSUD4DN3.mjs";
+} from "./chunk-5QSFKCT5.mjs";
 import "./chunk-JNBNPPMF.mjs";
 import "./chunk-KO4TBUXB.mjs";
 import "./chunk-3XH465XT.mjs";
@@ -9,9 +9,9 @@ import {
 } from "./chunk-75JXJMB5.mjs";
 import {
   machine
-} from "./chunk-EUTH4EDN.mjs";
+} from "./chunk-ML3WX6YS.mjs";
 import "./chunk-2ERX54SV.mjs";
-import "./chunk-JOGAQ7RL.mjs";
+import "./chunk-SPSDVZCT.mjs";
 import "./chunk-OY3B7NXA.mjs";
 import "./chunk-KLLIOTK6.mjs";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/color-picker",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "Core logic for the color-picker widget implemented as a state machine",
   "keywords": [
     "js",
@@ -18,7 +18,8 @@
   "repository": "https://github.com/chakra-ui/zag/tree/main/packages/color-picker",
   "sideEffects": false,
   "files": [
-    "dist/**/*"
+    "dist",
+    "src"
   ],
   "publishConfig": {
     "access": "public"
@@ -27,15 +28,15 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.9.1",
-    "@zag-js/anatomy": "0.9.1",
-    "@zag-js/dom-query": "0.9.1",
-    "@zag-js/dom-event": "0.9.1",
-    "@zag-js/utils": "0.9.1",
-    "@zag-js/color-utils": "0.9.1",
-    "@zag-js/numeric-range": "0.9.1",
-    "@zag-js/text-selection": "0.9.1",
-    "@zag-js/types": "0.9.1"
+    "@zag-js/core": "0.10.0",
+    "@zag-js/anatomy": "0.10.0",
+    "@zag-js/dom-query": "0.10.0",
+    "@zag-js/dom-event": "0.10.0",
+    "@zag-js/utils": "0.10.0",
+    "@zag-js/color-utils": "0.10.0",
+    "@zag-js/numeric-range": "0.10.0",
+    "@zag-js/text-selection": "0.10.0",
+    "@zag-js/types": "0.10.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

package/src/color-picker.anatomy.ts

@@ -0,0 +1,18 @@
+import { createAnatomy } from "@zag-js/anatomy"
+
+export const anatomy = createAnatomy("color-picker", [
+  "area",
+  "areaThumb",
+  "areaGradient",
+  "channelSliderTrack",
+  "channelSliderTrackBg",
+  "channelSliderThumb",
+  "channelInput",
+  "swatch",
+  "swatchBg",
+  "content",
+  "label",
+  "eyeDropTrigger",
+])
+
+export const parts = anatomy.build()