@zag-js/color-picker 0.13.0 → 0.15.0

package/dist/index.d.mts

@@ -1,11 +1,11 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { Orientation, PropTypes, RequiredBy, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
+import { Orientation, RequiredBy, PropTypes, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
 import { ColorChannel, Color, ColorFormat, ColorAxes } from '@zag-js/color-utils';
 export { Color, ColorAxes, ColorChannel, ColorFormat, ColorType } from '@zag-js/color-utils';
 import * as _zag_js_core from '@zag-js/core';
 import { StateMachine } from '@zag-js/core';
 
-declare const anatomy: _zag_js_anatomy.Anatomy<"area" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBg" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBg" | "content" | "label" | "eyeDropTrigger">;
+declare const anatomy: _zag_js_anatomy.Anatomy<"area" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBackground" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBackground" | "content" | "label" | "eyeDropperTrigger">;
 
 type ColorChannelProps = {
     channel: ColorChannel;
@@ -37,6 +37,7 @@ type ElementIds = Partial<{
     channelSliderTrack(id: ColorChannel): string;
     channelSliderThumb(id: ColorChannel): string;
 }>;
+
 type PublicContext = CommonProperties & {
     /**
      * The ids of the elements in the color picker. Useful for composition.
@@ -66,7 +67,46 @@ type PublicContext = CommonProperties & {
      * Handler that is called when the user stops dragging.
      */
     onChangeEnd?: (details: ChangeDetails) => void;
+    /**
+     *  The name for the form input
+     */
+    name?: string;
 };
+type PrivateContext = Context<{
+    /**
+     * The id of the thumb that is currently being dragged
+     */
+    activeId: string | null;
+    /**
+     * The channel that is currently being interacted with
+     */
+    activeChannel: Partial<ColorAxes> | null;
+    /**
+     * The orientation of the channel that is currently being interacted with
+     */
+    activeOrientation: Orientation | null;
+}>;
+type ComputedContext = Readonly<{
+    /**
+     * Whether the color picker is in RTL mode
+     */
+    isRtl: boolean;
+    /**
+     * Whether the color picker is interactive
+     */
+    isInteractive: boolean;
+    /**
+     * The color value as a Color object
+     */
+    valueAsColor: Color;
+}>;
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type MachineContext = PublicContext & PrivateContext & ComputedContext;
+type MachineState = {
+    value: "idle" | "focused" | "dragging";
+};
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
 type PublicApi<T extends PropTypes = PropTypes> = {
     /**
      * Whether the color picker is being dragged
@@ -80,6 +120,10 @@ type PublicApi<T extends PropTypes = PropTypes> = {
      * The current color value (as a Color object)
      */
     valueAsColor: Color;
+    /**
+     * The alpha value of the color
+     */
+    alpha: number;
     /**
      * The current color channels of the color
      */
@@ -96,7 +140,12 @@ type PublicApi<T extends PropTypes = PropTypes> = {
      * Function to set the color format
      */
     setFormat(format: ColorFormat): void;
+    /**
+     * Function to set the color alpha
+     */
+    setAlpha(value: number): void;
     contentProps: T["element"];
+    hiddenInputProps: T["input"];
     getAreaProps(props: ColorAreaProps): T["element"];
     getAreaGradientProps(props: ColorAreaProps): T["element"];
     getAreaThumbProps(props: ColorAreaProps): T["element"];
@@ -108,41 +157,6 @@ type PublicApi<T extends PropTypes = PropTypes> = {
     getSwatchBackgroundProps(props: ColorSwatchProps): T["element"];
     getSwatchProps(props: ColorSwatchProps): T["element"];
 };
-type PrivateContext = Context<{
-    /**
-     * The id of the thumb that is currently being dragged
-     */
-    activeId: string | null;
-    /**
-     * The channel that is currently being interacted with
-     */
-    activeChannel: Partial<ColorAxes> | null;
-    /**
-     * The orientation of the channel that is currently being interacted with
-     */
-    activeOrientation: Orientation | null;
-}>;
-type ComputedContext = Readonly<{
-    /**
-     * Whether the color picker is in RTL mode
-     */
-    isRtl: boolean;
-    /**
-     * Whether the color picker is interactive
-     */
-    isInteractive: boolean;
-    /**
-     * The color value as a Color object
-     */
-    valueAsColor: Color;
-}>;
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
-type MachineContext = PublicContext & PrivateContext & ComputedContext;
-type MachineState = {
-    value: "idle" | "focused" | "dragging";
-};
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
 
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T>;
 

package/dist/index.d.ts

@@ -1,11 +1,11 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { Orientation, PropTypes, RequiredBy, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
+import { Orientation, RequiredBy, PropTypes, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
 import { ColorChannel, Color, ColorFormat, ColorAxes } from '@zag-js/color-utils';
 export { Color, ColorAxes, ColorChannel, ColorFormat, ColorType } from '@zag-js/color-utils';
 import * as _zag_js_core from '@zag-js/core';
 import { StateMachine } from '@zag-js/core';
 
-declare const anatomy: _zag_js_anatomy.Anatomy<"area" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBg" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBg" | "content" | "label" | "eyeDropTrigger">;
+declare const anatomy: _zag_js_anatomy.Anatomy<"area" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBackground" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBackground" | "content" | "label" | "eyeDropperTrigger">;
 
 type ColorChannelProps = {
     channel: ColorChannel;
@@ -37,6 +37,7 @@ type ElementIds = Partial<{
     channelSliderTrack(id: ColorChannel): string;
     channelSliderThumb(id: ColorChannel): string;
 }>;
+
 type PublicContext = CommonProperties & {
     /**
      * The ids of the elements in the color picker. Useful for composition.
@@ -66,7 +67,46 @@ type PublicContext = CommonProperties & {
      * Handler that is called when the user stops dragging.
      */
     onChangeEnd?: (details: ChangeDetails) => void;
+    /**
+     *  The name for the form input
+     */
+    name?: string;
 };
+type PrivateContext = Context<{
+    /**
+     * The id of the thumb that is currently being dragged
+     */
+    activeId: string | null;
+    /**
+     * The channel that is currently being interacted with
+     */
+    activeChannel: Partial<ColorAxes> | null;
+    /**
+     * The orientation of the channel that is currently being interacted with
+     */
+    activeOrientation: Orientation | null;
+}>;
+type ComputedContext = Readonly<{
+    /**
+     * Whether the color picker is in RTL mode
+     */
+    isRtl: boolean;
+    /**
+     * Whether the color picker is interactive
+     */
+    isInteractive: boolean;
+    /**
+     * The color value as a Color object
+     */
+    valueAsColor: Color;
+}>;
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type MachineContext = PublicContext & PrivateContext & ComputedContext;
+type MachineState = {
+    value: "idle" | "focused" | "dragging";
+};
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
 type PublicApi<T extends PropTypes = PropTypes> = {
     /**
      * Whether the color picker is being dragged
@@ -80,6 +120,10 @@ type PublicApi<T extends PropTypes = PropTypes> = {
      * The current color value (as a Color object)
      */
     valueAsColor: Color;
+    /**
+     * The alpha value of the color
+     */
+    alpha: number;
     /**
      * The current color channels of the color
      */
@@ -96,7 +140,12 @@ type PublicApi<T extends PropTypes = PropTypes> = {
      * Function to set the color format
      */
     setFormat(format: ColorFormat): void;
+    /**
+     * Function to set the color alpha
+     */
+    setAlpha(value: number): void;
     contentProps: T["element"];
+    hiddenInputProps: T["input"];
     getAreaProps(props: ColorAreaProps): T["element"];
     getAreaGradientProps(props: ColorAreaProps): T["element"];
     getAreaThumbProps(props: ColorAreaProps): T["element"];
@@ -108,41 +157,6 @@ type PublicApi<T extends PropTypes = PropTypes> = {
     getSwatchBackgroundProps(props: ColorSwatchProps): T["element"];
     getSwatchProps(props: ColorSwatchProps): T["element"];
 };
-type PrivateContext = Context<{
-    /**
-     * The id of the thumb that is currently being dragged
-     */
-    activeId: string | null;
-    /**
-     * The channel that is currently being interacted with
-     */
-    activeChannel: Partial<ColorAxes> | null;
-    /**
-     * The orientation of the channel that is currently being interacted with
-     */
-    activeOrientation: Orientation | null;
-}>;
-type ComputedContext = Readonly<{
-    /**
-     * Whether the color picker is in RTL mode
-     */
-    isRtl: boolean;
-    /**
-     * Whether the color picker is interactive
-     */
-    isInteractive: boolean;
-    /**
-     * The color value as a Color object
-     */
-    valueAsColor: Color;
-}>;
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
-type MachineContext = PublicContext & PrivateContext & ComputedContext;
-type MachineState = {
-    value: "idle" | "focused" | "dragging";
-};
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
 
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T>;
 

package/dist/index.js

@@ -33,14 +33,14 @@ var anatomy = (0, import_anatomy.createAnatomy)("color-picker", [
   "areaThumb",
   "areaGradient",
   "channelSliderTrack",
-  "channelSliderTrackBg",
+  "channelSliderTrackBackground",
   "channelSliderThumb",
   "channelInput",
   "swatch",
-  "swatchBg",
+  "swatchBackground",
   "content",
   "label",
-  "eyeDropTrigger"
+  "eyeDropperTrigger"
 ]);
 var parts = anatomy.build();
 
@@ -48,6 +48,7 @@ var parts = anatomy.build();
 var import_color_utils2 = require("@zag-js/color-utils");
 var import_dom_event2 = require("@zag-js/dom-event");
 var import_dom_query2 = require("@zag-js/dom-query");
+var import_visually_hidden = require("@zag-js/visually-hidden");
 
 // src/color-picker.dom.ts
 var import_dom_event = require("@zag-js/dom-event");
@@ -60,20 +61,28 @@ var dom = (0, import_dom_query.createScope)({
   getChannelSliderTrackId: (ctx, channel) => ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`,
   getChannelInputId: (ctx, channel) => ctx.ids?.channelInput?.(channel) ?? `color-picker:${ctx.id}:input:${channel}`,
   getChannelSliderThumbId: (ctx, channel) => ctx.ids?.channelSliderThumb?.(channel) ?? `color-picker:${ctx.id}:slider-thumb:${channel}`,
-  getContentEl: (ctx) => dom.queryById(ctx, dom.getContentId(ctx)),
-  getAreaThumbEl: (ctx) => dom.queryById(ctx, dom.getAreaThumbId(ctx)),
-  getChannelSliderThumbEl: (ctx, channel) => dom.queryById(ctx, dom.getChannelSliderThumbId(ctx, channel)),
-  getChannelInputEl: (ctx, channel) => dom.queryById(ctx, dom.getChannelInputId(ctx, channel)),
-  getAreaEl: (ctx) => dom.queryById(ctx, dom.getAreaId(ctx)),
+  getHiddenInputId: (ctx) => `color-picker:${ctx.id}:hidden-input`,
+  getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
+  getAreaThumbEl: (ctx) => dom.getById(ctx, dom.getAreaThumbId(ctx)),
+  getChannelSliderThumbEl: (ctx, channel) => dom.getById(ctx, dom.getChannelSliderThumbId(ctx, channel)),
+  getChannelInputEl: (ctx, channel) => dom.getById(ctx, dom.getChannelInputId(ctx, channel)),
+  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx)),
+  getAreaEl: (ctx) => dom.getById(ctx, dom.getAreaId(ctx)),
   getAreaValueFromPoint(ctx, point) {
-    const { percent } = (0, import_dom_event.getRelativePoint)(point, dom.getAreaEl(ctx));
+    const areaEl = dom.getAreaEl(ctx);
+    if (!areaEl)
+      return;
+    const { percent } = (0, import_dom_event.getRelativePoint)(point, areaEl);
     return percent;
   },
   getChannelSliderTrackEl: (ctx, channel) => {
-    return dom.queryById(ctx, dom.getChannelSliderTrackId(ctx, channel));
+    return dom.getById(ctx, dom.getChannelSliderTrackId(ctx, channel));
   },
   getChannelSliderValueFromPoint(ctx, point, channel) {
-    const { percent } = (0, import_dom_event.getRelativePoint)(point, dom.getChannelSliderTrackEl(ctx, channel));
+    const trackEl = dom.getChannelSliderTrackEl(ctx, channel);
+    if (!trackEl)
+      return;
+    const { percent } = (0, import_dom_event.getRelativePoint)(point, trackEl);
     return percent;
   },
   getChannelInputEls: (ctx) => {
@@ -397,25 +406,31 @@ var getSliderBgImage = (ctx, props) => {
 // src/color-picker.connect.ts
 function connect(state, send, normalize) {
   const valueAsColor = state.context.valueAsColor;
+  const value = state.context.value;
   const isDisabled = state.context.disabled;
   const isInteractive = state.context.isInteractive;
   const isDragging = state.matches("dragging");
   const channels = valueAsColor.getColorChannels();
   return {
     isDragging,
-    value: state.context.value,
+    value,
     valueAsColor,
+    alpha: valueAsColor.getChannelValue("alpha"),
     channels,
-    setColor(value) {
-      send({ type: "VALUE.SET", value: (0, import_color_utils2.normalizeColor)(value), src: "set-color" });
+    setColor(value2) {
+      send({ type: "VALUE.SET", value: (0, import_color_utils2.normalizeColor)(value2), src: "set-color" });
     },
-    setChannelValue(channel, value) {
-      const color = valueAsColor.withChannelValue(channel, value);
+    setChannelValue(channel, value2) {
+      const color = valueAsColor.withChannelValue(channel, value2);
       send({ type: "VALUE.SET", value: color, src: "set-channel" });
     },
     setFormat(format) {
-      const value = valueAsColor.toFormat(format);
-      send({ type: "VALUE.SET", value, src: "set-format" });
+      const value2 = valueAsColor.toFormat(format);
+      send({ type: "VALUE.SET", value: value2, src: "set-format" });
+    },
+    setAlpha(value2) {
+      const color = valueAsColor.withChannelValue("alpha", value2);
+      send({ type: "VALUE.SET", value: color, src: "set-alpha" });
     },
     contentProps: normalize.element({
       ...parts.content.attrs,
@@ -546,7 +561,7 @@ function connect(state, send, normalize) {
     getChannelSliderBackgroundProps(props) {
       const { orientation = "horizontal", channel } = props;
       return normalize.element({
-        ...parts.channelSliderTrackBg.attrs,
+        ...parts.channelSliderTrackBackground.attrs,
         "data-orientation": orientation,
         "data-channel": channel,
         style: {
@@ -662,19 +677,19 @@ function connect(state, send, normalize) {
         onChange(event) {
           if (isTextField)
             return;
-          const value = event.currentTarget.value;
-          send({ type: "CHANNEL_INPUT.CHANGE", channel, value, isTextField });
+          const value2 = event.currentTarget.value;
+          send({ type: "CHANNEL_INPUT.CHANGE", channel, value: value2, isTextField });
         },
         onBlur(event) {
-          const value = event.currentTarget.value;
-          send({ type: "CHANNEL_INPUT.BLUR", channel, value, isTextField });
+          const value2 = event.currentTarget.value;
+          send({ type: "CHANNEL_INPUT.BLUR", channel, value: value2, isTextField });
         },
         onKeyDown(event) {
           if (!isTextField)
             return;
           if (event.key === "Enter") {
-            const value = event.currentTarget.value;
-            send({ type: "CHANNEL_INPUT.CHANGE", channel, value, isTextField });
+            const value2 = event.currentTarget.value;
+            send({ type: "CHANNEL_INPUT.CHANGE", channel, value: value2, isTextField });
           }
         },
         style: {
@@ -684,17 +699,34 @@ function connect(state, send, normalize) {
         }
       });
     },
+    hiddenInputProps: normalize.input({
+      type: "text",
+      disabled: isDisabled,
+      name: state.context.name,
+      id: dom.getHiddenInputId(state.context),
+      style: import_visually_hidden.visuallyHiddenStyle,
+      defaultValue: value,
+      onChange(event) {
+        const value2 = event.currentTarget.value;
+        send({ type: "VALUE.SET", value: value2, src: "input.change" });
+      }
+    }),
     eyeDropperTriggerProps: normalize.button({
-      ...parts.eyeDropTrigger.attrs,
+      ...parts.eyeDropperTrigger.attrs,
+      disabled: isDisabled,
+      "data-disabled": (0, import_dom_query2.dataAttr)(isDisabled),
+      "aria-label": "Pick a color from the screen",
       onClick() {
+        if (!isInteractive)
+          return;
         send("EYEDROPPER.CLICK");
       }
     }),
     getSwatchBackgroundProps(props) {
-      const { value } = props;
-      const alpha = (0, import_color_utils2.normalizeColor)(value).getChannelValue("alpha");
+      const { value: value2 } = props;
+      const alpha = (0, import_color_utils2.normalizeColor)(value2).getChannelValue("alpha");
       return normalize.element({
-        ...parts.swatchBg.attrs,
+        ...parts.swatchBackground.attrs,
         "data-alpha": alpha,
         style: {
           width: "100%",
@@ -715,12 +747,12 @@ function connect(state, send, normalize) {
       });
     },
     getSwatchProps(props) {
-      const { value, readOnly } = props;
-      const color = (0, import_color_utils2.normalizeColor)(value).toFormat(valueAsColor.getColorSpace());
+      const { value: value2, readOnly } = props;
+      const color = (0, import_color_utils2.normalizeColor)(value2).toFormat(valueAsColor.getColorSpace());
       return normalize.element({
         ...parts.swatch.attrs,
         onClick() {
-          if (readOnly)
+          if (readOnly || !isInteractive)
             return;
           send({ type: "VALUE.SET", value: color });
         },
@@ -738,6 +770,7 @@ var import_color_utils3 = require("@zag-js/color-utils");
 var import_core = require("@zag-js/core");
 var import_dom_event3 = require("@zag-js/dom-event");
 var import_dom_query3 = require("@zag-js/dom-query");
+var import_form_utils = require("@zag-js/form-utils");
 var import_numeric_range2 = require("@zag-js/numeric-range");
 var import_text_selection = require("@zag-js/text-selection");
 var import_utils = require("@zag-js/utils");
@@ -765,8 +798,9 @@ function machine(userContext) {
           actions: ["setValue"]
         }
       },
+      activities: ["trackFormControl"],
       watch: {
-        value: ["syncChannelInputs", "invokeOnChange"]
+        value: ["syncInputElements", "invokeOnChange"]
       },
       states: {
         idle: {
@@ -900,6 +934,17 @@ function machine(userContext) {
         isTextField: (_ctx, evt) => !!evt.isTextField
       },
       activities: {
+        trackFormControl(ctx2, _evt, { send, initialContext }) {
+          const inputEl = dom.getHiddenInputEl(ctx2);
+          return (0, import_form_utils.trackFormControl)(inputEl, {
+            onFieldsetDisabled() {
+              ctx2.disabled = true;
+            },
+            onFormReset() {
+              send({ type: "VALUE.SET", value: initialContext.value, src: "form.reset" });
+            }
+          });
+        },
         trackPointerMove(ctx2, _evt, { send }) {
           return (0, import_dom_event3.trackPointerMove)(dom.getDoc(ctx2), {
             onPointerMove({ point }) {
@@ -947,6 +992,8 @@ function machine(userContext) {
         setAreaColorFromPoint(ctx2, evt) {
           const { xChannel, yChannel } = evt.channel || ctx2.activeChannel;
           const percent = dom.getAreaValueFromPoint(ctx2, evt.point);
+          if (!percent)
+            return;
           const { getColorFromPoint } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
           const color = getColorFromPoint(percent.x, percent.y);
           if (!color)
@@ -956,6 +1003,8 @@ function machine(userContext) {
         setChannelColorFromPoint(ctx2, evt) {
           const channel = evt.channel || ctx2.activeId;
           const percent = dom.getChannelSliderValueFromPoint(ctx2, evt.point, channel);
+          if (!percent)
+            return;
           const { minValue, maxValue, step } = ctx2.valueAsColor.getChannelRange(channel);
           const orientation = ctx2.activeOrientation || "horizontal";
           const point = orientation === "horizontal" ? percent.x : percent.y;
@@ -967,15 +1016,18 @@ function machine(userContext) {
         setValue(ctx2, evt) {
           setColor(ctx2, evt.value);
         },
-        syncChannelInputs(ctx2) {
+        syncInputElements(ctx2) {
           const inputs = dom.getChannelInputEls(ctx2);
           inputs.forEach((input) => {
             const channel = input.dataset.channel;
             if (!channel)
               return;
-            const value = getChannelInputValue(ctx2.valueAsColor, channel);
-            input.value = value.toString();
+            input.value = getChannelInputValue(ctx2.valueAsColor, channel);
           });
+          const hiddenInput = dom.getHiddenInputEl(ctx2);
+          if (!hiddenInput)
+            return;
+          hiddenInput.value = ctx2.value;
         },
         setChannelColorFromInput(ctx2, evt) {
           const { channel, isTextField, value } = evt;