@zag-js/color-picker 0.12.0 → 0.14.0

package/src/color-picker.machine.ts

@@ -1,7 +1,8 @@
-import { type Color, parseColor } from "@zag-js/color-utils"
+import { parseColor, type Color } from "@zag-js/color-utils"
 import { createMachine } from "@zag-js/core"
 import { trackPointerMove } from "@zag-js/dom-event"
 import { raf } from "@zag-js/dom-query"
+import { trackFormControl } from "@zag-js/form-utils"
 import { clampValue, getPercentValue, snapValueToStep } from "@zag-js/numeric-range"
 import { disableTextSelection } from "@zag-js/text-selection"
 import { compact } from "@zag-js/utils"
@@ -24,12 +25,12 @@ export function machine(userContext: UserDefinedContext) {
         activeOrientation: null,
         value: "#D9D9D9",
         ...ctx,
-        valueAsColor: parseColor(ctx.value || "#D9D9D9"),
       },
 
       computed: {
         isRtl: (ctx) => ctx.dir === "rtl",
         isInteractive: (ctx) => !(ctx.disabled || ctx.readOnly),
+        valueAsColor: (ctx) => parseColor(ctx.value),
       },
 
       on: {
@@ -38,10 +39,10 @@ export function machine(userContext: UserDefinedContext) {
         },
       },
 
-      created: ["setValueAsColor"],
+      activities: ["trackFormControl"],
 
       watch: {
-        value: ["setValueAsColor", "syncChannelInputs", "invokeOnChange"],
+        value: ["syncInputElements", "invokeOnChange"],
       },
 
       states: {
@@ -62,6 +63,10 @@ export function machine(userContext: UserDefinedContext) {
               target: "dragging",
               actions: ["setActiveChannel", "setChannelColorFromPoint", "focusChannelThumb"],
             },
+            "CHANNEL_SLIDER.FOCUS": {
+              target: "focused",
+              actions: ["setActiveChannel"],
+            },
             "CHANNEL_INPUT.FOCUS": {
               target: "focused",
               actions: ["setActiveChannel"],
@@ -174,6 +179,17 @@ export function machine(userContext: UserDefinedContext) {
         isTextField: (_ctx, evt) => !!evt.isTextField,
       },
       activities: {
+        trackFormControl(ctx, _evt, { send, initialContext }) {
+          const inputEl = dom.getHiddenInputEl(ctx)
+          return trackFormControl(inputEl, {
+            onFieldsetDisabled() {
+              ctx.disabled = true
+            },
+            onFormReset() {
+              send({ type: "VALUE.SET", value: initialContext.value, src: "form.reset" })
+            },
+          })
+        },
         trackPointerMove(ctx, _evt, { send }) {
           return trackPointerMove(dom.getDoc(ctx), {
             onPointerMove({ point }) {
@@ -224,6 +240,8 @@ export function machine(userContext: UserDefinedContext) {
           const { xChannel, yChannel } = evt.channel || ctx.activeChannel
 
           const percent = dom.getAreaValueFromPoint(ctx, evt.point)
+          if (!percent) return
+
           const { getColorFromPoint } = getChannelDetails(ctx.valueAsColor, xChannel, yChannel)
           const color = getColorFromPoint(percent.x, percent.y)
 
@@ -232,7 +250,9 @@ export function machine(userContext: UserDefinedContext) {
         },
         setChannelColorFromPoint(ctx, evt) {
           const channel = evt.channel || ctx.activeId
+
           const percent = dom.getChannelSliderValueFromPoint(ctx, evt.point, channel)
+          if (!percent) return
 
           const { minValue, maxValue, step } = ctx.valueAsColor.getChannelRange(channel)
           const orientation = ctx.activeOrientation || "horizontal"
@@ -248,21 +268,19 @@ export function machine(userContext: UserDefinedContext) {
         setValue(ctx, evt) {
           setColor(ctx, evt.value)
         },
-        setValueAsColor(ctx) {
-          try {
-            const color = parseColor(ctx.value)
-            if (color.isEqual(ctx.valueAsColor)) return
-            ctx.valueAsColor = color
-          } catch {}
-        },
-        syncChannelInputs(ctx) {
+        syncInputElements(ctx) {
+          // sync channel inputs
           const inputs = dom.getChannelInputEls(ctx)
           inputs.forEach((input) => {
-            const channel = input.getAttribute("data-channel") as ExtendedColorChannel | null
+            const channel = input.dataset.channel as ExtendedColorChannel | null
             if (!channel) return
-            const value = getChannelInputValue(ctx.valueAsColor, channel)
-            input.value = value.toString()
+            input.value = getChannelInputValue(ctx.valueAsColor, channel)
           })
+
+          // sync hidden input
+          const hiddenInput = dom.getHiddenInputEl(ctx)
+          if (!hiddenInput) return
+          hiddenInput.value = ctx.value
         },
         setChannelColorFromInput(ctx, evt) {
           const { channel, isTextField, value } = evt
@@ -358,5 +376,4 @@ export function machine(userContext: UserDefinedContext) {
 
 const setColor = (ctx: MachineContext, color: Color) => {
   ctx.value = color.toString("css")
-  ctx.valueAsColor = color
 }

package/src/color-picker.types.ts

@@ -39,6 +39,8 @@ type ElementIds = Partial<{
   channelSliderThumb(id: ColorChannel): string
 }>
 
+export type { Color, ColorAxes, ColorChannel, ColorFormat, ColorType }
+
 type PublicContext = CommonProperties & {
   /**
    * The ids of the elements in the color picker. Useful for composition.
@@ -68,8 +70,54 @@ 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
+}>
+
+export type UserDefinedContext = RequiredBy<PublicContext, "id">
+
+export type MachineContext = PublicContext & PrivateContext & ComputedContext
+
+export type MachineState = {
+  value: "idle" | "focused" | "dragging"
+}
+
+export type State = S.State<MachineContext, MachineState>
+
+export type Send = S.Send<S.AnyEventObject>
+
 export type PublicApi<T extends PropTypes = PropTypes> = {
   /**
    * Whether the color picker is being dragged
@@ -83,6 +131,10 @@ export 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
    */
@@ -99,7 +151,12 @@ export 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"]
@@ -111,47 +168,3 @@ export 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 color value as a Color object
-   */
-  valueAsColor: Color
-  /**
-   * 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
-}>
-
-export type UserDefinedContext = RequiredBy<PublicContext, "id">
-
-export type MachineContext = PublicContext & PrivateContext & ComputedContext
-
-export type MachineState = {
-  value: "idle" | "focused" | "dragging"
-}
-
-export type State = S.State<MachineContext, MachineState>
-
-export type Send = S.Send<S.AnyEventObject>
-
-export type { Color, ColorAxes, ColorChannel, ColorFormat, ColorType }