@zag-js/color-picker 0.77.0 → 0.78.0

package/dist/index.d.mts

@@ -75,6 +75,10 @@ interface PublicContext extends CommonProperties, DirectionProperty, InteractOut
      * Whether the color picker is required
      */
     required?: boolean | undefined;
+    /**
+     * Whether the color picker is invalid
+     */
+    invalid?: boolean | undefined;
     /**
      * Handler that is called when the value changes, as the user drags.
      */
@@ -121,6 +125,11 @@ interface PublicContext extends CommonProperties, DirectionProperty, InteractOut
      * @default false
      */
     closeOnSelect?: boolean | undefined;
+    /**
+     * Whether to auto focus the color picker when it is opened
+     * @default true
+     */
+    openAutoFocus?: boolean | undefined;
 }
 interface PrivateContext {
 }

package/dist/index.d.ts

@@ -75,6 +75,10 @@ interface PublicContext extends CommonProperties, DirectionProperty, InteractOut
      * Whether the color picker is required
      */
     required?: boolean | undefined;
+    /**
+     * Whether the color picker is invalid
+     */
+    invalid?: boolean | undefined;
     /**
      * Handler that is called when the value changes, as the user drags.
      */
@@ -121,6 +125,11 @@ interface PublicContext extends CommonProperties, DirectionProperty, InteractOut
      * @default false
      */
     closeOnSelect?: boolean | undefined;
+    /**
+     * Whether to auto focus the color picker when it is opened
+     * @default true
+     */
+    openAutoFocus?: boolean | undefined;
 }
 interface PrivateContext {
 }

package/dist/index.js

@@ -274,6 +274,7 @@ function connect(state, send, normalize) {
         id: dom.getRootId(state.context),
         "data-disabled": domQuery.dataAttr(disabled),
         "data-readonly": domQuery.dataAttr(state.context.readOnly),
+        "data-invalid": domQuery.dataAttr(state.context.invalid),
         style: {
           "--value": value.toString("css")
         }
@@ -287,6 +288,7 @@ function connect(state, send, normalize) {
         htmlFor: dom.getHiddenInputId(state.context),
         "data-disabled": domQuery.dataAttr(disabled),
         "data-readonly": domQuery.dataAttr(state.context.readOnly),
+        "data-invalid": domQuery.dataAttr(state.context.invalid),
         "data-focus": domQuery.dataAttr(focused),
         onClick(event) {
           event.preventDefault();
@@ -302,6 +304,7 @@ function connect(state, send, normalize) {
         dir: state.context.dir,
         "data-disabled": domQuery.dataAttr(disabled),
         "data-readonly": domQuery.dataAttr(state.context.readOnly),
+        "data-invalid": domQuery.dataAttr(state.context.invalid),
         "data-state": open ? "open" : "closed",
         "data-focus": domQuery.dataAttr(focused)
       });
@@ -317,6 +320,7 @@ function connect(state, send, normalize) {
         "aria-labelledby": dom.getLabelId(state.context),
         "data-disabled": domQuery.dataAttr(disabled),
         "data-readonly": domQuery.dataAttr(state.context.readOnly),
+        "data-invalid": domQuery.dataAttr(state.context.invalid),
         "data-placement": currentPlacement,
         "aria-expanded": domQuery.dataAttr(open),
         "data-state": open ? "open" : "closed",
@@ -372,6 +376,9 @@ function connect(state, send, normalize) {
         ...parts.area.attrs,
         id: dom.getAreaId(state.context),
         role: "group",
+        "data-invalid": domQuery.dataAttr(state.context.invalid),
+        "data-disabled": domQuery.dataAttr(disabled),
+        "data-readonly": domQuery.dataAttr(state.context.readOnly),
         onPointerDown(event) {
           if (!interactive) return;
           if (!domEvent.isLeftClick(event)) return;
@@ -399,6 +406,9 @@ function connect(state, send, normalize) {
       return normalize.element({
         ...parts.areaBackground.attrs,
         id: dom.getAreaGradientId(state.context),
+        "data-invalid": domQuery.dataAttr(state.context.invalid),
+        "data-disabled": domQuery.dataAttr(disabled),
+        "data-readonly": domQuery.dataAttr(state.context.readOnly),
         style: {
           position: "relative",
           touchAction: "none",
@@ -414,12 +424,15 @@ function connect(state, send, normalize) {
       const yPercent = 1 - areaValue.getChannelValuePercent(yChannel);
       const xValue = areaValue.getChannelValue(xChannel);
       const yValue = areaValue.getChannelValue(yChannel);
+      const color = areaValue.withChannelValue("alpha", 1).toString("css");
       return normalize.element({
         ...parts.areaThumb.attrs,
         id: dom.getAreaThumbId(state.context),
         dir: state.context.dir,
         tabIndex: disabled ? void 0 : 0,
         "data-disabled": domQuery.dataAttr(disabled),
+        "data-invalid": domQuery.dataAttr(state.context.invalid),
+        "data-readonly": domQuery.dataAttr(state.context.readOnly),
         role: "slider",
         "aria-valuemin": 0,
         "aria-valuemax": 100,
@@ -434,7 +447,8 @@ function connect(state, send, normalize) {
           transform: "translate(-50%, -50%)",
           touchAction: "none",
           forcedColorAdjust: "none",
-          background: areaValue.withChannelValue("alpha", 1).toString("css")
+          "--color": color,
+          background: color
         },
         onFocus() {
           if (!interactive) return;
@@ -645,6 +659,8 @@ function connect(state, send, normalize) {
         autoComplete: "off",
         disabled,
         "data-disabled": domQuery.dataAttr(disabled),
+        "data-invalid": domQuery.dataAttr(state.context.invalid),
+        "data-readonly": domQuery.dataAttr(state.context.readOnly),
         readOnly: state.context.readOnly,
         defaultValue: getChannelValue(value, channel),
         min: channelRange?.minValue,
@@ -688,6 +704,7 @@ function connect(state, send, normalize) {
         type: "text",
         disabled,
         name: state.context.name,
+        tabIndex: -1,
         readOnly: state.context.readOnly,
         required: state.context.required,
         id: dom.getHiddenInputId(state.context),
@@ -702,6 +719,8 @@ function connect(state, send, normalize) {
         dir: state.context.dir,
         disabled,
         "data-disabled": domQuery.dataAttr(disabled),
+        "data-invalid": domQuery.dataAttr(state.context.invalid),
+        "data-readonly": domQuery.dataAttr(state.context.readOnly),
         "aria-label": "Pick a color from the screen",
         onClick() {
           if (!interactive) return;
@@ -732,6 +751,7 @@ function connect(state, send, normalize) {
           send({ type: "SWATCH_TRIGGER.CLICK", value: swatchState.value });
         },
         style: {
+          "--color": swatchState.valueAsString,
           position: "relative"
         }
       });
@@ -747,14 +767,16 @@ function connect(state, send, normalize) {
     getSwatchProps(props) {
       const { respectAlpha = true } = props;
       const swatchState = getSwatchTriggerState(props);
+      const color = swatchState.value.toString(respectAlpha ? "css" : "hex");
       return normalize.element({
         ...parts.swatch.attrs,
         dir: state.context.dir,
         "data-state": swatchState.checked ? "checked" : "unchecked",
         "data-value": swatchState.valueAsString,
         style: {
+          "--color": color,
           position: "relative",
-          background: swatchState.value.toString(respectAlpha ? "css" : "hex")
+          background: color
         }
       });
     },
@@ -814,6 +836,7 @@ function machine(userContext) {
         format: "rgba",
         disabled: false,
         closeOnSelect: false,
+        openAutoFocus: true,
         ...ctx,
         activeId: null,
         activeChannel: null,
@@ -853,6 +876,9 @@ function machine(userContext) {
         },
         "EYEDROPPER.CLICK": {
           actions: ["openEyeDropper"]
+        },
+        "SWATCH_TRIGGER.CLICK": {
+          actions: ["setValue"]
         }
       },
       states: {
@@ -1299,6 +1325,7 @@ function machine(userContext) {
           });
         },
         setInitialFocus(ctx2) {
+          if (!ctx2.openAutoFocus) return;
           domQuery.raf(() => {
             const element = domQuery.getInitialFocus({
               root: dom.getContentEl(ctx2),

package/dist/index.mjs

@@ -272,6 +272,7 @@ function connect(state, send, normalize) {
         id: dom.getRootId(state.context),
         "data-disabled": dataAttr(disabled),
         "data-readonly": dataAttr(state.context.readOnly),
+        "data-invalid": dataAttr(state.context.invalid),
         style: {
           "--value": value.toString("css")
         }
@@ -285,6 +286,7 @@ function connect(state, send, normalize) {
         htmlFor: dom.getHiddenInputId(state.context),
         "data-disabled": dataAttr(disabled),
         "data-readonly": dataAttr(state.context.readOnly),
+        "data-invalid": dataAttr(state.context.invalid),
         "data-focus": dataAttr(focused),
         onClick(event) {
           event.preventDefault();
@@ -300,6 +302,7 @@ function connect(state, send, normalize) {
         dir: state.context.dir,
         "data-disabled": dataAttr(disabled),
         "data-readonly": dataAttr(state.context.readOnly),
+        "data-invalid": dataAttr(state.context.invalid),
         "data-state": open ? "open" : "closed",
         "data-focus": dataAttr(focused)
       });
@@ -315,6 +318,7 @@ function connect(state, send, normalize) {
         "aria-labelledby": dom.getLabelId(state.context),
         "data-disabled": dataAttr(disabled),
         "data-readonly": dataAttr(state.context.readOnly),
+        "data-invalid": dataAttr(state.context.invalid),
         "data-placement": currentPlacement,
         "aria-expanded": dataAttr(open),
         "data-state": open ? "open" : "closed",
@@ -370,6 +374,9 @@ function connect(state, send, normalize) {
         ...parts.area.attrs,
         id: dom.getAreaId(state.context),
         role: "group",
+        "data-invalid": dataAttr(state.context.invalid),
+        "data-disabled": dataAttr(disabled),
+        "data-readonly": dataAttr(state.context.readOnly),
         onPointerDown(event) {
           if (!interactive) return;
           if (!isLeftClick(event)) return;
@@ -397,6 +404,9 @@ function connect(state, send, normalize) {
       return normalize.element({
         ...parts.areaBackground.attrs,
         id: dom.getAreaGradientId(state.context),
+        "data-invalid": dataAttr(state.context.invalid),
+        "data-disabled": dataAttr(disabled),
+        "data-readonly": dataAttr(state.context.readOnly),
         style: {
           position: "relative",
           touchAction: "none",
@@ -412,12 +422,15 @@ function connect(state, send, normalize) {
       const yPercent = 1 - areaValue.getChannelValuePercent(yChannel);
       const xValue = areaValue.getChannelValue(xChannel);
       const yValue = areaValue.getChannelValue(yChannel);
+      const color = areaValue.withChannelValue("alpha", 1).toString("css");
       return normalize.element({
         ...parts.areaThumb.attrs,
         id: dom.getAreaThumbId(state.context),
         dir: state.context.dir,
         tabIndex: disabled ? void 0 : 0,
         "data-disabled": dataAttr(disabled),
+        "data-invalid": dataAttr(state.context.invalid),
+        "data-readonly": dataAttr(state.context.readOnly),
         role: "slider",
         "aria-valuemin": 0,
         "aria-valuemax": 100,
@@ -432,7 +445,8 @@ function connect(state, send, normalize) {
           transform: "translate(-50%, -50%)",
           touchAction: "none",
           forcedColorAdjust: "none",
-          background: areaValue.withChannelValue("alpha", 1).toString("css")
+          "--color": color,
+          background: color
         },
         onFocus() {
           if (!interactive) return;
@@ -643,6 +657,8 @@ function connect(state, send, normalize) {
         autoComplete: "off",
         disabled,
         "data-disabled": dataAttr(disabled),
+        "data-invalid": dataAttr(state.context.invalid),
+        "data-readonly": dataAttr(state.context.readOnly),
         readOnly: state.context.readOnly,
         defaultValue: getChannelValue(value, channel),
         min: channelRange?.minValue,
@@ -686,6 +702,7 @@ function connect(state, send, normalize) {
         type: "text",
         disabled,
         name: state.context.name,
+        tabIndex: -1,
         readOnly: state.context.readOnly,
         required: state.context.required,
         id: dom.getHiddenInputId(state.context),
@@ -700,6 +717,8 @@ function connect(state, send, normalize) {
         dir: state.context.dir,
         disabled,
         "data-disabled": dataAttr(disabled),
+        "data-invalid": dataAttr(state.context.invalid),
+        "data-readonly": dataAttr(state.context.readOnly),
         "aria-label": "Pick a color from the screen",
         onClick() {
           if (!interactive) return;
@@ -730,6 +749,7 @@ function connect(state, send, normalize) {
           send({ type: "SWATCH_TRIGGER.CLICK", value: swatchState.value });
         },
         style: {
+          "--color": swatchState.valueAsString,
           position: "relative"
         }
       });
@@ -745,14 +765,16 @@ function connect(state, send, normalize) {
     getSwatchProps(props) {
       const { respectAlpha = true } = props;
       const swatchState = getSwatchTriggerState(props);
+      const color = swatchState.value.toString(respectAlpha ? "css" : "hex");
       return normalize.element({
         ...parts.swatch.attrs,
         dir: state.context.dir,
         "data-state": swatchState.checked ? "checked" : "unchecked",
         "data-value": swatchState.valueAsString,
         style: {
+          "--color": color,
           position: "relative",
-          background: swatchState.value.toString(respectAlpha ? "css" : "hex")
+          background: color
         }
       });
     },
@@ -812,6 +834,7 @@ function machine(userContext) {
         format: "rgba",
         disabled: false,
         closeOnSelect: false,
+        openAutoFocus: true,
         ...ctx,
         activeId: null,
         activeChannel: null,
@@ -851,6 +874,9 @@ function machine(userContext) {
         },
         "EYEDROPPER.CLICK": {
           actions: ["openEyeDropper"]
+        },
+        "SWATCH_TRIGGER.CLICK": {
+          actions: ["setValue"]
         }
       },
       states: {
@@ -1297,6 +1323,7 @@ function machine(userContext) {
           });
         },
         setInitialFocus(ctx2) {
+          if (!ctx2.openAutoFocus) return;
           raf(() => {
             const element = getInitialFocus({
               root: dom.getContentEl(ctx2),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/color-picker",
-  "version": "0.77.0",
+  "version": "0.78.0",
   "description": "Core logic for the color-picker widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,17 +27,17 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.77.0",
-    "@zag-js/anatomy": "0.77.0",
-    "@zag-js/dom-query": "0.77.0",
-    "@zag-js/dismissable": "0.77.0",
-    "@zag-js/dom-event": "0.77.0",
-    "@zag-js/utils": "0.77.0",
-    "@zag-js/form-utils": "0.77.0",
-    "@zag-js/color-utils": "0.77.0",
-    "@zag-js/popper": "0.77.0",
-    "@zag-js/text-selection": "0.77.0",
-    "@zag-js/types": "0.77.0"
+    "@zag-js/core": "0.78.0",
+    "@zag-js/anatomy": "0.78.0",
+    "@zag-js/dom-query": "0.78.0",
+    "@zag-js/dismissable": "0.78.0",
+    "@zag-js/dom-event": "0.78.0",
+    "@zag-js/utils": "0.78.0",
+    "@zag-js/form-utils": "0.78.0",
+    "@zag-js/color-utils": "0.78.0",
+    "@zag-js/popper": "0.78.0",
+    "@zag-js/text-selection": "0.78.0",
+    "@zag-js/types": "0.78.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"