@loykin/designkit 0.0.1 → 0.0.3

package/dist/index.cjs

@@ -2786,19 +2786,30 @@ function WorkbenchBodyTemplate({
     ] })
   ] });
 }
+var DataBodyTemplateContext = React2__namespace.default.createContext(false);
+function useDataBodyTemplateParent(component) {
+  if (!React2__namespace.default.useContext(DataBodyTemplateContext)) {
+    throw new Error(
+      `[DesignKit] <DataBodyTemplate.${component}> must be rendered inside <DataBodyTemplate>. Wrap it like: <DataBodyTemplate><DataBodyTemplate.${component}>...</DataBodyTemplate.${component}></DataBodyTemplate>.`
+    );
+  }
+}
 function DataBodyTab(_props) {
+  useDataBodyTemplateParent("Tab");
   return null;
 }
 function isDataBodyTab(node) {
   return Boolean(node && typeof node === "object" && "type" in node && node.type === DataBodyTab);
 }
 function DataBodyBody(_props) {
+  useDataBodyTemplateParent("Body");
   return null;
 }
 function isDataBodyBody(node) {
   return Boolean(node && typeof node === "object" && "type" in node && node.type === DataBodyBody);
 }
 function DataBodySection(_props) {
+  useDataBodyTemplateParent("Section");
   return null;
 }
 function isDataBodySection(node) {
@@ -2807,6 +2818,7 @@ function isDataBodySection(node) {
   );
 }
 function DataBodySummary(_props) {
+  useDataBodyTemplateParent("Summary");
   return null;
 }
 function isDataBodySummary(node) {
@@ -2814,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",
@@ -2821,6 +2883,7 @@ var layoutDefaultVariant = {
   split: "bordered"
 };
 function DataBodyGroup(props) {
+  useDataBodyTemplateParent("Group");
   return renderGroupProps(props);
 }
 function isDataBodyGroup(node) {
@@ -2918,6 +2981,7 @@ function renderGroupProps(props) {
   ] });
 }
 function DataBodyField({ label, description, children }) {
+  useDataBodyTemplateParent("Field");
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -2934,6 +2998,7 @@ function DataBodyField({ label, description, children }) {
   );
 }
 function DataBodyRow({ label, description, required, children }) {
+  useDataBodyTemplateParent("Row");
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -2956,7 +3021,7 @@ function TopBarSlot({ topBar }) {
   if (!topBar) return null;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: topBar });
 }
-function Root2({
+function RootContent({
   theme,
   className,
   topBar,
@@ -3000,7 +3065,13 @@ function Root2({
         /* @__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) {
@@ -3039,6 +3110,8 @@ function Root2({
     ] });
   }
   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: [
@@ -3058,19 +3131,24 @@ function Root2({
       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) {
+  return /* @__PURE__ */ jsxRuntime.jsx(DataBodyTemplateContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(RootContent, { ...props }) });
+}
 var DataBodyTemplate = Object.assign(Root2, {
   Body: DataBodyBody,
   Tab: DataBodyTab,
   Section: DataBodySection,
   Summary: DataBodySummary,
+  Resource: DataBodyResource,
   Group: DataBodyGroup,
   Row: DataBodyRow,
   Field: DataBodyField