@zag-js/color-picker 0.28.1 → 0.30.0

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 import { RequiredBy, Orientation, PropTypes, CommonProperties, MaybeElement, Context, NormalizeProps } from '@zag-js/types';
-import { ColorChannel, Color, ColorFormat } from '@zag-js/color-utils';
+import { Color, ColorChannel, ColorFormat } from '@zag-js/color-utils';
 export { Color, ColorAxes, ColorChannel, ColorFormat, ColorType } from '@zag-js/color-utils';
 import * as _zag_js_core from '@zag-js/core';
 import { StateMachine } from '@zag-js/core';
@@ -8,8 +8,9 @@ import { InteractOutsideHandlers } from '@zag-js/dismissable';
 import { PositioningOptions } from '@zag-js/popper';
 import { MaybeFunction } from '@zag-js/utils';
 
-declare const anatomy: _zag_js_anatomy.Anatomy<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderTrack" | "channelSliderThumb" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatch" | "eyeDropperTrigger">;
+declare const anatomy: _zag_js_anatomy.Anatomy<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderTrack" | "channelSliderThumb" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
 
+type ExtendedColorChannel = ColorChannel | "hex" | "css";
 interface ValueChangeDetails {
     value: Color;
     valueAsString: string;
@@ -17,7 +18,9 @@ interface ValueChangeDetails {
 interface OpenChangeDetails {
     open: boolean;
 }
-type ExtendedColorChannel = ColorChannel | "hex" | "css";
+interface FormatChangeDetails {
+    format: ColorFormat;
+}
 type ElementIds = Partial<{
     root: string;
     control: string;
@@ -73,11 +76,6 @@ interface PublicContext extends CommonProperties, InteractOutsideHandlers {
      * The positioning options for the color picker
      */
     positioning: PositioningOptions;
-    /**
-     * Whether to automatically set focus on the first focusable
-     * content within the color picker when opened.
-     */
-    autoFocus?: boolean;
     /**
      * The initial focus element when the color picker is opened.
      */
@@ -86,6 +84,18 @@ interface PublicContext extends CommonProperties, InteractOutsideHandlers {
      * Whether the color picker is open
      */
     open?: boolean;
+    /**
+     * The color format to use
+     */
+    format: ColorFormat;
+    /**
+     * Function called when the color format changes
+     */
+    onFormatChange?: (details: FormatChangeDetails) => void;
+    /**
+     * Whether to close the color picker when a swatch is selected
+     */
+    closeOnSelect?: boolean;
 }
 type PrivateContext = Context<{}>;
 type ComputedContext = Readonly<{
@@ -109,6 +119,11 @@ type ComputedContext = Readonly<{
      * Whether the color picker is disabled
      */
     isDisabled: boolean;
+    /**
+     * @computed
+     * The area value as a Color object
+     */
+    areaValue: Color;
 }>;
 type UserDefinedContext = RequiredBy<PublicContext, "id">;
 interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
@@ -136,6 +151,16 @@ interface SwatchTriggerProps {
      * The color value
      */
     value: string | Color;
+    /**
+     * Whether the swatch trigger is disabled
+     */
+    disabled?: boolean;
+}
+interface SwatchTriggerState {
+    value: Color;
+    valueAsString: string;
+    isChecked: boolean;
+    isDisabled: boolean;
 }
 interface SwatchProps {
     /**
@@ -195,6 +220,14 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      * Function to set the color alpha
      */
     setAlpha(value: number): void;
+    /**
+     * Function to open the color picker
+     */
+    open(): void;
+    /**
+     * Function to close the color picker
+     */
+    close(): void;
     rootProps: T["element"];
     labelProps: T["element"];
     controlProps: T["element"];
@@ -213,13 +246,17 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     eyeDropperTriggerProps: T["button"];
     swatchGroupProps: T["element"];
     getSwatchTriggerProps(props: SwatchTriggerProps): T["button"];
+    getSwatchTriggerState(props: SwatchTriggerProps): SwatchTriggerState;
     getSwatchProps(props: SwatchProps): T["element"];
+    getSwatchIndicatorProps(props: SwatchProps): T["element"];
+    formatSelectProps: T["select"];
+    formatTriggerProps: T["button"];
 }
 
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-declare const parse: (color: string) => Color;
+declare const parse: (colorString: string) => Color;
 
-export { MachineApi as Api, AreaProps, ChannelInputProps, ChannelProps, UserDefinedContext as Context, SwatchProps, SwatchTriggerProps, TransparencyGridProps, anatomy, connect, machine, parse };
+export { MachineApi as Api, AreaProps, ChannelInputProps, ChannelProps, UserDefinedContext as Context, ElementIds, OpenChangeDetails, SwatchProps, SwatchTriggerProps, SwatchTriggerState, TransparencyGridProps, ValueChangeDetails, anatomy, connect, machine, parse };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 import { RequiredBy, Orientation, PropTypes, CommonProperties, MaybeElement, Context, NormalizeProps } from '@zag-js/types';
-import { ColorChannel, Color, ColorFormat } from '@zag-js/color-utils';
+import { Color, ColorChannel, ColorFormat } from '@zag-js/color-utils';
 export { Color, ColorAxes, ColorChannel, ColorFormat, ColorType } from '@zag-js/color-utils';
 import * as _zag_js_core from '@zag-js/core';
 import { StateMachine } from '@zag-js/core';
@@ -8,8 +8,9 @@ import { InteractOutsideHandlers } from '@zag-js/dismissable';
 import { PositioningOptions } from '@zag-js/popper';
 import { MaybeFunction } from '@zag-js/utils';
 
-declare const anatomy: _zag_js_anatomy.Anatomy<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderTrack" | "channelSliderThumb" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatch" | "eyeDropperTrigger">;
+declare const anatomy: _zag_js_anatomy.Anatomy<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderTrack" | "channelSliderThumb" | "channelInput" | "transparencyGrid" | "swatchGroup" | "swatchTrigger" | "swatchIndicator" | "swatch" | "eyeDropperTrigger" | "formatTrigger" | "formatSelect">;
 
+type ExtendedColorChannel = ColorChannel | "hex" | "css";
 interface ValueChangeDetails {
     value: Color;
     valueAsString: string;
@@ -17,7 +18,9 @@ interface ValueChangeDetails {
 interface OpenChangeDetails {
     open: boolean;
 }
-type ExtendedColorChannel = ColorChannel | "hex" | "css";
+interface FormatChangeDetails {
+    format: ColorFormat;
+}
 type ElementIds = Partial<{
     root: string;
     control: string;
@@ -73,11 +76,6 @@ interface PublicContext extends CommonProperties, InteractOutsideHandlers {
      * The positioning options for the color picker
      */
     positioning: PositioningOptions;
-    /**
-     * Whether to automatically set focus on the first focusable
-     * content within the color picker when opened.
-     */
-    autoFocus?: boolean;
     /**
      * The initial focus element when the color picker is opened.
      */
@@ -86,6 +84,18 @@ interface PublicContext extends CommonProperties, InteractOutsideHandlers {
      * Whether the color picker is open
      */
     open?: boolean;
+    /**
+     * The color format to use
+     */
+    format: ColorFormat;
+    /**
+     * Function called when the color format changes
+     */
+    onFormatChange?: (details: FormatChangeDetails) => void;
+    /**
+     * Whether to close the color picker when a swatch is selected
+     */
+    closeOnSelect?: boolean;
 }
 type PrivateContext = Context<{}>;
 type ComputedContext = Readonly<{
@@ -109,6 +119,11 @@ type ComputedContext = Readonly<{
      * Whether the color picker is disabled
      */
     isDisabled: boolean;
+    /**
+     * @computed
+     * The area value as a Color object
+     */
+    areaValue: Color;
 }>;
 type UserDefinedContext = RequiredBy<PublicContext, "id">;
 interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
@@ -136,6 +151,16 @@ interface SwatchTriggerProps {
      * The color value
      */
     value: string | Color;
+    /**
+     * Whether the swatch trigger is disabled
+     */
+    disabled?: boolean;
+}
+interface SwatchTriggerState {
+    value: Color;
+    valueAsString: string;
+    isChecked: boolean;
+    isDisabled: boolean;
 }
 interface SwatchProps {
     /**
@@ -195,6 +220,14 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      * Function to set the color alpha
      */
     setAlpha(value: number): void;
+    /**
+     * Function to open the color picker
+     */
+    open(): void;
+    /**
+     * Function to close the color picker
+     */
+    close(): void;
     rootProps: T["element"];
     labelProps: T["element"];
     controlProps: T["element"];
@@ -213,13 +246,17 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     eyeDropperTriggerProps: T["button"];
     swatchGroupProps: T["element"];
     getSwatchTriggerProps(props: SwatchTriggerProps): T["button"];
+    getSwatchTriggerState(props: SwatchTriggerProps): SwatchTriggerState;
     getSwatchProps(props: SwatchProps): T["element"];
+    getSwatchIndicatorProps(props: SwatchProps): T["element"];
+    formatSelectProps: T["select"];
+    formatTriggerProps: T["button"];
 }
 
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-declare const parse: (color: string) => Color;
+declare const parse: (colorString: string) => Color;
 
-export { MachineApi as Api, AreaProps, ChannelInputProps, ChannelProps, UserDefinedContext as Context, SwatchProps, SwatchTriggerProps, TransparencyGridProps, anatomy, connect, machine, parse };
+export { MachineApi as Api, AreaProps, ChannelInputProps, ChannelProps, UserDefinedContext as Context, ElementIds, OpenChangeDetails, SwatchProps, SwatchTriggerProps, SwatchTriggerState, TransparencyGridProps, ValueChangeDetails, anatomy, connect, machine, parse };