import { Renderable, Value } from '@tempots/dom';
import { InputOptions } from './input-options';
/**
 * Configuration options for the {@link ColorInput} component.
 *
 * Extends {@link InputOptions} for string color values with an optional size
 * property for the color swatch preview.
 */
export type ColorInputOptions = InputOptions<string> & {
    /** Size in pixels of the color swatch preview (square). @default 32 */
    size?: Value<number>;
};
/**
 * A color input component combining a text field with a clickable color swatch preview.
 *
 * Renders a styled text input for typing color values alongside a {@link Swatch} component
 * that displays the current color and opens the browser's native color picker on click.
 * The text input and swatch stay synchronized through the shared `value` signal. Accepts
 * any valid CSS color string.
 *
 * @param options - Configuration options for the color input
 * @returns A styled color input element with swatch preview, wrapped in an InputContainer
 *
 * @example
 * ```ts
 * import { prop } from '@tempots/dom'
 * import { ColorInput } from '@tempots/beatui'
 *
 * const color = prop('#ff6600')
 * ColorInput({
 *   value: color,
 *   onChange: color.set,
 *   placeholder: '#rrggbb',
 * })
 * ```
 *
 * @example
 * ```ts
 * // With before icon and error state
 * ColorInput({
 *   value: prop('#000000'),
 *   onInput: (v) => console.log('Picking:', v),
 *   before: Icon({ icon: 'line-md:paint-drop' }),
 *   hasError: prop(false),
 * })
 * ```
 */
export declare function ColorInput(options: ColorInputOptions): Renderable;
