@zag-js/color-picker 0.74.2 → 0.76.0

package/dist/index.d.mts

@@ -57,7 +57,7 @@ interface PublicContext extends CommonProperties, DirectionProperty, InteractOut
     /**
      * The ids of the elements in the color picker. Useful for composition.
      */
-    ids?: ElementIds;
+    ids?: ElementIds | undefined;
     /**
      * The current color value
      * @default #000000
@@ -66,31 +66,31 @@ interface PublicContext extends CommonProperties, DirectionProperty, InteractOut
     /**
      * Whether the color picker is disabled
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Whether the color picker is read-only
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
     /**
      * Whether the color picker is required
      */
-    required?: boolean;
+    required?: boolean | undefined;
     /**
      * Handler that is called when the value changes, as the user drags.
      */
-    onValueChange?: (details: ValueChangeDetails) => void;
+    onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
     /**
      * Handler that is called when the user stops dragging.
      */
-    onValueChangeEnd?: (details: ValueChangeDetails) => void;
+    onValueChangeEnd?: ((details: ValueChangeDetails) => void) | undefined;
     /**
      * Handler that is called when the user opens or closes the color picker.
      */
-    onOpenChange?: (details: OpenChangeDetails) => void;
+    onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
     /**
      * The name for the form input
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * The positioning options for the color picker
      */
@@ -98,15 +98,15 @@ interface PublicContext extends CommonProperties, DirectionProperty, InteractOut
     /**
      * The initial focus element when the color picker is opened.
      */
-    initialFocusEl?: () => HTMLElement | null;
+    initialFocusEl?: (() => HTMLElement | null) | undefined;
     /**
      * Whether the color picker is open
      */
-    open?: boolean;
+    open?: boolean | undefined;
     /**
      * Whether the color picker open state is controlled by the user
      */
-    "open.controlled"?: boolean;
+    "open.controlled"?: boolean | undefined;
     /**
      * The color format to use
      * @default "rgba"
@@ -115,12 +115,12 @@ interface PublicContext extends CommonProperties, DirectionProperty, InteractOut
     /**
      * Function called when the color format changes
      */
-    onFormatChange?: (details: FormatChangeDetails) => void;
+    onFormatChange?: ((details: FormatChangeDetails) => void) | undefined;
     /**
      * Whether to close the color picker when a swatch is selected
      * @default false
      */
-    closeOnSelect?: boolean;
+    closeOnSelect?: boolean | undefined;
 }
 interface PrivateContext {
 }
@@ -163,18 +163,18 @@ type Send = StateMachine.Send<StateMachine.AnyEventObject>;
 type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
 interface ChannelProps {
     channel: ColorChannel;
-    orientation?: Orientation;
+    orientation?: Orientation | undefined;
 }
 interface ChannelSliderProps extends ChannelProps {
-    format?: ColorFormat;
+    format?: ColorFormat | undefined;
 }
 interface ChannelInputProps {
     channel: ExtendedColorChannel;
-    orientation?: Orientation;
+    orientation?: Orientation | undefined;
 }
 interface AreaProps {
-    xChannel?: ColorChannel;
-    yChannel?: ColorChannel;
+    xChannel?: ColorChannel | undefined;
+    yChannel?: ColorChannel | undefined;
 }
 interface SwatchTriggerProps {
     /**
@@ -184,7 +184,7 @@ interface SwatchTriggerProps {
     /**
      * Whether the swatch trigger is disabled
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
 interface SwatchTriggerState {
     value: Color;
@@ -200,10 +200,10 @@ interface SwatchProps {
     /**
      * Whether to include the alpha channel in the color
      */
-    respectAlpha?: boolean;
+    respectAlpha?: boolean | undefined;
 }
 interface TransparencyGridProps {
-    size?: string;
+    size?: string | undefined;
 }
 interface MachineApi<T extends PropTypes = PropTypes> {
     /**

package/dist/index.d.ts

@@ -57,7 +57,7 @@ interface PublicContext extends CommonProperties, DirectionProperty, InteractOut
     /**
      * The ids of the elements in the color picker. Useful for composition.
      */
-    ids?: ElementIds;
+    ids?: ElementIds | undefined;
     /**
      * The current color value
      * @default #000000
@@ -66,31 +66,31 @@ interface PublicContext extends CommonProperties, DirectionProperty, InteractOut
     /**
      * Whether the color picker is disabled
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
     /**
      * Whether the color picker is read-only
      */
-    readOnly?: boolean;
+    readOnly?: boolean | undefined;
     /**
      * Whether the color picker is required
      */
-    required?: boolean;
+    required?: boolean | undefined;
     /**
      * Handler that is called when the value changes, as the user drags.
      */
-    onValueChange?: (details: ValueChangeDetails) => void;
+    onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
     /**
      * Handler that is called when the user stops dragging.
      */
-    onValueChangeEnd?: (details: ValueChangeDetails) => void;
+    onValueChangeEnd?: ((details: ValueChangeDetails) => void) | undefined;
     /**
      * Handler that is called when the user opens or closes the color picker.
      */
-    onOpenChange?: (details: OpenChangeDetails) => void;
+    onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
     /**
      * The name for the form input
      */
-    name?: string;
+    name?: string | undefined;
     /**
      * The positioning options for the color picker
      */
@@ -98,15 +98,15 @@ interface PublicContext extends CommonProperties, DirectionProperty, InteractOut
     /**
      * The initial focus element when the color picker is opened.
      */
-    initialFocusEl?: () => HTMLElement | null;
+    initialFocusEl?: (() => HTMLElement | null) | undefined;
     /**
      * Whether the color picker is open
      */
-    open?: boolean;
+    open?: boolean | undefined;
     /**
      * Whether the color picker open state is controlled by the user
      */
-    "open.controlled"?: boolean;
+    "open.controlled"?: boolean | undefined;
     /**
      * The color format to use
      * @default "rgba"
@@ -115,12 +115,12 @@ interface PublicContext extends CommonProperties, DirectionProperty, InteractOut
     /**
      * Function called when the color format changes
      */
-    onFormatChange?: (details: FormatChangeDetails) => void;
+    onFormatChange?: ((details: FormatChangeDetails) => void) | undefined;
     /**
      * Whether to close the color picker when a swatch is selected
      * @default false
      */
-    closeOnSelect?: boolean;
+    closeOnSelect?: boolean | undefined;
 }
 interface PrivateContext {
 }
@@ -163,18 +163,18 @@ type Send = StateMachine.Send<StateMachine.AnyEventObject>;
 type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
 interface ChannelProps {
     channel: ColorChannel;
-    orientation?: Orientation;
+    orientation?: Orientation | undefined;
 }
 interface ChannelSliderProps extends ChannelProps {
-    format?: ColorFormat;
+    format?: ColorFormat | undefined;
 }
 interface ChannelInputProps {
     channel: ExtendedColorChannel;
-    orientation?: Orientation;
+    orientation?: Orientation | undefined;
 }
 interface AreaProps {
-    xChannel?: ColorChannel;
-    yChannel?: ColorChannel;
+    xChannel?: ColorChannel | undefined;
+    yChannel?: ColorChannel | undefined;
 }
 interface SwatchTriggerProps {
     /**
@@ -184,7 +184,7 @@ interface SwatchTriggerProps {
     /**
      * Whether the swatch trigger is disabled
      */
-    disabled?: boolean;
+    disabled?: boolean | undefined;
 }
 interface SwatchTriggerState {
     value: Color;
@@ -200,10 +200,10 @@ interface SwatchProps {
     /**
      * Whether to include the alpha channel in the color
      */
-    respectAlpha?: boolean;
+    respectAlpha?: boolean | undefined;
 }
 interface TransparencyGridProps {
-    size?: string;
+    size?: string | undefined;
 }
 interface MachineApi<T extends PropTypes = PropTypes> {
     /**

package/dist/index.js

@@ -177,8 +177,8 @@ function getSliderBackgroundDirection(orientation, dir) {
   }
 }
 var getSliderBackground = (props) => {
-  const { channel, value, dir } = props;
-  const bgDirection = getSliderBackgroundDirection(props.orientation, dir);
+  const { channel, value, dir, orientation } = props;
+  const bgDirection = getSliderBackgroundDirection(orientation, dir);
   const { minValue, maxValue } = value.getChannelRange(channel);
   switch (channel) {
     case "hue":

package/dist/index.mjs

@@ -175,8 +175,8 @@ function getSliderBackgroundDirection(orientation, dir) {
   }
 }
 var getSliderBackground = (props) => {
-  const { channel, value, dir } = props;
-  const bgDirection = getSliderBackgroundDirection(props.orientation, dir);
+  const { channel, value, dir, orientation } = props;
+  const bgDirection = getSliderBackgroundDirection(orientation, dir);
   const { minValue, maxValue } = value.getChannelRange(channel);
   switch (channel) {
     case "hue":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/color-picker",
-  "version": "0.74.2",
+  "version": "0.76.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.74.2",
-    "@zag-js/anatomy": "0.74.2",
-    "@zag-js/dom-query": "0.74.2",
-    "@zag-js/dismissable": "0.74.2",
-    "@zag-js/dom-event": "0.74.2",
-    "@zag-js/utils": "0.74.2",
-    "@zag-js/form-utils": "0.74.2",
-    "@zag-js/color-utils": "0.74.2",
-    "@zag-js/popper": "0.74.2",
-    "@zag-js/text-selection": "0.74.2",
-    "@zag-js/types": "0.74.2"
+    "@zag-js/core": "0.76.0",
+    "@zag-js/anatomy": "0.76.0",
+    "@zag-js/dom-query": "0.76.0",
+    "@zag-js/dismissable": "0.76.0",
+    "@zag-js/dom-event": "0.76.0",
+    "@zag-js/utils": "0.76.0",
+    "@zag-js/form-utils": "0.76.0",
+    "@zag-js/color-utils": "0.76.0",
+    "@zag-js/popper": "0.76.0",
+    "@zag-js/text-selection": "0.76.0",
+    "@zag-js/types": "0.76.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"