@zag-js/color-picker 0.10.4 → 0.11.0

package/dist/index.d.mts

@@ -0,0 +1,150 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import { ColorChannel, Color, ColorAxes, ColorFormat } from '@zag-js/color-utils';
+export { Color, ColorChannel } from '@zag-js/color-utils';
+import { Orientation, RequiredBy, CommonProperties, Context, PropTypes, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { StateMachine } from '@zag-js/core';
+
+declare const anatomy: _zag_js_anatomy.Anatomy<"area" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBg" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBg" | "content" | "label" | "eyeDropTrigger">;
+
+type ColorChannelProps = {
+    channel: ColorChannel;
+    orientation?: Orientation;
+};
+type ExtendedColorChannel = ColorChannel | "hex" | "css";
+type ColorChannelInputProps = {
+    channel: ExtendedColorChannel;
+    orientation?: Orientation;
+};
+type ColorAreaProps = {
+    xChannel: ColorChannel;
+    yChannel: ColorChannel;
+};
+type ColorSwatchProps = {
+    readOnly?: boolean;
+    value: string | Color;
+};
+type ChangeDetails = {
+    value: string;
+    valueAsColor: Color;
+};
+type ElementIds = Partial<{
+    content: string;
+    area: string;
+    areaGradient: string;
+    areaThumb: string;
+    channelInput(id: string): string;
+    channelSliderTrack(id: ColorChannel): string;
+    channelSliderThumb(id: ColorChannel): string;
+}>;
+type PublicContext = CommonProperties & {
+    /**
+     * The ids of the elements in the color picker. Useful for composition.
+     */
+    ids?: ElementIds;
+    /**
+     * The direction of the color picker
+     */
+    dir: "ltr" | "rtl";
+    /**
+     * The current color value
+     */
+    value: string;
+    /**
+     * Whether the color picker is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the color picker is read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Handler that is called when the value changes, as the user drags.
+     */
+    onChange?: (details: ChangeDetails) => void;
+    /**
+     * Handler that is called when the user stops dragging.
+     */
+    onChangeEnd?: (details: ChangeDetails) => void;
+};
+type PrivateContext = Context<{
+    /**
+     * The id of the thumb that is currently being dragged
+     */
+    activeId: string | null;
+    /**
+     * The color value as a Color object
+     */
+    valueAsColor: Color;
+    /**
+     * The channel that is currently being interacted with
+     */
+    activeChannel: Partial<ColorAxes> | null;
+    /**
+     * The orientation of the channel that is currently being interacted with
+     */
+    activeOrientation: Orientation | null;
+}>;
+type ComputedContext = Readonly<{
+    /**
+     * Whether the color picker is in RTL mode
+     */
+    isRtl: boolean;
+    /**
+     * Whether the color picker is interactive
+     */
+    isInteractive: boolean;
+}>;
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type MachineContext = PublicContext & PrivateContext & ComputedContext;
+type MachineState = {
+    value: "idle" | "focused" | "dragging";
+};
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    /**
+     * Whether the color picker is being dragged
+     */
+    isDragging: boolean;
+    /**
+     * The current color value (as a string)
+     */
+    value: string;
+    /**
+     * The current color value (as a Color object)
+     */
+    valueAsColor: Color;
+    /**
+     * The current color channels of the color
+     */
+    channels: [ColorChannel, ColorChannel, ColorChannel];
+    /**
+     * Function to set the color value
+     */
+    setColor(value: string | Color): void;
+    /**
+     * Function to set the color value of a specific channel
+     */
+    setChannelValue(channel: ColorChannel, value: number): void;
+    /**
+     * Function to set the color format
+     */
+    setFormat(format: ColorFormat): void;
+    contentProps: T["element"];
+    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"];
+    eyeDropperTriggerProps: T["button"];
+    getSwatchBackgroundProps(props: ColorSwatchProps): T["element"];
+    getSwatchProps(props: ColorSwatchProps): T["element"];
+};
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+export { ColorAreaProps, ColorChannelProps, ColorSwatchProps, UserDefinedContext as Context, anatomy, connect, machine };

package/dist/index.d.ts

@@ -1,4 +1,150 @@
-export { anatomy } from "./color-picker.anatomy";
-export { connect } from "./color-picker.connect";
-export { machine } from "./color-picker.machine";
-export type { Color, ColorAreaProps, ColorChannel, ColorChannelProps, ColorSwatchProps, UserDefinedContext as Context, } from "./color-picker.types";
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+import { ColorChannel, Color, ColorAxes, ColorFormat } from '@zag-js/color-utils';
+export { Color, ColorChannel } from '@zag-js/color-utils';
+import { Orientation, RequiredBy, CommonProperties, Context, PropTypes, NormalizeProps } from '@zag-js/types';
+import * as _zag_js_core from '@zag-js/core';
+import { StateMachine } from '@zag-js/core';
+
+declare const anatomy: _zag_js_anatomy.Anatomy<"area" | "areaThumb" | "areaGradient" | "channelSliderTrack" | "channelSliderTrackBg" | "channelSliderThumb" | "channelInput" | "swatch" | "swatchBg" | "content" | "label" | "eyeDropTrigger">;
+
+type ColorChannelProps = {
+    channel: ColorChannel;
+    orientation?: Orientation;
+};
+type ExtendedColorChannel = ColorChannel | "hex" | "css";
+type ColorChannelInputProps = {
+    channel: ExtendedColorChannel;
+    orientation?: Orientation;
+};
+type ColorAreaProps = {
+    xChannel: ColorChannel;
+    yChannel: ColorChannel;
+};
+type ColorSwatchProps = {
+    readOnly?: boolean;
+    value: string | Color;
+};
+type ChangeDetails = {
+    value: string;
+    valueAsColor: Color;
+};
+type ElementIds = Partial<{
+    content: string;
+    area: string;
+    areaGradient: string;
+    areaThumb: string;
+    channelInput(id: string): string;
+    channelSliderTrack(id: ColorChannel): string;
+    channelSliderThumb(id: ColorChannel): string;
+}>;
+type PublicContext = CommonProperties & {
+    /**
+     * The ids of the elements in the color picker. Useful for composition.
+     */
+    ids?: ElementIds;
+    /**
+     * The direction of the color picker
+     */
+    dir: "ltr" | "rtl";
+    /**
+     * The current color value
+     */
+    value: string;
+    /**
+     * Whether the color picker is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the color picker is read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Handler that is called when the value changes, as the user drags.
+     */
+    onChange?: (details: ChangeDetails) => void;
+    /**
+     * Handler that is called when the user stops dragging.
+     */
+    onChangeEnd?: (details: ChangeDetails) => void;
+};
+type PrivateContext = Context<{
+    /**
+     * The id of the thumb that is currently being dragged
+     */
+    activeId: string | null;
+    /**
+     * The color value as a Color object
+     */
+    valueAsColor: Color;
+    /**
+     * The channel that is currently being interacted with
+     */
+    activeChannel: Partial<ColorAxes> | null;
+    /**
+     * The orientation of the channel that is currently being interacted with
+     */
+    activeOrientation: Orientation | null;
+}>;
+type ComputedContext = Readonly<{
+    /**
+     * Whether the color picker is in RTL mode
+     */
+    isRtl: boolean;
+    /**
+     * Whether the color picker is interactive
+     */
+    isInteractive: boolean;
+}>;
+type UserDefinedContext = RequiredBy<PublicContext, "id">;
+type MachineContext = PublicContext & PrivateContext & ComputedContext;
+type MachineState = {
+    value: "idle" | "focused" | "dragging";
+};
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    /**
+     * Whether the color picker is being dragged
+     */
+    isDragging: boolean;
+    /**
+     * The current color value (as a string)
+     */
+    value: string;
+    /**
+     * The current color value (as a Color object)
+     */
+    valueAsColor: Color;
+    /**
+     * The current color channels of the color
+     */
+    channels: [ColorChannel, ColorChannel, ColorChannel];
+    /**
+     * Function to set the color value
+     */
+    setColor(value: string | Color): void;
+    /**
+     * Function to set the color value of a specific channel
+     */
+    setChannelValue(channel: ColorChannel, value: number): void;
+    /**
+     * Function to set the color format
+     */
+    setFormat(format: ColorFormat): void;
+    contentProps: T["element"];
+    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"];
+    eyeDropperTriggerProps: T["button"];
+    getSwatchBackgroundProps(props: ColorSwatchProps): T["element"];
+    getSwatchProps(props: ColorSwatchProps): T["element"];
+};
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+export { ColorAreaProps, ColorChannelProps, ColorSwatchProps, UserDefinedContext as Context, anatomy, connect, machine };