@facter/ds-core 1.7.7 → 1.8.1

package/dist/index.mjs

@@ -191,6 +191,7 @@ var Input = React10.forwardRef(
               variant: error ? "error" : variant,
               inputSize
             }),
+            !label && "h-9 pt-0 pb-0 py-2",
             Icon2 && "pl-10",
             type === "password" && "pr-11",
             className
@@ -583,6 +584,7 @@ var Select = React10.forwardRef(
                 variant: error ? "error" : variant,
                 selectSize
               }),
+              !label && "h-9 pt-0 pb-0 py-2",
               Icon2 && "pl-10",
               "flex items-center justify-between",
               className
@@ -1120,7 +1122,6 @@ function useDataTableInternal({
     pageIndex: 0,
     pageSize: 10
   });
-  console.log("[useDataTableInternal] pagination state", pagination);
   const table = useReactTable({
     data,
     columns,
@@ -1174,6 +1175,7 @@ function useDataTableInternal({
     pageSize: pagination.pageSize
   };
 }
+var DataTableLoadingContext = React10.createContext(null);
 var DataTableEmptyStateConfigContext = React10.createContext(null);
 var DataTableInstanceContext = React10.createContext(null);
 DataTableInstanceContext.displayName = "DataTableInstanceContext";
@@ -1192,6 +1194,12 @@ function DataTableProvider({
   pageIndex,
   pageSize
 }) {
+  const [isLoading, setIsLoading] = React10.useState(false);
+  const [skeletonRows, setSkeletonRows] = React10.useState(5);
+  const loadingValue = React10.useMemo(
+    () => ({ isLoading, setIsLoading, skeletonRows, setSkeletonRows }),
+    [isLoading, skeletonRows]
+  );
   const [emptyStateConfig, setEmptyStateConfig] = React10.useState({});
   const emptyStateValue = React10.useMemo(
     () => ({ config: emptyStateConfig, setConfig: setEmptyStateConfig }),
@@ -1210,7 +1218,7 @@ function DataTableProvider({
     [pageIndex, pageSize]
   );
   const tableValue = table;
-  return /* @__PURE__ */ jsx(DataTableEmptyStateConfigContext.Provider, { value: emptyStateValue, children: /* @__PURE__ */ jsx(DataTableInstanceContext.Provider, { value: tableValue, children: /* @__PURE__ */ jsx(DataTableMetaContext.Provider, { value: metaValue, children: /* @__PURE__ */ jsx(DataTableDensityContext.Provider, { value: densityValue, children: /* @__PURE__ */ jsx(DataTablePaginationContext.Provider, { value: paginationValue, children }) }) }) }) });
+  return /* @__PURE__ */ jsx(DataTableLoadingContext.Provider, { value: loadingValue, children: /* @__PURE__ */ jsx(DataTableEmptyStateConfigContext.Provider, { value: emptyStateValue, children: /* @__PURE__ */ jsx(DataTableInstanceContext.Provider, { value: tableValue, children: /* @__PURE__ */ jsx(DataTableMetaContext.Provider, { value: metaValue, children: /* @__PURE__ */ jsx(DataTableDensityContext.Provider, { value: densityValue, children: /* @__PURE__ */ jsx(DataTablePaginationContext.Provider, { value: paginationValue, children }) }) }) }) }) });
 }
 function useDataTable() {
   const context = React10.useContext(DataTableInstanceContext);
@@ -1308,6 +1316,15 @@ function useDataTableColumnVisibility() {
     getAllColumns: () => table.getAllColumns().filter((col) => col.getCanHide())
   }), [table, columnVisibility]);
 }
+function useDataTableLoadingState() {
+  const context = React10.useContext(DataTableLoadingContext);
+  if (!context) {
+    throw new Error(
+      "useDataTableLoadingState must be used within <DataTable>."
+    );
+  }
+  return context;
+}
 function useDataTableEmptyStateConfig() {
   const context = React10.useContext(DataTableEmptyStateConfigContext);
   if (!context) {
@@ -1457,16 +1474,19 @@ var DataTableContent = React10.memo(function DataTableContent2({
   stickyHeader = false,
   stripedRows = false,
   highlightOnHover = true,
+  onRowClick,
   className
 }) {
   const table = useDataTable();
   const { isEmpty } = useDataTableMeta();
   const { density } = useDataTableDensity();
   const { config: emptyStateConfig } = useDataTableEmptyStateConfig();
+  const { isLoading, skeletonRows } = useDataTableLoadingState();
   const densityStyles = DENSITY_CONFIG[density];
   const cellClasses = cn(densityStyles.padding, densityStyles.fontSize);
+  const columnCount = table.getVisibleLeafColumns().length;
   const hasRows = table.getRowModel().rows?.length > 0;
-  if (!hasRows && isEmpty) {
+  if (!hasRows && isEmpty && !isLoading) {
     return /* @__PURE__ */ jsx(
       EmptyState,
       {
@@ -1490,14 +1510,16 @@ var DataTableContent = React10.memo(function DataTableContent2({
       },
       header.id
     )) }, headerGroup.id)) }),
-    /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.map((row, index) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(TableBody, { children: isLoading ? Array.from({ length: skeletonRows }).map((_, index) => /* @__PURE__ */ jsx(TableRow, { className: "animate-pulse", children: Array.from({ length: columnCount || 4 }).map((_2, colIndex) => /* @__PURE__ */ jsx(TableCell, { className: cellClasses, children: /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded w-3/4" }) }, colIndex)) }, `skeleton-${index}`)) : table.getRowModel().rows.map((row, index) => /* @__PURE__ */ jsx(
       TableRow,
       {
         "data-state": row.getIsSelected() && "selected",
         className: cn(
           highlightOnHover && "hover:bg-muted/50",
-          stripedRows && index % 2 === 1 && "bg-muted/30"
+          stripedRows && index % 2 === 1 && "bg-muted/30",
+          onRowClick && "cursor-pointer"
         ),
+        onClick: onRowClick ? () => onRowClick(row) : void 0,
         children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { className: cellClasses, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
       },
       row.id
@@ -1509,7 +1531,7 @@ var DataTableToolbar = React10.memo(function DataTableToolbar2({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-between gap-2", className), children });
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-between gap-2 bg-accent/50 p-4 rounded-t-lg", className), children });
 });
 function useDebounce(value, delay = 300) {
   const [debouncedValue, setDebouncedValue] = React10.useState(value);
@@ -1773,24 +1795,19 @@ var DataTableEmptyState = React10.memo(function DataTableEmptyState2({
   return null;
 });
 DataTableEmptyState.displayName = "DataTable.EmptyState";
-function SkeletonRow({ columns }) {
-  return /* @__PURE__ */ jsx(TableRow, { className: "animate-pulse", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsx(TableCell, { className: "py-4", children: /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded w-3/4" }) }, index)) });
-}
 function DataTableLoading({
   visible,
-  skeleton,
-  skeletonRows = 5,
-  className
+  skeletonRows = 5
 }) {
-  const table = useDataTable();
-  const columnCount = table.getVisibleLeafColumns().length;
-  if (!visible) {
-    return null;
-  }
-  if (skeleton) {
-    return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: skeleton });
-  }
-  return /* @__PURE__ */ jsx("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsx("table", { className: "w-full", children: /* @__PURE__ */ jsx("tbody", { children: Array.from({ length: skeletonRows }).map((_, index) => /* @__PURE__ */ jsx(SkeletonRow, { columns: columnCount || 4 }, index)) }) }) }) });
+  const { setIsLoading, setSkeletonRows } = useDataTableLoadingState();
+  React10.useLayoutEffect(() => {
+    setIsLoading(visible);
+    return () => setIsLoading(false);
+  }, [visible, setIsLoading]);
+  React10.useLayoutEffect(() => {
+    setSkeletonRows(skeletonRows);
+  }, [skeletonRows, setSkeletonRows]);
+  return null;
 }
 DataTableLoading.displayName = "DataTable.Loading";
 function DataTableColumnHeader({
@@ -1836,6 +1853,7 @@ var checkboxVariants = cva(
     variants: {
       variant: {
         default: "border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+        muted: "border-muted-foreground/40 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
         secondary: "border-secondary data-[state=checked]:bg-secondary data-[state=checked]:text-secondary-foreground",
         outline: "border-border data-[state=checked]:bg-background data-[state=checked]:text-primary data-[state=checked]:border-primary"
       },
@@ -2270,7 +2288,7 @@ function DataTableTabs({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("flex items-center gap-1 border-b", className),
+      className: cn("flex items-center gap-1", className),
       role: "tablist",
       "aria-label": "Filtros",
       children: tabs.map((tab) => {