import React from "react";
import { IconName } from "@raiadrogasil/pulso-icons";
type TextFieldComumProps = {
/**
* Atributo padrão do elemento \ do HTML.
*/
id: string;
/**
* Conteúdo de texto do label do componente.
*/
label: string;
/**
* Atributo padrão do elemento \ do HTML.
*/
name?: string;
/**
* Atributo padrão do elemento \ do HTML.
*/
value?: string;
/**
* Habilita e configura um ícone que é carregado como leading icon do input.
*/
leftIcon?: React.ReactNode | IconName;
/**
* Inclui um texto helper ao componente e configura um ícone que é carregado como leading icon do helper text.
*/
helperText?: string;
/**
* Habilita e configura um ícone que é carregado como trailing icon do input.
*/
helperTextIconName?: IconName;
/**
* Atributo padrão do elemento \ do HTML.
*/
disabled?: boolean;
/**
* Habilita o estilo de erro do componente.
*/
error?: boolean;
/**
* Configura o token da cor de fundo, sobre a qual o componente será colocado.
*/
backgroundColorName?: string;
/**
* Atributo padrão do elemento \ do HTML.
*/
inputMode?: "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url";
/**
* Atributo padrão do elemento \ do HTML.
*/
type?: "color" | "date" | "datetime-local" | "email" | "file" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week";
/**
* Atributo padrão do elemento \ do HTML.
*/
max?: string;
/**
* Atributo padrão do elemento \ do HTML.
*/
maxLength?: number;
/**
* Atributo padrão do elemento \ do HTML.
*/
min?: string;
/**
* Atributo padrão do elemento \ do HTML.
*/
minlength?: number;
/**
* Atributo padrão do elemento \ do HTML.
*/
readonly?: boolean;
/**
* Atributo padrão do elemento \ do HTML.
*/
required?: boolean;
/**
* Quando type estiver configurado como "password" adiciona um botão que força o type para "text" em um primeiro clique/toque e volta o type para "password" em um segundo clique/toque.
*/
showHidePasswordButton?: boolean;
/**
* Atributo padrão do elemento \ do HTML.
*/
width?: string;
/**
* Essa Prop inclui um atributo data-qa com o valor configurado no input.
*/
dataQA?: string | null;
/**
* Essa Prop inclui um atributo data-qa com o valor configurado no botão de reset.
*/
dataQAReset?: string | null;
/**
* Essa Prop inclui um atributo data-qa com o valor configurado no botão de mostrar/esconder senha.
*/
dataQAShowHidePassword?: string | null;
/**
* Essa Prop inclui um atributo data-collect com o valor configurado no input.
*/
dataCollect?: string | null;
/**
*Essa Prop inclui um atributo data-collect com o valor configurado no botão de reset.
*/
dataCollectReset?: string | null;
/**
* Essa Prop inclui um atributo data-collect com o valor configurado no botão de mostrar/esconder senha.
*/
dataCollectShowHidePassword?: string | null;
/**
* Essa Prop inclui um atributo data-collect-info com o valor configurado no input.
*/
dataCollectInfo?: string | null;
/**
* Essa Prop inclui um atributo data-collect-info com o valor configurado no botão de reset.
*/
dataCollectInfoReset?: string | null;
/**
* Essa Prop inclui um atributo data-collect-info com o valor configurado no botão de mostrar/esconder senha.
*/
dataCollectInfoShowHidePassword?: string | null;
/**
* Essa Prop inclui um atributo data-testid com o valor configurado no input.
*/
dataTestId?: string | null;
/**
* Essa Prop inclui um atributo data-testid com o valor configurado no botão de reset.
*/
dataTestIdReset?: string | null;
/**
* Essa Prop inclui um atributo data-testid com o valor configurado no botão de mostrar/esconder senha.
*/
dataTestIdShowHidePassword?: string | null;
/**
* Quando o type igual a "password" exibe informação dentro do campo, sobre a força da senha.
*/
passwordStrength?: "low" | "medium" | "high";
/**
* Essa prop permite que o componente tenha um tamanho mínimo.
*/
minWidth?: string;
/**
* Atributo para definir o tamanho do componente como 100%.
*/
fullWidth?: boolean;
/**
* Adiciona uma função de callback à mudança do componente.
*/
onChange?(event: React.ChangeEvent): void;
/**
* Atributo padrão do elemento \ do HTML.
*/
onBlur?(event: React.FocusEvent): void;
/**
* Quando showHidePasswordButton for true, adiciona uma função de callback ao clique do botão de mostrar/esconder senha do componente.
*/
onShowHidePassword?(): void;
/**
* Adiciona uma função de callback ao clique do botão de reset do componente.
*/
onReset?(): void;
/**
* Adiciona função de callback ao pressionar uma tecla.
*/
onKeyDown?(event: React.KeyboardEvent): void;
};
type TextFieldWithFixedLabel = {
/**
* Essa Prop permite mensagem de placeholder para o input, atualmente só deve ser usado com o theme `TR`.
*/
placeholder?: string;
/**
* Essa Prop permite que o label fique fixo acima do input, atualmente só deve ser usado com o theme `TR`.
*/
fixedLabel?: boolean;
};
type TextFieldWithoutFixedLabel = {
/**
* Essa Prop permite mensagem de placeholder para o input, atualmente só deve ser usado com o theme `TR`.
*/
placeholder?: never;
/**
* Essa Prop permite que o label fique fixo acima do input, atualmente só deve ser usado com o theme `TR`.
*/
fixedLabel?: boolean;
};
export type TextFieldProps = TextFieldComumProps & (TextFieldWithFixedLabel | TextFieldWithoutFixedLabel);
export type PasswordStrengthType = "low" | "medium" | "high";
export type LabelProps = {
error?: boolean;
disabled?: boolean;
hasLeftIcon?: boolean;
fieldHasValue?: boolean;
fixedLabel?: boolean;
};
export type IconHolderProps = {
disabled?: boolean;
};
export type AssistButtonHolderProps = {
error?: boolean;
passwordStrength?: boolean;
};
export type LabelTextHolderProps = {
backgroundColorName: string;
};
export type PasswordStrengthProps = {
strength: "low" | "medium" | "high";
};
export type SpacerProps = {
fixedLabel?: boolean;
};
export type InputProps = {
backgroundColorName: string;
error?: boolean;
hasLeftIcon?: boolean;
passwordStrength?: boolean;
fixedLabel?: boolean;
minWidth?: string;
};
export type ErrorIconProps = {
passwordStrength?: boolean;
};
export type ContainerProps = {
error?: boolean;
passwordStrength?: boolean;
minWidth?: string;
fullWidth?: boolean;
};
export type HelperTextContainerProps = {
disabled?: boolean;
error?: boolean;
};
export type HelperProps = {
error?: boolean;
};
export {};