@zag-js/color-picker 0.0.0-dev-20230420095643 → 0.0.0-dev-20230420103904

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/{chunk-ZBNUATFY.mjs → chunk-EUTH4EDN.mjs} +1 -1
  2. package/dist/{chunk-CD6CID4K.mjs → chunk-HSUD4DN3.mjs} +1 -1
  3. package/dist/{chunk-ACSV4TXB.mjs → chunk-JOGAQ7RL.mjs} +7 -7
  4. package/dist/color-picker.connect.js +7 -7
  5. package/dist/color-picker.connect.mjs +2 -2
  6. package/dist/color-picker.dom.d.ts +1 -1
  7. package/dist/color-picker.dom.js +7 -7
  8. package/dist/color-picker.dom.mjs +1 -1
  9. package/dist/color-picker.machine.js +7 -7
  10. package/dist/color-picker.machine.mjs +2 -2
  11. package/dist/color-picker.types.d.ts +13 -0
  12. package/dist/index.js +7 -7
  13. package/dist/index.mjs +3 -3
  14. package/package.json +1 -1
package/dist/{chunk-ZBNUATFY.mjs → chunk-EUTH4EDN.mjs} RENAMED
@@ -3,7 +3,7 @@ import {
3
3
  } from "./chunk-2ERX54SV.mjs";
4
4
  import {
5
5
  dom
6
- } from "./chunk-ACSV4TXB.mjs";
6
+ } from "./chunk-JOGAQ7RL.mjs";
7
7
  import {
8
8
  getChannelDetails
9
9
  } from "./chunk-KLLIOTK6.mjs";
package/dist/{chunk-CD6CID4K.mjs → chunk-HSUD4DN3.mjs} RENAMED
@@ -16,7 +16,7 @@ import {
16
16
  } from "./chunk-2ERX54SV.mjs";
17
17
  import {
18
18
  dom
19
- } from "./chunk-ACSV4TXB.mjs";
19
+ } from "./chunk-JOGAQ7RL.mjs";
20
20
  import {
21
21
  getChannelDetails
22
22
  } from "./chunk-KLLIOTK6.mjs";
package/dist/{chunk-ACSV4TXB.mjs → chunk-JOGAQ7RL.mjs} RENAMED
@@ -2,13 +2,13 @@
2
2
  import { getRelativePointPercent } from "@zag-js/dom-event";
3
3
  import { createScope, queryAll } from "@zag-js/dom-query";
4
4
  var dom = createScope({
5
- getAreaId: (ctx) => `color-picker:${ctx.id}:area`,
6
- getAreaGradientId: (ctx) => `color-picker:${ctx.id}:area-gradient`,
7
- getAreaThumbId: (ctx) => `color-picker:${ctx.id}:area-thumb`,
8
- getChannelSliderTrackId: (ctx, channel) => `color-picker:${ctx.id}:slider-track:${channel}`,
9
- getChannelInputId: (ctx, channel) => `color-picker:${ctx.id}:input:${channel}`,
10
- getContentId: (ctx) => `color-picker:${ctx.id}:content`,
11
- getChannelSliderThumbId: (ctx, channel) => `color-picker:${ctx.id}:thumb:${channel}`,
5
+ getContentId: (ctx) => ctx.ids?.content ?? `color-picker:${ctx.id}:content`,
6
+ getAreaId: (ctx) => ctx.ids?.area ?? `color-picker:${ctx.id}:area`,
7
+ getAreaGradientId: (ctx) => ctx.ids?.areaGradient ?? `color-picker:${ctx.id}:area-gradient`,
8
+ getAreaThumbId: (ctx) => ctx.ids?.areaThumb ?? `color-picker:${ctx.id}:area-thumb`,
9
+ getChannelSliderTrackId: (ctx, channel) => ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`,
10
+ getChannelInputId: (ctx, channel) => ctx.ids?.channelInput?.(channel) ?? `color-picker:${ctx.id}:input:${channel}`,
11
+ getChannelSliderThumbId: (ctx, channel) => ctx.ids?.channelSliderThumb?.(channel) ?? `color-picker:${ctx.id}:slider-thumb:${channel}`,
12
12
  getContentEl: (ctx) => dom.queryById(ctx, dom.getContentId(ctx)),
13
13
  getAreaThumbEl: (ctx) => dom.queryById(ctx, dom.getAreaThumbId(ctx)),
14
14
  getChannelSliderThumbEl: (ctx, channel) => dom.queryById(ctx, dom.getChannelSliderThumbId(ctx, channel)),
package/dist/color-picker.connect.js CHANGED
@@ -49,13 +49,13 @@ var parts = anatomy.build();
49
49
  var import_dom_event = require("@zag-js/dom-event");
50
50
  var import_dom_query = require("@zag-js/dom-query");
51
51
  var dom = (0, import_dom_query.createScope)({
52
- getAreaId: (ctx) => `color-picker:${ctx.id}:area`,
53
- getAreaGradientId: (ctx) => `color-picker:${ctx.id}:area-gradient`,
54
- getAreaThumbId: (ctx) => `color-picker:${ctx.id}:area-thumb`,
55
- getChannelSliderTrackId: (ctx, channel) => `color-picker:${ctx.id}:slider-track:${channel}`,
56
- getChannelInputId: (ctx, channel) => `color-picker:${ctx.id}:input:${channel}`,
57
- getContentId: (ctx) => `color-picker:${ctx.id}:content`,
58
- getChannelSliderThumbId: (ctx, channel) => `color-picker:${ctx.id}:thumb:${channel}`,
52
+ getContentId: (ctx) => ctx.ids?.content ?? `color-picker:${ctx.id}:content`,
53
+ getAreaId: (ctx) => ctx.ids?.area ?? `color-picker:${ctx.id}:area`,
54
+ getAreaGradientId: (ctx) => ctx.ids?.areaGradient ?? `color-picker:${ctx.id}:area-gradient`,
55
+ getAreaThumbId: (ctx) => ctx.ids?.areaThumb ?? `color-picker:${ctx.id}:area-thumb`,
56
+ getChannelSliderTrackId: (ctx, channel) => ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`,
57
+ getChannelInputId: (ctx, channel) => ctx.ids?.channelInput?.(channel) ?? `color-picker:${ctx.id}:input:${channel}`,
58
+ getChannelSliderThumbId: (ctx, channel) => ctx.ids?.channelSliderThumb?.(channel) ?? `color-picker:${ctx.id}:slider-thumb:${channel}`,
59
59
  getContentEl: (ctx) => dom.queryById(ctx, dom.getContentId(ctx)),
60
60
  getAreaThumbEl: (ctx) => dom.queryById(ctx, dom.getAreaThumbId(ctx)),
61
61
  getChannelSliderThumbEl: (ctx, channel) => dom.queryById(ctx, dom.getChannelSliderThumbId(ctx, channel)),
package/dist/color-picker.connect.mjs CHANGED
@@ -1,12 +1,12 @@
1
1
  import {
2
2
  connect
3
- } from "./chunk-CD6CID4K.mjs";
3
+ } from "./chunk-HSUD4DN3.mjs";
4
4
  import "./chunk-JNBNPPMF.mjs";
5
5
  import "./chunk-KO4TBUXB.mjs";
6
6
  import "./chunk-3XH465XT.mjs";
7
7
  import "./chunk-75JXJMB5.mjs";
8
8
  import "./chunk-2ERX54SV.mjs";
9
- import "./chunk-ACSV4TXB.mjs";
9
+ import "./chunk-JOGAQ7RL.mjs";
10
10
  import "./chunk-OY3B7NXA.mjs";
11
11
  import "./chunk-KLLIOTK6.mjs";
12
12
  export {
package/dist/color-picker.dom.d.ts CHANGED
@@ -27,12 +27,12 @@ declare const dom: {
27
27
  getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
28
28
  }, id: string) => T_1;
29
29
  } & {
30
+ getContentId: (ctx: MachineContext) => string;
30
31
  getAreaId: (ctx: MachineContext) => string;
31
32
  getAreaGradientId: (ctx: MachineContext) => string;
32
33
  getAreaThumbId: (ctx: MachineContext) => string;
33
34
  getChannelSliderTrackId: (ctx: MachineContext, channel: ColorChannel) => string;
34
35
  getChannelInputId: (ctx: MachineContext, channel: string) => string;
35
- getContentId: (ctx: MachineContext) => string;
36
36
  getChannelSliderThumbId: (ctx: MachineContext, channel: ColorChannel) => string;
37
37
  getContentEl: (ctx: MachineContext) => HTMLElement;
38
38
  getAreaThumbEl: (ctx: MachineContext) => HTMLElement;
package/dist/color-picker.dom.js CHANGED
@@ -26,13 +26,13 @@ module.exports = __toCommonJS(color_picker_dom_exports);
26
26
  var import_dom_event = require("@zag-js/dom-event");
27
27
  var import_dom_query = require("@zag-js/dom-query");
28
28
  var dom = (0, import_dom_query.createScope)({
29
- getAreaId: (ctx) => `color-picker:${ctx.id}:area`,
30
- getAreaGradientId: (ctx) => `color-picker:${ctx.id}:area-gradient`,
31
- getAreaThumbId: (ctx) => `color-picker:${ctx.id}:area-thumb`,
32
- getChannelSliderTrackId: (ctx, channel) => `color-picker:${ctx.id}:slider-track:${channel}`,
33
- getChannelInputId: (ctx, channel) => `color-picker:${ctx.id}:input:${channel}`,
34
- getContentId: (ctx) => `color-picker:${ctx.id}:content`,
35
- getChannelSliderThumbId: (ctx, channel) => `color-picker:${ctx.id}:thumb:${channel}`,
29
+ getContentId: (ctx) => ctx.ids?.content ?? `color-picker:${ctx.id}:content`,
30
+ getAreaId: (ctx) => ctx.ids?.area ?? `color-picker:${ctx.id}:area`,
31
+ getAreaGradientId: (ctx) => ctx.ids?.areaGradient ?? `color-picker:${ctx.id}:area-gradient`,
32
+ getAreaThumbId: (ctx) => ctx.ids?.areaThumb ?? `color-picker:${ctx.id}:area-thumb`,
33
+ getChannelSliderTrackId: (ctx, channel) => ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`,
34
+ getChannelInputId: (ctx, channel) => ctx.ids?.channelInput?.(channel) ?? `color-picker:${ctx.id}:input:${channel}`,
35
+ getChannelSliderThumbId: (ctx, channel) => ctx.ids?.channelSliderThumb?.(channel) ?? `color-picker:${ctx.id}:slider-thumb:${channel}`,
36
36
  getContentEl: (ctx) => dom.queryById(ctx, dom.getContentId(ctx)),
37
37
  getAreaThumbEl: (ctx) => dom.queryById(ctx, dom.getAreaThumbId(ctx)),
38
38
  getChannelSliderThumbEl: (ctx, channel) => dom.queryById(ctx, dom.getChannelSliderThumbId(ctx, channel)),
package/dist/color-picker.dom.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  dom
3
- } from "./chunk-ACSV4TXB.mjs";
3
+ } from "./chunk-JOGAQ7RL.mjs";
4
4
  export {
5
5
  dom
6
6
  };
package/dist/color-picker.machine.js CHANGED
@@ -35,13 +35,13 @@ var import_utils = require("@zag-js/utils");
35
35
  var import_dom_event = require("@zag-js/dom-event");
36
36
  var import_dom_query = require("@zag-js/dom-query");
37
37
  var dom = (0, import_dom_query.createScope)({
38
- getAreaId: (ctx) => `color-picker:${ctx.id}:area`,
39
- getAreaGradientId: (ctx) => `color-picker:${ctx.id}:area-gradient`,
40
- getAreaThumbId: (ctx) => `color-picker:${ctx.id}:area-thumb`,
41
- getChannelSliderTrackId: (ctx, channel) => `color-picker:${ctx.id}:slider-track:${channel}`,
42
- getChannelInputId: (ctx, channel) => `color-picker:${ctx.id}:input:${channel}`,
43
- getContentId: (ctx) => `color-picker:${ctx.id}:content`,
44
- getChannelSliderThumbId: (ctx, channel) => `color-picker:${ctx.id}:thumb:${channel}`,
38
+ getContentId: (ctx) => ctx.ids?.content ?? `color-picker:${ctx.id}:content`,
39
+ getAreaId: (ctx) => ctx.ids?.area ?? `color-picker:${ctx.id}:area`,
40
+ getAreaGradientId: (ctx) => ctx.ids?.areaGradient ?? `color-picker:${ctx.id}:area-gradient`,
41
+ getAreaThumbId: (ctx) => ctx.ids?.areaThumb ?? `color-picker:${ctx.id}:area-thumb`,
42
+ getChannelSliderTrackId: (ctx, channel) => ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`,
43
+ getChannelInputId: (ctx, channel) => ctx.ids?.channelInput?.(channel) ?? `color-picker:${ctx.id}:input:${channel}`,
44
+ getChannelSliderThumbId: (ctx, channel) => ctx.ids?.channelSliderThumb?.(channel) ?? `color-picker:${ctx.id}:slider-thumb:${channel}`,
45
45
  getContentEl: (ctx) => dom.queryById(ctx, dom.getContentId(ctx)),
46
46
  getAreaThumbEl: (ctx) => dom.queryById(ctx, dom.getAreaThumbId(ctx)),
47
47
  getChannelSliderThumbEl: (ctx, channel) => dom.queryById(ctx, dom.getChannelSliderThumbId(ctx, channel)),
package/dist/color-picker.machine.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  import {
2
2
  machine
3
- } from "./chunk-ZBNUATFY.mjs";
3
+ } from "./chunk-EUTH4EDN.mjs";
4
4
  import "./chunk-2ERX54SV.mjs";
5
- import "./chunk-ACSV4TXB.mjs";
5
+ import "./chunk-JOGAQ7RL.mjs";
6
6
  import "./chunk-KLLIOTK6.mjs";
7
7
  export {
8
8
  machine
package/dist/color-picker.types.d.ts CHANGED
@@ -23,7 +23,20 @@ type ChangeDetails = {
23
23
  value: string;
24
24
  valueAsColor: Color;
25
25
  };
26
+ type ElementIds = Partial<{
27
+ content: string;
28
+ area: string;
29
+ areaGradient: string;
30
+ areaThumb: string;
31
+ channelInput(id: string): string;
32
+ channelSliderTrack(id: ColorChannel): string;
33
+ channelSliderThumb(id: ColorChannel): string;
34
+ }>;
26
35
  type PublicContext = CommonProperties & {
36
+ /**
37
+ * The ids of the elements in the color picker. Useful for composition.
38
+ */
39
+ ids?: ElementIds;
27
40
  /**
28
41
  * The direction of the color picker
29
42
  */
package/dist/index.js CHANGED
@@ -52,13 +52,13 @@ var parts = anatomy.build();
52
52
  var import_dom_event = require("@zag-js/dom-event");
53
53
  var import_dom_query = require("@zag-js/dom-query");
54
54
  var dom = (0, import_dom_query.createScope)({
55
- getAreaId: (ctx) => `color-picker:${ctx.id}:area`,
56
- getAreaGradientId: (ctx) => `color-picker:${ctx.id}:area-gradient`,
57
- getAreaThumbId: (ctx) => `color-picker:${ctx.id}:area-thumb`,
58
- getChannelSliderTrackId: (ctx, channel) => `color-picker:${ctx.id}:slider-track:${channel}`,
59
- getChannelInputId: (ctx, channel) => `color-picker:${ctx.id}:input:${channel}`,
60
- getContentId: (ctx) => `color-picker:${ctx.id}:content`,
61
- getChannelSliderThumbId: (ctx, channel) => `color-picker:${ctx.id}:thumb:${channel}`,
55
+ getContentId: (ctx) => ctx.ids?.content ?? `color-picker:${ctx.id}:content`,
56
+ getAreaId: (ctx) => ctx.ids?.area ?? `color-picker:${ctx.id}:area`,
57
+ getAreaGradientId: (ctx) => ctx.ids?.areaGradient ?? `color-picker:${ctx.id}:area-gradient`,
58
+ getAreaThumbId: (ctx) => ctx.ids?.areaThumb ?? `color-picker:${ctx.id}:area-thumb`,
59
+ getChannelSliderTrackId: (ctx, channel) => ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`,
60
+ getChannelInputId: (ctx, channel) => ctx.ids?.channelInput?.(channel) ?? `color-picker:${ctx.id}:input:${channel}`,
61
+ getChannelSliderThumbId: (ctx, channel) => ctx.ids?.channelSliderThumb?.(channel) ?? `color-picker:${ctx.id}:slider-thumb:${channel}`,
62
62
  getContentEl: (ctx) => dom.queryById(ctx, dom.getContentId(ctx)),
63
63
  getAreaThumbEl: (ctx) => dom.queryById(ctx, dom.getAreaThumbId(ctx)),
64
64
  getChannelSliderThumbEl: (ctx, channel) => dom.queryById(ctx, dom.getChannelSliderThumbId(ctx, channel)),
package/dist/index.mjs CHANGED
@@ -1,15 +1,15 @@
1
1
  import {
2
2
  connect
3
- } from "./chunk-CD6CID4K.mjs";
3
+ } from "./chunk-HSUD4DN3.mjs";
4
4
  import "./chunk-JNBNPPMF.mjs";
5
5
  import "./chunk-KO4TBUXB.mjs";
6
6
  import "./chunk-3XH465XT.mjs";
7
7
  import "./chunk-75JXJMB5.mjs";
8
8
  import {
9
9
  machine
10
- } from "./chunk-ZBNUATFY.mjs";
10
+ } from "./chunk-EUTH4EDN.mjs";
11
11
  import "./chunk-2ERX54SV.mjs";
12
- import "./chunk-ACSV4TXB.mjs";
12
+ import "./chunk-JOGAQ7RL.mjs";
13
13
  import "./chunk-OY3B7NXA.mjs";
14
14
  import "./chunk-KLLIOTK6.mjs";
15
15
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/color-picker",
3
- "version": "0.0.0-dev-20230420095643",
3
+ "version": "0.0.0-dev-20230420103904",
4
4
  "description": "Core logic for the color-picker widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",