import React, { ChangeEventHandler, HTMLAttributes } from 'react'; import { SizeProp } from '../../types/size'; import { ColorProp } from '../../types/color'; import { MarginProp } from '../../types/spacing'; import { ValueChangeHandler } from '../../types/control'; export interface BaseFieldProps extends Pick, 'className' | 'children' | 'style' | 'onChange' | 'onKeyDown' | 'onKeyUp' | 'onFocus' | 'onBlur' | 'onClick' | 'onMouseDown' | 'onMouseUp'> { /** * The id of the `input` element. */ id?: string; /** * The placeholder of the `input` element. */ placeholder?: string | undefined; label?: any; /** * The name of the `input` element. */ name?: string | undefined; /** * The default value. Use when the component is not controlled. */ defaultValue?: unknown; /** * The value of the `input` element, required for a controlled component. */ value?: string | ReadonlyArray | number | undefined | null; variant?: 'outlined' | 'filled'; isFloating?: boolean; /** * If `true`, the `input` element is focused during the first mount. */ autoFocus?: boolean | undefined; required?: boolean | undefined; readOnly?: boolean | undefined; helperText?: any; error?: boolean; success?: boolean; /** * If `true`, the component is disabled. * @default false */ disabled?: boolean; /** * If `true`, the button will take up the full width of its container. * @default false */ fullWidth?: boolean; /** * Border radius style * @default 'yes' */ rounded?: 'no' | 'yes' | 'pill'; /** * The size of the component. * `slim` is equivalent to the dense button styling. * @default 'normal' */ size?: SizeProp; /** * The color of the component. * @default 'basic' */ color?: ColorProp; /** * The vertical margin of the component. * @default 'none' */ margin?: MarginProp; /** * Changes the inner text alignment of the button * @default 'start' */ textAlign?: 'center' | 'start' | 'end'; /** * Shows a clear button inside input * @default false */ clearable?: boolean; /** * Element placed before the children. */ startAdornment?: React.ReactNode; /** * Element placed after the children. */ endAdornment?: React.ReactNode; /** * Button placed before the children. */ startAction?: React.ReactNode; /** * Button placed after the children. */ endAction?: React.ReactNode; onChange?: ValueChangeHandler; onInputChange?: ChangeEventHandler | undefined; } export interface FieldProps extends BaseFieldProps { isFilled?: boolean; isFocused?: boolean; inputGroupRef?: React.ForwardedRef; inputWrapperRef?: React.ForwardedRef; }