@zag-js/color-picker 0.56.1 → 0.58.0

package/src/color-picker.dom.ts

@@ -6,18 +6,18 @@ import type { MachineContext as Ctx } from "./color-picker.types"
 export const dom = createScope({
   getRootId: (ctx: Ctx) => ctx.ids?.root ?? `color-picker:${ctx.id}`,
   getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `color-picker:${ctx.id}:label`,
-  getHiddenInputId: (ctx: Ctx) => `color-picker:${ctx.id}:hidden-input`,
+  getHiddenInputId: (ctx: Ctx) => ctx.ids?.hiddenInput ?? `color-picker:${ctx.id}:hidden-input`,
   getControlId: (ctx: Ctx) => ctx.ids?.control ?? `color-picker:${ctx.id}:control`,
   getTriggerId: (ctx: Ctx) => ctx.ids?.trigger ?? `color-picker:${ctx.id}:trigger`,
   getContentId: (ctx: Ctx) => ctx.ids?.content ?? `color-picker:${ctx.id}:content`,
-  getPositionerId: (ctx: Ctx) => `color-picker:${ctx.id}:positioner`,
-  getFormatSelectId: (ctx: Ctx) => `color-picker:${ctx.id}:format-select`,
+  getPositionerId: (ctx: Ctx) => ctx.ids?.positioner ?? `color-picker:${ctx.id}:positioner`,
+  getFormatSelectId: (ctx: Ctx) => ctx.ids?.formatSelect ?? `color-picker:${ctx.id}:format-select`,
 
   getAreaId: (ctx: Ctx) => ctx.ids?.area ?? `color-picker:${ctx.id}:area`,
   getAreaGradientId: (ctx: Ctx) => ctx.ids?.areaGradient ?? `color-picker:${ctx.id}:area-gradient`,
   getAreaThumbId: (ctx: Ctx) => ctx.ids?.areaThumb ?? `color-picker:${ctx.id}:area-thumb`,
 
-  getChannelSliderId: (ctx: Ctx, channel: ColorChannel) =>
+  getChannelSliderTrackId: (ctx: Ctx, channel: ColorChannel) =>
     ctx.ids?.channelSliderTrack?.(channel) ?? `color-picker:${ctx.id}:slider-track:${channel}`,
   getChannelSliderThumbId: (ctx: Ctx, channel: ColorChannel) =>
     ctx.ids?.channelSliderThumb?.(channel) ?? `color-picker:${ctx.id}:slider-thumb:${channel}`,
@@ -27,9 +27,10 @@ export const dom = createScope({
   getChannelSliderThumbEl: (ctx: Ctx, channel: ColorChannel) =>
     dom.getById(ctx, dom.getChannelSliderThumbId(ctx, channel)),
   getChannelInputEl: (ctx: Ctx, channel: string): HTMLInputElement[] => {
+    const selector = `input[data-channel="${channel}"]`
     return [
-      ...queryAll<HTMLInputElement>(dom.getContentEl(ctx), `input[data-channel="${channel}"]`),
-      ...queryAll<HTMLInputElement>(dom.getControlEl(ctx), `input[data-channel="${channel}"]`),
+      ...queryAll<HTMLInputElement>(dom.getContentEl(ctx), selector),
+      ...queryAll<HTMLInputElement>(dom.getControlEl(ctx), selector),
     ]
   },
   getFormatSelectEl: (ctx: Ctx) => dom.getById<HTMLSelectElement>(ctx, dom.getFormatSelectId(ctx)),
@@ -47,7 +48,7 @@ export const dom = createScope({
   getTriggerEl: (ctx: Ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
   getPositionerEl: (ctx: Ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
   getChannelSliderTrackEl: (ctx: Ctx, channel: ColorChannel) => {
-    return dom.getById(ctx, dom.getChannelSliderId(ctx, channel))
+    return dom.getById(ctx, dom.getChannelSliderTrackId(ctx, channel))
   },
   getChannelSliderValueFromPoint(ctx: Ctx, point: Point, channel: ColorChannel) {
     const trackEl = dom.getChannelSliderTrackEl(ctx, channel)

package/src/color-picker.machine.ts

@@ -193,22 +193,22 @@ export function machine(userContext: UserDefinedContext) {
               actions: ["setActiveChannel"],
             },
             "AREA.ARROW_LEFT": {
-              actions: ["decrementXChannel"],
+              actions: ["decrementAreaXChannel"],
             },
             "AREA.ARROW_RIGHT": {
-              actions: ["incrementXChannel"],
+              actions: ["incrementAreaXChannel"],
             },
             "AREA.ARROW_UP": {
-              actions: ["incrementYChannel"],
+              actions: ["incrementAreaYChannel"],
             },
             "AREA.ARROW_DOWN": {
-              actions: ["decrementYChannel"],
+              actions: ["decrementAreaYChannel"],
             },
             "AREA.PAGE_UP": {
-              actions: ["incrementXChannel"],
+              actions: ["incrementAreaXChannel"],
             },
             "AREA.PAGE_DOWN": {
-              actions: ["decrementXChannel"],
+              actions: ["decrementAreaXChannel"],
             },
             "CHANNEL_SLIDER.ARROW_LEFT": {
               actions: ["decrementChannel"],
@@ -384,11 +384,11 @@ export function machine(userContext: UserDefinedContext) {
             },
           })
         },
-        trackPointerMove(ctx, _evt, { send }) {
+        trackPointerMove(ctx, evt, { send }) {
           return trackPointerMove(dom.getDoc(ctx), {
             onPointerMove({ point }) {
               const type = ctx.activeId === "area" ? "AREA.POINTER_MOVE" : "CHANNEL_SLIDER.POINTER_MOVE"
-              send({ type, point })
+              send({ type, point, format: evt.format })
             },
             onPointerUp() {
               const type = ctx.activeId === "area" ? "AREA.POINTER_UP" : "CHANNEL_SLIDER.POINTER_UP"
@@ -427,19 +427,21 @@ export function machine(userContext: UserDefinedContext) {
           ctx.activeOrientation = null
         },
         setAreaColorFromPoint(ctx, evt) {
+          const normalizedValue = evt.format ? ctx.value.toFormat(evt.format) : ctx.areaValue
           const { xChannel, yChannel } = evt.channel || ctx.activeChannel
 
           const percent = dom.getAreaValueFromPoint(ctx, evt.point)
           if (!percent) return
 
-          const xValue = ctx.areaValue.getChannelPercentValue(xChannel, percent.x)
-          const yValue = ctx.areaValue.getChannelPercentValue(yChannel, 1 - percent.y)
+          const xValue = normalizedValue.getChannelPercentValue(xChannel, percent.x)
+          const yValue = normalizedValue.getChannelPercentValue(yChannel, 1 - percent.y)
 
-          const color = ctx.areaValue.withChannelValue(xChannel, xValue).withChannelValue(yChannel, yValue)
+          const color = normalizedValue.withChannelValue(xChannel, xValue).withChannelValue(yChannel, yValue)
           set.value(ctx, color)
         },
         setChannelColorFromPoint(ctx, evt) {
           const channel = evt.channel || ctx.activeId
+          const normalizedValue = evt.format ? ctx.value.toFormat(evt.format) : ctx.areaValue
 
           const percent = dom.getChannelSliderValueFromPoint(ctx, evt.point, channel)
           if (!percent) return
@@ -447,8 +449,8 @@ export function machine(userContext: UserDefinedContext) {
           const orientation = ctx.activeOrientation || "horizontal"
           const channelPercent = orientation === "horizontal" ? percent.x : percent.y
 
-          const value = ctx.areaValue.getChannelPercentValue(channel, channelPercent)
-          const color = ctx.areaValue.withChannelValue(channel, value)
+          const value = normalizedValue.getChannelPercentValue(channel, channelPercent)
+          const color = normalizedValue.withChannelValue(channel, value)
           set.value(ctx, color)
         },
         setValue(ctx, evt) {
@@ -506,22 +508,22 @@ export function machine(userContext: UserDefinedContext) {
           const color = ctx.value.decrementChannel(evt.channel, evt.step)
           set.value(ctx, color)
         },
-        incrementXChannel(ctx, evt) {
+        incrementAreaXChannel(ctx, evt) {
           const { xChannel } = evt.channel
           const color = ctx.areaValue.incrementChannel(xChannel, evt.step)
           set.value(ctx, color)
         },
-        decrementXChannel(ctx, evt) {
+        decrementAreaXChannel(ctx, evt) {
           const { xChannel } = evt.channel
           const color = ctx.areaValue.decrementChannel(xChannel, evt.step)
           set.value(ctx, color)
         },
-        incrementYChannel(ctx, evt) {
+        incrementAreaYChannel(ctx, evt) {
           const { yChannel } = evt.channel
           const color = ctx.areaValue.incrementChannel(yChannel, evt.step)
           set.value(ctx, color)
         },
-        decrementYChannel(ctx, evt) {
+        decrementAreaYChannel(ctx, evt) {
           const { yChannel } = evt.channel
           const color = ctx.areaValue.decrementChannel(yChannel, evt.step)
           set.value(ctx, color)

package/src/color-picker.props.ts

@@ -30,9 +30,11 @@ export const props = createProps<UserDefinedContext>()([
   "open.controlled",
   "open",
   "positioning",
+  "required",
   "readOnly",
   "value",
 ])
+
 export const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)
 
 export const areaProps = createProps<AreaProps>()(["xChannel", "yChannel"])

package/src/color-picker.types.ts

@@ -1,5 +1,5 @@
 import type { Color, ColorAxes, ColorChannel, ColorFormat, ColorType } from "@zag-js/color-utils"
-import type { StateMachine as S } from "@zag-js/core"
+import type { Machine, StateMachine as S } from "@zag-js/core"
 import type { InteractOutsideHandlers } from "@zag-js/dismissable"
 import type { PositioningOptions } from "@zag-js/popper"
 import type { CommonProperties, DirectionProperty, Orientation, PropTypes, RequiredBy } from "@zag-js/types"
@@ -45,9 +45,12 @@ export type ElementIds = Partial<{
   trigger: string
   label: string
   input: string
+  hiddenInput: string
   content: string
   area: string
   areaGradient: string
+  positioner: string
+  formatSelect: string
   areaThumb: string
   channelInput(id: string): string
   channelSliderTrack(id: ColorChannel): string
@@ -72,6 +75,10 @@ interface PublicContext extends CommonProperties, DirectionProperty, InteractOut
    * Whether the color picker is read-only
    */
   readOnly?: boolean
+  /**
+   * Whether the color picker is required
+   */
+  required?: boolean
   /**
    * Handler that is called when the value changes, as the user drags.
    */
@@ -194,6 +201,8 @@ export type State = S.State<MachineContext, MachineState>
 
 export type Send = S.Send<S.AnyEventObject>
 
+export type Service = Machine<MachineContext, MachineState, S.AnyEventObject>
+
 /* -----------------------------------------------------------------------------
  * Component API
  * -----------------------------------------------------------------------------*/
@@ -203,6 +212,10 @@ export interface ChannelProps {
   orientation?: Orientation
 }
 
+export interface ChannelSliderProps extends ChannelProps {
+  format?: ColorFormat
+}
+
 export interface ChannelInputProps {
   channel: ExtendedColorChannel
   orientation?: Orientation
@@ -271,6 +284,10 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
    * Function to set the color value
    */
   getChannelValue(channel: ColorChannel): string
+  /**
+   * Function to get the formatted and localized value of a specific channel
+   */
+  getChannelValueText(channel: ColorChannel, locale: string): string
   /**
    * Function to set the color value of a specific channel
    */
@@ -308,11 +325,14 @@ export interface MachineApi<T extends PropTypes = PropTypes> {
   getAreaBackgroundProps(props?: AreaProps): T["element"]
   getAreaThumbProps(props?: AreaProps): T["element"]
 
-  getChannelSliderProps(props: ChannelProps): T["element"]
-  getChannelSliderTrackProps(props: ChannelProps): T["element"]
-  getChannelSliderThumbProps(props: ChannelProps): T["element"]
   getChannelInputProps(props: ChannelInputProps): T["input"]
 
+  getChannelSliderProps(props: ChannelSliderProps): T["element"]
+  getChannelSliderTrackProps(props: ChannelSliderProps): T["element"]
+  getChannelSliderThumbProps(props: ChannelSliderProps): T["element"]
+  getChannelSliderLabelProps(props: ChannelProps): T["element"]
+  getChannelSliderValueTextProps(props: ChannelProps): T["element"]
+
   getTransparencyGridProps(props?: TransparencyGridProps): T["element"]
 
   getEyeDropperTriggerProps(): T["button"]

package/src/index.ts

@@ -6,6 +6,7 @@ export { parse } from "./color-picker.parse"
 export type {
   MachineApi as Api,
   AreaProps,
+  ChannelSliderProps,
   ChannelInputProps,
   ChannelProps,
   Color,
@@ -23,4 +24,5 @@ export type {
   SwatchTriggerState,
   TransparencyGridProps,
   ValueChangeDetails,
+  Service,
 } from "./color-picker.types"