@zag-js/color-picker 2.0.0-next.1 → 2.0.0-next.3

package/dist/color-picker.connect.js

@@ -126,9 +126,7 @@ function connect(service, normalize) {
     inline: !!prop("inline"),
     setOpen(nextOpen) {
       if (prop("inline")) return;
-      const open2 = state.hasTag("open");
-      if (open2 === nextOpen) return;
-      send({ type: nextOpen ? "OPEN" : "CLOSE" });
+      send({ type: nextOpen ? "OPEN" : "CLOSE", replaces: "open" });
     },
     setValue(value2) {
       send({ type: "VALUE.SET", value: (0, import_color_utils.normalizeColor)(value2), src: "set-color" });
@@ -361,6 +359,7 @@ function connect(service, normalize) {
         "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
         "data-readonly": (0, import_dom_query2.dataAttr)(readOnly),
         role: "slider",
+        "aria-disabled": (0, import_dom_query2.ariaAttr)(disabled),
         "aria-valuemin": 0,
         "aria-valuemax": 100,
         "aria-valuenow": xValue,
@@ -518,7 +517,7 @@ function connect(service, normalize) {
         "data-channel": channel,
         "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
         "data-orientation": orientation,
-        "aria-disabled": (0, import_dom_query2.dataAttr)(disabled),
+        "aria-disabled": (0, import_dom_query2.ariaAttr)(disabled),
         "aria-orientation": orientation,
         "aria-valuemax": channelRange.maxValue,
         "aria-valuemin": channelRange.minValue,

package/dist/color-picker.connect.mjs

@@ -9,7 +9,7 @@ import {
   isLeftClick,
   isModifierKey
 } from "@zag-js/dom-query";
-import { dataAttr, query, visuallyHiddenStyle } from "@zag-js/dom-query";
+import { ariaAttr, dataAttr, query, visuallyHiddenStyle } from "@zag-js/dom-query";
 import { getPlacementSide, getPlacementStyles } from "@zag-js/popper";
 import { parts } from "./color-picker.anatomy.mjs";
 import * as dom from "./color-picker.dom.mjs";
@@ -99,9 +99,7 @@ function connect(service, normalize) {
     inline: !!prop("inline"),
     setOpen(nextOpen) {
       if (prop("inline")) return;
-      const open2 = state.hasTag("open");
-      if (open2 === nextOpen) return;
-      send({ type: nextOpen ? "OPEN" : "CLOSE" });
+      send({ type: nextOpen ? "OPEN" : "CLOSE", replaces: "open" });
     },
     setValue(value2) {
       send({ type: "VALUE.SET", value: normalizeColor(value2), src: "set-color" });
@@ -334,6 +332,7 @@ function connect(service, normalize) {
         "data-invalid": dataAttr(invalid),
         "data-readonly": dataAttr(readOnly),
         role: "slider",
+        "aria-disabled": ariaAttr(disabled),
         "aria-valuemin": 0,
         "aria-valuemax": 100,
         "aria-valuenow": xValue,
@@ -491,7 +490,7 @@ function connect(service, normalize) {
         "data-channel": channel,
         "data-disabled": dataAttr(disabled),
         "data-orientation": orientation,
-        "aria-disabled": dataAttr(disabled),
+        "aria-disabled": ariaAttr(disabled),
         "aria-orientation": orientation,
         "aria-valuemax": channelRange.maxValue,
         "aria-valuemin": channelRange.minValue,

package/dist/color-picker.types.d.mts

@@ -5,7 +5,7 @@ import { Service, EventObject, Machine } from '@zag-js/core';
 import { InteractOutsideHandlers, LayerSnapshot } from '@zag-js/dismissable';
 import { PositioningOptions, Placement, PlacementSide } from '@zag-js/popper';
 export { PositioningOptions } from '@zag-js/popper';
-import { RequiredBy, CommonProperties, DirectionProperty, Orientation, PropTypes } from '@zag-js/types';
+import { CommonProperties, DirectionProperty, Orientation, PropTypes } from '@zag-js/types';
 
 type ExtendedColorChannel = ColorChannel | "hex" | "css";
 interface EyeDropper {
@@ -33,23 +33,23 @@ interface OpenChangeDetails {
 interface FormatChangeDetails {
     format: ColorFormat;
 }
-type ElementIds = Partial<{
-    root: string;
-    control: string;
-    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;
-    channelSliderThumb: (id: ColorChannel) => string;
-}>;
+interface ElementIds {
+    root?: string | undefined;
+    control?: string | undefined;
+    trigger?: string | undefined;
+    label?: string | undefined;
+    input?: string | undefined;
+    hiddenInput?: string | undefined;
+    content?: string | undefined;
+    area?: string | undefined;
+    areaGradient?: string | undefined;
+    positioner?: string | undefined;
+    formatSelect?: string | undefined;
+    areaThumb?: string | undefined;
+    channelInput?: ((id: string) => string) | undefined;
+    channelSliderTrack?: ((id: ColorChannel) => string) | undefined;
+    channelSliderThumb?: ((id: ColorChannel) => string) | undefined;
+}
 interface ColorPickerProps extends CommonProperties, DirectionProperty, InteractOutsideHandlers {
     /**
      * The ids of the elements in the color picker. Useful for composition.
@@ -104,7 +104,7 @@ interface ColorPickerProps extends CommonProperties, DirectionProperty, Interact
     /**
      * The initial focus element when the color picker is opened.
      */
-    initialFocusEl?: (() => HTMLElement | null) | undefined;
+    initialFocusEl?: (() => HTMLElement | null) | null | undefined;
     /**
      * The controlled open state of the color picker
      */
@@ -147,7 +147,8 @@ type PropsWithDefault = "defaultFormat" | "defaultValue" | "openAutoFocus" | "di
 type ColorPickerSchema = {
     tag: "open" | "closed" | "dragging" | "focused";
     state: "idle" | "focused" | "open" | "open.idle" | "open.dragging";
-    props: RequiredBy<ColorPickerProps, PropsWithDefault>;
+    props: ColorPickerProps;
+    defaultPropKey: PropsWithDefault;
     computed: {
         disabled: boolean;
         rtl: boolean;

package/dist/color-picker.types.d.ts

@@ -5,7 +5,7 @@ import { Service, EventObject, Machine } from '@zag-js/core';
 import { InteractOutsideHandlers, LayerSnapshot } from '@zag-js/dismissable';
 import { PositioningOptions, Placement, PlacementSide } from '@zag-js/popper';
 export { PositioningOptions } from '@zag-js/popper';
-import { RequiredBy, CommonProperties, DirectionProperty, Orientation, PropTypes } from '@zag-js/types';
+import { CommonProperties, DirectionProperty, Orientation, PropTypes } from '@zag-js/types';
 
 type ExtendedColorChannel = ColorChannel | "hex" | "css";
 interface EyeDropper {
@@ -33,23 +33,23 @@ interface OpenChangeDetails {
 interface FormatChangeDetails {
     format: ColorFormat;
 }
-type ElementIds = Partial<{
-    root: string;
-    control: string;
-    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;
-    channelSliderThumb: (id: ColorChannel) => string;
-}>;
+interface ElementIds {
+    root?: string | undefined;
+    control?: string | undefined;
+    trigger?: string | undefined;
+    label?: string | undefined;
+    input?: string | undefined;
+    hiddenInput?: string | undefined;
+    content?: string | undefined;
+    area?: string | undefined;
+    areaGradient?: string | undefined;
+    positioner?: string | undefined;
+    formatSelect?: string | undefined;
+    areaThumb?: string | undefined;
+    channelInput?: ((id: string) => string) | undefined;
+    channelSliderTrack?: ((id: ColorChannel) => string) | undefined;
+    channelSliderThumb?: ((id: ColorChannel) => string) | undefined;
+}
 interface ColorPickerProps extends CommonProperties, DirectionProperty, InteractOutsideHandlers {
     /**
      * The ids of the elements in the color picker. Useful for composition.
@@ -104,7 +104,7 @@ interface ColorPickerProps extends CommonProperties, DirectionProperty, Interact
     /**
      * The initial focus element when the color picker is opened.
      */
-    initialFocusEl?: (() => HTMLElement | null) | undefined;
+    initialFocusEl?: (() => HTMLElement | null) | null | undefined;
     /**
      * The controlled open state of the color picker
      */
@@ -147,7 +147,8 @@ type PropsWithDefault = "defaultFormat" | "defaultValue" | "openAutoFocus" | "di
 type ColorPickerSchema = {
     tag: "open" | "closed" | "dragging" | "focused";
     state: "idle" | "focused" | "open" | "open.idle" | "open.dragging";
-    props: RequiredBy<ColorPickerProps, PropsWithDefault>;
+    props: ColorPickerProps;
+    defaultPropKey: PropsWithDefault;
     computed: {
         disabled: boolean;
         rtl: boolean;

package/dist/utils/get-area-format.js

@@ -26,7 +26,6 @@ module.exports = __toCommonJS(get_area_format_exports);
 function getAreaFormat(format) {
   if (format.startsWith("hsl")) return "hsla";
   if (format.startsWith("hsb")) return "hsba";
-  if (format.startsWith("rgb")) return "rgba";
   if (format === "oklab") return "hsba";
   if (format === "oklch") return "hsba";
   return "hsba";

package/dist/utils/get-area-format.mjs

@@ -2,7 +2,6 @@
 function getAreaFormat(format) {
   if (format.startsWith("hsl")) return "hsla";
   if (format.startsWith("hsb")) return "hsba";
-  if (format.startsWith("rgb")) return "rgba";
   if (format === "oklab") return "hsba";
   if (format === "oklch") return "hsba";
   return "hsba";

package/dist/utils/get-slider-background.js

@@ -35,7 +35,6 @@ function getSliderBackgroundDirection(orientation, dir) {
 var getSliderBackground = (props) => {
   const { channel, value, dir, orientation } = props;
   const bgDirection = getSliderBackgroundDirection(orientation, dir);
-  const { minValue, maxValue } = value.getChannelRange(channel);
   const fmt = value.getFormat();
   switch (channel) {
     case "hue":
@@ -46,6 +45,7 @@ var getSliderBackground = (props) => {
       }
       return `linear-gradient(to ${bgDirection}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;
     case "lightness": {
+      const { minValue, maxValue } = value.getChannelRange(channel);
       let start = value.withChannelValue(channel, minValue).toString("css");
       let middle = value.withChannelValue(channel, (maxValue - minValue) / 2).toString("css");
       let end = value.withChannelValue(channel, maxValue).toString("css");
@@ -60,6 +60,7 @@ var getSliderBackground = (props) => {
     case "a":
     case "b":
     case "chroma": {
+      const { minValue, maxValue } = value.getChannelRange(channel);
       let start = value.withChannelValue(channel, minValue).toString("css");
       let end = value.withChannelValue(channel, maxValue).toString("css");
       if (fmt === "oklab" && (channel === "a" || channel === "b")) {

package/dist/utils/get-slider-background.mjs

@@ -11,7 +11,6 @@ function getSliderBackgroundDirection(orientation, dir) {
 var getSliderBackground = (props) => {
   const { channel, value, dir, orientation } = props;
   const bgDirection = getSliderBackgroundDirection(orientation, dir);
-  const { minValue, maxValue } = value.getChannelRange(channel);
   const fmt = value.getFormat();
   switch (channel) {
     case "hue":
@@ -22,6 +21,7 @@ var getSliderBackground = (props) => {
       }
       return `linear-gradient(to ${bgDirection}, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%)`;
     case "lightness": {
+      const { minValue, maxValue } = value.getChannelRange(channel);
       let start = value.withChannelValue(channel, minValue).toString("css");
       let middle = value.withChannelValue(channel, (maxValue - minValue) / 2).toString("css");
       let end = value.withChannelValue(channel, maxValue).toString("css");
@@ -36,6 +36,7 @@ var getSliderBackground = (props) => {
     case "a":
     case "b":
     case "chroma": {
+      const { minValue, maxValue } = value.getChannelRange(channel);
       let start = value.withChannelValue(channel, minValue).toString("css");
       let end = value.withChannelValue(channel, maxValue).toString("css");
       if (fmt === "oklab" && (channel === "a" || channel === "b")) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/color-picker",
-  "version": "2.0.0-next.1",
+  "version": "2.0.0-next.3",
   "description": "Core logic for the color-picker widget implemented as a state machine",
   "keywords": [
     "js",
@@ -30,14 +30,14 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "2.0.0-next.1",
-    "@zag-js/anatomy": "2.0.0-next.1",
-    "@zag-js/dom-query": "2.0.0-next.1",
-    "@zag-js/dismissable": "2.0.0-next.1",
-    "@zag-js/utils": "2.0.0-next.1",
-    "@zag-js/color-utils": "2.0.0-next.1",
-    "@zag-js/popper": "2.0.0-next.1",
-    "@zag-js/types": "2.0.0-next.1"
+    "@zag-js/core": "2.0.0-next.3",
+    "@zag-js/anatomy": "2.0.0-next.3",
+    "@zag-js/dom-query": "2.0.0-next.3",
+    "@zag-js/dismissable": "2.0.0-next.3",
+    "@zag-js/utils": "2.0.0-next.3",
+    "@zag-js/color-utils": "2.0.0-next.3",
+    "@zag-js/popper": "2.0.0-next.3",
+    "@zag-js/types": "2.0.0-next.3"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
@@ -70,7 +70,7 @@
   },
   "scripts": {
     "build": "tsup",
-    "lint": "eslint src",
+    "lint": "oxlint src",
     "typecheck": "tsc --noEmit"
   }
 }