import React from 'react';
import { ThemeOverrideProps } from '@xsolla/xui-core';

/**
 * Display variant of the InputColor control. Maps 1:1 to the Figma `Type` prop:
 * - `color`      → "Color only"          (swatch preview only, no editable field)
 * - `color-hex`  → "Color + HEX"         (swatch + editable hex field)
 * - `color-rgb`  → "Color + HSL/HSB/RGB" (swatch + editable R/G/B channels)
 * - `hex`        → "HEX"                  (editable hex field only)
 * - `rgb`        → "HSL/HSB/RGB"          (editable R/G/B channels only)
 */
type InputColorType = "color" | "color-hex" | "color-rgb" | "hex" | "rgb";
type InputColorSize = "xl" | "lg" | "md" | "sm" | "xs";
interface InputColorProps extends ThemeOverrideProps {
    /**
     * The current color value as a hex string (controlled mode), e.g. `#22A8C3`.
     * When `transparency` is enabled an 8-digit hex (`#RRGGBBAA`) is accepted.
     */
    value?: string;
    /**
     * The initial color value for uncontrolled usage. Defaults to `#000000`.
     */
    defaultValue?: string;
    /**
     * Event handler fired when the color changes. Always receives a hex string.
     */
    onChange?: (value: string) => void;
    /**
     * Fired when the swatch is activated. The swatch is only interactive when
     * `type="color"` — its role is to open the parent ColorPicker panel. For all
     * other types the swatch is a decorative preview and this is never called.
     */
    onSwatchClick?: () => void;
    /**
     * Display variant of the control. Defaults to `color-hex`.
     */
    type?: InputColorType;
    /**
     * Enables the alpha channel. Adds an alpha field and splits the swatch to
     * preview the transparency against a checkerboard.
     */
    transparency?: boolean;
    /**
     * Property for changing the size of the control.
     */
    size?: InputColorSize;
    /**
     * Property for displaying a label above the control.
     */
    label?: string;
    /**
     * Unique identifier for the control. Used for accessibility linking.
     */
    id?: string;
    /**
     * Accessible label for screen readers when no visible label is present.
     */
    "aria-label"?: string;
    testID?: string;
}
declare const InputColor: React.ForwardRefExoticComponent<InputColorProps & React.RefAttributes<HTMLDivElement>>;

export { InputColor, type InputColorProps, type InputColorSize, type InputColorType };