analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
81 lines • 3.1 kB
TypeScript
import { InputHTMLAttributes, ChangeEvent } from 'react';
/**
* ColorPicker component props interface
*/
export type ColorPickerProps = {
/** Label text displayed above the color picker */
label?: string;
/** Helper text displayed below the color picker */
helperText?: string;
/** Error message displayed below the color picker */
errorMessage?: string;
/** Current color value in hex format (e.g., "#FFFFFF") */
value?: string;
/** Callback when color changes */
onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
/** Placeholder for the text input */
placeholder?: string;
/** Additional CSS classes for the container */
className?: string;
/** Whether the input is disabled */
disabled?: boolean;
/** Whether the input is required */
required?: boolean;
} & Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange' | 'size'>;
/**
* ColorPicker component for Analytica Ensino platforms
*
* A color picker component that combines a native color input with a text input
* for manual hex value entry. Includes label, helper text, and error message support.
*
* @param label - Optional label text displayed above the color picker
* @param helperText - Optional helper text displayed below the color picker
* @param errorMessage - Optional error message displayed below the color picker
* @param value - Current color value in hex format
* @param onChange - Callback when color changes
* @param placeholder - Placeholder for the text input (default: "#FFFFFF")
* @param className - Additional CSS classes for the container
* @param disabled - Whether the input is disabled
* @param required - Whether the input is required
*
* @example
* ```tsx
* // Basic usage
* <ColorPicker
* label="Cor"
* value={color}
* onChange={(e) => setColor(e.target.value)}
* helperText="Selecione uma cor para representar o componente"
* />
*
* // With error state
* <ColorPicker
* label="Cor"
* value={color}
* onChange={(e) => setColor(e.target.value)}
* errorMessage="Cor inválida"
* />
* ```
*/
declare const ColorPicker: import("react").ForwardRefExoticComponent<{
/** Label text displayed above the color picker */
label?: string;
/** Helper text displayed below the color picker */
helperText?: string;
/** Error message displayed below the color picker */
errorMessage?: string;
/** Current color value in hex format (e.g., "#FFFFFF") */
value?: string;
/** Callback when color changes */
onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
/** Placeholder for the text input */
placeholder?: string;
/** Additional CSS classes for the container */
className?: string;
/** Whether the input is disabled */
disabled?: boolean;
/** Whether the input is required */
required?: boolean;
} & Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "onChange" | "size"> & import("react").RefAttributes<HTMLInputElement>>;
export default ColorPicker;
//# sourceMappingURL=ColorPicker.d.ts.map