najm-kit 0.0.26 → 0.0.28

package/dist/index.mjs

@@ -7837,8 +7837,8 @@ var handler = {
 };
 useTableStore.use = new Proxy({}, handler);
 var actionButtonClass = (bordered, danger) => cn(
-  "flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors",
-  danger ? "hover:bg-red-500/10 hover:text-red-400" : "hover:bg-muted hover:text-foreground",
+  "flex h-7 w-7 cursor-pointer items-center justify-center rounded-md border border-transparent text-muted-foreground transition-colors",
+  danger ? "hover:border-red-200 hover:bg-red-50 hover:text-red-500" : "hover:border-border hover:bg-muted hover:text-foreground",
   bordered && "border border-muted-foreground"
 );
 function TableActionCell({ row, onView, onEdit, onDelete, openRowMenu, menuButton, bordered }) {
@@ -9278,6 +9278,30 @@ function NTableJson() {
   return /* @__PURE__ */ jsx("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden", children: renderJson?.() ?? /* @__PURE__ */ jsx(NajmScroll, { axis: "both", className: "h-full min-h-0 rounded-md border border-border bg-muted/40", children: /* @__PURE__ */ jsx("pre", { className: "p-4 font-mono text-xs leading-relaxed text-foreground", children: formatJsonValue(jsonValue) }) }) });
 }
 var DEFAULT_ROWS = 6;
+function NTableHeaderSkeleton() {
+  const filters = useTableStore.use.filters();
+  const showViewToggle = useTableStore.use.showViewToggle();
+  const showColumnVisibility = useTableStore.use.showColumnVisibility();
+  const showAddButton = useTableStore.use.showAddButton();
+  const hasHeaderSlot = Boolean(useTableStore.use.headerSlot());
+  const hasToolbar = Boolean(useTableStore.use.renderToolbar());
+  const filterCount = Math.min(Math.max(filters?.length ?? 0, 1), 3);
+  const hasActions = showViewToggle || showColumnVisibility || showAddButton || hasHeaderSlot || hasToolbar;
+  if (!filters?.length && !hasActions) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-wrap items-center justify-between gap-2", children: [
+    filters?.length ? /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-wrap gap-2", children: Array.from({ length: filterCount }).map((_, index) => /* @__PURE__ */ jsx(
+      NSkeleton,
+      {
+        className: cn("h-10 w-full rounded-lg", index < 2 ? "max-w-64" : "max-w-48")
+      },
+      index
+    )) }) : /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1" }),
+    hasActions && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 gap-2", children: [
+      (showViewToggle || showColumnVisibility || hasHeaderSlot || hasToolbar) && /* @__PURE__ */ jsx(NSkeleton, { className: "h-10 w-10 rounded-lg" }),
+      showAddButton && /* @__PURE__ */ jsx(NSkeleton, { className: "h-10 w-10 rounded-lg" })
+    ] })
+  ] });
+}
 function NTableLoadingSkeleton({ rows = DEFAULT_ROWS }) {
   const columns = useTableStore.use.columns();
   const showCheckbox = useTableStore.use.showCheckbox();
@@ -9289,46 +9313,94 @@ function NTableLoadingSkeleton({ rows = DEFAULT_ROWS }) {
   const hasExpansion = Boolean(renderSubRow || userGetRowCanExpand);
   const loadingText = useTableStore.use.loadingText();
   const renderHeaderLabel = (header) => typeof header === "string" ? header : null;
-  return /* @__PURE__ */ jsxs(
-    Card,
-    {
-      "data-testid": "ntable-loading-skeleton",
-      "aria-busy": "true",
-      "aria-label": loadingText,
-      className: cn("rounded-md p-0 border", dynamicHeight ? "overflow-hidden" : "najm-overlay-scroll", classNames?.content),
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: loadingText }),
-        /* @__PURE__ */ jsx("div", { className: dynamicHeight ? "najm-overlay-scroll" : void 0, children: /* @__PURE__ */ jsxs(Table, { children: [
-          /* @__PURE__ */ jsx(TableHeader, { className: cn(headerClassName, dynamicHeight && "sticky top-0 z-10", classNames?.tableHeader), children: /* @__PURE__ */ jsxs(TableRow, { className: "hover:bg-muted/30", children: [
-            showCheckbox && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Select column", className: "w-10 text-foreground h-12" }),
-            hasExpansion && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Expand column", className: "w-10 text-foreground h-12" }),
-            columns.map((col, i) => /* @__PURE__ */ jsx(
-              TableHead,
-              {
-                className: "text-foreground h-12",
-                style: col?.size ? { width: col.size } : void 0,
-                children: renderHeaderLabel(col?.header)
-              },
-              col?.id ?? col?.accessorKey ?? i
-            ))
-          ] }) }),
-          /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rows }).map((_, r) => /* @__PURE__ */ jsxs(TableRow, { children: [
-            showCheckbox && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10", children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-4" }) }),
-            hasExpansion && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10", children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-4" }) }),
-            columns.map((col, c) => /* @__PURE__ */ jsx(
-              TableCell,
-              {
-                className: "h-14",
-                style: col?.size ? { width: col.size } : void 0,
-                children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-full" })
-              },
-              `skeleton-${r}-${col?.id ?? col?.accessorKey ?? c}`
-            ))
-          ] }, `skeleton-${r}`)) })
-        ] }) })
-      ]
-    }
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2", children: [
+    /* @__PURE__ */ jsx(NTableHeaderSkeleton, {}),
+    /* @__PURE__ */ jsxs(
+      Card,
+      {
+        "data-testid": "ntable-loading-skeleton",
+        "aria-busy": "true",
+        "aria-label": loadingText,
+        className: cn("rounded-md p-0 border", dynamicHeight ? "overflow-hidden" : "najm-overlay-scroll", classNames?.content),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: loadingText }),
+          /* @__PURE__ */ jsx("div", { className: dynamicHeight ? "najm-overlay-scroll" : void 0, children: /* @__PURE__ */ jsxs(Table, { children: [
+            /* @__PURE__ */ jsx(TableHeader, { className: cn(headerClassName, dynamicHeight && "sticky top-0 z-10", classNames?.tableHeader), children: /* @__PURE__ */ jsxs(TableRow, { className: "hover:bg-muted/30", children: [
+              showCheckbox && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Select column", className: "w-10 text-foreground h-12" }),
+              hasExpansion && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Expand column", className: "w-10 text-foreground h-12" }),
+              columns.map((col, i) => /* @__PURE__ */ jsx(
+                TableHead,
+                {
+                  className: "text-foreground h-12",
+                  style: col?.size ? { width: col.size } : void 0,
+                  children: renderHeaderLabel(col?.header)
+                },
+                col?.id ?? col?.accessorKey ?? i
+              ))
+            ] }) }),
+            /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rows }).map((_, r) => /* @__PURE__ */ jsxs(TableRow, { children: [
+              showCheckbox && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10", children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-4" }) }),
+              hasExpansion && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10", children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-4" }) }),
+              columns.map((col, c) => /* @__PURE__ */ jsx(
+                TableCell,
+                {
+                  className: "h-14",
+                  style: col?.size ? { width: col.size } : void 0,
+                  children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-full" })
+                },
+                `skeleton-${r}-${col?.id ?? col?.accessorKey ?? c}`
+              ))
+            ] }, `skeleton-${r}`)) })
+          ] }) })
+        ]
+      }
+    )
+  ] });
+}
+function NTableCardsLoadingSkeleton({ rows = 8 }) {
+  const filters = useTableStore.use.filters();
+  const showViewToggle = useTableStore.use.showViewToggle();
+  const showColumnVisibility = useTableStore.use.showColumnVisibility();
+  const showAddButton = useTableStore.use.showAddButton();
+  const hasHeaderSlot = Boolean(useTableStore.use.headerSlot());
+  const hasToolbar = Boolean(useTableStore.use.renderToolbar());
+  const hasHeaderSkeleton = Boolean(
+    filters?.length || showViewToggle || showColumnVisibility || showAddButton || hasHeaderSlot || hasToolbar
   );
+  const classNames = useTableStore.use.classNames();
+  const bordered = useTableStore.use.bordered();
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2", children: [
+    hasHeaderSkeleton && /* @__PURE__ */ jsx(NTableHeaderSkeleton, {}),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-testid": "ntable-cards-loading-skeleton",
+        "aria-busy": "true",
+        className: cn("grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", classNames?.cards),
+        children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsx(
+          Card,
+          {
+            className: cn("rounded-lg bg-card p-4 shadow-none", bordered ? "border" : "border border-border"),
+            children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4", children: [
+              /* @__PURE__ */ jsx(NSkeleton, { className: "h-12 w-12 shrink-0 rounded-full" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                  /* @__PURE__ */ jsx(NSkeleton, { className: "h-5 w-36" }),
+                  /* @__PURE__ */ jsx(NSkeleton, { className: "h-3 w-48 max-w-full" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                  /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-full" }),
+                  /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-4/5" }),
+                  /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-3/4" })
+                ] })
+              ] })
+            ] })
+          },
+          index
+        ))
+      }
+    )
+  ] });
 }
 function TableStateSlot({ children }) {
   return /* @__PURE__ */ jsx("div", { className: "flex min-h-64 flex-1 items-center justify-center", children });
@@ -9370,7 +9442,6 @@ function TableLayout(props) {
   const isLoading = useTableStore.use.isLoading();
   const error = useTableStore.use.error();
   const hasNoData = useTableStore.use.hasNoData();
-  const loadingText = useTableStore.use.loadingText();
   const noDataText = useTableStore.use.noDataText();
   const isFilteredEmpty = useTableStore.use.isFilteredEmpty();
   const renderFilteredEmpty = useTableStore.use.renderFilteredEmpty();
@@ -9406,7 +9477,7 @@ function TableLayout(props) {
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, "data-ntable-root": true, className: cn("flex h-full min-h-0 flex-1 w-full flex-col gap-2 overflow-hidden", classNames?.root, className), children: [
     /* @__PURE__ */ jsx(NTableHeader, {}),
     /* @__PURE__ */ jsx("div", { "data-ntable-body": true, className: "flex min-h-0 flex-1 flex-col gap-2 overflow-hidden", children: isCustomMode ? customRenderer ? customRenderer() : null : /* @__PURE__ */ jsxs(Fragment, { children: [
-      isLoading && (props.renderLoading ? /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderLoading() }) : effectiveMode === "table" ? /* @__PURE__ */ jsx(NTableLoadingSkeleton, {}) : /* @__PURE__ */ jsx(TableStateSlot, { children: /* @__PURE__ */ jsx(NLoadingState, { label: loadingText }) })),
+      isLoading && (props.renderLoading ? /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderLoading() }) : effectiveMode === "table" ? /* @__PURE__ */ jsx(NTableLoadingSkeleton, {}) : effectiveMode === "cards" ? /* @__PURE__ */ jsx(NTableCardsLoadingSkeleton, {}) : /* @__PURE__ */ jsx(NTableLoadingSkeleton, {})),
       error && !isLoading && /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderError ? props.renderError(error) : /* @__PURE__ */ jsx(NErrorState, { message: typeof error === "string" ? error : "An error occurred" }) }),
       showFilteredEmpty && /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderFilteredEmpty ? props.renderFilteredEmpty() : renderFilteredEmpty ? renderFilteredEmpty() : props.renderEmpty ? props.renderEmpty() : /* @__PURE__ */ jsx(DefaultTableFilteredEmptyState, {}) }),
       showEmpty && /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderEmpty ? props.renderEmpty() : /* @__PURE__ */ jsx(DefaultTableEmptyState, { title: noDataText }) }),
@@ -9497,7 +9568,8 @@ function NTable(props) {
     [onRowContextMenu]
   );
   const autoOpenRowMenu = effectiveRowMenu ? handleOpenRowMenu : onRowContextMenu ? handleManualRowMenu : null;
-  const effectiveMenuButton = Boolean(autoOpenRowMenu) && (menuButtonProp ?? true);
+  const shouldCollapseActions = props.columns.length > 5;
+  const effectiveMenuButton = Boolean(autoOpenRowMenu) && (menuButtonProp ?? shouldCollapseActions);
   const store = useStoreSync({
     data: props.data ?? [],
     columns: props.columns ?? [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",
   "main": "./dist/index.mjs",