@zag-js/color-picker 0.22.0 → 0.24.0

package/dist/index.d.mts

@@ -1,18 +1,29 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, Orientation, PropTypes, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
+import { RequiredBy, Orientation, PropTypes, CommonProperties, MaybeElement, Context, NormalizeProps } from '@zag-js/types';
 import { ColorChannel, Color, 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';
+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<"area" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBackground" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBackground" | "content" | "label" | "eyeDropperTrigger">;
+declare const anatomy: _zag_js_anatomy.Anatomy<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderTrack" | "channelSliderThumb" | "channelInput" | "transparancyGrid" | "swatchGroup" | "swatchTrigger" | "swatch" | "eyeDropperTrigger">;
 
 interface ValueChangeDetails {
-    value: string;
-    valueAsColor: Color;
+    value: Color;
+    valueAsString: string;
+}
+interface OpenChangeDetails {
+    open: boolean;
 }
 type ExtendedColorChannel = ColorChannel | "hex" | "css";
 type ElementIds = Partial<{
+    root: string;
+    control: string;
+    trigger: string;
+    label: string;
+    input: string;
     content: string;
     area: string;
     areaGradient: string;
@@ -21,7 +32,7 @@ type ElementIds = Partial<{
     channelSliderTrack(id: ColorChannel): string;
     channelSliderThumb(id: ColorChannel): string;
 }>;
-interface PublicContext extends CommonProperties {
+interface PublicContext extends CommonProperties, InteractOutsideHandlers {
     /**
      * The ids of the elements in the color picker. Useful for composition.
      */
@@ -33,7 +44,7 @@ interface PublicContext extends CommonProperties {
     /**
      * The current color value
      */
-    value: string;
+    value: Color;
     /**
      * Whether the color picker is disabled
      */
@@ -51,9 +62,40 @@ interface PublicContext extends CommonProperties {
      */
     onValueChangeEnd?: (details: ValueChangeDetails) => void;
     /**
-     *  The name for the form input
+     * Handler that is called when the user opens or closes the color picker.
+     */
+    onOpenChange?: (details: OpenChangeDetails) => void;
+    /**
+     * The name for the form input
      */
     name?: string;
+    /**
+     * The color format to use (rgb, hsl, hsb)
+     * @default "hsl"
+     */
+    format?: ColorFormat;
+    /**
+     * The alpha format to use (decimal, percent)
+     * @default "decimal"
+     */
+    alphaFormat?: "decimal" | "percent";
+    /**
+     * 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.
+     */
+    initialFocusEl?: MaybeFunction<MaybeElement>;
+    /**
+     * Whether the color picker is open
+     */
+    open?: boolean;
 }
 type PrivateContext = Context<{}>;
 type ComputedContext = Readonly<{
@@ -71,7 +113,7 @@ type ComputedContext = Readonly<{
      * @computed
      * The color value as a Color object
      */
-    valueAsColor: Color;
+    valueAsString: string;
     /**
      * @computed
      * Whether the color picker is disabled
@@ -82,43 +124,59 @@ type UserDefinedContext = RequiredBy<PublicContext, "id">;
 interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
 }
 interface MachineState {
-    value: "idle" | "focused" | "dragging";
+    tags: "open" | "closed" | "dragging" | "focused";
+    value: "idle" | "focused" | "open" | "open:dragging";
 }
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-interface ColorChannelProps {
+interface ChannelProps {
     channel: ColorChannel;
     orientation?: Orientation;
 }
-interface ColorChannelInputProps {
+interface ChannelInputProps {
     channel: ExtendedColorChannel;
     orientation?: Orientation;
 }
-interface ColorAreaProps {
-    xChannel: ColorChannel;
-    yChannel: ColorChannel;
+interface AreaProps {
+    xChannel?: ColorChannel;
+    yChannel?: ColorChannel;
 }
-interface ColorSwatchProps {
-    readOnly?: boolean;
+interface SwatchTriggerProps {
+    /**
+     * The color value
+     */
     value: string | Color;
 }
+interface SwatchProps {
+    /**
+     * The color value
+     */
+    value: string | Color;
+    /**
+     * Whether to include the alpha channel in the color
+     */
+    respectAlpha?: boolean;
+}
+interface TransparancyGridProps {
+    size: string;
+}
 interface MachineApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the color picker is being dragged
      */
     isDragging: boolean;
     /**
-     * The current color value (as a string)
+     * Whether the color picker is open
      */
-    value: string;
+    isOpen: boolean;
     /**
-     * The current color value (as a Color object)
+     * The current color value (as a string)
      */
-    valueAsColor: Color;
+    value: Color;
     /**
-     * The alpha value of the color
+     * The current color value (as a Color object)
      */
-    alpha: number;
+    valueAsString: string;
     /**
      * The current color channels of the color
      */
@@ -127,6 +185,10 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      * Function to set the color value
      */
     setColor(value: string | Color): void;
+    /**
+     * Function to set the color value
+     */
+    getChannelValue(channel: ColorChannel): string;
     /**
      * Function to set the color value of a specific channel
      */
@@ -135,26 +197,39 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      * Function to set the color format
      */
     setFormat(format: ColorFormat): void;
+    /**
+     * The alpha value of the color
+     */
+    getAlpha(): number;
     /**
      * Function to set the color alpha
      */
     setAlpha(value: number): void;
+    rootProps: T["element"];
+    labelProps: T["element"];
+    controlProps: T["element"];
+    triggerProps: T["button"];
+    positionerProps: T["element"];
     contentProps: T["element"];
     hiddenInputProps: T["input"];
-    getAreaProps(props: ColorAreaProps): T["element"];
-    getAreaGradientProps(props: ColorAreaProps): T["element"];
-    getAreaThumbProps(props: ColorAreaProps): T["element"];
-    getChannelSliderTrackProps(props: ColorChannelProps): T["element"];
-    getChannelSliderBackgroundProps(props: ColorChannelProps): T["element"];
-    getChannelSliderThumbProps(props: ColorChannelProps): T["element"];
-    getChannelInputProps(props: ColorChannelInputProps): T["input"];
+    getAreaProps(props?: AreaProps): T["element"];
+    getAreaBackgroundProps(props?: AreaProps): T["element"];
+    getAreaThumbProps(props?: AreaProps): T["element"];
+    getChannelSliderProps(props: ChannelProps): T["element"];
+    getChannelSliderTrackProps(props: ChannelProps): T["element"];
+    getChannelSliderThumbProps(props: ChannelProps): T["element"];
+    getChannelInputProps(props: ChannelInputProps): T["input"];
+    getTransparencyGridProps(props: TransparancyGridProps): T["element"];
     eyeDropperTriggerProps: T["button"];
-    getSwatchBackgroundProps(props: ColorSwatchProps): T["element"];
-    getSwatchProps(props: ColorSwatchProps): T["element"];
+    swatchGroupProps: T["element"];
+    getSwatchTriggerProps(props: SwatchTriggerProps): T["button"];
+    getSwatchProps(props: SwatchProps): T["element"];
 }
 
 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>;
 
-export { MachineApi as Api, ColorAreaProps, ColorChannelInputProps, ColorChannelProps, ColorSwatchProps, UserDefinedContext as Context, anatomy, connect, machine };
+declare const parse: (color: string) => Color;
+
+export { MachineApi as Api, AreaProps, ChannelInputProps, ChannelProps, UserDefinedContext as Context, SwatchProps, anatomy, connect, machine, parse };

package/dist/index.d.ts

@@ -1,18 +1,29 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, Orientation, PropTypes, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
+import { RequiredBy, Orientation, PropTypes, CommonProperties, MaybeElement, Context, NormalizeProps } from '@zag-js/types';
 import { ColorChannel, Color, 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';
+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<"area" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBackground" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBackground" | "content" | "label" | "eyeDropperTrigger">;
+declare const anatomy: _zag_js_anatomy.Anatomy<"root" | "label" | "control" | "trigger" | "positioner" | "content" | "area" | "areaThumb" | "areaBackground" | "channelSlider" | "channelSliderTrack" | "channelSliderThumb" | "channelInput" | "transparancyGrid" | "swatchGroup" | "swatchTrigger" | "swatch" | "eyeDropperTrigger">;
 
 interface ValueChangeDetails {
-    value: string;
-    valueAsColor: Color;
+    value: Color;
+    valueAsString: string;
+}
+interface OpenChangeDetails {
+    open: boolean;
 }
 type ExtendedColorChannel = ColorChannel | "hex" | "css";
 type ElementIds = Partial<{
+    root: string;
+    control: string;
+    trigger: string;
+    label: string;
+    input: string;
     content: string;
     area: string;
     areaGradient: string;
@@ -21,7 +32,7 @@ type ElementIds = Partial<{
     channelSliderTrack(id: ColorChannel): string;
     channelSliderThumb(id: ColorChannel): string;
 }>;
-interface PublicContext extends CommonProperties {
+interface PublicContext extends CommonProperties, InteractOutsideHandlers {
     /**
      * The ids of the elements in the color picker. Useful for composition.
      */
@@ -33,7 +44,7 @@ interface PublicContext extends CommonProperties {
     /**
      * The current color value
      */
-    value: string;
+    value: Color;
     /**
      * Whether the color picker is disabled
      */
@@ -51,9 +62,40 @@ interface PublicContext extends CommonProperties {
      */
     onValueChangeEnd?: (details: ValueChangeDetails) => void;
     /**
-     *  The name for the form input
+     * Handler that is called when the user opens or closes the color picker.
+     */
+    onOpenChange?: (details: OpenChangeDetails) => void;
+    /**
+     * The name for the form input
      */
     name?: string;
+    /**
+     * The color format to use (rgb, hsl, hsb)
+     * @default "hsl"
+     */
+    format?: ColorFormat;
+    /**
+     * The alpha format to use (decimal, percent)
+     * @default "decimal"
+     */
+    alphaFormat?: "decimal" | "percent";
+    /**
+     * 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.
+     */
+    initialFocusEl?: MaybeFunction<MaybeElement>;
+    /**
+     * Whether the color picker is open
+     */
+    open?: boolean;
 }
 type PrivateContext = Context<{}>;
 type ComputedContext = Readonly<{
@@ -71,7 +113,7 @@ type ComputedContext = Readonly<{
      * @computed
      * The color value as a Color object
      */
-    valueAsColor: Color;
+    valueAsString: string;
     /**
      * @computed
      * Whether the color picker is disabled
@@ -82,43 +124,59 @@ type UserDefinedContext = RequiredBy<PublicContext, "id">;
 interface MachineContext extends PublicContext, PrivateContext, ComputedContext {
 }
 interface MachineState {
-    value: "idle" | "focused" | "dragging";
+    tags: "open" | "closed" | "dragging" | "focused";
+    value: "idle" | "focused" | "open" | "open:dragging";
 }
 type State = StateMachine.State<MachineContext, MachineState>;
 type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-interface ColorChannelProps {
+interface ChannelProps {
     channel: ColorChannel;
     orientation?: Orientation;
 }
-interface ColorChannelInputProps {
+interface ChannelInputProps {
     channel: ExtendedColorChannel;
     orientation?: Orientation;
 }
-interface ColorAreaProps {
-    xChannel: ColorChannel;
-    yChannel: ColorChannel;
+interface AreaProps {
+    xChannel?: ColorChannel;
+    yChannel?: ColorChannel;
 }
-interface ColorSwatchProps {
-    readOnly?: boolean;
+interface SwatchTriggerProps {
+    /**
+     * The color value
+     */
     value: string | Color;
 }
+interface SwatchProps {
+    /**
+     * The color value
+     */
+    value: string | Color;
+    /**
+     * Whether to include the alpha channel in the color
+     */
+    respectAlpha?: boolean;
+}
+interface TransparancyGridProps {
+    size: string;
+}
 interface MachineApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the color picker is being dragged
      */
     isDragging: boolean;
     /**
-     * The current color value (as a string)
+     * Whether the color picker is open
      */
-    value: string;
+    isOpen: boolean;
     /**
-     * The current color value (as a Color object)
+     * The current color value (as a string)
      */
-    valueAsColor: Color;
+    value: Color;
     /**
-     * The alpha value of the color
+     * The current color value (as a Color object)
      */
-    alpha: number;
+    valueAsString: string;
     /**
      * The current color channels of the color
      */
@@ -127,6 +185,10 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      * Function to set the color value
      */
     setColor(value: string | Color): void;
+    /**
+     * Function to set the color value
+     */
+    getChannelValue(channel: ColorChannel): string;
     /**
      * Function to set the color value of a specific channel
      */
@@ -135,26 +197,39 @@ interface MachineApi<T extends PropTypes = PropTypes> {
      * Function to set the color format
      */
     setFormat(format: ColorFormat): void;
+    /**
+     * The alpha value of the color
+     */
+    getAlpha(): number;
     /**
      * Function to set the color alpha
      */
     setAlpha(value: number): void;
+    rootProps: T["element"];
+    labelProps: T["element"];
+    controlProps: T["element"];
+    triggerProps: T["button"];
+    positionerProps: T["element"];
     contentProps: T["element"];
     hiddenInputProps: T["input"];
-    getAreaProps(props: ColorAreaProps): T["element"];
-    getAreaGradientProps(props: ColorAreaProps): T["element"];
-    getAreaThumbProps(props: ColorAreaProps): T["element"];
-    getChannelSliderTrackProps(props: ColorChannelProps): T["element"];
-    getChannelSliderBackgroundProps(props: ColorChannelProps): T["element"];
-    getChannelSliderThumbProps(props: ColorChannelProps): T["element"];
-    getChannelInputProps(props: ColorChannelInputProps): T["input"];
+    getAreaProps(props?: AreaProps): T["element"];
+    getAreaBackgroundProps(props?: AreaProps): T["element"];
+    getAreaThumbProps(props?: AreaProps): T["element"];
+    getChannelSliderProps(props: ChannelProps): T["element"];
+    getChannelSliderTrackProps(props: ChannelProps): T["element"];
+    getChannelSliderThumbProps(props: ChannelProps): T["element"];
+    getChannelInputProps(props: ChannelInputProps): T["input"];
+    getTransparencyGridProps(props: TransparancyGridProps): T["element"];
     eyeDropperTriggerProps: T["button"];
-    getSwatchBackgroundProps(props: ColorSwatchProps): T["element"];
-    getSwatchProps(props: ColorSwatchProps): T["element"];
+    swatchGroupProps: T["element"];
+    getSwatchTriggerProps(props: SwatchTriggerProps): T["button"];
+    getSwatchProps(props: SwatchProps): T["element"];
 }
 
 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>;
 
-export { MachineApi as Api, ColorAreaProps, ColorChannelInputProps, ColorChannelProps, ColorSwatchProps, UserDefinedContext as Context, anatomy, connect, machine };
+declare const parse: (color: string) => Color;
+
+export { MachineApi as Api, AreaProps, ChannelInputProps, ChannelProps, UserDefinedContext as Context, SwatchProps, anatomy, connect, machine, parse };