@zag-js/color-picker 2.0.0-next.0 → 2.0.0-next.2

package/dist/color-picker.connect.js

@@ -34,6 +34,7 @@ __export(color_picker_connect_exports, {
 });
 module.exports = __toCommonJS(color_picker_connect_exports);
 var import_color_utils = require("@zag-js/color-utils");
+var import_dismissable = require("@zag-js/dismissable");
 var import_dom_query = require("@zag-js/dom-query");
 var import_dom_query2 = require("@zag-js/dom-query");
 var import_popper = require("@zag-js/popper");
@@ -43,8 +44,14 @@ var import_get_channel_display_color = require("./utils/get-channel-display-colo
 var import_get_channel_input_value = require("./utils/get-channel-input-value.js");
 var import_get_gamut_overlay_path = require("./utils/get-gamut-overlay-path.js");
 var import_get_slider_background = require("./utils/get-slider-background.js");
+function getDefaultDevicePixelRatio() {
+  if (typeof globalThis === "undefined") return 1;
+  const dpr = globalThis.devicePixelRatio;
+  return typeof dpr === "number" && Number.isFinite(dpr) ? dpr : 1;
+}
 function connect(service, normalize) {
   const { context, send, prop, computed, state, scope } = service;
+  const layer = context.get("layer");
   const value = context.get("value");
   const format = context.get("format");
   const areaValue = computed("areaValue");
@@ -65,11 +72,6 @@ function connect(service, normalize) {
       yChannel: props.yChannel ?? channels[2]
     };
   };
-  function getDefaultDevicePixelRatio() {
-    if (typeof globalThis === "undefined") return 1;
-    const dpr = globalThis.devicePixelRatio;
-    return typeof dpr === "number" && Number.isFinite(dpr) ? dpr : 1;
-  }
   function resolveGamutOverlay(props = {}) {
     const pixelRatio = props.pixelRatio ?? getDefaultDevicePixelRatio();
     return (0, import_get_gamut_overlay_path.getGamutOverlayData)(stableAreaValue, getAreaChannels(props), format, { pixelRatio });
@@ -78,8 +80,7 @@ function connect(service, normalize) {
   const currentPlacementSide = currentPlacement ? (0, import_popper.getPlacementSide)(currentPlacement) : void 0;
   const popperStyles = (0, import_popper.getPlacementStyles)({
     ...prop("positioning"),
-    placement: currentPlacement,
-    positioned: context.get("positioned")
+    placement: currentPlacement
   });
   function getSwatchTriggerState(props) {
     const color = (0, import_color_utils.normalizeColor)(props.value).toFormat(context.get("format"));
@@ -90,6 +91,29 @@ function connect(service, normalize) {
       disabled: props.disabled || !interactive
     };
   }
+  function getRootState() {
+    return { disabled, readOnly, invalid };
+  }
+  function getTriggerState() {
+    return {
+      open,
+      focused,
+      disabled,
+      invalid,
+      readOnly,
+      placement: currentPlacement,
+      side: currentPlacementSide
+    };
+  }
+  function getContentState() {
+    return {
+      open,
+      nested: !!layer?.nested,
+      hasNested: !!layer?.hasNested,
+      placement: currentPlacement,
+      side: currentPlacementSide
+    };
+  }
   return {
     dragging,
     open,
@@ -128,13 +152,15 @@ function connect(service, normalize) {
       const color = value.withChannelValue("alpha", alphaValue);
       send({ type: "VALUE.SET", value: color, src: "set-alpha" });
     },
+    getRootState,
     getRootProps() {
+      const rootState = getRootState();
       return normalize.element({
         ...import_color_picker.parts.root.attrs(scope.id),
         dir: prop("dir"),
-        "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
-        "data-readonly": (0, import_dom_query2.dataAttr)(readOnly),
-        "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
+        "data-disabled": (0, import_dom_query2.dataAttr)(rootState.disabled),
+        "data-readonly": (0, import_dom_query2.dataAttr)(rootState.readOnly),
+        "data-invalid": (0, import_dom_query2.dataAttr)(rootState.invalid),
         style: {
           "--value": value.toString("css")
         }
@@ -169,24 +195,26 @@ function connect(service, normalize) {
         "data-focus": (0, import_dom_query2.dataAttr)(focused)
       });
     },
+    getTriggerState,
     getTriggerProps() {
+      const triggerState = getTriggerState();
       return normalize.button({
         ...import_color_picker.parts.trigger.attrs(scope.id),
         id: dom.getTriggerId(scope),
         dir: prop("dir"),
-        disabled,
+        disabled: triggerState.disabled,
         "aria-label": `select color. current color is ${valueAsString}`,
         "aria-controls": dom.getContentId(scope),
         "aria-labelledby": dom.getLabelId(scope),
         "aria-haspopup": prop("inline") ? void 0 : "dialog",
-        "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
-        "data-readonly": (0, import_dom_query2.dataAttr)(readOnly),
-        "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
-        "data-placement": currentPlacement,
-        "data-side": currentPlacementSide,
-        "aria-expanded": open,
-        "data-state": open ? "open" : "closed",
-        "data-focus": (0, import_dom_query2.dataAttr)(focused),
+        "data-disabled": (0, import_dom_query2.dataAttr)(triggerState.disabled),
+        "data-readonly": (0, import_dom_query2.dataAttr)(triggerState.readOnly),
+        "data-invalid": (0, import_dom_query2.dataAttr)(triggerState.invalid),
+        "data-placement": triggerState.placement,
+        "data-side": triggerState.side,
+        "aria-expanded": triggerState.open,
+        "data-state": triggerState.open ? "open" : "closed",
+        "data-focus": (0, import_dom_query2.dataAttr)(triggerState.focused),
         type: "button",
         onClick() {
           if (!interactive) return;
@@ -205,20 +233,28 @@ function connect(service, normalize) {
       return normalize.element({
         ...import_color_picker.parts.positioner.attrs(scope.id),
         dir: prop("dir"),
-        style: popperStyles.floating
+        ...(0, import_dismissable.getDismissableLayerAttrs)(layer),
+        style: {
+          ...popperStyles.floating,
+          ...(0, import_dismissable.getDismissableLayerStyle)(layer, { zIndex: true })
+        }
       });
     },
+    getContentState,
     getContentProps() {
+      const contentState = getContentState();
       return normalize.element({
         ...import_color_picker.parts.content.attrs(scope.id),
         id: dom.getContentId(scope),
         dir: prop("dir"),
         role: prop("inline") ? void 0 : "dialog",
         tabIndex: -1,
-        "data-placement": currentPlacement,
-        "data-side": currentPlacementSide,
-        "data-state": open ? "open" : "closed",
-        hidden: !open
+        "data-placement": contentState.placement,
+        "data-side": contentState.side,
+        "data-state": contentState.open ? "open" : "closed",
+        hidden: !contentState.open,
+        ...(0, import_dismissable.getDismissableLayerAttrs)(layer),
+        style: (0, import_dismissable.getDismissableLayerStyle)(layer, { pointerEvents: true })
       });
     },
     getValueTextProps() {
@@ -582,6 +618,7 @@ function connect(service, normalize) {
         onKeyDown(event) {
           if (event.defaultPrevented) return;
           if (!interactive) return;
+          if ((0, import_dom_query.isComposingEvent)(event)) return;
           if (event.key === "Enter") {
             const value2 = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
             send({ type: "CHANNEL_INPUT.CHANGE", channel, value: value2, isTextField });

package/dist/color-picker.connect.mjs

@@ -1,6 +1,14 @@
 // src/color-picker.connect.ts
 import { getColorAreaGradient, isInSrgbGamut, normalizeColor } from "@zag-js/color-utils";
-import { getEventKey, getEventPoint, getEventStep, isLeftClick, isModifierKey } from "@zag-js/dom-query";
+import { getDismissableLayerAttrs, getDismissableLayerStyle } from "@zag-js/dismissable";
+import {
+  getEventKey,
+  getEventPoint,
+  getEventStep,
+  isComposingEvent,
+  isLeftClick,
+  isModifierKey
+} from "@zag-js/dom-query";
 import { dataAttr, query, visuallyHiddenStyle } from "@zag-js/dom-query";
 import { getPlacementSide, getPlacementStyles } from "@zag-js/popper";
 import { parts } from "./color-picker.anatomy.mjs";
@@ -9,8 +17,14 @@ import { getChannelDisplayColor } from "./utils/get-channel-display-color.mjs";
 import { getChannelRange, getChannelValue } from "./utils/get-channel-input-value.mjs";
 import { getGamutOverlayData } from "./utils/get-gamut-overlay-path.mjs";
 import { getSliderBackground } from "./utils/get-slider-background.mjs";
+function getDefaultDevicePixelRatio() {
+  if (typeof globalThis === "undefined") return 1;
+  const dpr = globalThis.devicePixelRatio;
+  return typeof dpr === "number" && Number.isFinite(dpr) ? dpr : 1;
+}
 function connect(service, normalize) {
   const { context, send, prop, computed, state, scope } = service;
+  const layer = context.get("layer");
   const value = context.get("value");
   const format = context.get("format");
   const areaValue = computed("areaValue");
@@ -31,11 +45,6 @@ function connect(service, normalize) {
       yChannel: props.yChannel ?? channels[2]
     };
   };
-  function getDefaultDevicePixelRatio() {
-    if (typeof globalThis === "undefined") return 1;
-    const dpr = globalThis.devicePixelRatio;
-    return typeof dpr === "number" && Number.isFinite(dpr) ? dpr : 1;
-  }
   function resolveGamutOverlay(props = {}) {
     const pixelRatio = props.pixelRatio ?? getDefaultDevicePixelRatio();
     return getGamutOverlayData(stableAreaValue, getAreaChannels(props), format, { pixelRatio });
@@ -44,8 +53,7 @@ function connect(service, normalize) {
   const currentPlacementSide = currentPlacement ? getPlacementSide(currentPlacement) : void 0;
   const popperStyles = getPlacementStyles({
     ...prop("positioning"),
-    placement: currentPlacement,
-    positioned: context.get("positioned")
+    placement: currentPlacement
   });
   function getSwatchTriggerState(props) {
     const color = normalizeColor(props.value).toFormat(context.get("format"));
@@ -56,6 +64,29 @@ function connect(service, normalize) {
       disabled: props.disabled || !interactive
     };
   }
+  function getRootState() {
+    return { disabled, readOnly, invalid };
+  }
+  function getTriggerState() {
+    return {
+      open,
+      focused,
+      disabled,
+      invalid,
+      readOnly,
+      placement: currentPlacement,
+      side: currentPlacementSide
+    };
+  }
+  function getContentState() {
+    return {
+      open,
+      nested: !!layer?.nested,
+      hasNested: !!layer?.hasNested,
+      placement: currentPlacement,
+      side: currentPlacementSide
+    };
+  }
   return {
     dragging,
     open,
@@ -94,13 +125,15 @@ function connect(service, normalize) {
       const color = value.withChannelValue("alpha", alphaValue);
       send({ type: "VALUE.SET", value: color, src: "set-alpha" });
     },
+    getRootState,
     getRootProps() {
+      const rootState = getRootState();
       return normalize.element({
         ...parts.root.attrs(scope.id),
         dir: prop("dir"),
-        "data-disabled": dataAttr(disabled),
-        "data-readonly": dataAttr(readOnly),
-        "data-invalid": dataAttr(invalid),
+        "data-disabled": dataAttr(rootState.disabled),
+        "data-readonly": dataAttr(rootState.readOnly),
+        "data-invalid": dataAttr(rootState.invalid),
         style: {
           "--value": value.toString("css")
         }
@@ -135,24 +168,26 @@ function connect(service, normalize) {
         "data-focus": dataAttr(focused)
       });
     },
+    getTriggerState,
     getTriggerProps() {
+      const triggerState = getTriggerState();
       return normalize.button({
         ...parts.trigger.attrs(scope.id),
         id: dom.getTriggerId(scope),
         dir: prop("dir"),
-        disabled,
+        disabled: triggerState.disabled,
         "aria-label": `select color. current color is ${valueAsString}`,
         "aria-controls": dom.getContentId(scope),
         "aria-labelledby": dom.getLabelId(scope),
         "aria-haspopup": prop("inline") ? void 0 : "dialog",
-        "data-disabled": dataAttr(disabled),
-        "data-readonly": dataAttr(readOnly),
-        "data-invalid": dataAttr(invalid),
-        "data-placement": currentPlacement,
-        "data-side": currentPlacementSide,
-        "aria-expanded": open,
-        "data-state": open ? "open" : "closed",
-        "data-focus": dataAttr(focused),
+        "data-disabled": dataAttr(triggerState.disabled),
+        "data-readonly": dataAttr(triggerState.readOnly),
+        "data-invalid": dataAttr(triggerState.invalid),
+        "data-placement": triggerState.placement,
+        "data-side": triggerState.side,
+        "aria-expanded": triggerState.open,
+        "data-state": triggerState.open ? "open" : "closed",
+        "data-focus": dataAttr(triggerState.focused),
         type: "button",
         onClick() {
           if (!interactive) return;
@@ -171,20 +206,28 @@ function connect(service, normalize) {
       return normalize.element({
         ...parts.positioner.attrs(scope.id),
         dir: prop("dir"),
-        style: popperStyles.floating
+        ...getDismissableLayerAttrs(layer),
+        style: {
+          ...popperStyles.floating,
+          ...getDismissableLayerStyle(layer, { zIndex: true })
+        }
       });
     },
+    getContentState,
     getContentProps() {
+      const contentState = getContentState();
       return normalize.element({
         ...parts.content.attrs(scope.id),
         id: dom.getContentId(scope),
         dir: prop("dir"),
         role: prop("inline") ? void 0 : "dialog",
         tabIndex: -1,
-        "data-placement": currentPlacement,
-        "data-side": currentPlacementSide,
-        "data-state": open ? "open" : "closed",
-        hidden: !open
+        "data-placement": contentState.placement,
+        "data-side": contentState.side,
+        "data-state": contentState.open ? "open" : "closed",
+        hidden: !contentState.open,
+        ...getDismissableLayerAttrs(layer),
+        style: getDismissableLayerStyle(layer, { pointerEvents: true })
       });
     },
     getValueTextProps() {
@@ -548,6 +591,7 @@ function connect(service, normalize) {
         onKeyDown(event) {
           if (event.defaultPrevented) return;
           if (!interactive) return;
+          if (isComposingEvent(event)) return;
           if (event.key === "Enter") {
             const value2 = isTextField ? event.currentTarget.value : event.currentTarget.valueAsNumber;
             send({ type: "CHANNEL_INPUT.CHANGE", channel, value: value2, isTextField });

package/dist/color-picker.machine.js

@@ -72,6 +72,9 @@ var machine = (0, import_core.createMachine)({
   },
   context({ prop, bindable, getContext }) {
     return {
+      layer: bindable(() => ({
+        defaultValue: null
+      })),
       value: bindable(() => ({
         defaultValue: prop("defaultValue").toFormat(prop("format") ?? prop("defaultFormat")),
         value: prop("value")?.toFormat(prop("format") ?? prop("defaultFormat")),
@@ -103,8 +106,7 @@ var machine = (0, import_core.createMachine)({
       restoreFocus: bindable(() => ({ defaultValue: true })),
       currentPlacement: bindable(() => ({
         defaultValue: void 0
-      })),
-      positioned: bindable(() => ({ defaultValue: false }))
+      }))
     };
   },
   computed: {
@@ -391,7 +393,6 @@ var machine = (0, import_core.createMachine)({
           defer: true,
           onComplete(data) {
             context.set("currentPlacement", data.placement);
-            context.set("positioned", true);
           }
         });
       },
@@ -400,6 +401,9 @@ var machine = (0, import_core.createMachine)({
         const getContentEl2 = () => dom.getContentEl(scope);
         return (0, import_dismissable.trackDismissableElement)(getContentEl2, {
           type: "popover",
+          onLayerChange(layer) {
+            context.set("layer", layer);
+          },
           exclude: dom.getTriggerEl(scope),
           defer: true,
           onInteractOutside(event) {

package/dist/color-picker.machine.mjs

@@ -46,6 +46,9 @@ var machine = createMachine({
   },
   context({ prop, bindable, getContext }) {
     return {
+      layer: bindable(() => ({
+        defaultValue: null
+      })),
       value: bindable(() => ({
         defaultValue: prop("defaultValue").toFormat(prop("format") ?? prop("defaultFormat")),
         value: prop("value")?.toFormat(prop("format") ?? prop("defaultFormat")),
@@ -77,8 +80,7 @@ var machine = createMachine({
       restoreFocus: bindable(() => ({ defaultValue: true })),
       currentPlacement: bindable(() => ({
         defaultValue: void 0
-      })),
-      positioned: bindable(() => ({ defaultValue: false }))
+      }))
     };
   },
   computed: {
@@ -365,7 +367,6 @@ var machine = createMachine({
           defer: true,
           onComplete(data) {
             context.set("currentPlacement", data.placement);
-            context.set("positioned", true);
           }
         });
       },
@@ -374,6 +375,9 @@ var machine = createMachine({
         const getContentEl2 = () => dom.getContentEl(scope);
         return trackDismissableElement(getContentEl2, {
           type: "popover",
+          onLayerChange(layer) {
+            context.set("layer", layer);
+          },
           exclude: dom.getTriggerEl(scope),
           defer: true,
           onInteractOutside(event) {

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

@@ -2,10 +2,10 @@ import { ColorChannel, Color, ColorFormat, ColorAxes } from '@zag-js/color-utils
 export { Color, ColorAxes, ColorChannel, ColorFormat, ColorType } from '@zag-js/color-utils';
 import { GamutOverlayData } from './utils/get-gamut-overlay-path.mjs';
 import { Service, EventObject, Machine } from '@zag-js/core';
-import { InteractOutsideHandlers } from '@zag-js/dismissable';
-import { PositioningOptions } from '@zag-js/popper';
+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;
@@ -156,6 +157,10 @@ type ColorPickerSchema = {
         areaValue: Color;
     };
     context: {
+        /**
+         * The computed layer stack state used for declarative styles and attributes.
+         */
+        layer: LayerSnapshot | null;
         format: ColorFormat;
         value: Color;
         activeId: string | null;
@@ -168,7 +173,6 @@ type ColorPickerSchema = {
         } | null;
         fieldsetDisabled: boolean;
         currentPlacement: PositioningOptions["placement"] | undefined;
-        positioned: boolean;
         restoreFocus: boolean;
     };
     event: EventObject;
@@ -219,6 +223,72 @@ interface SwatchTriggerState {
     checked: boolean;
     disabled: boolean;
 }
+interface RootState {
+    /**
+     * Whether the color picker is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the color picker is read-only
+     */
+    readOnly: boolean;
+    /**
+     * Whether the color picker is invalid
+     */
+    invalid: boolean;
+}
+interface TriggerState {
+    /**
+     * Whether the color picker is open
+     */
+    open: boolean;
+    /**
+     * Whether the trigger is focused
+     */
+    focused: boolean;
+    /**
+     * Whether the trigger is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the color picker is invalid
+     */
+    invalid: boolean;
+    /**
+     * Whether the color picker is read-only
+     */
+    readOnly: boolean;
+    /**
+     * The current placement of the content relative to the trigger
+     */
+    placement: Placement | undefined;
+    /**
+     * The side of the trigger the content is placed on
+     */
+    side: PlacementSide | undefined;
+}
+interface ContentState {
+    /**
+     * Whether the color picker is open
+     */
+    open: boolean;
+    /**
+     * Whether the content is nested within another layered element
+     */
+    nested: boolean;
+    /**
+     * Whether the content has nested layered elements within it
+     */
+    hasNested: boolean;
+    /**
+     * The current placement of the content relative to the trigger
+     */
+    placement: Placement | undefined;
+    /**
+     * The side of the trigger the content is placed on
+     */
+    side: PlacementSide | undefined;
+}
 interface SwatchProps {
     /**
      * The color value
@@ -294,11 +364,23 @@ interface ColorPickerApi<T extends PropTypes = PropTypes> {
      * Function to open or close the color picker
      */
     setOpen: (open: boolean) => void;
+    /**
+     * Returns the state of the root
+     */
+    getRootState: () => RootState;
     getRootProps: () => T["element"];
     getLabelProps: () => T["element"];
     getControlProps: () => T["element"];
+    /**
+     * Returns the state of the trigger
+     */
+    getTriggerState: () => TriggerState;
     getTriggerProps: () => T["button"];
     getPositionerProps: () => T["element"];
+    /**
+     * Returns the state of the content
+     */
+    getContentState: () => ContentState;
     getContentProps: () => T["element"];
     getHiddenInputProps: () => T["input"];
     getValueTextProps: () => T["element"];
@@ -331,4 +413,4 @@ interface ColorPickerApi<T extends PropTypes = PropTypes> {
     getFormatTriggerProps: () => T["button"];
 }
 
-export { type AreaProps, type ChannelInputProps, type ChannelProps, type ChannelSliderProps, type ColorPickerApi, type ColorPickerMachine, type ColorPickerProps, type ColorPickerSchema, type ColorPickerService, type ElementIds, type ExtendedColorChannel, type FormatChangeDetails, GamutOverlayData, type GamutOverlayProps, type OpenChangeDetails, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type ValueChangeDetails };
+export { type AreaProps, type ChannelInputProps, type ChannelProps, type ChannelSliderProps, type ColorPickerApi, type ColorPickerMachine, type ColorPickerProps, type ColorPickerSchema, type ColorPickerService, type ContentState, type ElementIds, type ExtendedColorChannel, type FormatChangeDetails, GamutOverlayData, type GamutOverlayProps, type OpenChangeDetails, type RootState, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type TriggerState, type ValueChangeDetails };

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

@@ -2,10 +2,10 @@ import { ColorChannel, Color, ColorFormat, ColorAxes } from '@zag-js/color-utils
 export { Color, ColorAxes, ColorChannel, ColorFormat, ColorType } from '@zag-js/color-utils';
 import { GamutOverlayData } from './utils/get-gamut-overlay-path.js';
 import { Service, EventObject, Machine } from '@zag-js/core';
-import { InteractOutsideHandlers } from '@zag-js/dismissable';
-import { PositioningOptions } from '@zag-js/popper';
+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;
@@ -156,6 +157,10 @@ type ColorPickerSchema = {
         areaValue: Color;
     };
     context: {
+        /**
+         * The computed layer stack state used for declarative styles and attributes.
+         */
+        layer: LayerSnapshot | null;
         format: ColorFormat;
         value: Color;
         activeId: string | null;
@@ -168,7 +173,6 @@ type ColorPickerSchema = {
         } | null;
         fieldsetDisabled: boolean;
         currentPlacement: PositioningOptions["placement"] | undefined;
-        positioned: boolean;
         restoreFocus: boolean;
     };
     event: EventObject;
@@ -219,6 +223,72 @@ interface SwatchTriggerState {
     checked: boolean;
     disabled: boolean;
 }
+interface RootState {
+    /**
+     * Whether the color picker is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the color picker is read-only
+     */
+    readOnly: boolean;
+    /**
+     * Whether the color picker is invalid
+     */
+    invalid: boolean;
+}
+interface TriggerState {
+    /**
+     * Whether the color picker is open
+     */
+    open: boolean;
+    /**
+     * Whether the trigger is focused
+     */
+    focused: boolean;
+    /**
+     * Whether the trigger is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the color picker is invalid
+     */
+    invalid: boolean;
+    /**
+     * Whether the color picker is read-only
+     */
+    readOnly: boolean;
+    /**
+     * The current placement of the content relative to the trigger
+     */
+    placement: Placement | undefined;
+    /**
+     * The side of the trigger the content is placed on
+     */
+    side: PlacementSide | undefined;
+}
+interface ContentState {
+    /**
+     * Whether the color picker is open
+     */
+    open: boolean;
+    /**
+     * Whether the content is nested within another layered element
+     */
+    nested: boolean;
+    /**
+     * Whether the content has nested layered elements within it
+     */
+    hasNested: boolean;
+    /**
+     * The current placement of the content relative to the trigger
+     */
+    placement: Placement | undefined;
+    /**
+     * The side of the trigger the content is placed on
+     */
+    side: PlacementSide | undefined;
+}
 interface SwatchProps {
     /**
      * The color value
@@ -294,11 +364,23 @@ interface ColorPickerApi<T extends PropTypes = PropTypes> {
      * Function to open or close the color picker
      */
     setOpen: (open: boolean) => void;
+    /**
+     * Returns the state of the root
+     */
+    getRootState: () => RootState;
     getRootProps: () => T["element"];
     getLabelProps: () => T["element"];
     getControlProps: () => T["element"];
+    /**
+     * Returns the state of the trigger
+     */
+    getTriggerState: () => TriggerState;
     getTriggerProps: () => T["button"];
     getPositionerProps: () => T["element"];
+    /**
+     * Returns the state of the content
+     */
+    getContentState: () => ContentState;
     getContentProps: () => T["element"];
     getHiddenInputProps: () => T["input"];
     getValueTextProps: () => T["element"];
@@ -331,4 +413,4 @@ interface ColorPickerApi<T extends PropTypes = PropTypes> {
     getFormatTriggerProps: () => T["button"];
 }
 
-export { type AreaProps, type ChannelInputProps, type ChannelProps, type ChannelSliderProps, type ColorPickerApi, type ColorPickerMachine, type ColorPickerProps, type ColorPickerSchema, type ColorPickerService, type ElementIds, type ExtendedColorChannel, type FormatChangeDetails, GamutOverlayData, type GamutOverlayProps, type OpenChangeDetails, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type ValueChangeDetails };
+export { type AreaProps, type ChannelInputProps, type ChannelProps, type ChannelSliderProps, type ColorPickerApi, type ColorPickerMachine, type ColorPickerProps, type ColorPickerSchema, type ColorPickerService, type ContentState, type ElementIds, type ExtendedColorChannel, type FormatChangeDetails, GamutOverlayData, type GamutOverlayProps, type OpenChangeDetails, type RootState, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type TriggerState, type ValueChangeDetails };

package/dist/index.d.mts

@@ -4,7 +4,7 @@ export { connect } from './color-picker.connect.mjs';
 export { machine } from './color-picker.machine.mjs';
 export { parse } from './color-picker.parse.mjs';
 export { areaProps, channelProps, props, splitAreaProps, splitChannelProps, splitProps, splitSwatchProps, splitSwatchTriggerProps, splitTransparencyGridProps, swatchProps, swatchTriggerProps, transparencyGridProps } from './color-picker.props.mjs';
-export { ColorPickerApi as Api, AreaProps, ChannelInputProps, ChannelProps, ChannelSliderProps, ElementIds, ExtendedColorChannel, FormatChangeDetails, GamutOverlayProps, ColorPickerMachine as Machine, OpenChangeDetails, ColorPickerProps as Props, ColorPickerService as Service, SwatchProps, SwatchTriggerProps, SwatchTriggerState, TransparencyGridProps, ValueChangeDetails } from './color-picker.types.mjs';
+export { ColorPickerApi as Api, AreaProps, ChannelInputProps, ChannelProps, ChannelSliderProps, ContentState, ElementIds, ExtendedColorChannel, FormatChangeDetails, GamutOverlayProps, ColorPickerMachine as Machine, OpenChangeDetails, ColorPickerProps as Props, RootState, ColorPickerService as Service, SwatchProps, SwatchTriggerProps, SwatchTriggerState, TransparencyGridProps, TriggerState, ValueChangeDetails } from './color-picker.types.mjs';
 export { Color, ColorAxes, ColorChannel, ColorFormat, ColorType } from '@zag-js/color-utils';
 export { GamutOverlayData } from './utils/get-gamut-overlay-path.mjs';
 export { PositioningOptions } from '@zag-js/popper';

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { connect } from './color-picker.connect.js';
 export { machine } from './color-picker.machine.js';
 export { parse } from './color-picker.parse.js';
 export { areaProps, channelProps, props, splitAreaProps, splitChannelProps, splitProps, splitSwatchProps, splitSwatchTriggerProps, splitTransparencyGridProps, swatchProps, swatchTriggerProps, transparencyGridProps } from './color-picker.props.js';
-export { ColorPickerApi as Api, AreaProps, ChannelInputProps, ChannelProps, ChannelSliderProps, ElementIds, ExtendedColorChannel, FormatChangeDetails, GamutOverlayProps, ColorPickerMachine as Machine, OpenChangeDetails, ColorPickerProps as Props, ColorPickerService as Service, SwatchProps, SwatchTriggerProps, SwatchTriggerState, TransparencyGridProps, ValueChangeDetails } from './color-picker.types.js';
+export { ColorPickerApi as Api, AreaProps, ChannelInputProps, ChannelProps, ChannelSliderProps, ContentState, ElementIds, ExtendedColorChannel, FormatChangeDetails, GamutOverlayProps, ColorPickerMachine as Machine, OpenChangeDetails, ColorPickerProps as Props, RootState, ColorPickerService as Service, SwatchProps, SwatchTriggerProps, SwatchTriggerState, TransparencyGridProps, TriggerState, ValueChangeDetails } from './color-picker.types.js';
 export { Color, ColorAxes, ColorChannel, ColorFormat, ColorType } from '@zag-js/color-utils';
 export { GamutOverlayData } from './utils/get-gamut-overlay-path.js';
 export { PositioningOptions } from '@zag-js/popper';

package/dist/utils/get-channel-display-color.d.mts

@@ -1,5 +1,6 @@
+import * as _zag_js_color_utils from '@zag-js/color-utils';
 import { Color, ColorChannel } from '@zag-js/color-utils';
 
-declare function getChannelDisplayColor(color: Color, channel: ColorChannel): Color;
+declare function getChannelDisplayColor(color: Color, channel: ColorChannel): _zag_js_color_utils.ColorType;
 
 export { getChannelDisplayColor };

package/dist/utils/get-channel-display-color.d.ts

@@ -1,5 +1,6 @@
+import * as _zag_js_color_utils from '@zag-js/color-utils';
 import { Color, ColorChannel } from '@zag-js/color-utils';
 
-declare function getChannelDisplayColor(color: Color, channel: ColorChannel): Color;
+declare function getChannelDisplayColor(color: Color, channel: ColorChannel): _zag_js_color_utils.ColorType;
 
 export { getChannelDisplayColor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/color-picker",
-  "version": "2.0.0-next.0",
+  "version": "2.0.0-next.2",
   "description": "Core logic for the color-picker widget implemented as a state machine",
   "keywords": [
     "js",
@@ -15,7 +15,10 @@
   "homepage": "https://github.com/chakra-ui/zag#readme",
   "license": "MIT",
   "main": "dist/index.js",
-  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/color-picker",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chakra-ui/zag/tree/main/packages/color-picker"
+  },
   "sideEffects": false,
   "files": [
     "dist"
@@ -27,14 +30,14 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "2.0.0-next.0",
-    "@zag-js/anatomy": "2.0.0-next.0",
-    "@zag-js/dom-query": "2.0.0-next.0",
-    "@zag-js/dismissable": "2.0.0-next.0",
-    "@zag-js/utils": "2.0.0-next.0",
-    "@zag-js/color-utils": "2.0.0-next.0",
-    "@zag-js/popper": "2.0.0-next.0",
-    "@zag-js/types": "2.0.0-next.0"
+    "@zag-js/core": "2.0.0-next.2",
+    "@zag-js/anatomy": "2.0.0-next.2",
+    "@zag-js/dom-query": "2.0.0-next.2",
+    "@zag-js/dismissable": "2.0.0-next.2",
+    "@zag-js/utils": "2.0.0-next.2",
+    "@zag-js/color-utils": "2.0.0-next.2",
+    "@zag-js/popper": "2.0.0-next.2",
+    "@zag-js/types": "2.0.0-next.2"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
@@ -67,7 +70,7 @@
   },
   "scripts": {
     "build": "tsup",
-    "lint": "eslint src",
+    "lint": "oxlint src",
     "typecheck": "tsc --noEmit"
   }
 }