@zag-js/color-picker 0.13.0 → 0.14.0

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 (12) hide show
  1. package/dist/index.d.mts +51 -37
  2. package/dist/index.d.ts +51 -37
  3. package/dist/index.js +90 -36
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +90 -36
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +12 -10
  8. package/src/color-picker.anatomy.ts +4 -3
  9. package/src/color-picker.connect.ts +31 -5
  10. package/src/color-picker.dom.ts +14 -8
  11. package/src/color-picker.machine.ts +27 -4
  12. package/src/color-picker.types.ts +54 -41
package/dist/index.d.mts CHANGED
@@ -1,11 +1,11 @@
1
1
  import * as _zag_js_anatomy from '@zag-js/anatomy';
2
- import { Orientation, PropTypes, RequiredBy, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
2
+ import { Orientation, RequiredBy, PropTypes, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
3
3
  import { ColorChannel, Color, ColorFormat, ColorAxes } from '@zag-js/color-utils';
4
4
  export { Color, ColorAxes, ColorChannel, ColorFormat, ColorType } from '@zag-js/color-utils';
5
5
  import * as _zag_js_core from '@zag-js/core';
6
6
  import { StateMachine } from '@zag-js/core';
7
7
 
8
- declare const anatomy: _zag_js_anatomy.Anatomy<"area" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBg" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBg" | "content" | "label" | "eyeDropTrigger">;
8
+ declare const anatomy: _zag_js_anatomy.Anatomy<"area" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBackground" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBackground" | "content" | "label" | "hiddenInput" | "eyeDropperTrigger">;
9
9
 
10
10
  type ColorChannelProps = {
11
11
  channel: ColorChannel;
@@ -37,6 +37,7 @@ type ElementIds = Partial<{
37
37
  channelSliderTrack(id: ColorChannel): string;
38
38
  channelSliderThumb(id: ColorChannel): string;
39
39
  }>;
40
+
40
41
  type PublicContext = CommonProperties & {
41
42
  /**
42
43
  * The ids of the elements in the color picker. Useful for composition.
@@ -66,7 +67,46 @@ type PublicContext = CommonProperties & {
66
67
  * Handler that is called when the user stops dragging.
67
68
  */
68
69
  onChangeEnd?: (details: ChangeDetails) => void;
70
+ /**
71
+ * The name for the form input
72
+ */
73
+ name?: string;
69
74
  };
75
+ type PrivateContext = Context<{
76
+ /**
77
+ * The id of the thumb that is currently being dragged
78
+ */
79
+ activeId: string | null;
80
+ /**
81
+ * The channel that is currently being interacted with
82
+ */
83
+ activeChannel: Partial<ColorAxes> | null;
84
+ /**
85
+ * The orientation of the channel that is currently being interacted with
86
+ */
87
+ activeOrientation: Orientation | null;
88
+ }>;
89
+ type ComputedContext = Readonly<{
90
+ /**
91
+ * Whether the color picker is in RTL mode
92
+ */
93
+ isRtl: boolean;
94
+ /**
95
+ * Whether the color picker is interactive
96
+ */
97
+ isInteractive: boolean;
98
+ /**
99
+ * The color value as a Color object
100
+ */
101
+ valueAsColor: Color;
102
+ }>;
103
+ type UserDefinedContext = RequiredBy<PublicContext, "id">;
104
+ type MachineContext = PublicContext & PrivateContext & ComputedContext;
105
+ type MachineState = {
106
+ value: "idle" | "focused" | "dragging";
107
+ };
108
+ type State = StateMachine.State<MachineContext, MachineState>;
109
+ type Send = StateMachine.Send<StateMachine.AnyEventObject>;
70
110
  type PublicApi<T extends PropTypes = PropTypes> = {
71
111
  /**
72
112
  * Whether the color picker is being dragged
@@ -80,6 +120,10 @@ type PublicApi<T extends PropTypes = PropTypes> = {
80
120
  * The current color value (as a Color object)
81
121
  */
82
122
  valueAsColor: Color;
123
+ /**
124
+ * The alpha value of the color
125
+ */
126
+ alpha: number;
83
127
  /**
84
128
  * The current color channels of the color
85
129
  */
@@ -96,7 +140,12 @@ type PublicApi<T extends PropTypes = PropTypes> = {
96
140
  * Function to set the color format
97
141
  */
98
142
  setFormat(format: ColorFormat): void;
143
+ /**
144
+ * Function to set the color alpha
145
+ */
146
+ setAlpha(value: number): void;
99
147
  contentProps: T["element"];
148
+ hiddenInputProps: T["input"];
100
149
  getAreaProps(props: ColorAreaProps): T["element"];
101
150
  getAreaGradientProps(props: ColorAreaProps): T["element"];
102
151
  getAreaThumbProps(props: ColorAreaProps): T["element"];
@@ -108,41 +157,6 @@ type PublicApi<T extends PropTypes = PropTypes> = {
108
157
  getSwatchBackgroundProps(props: ColorSwatchProps): T["element"];
109
158
  getSwatchProps(props: ColorSwatchProps): T["element"];
110
159
  };
111
- type PrivateContext = Context<{
112
- /**
113
- * The id of the thumb that is currently being dragged
114
- */
115
- activeId: string | null;
116
- /**
117
- * The channel that is currently being interacted with
118
- */
119
- activeChannel: Partial<ColorAxes> | null;
120
- /**
121
- * The orientation of the channel that is currently being interacted with
122
- */
123
- activeOrientation: Orientation | null;
124
- }>;
125
- type ComputedContext = Readonly<{
126
- /**
127
- * Whether the color picker is in RTL mode
128
- */
129
- isRtl: boolean;
130
- /**
131
- * Whether the color picker is interactive
132
- */
133
- isInteractive: boolean;
134
- /**
135
- * The color value as a Color object
136
- */
137
- valueAsColor: Color;
138
- }>;
139
- type UserDefinedContext = RequiredBy<PublicContext, "id">;
140
- type MachineContext = PublicContext & PrivateContext & ComputedContext;
141
- type MachineState = {
142
- value: "idle" | "focused" | "dragging";
143
- };
144
- type State = StateMachine.State<MachineContext, MachineState>;
145
- type Send = StateMachine.Send<StateMachine.AnyEventObject>;
146
160
 
147
161
  declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T>;
148
162
 
package/dist/index.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import * as _zag_js_anatomy from '@zag-js/anatomy';
2
- import { Orientation, PropTypes, RequiredBy, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
2
+ import { Orientation, RequiredBy, PropTypes, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
3
3
  import { ColorChannel, Color, ColorFormat, ColorAxes } from '@zag-js/color-utils';
4
4
  export { Color, ColorAxes, ColorChannel, ColorFormat, ColorType } from '@zag-js/color-utils';
5
5
  import * as _zag_js_core from '@zag-js/core';
6
6
  import { StateMachine } from '@zag-js/core';
7
7
 
8
- declare const anatomy: _zag_js_anatomy.Anatomy<"area" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBg" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBg" | "content" | "label" | "eyeDropTrigger">;
8
+ declare const anatomy: _zag_js_anatomy.Anatomy<"area" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBackground" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBackground" | "content" | "label" | "hiddenInput" | "eyeDropperTrigger">;
9
9
 
10
10
  type ColorChannelProps = {
11
11
  channel: ColorChannel;
@@ -37,6 +37,7 @@ type ElementIds = Partial<{
37
37
  channelSliderTrack(id: ColorChannel): string;
38
38
  channelSliderThumb(id: ColorChannel): string;
39
39
  }>;
40
+
40
41
  type PublicContext = CommonProperties & {
41
42
  /**
42
43
  * The ids of the elements in the color picker. Useful for composition.
@@ -66,7 +67,46 @@ type PublicContext = CommonProperties & {
66
67
  * Handler that is called when the user stops dragging.
67
68
  */
68
69
  onChangeEnd?: (details: ChangeDetails) => void;
70
+ /**
71
+ * The name for the form input
72
+ */
73
+ name?: string;
69
74
  };
75
+ type PrivateContext = Context<{
76
+ /**
77
+ * The id of the thumb that is currently being dragged
78
+ */
79
+ activeId: string | null;
80
+ /**
81
+ * The channel that is currently being interacted with
82
+ */
83
+ activeChannel: Partial<ColorAxes> | null;
84
+ /**
85
+ * The orientation of the channel that is currently being interacted with
86
+ */
87
+ activeOrientation: Orientation | null;
88
+ }>;
89
+ type ComputedContext = Readonly<{
90
+ /**
91
+ * Whether the color picker is in RTL mode
92
+ */
93
+ isRtl: boolean;
94
+ /**
95
+ * Whether the color picker is interactive
96
+ */
97
+ isInteractive: boolean;
98
+ /**
99
+ * The color value as a Color object
100
+ */
101
+ valueAsColor: Color;
102
+ }>;
103
+ type UserDefinedContext = RequiredBy<PublicContext, "id">;
104
+ type MachineContext = PublicContext & PrivateContext & ComputedContext;
105
+ type MachineState = {
106
+ value: "idle" | "focused" | "dragging";
107
+ };
108
+ type State = StateMachine.State<MachineContext, MachineState>;
109
+ type Send = StateMachine.Send<StateMachine.AnyEventObject>;
70
110
  type PublicApi<T extends PropTypes = PropTypes> = {
71
111
  /**
72
112
  * Whether the color picker is being dragged
@@ -80,6 +120,10 @@ type PublicApi<T extends PropTypes = PropTypes> = {
80
120
  * The current color value (as a Color object)
81
121
  */
82
122
  valueAsColor: Color;
123
+ /**
124
+ * The alpha value of the color
125
+ */
126
+ alpha: number;
83
127
  /**
84
128
  * The current color channels of the color
85
129
  */
@@ -96,7 +140,12 @@ type PublicApi<T extends PropTypes = PropTypes> = {
96
140
  * Function to set the color format
97
141
  */
98
142
  setFormat(format: ColorFormat): void;
143
+ /**
144
+ * Function to set the color alpha
145
+ */
146
+ setAlpha(value: number): void;
99
147
  contentProps: T["element"];
148
+ hiddenInputProps: T["input"];
100
149
  getAreaProps(props: ColorAreaProps): T["element"];
101
150
  getAreaGradientProps(props: ColorAreaProps): T["element"];
102
151
  getAreaThumbProps(props: ColorAreaProps): T["element"];
@@ -108,41 +157,6 @@ type PublicApi<T extends PropTypes = PropTypes> = {
108
157
  getSwatchBackgroundProps(props: ColorSwatchProps): T["element"];
109
158
  getSwatchProps(props: ColorSwatchProps): T["element"];
110
159
  };
111
- type PrivateContext = Context<{
112
- /**
113
- * The id of the thumb that is currently being dragged
114
- */
115
- activeId: string | null;
116
- /**
117
- * The channel that is currently being interacted with
118
- */
119
- activeChannel: Partial<ColorAxes> | null;
120
- /**
121
- * The orientation of the channel that is currently being interacted with
122
- */
123
- activeOrientation: Orientation | null;
124
- }>;
125
- type ComputedContext = Readonly<{
126
- /**
127
- * Whether the color picker is in RTL mode
128
- */
129
- isRtl: boolean;
130
- /**
131
- * Whether the color picker is interactive
132
- */
133
- isInteractive: boolean;
134
- /**
135
- * The color value as a Color object
136
- */
137
- valueAsColor: Color;
138
- }>;
139
- type UserDefinedContext = RequiredBy<PublicContext, "id">;
140
- type MachineContext = PublicContext & PrivateContext & ComputedContext;
141
- type MachineState = {
142
- value: "idle" | "focused" | "dragging";
143
- };
144
- type State = StateMachine.State<MachineContext, MachineState>;
145
- type Send = StateMachine.Send<StateMachine.AnyEventObject>;
146
160
 
147
161
  declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T>;
148
162
 
package/dist/index.js CHANGED
@@ -33,14 +33,15 @@ var anatomy = (0, import_anatomy.createAnatomy)("color-picker", [
33
33
  "areaThumb",
34
34
  "areaGradient",
35
35
  "channelSliderTrack",
36
- "channelSliderTrackBg",
36
+ "channelSliderTrackBackground",
37
37
  "channelSliderThumb",
38
38
  "channelInput",
39
39
  "swatch",
40
- "swatchBg",
40
+ "swatchBackground",
41
41
  "content",
42
42
  "label",
43
- "eyeDropTrigger"
43
+ "hiddenInput",
44
+ "eyeDropperTrigger"
44
45
  ]);
45
46
  var parts = anatomy.build();
46
47
 
@@ -48,6 +49,7 @@ var parts = anatomy.build();
48
49
  var import_color_utils2 = require("@zag-js/color-utils");
49
50
  var import_dom_event2 = require("@zag-js/dom-event");
50
51
  var import_dom_query2 = require("@zag-js/dom-query");
52
+ var import_visually_hidden = require("@zag-js/visually-hidden");
51
53
 
52
54
  // src/color-picker.dom.ts
53
55
  var import_dom_event = require("@zag-js/dom-event");
@@ -60,20 +62,28 @@ var dom = (0, import_dom_query.createScope)({
60
62
  getChannelSliderTrackId: (ctx, channel) => ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`,
61
63
  getChannelInputId: (ctx, channel) => ctx.ids?.channelInput?.(channel) ?? `color-picker:${ctx.id}:input:${channel}`,
62
64
  getChannelSliderThumbId: (ctx, channel) => ctx.ids?.channelSliderThumb?.(channel) ?? `color-picker:${ctx.id}:slider-thumb:${channel}`,
63
- getContentEl: (ctx) => dom.queryById(ctx, dom.getContentId(ctx)),
64
- getAreaThumbEl: (ctx) => dom.queryById(ctx, dom.getAreaThumbId(ctx)),
65
- getChannelSliderThumbEl: (ctx, channel) => dom.queryById(ctx, dom.getChannelSliderThumbId(ctx, channel)),
66
- getChannelInputEl: (ctx, channel) => dom.queryById(ctx, dom.getChannelInputId(ctx, channel)),
67
- getAreaEl: (ctx) => dom.queryById(ctx, dom.getAreaId(ctx)),
65
+ getHiddenInputId: (ctx) => `color-picker:${ctx.id}:hidden-input`,
66
+ getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
67
+ getAreaThumbEl: (ctx) => dom.getById(ctx, dom.getAreaThumbId(ctx)),
68
+ getChannelSliderThumbEl: (ctx, channel) => dom.getById(ctx, dom.getChannelSliderThumbId(ctx, channel)),
69
+ getChannelInputEl: (ctx, channel) => dom.getById(ctx, dom.getChannelInputId(ctx, channel)),
70
+ getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
71
+ getAreaEl: (ctx) => dom.getById(ctx, dom.getAreaId(ctx)),
68
72
  getAreaValueFromPoint(ctx, point) {
69
- const { percent } = (0, import_dom_event.getRelativePoint)(point, dom.getAreaEl(ctx));
73
+ const areaEl = dom.getAreaEl(ctx);
74
+ if (!areaEl)
75
+ return;
76
+ const { percent } = (0, import_dom_event.getRelativePoint)(point, areaEl);
70
77
  return percent;
71
78
  },
72
79
  getChannelSliderTrackEl: (ctx, channel) => {
73
- return dom.queryById(ctx, dom.getChannelSliderTrackId(ctx, channel));
80
+ return dom.getById(ctx, dom.getChannelSliderTrackId(ctx, channel));
74
81
  },
75
82
  getChannelSliderValueFromPoint(ctx, point, channel) {
76
- const { percent } = (0, import_dom_event.getRelativePoint)(point, dom.getChannelSliderTrackEl(ctx, channel));
83
+ const trackEl = dom.getChannelSliderTrackEl(ctx, channel);
84
+ if (!trackEl)
85
+ return;
86
+ const { percent } = (0, import_dom_event.getRelativePoint)(point, trackEl);
77
87
  return percent;
78
88
  },
79
89
  getChannelInputEls: (ctx) => {
@@ -397,25 +407,31 @@ var getSliderBgImage = (ctx, props) => {
397
407
  // src/color-picker.connect.ts
398
408
  function connect(state, send, normalize) {
399
409
  const valueAsColor = state.context.valueAsColor;
410
+ const value = state.context.value;
400
411
  const isDisabled = state.context.disabled;
401
412
  const isInteractive = state.context.isInteractive;
402
413
  const isDragging = state.matches("dragging");
403
414
  const channels = valueAsColor.getColorChannels();
404
415
  return {
405
416
  isDragging,
406
- value: state.context.value,
417
+ value,
407
418
  valueAsColor,
419
+ alpha: valueAsColor.getChannelValue("alpha"),
408
420
  channels,
409
- setColor(value) {
410
- send({ type: "VALUE.SET", value: (0, import_color_utils2.normalizeColor)(value), src: "set-color" });
421
+ setColor(value2) {
422
+ send({ type: "VALUE.SET", value: (0, import_color_utils2.normalizeColor)(value2), src: "set-color" });
411
423
  },
412
- setChannelValue(channel, value) {
413
- const color = valueAsColor.withChannelValue(channel, value);
424
+ setChannelValue(channel, value2) {
425
+ const color = valueAsColor.withChannelValue(channel, value2);
414
426
  send({ type: "VALUE.SET", value: color, src: "set-channel" });
415
427
  },
416
428
  setFormat(format) {
417
- const value = valueAsColor.toFormat(format);
418
- send({ type: "VALUE.SET", value, src: "set-format" });
429
+ const value2 = valueAsColor.toFormat(format);
430
+ send({ type: "VALUE.SET", value: value2, src: "set-format" });
431
+ },
432
+ setAlpha(value2) {
433
+ const color = valueAsColor.withChannelValue("alpha", value2);
434
+ send({ type: "VALUE.SET", value: color, src: "set-alpha" });
419
435
  },
420
436
  contentProps: normalize.element({
421
437
  ...parts.content.attrs,
@@ -546,7 +562,7 @@ function connect(state, send, normalize) {
546
562
  getChannelSliderBackgroundProps(props) {
547
563
  const { orientation = "horizontal", channel } = props;
548
564
  return normalize.element({
549
- ...parts.channelSliderTrackBg.attrs,
565
+ ...parts.channelSliderTrackBackground.attrs,
550
566
  "data-orientation": orientation,
551
567
  "data-channel": channel,
552
568
  style: {
@@ -662,19 +678,19 @@ function connect(state, send, normalize) {
662
678
  onChange(event) {
663
679
  if (isTextField)
664
680
  return;
665
- const value = event.currentTarget.value;
666
- send({ type: "CHANNEL_INPUT.CHANGE", channel, value, isTextField });
681
+ const value2 = event.currentTarget.value;
682
+ send({ type: "CHANNEL_INPUT.CHANGE", channel, value: value2, isTextField });
667
683
  },
668
684
  onBlur(event) {
669
- const value = event.currentTarget.value;
670
- send({ type: "CHANNEL_INPUT.BLUR", channel, value, isTextField });
685
+ const value2 = event.currentTarget.value;
686
+ send({ type: "CHANNEL_INPUT.BLUR", channel, value: value2, isTextField });
671
687
  },
672
688
  onKeyDown(event) {
673
689
  if (!isTextField)
674
690
  return;
675
691
  if (event.key === "Enter") {
676
- const value = event.currentTarget.value;
677
- send({ type: "CHANNEL_INPUT.CHANGE", channel, value, isTextField });
692
+ const value2 = event.currentTarget.value;
693
+ send({ type: "CHANNEL_INPUT.CHANGE", channel, value: value2, isTextField });
678
694
  }
679
695
  },
680
696
  style: {
@@ -684,17 +700,35 @@ function connect(state, send, normalize) {
684
700
  }
685
701
  });
686
702
  },
703
+ hiddenInputProps: normalize.input({
704
+ ...parts.hiddenInput.attrs,
705
+ type: "text",
706
+ disabled: isDisabled,
707
+ name: state.context.name,
708
+ id: dom.getHiddenInputId(state.context),
709
+ style: import_visually_hidden.visuallyHiddenStyle,
710
+ defaultValue: value,
711
+ onChange(event) {
712
+ const value2 = event.currentTarget.value;
713
+ send({ type: "VALUE.SET", value: value2, src: "input.change" });
714
+ }
715
+ }),
687
716
  eyeDropperTriggerProps: normalize.button({
688
- ...parts.eyeDropTrigger.attrs,
717
+ ...parts.eyeDropperTrigger.attrs,
718
+ disabled: isDisabled,
719
+ "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
720
+ "aria-label": "Pick a color from the screen",
689
721
  onClick() {
722
+ if (!isInteractive)
723
+ return;
690
724
  send("EYEDROPPER.CLICK");
691
725
  }
692
726
  }),
693
727
  getSwatchBackgroundProps(props) {
694
- const { value } = props;
695
- const alpha = (0, import_color_utils2.normalizeColor)(value).getChannelValue("alpha");
728
+ const { value: value2 } = props;
729
+ const alpha = (0, import_color_utils2.normalizeColor)(value2).getChannelValue("alpha");
696
730
  return normalize.element({
697
- ...parts.swatchBg.attrs,
731
+ ...parts.swatchBackground.attrs,
698
732
  "data-alpha": alpha,
699
733
  style: {
700
734
  width: "100%",
@@ -715,12 +749,12 @@ function connect(state, send, normalize) {
715
749
  });
716
750
  },
717
751
  getSwatchProps(props) {
718
- const { value, readOnly } = props;
719
- const color = (0, import_color_utils2.normalizeColor)(value).toFormat(valueAsColor.getColorSpace());
752
+ const { value: value2, readOnly } = props;
753
+ const color = (0, import_color_utils2.normalizeColor)(value2).toFormat(valueAsColor.getColorSpace());
720
754
  return normalize.element({
721
755
  ...parts.swatch.attrs,
722
756
  onClick() {
723
- if (readOnly)
757
+ if (readOnly || !isInteractive)
724
758
  return;
725
759
  send({ type: "VALUE.SET", value: color });
726
760
  },
@@ -738,6 +772,7 @@ var import_color_utils3 = require("@zag-js/color-utils");
738
772
  var import_core = require("@zag-js/core");
739
773
  var import_dom_event3 = require("@zag-js/dom-event");
740
774
  var import_dom_query3 = require("@zag-js/dom-query");
775
+ var import_form_utils = require("@zag-js/form-utils");
741
776
  var import_numeric_range2 = require("@zag-js/numeric-range");
742
777
  var import_text_selection = require("@zag-js/text-selection");
743
778
  var import_utils = require("@zag-js/utils");
@@ -765,8 +800,9 @@ function machine(userContext) {
765
800
  actions: ["setValue"]
766
801
  }
767
802
  },
803
+ activities: ["trackFormControl"],
768
804
  watch: {
769
- value: ["syncChannelInputs", "invokeOnChange"]
805
+ value: ["syncInputElements", "invokeOnChange"]
770
806
  },
771
807
  states: {
772
808
  idle: {
@@ -900,6 +936,17 @@ function machine(userContext) {
900
936
  isTextField: (_ctx, evt) => !!evt.isTextField
901
937
  },
902
938
  activities: {
939
+ trackFormControl(ctx2, _evt, { send, initialContext }) {
940
+ const inputEl = dom.getHiddenInputEl(ctx2);
941
+ return (0, import_form_utils.trackFormControl)(inputEl, {
942
+ onFieldsetDisabled() {
943
+ ctx2.disabled = true;
944
+ },
945
+ onFormReset() {
946
+ send({ type: "VALUE.SET", value: initialContext.value, src: "form.reset" });
947
+ }
948
+ });
949
+ },
903
950
  trackPointerMove(ctx2, _evt, { send }) {
904
951
  return (0, import_dom_event3.trackPointerMove)(dom.getDoc(ctx2), {
905
952
  onPointerMove({ point }) {
@@ -947,6 +994,8 @@ function machine(userContext) {
947
994
  setAreaColorFromPoint(ctx2, evt) {
948
995
  const { xChannel, yChannel } = evt.channel || ctx2.activeChannel;
949
996
  const percent = dom.getAreaValueFromPoint(ctx2, evt.point);
997
+ if (!percent)
998
+ return;
950
999
  const { getColorFromPoint } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
951
1000
  const color = getColorFromPoint(percent.x, percent.y);
952
1001
  if (!color)
@@ -956,6 +1005,8 @@ function machine(userContext) {
956
1005
  setChannelColorFromPoint(ctx2, evt) {
957
1006
  const channel = evt.channel || ctx2.activeId;
958
1007
  const percent = dom.getChannelSliderValueFromPoint(ctx2, evt.point, channel);
1008
+ if (!percent)
1009
+ return;
959
1010
  const { minValue, maxValue, step } = ctx2.valueAsColor.getChannelRange(channel);
960
1011
  const orientation = ctx2.activeOrientation || "horizontal";
961
1012
  const point = orientation === "horizontal" ? percent.x : percent.y;
@@ -967,15 +1018,18 @@ function machine(userContext) {
967
1018
  setValue(ctx2, evt) {
968
1019
  setColor(ctx2, evt.value);
969
1020
  },
970
- syncChannelInputs(ctx2) {
1021
+ syncInputElements(ctx2) {
971
1022
  const inputs = dom.getChannelInputEls(ctx2);
972
1023
  inputs.forEach((input) => {
973
1024
  const channel = input.dataset.channel;
974
1025
  if (!channel)
975
1026
  return;
976
- const value = getChannelInputValue(ctx2.valueAsColor, channel);
977
- input.value = value.toString();
1027
+ input.value = getChannelInputValue(ctx2.valueAsColor, channel);
978
1028
  });
1029
+ const hiddenInput = dom.getHiddenInputEl(ctx2);
1030
+ if (!hiddenInput)
1031
+ return;
1032
+ hiddenInput.value = ctx2.value;
979
1033
  },
980
1034
  setChannelColorFromInput(ctx2, evt) {
981
1035
  const { channel, isTextField, value } = evt;