@zag-js/color-picker 0.82.2 → 1.0.1

package/dist/index.d.mts

@@ -1,11 +1,11 @@
 import { InteractOutsideHandlers } from '@zag-js/dismissable';
 export { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/dismissable';
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, Orientation, PropTypes, CommonProperties, DirectionProperty, NormalizeProps } from '@zag-js/types';
-import { Color, ColorFormat, ColorChannel } from '@zag-js/color-utils';
+import { CommonProperties, DirectionProperty, Orientation, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
+import { Color, ColorFormat, ColorChannel, ColorAxes } 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 { Machine, StateMachine } from '@zag-js/core';
+import { Service, Machine, EventObject } from '@zag-js/core';
 import { PositioningOptions } from '@zag-js/popper';
 export { PositioningOptions } from '@zag-js/popper';
 
@@ -53,16 +53,21 @@ type ElementIds = Partial<{
     channelSliderTrack(id: ColorChannel): string;
     channelSliderThumb(id: ColorChannel): string;
 }>;
-interface PublicContext extends CommonProperties, DirectionProperty, InteractOutsideHandlers {
+interface ColorPickerProps extends CommonProperties, DirectionProperty, InteractOutsideHandlers {
     /**
      * The ids of the elements in the color picker. Useful for composition.
      */
     ids?: ElementIds | undefined;
     /**
-     * The current color value
+     * The controlled color value of the color picker
+     */
+    value?: Color | undefined;
+    /**
+     * The initial color value when rendered.
+     * Use when you don't need to control the color value of the color picker.
      * @default #000000
      */
-    value: Color;
+    defaultValue?: Color | undefined;
     /**
      * Whether the color picker is disabled
      */
@@ -98,24 +103,30 @@ interface PublicContext extends CommonProperties, DirectionProperty, InteractOut
     /**
      * The positioning options for the color picker
      */
-    positioning: PositioningOptions;
+    positioning?: PositioningOptions | undefined;
     /**
      * The initial focus element when the color picker is opened.
      */
     initialFocusEl?: (() => HTMLElement | null) | undefined;
     /**
-     * Whether the color picker is open
+     * The controlled open state of the color picker
      */
     open?: boolean | undefined;
     /**
-     * Whether the color picker open state is controlled by the user
+     * The initial open state of the color picker when rendered.
+     * Use when you don't need to control the open state of the color picker.
      */
-    "open.controlled"?: boolean | undefined;
+    defaultOpen?: boolean | undefined;
+    /**
+     * The controlled color format to use
+     */
+    format?: ColorFormat | undefined;
     /**
-     * The color format to use
+     * The initial color format when rendered.
+     * Use when you don't need to control the color format of the color picker.
      * @default "rgba"
      */
-    format: ColorFormat;
+    defaultFormat?: ColorFormat | undefined;
     /**
      * Function called when the color format changes
      */
@@ -131,45 +142,35 @@ interface PublicContext extends CommonProperties, DirectionProperty, InteractOut
      */
     openAutoFocus?: boolean | undefined;
 }
-interface PrivateContext {
-}
-type ComputedContext = Readonly<{
-    /**
-     * @computed
-     * Whether the color picker is in RTL mode
-     */
-    isRtl: boolean;
-    /**
-     * @computed
-     * Whether the color picker is interactive
-     */
-    isInteractive: boolean;
-    /**
-     * @computed
-     * The color value as a Color object
-     */
-    valueAsString: string;
-    /**
-     * @computed
-     * 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 {
-}
-interface MachineState {
-    tags: "open" | "closed" | "dragging" | "focused";
-    value: "idle" | "focused" | "open" | "open:dragging";
-}
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
+type PropsWithDefault = "defaultFormat" | "defaultValue" | "openAutoFocus" | "dir" | "positioning";
+type ColorPickerSchema = {
+    tag: "open" | "closed" | "dragging" | "focused";
+    state: "idle" | "focused" | "open" | "open:dragging";
+    props: RequiredBy<ColorPickerProps, PropsWithDefault>;
+    computed: {
+        disabled: boolean;
+        rtl: boolean;
+        interactive: boolean;
+        valueAsString: string;
+        areaValue: Color;
+    };
+    context: {
+        format: ColorFormat;
+        value: Color;
+        activeId: string | null;
+        activeChannel: Partial<ColorAxes> | null;
+        activeOrientation: Orientation | null;
+        fieldsetDisabled: boolean;
+        currentPlacement: PositioningOptions["placement"] | undefined;
+        restoreFocus: boolean;
+    };
+    event: EventObject;
+    action: string;
+    effect: string;
+    guard: string;
+};
+type ColorPickerService = Service<ColorPickerSchema>;
+type ColorPickerMachine = Machine<ColorPickerSchema>;
 interface ChannelProps {
     channel: ColorChannel;
     orientation?: Orientation | undefined;
@@ -214,7 +215,7 @@ interface SwatchProps {
 interface TransparencyGridProps {
     size?: string | undefined;
 }
-interface MachineApi<T extends PropTypes = PropTypes> {
+interface ColorPickerApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the color picker is being dragged
      */
@@ -295,10 +296,23 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     getFormatTriggerProps(): T["button"];
 }
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+declare function connect<T extends PropTypes>(service: ColorPickerService, normalize: NormalizeProps<T>): ColorPickerApi<T>;
 
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+declare const machine: _zag_js_core.Machine<ColorPickerSchema>;
 
 declare const parse: (colorString: string) => Color;
 
-export { type MachineApi as Api, type AreaProps, type ChannelInputProps, type ChannelProps, type ChannelSliderProps, type UserDefinedContext as Context, type ElementIds, type FormatChangeDetails, type OpenChangeDetails, type Service, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type ValueChangeDetails, anatomy, connect, machine, parse };
+declare const props: (keyof ColorPickerProps)[];
+declare const splitProps: <Props extends Partial<ColorPickerProps>>(props: Props) => [Partial<ColorPickerProps>, Omit<Props, keyof ColorPickerProps>];
+declare const areaProps: (keyof AreaProps)[];
+declare const splitAreaProps: <Props extends AreaProps>(props: Props) => [AreaProps, Omit<Props, keyof AreaProps>];
+declare const channelProps: (keyof ChannelProps)[];
+declare const splitChannelProps: <Props extends ChannelProps>(props: Props) => [ChannelProps, Omit<Props, keyof ChannelProps>];
+declare const swatchTriggerProps: (keyof SwatchTriggerProps)[];
+declare const splitSwatchTriggerProps: <Props extends SwatchTriggerProps>(props: Props) => [SwatchTriggerProps, Omit<Props, keyof SwatchTriggerProps>];
+declare const swatchProps: (keyof SwatchProps)[];
+declare const splitSwatchProps: <Props extends SwatchProps>(props: Props) => [SwatchProps, Omit<Props, keyof SwatchProps>];
+declare const transparencyGridProps: "size"[];
+declare const splitTransparencyGridProps: <Props extends TransparencyGridProps>(props: Props) => [TransparencyGridProps, Omit<Props, "size">];
+
+export { type ColorPickerApi as Api, type AreaProps, type ChannelInputProps, type ChannelProps, type ChannelSliderProps, type ElementIds, type FormatChangeDetails, type ColorPickerMachine as Machine, type OpenChangeDetails, type ColorPickerProps as Props, type ColorPickerService as Service, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type ValueChangeDetails, anatomy, areaProps, channelProps, connect, machine, parse, props, splitAreaProps, splitChannelProps, splitProps, splitSwatchProps, splitSwatchTriggerProps, splitTransparencyGridProps, swatchProps, swatchTriggerProps, transparencyGridProps };

package/dist/index.d.ts

@@ -1,11 +1,11 @@
 import { InteractOutsideHandlers } from '@zag-js/dismissable';
 export { FocusOutsideEvent, InteractOutsideEvent, PointerDownOutsideEvent } from '@zag-js/dismissable';
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, Orientation, PropTypes, CommonProperties, DirectionProperty, NormalizeProps } from '@zag-js/types';
-import { Color, ColorFormat, ColorChannel } from '@zag-js/color-utils';
+import { CommonProperties, DirectionProperty, Orientation, PropTypes, RequiredBy, NormalizeProps } from '@zag-js/types';
+import { Color, ColorFormat, ColorChannel, ColorAxes } 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 { Machine, StateMachine } from '@zag-js/core';
+import { Service, Machine, EventObject } from '@zag-js/core';
 import { PositioningOptions } from '@zag-js/popper';
 export { PositioningOptions } from '@zag-js/popper';
 
@@ -53,16 +53,21 @@ type ElementIds = Partial<{
     channelSliderTrack(id: ColorChannel): string;
     channelSliderThumb(id: ColorChannel): string;
 }>;
-interface PublicContext extends CommonProperties, DirectionProperty, InteractOutsideHandlers {
+interface ColorPickerProps extends CommonProperties, DirectionProperty, InteractOutsideHandlers {
     /**
      * The ids of the elements in the color picker. Useful for composition.
      */
     ids?: ElementIds | undefined;
     /**
-     * The current color value
+     * The controlled color value of the color picker
+     */
+    value?: Color | undefined;
+    /**
+     * The initial color value when rendered.
+     * Use when you don't need to control the color value of the color picker.
      * @default #000000
      */
-    value: Color;
+    defaultValue?: Color | undefined;
     /**
      * Whether the color picker is disabled
      */
@@ -98,24 +103,30 @@ interface PublicContext extends CommonProperties, DirectionProperty, InteractOut
     /**
      * The positioning options for the color picker
      */
-    positioning: PositioningOptions;
+    positioning?: PositioningOptions | undefined;
     /**
      * The initial focus element when the color picker is opened.
      */
     initialFocusEl?: (() => HTMLElement | null) | undefined;
     /**
-     * Whether the color picker is open
+     * The controlled open state of the color picker
      */
     open?: boolean | undefined;
     /**
-     * Whether the color picker open state is controlled by the user
+     * The initial open state of the color picker when rendered.
+     * Use when you don't need to control the open state of the color picker.
      */
-    "open.controlled"?: boolean | undefined;
+    defaultOpen?: boolean | undefined;
+    /**
+     * The controlled color format to use
+     */
+    format?: ColorFormat | undefined;
     /**
-     * The color format to use
+     * The initial color format when rendered.
+     * Use when you don't need to control the color format of the color picker.
      * @default "rgba"
      */
-    format: ColorFormat;
+    defaultFormat?: ColorFormat | undefined;
     /**
      * Function called when the color format changes
      */
@@ -131,45 +142,35 @@ interface PublicContext extends CommonProperties, DirectionProperty, InteractOut
      */
     openAutoFocus?: boolean | undefined;
 }
-interface PrivateContext {
-}
-type ComputedContext = Readonly<{
-    /**
-     * @computed
-     * Whether the color picker is in RTL mode
-     */
-    isRtl: boolean;
-    /**
-     * @computed
-     * Whether the color picker is interactive
-     */
-    isInteractive: boolean;
-    /**
-     * @computed
-     * The color value as a Color object
-     */
-    valueAsString: string;
-    /**
-     * @computed
-     * 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 {
-}
-interface MachineState {
-    tags: "open" | "closed" | "dragging" | "focused";
-    value: "idle" | "focused" | "open" | "open:dragging";
-}
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-type Service = Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
+type PropsWithDefault = "defaultFormat" | "defaultValue" | "openAutoFocus" | "dir" | "positioning";
+type ColorPickerSchema = {
+    tag: "open" | "closed" | "dragging" | "focused";
+    state: "idle" | "focused" | "open" | "open:dragging";
+    props: RequiredBy<ColorPickerProps, PropsWithDefault>;
+    computed: {
+        disabled: boolean;
+        rtl: boolean;
+        interactive: boolean;
+        valueAsString: string;
+        areaValue: Color;
+    };
+    context: {
+        format: ColorFormat;
+        value: Color;
+        activeId: string | null;
+        activeChannel: Partial<ColorAxes> | null;
+        activeOrientation: Orientation | null;
+        fieldsetDisabled: boolean;
+        currentPlacement: PositioningOptions["placement"] | undefined;
+        restoreFocus: boolean;
+    };
+    event: EventObject;
+    action: string;
+    effect: string;
+    guard: string;
+};
+type ColorPickerService = Service<ColorPickerSchema>;
+type ColorPickerMachine = Machine<ColorPickerSchema>;
 interface ChannelProps {
     channel: ColorChannel;
     orientation?: Orientation | undefined;
@@ -214,7 +215,7 @@ interface SwatchProps {
 interface TransparencyGridProps {
     size?: string | undefined;
 }
-interface MachineApi<T extends PropTypes = PropTypes> {
+interface ColorPickerApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the color picker is being dragged
      */
@@ -295,10 +296,23 @@ interface MachineApi<T extends PropTypes = PropTypes> {
     getFormatTriggerProps(): T["button"];
 }
 
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T>;
+declare function connect<T extends PropTypes>(service: ColorPickerService, normalize: NormalizeProps<T>): ColorPickerApi<T>;
 
-declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+declare const machine: _zag_js_core.Machine<ColorPickerSchema>;
 
 declare const parse: (colorString: string) => Color;
 
-export { type MachineApi as Api, type AreaProps, type ChannelInputProps, type ChannelProps, type ChannelSliderProps, type UserDefinedContext as Context, type ElementIds, type FormatChangeDetails, type OpenChangeDetails, type Service, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type ValueChangeDetails, anatomy, connect, machine, parse };
+declare const props: (keyof ColorPickerProps)[];
+declare const splitProps: <Props extends Partial<ColorPickerProps>>(props: Props) => [Partial<ColorPickerProps>, Omit<Props, keyof ColorPickerProps>];
+declare const areaProps: (keyof AreaProps)[];
+declare const splitAreaProps: <Props extends AreaProps>(props: Props) => [AreaProps, Omit<Props, keyof AreaProps>];
+declare const channelProps: (keyof ChannelProps)[];
+declare const splitChannelProps: <Props extends ChannelProps>(props: Props) => [ChannelProps, Omit<Props, keyof ChannelProps>];
+declare const swatchTriggerProps: (keyof SwatchTriggerProps)[];
+declare const splitSwatchTriggerProps: <Props extends SwatchTriggerProps>(props: Props) => [SwatchTriggerProps, Omit<Props, keyof SwatchTriggerProps>];
+declare const swatchProps: (keyof SwatchProps)[];
+declare const splitSwatchProps: <Props extends SwatchProps>(props: Props) => [SwatchProps, Omit<Props, keyof SwatchProps>];
+declare const transparencyGridProps: "size"[];
+declare const splitTransparencyGridProps: <Props extends TransparencyGridProps>(props: Props) => [TransparencyGridProps, Omit<Props, "size">];
+
+export { type ColorPickerApi as Api, type AreaProps, type ChannelInputProps, type ChannelProps, type ChannelSliderProps, type ElementIds, type FormatChangeDetails, type ColorPickerMachine as Machine, type OpenChangeDetails, type ColorPickerProps as Props, type ColorPickerService as Service, type SwatchProps, type SwatchTriggerProps, type SwatchTriggerState, type TransparencyGridProps, type ValueChangeDetails, anatomy, areaProps, channelProps, connect, machine, parse, props, splitAreaProps, splitChannelProps, splitProps, splitSwatchProps, splitSwatchTriggerProps, splitTransparencyGridProps, swatchProps, swatchTriggerProps, transparencyGridProps };