import { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type ReactNode } from 'react';
import { type TextBoxSlotRecipeVariant } from '../../styled-system/recipes';
import { type IconButtonProps } from '../IconButton';
/**
 * The props for the TextBox component.
 */
export type TextBoxProps = {
    /**
     * Whether you let user to clear the content or not.
     * This will add the Clear button if current TextBox has value.
     *
     * @default false
     */
    enableClearButton?: boolean;
    /**
     * The callback function when the clear button is clicked.
     * Notice: The `onChange` event still will be fired after the clear button is clicked.
     *
     * @default undefined
     */
    onClear?: IconButtonProps['onClick'];
    /**
     * Whether the text box is invalid or not.
     * This will change the style of the text box.
     *
     * @default false
     */
    invalid?: TextBoxSlotRecipeVariant['invalid'];
    /**
     * The size of the text box.
     *
     * @default 'medium'
     */
    textBoxSize?: TextBoxSlotRecipeVariant['size'];
    /**
     * Whether the text box is disabled or not.
     * If disabled, user cannot edit the content.
     *
     * @default false
     */
    disabled?: TextBoxSlotRecipeVariant['disabled'];
    /**
     * Allow users to pass additional attributes to the wrapper div
     *
     * @default {}
     */
    wrapperProps?: ComponentPropsWithRef<'div'>;
    /**
     * The prefix icon or text for a unit.
     * This will be rendered on the left side within TextBox.
     */
    prefixSlot?: ReactNode;
    /**
     * The suffix icon, icon button to open a popover, or text for a unit.
     * This will be rendered on the right side within TextBox.
     * This will be placed after the clear button if it exists.
     */
    suffixSlot?: ReactNode;
    /**
     * The properties for the clear button.
     * If this prop is not passed, the default values for each property will be applied.
     *
     * @property aria-label - The alternative text for the clear button. Default is '値をクリアする'.
     */
    clearButtonProps?: Pick<ComponentPropsWithoutRef<'input'>, 'aria-label'>;
    /**
     * Whether to render as read-only display on touch devices.
     * When enabled, the input will be replaced with a div on touch devices to prevent keyboard from appearing.
     * Useful for components like DatePicker where input is done through a separate UI (e.g., calendar).
     *
     * @default false
     */
    touchDeviceReadOnly?: boolean;
} & Omit<ComponentPropsWithoutRef<'input'>, 'prefix'>;