@grazziotin/react-components 1.0.1 → 1.0.3

package/README.md

@@ -10,14 +10,12 @@ npm install @grazziotin/react-components
 
 ### Dependências necessárias
 
-O pacote usa **peer dependencies**. Instale no seu projeto:
-
 ```bash
-npm install react react-dom @mui/material @mui/icons-material
+npm @mui/material @mui/icons-material
 ```
 
-- `react` e `react-dom` >= 17
-- `@mui/material` e `@mui/icons-material` >= 5
+- `react` e `react-dom` >= 17  
+- `@mui/material` e `@mui/icons-material` >= 7 (para Input, Dialog, Filtro, etc.)
 
 ## Uso
 

package/dist/components/Dialog/Dialog.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Dialog from './index';
+declare const meta: Meta<typeof Dialog>;
+export default meta;
+type Story = StoryObj<typeof Dialog>;
+export declare const Default: Story;
+export declare const WithActions: Story;
+export declare const WithoutTitle: Story;
+export declare const SmallWidth: Story;

package/dist/components/Dialog/Dialog.stories.js

@@ -0,0 +1,80 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Dialog from './index';
+import { Button } from '@mui/material';
+var meta = {
+    title: 'Components/Dialog',
+    component: Dialog,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        open: { control: 'boolean' },
+        title: { control: 'text' },
+        maxWidth: {
+            control: 'select',
+            options: [false, 'xs', 'sm', 'md', 'lg', 'xl'],
+        },
+    },
+};
+export default meta;
+function DefaultStory(args) {
+    var _a = useState(false), open = _a[0], setOpen = _a[1];
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "contained", onClick: function () { return setOpen(true); }, children: "Abrir Dialog" }), _jsx(Dialog, __assign({}, args, { open: open, onClose: function () { return setOpen(false); }, actions: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: function () { return setOpen(false); }, children: "Cancelar" }), _jsx(Button, { variant: "contained", onClick: function () { return setOpen(false); }, children: "Confirmar" })] }) }))] }));
+}
+export var Default = {
+    args: {
+        open: true,
+        title: 'Título do diálogo',
+        children: 'Conteúdo do diálogo. Você pode colocar qualquer conteúdo aqui.',
+    },
+    render: function (args) { return _jsx(DefaultStory, __assign({}, args)); },
+};
+function WithActionsStory(args) {
+    var _a = useState(false), open = _a[0], setOpen = _a[1];
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outlined", onClick: function () { return setOpen(true); }, children: "Abrir com a\u00E7\u00F5es" }), _jsx(Dialog, __assign({}, args, { open: open, onClose: function () { return setOpen(false); }, actions: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: function () { return setOpen(false); }, children: "Cancelar" }), _jsx(Button, { variant: "contained", color: "error", onClick: function () { return setOpen(false); }, children: "Excluir" })] }) }))] }));
+}
+export var WithActions = {
+    args: {
+        open: true,
+        title: 'Confirmar ação',
+        children: 'Deseja realmente continuar? Esta ação não pode ser desfeita.',
+    },
+    render: function (args) { return _jsx(WithActionsStory, __assign({}, args)); },
+};
+function WithoutTitleStory(args) {
+    var _a = useState(false), open = _a[0], setOpen = _a[1];
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "contained", onClick: function () { return setOpen(true); }, children: "Abrir sem t\u00EDtulo" }), _jsx(Dialog, __assign({}, args, { open: open, onClose: function () { return setOpen(false); }, actions: _jsx(Button, { onClick: function () { return setOpen(false); }, children: "Fechar" }) }))] }));
+}
+export var WithoutTitle = {
+    args: {
+        open: true,
+        children: 'Dialog sem título, apenas conteúdo.',
+    },
+    render: function (args) { return _jsx(WithoutTitleStory, __assign({}, args)); },
+};
+function SmallWidthStory(args) {
+    var _a = useState(false), open = _a[0], setOpen = _a[1];
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "contained", onClick: function () { return setOpen(true); }, children: "Abrir (xs)" }), _jsx(Dialog, __assign({}, args, { open: open, onClose: function () { return setOpen(false); }, actions: _jsx(Button, { onClick: function () { return setOpen(false); }, children: "Fechar" }) }))] }));
+}
+export var SmallWidth = {
+    args: {
+        open: true,
+        title: 'Dialog pequeno',
+        maxWidth: 'xs',
+        children: 'maxWidth="xs"',
+    },
+    render: function (args) { return _jsx(SmallWidthStory, __assign({}, args)); },
+};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Breakpoint } from '@mui/material';
+export interface DialogProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    actions?: React.ReactNode;
+    maxWidth?: false | Breakpoint;
+}
+declare const Dialog: ({ open, onClose, title, children, actions, maxWidth, }: DialogProps) => JSX.Element;
+export default Dialog;

package/dist/components/Dialog/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import DialogMui from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+var Dialog = function (_a) {
+    var open = _a.open, onClose = _a.onClose, title = _a.title, children = _a.children, actions = _a.actions, maxWidth = _a.maxWidth;
+    return (_jsxs(DialogMui, { onClose: onClose, open: open, maxWidth: maxWidth, fullWidth: true, children: [title && (_jsx(DialogTitle, { children: _jsx("p", { className: "text-base font-semibold", children: title }) })), _jsx(DialogContent, { className: "text-black", children: children }), actions && _jsx(DialogActions, { children: actions })] }));
+};
+export default Dialog;

package/dist/components/Filter/Filter.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Filtro from './index';
+declare const meta: Meta<typeof Filtro>;
+export default meta;
+type Story = StoryObj<typeof Filtro>;
+export declare const Default: Story;
+export declare const ComPesquisa: Story;
+export declare const ComCsv: Story;

package/dist/components/Filter/Filter.stories.js

@@ -0,0 +1,85 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import Filtro from './index';
+var meta = {
+    title: 'Components/Filtro',
+    component: Filtro,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ['autodocs'],
+};
+export default meta;
+function FiltroStory(args) {
+    var _a = useState(''), pesquisa = _a[0], setPesquisa = _a[1];
+    return (_jsx(Filtro, __assign({}, args, { pesquisa: pesquisa, setPesquisa: setPesquisa, onClear: function () {
+            setPesquisa('');
+        }, onSubmit: function () { } })));
+}
+export var Default = {
+    args: {
+        title: 'Listagem',
+        inputs: [
+            {
+                label: 'Nome',
+                name: 'nome',
+                order: 1,
+                xs: 12,
+            },
+            {
+                label: 'E-mail',
+                name: 'email',
+                type: 'email',
+                order: 2,
+                xs: 12,
+            },
+        ],
+        inputSelect: [
+            {
+                options: [
+                    { value: '', label: 'Todos' },
+                    { value: 'ativo', label: 'Ativo' },
+                    { value: 'inativo', label: 'Inativo' },
+                ],
+                label: 'Status',
+                name: 'status',
+                order: 3,
+                xs: 12,
+            },
+        ],
+    },
+    render: function (args) { return _jsx(FiltroStory, __assign({}, args)); },
+};
+export var ComPesquisa = {
+    args: {
+        title: 'Busca',
+        setPesquisa: function () { },
+        inputs: [
+            { label: 'Código', name: 'codigo', order: 1, xs: 6 },
+            { label: 'Descrição', name: 'descricao', order: 2, xs: 6 },
+        ],
+    },
+    render: function (args) { return _jsx(FiltroStory, __assign({}, args)); },
+};
+export var ComCsv = {
+    args: {
+        title: 'Exportar',
+        csv: {
+            onClick: function () { },
+            isLoading: false,
+        },
+        inputs: [{ label: 'Filtro', name: 'filtro', order: 1, xs: 12 }],
+    },
+    render: function (args) { return _jsx(FiltroStory, __assign({}, args)); },
+};

package/dist/components/Filter/components/FiltroCard.d.ts

@@ -0,0 +1,3 @@
+import type { FiltroCardProps } from '../utils/interface';
+declare function FiltroCard<T>({ csv, title, setOpen, pesquisa, excelProps, setPesquisa, renderFiltro, }: FiltroCardProps<T>): JSX.Element;
+export default FiltroCard;

package/dist/components/Filter/components/FiltroCard.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconButton, Tooltip, CircularProgress } from '@mui/material';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import TableChartIcon from '@mui/icons-material/TableChart';
+import Input from 'src/components/Inputs/Input';
+import { cn } from 'src/lib/utils';
+function FiltroCard(_a) {
+    var csv = _a.csv, title = _a.title, setOpen = _a.setOpen, pesquisa = _a.pesquisa, excelProps = _a.excelProps, setPesquisa = _a.setPesquisa, renderFiltro = _a.renderFiltro;
+    return (_jsxs("div", { className: "h-15 flex items-center w-full bg-white shadow-full mb-2 rounded-md", children: [_jsx("div", { className: "h-full w-2 bg-grzprimary rounded-tl-md rounded-bl-md" }), _jsxs("div", { className: "w-full flex justify-between items-center p-3", children: [_jsx("h1", { className: "font-semibold text-lg whitespace-nowrap text-ellipsis overflow-hidden ml-1 text-black/80", children: title }), _jsxs("div", { className: "flex items-center gap-4", children: [renderFiltro && (_jsx(Tooltip, { title: "Ver filtros", placement: "bottom-end", children: _jsx("span", { className: "flex items-center", children: _jsx("button", { type: "button", onClick: function () { return setOpen(true); }, className: "bg-grzprimary h-10 w-10 rounded-md flex items-center justify-center transition-all duration-500 hover:bg-grzsecondary shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20", children: _jsx(FilterListIcon, { className: "h-7 w-7 text-white" }) }) }) })), csv && (_jsx(Tooltip, { title: "Exportar CSV", placement: "bottom-end", children: _jsx("span", { children: _jsx(IconButton, { className: cn('bg-grzprimary min-w-10 min-h-10', {
+                                            'bg-system-100': csv.isLoading,
+                                        }), onClick: csv.onClick, disabled: csv.isLoading, size: "small", children: csv.isLoading ? (_jsx(CircularProgress, { size: 20, color: "inherit" })) : (_jsx(TableChartIcon, { sx: { color: 'white' } })) }) }) })), (excelProps === null || excelProps === void 0 ? void 0 : excelProps.onClick) && !csv && (_jsx(Tooltip, { title: "Exportar Excel", placement: "bottom-end", children: _jsx("span", { children: _jsx(IconButton, { className: "bg-grzprimary min-w-10 min-h-10", onClick: excelProps.onClick, disabled: excelProps.isLoading, size: "small", children: excelProps.isLoading ? (_jsx(CircularProgress, { size: 20, color: "inherit" })) : (_jsx(TableChartIcon, { sx: { color: 'white' } })) }) }) })), setPesquisa && (_jsx(Input, { type: "search", value: pesquisa !== null && pesquisa !== void 0 ? pesquisa : '', placeholder: "Digite para filtrar", onChange: function (e) { return setPesquisa(e.target.value); } }))] })] })] }));
+}
+export default FiltroCard;

package/dist/components/Filter/components/Filtros.d.ts

@@ -0,0 +1,3 @@
+import type { FiltrosProps } from '../utils/interface';
+declare function Filtros<T, M extends boolean = false>({ open, setOpen, onClear, onSubmit, inputs, inputSelect, }: FiltrosProps<T, M>): JSX.Element;
+export default Filtros;

package/dist/components/Filter/components/Filtros.js

@@ -0,0 +1,59 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Drawer, Grid } from '@mui/material';
+import Input from 'src/components/Inputs/Input';
+import InputSelect from './InputSelect';
+import { useDimension } from 'src/hooks';
+function isInputSelect(obj) {
+    return 'options' in obj && Array.isArray(obj.options);
+}
+function Filtros(_a) {
+    var _b;
+    var open = _a.open, setOpen = _a.setOpen, onClear = _a.onClear, onSubmit = _a.onSubmit, _c = _a.inputs, inputs = _c === void 0 ? [] : _c, _d = _a.inputSelect, inputSelect = _d === void 0 ? [] : _d;
+    var m640 = useDimension(640);
+    var m1120 = useDimension(1120);
+    var allInputs = __spreadArray(__spreadArray([], (inputs !== null && inputs !== void 0 ? inputs : []), true), (inputSelect !== null && inputSelect !== void 0 ? inputSelect : []), true).sort(function (a, b) {
+        var _a, _b;
+        var orderA = (_a = a.order) !== null && _a !== void 0 ? _a : 99;
+        var orderB = (_b = b.order) !== null && _b !== void 0 ? _b : 99;
+        return orderA - orderB;
+    });
+    var render = function (input, i) {
+        var _a, _b, _c, _d, _e;
+        if (isInputSelect(input)) {
+            var span_1 = (_c = (_b = (_a = input.textFieldProps) === null || _a === void 0 ? void 0 : _a.xs) !== null && _b !== void 0 ? _b : input.xs) !== null && _c !== void 0 ? _c : gridSize;
+            return (_jsx(Grid, { size: { xs: 12, sm: span_1 }, children: _jsx(InputSelect, __assign({}, input, { id: (_d = input.id) !== null && _d !== void 0 ? _d : "inputSM".concat(i), fullWidth: true })) }, "inputSelect-".concat(i)));
+        }
+        var span = (_e = input.xs) !== null && _e !== void 0 ? _e : gridSize;
+        return (_jsx(Grid, { size: { xs: 12, sm: span }, children: _jsx(Input, __assign({}, input, { fullWidth: true })) }, "input-".concat(i)));
+    };
+    var handleSubmit = function (event) {
+        event.preventDefault();
+        if (onSubmit) {
+            onSubmit(event);
+            setOpen(false);
+        }
+    };
+    var gridSize = m640 ? 12 : m1120 ? 4 : 3;
+    return (_jsx(Drawer, { anchor: "top", open: open !== null && open !== void 0 ? open : false, onClose: function () { return setOpen(false); }, sx: (_b = {}, _b["& .MuiDrawer-paper"] = { borderRadius: '0px 0px 20px 20px' }, _b), children: _jsxs("form", { className: "w-full flex flex-col pl-5 py-4 select-none", onSubmit: handleSubmit, children: [_jsx("p", { className: "text-system-900 font-semibold text-lg", children: "Filtros" }), _jsx("p", { className: "text-system-700 text-sm pt-1 pb-5", children: "Para que possamos apresentar dados espec\u00EDficos, por favor, preencha os campos abaixo." }), _jsx(Grid, { container: true, pr: 2, rowSpacing: 2, columnSpacing: 1, children: allInputs.map(function (input, index) { return render(input, index); }) }), _jsxs("div", { className: "flex justify-end pt-4 gap-4 pr-4", children: [onClear && (_jsx(Button, { onClick: onClear, variant: "outlined", color: "secondary", children: "Limpar Filtros" })), onSubmit && (_jsx(Button, { variant: "contained", type: "submit", children: "Pesquisar" }))] })] }) }));
+}
+export default Filtros;

package/dist/components/Filter/components/InputSelect.d.ts

@@ -0,0 +1,3 @@
+import type { InputSelectProps } from '../utils/interface';
+declare function InputSelectComponent<T = unknown, M extends boolean = false>({ options, label, value, onChange, fullWidth, multiple, name, id, placeholder, disabled, }: InputSelectProps<T, M>): JSX.Element;
+export default InputSelectComponent;

package/dist/components/Filter/components/InputSelect.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextField, MenuItem } from '@mui/material';
+import { ThemeProvider } from '@mui/material/styles';
+import { theme } from 'src/styles/sx';
+function InputSelectComponent(_a) {
+    var options = _a.options, label = _a.label, value = _a.value, onChange = _a.onChange, fullWidth = _a.fullWidth, multiple = _a.multiple, name = _a.name, id = _a.id, placeholder = _a.placeholder, disabled = _a.disabled;
+    var handleChange = function (e) {
+        var v = e.target.value;
+        onChange === null || onChange === void 0 ? void 0 : onChange(v);
+    };
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(TextField, { select: true, fullWidth: fullWidth, label: label, value: value !== null && value !== void 0 ? value : '', onChange: handleChange, name: name, id: id, placeholder: placeholder, disabled: disabled, size: "small", variant: "outlined", SelectProps: { multiple: multiple }, children: options.map(function (opt) { return (_jsx(MenuItem, { value: opt.value, children: opt.label }, String(opt.value))); }) }) }));
+}
+export default InputSelectComponent;

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

@@ -0,0 +1,10 @@
+import type { FiltroProps } from './utils/interface';
+/**
+ * Componente de filtro genérico que permite a busca e filtragem de dados.
+ *
+ * @template T - O tipo de dados a ser filtrado.
+ * @template M - Tipo que indica se a seleção múltipla está habilitada (padrão: false).
+ */
+declare function Filtro<T, M extends boolean = false>({ csv, title, inputs, onClear, onSubmit, pesquisa, excelProps, setPesquisa, inputSelect, }: FiltroProps<T, M>): JSX.Element;
+export default Filtro;
+export type { FiltroProps, CsvProps, InputSelectOption, InputSelectProps } from './utils/interface';

package/dist/components/Filter/index.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import FiltroCard from './components/FiltroCard';
+import Filtros from './components/Filtros';
+/**
+ * Componente de filtro genérico que permite a busca e filtragem de dados.
+ *
+ * @template T - O tipo de dados a ser filtrado.
+ * @template M - Tipo que indica se a seleção múltipla está habilitada (padrão: false).
+ */
+function Filtro(_a) {
+    var csv = _a.csv, title = _a.title, inputs = _a.inputs, onClear = _a.onClear, onSubmit = _a.onSubmit, pesquisa = _a.pesquisa, excelProps = _a.excelProps, setPesquisa = _a.setPesquisa, inputSelect = _a.inputSelect;
+    var _b = useState(false), open = _b[0], setOpen = _b[1];
+    function renderFiltro() {
+        var _a, _b;
+        return ((_a = inputs === null || inputs === void 0 ? void 0 : inputs.length) !== null && _a !== void 0 ? _a : 0) > 0 || ((_b = inputSelect === null || inputSelect === void 0 ? void 0 : inputSelect.length) !== null && _b !== void 0 ? _b : 0) > 0;
+    }
+    return (_jsxs("div", { children: [_jsx(FiltroCard, { csv: csv, title: title, setOpen: setOpen, pesquisa: pesquisa, excelProps: excelProps, setPesquisa: setPesquisa, renderFiltro: renderFiltro() }), _jsx(Filtros, { open: open, inputs: inputs, setOpen: setOpen, onClear: onClear, onSubmit: onSubmit, inputSelect: inputSelect })] }));
+}
+export default Filtro;

package/dist/components/Filter/utils/interface.d.ts

@@ -0,0 +1,76 @@
+import type { InputProps } from 'src/components/Inputs/Input';
+/**
+ * Propriedades para o componente CSV.
+ */
+export interface CsvProps {
+    onClick: () => void;
+    isLoading: boolean;
+}
+/**
+ * Propriedades para o botão Excel (opcional).
+ */
+export interface ExcelButtonProps<T = unknown> {
+    onClick?: () => void;
+    isLoading?: boolean;
+    data?: T[];
+    filename?: string;
+}
+/**
+ * Propriedades para o componente FiltroCard.
+ */
+export interface FiltroCardProps<T = unknown> {
+    csv?: CsvProps;
+    title?: string;
+    pesquisa?: string;
+    renderFiltro: boolean;
+    excelProps?: ExcelButtonProps<T>;
+    setPesquisa?: (value: string) => void;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+/**
+ * Propriedades adicionais para inputs.
+ */
+export interface AdicionalPropsInput {
+    order?: number;
+    xs?: number;
+}
+export type InputsTypeFiltro = InputProps & AdicionalPropsInput;
+/**
+ * Opção para select.
+ */
+export interface InputSelectOption {
+    value: string | number;
+    label: string;
+}
+/**
+ * Propriedades para o componente InputSelect.
+ */
+export interface InputSelectProps<T = unknown, M extends boolean = false> {
+    options: InputSelectOption[];
+    label?: string;
+    value?: M extends true ? (string | number)[] : string | number;
+    onChange?: (value: M extends true ? (string | number)[] : string | number) => void;
+    fullWidth?: boolean;
+    multiple?: M;
+    textFieldProps?: AdicionalPropsInput;
+    name?: string;
+    id?: string;
+    placeholder?: string;
+    disabled?: boolean;
+}
+/**
+ * Propriedades para o componente Filtros.
+ */
+export interface FiltrosProps<T = unknown, M extends boolean = false> {
+    open?: boolean;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    inputs?: InputsTypeFiltro[];
+    inputSelect?: Array<InputSelectProps<T, M> & AdicionalPropsInput>;
+    onClear?: () => void;
+    onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
+}
+/**
+ * Propriedades para o componente Filtro.
+ */
+export interface FiltroProps<T = unknown, M extends boolean = false> extends Omit<FiltroCardProps<T>, 'renderFiltro' | 'setOpen'>, Omit<FiltrosProps<T, M>, 'open' | 'setOpen'> {
+}

package/dist/components/Filter/utils/interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Inputs/Input/Input.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Input from './index';
+declare const meta: Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof Input>;
+export declare const Default: Story;
+export declare const WithValue: Story;
+export declare const Password: Story;
+export declare const Real: Story;
+export declare const OnKeyEnter: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const Standard: Story;

package/dist/components/Inputs/Input/Input.stories.js

@@ -0,0 +1,99 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Input from './index';
+var meta = {
+    title: 'Components/Input',
+    component: Input,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        label: { control: 'text' },
+        placeholder: { control: 'text' },
+        type: {
+            control: 'select',
+            options: ['text', 'number', 'email', 'password', 'real', 'float'],
+        },
+        size: {
+            control: 'select',
+            options: ['small', 'medium'],
+        },
+        disabled: { control: 'boolean' },
+        readOnly: { control: 'boolean' },
+        shrink: { control: 'boolean' },
+        variant: {
+            control: 'select',
+            options: ['outlined', 'filled', 'standard'],
+        },
+    },
+};
+export default meta;
+export var Default = {
+    args: {
+        label: 'Label',
+        placeholder: 'Digite aqui...',
+        variant: 'outlined',
+    },
+};
+export var WithValue = {
+    args: {
+        label: 'Nome',
+        value: 'João Silva',
+        variant: 'outlined',
+    },
+};
+export var Password = {
+    args: {
+        label: 'Senha',
+        type: 'password',
+        placeholder: '••••••••',
+        variant: 'outlined',
+    },
+};
+export var Real = {
+    args: {},
+    render: function RealStory() {
+        var _a = useState(''), value = _a[0], setValue = _a[1];
+        return (_jsx(Input, { label: "Valor (R$)", type: "real", value: value, onChange: function (e) { return setValue(e.target.value); }, variant: "outlined" }));
+    },
+};
+export var OnKeyEnter = {
+    args: {},
+    render: function OnKeyEnterStory() {
+        var _a = useState([]), log = _a[0], setLog = _a[1];
+        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 16 }, children: [_jsx(Input, { label: "Pressione Enter", placeholder: "Digite e pressione Enter", onKeyEnter: function () { return setLog(function (prev) { return __spreadArray(__spreadArray([], prev, true), ['Enter pressionado!'], false); }); }, variant: "outlined" }), log.length > 0 && (_jsx("ul", { style: { margin: 0, paddingLeft: 20 }, children: log.map(function (item, i) { return (_jsx("li", { children: item }, "log-".concat(i, "-").concat(item))); }) }))] }));
+    },
+};
+export var Disabled = {
+    args: {
+        label: 'Desabilitado',
+        value: 'Não editável',
+        disabled: true,
+        variant: 'outlined',
+    },
+};
+export var ReadOnly = {
+    args: {
+        label: 'Somente leitura',
+        value: 'Apenas leitura',
+        readOnly: true,
+        variant: 'outlined',
+    },
+};
+export var Standard = {
+    args: {
+        label: 'Standard variant',
+        placeholder: 'Variante standard',
+        variant: 'standard',
+    },
+};

package/dist/components/Inputs/InputSelectMultiple/index.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { AutocompleteProps } from '@mui/material/Autocomplete';
+import type { InputProps } from '../Input';
+export interface CustomAutocompleteProps<T> extends Omit<AutocompleteProps<T, boolean, boolean, boolean, 'div'>, 'renderInput'> {
+    renderInput?: React.ReactNode;
+}
+export interface InputSelectMultipleProps<T> extends CustomAutocompleteProps<T> {
+    className?: string;
+    textFieldProps: InputProps;
+    optionLabel: (data: T) => string;
+    xs?: number;
+    order?: number;
+    render?: boolean;
+    disablePortal?: boolean;
+}
+/**
+ * Componente de selects múltiplos, serve para quando temos listas grandes para tratar.
+ * @version 1.5.0
+ * @ViniciusCLoeblein
+ */
+declare function InputSelectMultiple<T>({ className, textFieldProps, optionLabel, disablePortal, ...rest }: Readonly<InputSelectMultipleProps<T>>): JSX.Element;
+export default InputSelectMultiple;

package/dist/components/Inputs/InputSelectMultiple/index.js

@@ -0,0 +1,38 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import Autocomplete from '@mui/material/Autocomplete';
+import { sxTextField } from 'src/styles/sx';
+import Input from '../Input';
+/**
+ * Componente de selects múltiplos, serve para quando temos listas grandes para tratar.
+ * @version 1.5.0
+ * @ViniciusCLoeblein
+ */
+function InputSelectMultiple(_a) {
+    var className = _a.className, textFieldProps = _a.textFieldProps, optionLabel = _a.optionLabel, _b = _a.disablePortal, disablePortal = _b === void 0 ? true : _b, rest = __rest(_a, ["className", "textFieldProps", "optionLabel", "disablePortal"]);
+    return (_jsx("div", { className: className, children: _jsx(Autocomplete, __assign({ disablePortal: disablePortal, sx: sxTextField, filterSelectedOptions: true, getOptionLabel: function (data) {
+                return typeof data !== 'string' ? optionLabel(data) : 'Não há dados';
+            } }, rest, { renderInput: function (params) { return _jsx(Input, __assign({}, params, textFieldProps)); } })) }));
+}
+export default InputSelectMultiple;

package/dist/index.d.ts

@@ -1,2 +1,8 @@
 export { default as Input } from './components/Inputs/Input';
 export type { InputProps } from './components/Inputs/Input';
+export { default as InputSelectMultiple } from './components/Inputs/InputSelectMultiple';
+export type { InputSelectMultipleProps, CustomAutocompleteProps, } from './components/Inputs/InputSelectMultiple';
+export { default as Dialog } from './components/Dialog';
+export type { DialogProps } from './components/Dialog';
+export { default as Filtro } from './components/Filter';
+export type { FiltroProps, CsvProps, InputSelectOption, InputSelectProps, } from './components/Filter';