@loykin/designkit 0.0.2 → 0.0.3

package/dist/index.cjs

@@ -2826,6 +2826,56 @@ function isDataBodySummary(node) {
     node && typeof node === "object" && "type" in node && node.type === DataBodySummary
   );
 }
+function DataBodyResource({
+  toolbarLeft,
+  toolbarRight,
+  refreshing,
+  refreshingLabel = "Refreshing",
+  notice,
+  footer,
+  children,
+  className,
+  bodyClassName
+}) {
+  useDataBodyTemplateParent("Resource");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      "data-slot": "data-body-resource",
+      "data-refreshing": refreshing ? "true" : "false",
+      className: cn("flex min-h-0 flex-col", className),
+      children: [
+        (toolbarLeft || toolbarRight || refreshing) && /* @__PURE__ */ jsxRuntime.jsxs(DataPage.GroupToolbar, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: toolbarLeft }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+            refreshing && /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                className: "flex items-center gap-1.5 text-xs text-muted-foreground",
+                role: "status",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-3 animate-spin rounded-full border-2 border-muted border-t-primary" }),
+                  refreshingLabel
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(DataPage.Actions, { children: toolbarRight })
+          ] })
+        ] }),
+        notice && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3 shrink-0", children: notice }),
+        /* @__PURE__ */ jsxRuntime.jsx(DataPage.GroupBody, { className: cn("min-h-0 flex-1", bodyClassName), children }),
+        footer && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "mt-3 shrink-0 border-t border-border pt-3",
+            "data-slot": "data-body-resource-footer",
+            children: footer
+          }
+        )
+      ]
+    }
+  );
+}
 var layoutDefaultVariant = {
   stacked: "plain",
   horizontal: "card",
@@ -3015,7 +3065,13 @@ function RootContent({
         /* @__PURE__ */ jsxRuntime.jsx(DataPage.Actions, { children: actions })
       ] }),
       summaryEl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 border-b border-border px-(--designkit-page-padding-x) py-(--designkit-panel-gap)", children: summaryEl.props.children }),
-      /* @__PURE__ */ jsxRuntime.jsx(DataPage.Content, { className: contentClassName, children: /* @__PURE__ */ jsxRuntime.jsx(DataPage.Group, { className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsx(DataPage.GroupBody, { className: cn("h-full", bodyEl.props.className), children: bodyEl.props.children }) }) })
+      /* @__PURE__ */ jsxRuntime.jsx(DataPage.Content, { className: contentClassName, children: /* @__PURE__ */ jsxRuntime.jsxs(DataPage.Group, { className: "flex h-full flex-col", children: [
+        (toolbarLeft || toolbarRight) && /* @__PURE__ */ jsxRuntime.jsxs(DataPage.GroupToolbar, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 items-center gap-2", children: toolbarLeft }),
+          /* @__PURE__ */ jsxRuntime.jsx(DataPage.Actions, { children: toolbarRight })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(DataPage.GroupBody, { className: cn("min-h-0 flex-1", bodyEl.props.className), children: bodyEl.props.children })
+      ] }) })
     ] });
   }
   if (hasSections) {
@@ -3054,6 +3110,8 @@ function RootContent({
     ] });
   }
   const activeTabNode = tabs.find((tab) => tab.props.id === activeId) ?? tabs[0];
+  const activeToolbarLeft = activeTabNode?.props.toolbarLeft ?? toolbarLeft;
+  const activeToolbarRight = activeTabNode?.props.toolbarRight ?? toolbarRight;
   return /* @__PURE__ */ jsxRuntime.jsxs(DataPage, { className: cn("layout-databody", className), style: theme, children: [
     /* @__PURE__ */ jsxRuntime.jsx(TopBarSlot, { topBar }),
     /* @__PURE__ */ jsxRuntime.jsxs(DataPage.Header, { children: [
@@ -3073,12 +3131,13 @@ function RootContent({
       tab.props.id
     )) }),
     /* @__PURE__ */ jsxRuntime.jsxs(DataPage.Content, { className: contentClassName, children: [
-      (toolbarLeft || toolbarRight) && /* @__PURE__ */ jsxRuntime.jsxs(DataPage.GroupToolbar, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 items-center gap-2", children: toolbarLeft }),
-        /* @__PURE__ */ jsxRuntime.jsx(DataPage.Actions, { children: toolbarRight })
+      (activeToolbarLeft || activeToolbarRight) && /* @__PURE__ */ jsxRuntime.jsxs(DataPage.GroupToolbar, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 items-center gap-2", children: activeToolbarLeft }),
+        /* @__PURE__ */ jsxRuntime.jsx(DataPage.Actions, { children: activeToolbarRight })
       ] }),
       hasTabs ? /* @__PURE__ */ jsxRuntime.jsx(DataPage.GroupBody, { className: "min-h-full", children: renderGroups(activeTabNode?.props.children) }) : /* @__PURE__ */ jsxRuntime.jsx(DataPage.GroupBody, { children: bodyChildren.map((child, i) => /* @__PURE__ */ jsxRuntime.jsx(React2.Fragment, { children: isDataBodyGroup(child) ? renderGroup(child) : child }, i)) })
-    ] })
+    ] }),
+    activeTabNode?.props.footer && /* @__PURE__ */ jsxRuntime.jsx(DataPage.Footer, { children: activeTabNode.props.footer })
   ] });
 }
 function Root2(props) {
@@ -3089,6 +3148,7 @@ var DataBodyTemplate = Object.assign(Root2, {
   Tab: DataBodyTab,
   Section: DataBodySection,
   Summary: DataBodySummary,
+  Resource: DataBodyResource,
   Group: DataBodyGroup,
   Row: DataBodyRow,
   Field: DataBodyField