najm-kit 2.1.22 → 2.1.23

package/dist/index.mjs

@@ -10283,20 +10283,65 @@ function NTableHeaderSkeleton() {
   const hasToolbar = Boolean(useTableStore.use.renderToolbar());
   const filterCount = Math.min(Math.max(filters?.length ?? 0, 1), 3);
   const hasActions = showViewToggle || showColumnVisibility || showAddButton || hasHeaderSlot || hasToolbar;
+  const hasSettings = showViewToggle || showColumnVisibility || 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" })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-ntable-loading-header": true,
+      className: "flex shrink-0 flex-wrap items-center justify-between gap-2",
+      children: [
+        filters?.length ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-ntable-loading-desktop-filters": true,
+            className: "hidden min-w-0 flex-1 flex-wrap gap-2 md:flex",
+            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: "hidden min-w-0 flex-1 md:block" }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-ntable-loading-mobile-toolbar": true,
+            className: "flex w-full min-w-0 items-center gap-2 md:hidden",
+            children: [
+              filters?.length ? /* @__PURE__ */ jsx(
+                NSkeleton,
+                {
+                  "data-ntable-loading-mobile-primary": true,
+                  className: "h-10 min-w-0 flex-1 rounded-lg"
+                }
+              ) : null,
+              filters?.length > 1 ? /* @__PURE__ */ jsx(
+                NSkeleton,
+                {
+                  "data-ntable-loading-mobile-filter-button": true,
+                  className: "h-10 w-10 shrink-0 rounded-lg"
+                }
+              ) : null,
+              showAddButton ? /* @__PURE__ */ jsx(
+                NSkeleton,
+                {
+                  "data-ntable-loading-mobile-add-button": true,
+                  className: "h-10 w-10 shrink-0 rounded-lg"
+                }
+              ) : null
+            ]
+          }
+        ),
+        hasActions && /* @__PURE__ */ jsxs("div", { className: "hidden shrink-0 gap-2 md:flex", children: [
+          hasSettings && /* @__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_ROWS2 }) {
   const columns = useTableStore.use.columns();
@@ -10379,21 +10424,55 @@ function NTableCardsLoadingSkeleton({ rows }) {
         children: Array.from({ length: cardCount }).map((_, index) => /* @__PURE__ */ jsx(
           Card,
           {
-            className: cn("rounded-lg bg-card p-4 shadow-none", surfaceBorderClasses(bordered)),
-            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" })
-                ] })
-              ] })
-            ] })
+            className: cn("rounded-lg bg-card p-3 shadow-none sm:p-4", surfaceBorderClasses(bordered)),
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "data-ntable-loading-card-layout": "responsive-avatar",
+                className: "grid grid-cols-[80px_minmax(0,1fr)] gap-3 sm:grid-cols-[72px_minmax(0,1fr)]",
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "col-start-1 row-start-1 flex items-start justify-center sm:justify-start", children: /* @__PURE__ */ jsx(
+                    NSkeleton,
+                    {
+                      "data-ntable-loading-card-avatar": true,
+                      className: "size-20 shrink-0 rounded-full sm:size-16"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs("div", { className: "col-start-2 row-start-1 flex min-w-0 items-start justify-between gap-3", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-2", children: [
+                      /* @__PURE__ */ jsx(NSkeleton, { className: "h-5 w-36 max-w-full" }),
+                      /* @__PURE__ */ jsx(NSkeleton, { className: "hidden h-3 w-16 sm:block" })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      NSkeleton,
+                      {
+                        "data-ntable-loading-card-status": true,
+                        className: "hidden h-6 w-14 shrink-0 rounded-full sm:block"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "data-ntable-loading-card-details": true,
+                      className: "col-start-2 row-start-2 space-y-1 sm:col-span-full sm:col-start-1 sm:space-y-2 sm:rounded-lg sm:bg-muted/50 sm:p-3",
+                      children: Array.from({ length: 3 }).map((_2, detailIndex) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2", children: [
+                        /* @__PURE__ */ jsx(NSkeleton, { className: "size-3.5 shrink-0 rounded-sm sm:size-4" }),
+                        /* @__PURE__ */ jsx(
+                          NSkeleton,
+                          {
+                            className: cn(
+                              "h-3 max-w-full sm:h-4",
+                              detailIndex === 0 ? "w-full" : detailIndex === 1 ? "w-4/5" : "w-3/4"
+                            )
+                          }
+                        )
+                      ] }, detailIndex))
+                    }
+                  )
+                ]
+              }
+            )
           },
           index
         ))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "2.1.22",
+  "version": "2.1.23",
   "license": "MIT",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",