@yamada-ui/color-picker 1.0.0

package/dist/use-color-input.d.ts

@@ -0,0 +1,90 @@
+import * as react from 'react';
+import { HTMLUIProps, UIPropGetter, CSSUIObject, ThemeProps } from '@yamada-ui/core';
+import { PopoverProps } from '@yamada-ui/popover';
+import { ColorPickerProps } from './color-picker.js';
+import { UseColorPickerBaseProps } from './use-color-picker.js';
+import './color-picker-body.js';
+import './color-picker-eye-dropper.js';
+import '@yamada-ui/button';
+import '@yamada-ui/icon';
+import './color-picker-sliders.js';
+import './alpha-slider.js';
+import './use-color-slider.js';
+import '@yamada-ui/form-control';
+import './hue-slider.js';
+import './color-picker-swatches.js';
+import './color-swatch.js';
+import './saturation-slider.js';
+import './use-saturation-slider.js';
+import '@yamada-ui/input';
+import '@yamada-ui/utils';
+
+type ColorPickerThemeProps = ThemeProps<"ColorPicker">;
+type ColorInputContext = {
+    value: string;
+    styles: Record<string, CSSUIObject>;
+};
+declare const ColorInputProvider: react.Provider<ColorInputContext>;
+declare const useColorInputContext: () => ColorInputContext;
+type UseColorInputOptions = {
+    /**
+     * The initial value of the color picker.
+     */
+    defaultColor?: string;
+    /**
+     * If `true`, allows input.
+     *
+     * @default true
+     */
+    allowInput?: boolean;
+    /**
+     * A callback function to format the input entered.
+     */
+    formatInput?: (value: string) => string;
+    /**
+     * If `true`, display the result component.
+     *
+     * @default false
+     */
+    withResult?: boolean;
+    /**
+     * If `true` display the eye dropper component.
+     *
+     * @default false
+     */
+    withColorPickerEyeDropper?: boolean;
+    /**
+     * If `true`, the color swatch will be closed when value is selected.
+     */
+    closeOnSelectSwatch?: boolean;
+    /**
+     * Variant for the color picker component.
+     */
+    colorPickerVariant?: ColorPickerThemeProps["variant"];
+    /**
+     * Size for the color picker component.
+     */
+    colorPickerSize?: ColorPickerThemeProps["size"];
+    /**
+     * ColorScheme for the color picker component.
+     */
+    colorPickerColorScheme?: ColorPickerThemeProps["colorScheme"];
+    /**
+     * Props for color picker component.
+     */
+    colorPickerProps?: ColorPickerProps;
+};
+type UseColorInputProps = Omit<HTMLUIProps<"input">, "size" | "offset" | "value" | "defaultValue" | "onChange"> & Omit<UseColorPickerBaseProps, "id" | "name"> & Omit<PopoverProps, "initialFocusRef" | "closeOnButton" | "isOpen" | "trigger" | "autoFocus" | "restoreFocus" | "openDelay" | "closeDelay"> & Pick<ColorPickerProps, "withPicker" | "withChannel" | "swatchesLabel" | "swatches" | "swatchesColumns"> & UseColorInputOptions;
+declare const useColorInput: ({ value: valueProp, defaultValue, fallbackValue, defaultColor, onChange: onChangeProp, onChangeStart, onChangeEnd, onSwatchClick, formatInput, closeOnBlur, closeOnEsc, placement, duration, defaultIsOpen, onOpen: onOpenProp, onClose: onCloseProp, allowInput, closeOnSelectSwatch, format, swatchesLabel, swatches, swatchesColumns, withPicker, withChannel, withResult, withColorPickerEyeDropper, colorPickerVariant, colorPickerSize, colorPickerColorScheme, ...rest }: UseColorInputProps) => {
+    value: string;
+    eyeDropperSupported: boolean;
+    allowInput: boolean;
+    getPopoverProps: (props?: PopoverProps) => PopoverProps;
+    getContainerProps: UIPropGetter;
+    getFieldProps: UIPropGetter<"input">;
+    getPickerProps: (props?: ColorPickerProps) => ColorPickerProps;
+    getEyeDropperProps: UIPropGetter<"button">;
+};
+type UseColorInputReturn = ReturnType<typeof useColorInput>;
+
+export { ColorInputProvider, type UseColorInputProps, type UseColorInputReturn, useColorInput, useColorInputContext };

package/dist/use-color-input.js

@@ -0,0 +1,340 @@
+"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/use-color-input.ts
+var use_color_input_exports = {};
+__export(use_color_input_exports, {
+  ColorInputProvider: () => ColorInputProvider,
+  useColorInput: () => useColorInput,
+  useColorInputContext: () => useColorInputContext
+});
+module.exports = __toCommonJS(use_color_input_exports);
+var import_core = require("@yamada-ui/core");
+var import_form_control = require("@yamada-ui/form-control");
+var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
+var import_use_eye_dropper = require("@yamada-ui/use-eye-dropper");
+var import_use_outside_click = require("@yamada-ui/use-outside-click");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var [ColorInputProvider, useColorInputContext] = (0, import_utils.createContext)({
+  name: "ColorInputContext",
+  errorMessage: `useColorInputContext returned is 'undefined'. Seems you forgot to wrap the components in "<ColorInput />"`
+});
+var useColorInput = ({
+  value: valueProp,
+  defaultValue,
+  fallbackValue,
+  defaultColor,
+  onChange: onChangeProp,
+  onChangeStart,
+  onChangeEnd,
+  onSwatchClick,
+  formatInput = (value) => value,
+  closeOnBlur = true,
+  closeOnEsc = true,
+  placement = "bottom-start",
+  duration = 0.2,
+  defaultIsOpen,
+  onOpen: onOpenProp,
+  onClose: onCloseProp,
+  allowInput = true,
+  closeOnSelectSwatch,
+  format,
+  swatchesLabel,
+  swatches,
+  swatchesColumns,
+  withPicker,
+  withChannel,
+  withResult = false,
+  withColorPickerEyeDropper = false,
+  colorPickerVariant,
+  colorPickerSize,
+  colorPickerColorScheme,
+  ...rest
+}) => {
+  rest = (0, import_form_control.useFormControlProps)(rest);
+  const formControlProps = (0, import_utils.pickObject)(
+    rest,
+    (0, import_form_control.getFormControlProperties)({ omit: ["aria-readonly"] })
+  );
+  const { disabled, readOnly } = formControlProps;
+  const computedProps = (0, import_utils.splitObject)(rest, import_core.layoutStyleProperties);
+  const containerRef = (0, import_react.useRef)(null);
+  const fieldRef = (0, import_react.useRef)(null);
+  const { supported: eyeDropperSupported, onOpen: onEyeDropperOpen } = (0, import_use_eye_dropper.useEyeDropper)();
+  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+    value: valueProp,
+    defaultValue,
+    onChange: onChangeProp
+  });
+  const formatRef = (0, import_react.useRef)(format != null ? format : (0, import_utils.calcFormat)(value != null ? value : ""));
+  const isInputFocused = (0, import_react.useRef)(false);
+  const [inputValue, setInputValue] = (0, import_react.useState)(value != null ? value : "");
+  const [isOpen, setIsOpen] = (0, import_react.useState)(defaultIsOpen != null ? defaultIsOpen : false);
+  const isColorPickerFull = colorPickerSize === "full";
+  const onOpen = (0, import_react.useCallback)(() => {
+    if (disabled || readOnly)
+      return;
+    setIsOpen(true);
+    onOpenProp == null ? void 0 : onOpenProp();
+  }, [onOpenProp, disabled, readOnly]);
+  const onClose = (0, import_react.useCallback)(() => {
+    if (!isOpen)
+      return;
+    const next = (0, import_utils.convertColor)(value, fallbackValue)(formatRef.current);
+    setValue((prev) => !next || prev === next ? prev : next);
+    setInputValue(formatInput(next != null ? next : ""));
+    setIsOpen(false);
+    onCloseProp == null ? void 0 : onCloseProp();
+  }, [
+    formatRef,
+    isOpen,
+    setValue,
+    onCloseProp,
+    value,
+    formatInput,
+    setInputValue,
+    fallbackValue
+  ]);
+  const onContainerClick = (0, import_react.useCallback)(() => {
+    if (isOpen)
+      return;
+    onOpen();
+  }, [isOpen, onOpen]);
+  const onInputFocus = (0, import_react.useCallback)(() => {
+    isInputFocused.current = true;
+    if (isOpen)
+      return;
+    onOpen();
+  }, [isOpen, onOpen]);
+  const onInputBlur = (0, import_react.useCallback)(() => {
+    isInputFocused.current = false;
+  }, []);
+  const onContainerBlur = (0, import_react.useCallback)(
+    (ev) => {
+      const relatedTarget = (0, import_utils.getEventRelatedTarget)(ev);
+      if ((0, import_utils.isContains)(containerRef.current, relatedTarget))
+        return;
+      if (!closeOnBlur)
+        return;
+      if (isOpen)
+        onClose();
+    },
+    [closeOnBlur, isOpen, onClose]
+  );
+  const onInputKeyDown = (0, import_react.useCallback)(
+    (ev) => {
+      if (ev.key === " ")
+        ev.key = ev.code;
+      if (disabled || readOnly)
+        return;
+      const actions = {
+        Space: !isOpen ? onOpen : void 0,
+        Enter: !isOpen ? onOpen : void 0,
+        Escape: closeOnEsc ? onClose : void 0
+      };
+      const action = actions[ev.key];
+      if (!action)
+        return;
+      ev.preventDefault();
+      ev.stopPropagation();
+      action();
+    },
+    [disabled, readOnly, isOpen, onOpen, closeOnEsc, onClose]
+  );
+  const onInputChange = (0, import_react.useCallback)(
+    (ev) => {
+      const value2 = ev.target.value;
+      setInputValue(formatInput(value2));
+      setValue(value2);
+    },
+    [setInputValue, formatInput, setValue]
+  );
+  const onColorPickerChange = (0, import_react.useCallback)(
+    (value2) => {
+      setValue(value2);
+      if (!isInputFocused.current)
+        setInputValue(formatInput(value2));
+    },
+    [setValue, formatInput]
+  );
+  const onEyeDropperClick = (0, import_react.useCallback)(
+    async (ev) => {
+      var _a;
+      ev.preventDefault();
+      ev.stopPropagation();
+      try {
+        const { sRGBHex } = (_a = await onEyeDropperOpen()) != null ? _a : {};
+        if (!sRGBHex)
+          return;
+        onColorPickerChange(sRGBHex);
+      } catch {
+      }
+    },
+    [onEyeDropperOpen, onColorPickerChange]
+  );
+  (0, import_use_outside_click.useOutsideClick)({
+    ref: containerRef,
+    handler: onClose,
+    enabled: closeOnBlur
+  });
+  (0, import_utils.useUpdateEffect)(() => {
+    if (!format)
+      return;
+    formatRef.current = format;
+    const nextValue = (0, import_utils.convertColor)(value, fallbackValue)(format);
+    if (!nextValue)
+      return;
+    setInputValue(formatInput(nextValue));
+    setValue(nextValue);
+  }, [format, fallbackValue]);
+  const getPopoverProps = (0, import_react.useCallback)(
+    (props) => ({
+      matchWidth: isColorPickerFull,
+      ...rest,
+      ...props,
+      isOpen,
+      onOpen,
+      onClose,
+      placement,
+      duration,
+      trigger: "never",
+      closeOnButton: false
+    }),
+    [isColorPickerFull, duration, onClose, onOpen, placement, rest, isOpen]
+  );
+  const getContainerProps = (0, import_react.useCallback)(
+    (props = {}, ref = null) => ({
+      ref: (0, import_utils.mergeRefs)(containerRef, ref),
+      ...computedProps[0],
+      ...props,
+      ...formControlProps,
+      onClick: (0, import_utils.handlerAll)(props.onClick, rest.onClick, onContainerClick),
+      onBlur: (0, import_utils.handlerAll)(props.onBlur, rest.onBlur, onContainerBlur)
+    }),
+    [computedProps, formControlProps, onContainerBlur, onContainerClick, rest]
+  );
+  const getFieldProps = (0, import_react.useCallback)(
+    (props = {}, ref = null) => ({
+      ref: (0, import_utils.mergeRefs)(fieldRef, ref),
+      tabIndex: !allowInput ? -1 : 0,
+      ...(0, import_utils.omitObject)(computedProps[1], ["aria-readonly"]),
+      ...props,
+      style: {
+        ...props.style,
+        ...!allowInput ? { pointerEvents: "none" } : {}
+      },
+      value: inputValue,
+      "data-active": (0, import_utils.dataAttr)(isOpen),
+      "aria-expanded": (0, import_utils.dataAttr)(isOpen),
+      onFocus: (0, import_utils.handlerAll)(props.onFocus, rest.onFocus, onInputFocus),
+      onKeyDown: (0, import_utils.handlerAll)(props.onKeyDown, rest.onKeyDown, onInputKeyDown),
+      onChange: (0, import_utils.handlerAll)(props.onChange, onInputChange),
+      onBlur: (0, import_utils.handlerAll)(props.onFocus, onInputBlur)
+    }),
+    [
+      allowInput,
+      computedProps,
+      inputValue,
+      isOpen,
+      rest,
+      onInputFocus,
+      onInputKeyDown,
+      onInputChange,
+      onInputBlur
+    ]
+  );
+  const getEyeDropperProps = (0, import_react.useCallback)(
+    (props = {}, ref = null) => ({
+      disabled,
+      "aria-label": "Pick a color",
+      ...props,
+      ref,
+      style: { ...props.style, pointerEvents: readOnly ? "none" : void 0 },
+      onClick: (0, import_utils.handlerAll)(props.onClick, onEyeDropperClick)
+    }),
+    [disabled, onEyeDropperClick, readOnly]
+  );
+  const getPickerProps = (0, import_react.useCallback)(
+    (props) => ({
+      ...formControlProps,
+      ...props,
+      value,
+      defaultValue: defaultColor,
+      fallbackValue,
+      onChange: onColorPickerChange,
+      onChangeStart,
+      onChangeEnd,
+      onSwatchClick: (0, import_utils.handlerAll)(
+        onSwatchClick,
+        closeOnSelectSwatch ? onClose : void 0
+      ),
+      format: formatRef.current,
+      withPicker,
+      withChannel,
+      withResult,
+      withEyeDropper: withColorPickerEyeDropper,
+      swatchesLabel,
+      swatches,
+      swatchesColumns,
+      variant: colorPickerVariant,
+      size: colorPickerSize,
+      colorScheme: colorPickerColorScheme
+    }),
+    [
+      formControlProps,
+      value,
+      fallbackValue,
+      defaultColor,
+      onColorPickerChange,
+      onChangeStart,
+      onChangeEnd,
+      onSwatchClick,
+      onClose,
+      closeOnSelectSwatch,
+      formatRef,
+      withPicker,
+      withChannel,
+      withResult,
+      withColorPickerEyeDropper,
+      swatchesLabel,
+      swatches,
+      swatchesColumns,
+      colorPickerColorScheme,
+      colorPickerSize,
+      colorPickerVariant
+    ]
+  );
+  return {
+    value,
+    eyeDropperSupported,
+    allowInput,
+    getPopoverProps,
+    getContainerProps,
+    getFieldProps,
+    getPickerProps,
+    getEyeDropperProps
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColorInputProvider,
+  useColorInput,
+  useColorInputContext
+});

package/dist/use-color-input.mjs

@@ -0,0 +1,10 @@
+import {
+  ColorInputProvider,
+  useColorInput,
+  useColorInputContext
+} from "./chunk-KJS52X4M.mjs";
+export {
+  ColorInputProvider,
+  useColorInput,
+  useColorInputContext
+};

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

@@ -0,0 +1,131 @@
+import * as react from 'react';
+import { HTMLUIProps, UIPropGetter, RequiredUIPropGetter, ThemeProps, CSSUIObject } from '@yamada-ui/core';
+import { FormControlOptions } from '@yamada-ui/form-control';
+import { InputProps } from '@yamada-ui/input';
+import { Merge, ColorFormat } from '@yamada-ui/utils';
+import { AlphaSliderProps } from './alpha-slider.mjs';
+import { ColorSwatchProps } from './color-swatch.mjs';
+import { HueSliderProps } from './hue-slider.mjs';
+import { SaturationSliderProps } from './saturation-slider.mjs';
+import './use-color-slider.mjs';
+import './use-saturation-slider.mjs';
+
+type Space = keyof Hsla | keyof Rgba;
+type Hsla = {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+};
+type Rgba = {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+type Hsva = {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+};
+type Channel = {
+    label: string;
+    space: Space;
+    value: number;
+    min: number;
+    max: number;
+};
+type ColorPickerContext = {
+    value: string;
+    onChange: (value: string | Partial<Hsva>) => void;
+    eyeDropperSupported: boolean;
+    withAlpha: boolean;
+    isInteractive: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    channels: Channel[];
+    size?: ThemeProps<"ColorPicker">["size"];
+    getHueSliderProps: UIPropGetter<"input", HueSliderProps, HueSliderProps>;
+    getAlphaSliderProps: UIPropGetter<"input", AlphaSliderProps, AlphaSliderProps>;
+    getEyeDropperProps: UIPropGetter<"button">;
+    getChannelProps: RequiredUIPropGetter<"input", Merge<InputProps, {
+        space: Space;
+    }>, InputProps>;
+    getSwatchProps: UIPropGetter<"div", ColorSwatchProps, ColorSwatchProps>;
+    styles: Record<string, CSSUIObject>;
+};
+declare const ColorPickerProvider: react.Provider<ColorPickerContext>;
+declare const useColorPickerContext: () => ColorPickerContext;
+type UseColorPickerOptions = {
+    /**
+     * The base `id` to use for the color picker.
+     */
+    id?: string;
+    /**
+     * The name attribute of the hidden `input` field.
+     * This is particularly useful in forms.
+     */
+    name?: string;
+    /**
+     * The value of the color picker.
+     */
+    value?: string;
+    /**
+     * The initial value of the color picker.
+     *
+     * @default "#ffffffff"
+     */
+    defaultValue?: string;
+    /**
+     * The fallback value returned when color determination fails.
+     */
+    fallbackValue?: string;
+    /**
+     * Function called whenever the color picker value changes.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Function called when the user starts selecting a new value.
+     */
+    onChangeStart?: (value: string) => void;
+    /**
+     * Function called when the user is done selecting a new value.
+     */
+    onChangeEnd?: (value: string) => void;
+    /**
+     * Color format. For example, `hex`, `rgba`, etc.
+     *
+     * @default "hexa"
+     */
+    format?: ColorFormat;
+    /**
+     * Function called whenever the color swatch click.
+     */
+    onSwatchClick?: (value: string) => void;
+};
+type UseColorPickerBaseProps = UseColorPickerOptions & FormControlOptions;
+type UseColorPickerProps = Omit<HTMLUIProps<"div">, "defaultValue" | "onChange" | "children"> & UseColorPickerBaseProps;
+declare const useColorPicker: ({ isInvalid, ...props }: UseColorPickerProps) => {
+    value: string;
+    onChange: (value: string | Partial<Hsva>) => void;
+    eyeDropperSupported: boolean;
+    withAlpha: boolean;
+    isInteractive: boolean;
+    disabled: boolean | undefined;
+    readOnly: boolean | undefined;
+    channels: Channel[];
+    getContainerProps: UIPropGetter;
+    getInputProps: UIPropGetter<"input">;
+    getSaturationSliderProps: UIPropGetter<"input", SaturationSliderProps, SaturationSliderProps>;
+    getHueSliderProps: UIPropGetter<"input", HueSliderProps, HueSliderProps>;
+    getAlphaSliderProps: UIPropGetter<"input", AlphaSliderProps, AlphaSliderProps>;
+    getEyeDropperProps: UIPropGetter<"button">;
+    getChannelProps: RequiredUIPropGetter<"input", Omit<InputProps, "space"> & {
+        space: Space;
+    }, InputProps>;
+    getSwatchProps: UIPropGetter<"div", ColorSwatchProps, ColorSwatchProps>;
+};
+type UseColorPickerReturn = ReturnType<typeof useColorPicker>;
+
+export { ColorPickerProvider, type UseColorPickerBaseProps, type UseColorPickerProps, type UseColorPickerReturn, useColorPicker, useColorPickerContext };

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

@@ -0,0 +1,131 @@
+import * as react from 'react';
+import { HTMLUIProps, UIPropGetter, RequiredUIPropGetter, ThemeProps, CSSUIObject } from '@yamada-ui/core';
+import { FormControlOptions } from '@yamada-ui/form-control';
+import { InputProps } from '@yamada-ui/input';
+import { Merge, ColorFormat } from '@yamada-ui/utils';
+import { AlphaSliderProps } from './alpha-slider.js';
+import { ColorSwatchProps } from './color-swatch.js';
+import { HueSliderProps } from './hue-slider.js';
+import { SaturationSliderProps } from './saturation-slider.js';
+import './use-color-slider.js';
+import './use-saturation-slider.js';
+
+type Space = keyof Hsla | keyof Rgba;
+type Hsla = {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+};
+type Rgba = {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+type Hsva = {
+    h: number;
+    s: number;
+    v: number;
+    a: number;
+};
+type Channel = {
+    label: string;
+    space: Space;
+    value: number;
+    min: number;
+    max: number;
+};
+type ColorPickerContext = {
+    value: string;
+    onChange: (value: string | Partial<Hsva>) => void;
+    eyeDropperSupported: boolean;
+    withAlpha: boolean;
+    isInteractive: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    channels: Channel[];
+    size?: ThemeProps<"ColorPicker">["size"];
+    getHueSliderProps: UIPropGetter<"input", HueSliderProps, HueSliderProps>;
+    getAlphaSliderProps: UIPropGetter<"input", AlphaSliderProps, AlphaSliderProps>;
+    getEyeDropperProps: UIPropGetter<"button">;
+    getChannelProps: RequiredUIPropGetter<"input", Merge<InputProps, {
+        space: Space;
+    }>, InputProps>;
+    getSwatchProps: UIPropGetter<"div", ColorSwatchProps, ColorSwatchProps>;
+    styles: Record<string, CSSUIObject>;
+};
+declare const ColorPickerProvider: react.Provider<ColorPickerContext>;
+declare const useColorPickerContext: () => ColorPickerContext;
+type UseColorPickerOptions = {
+    /**
+     * The base `id` to use for the color picker.
+     */
+    id?: string;
+    /**
+     * The name attribute of the hidden `input` field.
+     * This is particularly useful in forms.
+     */
+    name?: string;
+    /**
+     * The value of the color picker.
+     */
+    value?: string;
+    /**
+     * The initial value of the color picker.
+     *
+     * @default "#ffffffff"
+     */
+    defaultValue?: string;
+    /**
+     * The fallback value returned when color determination fails.
+     */
+    fallbackValue?: string;
+    /**
+     * Function called whenever the color picker value changes.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Function called when the user starts selecting a new value.
+     */
+    onChangeStart?: (value: string) => void;
+    /**
+     * Function called when the user is done selecting a new value.
+     */
+    onChangeEnd?: (value: string) => void;
+    /**
+     * Color format. For example, `hex`, `rgba`, etc.
+     *
+     * @default "hexa"
+     */
+    format?: ColorFormat;
+    /**
+     * Function called whenever the color swatch click.
+     */
+    onSwatchClick?: (value: string) => void;
+};
+type UseColorPickerBaseProps = UseColorPickerOptions & FormControlOptions;
+type UseColorPickerProps = Omit<HTMLUIProps<"div">, "defaultValue" | "onChange" | "children"> & UseColorPickerBaseProps;
+declare const useColorPicker: ({ isInvalid, ...props }: UseColorPickerProps) => {
+    value: string;
+    onChange: (value: string | Partial<Hsva>) => void;
+    eyeDropperSupported: boolean;
+    withAlpha: boolean;
+    isInteractive: boolean;
+    disabled: boolean | undefined;
+    readOnly: boolean | undefined;
+    channels: Channel[];
+    getContainerProps: UIPropGetter;
+    getInputProps: UIPropGetter<"input">;
+    getSaturationSliderProps: UIPropGetter<"input", SaturationSliderProps, SaturationSliderProps>;
+    getHueSliderProps: UIPropGetter<"input", HueSliderProps, HueSliderProps>;
+    getAlphaSliderProps: UIPropGetter<"input", AlphaSliderProps, AlphaSliderProps>;
+    getEyeDropperProps: UIPropGetter<"button">;
+    getChannelProps: RequiredUIPropGetter<"input", Omit<InputProps, "space"> & {
+        space: Space;
+    }, InputProps>;
+    getSwatchProps: UIPropGetter<"div", ColorSwatchProps, ColorSwatchProps>;
+};
+type UseColorPickerReturn = ReturnType<typeof useColorPicker>;
+
+export { ColorPickerProvider, type UseColorPickerBaseProps, type UseColorPickerProps, type UseColorPickerReturn, useColorPicker, useColorPickerContext };