@grazziotin/react-components-next 1.0.0 → 1.0.1

package/dist/ui/index.d.ts

@@ -1,5 +1,12 @@
-import { CSSProperties, Breakpoint } from '@mui/material';
-import React$1, { ComponentPropsWithoutRef } from 'react';
+import * as _mui_material from '@mui/material';
+import { CSSProperties, Breakpoint, TabProps as TabProps$1, TabsProps as TabsProps$1 } from '@mui/material';
+import * as react from 'react';
+import react__default, { ComponentPropsWithoutRef } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DataGridProps } from '@mui/x-data-grid';
+import * as _emotion_styled from '@emotion/styled';
+import * as _mui_system from '@mui/system';
+import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
 
 /**
  * Tipo do atributo nativo `className` de um elemento `div` no React.
@@ -55,7 +62,7 @@ interface CardProps {
     /**
      * Cor de fundo do cabeçalho.
      * Aceita cores CSS (hex, rgb, variáveis CSS, etc.).
-     * @default "var(--color-primary)"
+     * @default "var(--primary-color)"
      */
     titleColor?: string;
     /**
@@ -104,7 +111,7 @@ interface CardProps {
  * @param props.toolTip - Habilita tooltip no título.
  * @param props.className - `className` nativo do React no container.
  * @param props.titleWidth - Largura da barra do cabeçalho. Padrão: `"100%"`.
- * @param props.titleColor - Cor de fundo do cabeçalho. Padrão: `var(--color-primary)`.
+ * @param props.titleColor - Cor de fundo do cabeçalho. Padrão: `var(--primary-color)`.
  * @param props.borderTitle - `border-radius` só do cabeçalho.
  * @param props.onClick - Clique no card; adiciona `cursor: pointer !important`.
  * @param props.borderRadius - `border-radius` do container.
@@ -219,6 +226,91 @@ interface DialogProps {
  * </Dialog>
  * ```
  */
-declare function Dialog({ open, title, onClose, actions, children, maxWidth, blurBackdrop, }: Readonly<DialogProps>): React$1.ReactElement;
+declare function Dialog({ open, title, onClose, actions, children, maxWidth, blurBackdrop, }: Readonly<DialogProps>): react__default.ReactElement;
 
-export { Card, type CardClassName, type CardProps, Dialog, type DialogProps };
+/**
+ * Propriedades do componente {@link DataTable}.
+ * Wrapper tipado sobre o MUI `DataGrid`, com estilização e textos em português.
+ */
+type DataTableProps = DataGridProps;
+
+/**
+ * Componente DataTable personalizado baseado no MUI DataGrid.
+ *
+ * Fornece uma tabela de dados com estilização customizada, filtros avançados,
+ * paginação, ordenação e gerenciamento de colunas.
+ *
+ * Recursos incluídos:
+ * - Operador de filtro "entre" automático para colunas string e number
+ * - Painel de filtros customizado
+ * - Painel de gerenciamento de colunas
+ * - Paginação estilizada
+ * - Overlay personalizado para "sem dados"
+ * - Textos em português brasileiro
+ *
+ * @param props - Todas as props do MUI DataGrid são suportadas. Ver {@link DataTableProps}.
+ *
+ * @example
+ * <DataTable
+ *   rows={dados}
+ *   columns={colunas}
+ *   loading={carregando}
+ *   pageSizeOptions={[10, 20, 50]}
+ * />
+ */
+declare const DataTable: ({ ...rest }: DataTableProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Propriedades de estilo compartilhadas entre {@link Tab} e {@link Tabs}.
+ */
+interface TabColorProps {
+    /**
+     * Cor do indicador ativo e do rótulo da aba selecionada.
+     * @default "var(--primary-color)"
+     */
+    color?: string;
+    /**
+     * Família tipográfica do rótulo da aba.
+     * Defina `--font-family` no CSS do projeto ou passe esta prop diretamente.
+     * @default "var(--font-family, inherit)"
+     */
+    fontFamily?: string;
+}
+/**
+ * Propriedades do componente {@link Tab}.
+ * Estende o `Tab` do MUI com suporte a cor customizada via `color`.
+ */
+type TabProps = TabProps$1 & TabColorProps;
+/**
+ * Propriedades do componente {@link Tabs}.
+ * Estende o `Tabs` do MUI com suporte a cor customizada do indicador via `color`.
+ */
+type TabsProps = TabsProps$1 & TabColorProps;
+
+/**
+ * Container de abas baseado no MUI `Tabs`, com indicador colorido customizável.
+ *
+ * @param props.color - Cor do indicador da aba ativa. Padrão: `var(--primary-color)`.
+ *
+ * @example
+ * ```tsx
+ * <Tabs value={value} onChange={handleChange} color="#00B2A6">
+ *   <Tab label="Aba 1" />
+ * </Tabs>
+ * ```
+ */
+declare const Tabs: _emotion_styled.StyledComponent<_mui_material.TabsOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "className" | "aria-label" | "aria-labelledby" | "children" | "onChange" | "sx" | "classes" | "slots" | "slotProps" | "variant" | "value" | "action" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "orientation" | "scrollButtons" | "selectionFollowsFocus" | "textColor" | "visibleScrollbar"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & TabColorProps, {}, {}>;
+/**
+ * Aba individual baseada no MUI `Tab`, com tipografia e cor de seleção customizáveis.
+ *
+ * @param props.color - Cor do rótulo quando a aba está selecionada. Padrão: `var(--primary-color)`.
+ * @param props.fontFamily - Família tipográfica do rótulo. Padrão: `var(--font-family, inherit)`.
+ *
+ * @example
+ * ```tsx
+ * <Tab label="Configurações" color="#00B2A6" />
+ * ```
+ */
+declare const Tab: _emotion_styled.StyledComponent<_mui_material.TabOwnProps & Omit<_mui_material.ButtonBaseOwnProps, keyof _mui_material.TabOwnProps> & Omit<_mui_material.ButtonBaseOwnProps, "tabIndex" | "type" | "touchRippleRef" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | keyof _mui_material.TabOwnProps> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "label" | "style" | "className" | "tabIndex" | "children" | "icon" | "sx" | "type" | "classes" | "disabled" | "touchRippleRef" | "value" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "disableFocusRipple" | "iconPosition" | "wrapped"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & TabColorProps, {}, {}>;
+
+export { Card, type CardClassName, type CardProps, DataTable, type DataTableProps, Dialog, type DialogProps, Tab, type TabColorProps, type TabProps, Tabs, type TabsProps };

package/dist/ui/index.js

@@ -9,6 +9,8 @@ var DialogMui = require('@mui/material/Dialog');
 var DialogTitle = require('@mui/material/DialogTitle');
 var DialogActions = require('@mui/material/DialogActions');
 var DialogContent = require('@mui/material/DialogContent');
+var locales = require('@mui/x-data-grid/locales');
+var xDataGrid = require('@mui/x-data-grid');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -18,6 +20,8 @@ var DialogActions__default = /*#__PURE__*/_interopDefault(DialogActions);
 var DialogContent__default = /*#__PURE__*/_interopDefault(DialogContent);
 
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -33,6 +37,19 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 function cn(...values) {
   return tailwindMerge.twMerge(clsx.clsx(values));
 }
@@ -49,7 +66,7 @@ function Card({
   height = "auto",
   titleWidth = "100%",
   justifyContent = "space-between",
-  titleColor = "var(--color-primary)",
+  titleColor = "var(--primary-color)",
   icon
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -116,6 +133,12 @@ var DIALOG_BACKDROP_STYLE = {
   backdropFilter: "blur(4px)",
   backgroundColor: "rgba(0, 0, 0, 0.5)"
 };
+var DIALOG_PAPER_FONT_SX = {
+  fontFamily: "var(--font-family, inherit) !important",
+  "& .MuiDialogTitle-root, & .MuiDialogContent-root, & .MuiDialogActions-root, & .MuiTypography-root": {
+    fontFamily: "inherit !important"
+  }
+};
 function Dialog({
   open,
   title,
@@ -133,7 +156,10 @@ function Dialog({
       open,
       onClose,
       maxWidth,
-      slotProps: { backdrop: { sx: backdropStyle } },
+      slotProps: {
+        backdrop: { sx: backdropStyle },
+        paper: { sx: DIALOG_PAPER_FONT_SX }
+      },
       children: [
         title && /* @__PURE__ */ jsxRuntime.jsx(DialogTitle__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-black-de", children: title }) }),
         /* @__PURE__ */ jsxRuntime.jsx(DialogContent__default.default, { className: "text-black", children }),
@@ -143,8 +169,347 @@ function Dialog({
   );
 }
 var dialog_default = Dialog;
+var localeText = __spreadProps(__spreadValues({}, locales.ptBR.components.MuiDataGrid.defaultProps.localeText), {
+  noColumnsOverlayLabel: "Nenhuma coluna dispon\xEDvel",
+  noColumnsOverlayManageColumns: "Gerenciar colunas",
+  columnsManagementSearchTitle: "Buscar coluna",
+  columnsManagementNoColumns: "Nenhuma coluna para mostrar",
+  columnsManagementShowHideAllText: "Mostrar/Ocultar todas",
+  columnsManagementReset: "Redefinir",
+  columnsManagementDeleteIconLabel: "Excluir",
+  columnMenuManageColumns: "Gerenciar colunas",
+  columnMenuShowColumns: "Mostrar colunas",
+  columnMenuLabel: "Menu da coluna",
+  columnMenuHideColumn: "Ocultar",
+  columnMenuUnsort: "Remover ordena\xE7\xE3o",
+  columnMenuSortAsc: "Ordenar ASC",
+  columnMenuSortDesc: "Ordenar DESC",
+  columnMenuFilter: "Filtrar",
+  toolbarQuickFilterLabel: "Filtro r\xE1pido",
+  toolbarQuickFilterPlaceholder: "Filtrar\u2026",
+  toolbarQuickFilterDeleteIconLabel: "Limpar filtro",
+  toolbarExport: "Exportar",
+  toolbarExportLabel: "Exportar",
+  toolbarExportCSV: "Baixar como CSV",
+  toolbarExportPrint: "Imprimir",
+  toolbarColumns: "Colunas",
+  toolbarColumnsLabel: "Selecionar colunas",
+  toolbarFilters: "Filtros",
+  toolbarFiltersLabel: "Mostrar filtros",
+  toolbarFiltersTooltipHide: "Ocultar filtros",
+  toolbarFiltersTooltipShow: "Mostrar filtros",
+  toolbarFiltersTooltipActive: (count) => count === 1 ? `${count} filtro ativo` : `${count} filtros ativos`,
+  toolbarDensity: "Densidade",
+  toolbarDensityLabel: "Densidade",
+  toolbarDensityCompact: "Compacta",
+  toolbarDensityStandard: "Padr\xE3o",
+  toolbarDensityComfortable: "Confort\xE1vel",
+  filterPanelAddFilter: "Adicionar filtro",
+  filterPanelDeleteIconLabel: "Excluir",
+  filterPanelOperatorAnd: "E",
+  filterPanelOperatorOr: "OU",
+  filterPanelColumn: "Colunas",
+  filterPanelInputLabel: "Valor",
+  filterPanelInputPlaceholder: "Valor do filtro",
+  filterOperatorContains: "cont\xE9m",
+  filterOperatorEquals: "igual a",
+  filterOperatorStartsWith: "come\xE7a com",
+  filterOperatorEndsWith: "termina com",
+  filterOperatorIs: "\xE9",
+  filterOperatorNot: "n\xE3o \xE9",
+  filterOperatorAfter: "depois de",
+  filterOperatorOnOrAfter: "em ou depois de",
+  filterOperatorBefore: "antes de",
+  filterOperatorOnOrBefore: "em ou antes de",
+  filterOperatorIsEmpty: "est\xE1 vazio",
+  filterOperatorIsNotEmpty: "n\xE3o est\xE1 vazio",
+  filterOperatorIsAnyOf: "\xE9 qualquer um de",
+  footerTotalRows: "Total de linhas:",
+  footerRowSelected: (count) => count === 1 ? "1 linha selecionada" : `${count.toLocaleString()} linhas selecionadas`,
+  footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} de ${totalCount.toLocaleString()}`,
+  paginationRowsPerPage: "Linhas por p\xE1gina:",
+  paginationItemAriaLabel: (type) => {
+    switch (type) {
+      case "first":
+        return "Primeira p\xE1gina";
+      case "last":
+        return "\xDAltima p\xE1gina";
+      case "next":
+        return "Pr\xF3xima p\xE1gina";
+      case "previous":
+        return "P\xE1gina anterior";
+      default:
+        return "";
+    }
+  },
+  noRowsLabel: "Nenhum dado encontrado",
+  noResultsOverlayLabel: "Nenhum resultado encontrado",
+  checkboxSelectionHeaderName: "Sele\xE7\xE3o de checkbox",
+  checkboxSelectionSelectAllRows: "Selecionar todas as linhas",
+  checkboxSelectionUnselectAllRows: "Desmarcar todas as linhas",
+  checkboxSelectionSelectRow: "Selecionar linha",
+  checkboxSelectionUnselectRow: "Desmarcar linha",
+  columnHeaderSortIconLabel: "Ordenar",
+  groupingColumnHeaderName: "Grupo",
+  groupColumn: (name) => `Agrupar por ${name}`,
+  unGroupColumn: (name) => `Parar de agrupar por ${name}`,
+  detailPanelToggle: "Alternar painel de detalhes",
+  expandDetailPanel: "Expandir",
+  collapseDetailPanel: "Recolher",
+  treeDataGroupingHeaderName: "Grupo",
+  treeDataExpand: "ver filhos",
+  treeDataCollapse: "ocultar filhos",
+  aggregationMenuItemHeader: "Agrega\xE7\xE3o",
+  aggregationFunctionLabelSum: "soma",
+  aggregationFunctionLabelAvg: "m\xE9dia",
+  aggregationFunctionLabelMin: "m\xEDn",
+  aggregationFunctionLabelMax: "m\xE1x",
+  aggregationFunctionLabelSize: "tamanho",
+  paginationDisplayedRows: ({ from, to, count }) => {
+    const total = count === -1 ? "mais de " + to : count;
+    return `${from}\u2013${to} de ${total}`;
+  }
+});
+var columnPanelSx = {
+  padding: 2,
+  width: "350px",
+  color: "#000000DE"
+};
+var columnMenuSx = {
+  "& .MuiListItemText-primary": {
+    fontSize: "14px !important"
+  }
+};
+var filterSx = {
+  width: "750px",
+  "*": { fontSize: "14px !important" },
+  "& .MuiDataGrid-filterFormColumnInput": { width: "230px" },
+  "& .MuiDataGrid-filterFormOperatorInput": { width: "230px" }
+};
+var paginationSx = {
+  "& .MuiTablePagination-root": { fontSize: "12px !important" },
+  "& .MuiTablePagination-selectLabel": { fontSize: "12px !important" },
+  "& .MuiTablePagination-displayedRows": { fontSize: "12px !important" },
+  "& .MuiTablePagination-select": { fontSize: "12px !important" },
+  "& .MuiTablePagination-toolbar": {
+    minHeight: "40px !important",
+    padding: "0 8px !important"
+  }
+};
+var tableSx = {
+  fontSize: "13px",
+  "& .MuiDataGrid-row:nth-of-type(even)": {
+    backgroundColor: "#F9FAFB"
+  },
+  "& .MuiDataGrid-row:nth-of-type(odd)": {
+    backgroundColor: "#FFFFFF"
+  },
+  "& .MuiDataGrid-row.Mui-selected:nth-of-type(even)": {
+    backgroundColor: "#F9FAFB !important"
+  },
+  "& .MuiDataGrid-row.Mui-selected:nth-of-type(odd)": {
+    backgroundColor: "#FFFFFF !important"
+  },
+  "& .MuiDataGrid-row:hover": { backgroundColor: "#F3F4F6 !important" },
+  "& .MuiDataGrid-columnHeaderTitleContainer": {
+    color: "#FFFFFF",
+    justifyContent: "center",
+    "& svg": { color: "#FFFFFF" }
+  },
+  "& .MuiDataGrid-iconButtonContainer .MuiIconButton-root, & .MuiDataGrid-menuIconButton": {
+    color: "#FFFFFF"
+  },
+  "& .MuiDataGrid-iconButtonContainer .MuiIconButton-root:hover, & .MuiDataGrid-menuIconButton:hover": { backgroundColor: "transparent" },
+  "& .MuiDataGrid-iconButtonContainer .MuiIconButton-root.Mui-focusVisible, & .MuiDataGrid-menuIconButton.Mui-focusVisible": { backgroundColor: "transparent" },
+  "& .MuiDataGrid-columnHeaders": {
+    background: "linear-gradient(to right, #00B2A6 0%, #0AAEB2 100%)"
+  },
+  "& .MuiDataGrid-columnHeader": {
+    color: "#FFFFFF",
+    fontWeight: "bold",
+    backgroundColor: "transparent",
+    "& svg": { color: "#FFFFFF" }
+  },
+  "& .MuiDataGrid-columnHeader:hover": { backgroundColor: "transparent" },
+  "& .MuiDataGrid-columnHeader:hover .MuiIconButton-root": {
+    backgroundColor: "transparent"
+  },
+  "& .MuiDataGrid-columnHeader:focus-within": {
+    backgroundColor: "transparent"
+  },
+  "& .MuiDataGrid-columnHeader--sorted": { backgroundColor: "transparent" },
+  "& .MuiDataGrid-columnHeader--sorted .MuiIconButton-root": {
+    backgroundColor: "transparent"
+  },
+  "& .MuiDataGrid-sortIcon": { color: "#FFFFFF" },
+  "& .MuiDataGrid-sortIcon:hover": { backgroundColor: "transparent" },
+  "& .MuiDataGrid-columnHeaderTitle": { fontWeight: "500", color: "#FFFFFF" }
+};
+var createChange = (item, applyValue) => (index) => ({ target }) => {
+  const [start = "", end = ""] = Array.isArray(item.value) ? item.value : [];
+  applyValue(__spreadProps(__spreadValues({}, item), {
+    value: index === 0 ? [target.value, end] : [start, target.value]
+  }));
+};
+var textBetweenOp = {
+  label: "entre",
+  value: "between",
+  getApplyFilterFn: (filter) => {
+    if (!filter.value || !Array.isArray(filter.value)) return null;
+    const [start, end] = filter.value;
+    if (!start || !end) return null;
+    return (value) => {
+      const cell = (value == null ? void 0 : value.toString()) || "";
+      return cell >= start && cell <= end;
+    };
+  },
+  InputComponent: ({ item, applyValue, focusElementRef }) => {
+    const onChange = createChange(item, applyValue);
+    return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.TextField,
+        {
+          size: "small",
+          label: "De",
+          variant: "outlined",
+          inputRef: focusElementRef,
+          value: (item.value || ["", ""])[0] || "",
+          onChange: onChange(0),
+          placeholder: "Inicial"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.TextField,
+        {
+          size: "small",
+          label: "At\xE9",
+          variant: "outlined",
+          value: (item.value || ["", ""])[1] || "",
+          onChange: onChange(1),
+          placeholder: "Final"
+        }
+      )
+    ] });
+  }
+};
+var numberBetweenOp = {
+  label: "entre",
+  value: "between",
+  getApplyFilterFn: (filter) => {
+    if (!filter.value || !Array.isArray(filter.value)) return null;
+    const [start, end] = filter.value;
+    if (start === "" || end === "" || start == null || end == null) return null;
+    return (value) => {
+      const number = Number(value);
+      return number >= Number(start) && number <= Number(end);
+    };
+  },
+  InputComponent: ({ item, applyValue, focusElementRef }) => {
+    const onChange = createChange(item, applyValue);
+    return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.TextField,
+        {
+          size: "small",
+          label: "De",
+          type: "number",
+          variant: "outlined",
+          inputRef: focusElementRef,
+          value: (item.value || ["", ""])[0] || "",
+          onChange: onChange(0),
+          placeholder: "M\xEDnimo"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.TextField,
+        {
+          size: "small",
+          label: "At\xE9",
+          type: "number",
+          variant: "outlined",
+          value: (item.value || ["", ""])[1] || "",
+          onChange: onChange(1),
+          placeholder: "M\xE1ximo"
+        }
+      )
+    ] });
+  }
+};
+var getTextOps = () => {
+  return [...xDataGrid.getGridStringOperators(), textBetweenOp];
+};
+var getNumberOps = () => {
+  return [...xDataGrid.getGridNumericOperators(), numberBetweenOp];
+};
+xDataGrid.GRID_STRING_COL_DEF.filterOperators = getTextOps();
+xDataGrid.GRID_NUMERIC_COL_DEF.filterOperators = getNumberOps();
+function CustomColumnsPanel(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(xDataGrid.GridColumnsPanel, __spreadProps(__spreadValues({}, props), { sx: columnPanelSx }));
+}
+function CustomColumnMenu(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: columnMenuSx, children: /* @__PURE__ */ jsxRuntime.jsx(xDataGrid.GridColumnMenu, __spreadValues({}, props)) });
+}
+function CustomFilterPanel(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(xDataGrid.GridFilterPanel, __spreadProps(__spreadValues({}, props), { sx: filterSx }));
+}
+function CustomNoRowsOverlay() {
+  return /* @__PURE__ */ jsxRuntime.jsx(xDataGrid.GridOverlay, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mt: 1 }, children: "Nenhum dado encontrado." }) });
+}
+function CustomPagination() {
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: paginationSx, children: /* @__PURE__ */ jsxRuntime.jsx(xDataGrid.GridPagination, {}) });
+}
+var DataTable = (_a) => {
+  var rest = __objRest(_a, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mb: 2, mt: 2, height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    xDataGrid.DataGrid,
+    __spreadProps(__spreadValues({
+      sx: tableSx
+    }, rest), {
+      className: "min-h-[210px]!",
+      localeText,
+      disableRowSelectionOnClick: true,
+      slotProps: {
+        loadingOverlay: {
+          variant: "linear-progress",
+          noRowsVariant: "skeleton"
+        }
+      },
+      slots: {
+        columnMenu: CustomColumnMenu,
+        filterPanel: CustomFilterPanel,
+        columnsPanel: CustomColumnsPanel,
+        noRowsOverlay: CustomNoRowsOverlay,
+        pagination: CustomPagination
+      }
+    })
+  ) });
+};
+var data_table_default = DataTable;
+var DEFAULT_TAB_COLOR = "var(--primary-color)";
+var DEFAULT_TAB_FONT_FAMILY = "var(--font-family, inherit)";
+var Tabs = material.styled(material.Tabs, {
+  shouldForwardProp: (prop) => prop !== "color"
+})(({ color = DEFAULT_TAB_COLOR }) => ({
+  fontFamily: `${DEFAULT_TAB_FONT_FAMILY} !important`,
+  "& .MuiTabs-indicator": { backgroundColor: color }
+}));
+var Tab = material.styled(material.Tab, {
+  shouldForwardProp: (prop) => prop !== "color" && prop !== "fontFamily"
+})(
+  ({ color = DEFAULT_TAB_COLOR, fontFamily = DEFAULT_TAB_FONT_FAMILY }) => ({
+    fontWeight: "500 !important",
+    color: "#000000CC !important",
+    fontSize: "14px !important",
+    textTransform: "uppercase !important",
+    fontFamily: `${fontFamily} !important`,
+    "&.Mui-selected": { color: `${color} !important` }
+  })
+);
 
 exports.Card = card_default;
+exports.DataTable = data_table_default;
 exports.Dialog = dialog_default;
+exports.Tab = Tab;
+exports.Tabs = Tabs;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map