@facter/ds-core 1.7.7 → 1.8.1

package/dist/index.d.mts

@@ -352,6 +352,8 @@ interface DataTableSearchProps {
     column?: string;
     /** Debounce delay em ms */
     debounce?: number;
+    /** Callback para server-side search (recebe valor com debounce aplicado) */
+    onSearch?: (value: string) => void;
     /** Custom className */
     className?: string;
 }
@@ -385,6 +387,8 @@ interface DataTableContentProps {
     stripedRows?: boolean;
     /** Highlight no hover */
     highlightOnHover?: boolean;
+    /** Callback quando uma row é clicada */
+    onRowClick?: (row: unknown) => void;
     /** Custom className */
     className?: string;
 }
@@ -530,13 +534,7 @@ declare namespace DataTableRoot {
     var displayName: string;
 }
 
-/**
- * DataTable.Loading - Componente de loading state
- *
- * Renderiza um skeleton ou overlay quando visible=true.
- * Não renderiza nada quando visible=false.
- */
-declare function DataTableLoading({ visible, skeleton, skeletonRows, className, }: DataTableLoadingProps): react_jsx_runtime.JSX.Element | null;
+declare function DataTableLoading({ visible, skeletonRows, }: DataTableLoadingProps): null;
 declare namespace DataTableLoading {
     var displayName: string;
 }
@@ -801,7 +799,7 @@ declare const toast: ((message: string) => string | number) & {
 };
 
 declare const checkboxVariants: (props?: ({
-    variant?: "default" | "outline" | "secondary" | null | undefined;
+    variant?: "default" | "outline" | "secondary" | "muted" | null | undefined;
     size?: "sm" | "lg" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface CheckboxProps extends React$1.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, VariantProps<typeof checkboxVariants> {
@@ -2010,7 +2008,7 @@ interface ItemCardHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
 declare const ItemCardHeader: React$1.ForwardRefExoticComponent<ItemCardHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const itemCardIconVariants: (props?: ({
     size?: "sm" | "lg" | "md" | null | undefined;
-    variant?: "destructive" | "outline" | "secondary" | "success" | "warning" | "info" | "primary" | "muted" | null | undefined;
+    variant?: "destructive" | "outline" | "secondary" | "success" | "warning" | "info" | "muted" | "primary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ItemCardIconProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof itemCardIconVariants> {
     /** Whether to show ripple effect */
@@ -2030,7 +2028,7 @@ interface ItemCardSubtitleProps extends React$1.HTMLAttributes<HTMLParagraphElem
 declare const ItemCardSubtitle: React$1.ForwardRefExoticComponent<ItemCardSubtitleProps & React$1.RefAttributes<HTMLParagraphElement>>;
 
 declare const itemCardBadgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "success" | "warning" | "info" | "primary" | "muted" | null | undefined;
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | "muted" | "primary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ItemCardBadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof itemCardBadgeVariants> {
 }

package/dist/index.d.ts

@@ -352,6 +352,8 @@ interface DataTableSearchProps {
     column?: string;
     /** Debounce delay em ms */
     debounce?: number;
+    /** Callback para server-side search (recebe valor com debounce aplicado) */
+    onSearch?: (value: string) => void;
     /** Custom className */
     className?: string;
 }
@@ -385,6 +387,8 @@ interface DataTableContentProps {
     stripedRows?: boolean;
     /** Highlight no hover */
     highlightOnHover?: boolean;
+    /** Callback quando uma row é clicada */
+    onRowClick?: (row: unknown) => void;
     /** Custom className */
     className?: string;
 }
@@ -530,13 +534,7 @@ declare namespace DataTableRoot {
     var displayName: string;
 }
 
-/**
- * DataTable.Loading - Componente de loading state
- *
- * Renderiza um skeleton ou overlay quando visible=true.
- * Não renderiza nada quando visible=false.
- */
-declare function DataTableLoading({ visible, skeleton, skeletonRows, className, }: DataTableLoadingProps): react_jsx_runtime.JSX.Element | null;
+declare function DataTableLoading({ visible, skeletonRows, }: DataTableLoadingProps): null;
 declare namespace DataTableLoading {
     var displayName: string;
 }
@@ -801,7 +799,7 @@ declare const toast: ((message: string) => string | number) & {
 };
 
 declare const checkboxVariants: (props?: ({
-    variant?: "default" | "outline" | "secondary" | null | undefined;
+    variant?: "default" | "outline" | "secondary" | "muted" | null | undefined;
     size?: "sm" | "lg" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface CheckboxProps extends React$1.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, VariantProps<typeof checkboxVariants> {
@@ -2010,7 +2008,7 @@ interface ItemCardHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
 declare const ItemCardHeader: React$1.ForwardRefExoticComponent<ItemCardHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const itemCardIconVariants: (props?: ({
     size?: "sm" | "lg" | "md" | null | undefined;
-    variant?: "destructive" | "outline" | "secondary" | "success" | "warning" | "info" | "primary" | "muted" | null | undefined;
+    variant?: "destructive" | "outline" | "secondary" | "success" | "warning" | "info" | "muted" | "primary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ItemCardIconProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof itemCardIconVariants> {
     /** Whether to show ripple effect */
@@ -2030,7 +2028,7 @@ interface ItemCardSubtitleProps extends React$1.HTMLAttributes<HTMLParagraphElem
 declare const ItemCardSubtitle: React$1.ForwardRefExoticComponent<ItemCardSubtitleProps & React$1.RefAttributes<HTMLParagraphElement>>;
 
 declare const itemCardBadgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "success" | "warning" | "info" | "primary" | "muted" | null | undefined;
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | "muted" | "primary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ItemCardBadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof itemCardBadgeVariants> {
 }

package/dist/index.js

@@ -222,6 +222,7 @@ var Input = React10__namespace.forwardRef(
               variant: error ? "error" : variant,
               inputSize
             }),
+            !label && "h-9 pt-0 pb-0 py-2",
             Icon2 && "pl-10",
             type === "password" && "pr-11",
             className
@@ -614,6 +615,7 @@ var Select = React10__namespace.forwardRef(
                 variant: error ? "error" : variant,
                 selectSize
               }),
+              !label && "h-9 pt-0 pb-0 py-2",
               Icon2 && "pl-10",
               "flex items-center justify-between",
               className
@@ -1151,7 +1153,6 @@ function useDataTableInternal({
     pageIndex: 0,
     pageSize: 10
   });
-  console.log("[useDataTableInternal] pagination state", pagination);
   const table = reactTable.useReactTable({
     data,
     columns,
@@ -1205,6 +1206,7 @@ function useDataTableInternal({
     pageSize: pagination.pageSize
   };
 }
+var DataTableLoadingContext = React10__namespace.createContext(null);
 var DataTableEmptyStateConfigContext = React10__namespace.createContext(null);
 var DataTableInstanceContext = React10__namespace.createContext(null);
 DataTableInstanceContext.displayName = "DataTableInstanceContext";
@@ -1223,6 +1225,12 @@ function DataTableProvider({
   pageIndex,
   pageSize
 }) {
+  const [isLoading, setIsLoading] = React10__namespace.useState(false);
+  const [skeletonRows, setSkeletonRows] = React10__namespace.useState(5);
+  const loadingValue = React10__namespace.useMemo(
+    () => ({ isLoading, setIsLoading, skeletonRows, setSkeletonRows }),
+    [isLoading, skeletonRows]
+  );
   const [emptyStateConfig, setEmptyStateConfig] = React10__namespace.useState({});
   const emptyStateValue = React10__namespace.useMemo(
     () => ({ config: emptyStateConfig, setConfig: setEmptyStateConfig }),
@@ -1241,7 +1249,7 @@ function DataTableProvider({
     [pageIndex, pageSize]
   );
   const tableValue = table;
-  return /* @__PURE__ */ jsxRuntime.jsx(DataTableEmptyStateConfigContext.Provider, { value: emptyStateValue, children: /* @__PURE__ */ jsxRuntime.jsx(DataTableInstanceContext.Provider, { value: tableValue, children: /* @__PURE__ */ jsxRuntime.jsx(DataTableMetaContext.Provider, { value: metaValue, children: /* @__PURE__ */ jsxRuntime.jsx(DataTableDensityContext.Provider, { value: densityValue, children: /* @__PURE__ */ jsxRuntime.jsx(DataTablePaginationContext.Provider, { value: paginationValue, children }) }) }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(DataTableLoadingContext.Provider, { value: loadingValue, children: /* @__PURE__ */ jsxRuntime.jsx(DataTableEmptyStateConfigContext.Provider, { value: emptyStateValue, children: /* @__PURE__ */ jsxRuntime.jsx(DataTableInstanceContext.Provider, { value: tableValue, children: /* @__PURE__ */ jsxRuntime.jsx(DataTableMetaContext.Provider, { value: metaValue, children: /* @__PURE__ */ jsxRuntime.jsx(DataTableDensityContext.Provider, { value: densityValue, children: /* @__PURE__ */ jsxRuntime.jsx(DataTablePaginationContext.Provider, { value: paginationValue, children }) }) }) }) }) });
 }
 function useDataTable() {
   const context = React10__namespace.useContext(DataTableInstanceContext);
@@ -1339,6 +1347,15 @@ function useDataTableColumnVisibility() {
     getAllColumns: () => table.getAllColumns().filter((col) => col.getCanHide())
   }), [table, columnVisibility]);
 }
+function useDataTableLoadingState() {
+  const context = React10__namespace.useContext(DataTableLoadingContext);
+  if (!context) {
+    throw new Error(
+      "useDataTableLoadingState must be used within <DataTable>."
+    );
+  }
+  return context;
+}
 function useDataTableEmptyStateConfig() {
   const context = React10__namespace.useContext(DataTableEmptyStateConfigContext);
   if (!context) {
@@ -1488,16 +1505,19 @@ var DataTableContent = React10__namespace.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__ */ jsxRuntime.jsx(
       EmptyState,
       {
@@ -1521,14 +1541,16 @@ var DataTableContent = React10__namespace.memo(function DataTableContent2({
       },
       header.id
     )) }, headerGroup.id)) }),
-    /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: table.getRowModel().rows.map((row, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: isLoading ? Array.from({ length: skeletonRows }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(TableRow, { className: "animate-pulse", children: Array.from({ length: columnCount || 4 }).map((_2, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: cellClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-muted rounded w-3/4" }) }, colIndex)) }, `skeleton-${index}`)) : table.getRowModel().rows.map((row, index) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(TableCell, { className: cellClasses, children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))
       },
       row.id
@@ -1540,7 +1562,7 @@ var DataTableToolbar = React10__namespace.memo(function DataTableToolbar2({
   className,
   children
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-between gap-2", className), children });
+  return /* @__PURE__ */ jsxRuntime.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__namespace.useState(value);
@@ -1804,24 +1826,19 @@ var DataTableEmptyState = React10__namespace.memo(function DataTableEmptyState2(
   return null;
 });
 DataTableEmptyState.displayName = "DataTable.EmptyState";
-function SkeletonRow({ columns }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TableRow, { className: "animate-pulse", children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "py-4", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("w-full", className), children: skeleton });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: Array.from({ length: skeletonRows }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonRow, { columns: columnCount || 4 }, index)) }) }) }) });
+  const { setIsLoading, setSkeletonRows } = useDataTableLoadingState();
+  React10__namespace.useLayoutEffect(() => {
+    setIsLoading(visible);
+    return () => setIsLoading(false);
+  }, [visible, setIsLoading]);
+  React10__namespace.useLayoutEffect(() => {
+    setSkeletonRows(skeletonRows);
+  }, [skeletonRows, setSkeletonRows]);
+  return null;
 }
 DataTableLoading.displayName = "DataTable.Loading";
 function DataTableColumnHeader({
@@ -1867,6 +1884,7 @@ var checkboxVariants = classVarianceAuthority.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"
       },
@@ -2301,7 +2319,7 @@ function DataTableTabs({
   return /* @__PURE__ */ jsxRuntime.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) => {