@zydon/common 1.0.90 → 1.0.92

package/README.md

@@ -1,5 +1,139 @@
-- Configure:
+# Design system da Zydon
 
+## Instalação no seu projeto
+
+- **instalação pacote:** `yarn add @zydon/common`
+- **instalação dependências necessárias:** `yarn add @emotion/react @emotion/styled @mui/lab @mui/material @mui/x-data-grid-premium @mui/x-date-pickers-pro @mui/x-license-pro react-hook-form react-router-dom`
+- **instalação @types necessários:** `yarn add @types/react-lazy-load-image-component -D`
+
+## Configuração `@zydon/common`
+Basta fazer a seguinte configuração no arquivo `main.ts`:
+```
+import React from 'react';
+import { LicenseInfo } from '@mui/x-license-pro';
+import { Common } from '@zydon/common';
+import ReactDOM from 'react-dom/client';
+
+import '@zydon/common/styles.css';
+
+import App from './App';
+
+LicenseInfo.setLicenseKey(import.meta.env.VITE_MUI_PREMIUM_KEY);
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <Common themeColor="cor_hexadecimal_aqui">
+      <App />
+    </Common>
+  </React.StrictMode>,
+);
+
+```
+## Recursos disponíveis
+> Esse pacote tem os seguintes recursos disponiveis (components, hooks, utils e types):
+
+### Componentes
+- **animate:** recursos construídos utilizando [framer-motion](https://www.npmjs.com/package/framer-motion)
+- **Autocomplete:** componente dropdown de seleção única/múltipla
+- **ColorPickerInput:** componente de seleção de cor
+- **Common:** componente wrapper/provider que faz esse pacote funcionar
+- **ConfirmDelete:** mensagem de confirmação de exclusão
+- **CustomAvatar e CustomAvatarGroup**: avatares customizados
+- **DataGrid:** componente de tabela construido em cima do [MUI-Datagrid](https://mui.com/x/react-data-grid/)
+- **Delayed:** componente que renderiza um `children` com um delay
+- **Drawer:** componente Drawer construido em cima do [MUI-Drawer](https://mui.com/material-ui/react-drawer/)
+- **Editor:** editor `rich text` construido em cima do [react-quill](https://www.npmjs.com/package/react-quill)
+- **FixedProgressBar:** barra de progresso de loading que é apresentado fixo no topo da tela
+- **Iconify:** componente de ícones `SVG` construido em cima do [@iconify/react](https://www.npmjs.com/package/@iconify/react)
+- **Image:** componente de imagem construido em cima do [react-lazy-load-image-component](https://www.npmjs.com/package/react-lazy-load-image-component) *(Priorize quando for utilizar/rendererizar uma imagem)*
+- **Incrementer:** input numérico com botões laterais para incrementar/decrementar o valor
+- **ImageCrop:** componente para cortar imagens
+- **Label:** componente que renderiza uma tag *bonitinha*
+- **MaskedInput:** input com máscara. Util para campos como `CPF`, `CNPJ`, `Telefone`
+- **MenuPopover:** menu flutuante com setinha apontado para um ponto escolhido
+- **Modal:** componente de modal
+- **NumberInput:** input que aceita somente números
+- **Portal:** componente que renderiza o `children` em outro local desejado [React Portals](https://react.dev/reference/react-dom/createPortal)
+- **Scrollbar:** Scrollbar `bonitinha` construido em cima do [simplebar-react](https://www.npmjs.com/package/simplebar-react)
+- **SearchInput:** componente para busca/filtros. Funciona com `onChange` e como click na tecla `enter`
+- **snackbar:** componente para mostrar mensagens `[sucesso | alerta | informação | erro]` para o usuário
+```
+const { enqueueSnackbar } = useSnackbar();
+enqueueSnackbar('Mensagem', { variant: 'error' });
+```
+- **Steps:** componente que indica etapas e o progresso. Construido em cima do [MUI-Stepper](https://mui.com/material-ui/react-stepper/)
+- **TabPanel:** componente para renderizar o conteúdos de uma `Tab`. Todas as tabs são rendreziadas, mas somente o conteúdo da `Tab` ativa será exibido
+- **ThemeProvider:** wrapper/provider para configuração do tema. *(Provavelmente vc nunca vai precisar usá-lo, já que ele já está includo no component* `<Common />`)
+- **upload (Upload, UploadAvatar, UplaodBox e UploadWithCrop):** componentes para uploads de arquivos
+
+#### Componentes de formulário (react-hook-form)
+- **Form:** componente de formulário construido em cima do [react-hook-form](https://www.npmjs.com/package/react-hook-form). *(Todos os componentes abaixo funcionam somente dentro desse componente:)* `<Form />`
+- **Autocomplete:** componente dropdown de seleção única/múltipla
+- **Checkbox / MultiCheckbox:** caixa seleção
+- **Codes:** campos para inserção de código. Ex: código recebido por e-email
+- **ColorPickerField:** componente de seleção de cor
+- **DatePicker:** componente de seleção de data. Construido em cima do [MUI-DatePicker](https://mui.com/x/react-date-pickers/date-picker/)
+- **DateRangePicker:** componente de seleção de intervalo de data. Construido em cima do [MUI-DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/)
+- **DateTimePicker:** componente de seleção de data e hora. Construido em cima do [MUI-DateTimePicker](https://mui.com/x/react-date-pickers/getting-started/)
+- **EditorField:** editor `rich text` construido em cima do [react-quill](https://www.npmjs.com/package/react-quill)
+- **Field:** componente de inserção de texto. Construido em cima do [MUI-TextField](https://mui.com/material-ui/react-text-field/)
+- **MaskedInputField:** componente de input com máscara. Util para campos como `CPF`, `CNPJ`, `Telefone`
+- **PasswordField:** componente para inserção de senha com um olhinho para visualização da senha no canto direito.
+- **RadioGroup:** componente de seleção única. Construido em cima do [MUI-RadioGroup](https://mui.com/material-ui/api/radio-group/)
+- **Switch:** componente de ativação/desativação. Construido em cima do [MUI-Switch](https://mui.com/material-ui/react-switch/)
+- **TimePicker:** componente de seleção hora. Construido em cima do [MUI-TimePicker](https://mui.com/x/react-date-pickers/time-picker/)
+- **UploadWithCropField:** componente para upload/crop de imagem
+
+#### Componentes de navegação
+- **NavSectionHorizontal:** itens para navegação na horizontal
+- **NavSectionMini:** itens para navegação, versão mini
+- **NavSectionVertical:** itens para navegação na vertical
+
+### Utils
+- **file:** utils para lidar com arquivos `(downloadFile)`
+- **formatNumber:** utils para formatar números `(fNumber, fCurrency, fPercent, fShortenNumber, fData result, fWithDecimalPlacesOrNot)`
+- **formatTime:** utils para lidar com datas `(fDate, fDateTime format, fTimestamp, fToNow)` (*Construido utilizando* [date-fns](https://www.npmjs.com/package/date-fns))
+- **cssStyles:** utils para lidar com estilos CSS `(bgBlur, bgGradient, textGradient, filterStyles, hideScrollbarY, hideScrollbarX)`
+- **routes:**  utils para lidar com rotas `(getRoot)`
+- **sort:** utils para lidar com ordenação de arrys de objetos `(sort, updatePosition)`
+- **validators:** utils para validação de dados `(cpfIsValid, cnpjIsValid)`
+- **number:** utils para lidar com números `(isMultiple, roundIfNecessary)`
+- **uuidv4:** utils para gerar um UUID v4
+- **loadable:** util para utilizar com code split. Ele irá carregar o compomente e exibirá um loading fixo no topo da tela
+
+### Hooks
+- **useActiveElement:** hook que indicar qual compnente (input, button, etc.) está com foco ativo
+- **useActiveLink:** hook que mostra se a rota passada está ativa ou não
+- **useCopyToClipboard:** hook para copiar algum texto para a área de transferência. Equivalente a `ctrl`+`c`
+- **useDatagrid:** hook com recursos utéis para serem usados por um `<Datagrid />`
+- **useDeepCompareEffect:** hook semelhante ao `useEffect` do React, mas que lida melhor com objetos complexos
+- **useEventListener:** hook para lidar com eventos JavaScript
+- **useIsMounting:** hook que retorna um booleano indicando se é a primeira renderezição do componente
+- **useResponsive:** hook que retorna qual a media-query está ativa `(xs, sm, md, lg, xl)`
+- **useTabs:** hook com recursos utéis para lidar com tabs `(currentTab, onChangeTab, setCurrentTab)`
+- **useToggle:** hook que alterna o estado que uma variável boolean. Ex:
+```
+const [detailsOpen, toggleDetailsOpen] = useToggle(true);
+```
+
+### Types
+- **PagedRequest** interface para tipar requisições paginadas. Ex: `PagedRequest<{userId: string}>` *(agora o userId também vai estar disponivel no objeto)*
+```
+export type PagedRequest<T = unknown> = T & {
+  search?: string;
+  page?: number;
+  perPage?: number;
+  sort?: string;
+  dir?: 'asc' | 'desc';
+};
+```
+
+- **PagedResponse** interface para tipar respostas paginadas.  Ex: `PagedResponse<User[]>` *(agora sabemos que no 'items' temos um array de usuários)*
 ```
-  yarn add @emotion/react @emotion/styled @mui/lab @mui/material @mui/x-data-grid-premium @mui/x-date-pickers-pro react-hook-form
+export interface PagedResponse<T> {
+  currentPage: number;
+  perPage: number;
+  total: number;
+  items: T;
+}
 ```

package/dist/components/Incrementer/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { IncrementerProps } from './props';
+declare const Incrementer: import("react").ForwardRefExoticComponent<Omit<IncrementerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default Incrementer;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Incrementer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Incrementer/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,QAAA,MAAM,WAAW,0HA8HhB,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/dist/components/Incrementer/props.d.ts

@@ -0,0 +1,14 @@
+import { TextFieldProps } from '@mui/material';
+export type IncrementerProps = {
+    name: string;
+    increment?: number;
+    updadteForMultiple?: boolean;
+    allowNegative?: boolean;
+    decimalScale?: number;
+    value?: number;
+    onChange: (value: string | number | undefined | null) => void;
+    minValue?: number;
+    maxValue?: number;
+    loading?: boolean;
+} & Omit<TextFieldProps, 'onChange'>;
+//# sourceMappingURL=props.d.ts.map

package/dist/components/Incrementer/props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/components/Incrementer/props.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC"}

package/dist/components/MaskedInput/index.d.ts

@@ -10,7 +10,7 @@ declare const MaskedInput: import("react").ForwardRefExoticComponent<(Omit<{
             value: string;
         };
     }) => void;
-} & import("@mui/material").FilledTextFieldProps, "ref"> | Omit<{
+} & import("@mui/material").OutlinedTextFieldProps, "ref"> | Omit<{
     name: string;
     mask: {
         mask: string;
@@ -21,7 +21,7 @@ declare const MaskedInput: import("react").ForwardRefExoticComponent<(Omit<{
             value: string;
         };
     }) => void;
-} & import("@mui/material").OutlinedTextFieldProps, "ref"> | Omit<{
+} & import("@mui/material").FilledTextFieldProps, "ref"> | Omit<{
     name: string;
     mask: {
         mask: string;

package/dist/components/NumberInput/index.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+declare const NumberInput: React.ForwardRefExoticComponent<(Omit<{
+    name: string;
+    decimalScale?: number | undefined;
+    fixedDecimalScale?: boolean | undefined;
+    prefix?: string | undefined;
+    allowNegative?: boolean | undefined;
+    minValue?: number | undefined;
+    maxValue?: number | undefined;
+    maxLength?: number | undefined;
+    value?: string | number | null | undefined;
+    onChange?: ((event: {
+        target: {
+            name: string;
+            value: number | undefined;
+        };
+    }) => void) | undefined;
+} & import("@mui/material").OutlinedTextFieldProps, "ref"> | Omit<{
+    name: string;
+    decimalScale?: number | undefined;
+    fixedDecimalScale?: boolean | undefined;
+    prefix?: string | undefined;
+    allowNegative?: boolean | undefined;
+    minValue?: number | undefined;
+    maxValue?: number | undefined;
+    maxLength?: number | undefined;
+    value?: string | number | null | undefined;
+    onChange?: ((event: {
+        target: {
+            name: string;
+            value: number | undefined;
+        };
+    }) => void) | undefined;
+} & import("@mui/material").FilledTextFieldProps, "ref"> | Omit<{
+    name: string;
+    decimalScale?: number | undefined;
+    fixedDecimalScale?: boolean | undefined;
+    prefix?: string | undefined;
+    allowNegative?: boolean | undefined;
+    minValue?: number | undefined;
+    maxValue?: number | undefined;
+    maxLength?: number | undefined;
+    value?: string | number | null | undefined;
+    onChange?: ((event: {
+        target: {
+            name: string;
+            value: number | undefined;
+        };
+    }) => void) | undefined;
+} & import("@mui/material").StandardTextFieldProps, "ref">) & React.RefAttributes<HTMLDivElement>>;
+export default NumberInput;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/NumberInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,QAAA,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kGA4FhB,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/dist/components/NumberInput/props.d.ts

@@ -0,0 +1,19 @@
+import { TextFieldProps } from '@mui/material';
+export type NumberInputProps = {
+    name: string;
+    decimalScale?: number;
+    fixedDecimalScale?: boolean;
+    prefix?: string;
+    allowNegative?: boolean;
+    minValue?: number;
+    maxValue?: number;
+    maxLength?: number;
+    value?: string | number | null | undefined;
+    onChange?: (event: {
+        target: {
+            name: string;
+            value: number | undefined;
+        };
+    }) => void;
+} & TextFieldProps;
+//# sourceMappingURL=props.d.ts.map

package/dist/components/NumberInput/props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/components/NumberInput/props.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QACjB,MAAM,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;SAAE,CAAC;KACrD,KAAK,IAAI,CAAC;CACZ,GAAG,cAAc,CAAC"}

package/dist/components/animate/variants/background.d.ts

@@ -4,7 +4,7 @@ export declare const varBgColor: (props?: BackgroundType) => {
         background: string[];
         transition: {
             duration: number;
-            ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+            ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
         };
     };
 };
@@ -16,7 +16,7 @@ export declare const varBgKenburns: (props?: BackgroundType) => {
             transformOrigin: string[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -28,7 +28,7 @@ export declare const varBgKenburns: (props?: BackgroundType) => {
             transformOrigin: string[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -39,7 +39,7 @@ export declare const varBgKenburns: (props?: BackgroundType) => {
             transformOrigin: string[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -51,7 +51,7 @@ export declare const varBgKenburns: (props?: BackgroundType) => {
             transformOrigin: string[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -64,7 +64,7 @@ export declare const varBgPan: (props?: BackgroundType) => {
             backgroundSize: string[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -75,7 +75,7 @@ export declare const varBgPan: (props?: BackgroundType) => {
             backgroundSize: string[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -86,7 +86,7 @@ export declare const varBgPan: (props?: BackgroundType) => {
             backgroundSize: string[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -97,7 +97,7 @@ export declare const varBgPan: (props?: BackgroundType) => {
             backgroundSize: string[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };

package/dist/components/animate/variants/bounce.d.ts

@@ -7,7 +7,7 @@ export declare const varBounce: (props?: VariantsType) => {
             opacity: number[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -23,7 +23,7 @@ export declare const varBounce: (props?: VariantsType) => {
             opacity: number[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -32,7 +32,7 @@ export declare const varBounce: (props?: VariantsType) => {
             opacity: number[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -44,7 +44,7 @@ export declare const varBounce: (props?: VariantsType) => {
             opacity: number[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -53,7 +53,7 @@ export declare const varBounce: (props?: VariantsType) => {
             opacity: number[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -65,7 +65,7 @@ export declare const varBounce: (props?: VariantsType) => {
             opacity: number[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -74,7 +74,7 @@ export declare const varBounce: (props?: VariantsType) => {
             opacity: number[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -86,7 +86,7 @@ export declare const varBounce: (props?: VariantsType) => {
             opacity: number[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -95,7 +95,7 @@ export declare const varBounce: (props?: VariantsType) => {
             opacity: number[];
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };

package/dist/components/animate/variants/fade.d.ts

@@ -8,14 +8,14 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: (props?: import("../types").TranEnterType | undefined) => {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
             opacity: number;
             transition: (props?: import("../types").TranExitType | undefined) => {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -29,7 +29,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -37,7 +37,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -51,7 +51,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -59,7 +59,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -73,7 +73,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -81,7 +81,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -95,7 +95,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -103,7 +103,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -115,14 +115,14 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -136,7 +136,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -144,7 +144,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -158,7 +158,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -166,7 +166,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -180,7 +180,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -188,7 +188,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };
@@ -202,7 +202,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
         exit: {
@@ -210,7 +210,7 @@ export declare const varFade: (props?: VariantsType) => {
             opacity: number;
             transition: {
                 duration: number;
-                ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
+                ease: number[] | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
             };
         };
     };