@zag-js/color-picker 1.34.1 → 1.35.1

package/dist/color-picker.props.d.ts

@@ -0,0 +1,21 @@
+import { AreaProps, ChannelProps, ColorPickerProps, SwatchProps, SwatchTriggerProps, TransparencyGridProps } from './color-picker.types.js';
+import '@zag-js/color-utils';
+import '@zag-js/core';
+import '@zag-js/dismissable';
+import '@zag-js/popper';
+import '@zag-js/types';
+
+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 { areaProps, channelProps, props, splitAreaProps, splitChannelProps, splitProps, splitSwatchProps, splitSwatchTriggerProps, splitTransparencyGridProps, swatchProps, swatchTriggerProps, transparencyGridProps };

package/dist/color-picker.props.js

@@ -0,0 +1,94 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/color-picker.props.ts
+var color_picker_props_exports = {};
+__export(color_picker_props_exports, {
+  areaProps: () => areaProps,
+  channelProps: () => channelProps,
+  props: () => props,
+  splitAreaProps: () => splitAreaProps,
+  splitChannelProps: () => splitChannelProps,
+  splitProps: () => splitProps,
+  splitSwatchProps: () => splitSwatchProps,
+  splitSwatchTriggerProps: () => splitSwatchTriggerProps,
+  splitTransparencyGridProps: () => splitTransparencyGridProps,
+  swatchProps: () => swatchProps,
+  swatchTriggerProps: () => swatchTriggerProps,
+  transparencyGridProps: () => transparencyGridProps
+});
+module.exports = __toCommonJS(color_picker_props_exports);
+var import_types = require("@zag-js/types");
+var import_utils = require("@zag-js/utils");
+var props = (0, import_types.createProps)()([
+  "closeOnSelect",
+  "dir",
+  "disabled",
+  "format",
+  "defaultFormat",
+  "getRootNode",
+  "id",
+  "ids",
+  "initialFocusEl",
+  "inline",
+  "name",
+  "positioning",
+  "onFocusOutside",
+  "onFormatChange",
+  "onInteractOutside",
+  "onOpenChange",
+  "onPointerDownOutside",
+  "onValueChange",
+  "onValueChangeEnd",
+  "defaultOpen",
+  "open",
+  "positioning",
+  "required",
+  "readOnly",
+  "value",
+  "defaultValue",
+  "invalid",
+  "openAutoFocus"
+]);
+var splitProps = (0, import_utils.createSplitProps)(props);
+var areaProps = (0, import_types.createProps)()(["xChannel", "yChannel"]);
+var splitAreaProps = (0, import_utils.createSplitProps)(areaProps);
+var channelProps = (0, import_types.createProps)()(["channel", "orientation"]);
+var splitChannelProps = (0, import_utils.createSplitProps)(channelProps);
+var swatchTriggerProps = (0, import_types.createProps)()(["value", "disabled"]);
+var splitSwatchTriggerProps = (0, import_utils.createSplitProps)(swatchTriggerProps);
+var swatchProps = (0, import_types.createProps)()(["value", "respectAlpha"]);
+var splitSwatchProps = (0, import_utils.createSplitProps)(swatchProps);
+var transparencyGridProps = (0, import_types.createProps)()(["size"]);
+var splitTransparencyGridProps = (0, import_utils.createSplitProps)(transparencyGridProps);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  areaProps,
+  channelProps,
+  props,
+  splitAreaProps,
+  splitChannelProps,
+  splitProps,
+  splitSwatchProps,
+  splitSwatchTriggerProps,
+  splitTransparencyGridProps,
+  swatchProps,
+  swatchTriggerProps,
+  transparencyGridProps
+});

package/dist/color-picker.props.mjs

@@ -0,0 +1,58 @@
+// src/color-picker.props.ts
+import { createProps } from "@zag-js/types";
+import { createSplitProps } from "@zag-js/utils";
+var props = createProps()([
+  "closeOnSelect",
+  "dir",
+  "disabled",
+  "format",
+  "defaultFormat",
+  "getRootNode",
+  "id",
+  "ids",
+  "initialFocusEl",
+  "inline",
+  "name",
+  "positioning",
+  "onFocusOutside",
+  "onFormatChange",
+  "onInteractOutside",
+  "onOpenChange",
+  "onPointerDownOutside",
+  "onValueChange",
+  "onValueChangeEnd",
+  "defaultOpen",
+  "open",
+  "positioning",
+  "required",
+  "readOnly",
+  "value",
+  "defaultValue",
+  "invalid",
+  "openAutoFocus"
+]);
+var splitProps = createSplitProps(props);
+var areaProps = createProps()(["xChannel", "yChannel"]);
+var splitAreaProps = createSplitProps(areaProps);
+var channelProps = createProps()(["channel", "orientation"]);
+var splitChannelProps = createSplitProps(channelProps);
+var swatchTriggerProps = createProps()(["value", "disabled"]);
+var splitSwatchTriggerProps = createSplitProps(swatchTriggerProps);
+var swatchProps = createProps()(["value", "respectAlpha"]);
+var splitSwatchProps = createSplitProps(swatchProps);
+var transparencyGridProps = createProps()(["size"]);
+var splitTransparencyGridProps = createSplitProps(transparencyGridProps);
+export {
+  areaProps,
+  channelProps,
+  props,
+  splitAreaProps,
+  splitChannelProps,
+  splitProps,
+  splitSwatchProps,
+  splitSwatchTriggerProps,
+  splitTransparencyGridProps,
+  swatchProps,
+  swatchTriggerProps,
+  transparencyGridProps
+};

package/dist/color-picker.types.d.mts

@@ -0,0 +1,303 @@
+import { ColorChannel, Color, ColorFormat, ColorAxes } from '@zag-js/color-utils';
+export { Color, ColorAxes, ColorChannel, ColorFormat, ColorType } from '@zag-js/color-utils';
+import { Service, EventObject, Machine } from '@zag-js/core';
+import { InteractOutsideHandlers } from '@zag-js/dismissable';
+import { PositioningOptions } from '@zag-js/popper';
+export { PositioningOptions } from '@zag-js/popper';
+import { RequiredBy, CommonProperties, DirectionProperty, Orientation, PropTypes } from '@zag-js/types';
+
+type ExtendedColorChannel = ColorChannel | "hex" | "css";
+interface EyeDropper {
+    new (): EyeDropper;
+    open: (options?: {
+        signal?: AbortSignal | undefined;
+    }) => Promise<{
+        sRGBHex: string;
+    }>;
+    [Symbol.toStringTag]: "EyeDropper";
+}
+declare global {
+    interface Window {
+        EyeDropper: EyeDropper;
+    }
+}
+interface ValueChangeDetails {
+    value: Color;
+    valueAsString: string;
+}
+interface OpenChangeDetails {
+    open: boolean;
+    value: Color;
+}
+interface FormatChangeDetails {
+    format: ColorFormat;
+}
+type ElementIds = Partial<{
+    root: string;
+    control: string;
+    trigger: string;
+    label: string;
+    input: string;
+    hiddenInput: string;
+    content: string;
+    area: string;
+    areaGradient: string;
+    positioner: string;
+    formatSelect: string;
+    areaThumb: string;
+    channelInput: (id: string) => string;
+    channelSliderTrack: (id: ColorChannel) => string;
+    channelSliderThumb: (id: ColorChannel) => string;
+}>;
+interface ColorPickerProps extends CommonProperties, DirectionProperty, InteractOutsideHandlers {
+    /**
+     * The ids of the elements in the color picker. Useful for composition.
+     */
+    ids?: ElementIds | undefined;
+    /**
+     * 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
+     */
+    defaultValue?: Color | undefined;
+    /**
+     * Whether the color picker is disabled
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Whether the color picker is read-only
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * Whether the color picker is required
+     */
+    required?: boolean | undefined;
+    /**
+     * Whether the color picker is invalid
+     */
+    invalid?: boolean | undefined;
+    /**
+     * Handler that is called when the value changes, as the user drags.
+     */
+    onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+    /**
+     * Handler that is called when the user stops dragging.
+     */
+    onValueChangeEnd?: ((details: ValueChangeDetails) => void) | undefined;
+    /**
+     * Handler that is called when the user opens or closes the color picker.
+     */
+    onOpenChange?: ((details: OpenChangeDetails) => void) | undefined;
+    /**
+     * The name for the form input
+     */
+    name?: string | undefined;
+    /**
+     * The positioning options for the color picker
+     */
+    positioning?: PositioningOptions | undefined;
+    /**
+     * The initial focus element when the color picker is opened.
+     */
+    initialFocusEl?: (() => HTMLElement | null) | undefined;
+    /**
+     * The controlled open state of the color picker
+     */
+    open?: boolean | undefined;
+    /**
+     * 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.
+     */
+    defaultOpen?: boolean | undefined;
+    /**
+     * The controlled color format to use
+     */
+    format?: ColorFormat | undefined;
+    /**
+     * The initial color format when rendered.
+     * Use when you don't need to control the color format of the color picker.
+     * @default "rgba"
+     */
+    defaultFormat?: ColorFormat | undefined;
+    /**
+     * Function called when the color format changes
+     */
+    onFormatChange?: ((details: FormatChangeDetails) => void) | undefined;
+    /**
+     * Whether to close the color picker when a swatch is selected
+     * @default false
+     */
+    closeOnSelect?: boolean | undefined;
+    /**
+     * Whether to auto focus the color picker when it is opened
+     * @default true
+     */
+    openAutoFocus?: boolean | undefined;
+    /**
+     * Whether to render the color picker inline
+     */
+    inline?: boolean | undefined;
+}
+type PropsWithDefault = "defaultFormat" | "defaultValue" | "openAutoFocus" | "dir" | "positioning";
+type ColorPickerSchema = {
+    tag: "open" | "closed" | "dragging" | "focused";
+    state: "idle" | "focused" | "open" | "open.idle" | "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;
+}
+interface ChannelSliderProps extends ChannelProps {
+    format?: ColorFormat | undefined;
+}
+interface ChannelInputProps {
+    channel: ExtendedColorChannel;
+    orientation?: Orientation | undefined;
+}
+interface AreaProps {
+    xChannel?: ColorChannel | undefined;
+    yChannel?: ColorChannel | undefined;
+}
+interface SwatchTriggerProps {
+    /**
+     * The color value
+     */
+    value: string | Color;
+    /**
+     * Whether the swatch trigger is disabled
+     */
+    disabled?: boolean | undefined;
+}
+interface SwatchTriggerState {
+    value: Color;
+    valueAsString: string;
+    checked: boolean;
+    disabled: boolean;
+}
+interface SwatchProps {
+    /**
+     * The color value
+     */
+    value: string | Color;
+    /**
+     * Whether to include the alpha channel in the color
+     */
+    respectAlpha?: boolean | undefined;
+}
+interface TransparencyGridProps {
+    size?: string | undefined;
+}
+interface ColorPickerApi<T extends PropTypes = PropTypes> {
+    /**
+     * Whether the color picker is being dragged
+     */
+    dragging: boolean;
+    /**
+     * Whether the color picker is open
+     */
+    open: boolean;
+    /**
+     * Whether the color picker is rendered inline
+     */
+    inline: boolean;
+    /**
+     * The current color value (as a string)
+     */
+    value: Color;
+    /**
+     * The current color value (as a Color object)
+     */
+    valueAsString: string;
+    /**
+     * Function to set the color value
+     */
+    setValue: (value: string | Color) => void;
+    /**
+     * Function to set the color value
+     */
+    getChannelValue: (channel: ColorChannel) => string;
+    /**
+     * Function to get the formatted and localized value of a specific channel
+     */
+    getChannelValueText: (channel: ColorChannel, locale: string) => string;
+    /**
+     * Function to set the color value of a specific channel
+     */
+    setChannelValue: (channel: ColorChannel, value: number) => void;
+    /**
+     * The current color format
+     */
+    format: ColorFormat;
+    /**
+     * Function to set the color format
+     */
+    setFormat: (format: ColorFormat) => void;
+    /**
+     * The alpha value of the color
+     */
+    alpha: number;
+    /**
+     * Function to set the color alpha
+     */
+    setAlpha: (value: number) => void;
+    /**
+     * Function to open or close the color picker
+     */
+    setOpen: (open: boolean) => void;
+    getRootProps: () => T["element"];
+    getLabelProps: () => T["element"];
+    getControlProps: () => T["element"];
+    getTriggerProps: () => T["button"];
+    getPositionerProps: () => T["element"];
+    getContentProps: () => T["element"];
+    getHiddenInputProps: () => T["input"];
+    getValueTextProps: () => T["element"];
+    getAreaProps: (props?: AreaProps) => T["element"];
+    getAreaBackgroundProps: (props?: AreaProps) => T["element"];
+    getAreaThumbProps: (props?: AreaProps) => T["element"];
+    getChannelInputProps: (props: ChannelInputProps) => T["input"];
+    getChannelSliderProps: (props: ChannelSliderProps) => T["element"];
+    getChannelSliderTrackProps: (props: ChannelSliderProps) => T["element"];
+    getChannelSliderThumbProps: (props: ChannelSliderProps) => T["element"];
+    getChannelSliderLabelProps: (props: ChannelProps) => T["element"];
+    getChannelSliderValueTextProps: (props: ChannelProps) => T["element"];
+    getTransparencyGridProps: (props?: TransparencyGridProps) => T["element"];
+    getEyeDropperTriggerProps: () => T["button"];
+    getSwatchGroupProps: () => T["element"];
+    getSwatchTriggerProps: (props: SwatchTriggerProps) => T["button"];
+    getSwatchTriggerState: (props: SwatchTriggerProps) => SwatchTriggerState;
+    getSwatchProps: (props: SwatchProps) => T["element"];
+    getSwatchIndicatorProps: (props: SwatchProps) => T["element"];
+    getFormatSelectProps: () => T["select"];
+    getFormatTriggerProps: () => T["button"];
+}
+
+export type { AreaProps, ChannelInputProps, ChannelProps, ChannelSliderProps, ColorPickerApi, ColorPickerMachine, ColorPickerProps, ColorPickerSchema, ColorPickerService, ElementIds, ExtendedColorChannel, FormatChangeDetails, OpenChangeDetails, SwatchProps, SwatchTriggerProps, SwatchTriggerState, TransparencyGridProps, ValueChangeDetails };