@zag-js/color-picker 0.15.0 → 0.17.0

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 import { Orientation, RequiredBy, PropTypes, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
-import { ColorChannel, Color, ColorFormat, ColorAxes } from '@zag-js/color-utils';
+import { ColorChannel, Color, ColorFormat } 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';
@@ -72,33 +72,28 @@ type PublicContext = CommonProperties & {
      */
     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 PrivateContext = Context<{}>;
 type ComputedContext = Readonly<{
     /**
+     * @computed
      * Whether the color picker is in RTL mode
      */
     isRtl: boolean;
     /**
+     * @computed
      * Whether the color picker is interactive
      */
     isInteractive: boolean;
     /**
+     * @computed
      * The color value as a Color object
      */
     valueAsColor: Color;
+    /**
+     * @computed
+     * Whether the color picker is disabled
+     */
+    isDisabled: boolean;
 }>;
 type UserDefinedContext = RequiredBy<PublicContext, "id">;
 type MachineContext = PublicContext & PrivateContext & ComputedContext;
@@ -107,7 +102,7 @@ type MachineState = {
 };
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type PublicApi<T extends PropTypes = PropTypes> = {
+type MachineApi<T extends PropTypes = PropTypes> = {
     /**
      * Whether the color picker is being dragged
      */
@@ -158,8 +153,8 @@ type PublicApi<T extends PropTypes = PropTypes> = {
     getSwatchProps(props: ColorSwatchProps): T["element"];
 };
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T>;
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-export { ColorAreaProps, ColorChannelInputProps, ColorChannelProps, ColorSwatchProps, UserDefinedContext as Context, PublicApi, anatomy, connect, machine };
+export { MachineApi as Api, ColorAreaProps, ColorChannelInputProps, ColorChannelProps, ColorSwatchProps, UserDefinedContext as Context, anatomy, connect, machine };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 import { Orientation, RequiredBy, PropTypes, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
-import { ColorChannel, Color, ColorFormat, ColorAxes } from '@zag-js/color-utils';
+import { ColorChannel, Color, ColorFormat } 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';
@@ -72,33 +72,28 @@ type PublicContext = CommonProperties & {
      */
     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 PrivateContext = Context<{}>;
 type ComputedContext = Readonly<{
     /**
+     * @computed
      * Whether the color picker is in RTL mode
      */
     isRtl: boolean;
     /**
+     * @computed
      * Whether the color picker is interactive
      */
     isInteractive: boolean;
     /**
+     * @computed
      * The color value as a Color object
      */
     valueAsColor: Color;
+    /**
+     * @computed
+     * Whether the color picker is disabled
+     */
+    isDisabled: boolean;
 }>;
 type UserDefinedContext = RequiredBy<PublicContext, "id">;
 type MachineContext = PublicContext & PrivateContext & ComputedContext;
@@ -107,7 +102,7 @@ type MachineState = {
 };
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type PublicApi<T extends PropTypes = PropTypes> = {
+type MachineApi<T extends PropTypes = PropTypes> = {
     /**
      * Whether the color picker is being dragged
      */
@@ -158,8 +153,8 @@ type PublicApi<T extends PropTypes = PropTypes> = {
     getSwatchProps(props: ColorSwatchProps): T["element"];
 };
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T>;
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-export { ColorAreaProps, ColorChannelInputProps, ColorChannelProps, ColorSwatchProps, UserDefinedContext as Context, PublicApi, anatomy, connect, machine };
+export { MachineApi as Api, ColorAreaProps, ColorChannelInputProps, ColorChannelProps, ColorSwatchProps, UserDefinedContext as Context, anatomy, connect, machine };

package/dist/index.js

@@ -165,6 +165,8 @@ function getChannelDisplayColor(color, channel) {
 
 // src/utils/get-channel-input-value.ts
 function getChannelInputValue(color, channel) {
+  if (channel == null)
+    return;
   switch (channel) {
     case "hex":
       return color.toString("hex");
@@ -407,7 +409,7 @@ var getSliderBgImage = (ctx, props) => {
 function connect(state, send, normalize) {
   const valueAsColor = state.context.valueAsColor;
   const value = state.context.value;
-  const isDisabled = state.context.disabled;
+  const isDisabled = state.context.isDisabled;
   const isInteractive = state.context.isInteractive;
   const isDragging = state.matches("dragging");
   const channels = valueAsColor.getColorChannels();
@@ -782,15 +784,18 @@ function machine(userContext) {
       initial: "idle",
       context: {
         dir: "ltr",
+        value: "#D9D9D9",
+        disabled: false,
+        ...ctx,
         activeId: null,
         activeChannel: null,
         activeOrientation: null,
-        value: "#D9D9D9",
-        ...ctx
+        fieldsetDisabled: false
       },
       computed: {
         isRtl: (ctx2) => ctx2.dir === "rtl",
-        isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readOnly),
+        isDisabled: (ctx2) => !!ctx2.disabled || ctx2.fieldsetDisabled,
+        isInteractive: (ctx2) => !(ctx2.isDisabled || ctx2.readOnly),
         valueAsColor: (ctx2) => (0, import_color_utils3.parseColor)(ctx2.value)
       },
       on: {
@@ -800,7 +805,7 @@ function machine(userContext) {
       },
       activities: ["trackFormControl"],
       watch: {
-        value: ["syncInputElements", "invokeOnChange"]
+        value: ["syncInputElements"]
       },
       states: {
         idle: {
@@ -937,8 +942,8 @@ function machine(userContext) {
         trackFormControl(ctx2, _evt, { send, initialContext }) {
           const inputEl = dom.getHiddenInputEl(ctx2);
           return (0, import_form_utils.trackFormControl)(inputEl, {
-            onFieldsetDisabled() {
-              ctx2.disabled = true;
+            onFieldsetDisabledChange(disabled) {
+              ctx2.fieldsetDisabled = disabled;
             },
             onFormReset() {
               send({ type: "VALUE.SET", value: initialContext.value, src: "form.reset" });
@@ -971,7 +976,7 @@ function machine(userContext) {
           picker.open().then(({ sRGBHex }) => {
             const format = ctx2.valueAsColor.getColorSpace();
             const color = (0, import_color_utils3.parseColor)(sRGBHex).toFormat(format);
-            setColor(ctx2, color);
+            set.value(ctx2, color);
             ctx2.onChangeEnd?.({ value: ctx2.value, valueAsColor: color });
           }).catch(() => void 0);
         },
@@ -998,7 +1003,7 @@ function machine(userContext) {
           const color = getColorFromPoint(percent.x, percent.y);
           if (!color)
             return;
-          setColor(ctx2, color);
+          set.value(ctx2, color);
         },
         setChannelColorFromPoint(ctx2, evt) {
           const channel = evt.channel || ctx2.activeId;
@@ -1011,90 +1016,80 @@ function machine(userContext) {
           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);
-          setColor(ctx2, newColor);
+          set.value(ctx2, newColor);
         },
         setValue(ctx2, evt) {
-          setColor(ctx2, evt.value);
+          set.value(ctx2, evt.value);
         },
         syncInputElements(ctx2) {
           const inputs = dom.getChannelInputEls(ctx2);
           inputs.forEach((input) => {
             const channel = input.dataset.channel;
-            if (!channel)
-              return;
-            input.value = getChannelInputValue(ctx2.valueAsColor, channel);
+            dom.setValue(input, getChannelInputValue(ctx2.valueAsColor, channel));
           });
-          const hiddenInput = dom.getHiddenInputEl(ctx2);
-          if (!hiddenInput)
-            return;
-          hiddenInput.value = ctx2.value;
+          dom.setValue(dom.getHiddenInputEl(ctx2), ctx2.value);
+        },
+        invokeOnChangeEnd(ctx2) {
+          invoke.changeEnd(ctx2);
         },
         setChannelColorFromInput(ctx2, evt) {
           const { channel, isTextField, value } = evt;
           try {
             const format = ctx2.valueAsColor.getColorSpace();
             const newColor = isTextField ? (0, import_color_utils3.parseColor)(value).toFormat(format) : ctx2.valueAsColor.withChannelValue(channel, value);
-            setColor(ctx2, newColor);
+            set.value(ctx2, newColor);
           } catch {
-            const input = dom.getChannelInputEl(ctx2, channel);
-            if (!input)
-              return;
-            input.value = getChannelInputValue(ctx2.valueAsColor, channel);
+            const inputEl = dom.getChannelInputEl(ctx2, channel);
+            dom.setValue(inputEl, getChannelInputValue(ctx2.valueAsColor, channel));
           }
         },
         incrementChannel(ctx2, evt) {
           const { minValue, maxValue, step } = ctx2.valueAsColor.getChannelRange(evt.channel);
           const channelValue = ctx2.valueAsColor.getChannelValue(evt.channel);
           const value = (0, import_numeric_range2.snapValueToStep)(channelValue + evt.step, minValue, maxValue, step);
-          const newColor = ctx2.valueAsColor.withChannelValue(evt.channel, (0, import_numeric_range2.clampValue)(value, minValue, maxValue));
-          setColor(ctx2, newColor);
+          const color = ctx2.valueAsColor.withChannelValue(evt.channel, (0, import_numeric_range2.clampValue)(value, minValue, maxValue));
+          set.value(ctx2, color);
         },
         decrementChannel(ctx2, evt) {
           const { minValue, maxValue, step } = ctx2.valueAsColor.getChannelRange(evt.channel);
           const channelValue = ctx2.valueAsColor.getChannelValue(evt.channel);
           const value = (0, import_numeric_range2.snapValueToStep)(channelValue - evt.step, minValue, maxValue, step);
-          const newColor = ctx2.valueAsColor.withChannelValue(evt.channel, (0, import_numeric_range2.clampValue)(value, minValue, maxValue));
-          setColor(ctx2, newColor);
+          const color = ctx2.valueAsColor.withChannelValue(evt.channel, (0, import_numeric_range2.clampValue)(value, minValue, maxValue));
+          set.value(ctx2, color);
         },
         incrementXChannel(ctx2, evt) {
           const { xChannel, yChannel } = evt.channel;
           const { incrementX } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
-          const newColor = ctx2.valueAsColor.withChannelValue(xChannel, incrementX(evt.step));
-          setColor(ctx2, newColor);
+          const color = ctx2.valueAsColor.withChannelValue(xChannel, incrementX(evt.step));
+          set.value(ctx2, color);
         },
         decrementXChannel(ctx2, evt) {
           const { xChannel, yChannel } = evt.channel;
           const { decrementX } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
-          const newColor = ctx2.valueAsColor.withChannelValue(xChannel, decrementX(evt.step));
-          setColor(ctx2, newColor);
+          const color = ctx2.valueAsColor.withChannelValue(xChannel, decrementX(evt.step));
+          set.value(ctx2, color);
         },
         incrementYChannel(ctx2, evt) {
           const { xChannel, yChannel } = evt.channel;
           const { incrementY } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
-          const newColor = ctx2.valueAsColor.withChannelValue(yChannel, incrementY(evt.step));
-          setColor(ctx2, newColor);
+          const color = ctx2.valueAsColor.withChannelValue(yChannel, incrementY(evt.step));
+          set.value(ctx2, color);
         },
         decrementYChannel(ctx2, evt) {
           const { xChannel, yChannel } = evt.channel;
           const { decrementY } = getChannelDetails(ctx2.valueAsColor, xChannel, yChannel);
-          const newColor = ctx2.valueAsColor.withChannelValue(yChannel, decrementY(evt.step));
-          setColor(ctx2, newColor);
+          const color = ctx2.valueAsColor.withChannelValue(yChannel, decrementY(evt.step));
+          set.value(ctx2, color);
         },
         setChannelToMax(ctx2, evt) {
           const { maxValue } = ctx2.valueAsColor.getChannelRange(evt.channel);
-          const newColor = ctx2.valueAsColor.withChannelValue(evt.channel, maxValue);
-          setColor(ctx2, newColor);
+          const color = ctx2.valueAsColor.withChannelValue(evt.channel, maxValue);
+          set.value(ctx2, color);
         },
         setChannelToMin(ctx2, evt) {
           const { minValue } = ctx2.valueAsColor.getChannelRange(evt.channel);
-          const newColor = ctx2.valueAsColor.withChannelValue(evt.channel, minValue);
-          setColor(ctx2, newColor);
-        },
-        invokeOnChangeEnd(ctx2) {
-          ctx2.onChangeEnd?.({ value: ctx2.value, valueAsColor: ctx2.valueAsColor });
-        },
-        invokeOnChange(ctx2) {
-          ctx2.onChange?.({ value: ctx2.value, valueAsColor: ctx2.valueAsColor });
+          const color = ctx2.valueAsColor.withChannelValue(evt.channel, minValue);
+          set.value(ctx2, color);
         },
         focusAreaThumb(ctx2) {
           (0, import_dom_query3.raf)(() => {
@@ -1110,8 +1105,23 @@ function machine(userContext) {
     }
   );
 }
-var setColor = (ctx, color) => {
-  ctx.value = color.toString("css");
+var getDetails = (ctx) => ({
+  value: ctx.value,
+  valueAsColor: ctx.valueAsColor
+});
+var invoke = {
+  changeEnd(ctx) {
+    ctx.onChangeEnd?.(getDetails(ctx));
+  },
+  change(ctx) {
+    ctx.onChange?.(getDetails(ctx));
+  }
+};
+var set = {
+  value(ctx, color) {
+    ctx.value = color.toString("css");
+    invoke.change(ctx);
+  }
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {