@grazziotin/react-components 1.0.3 → 1.0.5

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

@@ -20,40 +20,134 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import { TextField, ThemeProvider } from '@mui/material';
-import { sx, standard, theme } from 'src/styles/sx';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { limitDecimais, mascaradorTelefone, mascaradorInputMoeda, } from 'src/functions/mascaras';
 import { cn } from 'src/lib/utils';
-import { limitDecimais, mascaradorInputMoeda } from 'src/functions/mascaras';
+import { CameraAlt } from '@mui/icons-material';
+import { BarcodeDialog } from 'src/components/barcode';
+import { InputAdornment } from '@mui/material';
+import { lazy, useState, useEffect, useCallback } from 'react';
+var MaskCustom = lazy(function () { return import('./utils/mask-custom'); });
+var InputTextField = lazy(function () { return import('./utils/input-styled'); });
 /**
- * Input personalizado Mui
- * @version 2.0.1
- * @ViniciusCLoeblein
+ * Aplica máscara de CPF ou CNPJ automaticamente com base no comprimento.
+ *
+ * @param {string} cpfCnpj - Valor numérico do CPF ou CNPJ (com ou sem formatação).
+ * @returns {string} Documento com máscara de CPF ou CNPJ.
  */
-export default function Input(_a) {
-    var shrink = _a.shrink, readOnly = _a.readOnly, onKeyEnter = _a.onKeyEnter, _b = _a.size, size = _b === void 0 ? 'small' : _b, _c = _a.type, type = _c === void 0 ? 'text' : _c, rest = __rest(_a, ["shrink", "readOnly", "onKeyEnter", "size", "type"]);
+function mascararDocumento(cpfCnpj) {
+    var value = cpfCnpj.replace(/\D/g, '');
+    if (!value)
+        return '';
+    if (value.length <= 11) {
+        var cpf = value.slice(0, 11);
+        return cpf
+            .replace(/(\d{3})(\d)/, '$1.$2')
+            .replace(/(\d{3})(\d)/, '$1.$2')
+            .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
+    }
+    var cnpj = value.slice(0, 14);
+    return cnpj
+        .replace(/^(\d{2})(\d)/, '$1.$2')
+        .replace(/^(\d{2})\.(\d{3})(\d)/, '$1.$2.$3')
+        .replace(/\.(\d{3})(\d)/, '.$1/$2')
+        .replace(/(\d{4})(\d)/, '$1-$2');
+}
+/**
+ * Componente de entrada (Input) personalizado baseado no MUI (Material-UI) para uso específico no projeto.
+ * Ele inclui diversas funcionalidades como máscaras para formatos específicos (CPF, telefone, moeda) e suporte a captura de código de barras via câmera.
+ *
+ *
+ * @version 0.0.1
+ * @author Flaviasoz
+ * @date 2024-10-21
+ *
+ * @param {InputProps} props - As propriedades do componente Input.
+ * @param {string} [props.mask] - A máscara personalizada a ser aplicada ao campo de entrada, usada em conjunto com o componente `MaskCustom`. **Nota:** Versão beta, não utilizar em telas de produção.
+ * @param {boolean} [props.onCamera] - Função a ser executada após a captura de um código de barras pela câmera.
+ * @param {boolean} [props.openCamera] - Define se a câmera está aberta para captura de código de barras.
+ * @param {function} [props.onKeyEnter] - Callback executado quando a tecla "Enter" é pressionada.
+ * @param {string} [props.type='text'] - Define o tipo do campo de entrada. Pode ser 'text', 'real', 'float', 'cpf', 'celular', ou outros tipos de entrada aceitos pelo HTML.
+ * @param {function} [props.setOpenCamera] - Função para controlar a abertura/fechamento da câmera.
+ * @param {React.InputHTMLAttributes<HTMLInputElement>} [props.rest] - Qualquer outra propriedade HTML ou de entrada aceitas pelo componente Input.
+ *
+ * @returns {JSX.Element} Componente de entrada customizado.
+ *
+ * @example
+ * ```jsx
+ * const MyComponent = () => (
+ *   <Input
+ *     mask="cpf"
+ *     type="cpf"
+ *     onChange={(e) => console.log(e.target.value)}
+ *     onCamera={(code) => console.log("Código de barras:", code)}
+ *     openCamera={true}
+ *     setOpenCamera={(open) => console.log("Câmera aberta:", open)}
+ *   />
+ * );
+ * ```
+ */
+var Input = function (_a) {
+    var mask = _a.mask, onCamera = _a.onCamera, openCamera = _a.openCamera, onKeyEnter = _a.onKeyEnter, _b = _a.type, type = _b === void 0 ? 'text' : _b, setOpenCamera = _a.setOpenCamera, rest = __rest(_a, ["mask", "onCamera", "openCamera", "onKeyEnter", "type", "setOpenCamera"]);
+    var _c = useState(false), open = _c[0], setOpen = _c[1];
+    var _d = useState(), inputProps = _d[0], setInputProps = _d[1];
+    useEffect(function () {
+        var inputProps = __assign(__assign(__assign({}, rest.InputProps), (mask && {
+            inputComponent: MaskCustom,
+            inputProps: { mask: mask },
+        })), (onCamera &&
+            !rest.disabled && {
+            endAdornment: (_jsx(InputAdornment, { className: "cursor-pointer text-grzprimary", position: "end", onClick: function () {
+                    return setOpenCamera ? setOpenCamera(true) : setOpen(true);
+                }, children: _jsx(CameraAlt, { className: "cursor-pointer text-grzprimary", fontSize: "small" }) })),
+        }));
+        setInputProps(inputProps);
+    }, [onCamera, mask, rest.disabled, rest.InputProps, setOpenCamera]);
+    /**
+     * Formata o valor de entrada de acordo com o tipo definido (ex.: CPF, telefone, moeda).
+     *
+     * @param {string} value - O valor a ser formatado.
+     * @returns {string} O valor formatado.
+     */
+    var formatValue = useCallback(function (value) {
+        switch (type) {
+            case 'real':
+                return mascaradorInputMoeda(value.replace(',', '.'));
+            case 'float':
+                return limitDecimais(value.replace(',', '.'), 8);
+            case 'cpf':
+                return mascararDocumento(value);
+            case 'celular':
+                return mascaradorTelefone(value);
+            default:
+                return value;
+        }
+    }, [type]);
+    /**
+     * Manipula a alteração do valor de entrada, aplicando a formatação correta.
+     *
+     * @param {React.ChangeEvent<HTMLInputElement>} e - Evento de alteração da entrada.
+     */
+    var handleChange = function (e) {
+        var newValue = e.target.value;
+        rest.onChange &&
+            rest.onChange(__assign(__assign({}, e), { target: __assign(__assign({}, e.target), { value: formatValue(newValue) }) }));
+    };
+    /**
+     * Lida com o pressionamento da tecla "Enter", disparando o callback `onKeyEnter` se fornecido.
+     *
+     * @param {KeyboardEvent<HTMLDivElement>} e - Evento de pressionamento da tecla.
+     */
     function onEnter(e) {
         if (e.key === 'Enter' && onKeyEnter) {
+            e.preventDefault();
             onKeyEnter();
         }
         rest.onKeyDown && rest.onKeyDown(e);
     }
-    var handleChange = function (e) {
-        var value = e.target.value;
-        if (['real', 'float'].includes(type)) {
-            value = value.replace(',', '.');
-            if (type === 'real') {
-                value = mascaradorInputMoeda(value);
-            }
-            else {
-                value = limitDecimais(value, 8);
-            }
-        }
-        rest.onChange &&
-            rest.onChange(__assign(__assign({}, e), { target: __assign(__assign({}, e.target), { value: value }) }));
-    };
-    var InputProps = __assign({ readOnly: readOnly }, rest.InputProps);
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(TextField, __assign({}, rest, { sx: rest.variant === 'standard' ? standard : sx, onKeyDown: onEnter, InputLabelProps: __assign(__assign({}, rest.InputLabelProps), { shrink: shrink }), InputProps: InputProps, size: size, className: cn('select-none', rest.className), type: ['real', 'float'].includes(type) ? 'text' : type, onChange: handleChange, inputProps: __assign(__assign({}, rest.inputProps), { step: (type === 'real' && '0.01') ||
-                    (type === 'float' && '0.0000001') ||
-                    '1' }) })) }));
-}
+    return (_jsxs(_Fragment, { children: [_jsx(InputTextField, __assign({}, rest, { size: "small", onKeyDown: onEnter, InputProps: inputProps, onChange: handleChange, className: cn('select-none', rest.className), inputProps: __assign(__assign({}, rest.inputProps), { step: (type === 'real' && '0.01') ||
+                        (type === 'float' && '0.0000001') ||
+                        '1' }), type: ['real', 'float'].includes(type) ? 'text' : type })), onCamera && (_jsx(BarcodeDialog, { open: openCamera || open, setOpen: setOpenCamera || setOpen, setCode: onCamera }))] }));
+};
+Input.displayName = 'Input';
+export default Input;

package/dist/components/Inputs/Input/utils/input-styled.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("react").NamedExoticComponent<{
+    variant?: import("@mui/material").TextFieldVariants | undefined;
+} & Omit<import("@mui/material").StandardTextFieldProps | import("@mui/material").FilledTextFieldProps | import("@mui/material").OutlinedTextFieldProps, "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>>;
+export default _default;

package/dist/components/Inputs/Input/utils/input-styled.js

@@ -0,0 +1,63 @@
+import { memo } from 'react';
+import { styled, TextField } from '@mui/material';
+var InputTextField = styled(TextField)({
+    '& input': {
+        fontFamily: 'Montserrat !important',
+        fontSize: '14px',
+        color: '#333',
+    },
+    '& label': {
+        fontFamily: 'Montserrat !important',
+        fontSize: '14px',
+        color: '#333',
+    },
+    '& label.Mui-focused': {
+        color: '#00B2A6',
+    },
+    '& .MuiInput-underline:after': {
+        borderBottomColor: '#00B2A6',
+    },
+    '& .MuiOutlinedInput-root': {
+        fontFamily: 'Montserrat !important',
+        borderRadius: '8px',
+        backgroundColor: '#fff',
+        '& fieldset': {
+            borderColor: 'rgba(0, 178, 166, 0.5)',
+            borderRadius: '8px',
+        },
+        '&:hover fieldset': {
+            borderColor: '#00B2A6',
+        },
+        '&.Mui-focused fieldset': {
+            borderColor: '#00B2A6',
+            borderWidth: '1px',
+        },
+    },
+    '& .MuiFilledInput-root': {
+        fontFamily: 'Montserrat !important',
+        backgroundColor: '#f5f5f5',
+        '&:hover': {
+            backgroundColor: '#e0e0e0',
+        },
+        '&:before': {
+            borderBottomColor: '#00B2A6',
+        },
+        '&:hover:before': {
+            borderBottomColor: '#00B2A6',
+        },
+        '&:after': {
+            borderBottomColor: '#00B2A6',
+        },
+    },
+    '& .MuiInputBase-input': {
+        fontFamily: 'Montserrat !important',
+        fontSize: '14px',
+        color: '#333',
+    },
+    '& .MuiFormHelperText-root': {
+        fontFamily: 'Montserrat !important',
+        fontSize: '10px',
+        marginLeft: 2,
+    },
+});
+export default memo(InputTextField);

package/dist/components/Inputs/Input/utils/interface.d.ts

@@ -0,0 +1,21 @@
+import { ReactMaskOpts } from 'react-imask';
+import { TextFieldProps } from '@mui/material';
+export type InputPropsCustomTypes = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | 'float' | 'real' | 'cpf' | 'celular';
+export type InputProps = TextFieldProps & {
+    openCamera?: boolean;
+    onKeyEnter?: () => void;
+    type?: InputPropsCustomTypes;
+    mask?: ReactMaskOpts['mask'];
+    onCamera?: (v: string) => void;
+    setOpenCamera?: React.Dispatch<React.SetStateAction<boolean>>;
+};
+export interface MaskCustomProps {
+    onChange: (event: {
+        target: {
+            name: string;
+            value: string;
+        };
+    }) => void;
+    name: string;
+    mask: any[];
+}

package/dist/components/Inputs/Input/utils/interface.js

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

package/dist/components/Inputs/Input/utils/mask-custom.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MaskCustomProps } from './interface';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<MaskCustomProps & React.RefAttributes<HTMLInputElement>>>;
+export default _default;

package/dist/components/Inputs/Input/utils/mask-custom.js

@@ -0,0 +1,30 @@
+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 React, { memo } from 'react';
+import { IMaskInput } from 'react-imask';
+var MaskCustom = React.forwardRef(function TextMaskCustom(props, ref) {
+    var onChange = props.onChange, mask = props.mask, other = __rest(props, ["onChange", "mask"]);
+    return (_jsx(IMaskInput, __assign({}, other, { overwrite: true, mask: mask, inputRef: ref, onAccept: function (value) { return onChange({ target: { name: props.name, value: value } }); } })));
+});
+export default memo(MaskCustom);

package/dist/components/Inputs/input-select/index.d.ts

@@ -0,0 +1,42 @@
+import { InputSelectProps } from './utils/interface';
+/**
+ * Componente InputSelect que encapsula o Autocomplete do Material-UI com um campo de entrada personalizado.
+ *
+ * Este componente permite a seleção de uma ou mais opções com base nos parâmetros fornecidos.
+ * Ele é altamente configurável e utiliza as propriedades do Autocomplete do Material-UI,
+ * com a adição de um campo de entrada customizável através de `textFieldProps`.
+ *
+ * @version 0.0.1
+ * @author Flaviasoz
+ * @date 2024-10-21
+ *
+ * @template T - O tipo dos itens de opções exibidos no seletor.
+ * @template M - Define se o seletor permite múltiplas seleções (booleano). O padrão é `false` (seletor único).
+ *
+ * @param {InputSelectProps<T, M>} props - As propriedades que configuram o comportamento do componente.
+ * @param {boolean} [props.multiple=false] - Define se múltiplas opções podem ser selecionadas. Se `true`, o usuário pode selecionar várias opções.
+ * @param {(data: T) => string} props.optionLabel - Função que recebe uma opção e retorna o rótulo (string) a ser exibido na interface.
+ * @param {function(React.SyntheticEvent, M extends true ? T[] : T | null, AutocompleteChangeReason, AutocompleteChangeDetails<T>): void} [props.onChange] - Função de callback acionada quando o valor selecionado é alterado. Recebe o evento, o novo valor, o motivo da alteração e detalhes adicionais.
+ * @param {InputProps} [props.textFieldProps] - Propriedades adicionais para personalizar o campo de entrada (componente Input).
+ * @param {T[]} props.options - Lista de opções disponíveis no seletor.
+ * @param {Omit<AutocompleteProps<T, M, boolean | undefined, boolean | undefined>, 'renderInput' | 'onChange'>} rest - Outras propriedades do Autocomplete do Material-UI, exceto `renderInput` e `onChange`, que são gerenciadas internamente.
+ *
+ * @returns {JSX.Element} O componente `InputSelect`, que inclui o Autocomplete com um campo de entrada personalizado.
+ *
+ * @example
+ * ```jsx
+ * const options = [{ id: 1, label: 'Opção 1' }, { id: 2, label: 'Opção 2' }];
+ *
+ * const MyComponent = () => (
+ *   <InputSelect
+ *     options={options}
+ *     optionLabel={(option) => option.label}
+ *     onChange={(event, value) => console.log('Valor selecionado:', value)}
+ *     multiple={true}
+ *   />
+ * );
+ * ```
+ */
+declare const InputSelect: <T, M extends boolean = false>({ multiple, optionLabel, onChange, textFieldProps, ...rest }: InputSelectProps<T, M>) => JSX.Element;
+export default InputSelect;
+export type { InputSelectProps } from './utils/interface';

package/dist/components/Inputs/input-select/index.js

@@ -0,0 +1,84 @@
+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 Input from 'src/components/inputs/input';
+import Autocomplete from '@mui/material/Autocomplete';
+/**
+ * Componente InputSelect que encapsula o Autocomplete do Material-UI com um campo de entrada personalizado.
+ *
+ * Este componente permite a seleção de uma ou mais opções com base nos parâmetros fornecidos.
+ * Ele é altamente configurável e utiliza as propriedades do Autocomplete do Material-UI,
+ * com a adição de um campo de entrada customizável através de `textFieldProps`.
+ *
+ * @version 0.0.1
+ * @author Flaviasoz
+ * @date 2024-10-21
+ *
+ * @template T - O tipo dos itens de opções exibidos no seletor.
+ * @template M - Define se o seletor permite múltiplas seleções (booleano). O padrão é `false` (seletor único).
+ *
+ * @param {InputSelectProps<T, M>} props - As propriedades que configuram o comportamento do componente.
+ * @param {boolean} [props.multiple=false] - Define se múltiplas opções podem ser selecionadas. Se `true`, o usuário pode selecionar várias opções.
+ * @param {(data: T) => string} props.optionLabel - Função que recebe uma opção e retorna o rótulo (string) a ser exibido na interface.
+ * @param {function(React.SyntheticEvent, M extends true ? T[] : T | null, AutocompleteChangeReason, AutocompleteChangeDetails<T>): void} [props.onChange] - Função de callback acionada quando o valor selecionado é alterado. Recebe o evento, o novo valor, o motivo da alteração e detalhes adicionais.
+ * @param {InputProps} [props.textFieldProps] - Propriedades adicionais para personalizar o campo de entrada (componente Input).
+ * @param {T[]} props.options - Lista de opções disponíveis no seletor.
+ * @param {Omit<AutocompleteProps<T, M, boolean | undefined, boolean | undefined>, 'renderInput' | 'onChange'>} rest - Outras propriedades do Autocomplete do Material-UI, exceto `renderInput` e `onChange`, que são gerenciadas internamente.
+ *
+ * @returns {JSX.Element} O componente `InputSelect`, que inclui o Autocomplete com um campo de entrada personalizado.
+ *
+ * @example
+ * ```jsx
+ * const options = [{ id: 1, label: 'Opção 1' }, { id: 2, label: 'Opção 2' }];
+ *
+ * const MyComponent = () => (
+ *   <InputSelect
+ *     options={options}
+ *     optionLabel={(option) => option.label}
+ *     onChange={(event, value) => console.log('Valor selecionado:', value)}
+ *     multiple={true}
+ *   />
+ * );
+ * ```
+ */
+var InputSelect = function (_a) {
+    var multiple = _a.multiple, optionLabel = _a.optionLabel, onChange = _a.onChange, textFieldProps = _a.textFieldProps, rest = __rest(_a, ["multiple", "optionLabel", "onChange", "textFieldProps"]);
+    var handleChange = function (event, value, reason, details) {
+        if (onChange) {
+            onChange(event, value, reason, details);
+        }
+    };
+    return (_jsx(Autocomplete, __assign({}, rest, { size: "small", multiple: multiple, getOptionLabel: function (v) { return (typeof v !== 'string' ? optionLabel(v) : ''); }, onChange: handleChange, slotProps: __assign({ paper: {
+                sx: {
+                    borderRadius: '12px',
+                    marginTop: 0.5,
+                    boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
+                },
+            } }, rest.slotProps), sx: __assign({ '& .MuiOutlinedInput-root': {
+                borderRadius: '8px',
+                '& fieldset': { borderRadius: '8px' },
+            }, '& .MuiChip-root': {
+                borderRadius: '6px',
+            } }, rest.sx), renderInput: function (params) { return (_jsx(Input, __assign({}, params, textFieldProps, { size: "small" }))); } })));
+};
+export default InputSelect;

package/dist/components/Inputs/input-select/utils/interface.d.ts

@@ -0,0 +1,43 @@
+import { AutocompleteChangeDetails, AutocompleteChangeReason, AutocompleteProps } from '@mui/material';
+import { InputProps } from 'src/components/inputs/input/utils/interface';
+export interface AdicionalPropsInput {
+    order?: number;
+    xs?: number;
+}
+/**
+ * Interface para as propriedades do componente InputSelect.
+ *
+ * @template T - O tipo dos itens de opções no seletor.
+ * @template M - Valor booleano que define se a seleção pode ser múltipla.
+ */
+export interface InputSelectProps<T, M extends boolean = false> extends Omit<AutocompleteProps<T, M, boolean | undefined, boolean | undefined>, 'renderInput' | 'onChange'> {
+    /**
+     * Propriedades adicionais para o campo de entrada.
+     * @type {(Omit<InputProps, 'sx'> & AdicionalPropsInput)}
+     */
+    textFieldProps?: Omit<InputProps, 'sx'> & AdicionalPropsInput;
+    /**
+     * As opções a serem exibidas no seletor.
+     * @type {T[]}
+     */
+    options: T[];
+    /**
+     * Função que retorna a string a ser exibida como o rótulo de uma opção.
+     * @param {T} data - A opção de dado.
+     * @returns {string} O rótulo da opção.
+     */
+    optionLabel: (data: T) => string;
+    /**
+     * Define se o seletor permite múltiplas seleções.
+     * @type {M}
+     */
+    multiple?: M;
+    /**
+     * Função de callback disparada quando o valor do seletor é alterado.
+     * @param {React.SyntheticEvent} event - O evento que disparou a alteração.
+     * @param {M extends true ? T[] : T | null} value - O novo valor selecionado.
+     * @param {AutocompleteChangeReason} reason - O motivo da alteração.
+     * @param {AutocompleteChangeDetails<T>} [details] - Detalhes adicionais da alteração (opcional).
+     */
+    onChange?: (event: React.SyntheticEvent, value: M extends true ? T[] : T | null, reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<T>) => void;
+}

package/dist/components/Inputs/input-select/utils/interface.js

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

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

@@ -0,0 +1,5 @@
+export interface LoaderProps {
+    open: boolean;
+}
+declare function Loader({ open }: Readonly<LoaderProps>): JSX.Element;
+export default Loader;

package/dist/components/Loader/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Backdrop, CircularProgress } from '@mui/material';
+function Loader(_a) {
+    var open = _a.open;
+    return (_jsx(Backdrop, { open: open, invisible: true, sx: { zIndex: function (theme) { return theme.zIndex.drawer + 1; } }, children: _jsx(CircularProgress, { color: "inherit" }) }));
+}
+export default Loader;

package/dist/components/barcode/BarcodeScanner.d.ts

@@ -0,0 +1,26 @@
+import { BarcodeScannerProps } from './utils/interface';
+/**
+ * Componente scanner de código de barras que utiliza a biblioteca Quagga.js
+ * para capturar códigos de barras através da câmera do dispositivo.
+ *
+ * @component
+ * @param props - Propriedades do componente
+ * @param props.setCode - Função callback para definir o código lido
+ * @param props.open - Estado que controla se o scanner está aberto/ativo
+ * @param props.setOpen - Função para controlar o estado de abertura do scanner
+ *
+ * @example
+ * ```tsx
+ * const [code, setCode] = useState('')
+ * const [scannerOpen, setScannerOpen] = useState(false)
+ *
+ * return (
+ *   <BarcodeScanner
+ *     setCode={setCode}
+ *     open={scannerOpen}
+ *     setOpen={setScannerOpen}
+ *   />
+ * )
+ * ```
+ */
+export declare function BarcodeScanner({ setCode, open, setOpen, }: Readonly<BarcodeScannerProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/barcode/barcode-scanner.d.ts

@@ -0,0 +1,26 @@
+import { BarcodeScannerProps } from './utils/interface';
+/**
+ * Componente scanner de código de barras que utiliza a biblioteca Quagga.js
+ * para capturar códigos de barras através da câmera do dispositivo.
+ *
+ * @component
+ * @param props - Propriedades do componente
+ * @param props.setCode - Função callback para definir o código lido
+ * @param props.open - Estado que controla se o scanner está aberto/ativo
+ * @param props.setOpen - Função para controlar o estado de abertura do scanner
+ *
+ * @example
+ * ```tsx
+ * const [code, setCode] = useState('')
+ * const [scannerOpen, setScannerOpen] = useState(false)
+ *
+ * return (
+ *   <BarcodeScanner
+ *     setCode={setCode}
+ *     open={scannerOpen}
+ *     setOpen={setScannerOpen}
+ *   />
+ * )
+ * ```
+ */
+export declare function BarcodeScanner({ setCode, open, setOpen, }: Readonly<BarcodeScannerProps>): import("react/jsx-runtime").JSX.Element;