@zag-js/color-picker 0.25.0 → 0.27.0

package/src/color-picker.connect.ts

@@ -29,8 +29,6 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
   const isDragging = state.hasTag("dragging")
   const isOpen = state.hasTag("open")
 
-  const channels = value.getChannels()
-
   const getAreaChannels = (props: AreaProps) => {
     const channels = value.getChannels()
     return {
@@ -50,8 +48,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     isOpen,
     valueAsString,
     value,
-    channels,
-    setColor(value) {
+    setValue(value) {
       send({ type: "VALUE.SET", value: normalizeColor(value), src: "set-color" })
     },
     getChannelValue(channel) {
@@ -408,13 +405,13 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
 
       return normalize.input({
         ...parts.channelInput.attrs,
+        dir: state.context.dir,
         type: isTextField ? "text" : "number",
         "data-channel": channel,
         "aria-label": channel,
         disabled: isDisabled,
         "data-disabled": dataAttr(isDisabled),
         readOnly: state.context.readOnly,
-        id: dom.getChannelInputId(state.context, channel),
         defaultValue: getChannelValue(value, channel),
         min: range?.minValue,
         max: range?.maxValue,
@@ -461,6 +458,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
     eyeDropperTriggerProps: normalize.button({
       ...parts.eyeDropperTrigger.attrs,
       type: "button",
+      dir: state.context.dir,
       disabled: isDisabled,
       "data-disabled": dataAttr(isDisabled),
       "aria-label": "Pick a color from the screen",
@@ -481,6 +479,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       return normalize.button({
         ...parts.swatchTrigger.attrs,
         disabled: isDisabled,
+        dir: state.context.dir,
         type: "button",
         "data-value": color.toString("hex"),
         onClick() {
@@ -499,6 +498,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
       const color = colorValue.toFormat(value.getFormat())
       return normalize.element({
         ...parts.swatch.attrs,
+        dir: state.context.dir,
         "data-state": colorValue.isEqual(value) ? "selected" : "unselected",
         "data-value": color.toString("hex"),
         style: {

package/src/color-picker.dom.ts

@@ -20,8 +20,6 @@ export const dom = createScope({
 
   getChannelSliderId: (ctx: Ctx, channel: ColorChannel) =>
     ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`,
-  getChannelInputId: (ctx: Ctx, channel: string) =>
-    ctx.ids?.channelInput?.(channel) ?? `color-picker:${ctx.id}:input:${channel}`,
   getChannelSliderThumbId: (ctx: Ctx, channel: ColorChannel) =>
     ctx.ids?.channelSliderThumb?.(channel) ?? `color-picker:${ctx.id}:slider-thumb:${channel}`,
 
@@ -29,8 +27,12 @@ export const dom = createScope({
   getAreaThumbEl: (ctx: Ctx) => dom.getById(ctx, dom.getAreaThumbId(ctx)),
   getChannelSliderThumbEl: (ctx: Ctx, channel: ColorChannel) =>
     dom.getById(ctx, dom.getChannelSliderThumbId(ctx, channel)),
-  getChannelInputEl: (ctx: Ctx, channel: string) =>
-    dom.getById<HTMLInputElement>(ctx, dom.getChannelInputId(ctx, channel)),
+  getChannelInputEl: (ctx: Ctx, channel: string): HTMLInputElement[] => {
+    return [
+      ...queryAll<HTMLInputElement>(dom.getContentEl(ctx), `input[data-channel="${channel}"]`),
+      ...queryAll<HTMLInputElement>(dom.getControlEl(ctx), `input[data-channel="${channel}"]`),
+    ]
+  },
 
   getHiddenInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),
   getAreaEl: (ctx: Ctx) => dom.getById(ctx, dom.getAreaId(ctx)),

package/src/color-picker.machine.ts

@@ -1,5 +1,5 @@
 import { parseColor, type Color } from "@zag-js/color-utils"
-import { createMachine, guards, ref } from "@zag-js/core"
+import { createMachine } from "@zag-js/core"
 import { trackDismissableElement } from "@zag-js/dismissable"
 import { trackPointerMove } from "@zag-js/dom-event"
 import { raf } from "@zag-js/dom-query"
@@ -18,8 +18,6 @@ import type {
 } from "./color-picker.types"
 import { getChannelValue } from "./utils/get-channel-input-value"
 
-const { stateIn } = guards
-
 export function machine(userContext: UserDefinedContext) {
   const ctx = compact(userContext)
   return createMachine<MachineContext, MachineState>(
@@ -55,7 +53,7 @@ export function machine(userContext: UserDefinedContext) {
       activities: ["trackFormControl"],
 
       watch: {
-        valueAsString: ["syncInputElements"],
+        value: ["syncInputElements"],
         open: ["toggleVisibility"],
       },
 
@@ -63,26 +61,6 @@ export function machine(userContext: UserDefinedContext) {
         "VALUE.SET": {
           actions: ["setValue"],
         },
-        "CHANNEL_INPUT.FOCUS": [
-          {
-            guard: stateIn("idle"),
-            target: "focused",
-            actions: ["setActiveChannel"],
-          },
-          {
-            actions: ["setActiveChannel"],
-          },
-        ],
-        "CHANNEL_INPUT.BLUR": [
-          {
-            guard: stateIn("focused"),
-            target: "idle",
-            actions: ["setChannelColorFromInput"],
-          },
-          {
-            actions: ["setChannelColorFromInput"],
-          },
-        ],
         "CHANNEL_INPUT.CHANGE": {
           actions: ["setChannelColorFromInput"],
         },
@@ -100,6 +78,10 @@ export function machine(userContext: UserDefinedContext) {
               target: "open",
               actions: ["setInitialFocus", "invokeOnOpen"],
             },
+            "CHANNEL_INPUT.FOCUS": {
+              target: "focused",
+              actions: ["setActiveChannel"],
+            },
           },
         },
 
@@ -114,6 +96,13 @@ export function machine(userContext: UserDefinedContext) {
               target: "open",
               actions: ["setInitialFocus", "invokeOnOpen"],
             },
+            "CHANNEL_INPUT.FOCUS": {
+              actions: ["setActiveChannel"],
+            },
+            "CHANNEL_INPUT.BLUR": {
+              target: "idle",
+              actions: ["setChannelColorFromInput"],
+            },
           },
         },
 
@@ -184,6 +173,9 @@ export function machine(userContext: UserDefinedContext) {
             "CHANNEL_SLIDER.END": {
               actions: ["setChannelToMax"],
             },
+            "CHANNEL_INPUT.BLUR": {
+              actions: ["setChannelColorFromInput"],
+            },
             INTERACT_OUTSIDE: [
               {
                 guard: "shouldRestoreFocus",
@@ -367,26 +359,29 @@ export function machine(userContext: UserDefinedContext) {
         },
         setChannelColorFromInput(ctx, evt) {
           const { channel, isTextField, value } = evt
+          const currentAlpha = ctx.value.getChannelValue("alpha")
 
           // handle alpha channel
           if (channel === "alpha") {
-            const newColor = ctx.value.withChannelValue("alpha", parseFloat(value))
+            let valueAsNumber = parseFloat(value)
+            valueAsNumber = Number.isNaN(valueAsNumber) ? currentAlpha : valueAsNumber
+            const newColor = ctx.value.withChannelValue("alpha", valueAsNumber)
             set.value(ctx, newColor)
             return
           }
 
           // handle other text channels
           if (isTextField) {
-            const currentAlpha = ctx.value.getChannelValue("alpha")
-
             const color = tryCatch(
               () => parse(value).withChannelValue("alpha", currentAlpha),
               () => ctx.value,
             )
 
             // set channel input value immediately (in event user types native css color, we need to convert it to the current channel format)
-            const inputEl = dom.getChannelInputEl(ctx, channel)
-            dom.setValue(inputEl, getChannelValue(color, channel))
+            const inputEls = dom.getChannelInputEl(ctx, channel)
+            inputEls.forEach((inputEl) => {
+              dom.setValue(inputEl, getChannelValue(color, channel))
+            })
 
             set.value(ctx, color)
             return
@@ -501,7 +496,6 @@ const invoke = {
 
 const set = {
   value(ctx: MachineContext, color: Color | ColorType | undefined) {
-    sync.inputs(ctx)
     if (!color || ctx.value.isEqual(color)) return
     const currentFormat = ctx.value.getFormat()
     const outputColor = color.toFormat(currentFormat)
@@ -509,7 +503,7 @@ const set = {
       outputColor.outputFormat = ctx.value.outputFormat
     } catch {}
 
-    ctx.value = ref(outputColor) as Color
+    ctx.value = outputColor
     invoke.change(ctx)
   },
 }

package/src/color-picker.parse.ts

@@ -1,14 +1,13 @@
 import { parseColor, type Color } from "@zag-js/color-utils"
-import { ref } from "@zag-js/core"
 
 export const parse = (color: string): Color => {
   const value = parseColor(color)
 
   const colorFormat = value.getFormat()
-  const lockedFormat = colorFormat.startsWith("hsl") ? "hsla" : "hsba"
+  const lockedFormat = colorFormat === "hsla" ? "hsla" : "hsba"
 
   const result = value.toFormat(lockedFormat)
   result.outputFormat = colorFormat
 
-  return ref(result)
+  return result
 }

package/src/color-picker.types.ts

@@ -217,14 +217,10 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
    * The current color value (as a Color object)
    */
   valueAsString: string
-  /**
-   * The current color channels of the color
-   */
-  channels: [ColorChannel, ColorChannel, ColorChannel]
   /**
    * Function to set the color value
    */
-  setColor(value: string | Color): void
+  setValue(value: string | Color): void
   /**
    * Function to set the color value
    */

package/src/utils/get-channel-input-value.ts

@@ -16,7 +16,7 @@ export function getChannelValue(color: Color, channel: ExtendedColorChannel | nu
     return color.getChannelValue(channel).toString()
   }
 
-  const isHSL = color.getFormat() === "hsl"
+  const isHSL = color.getFormat() === "hsla"
 
   switch (channel) {
     case "hue":