@grazziotin/react-components-next 1.0.0 → 2.0.0

package/dist/ui/index.d.ts

@@ -1,5 +1,12 @@
-import { CSSProperties, Breakpoint } from '@mui/material';
-import React$1, { ComponentPropsWithoutRef } from 'react';
+import * as _mui_material from '@mui/material';
+import { CSSProperties, Breakpoint, TabProps as TabProps$1, TabsProps as TabsProps$1, TextFieldProps, AutocompleteProps, AutocompleteChangeReason, AutocompleteChangeDetails } from '@mui/material';
+import * as react from 'react';
+import react__default, { ComponentPropsWithoutRef, Dispatch, SetStateAction, SubmitEventHandler, ReactElement } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DataGridProps } from '@mui/x-data-grid';
+import * as _emotion_styled from '@emotion/styled';
+import * as _mui_system from '@mui/system';
+import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
 
 /**
  * Tipo do atributo nativo `className` de um elemento `div` no React.
@@ -55,7 +62,7 @@ interface CardProps {
     /**
      * Cor de fundo do cabeçalho.
      * Aceita cores CSS (hex, rgb, variáveis CSS, etc.).
-     * @default "var(--color-primary)"
+     * @default "var(--primary-color)"
      */
     titleColor?: string;
     /**
@@ -104,7 +111,7 @@ interface CardProps {
  * @param props.toolTip - Habilita tooltip no título.
  * @param props.className - `className` nativo do React no container.
  * @param props.titleWidth - Largura da barra do cabeçalho. Padrão: `"100%"`.
- * @param props.titleColor - Cor de fundo do cabeçalho. Padrão: `var(--color-primary)`.
+ * @param props.titleColor - Cor de fundo do cabeçalho. Padrão: `var(--primary-color)`.
  * @param props.borderTitle - `border-radius` só do cabeçalho.
  * @param props.onClick - Clique no card; adiciona `cursor: pointer !important`.
  * @param props.borderRadius - `border-radius` do container.
@@ -219,6 +226,294 @@ interface DialogProps {
  * </Dialog>
  * ```
  */
-declare function Dialog({ open, title, onClose, actions, children, maxWidth, blurBackdrop, }: Readonly<DialogProps>): React$1.ReactElement;
+declare function Dialog({ open, title, onClose, actions, children, maxWidth, blurBackdrop, }: Readonly<DialogProps>): react__default.ReactElement;
 
-export { Card, type CardClassName, type CardProps, Dialog, type DialogProps };
+/**
+ * Propriedades do componente {@link DataTable}.
+ * Wrapper tipado sobre o MUI `DataGrid`, com estilização e textos em português.
+ */
+type DataTableProps = DataGridProps;
+
+/**
+ * Componente DataTable personalizado baseado no MUI DataGrid.
+ *
+ * Fornece uma tabela de dados com estilização customizada, filtros avançados,
+ * paginação, ordenação e gerenciamento de colunas.
+ *
+ * Recursos incluídos:
+ * - Operador de filtro "entre" automático para colunas string e number
+ * - Painel de filtros customizado
+ * - Painel de gerenciamento de colunas
+ * - Paginação estilizada
+ * - Overlay personalizado para "sem dados"
+ * - Textos em português brasileiro
+ *
+ * @param props - Todas as props do MUI DataGrid são suportadas. Ver {@link DataTableProps}.
+ *
+ * @example
+ * <DataTable
+ *   rows={dados}
+ *   columns={colunas}
+ *   loading={carregando}
+ *   pageSizeOptions={[10, 20, 50]}
+ * />
+ */
+declare const DataTable: ({ ...rest }: DataTableProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Propriedades de estilo compartilhadas entre {@link Tab} e {@link Tabs}.
+ */
+interface TabColorProps {
+    /**
+     * Cor do indicador ativo e do rótulo da aba selecionada.
+     * @default "var(--primary-color)"
+     */
+    color?: string;
+    /**
+     * Família tipográfica do rótulo da aba.
+     * Defina `--font-family` no CSS do projeto ou passe esta prop diretamente.
+     * @default "var(--font-family, inherit)"
+     */
+    fontFamily?: string;
+}
+/**
+ * Propriedades do componente {@link Tab}.
+ * Estende o `Tab` do MUI com suporte a cor customizada via `color`.
+ */
+type TabProps = TabProps$1 & TabColorProps;
+/**
+ * Propriedades do componente {@link Tabs}.
+ * Estende o `Tabs` do MUI com suporte a cor customizada do indicador via `color`.
+ */
+type TabsProps = TabsProps$1 & TabColorProps;
+
+/**
+ * Container de abas baseado no MUI `Tabs`, com indicador colorido customizável.
+ *
+ * @param props.color - Cor do indicador da aba ativa. Padrão: `var(--primary-color)`.
+ *
+ * @example
+ * ```tsx
+ * <Tabs value={value} onChange={handleChange} color="#00B2A6">
+ *   <Tab label="Aba 1" />
+ * </Tabs>
+ * ```
+ */
+declare const Tabs: _emotion_styled.StyledComponent<_mui_material.TabsOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "className" | "aria-label" | "aria-labelledby" | "children" | "onChange" | "sx" | "classes" | "slots" | "slotProps" | "variant" | "value" | "action" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "orientation" | "scrollButtons" | "selectionFollowsFocus" | "textColor" | "visibleScrollbar"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & TabColorProps, {}, {}>;
+/**
+ * Aba individual baseada no MUI `Tab`, com tipografia e cor de seleção customizáveis.
+ *
+ * @param props.color - Cor do rótulo quando a aba está selecionada. Padrão: `var(--primary-color)`.
+ * @param props.fontFamily - Família tipográfica do rótulo. Padrão: `var(--font-family, inherit)`.
+ *
+ * @example
+ * ```tsx
+ * <Tab label="Configurações" color="#00B2A6" />
+ * ```
+ */
+declare const Tab: _emotion_styled.StyledComponent<_mui_material.TabOwnProps & Omit<_mui_material.ButtonBaseOwnProps, keyof _mui_material.TabOwnProps> & Omit<_mui_material.ButtonBaseOwnProps, "tabIndex" | "type" | "touchRippleRef" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | keyof _mui_material.TabOwnProps> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "label" | "className" | "tabIndex" | "children" | "icon" | "sx" | "type" | "classes" | "disabled" | "touchRippleRef" | "value" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "disableFocusRipple" | "iconPosition" | "wrapped"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & TabColorProps, {}, {}>;
+
+type InputType = TextFieldProps["type"] | "cpf-cnpj" | "numeric" | "price" | "text-only" | "text-no-number" | "item-170" | "item-150";
+type InputProps = Omit<TextFieldProps, "color" | "type" | "size"> & {
+    /**
+     * Cor do input.
+     */
+    color?: string;
+    /**
+     * Se true, exibe um botão de toggle para mostrar/ocultar a senha.
+     */
+    isPassword?: boolean;
+    /**
+     * Aceita os tipos padrão do TextField e tipos customizados do projeto.
+     * Padrão: `"text"`.
+     */
+    type?: InputType;
+    /**
+     * Tamanho do campo conforme o MUI TextField.
+     * Padrão: `"small"`.
+     */
+    size?: TextFieldProps["size"];
+};
+
+/**
+ * Campo de texto baseado no MUI TextField, com máscaras e tipos customizados do projeto.
+ */
+declare const Input: ({ color, onChange, isPassword, type, size, ...rest }: Readonly<InputProps>) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Propriedades de layout em grid para o campo do {@link InputSelect}.
+ */
+interface InputSelectGridProps {
+    /**
+     * Ordem de exibição do input.
+     */
+    order?: number;
+    /**
+     * Tamanho do grid para o input.
+     */
+    xs?: number;
+}
+/**
+ * Propriedades do componente {@link InputSelect}.
+ *
+ * Estende o Autocomplete do MUI, substituindo `renderInput` pelo {@link Input} do projeto
+ * e tipando `onChange` conforme seleção única ou múltipla.
+ *
+ * @template T - Tipo dos itens de opções no seletor.
+ * @template M - Valor booleano que define se a seleção pode ser múltipla.
+ */
+interface InputSelectProps<T, M extends boolean = false> extends Omit<AutocompleteProps<T, M, boolean | undefined, boolean | undefined>, "renderInput" | "onChange"> {
+    /**
+     * Propriedades repassadas ao {@link Input} interno.
+     * Aceita label, color, type, máscaras e demais props do TextField do projeto.
+     */
+    input?: InputProps & InputSelectGridProps;
+    /**
+     * Opções exibidas no seletor.
+     */
+    options: T[];
+    /**
+     * Retorna a string exibida como rótulo de uma opção.
+     * @param data - Item da lista `options`.
+     */
+    optionLabel: (data: T) => string;
+    /**
+     * Define se o seletor permite múltiplas seleções.
+     * Padrão: `false`.
+     */
+    multiple?: M;
+    /**
+     * Callback disparado quando o valor do seletor é alterado.
+     * @param event - Evento que disparou a alteração.
+     * @param value - Novo valor (`T | null` ou `T[]` quando `multiple`).
+     * @param reason - Motivo da alteração (MUI `AutocompleteChangeReason`).
+     * @param details - Detalhes adicionais da alteração (opcional).
+     */
+    onChange?: (event: React.SyntheticEvent, value: M extends true ? T[] : T | null, reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<T>) => void;
+}
+
+/**
+ * Componente InputSelect que encapsula o Autocomplete do Material-UI com o {@link Input} do projeto.
+ *
+ * Permite a seleção de uma ou mais opções com base nos parâmetros fornecidos.
+ * É configurável via props do Autocomplete do MUI, com campo de entrada customizável
+ * através de `input` (mesmas props do {@link Input}: cor, label, máscaras, etc.).
+ *
+ * @template T - Tipo dos itens de opções exibidos no seletor.
+ * @template M - Define se o seletor permite múltiplas seleções. Padrão: `false` (seletor único).
+ *
+ * @param props - Propriedades do componente. Detalhes em {@link InputSelectProps}.
+ * @param props.multiple - Se `true`, permite selecionar várias opções. Padrão: `false`.
+ * @param props.optionLabel - Função que recebe uma opção e retorna o rótulo exibido.
+ * @param props.onChange - Callback ao alterar o valor (evento, valor, motivo e detalhes).
+ * @param props.input - Props repassadas ao {@link Input} interno (label, color, type, etc.).
+ * @param props.options - Lista de opções disponíveis no seletor.
+ * @param props.rest - Demais props do Autocomplete do MUI (exceto `renderInput` e `onChange`).
+ *
+ * @returns Autocomplete com campo de entrada personalizado.
+ *
+ * @example
+ * ```tsx
+ * const options = [
+ *   { id: 1, label: "Opção 1" },
+ *   { id: 2, label: "Opção 2" },
+ * ];
+ *
+ * <InputSelect
+ *   options={options}
+ *   optionLabel={(option) => option.label}
+ *   input={{ label: "Selecione", color: "#00b2a6" }}
+ *   onChange={(_event, value) => console.log("Valor selecionado:", value)}
+ *   multiple
+ * />
+ * ```
+ */
+declare function InputSelect<T, M extends boolean = false>({ multiple, optionLabel, onChange, input, ...rest }: Readonly<InputSelectProps<T, M>>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Propriedades do componente {@link FilterCard}.
+ */
+interface FilterCardProps {
+    /** Título do cartão de filtros. */
+    title?: string;
+    /** Indica se o botão de filtros deve ser exibido. */
+    renderFilter: boolean;
+    /** Controla a abertura do drawer de filtros. */
+    setOpen: Dispatch<SetStateAction<boolean>>;
+}
+/**
+ * {@link Input} no grid do drawer de filtros.
+ * Inclui `order` e `xs` para posicionamento no grid responsivo.
+ */
+type FilterInputProps = InputProps & InputSelectGridProps;
+/**
+ * {@link InputSelect} tipado no grid do drawer.
+ * Use {@link filterInputSelect} para inferir `T` por campo sem casts.
+ */
+type FilterInputSelectItem<T, M extends boolean = false> = InputSelectProps<T, M> & InputSelectGridProps;
+/**
+ * Campo {@link InputSelect} no drawer com tipos heterogêneos.
+ * Cada item pode ter `options` de um tipo diferente na mesma lista.
+ */
+type FilterInputSelectField<M extends boolean = boolean> = InputSelectProps<unknown, M> & InputSelectGridProps;
+/** Lista de campos {@link InputSelect} no drawer (tipos de opção independentes por item). */
+type FilterInputSelectProps<M extends boolean = boolean> = FilterInputSelectField<M>[];
+/** Campo do drawer: {@link Input} ou {@link InputSelect}. */
+type FilterDrawerField = FilterInputProps | FilterInputSelectField;
+/**
+ * Propriedades do componente {@link FilterDrawer}.
+ */
+interface FilterDrawerProps {
+    /** Drawer aberto. */
+    open?: boolean;
+    /** Controla a abertura do drawer. */
+    setOpen: Dispatch<SetStateAction<boolean>>;
+    /** Campos {@link Input}. */
+    inputs?: FilterInputProps[];
+    /** Campos {@link InputSelect}. */
+    inputSelect?: FilterInputSelectProps;
+    /** Callback ao limpar filtros. */
+    onClear?: () => void;
+    /** Callback ao submeter o formulário de filtros. */
+    onSubmit?: SubmitEventHandler<HTMLFormElement>;
+}
+/**
+ * Propriedades do componente {@link Filter}.
+ *
+ * Combina título do card com campos e callbacks do drawer.
+ */
+interface FilterProps extends Omit<FilterCardProps, "renderFilter" | "setOpen">, Omit<FilterDrawerProps, "open" | "setOpen"> {
+}
+
+/**
+ * Filtro com card de título e drawer contendo {@link Input} e {@link InputSelect}.
+ *
+ * O card exibe o título da página/relatório e um botão para abrir o drawer quando
+ * há campos em `inputs` ou `inputSelect`. O drawer renderiza os campos em grid
+ * responsivo, com ações de limpar e pesquisar.
+ *
+ * @param props - Propriedades do componente. Detalhes em {@link FilterProps}.
+ * @param props.title - Título exibido no card.
+ * @param props.inputs - Campos de texto/máscara ({@link Input}).
+ * @param props.inputSelect - Campos de seleção ({@link InputSelect}).
+ * @param props.onClear - Callback ao limpar filtros.
+ * @param props.onSubmit - Callback ao pesquisar.
+ * @returns Elemento React com card e drawer de filtros.
+ */
+declare const Filter: ({ title, inputs, onClear, onSubmit, inputSelect, }: FilterProps) => ReactElement;
+
+/**
+ * Define um campo {@link InputSelect} no filter preservando a inferência de `T`.
+ * Permite montar listas com tipos de opção diferentes sem union nem `as`.
+ *
+ * @example
+ * filterInputSelect({
+ *   options: networks,
+ *   optionLabel: (v) => v.desRede,
+ *   input: { label: "Rede" },
+ *   order: 1,
+ * })
+ */
+declare function filterInputSelect<T extends object, M extends boolean = false>(props: InputSelectProps<T, M> & InputSelectGridProps): FilterInputSelectField<M>;
+
+export { Card, type CardClassName, type CardProps, DataTable, type DataTableProps, Dialog, type DialogProps, Filter, type FilterCardProps, type FilterDrawerField, type FilterDrawerProps, type FilterInputProps, type FilterInputSelectField, type FilterInputSelectItem, type FilterInputSelectProps, type FilterProps, Input, type InputProps, InputSelect, type InputSelectGridProps, type InputSelectProps, type InputType, Tab, type TabColorProps, type TabProps, Tabs, type TabsProps, filterInputSelect };