@nish1896/rhf-mui-components/misc/color-picker/index.d.ts

A suite of 25+ production-ready react-hook-form components built with material-ui. Fully typed, tree-shakable, and optimized for enterprise-grade forms.

import { CustomComponentIds } from "../../types/common.js";
import { FormHelperTextProps, FormLabelProps } from "../../types/mui.js";
import { ReactNode } from "react";
import { Control, FieldValues, Path, RegisterOptions } from "react-hook-form";
import { IColor } from "react-color-palette";
//#region src/misc/color-picker/index.d.ts
type ColorFormat = keyof IColor;
type RHFColorPickerCustomOnChangeProps = {
  color: IColor;
  setColor: (newColor: IColor) => void;
};
type RHFColorPickerProps<T extends FieldValues> = {
  /**
   * Name/path of the React Hook Form field this component controls.
   */
  fieldName: Path<T>;
  /**
   * React Hook Form control object returned by `useForm`.
   */
  control: Control<T>;
  /**
   * Validation rules passed to React Hook Form for this field.
   */
  registerOptions?: RegisterOptions<T, Path<T>>;
  /**
   * Color format stored in the React Hook Form field.
   *
   * `hex` stores the color hex string. Other formats are converted to a CSS color string.
   * @default 'hex'
   * Options: `hex`, `rgb`, `hsv`
   */
  valueKey?: ColorFormat;
  /**
   * Initial color used by the picker when the field does not already have a value.
   * @default '#000000'
   */
  defaultColor?: string;
  /**
   * When true, omits alpha from emitted color values.
   */
  excludeAlpha?: boolean;
  /**
   * When true, marks the field as required in the UI and accessibility attributes.
   */
  required?: boolean;
  /**
   * Height, in pixels, of the color picker control.
   * @default 200
   */
  height?: number;
  /**
   * When true, hides alpha controls in the color picker.
   */
  hideAlpha?: boolean;
  /**
   * Hides picker input fields rendered by `react-color-palette`.
   *
   * Pass `true` to hide all inputs, or pass specific `IColor` keys to hide only
   * those inputs.
   */
  hideInput?: (keyof IColor)[] | boolean;
  /**
   * Overrides the default color picker change handling.
   * Receives the raw `IColor` from react-color-palette and a `setColor` helper that commits the formatted value to React Hook Form.
   * Call `setColor` with the color that should be stored; else the form value will not be updated.
   *
   * @param color - New `IColor` emitted by react-color-palette.
   * @param setColor - Commit helper that updates local picker state and the RHF field value.
   */
  customOnChange?: ({
    color,
    setColor
  }: RHFColorPickerCustomOnChangeProps) => void;
  /**
   * Called after the default color picker handler stores the formatted color value in React Hook Form.
   *
   * ⚠️ Important:
   * This callback is not called when `customOnChange` is used.
   *
   * @param color - New `IColor` emitted by react-color-palette.
   */
  onValueChange?: (color: IColor) => void;
  /**
   * When true, disables the field and associated controls.
   */
  disabled?: boolean;
  /**
   * Label content shown for the field. Defaults to a label generated from `fieldName`.
   */
  label?: ReactNode;
  /**
   * When true, renders the field label above the form field instead of inside or beside it.
   */
  showLabelAboveFormField?: boolean;
  /**
   * Props forwarded to the internal `FormLabel`. The `id` is managed by the component.
   */
  formLabelProps?: Omit<FormLabelProps, 'id'>;
  /**
   * When true, hides the rendered field label while preserving accessible labeling where possible.
   */
  hideLabel?: boolean;
  /**
   * Helper text shown below the field when there is no visible validation error.
   */
  helperText?: ReactNode;
  /**
   * @deprecated
   * Field error message is now automatically derived from form state.
   * Passing this prop is no longer necessary and it will be removed in the next major version.
   */
  errorMessage?: ReactNode;
  /**
   * If true, hides the error message text while keeping the field in an error state.
   */
  hideErrorMessage?: boolean;
  /**
   * Props forwarded to the internal `FormHelperText`. The `id` is managed by the component.
   */
  formHelperTextProps?: Omit<FormHelperTextProps, 'id'>;
  /**
   * Custom ids for generated field, label, helper text, and error elements.
   */
  customIds?: CustomComponentIds;
};
declare const RHFColorPicker: <T extends FieldValues>({
  fieldName,
  control,
  registerOptions,
  valueKey,
  defaultColor,
  excludeAlpha,
  required,
  hideInput,
  customOnChange,
  onValueChange,
  disabled: muiDisabled,
  label,
  showLabelAboveFormField,
  formLabelProps,
  hideLabel,
  helperText,
  errorMessage,
  hideErrorMessage,
  formHelperTextProps,
  height,
  customIds,
  hideAlpha
}: RHFColorPickerProps<T>) => import("react").JSX.Element;
//#endregion
export { RHFColorPickerProps, RHFColorPicker as default };