@keboola/design 4.1.1 → 4.1.2

package/dist/index.d.cts

@@ -4746,25 +4746,26 @@ declare const PageLayout: (({ ref, className, maxWidth, children, ...props }: Ro
  * single-entity pages with breadcrumbs.
  * **When NOT to use:** for layouts that don't match either pattern, host custom JSX inside
  * `PageLayout.Header` directly. For routing-driven tab rows below the header use `PageLayout.Tabs`.
- * **Composition:** nest inside `PageLayout.Header`. Always opt into `Button argo` for any buttons passed
- * into header slots. The variant types enforce pattern constraints (e.g. `Index` rejects breadcrumbs).
+ * **Composition:** nest inside `PageLayout.Header`. Pass `@keboola/design` `Button`s into the header slots
+ * (chrome is brand-driven). The variant types enforce pattern constraints (e.g. `Index` rejects breadcrumbs).
  *
  * @see RECIPES.md#page-header-tabs — for the canonical page-header + tabs composition
  */
 declare const PageHeader: {
     /** Index variant — top-level list / collection pages. No breadcrumbs; `metadata` wins over `description`. */
-    Index: ({ ref, className, title, description, metadata, documentation, action, headerNav, ...props }: (Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "title"> & {
+    Index: ({ ref, className, title, description, metadata, documentation, action, headerNav, fullWidthDescription, ...props }: (Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "title"> & {
         title: react.ReactNode;
         description?: react.ReactNode;
         metadata?: react.ReactNode;
         documentation?: react.ReactNode;
         action?: react.ReactNode;
         headerNav?: react.ReactNode;
+        fullWidthDescription?: boolean;
     }) & {
         ref?: react.Ref<react.ElementRef<"header">>;
     }) => react_jsx_runtime.JSX.Element;
     /** Detail variant — single-entity pages with required breadcrumbs and an overflow-actions slot. Max 2 visible actions. */
-    Detail: ({ ref, className, breadcrumbs, overflowActions, title, titleIcon, badges, description, compact, primaryAction, secondaryAction, headerNav, ...props }: (Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "title"> & {
+    Detail: ({ ref, className, breadcrumbs, overflowActions, title, titleIcon, badges, description, compact, primaryAction, secondaryAction, headerNav, fullWidthDescription, ...props }: (Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "title"> & {
         breadcrumbs: react.ReactNode;
         overflowActions?: react.ReactNode;
         title: react.ReactNode;
@@ -4775,6 +4776,7 @@ declare const PageHeader: {
         primaryAction?: react.ReactNode;
         secondaryAction?: react.ReactNode;
         headerNav?: react.ReactNode;
+        fullWidthDescription?: boolean;
     }) & {
         ref?: react.Ref<react.ElementRef<"header">>;
     }) => react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -4746,25 +4746,26 @@ declare const PageLayout: (({ ref, className, maxWidth, children, ...props }: Ro
  * single-entity pages with breadcrumbs.
  * **When NOT to use:** for layouts that don't match either pattern, host custom JSX inside
  * `PageLayout.Header` directly. For routing-driven tab rows below the header use `PageLayout.Tabs`.
- * **Composition:** nest inside `PageLayout.Header`. Always opt into `Button argo` for any buttons passed
- * into header slots. The variant types enforce pattern constraints (e.g. `Index` rejects breadcrumbs).
+ * **Composition:** nest inside `PageLayout.Header`. Pass `@keboola/design` `Button`s into the header slots
+ * (chrome is brand-driven). The variant types enforce pattern constraints (e.g. `Index` rejects breadcrumbs).
  *
  * @see RECIPES.md#page-header-tabs — for the canonical page-header + tabs composition
  */
 declare const PageHeader: {
     /** Index variant — top-level list / collection pages. No breadcrumbs; `metadata` wins over `description`. */
-    Index: ({ ref, className, title, description, metadata, documentation, action, headerNav, ...props }: (Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "title"> & {
+    Index: ({ ref, className, title, description, metadata, documentation, action, headerNav, fullWidthDescription, ...props }: (Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "title"> & {
         title: react.ReactNode;
         description?: react.ReactNode;
         metadata?: react.ReactNode;
         documentation?: react.ReactNode;
         action?: react.ReactNode;
         headerNav?: react.ReactNode;
+        fullWidthDescription?: boolean;
     }) & {
         ref?: react.Ref<react.ElementRef<"header">>;
     }) => react_jsx_runtime.JSX.Element;
     /** Detail variant — single-entity pages with required breadcrumbs and an overflow-actions slot. Max 2 visible actions. */
-    Detail: ({ ref, className, breadcrumbs, overflowActions, title, titleIcon, badges, description, compact, primaryAction, secondaryAction, headerNav, ...props }: (Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "title"> & {
+    Detail: ({ ref, className, breadcrumbs, overflowActions, title, titleIcon, badges, description, compact, primaryAction, secondaryAction, headerNav, fullWidthDescription, ...props }: (Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "title"> & {
         breadcrumbs: react.ReactNode;
         overflowActions?: react.ReactNode;
         title: react.ReactNode;
@@ -4775,6 +4776,7 @@ declare const PageHeader: {
         primaryAction?: react.ReactNode;
         secondaryAction?: react.ReactNode;
         headerNav?: react.ReactNode;
+        fullWidthDescription?: boolean;
     }) & {
         ref?: react.Ref<react.ElementRef<"header">>;
     }) => react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -13361,28 +13361,52 @@ var PageHeaderDetail = ({
   primaryAction,
   secondaryAction,
   headerNav,
+  fullWidthDescription = false,
   ...props
-}) => /* @__PURE__ */ jsxs("header", { ref, className: cn("tw-flex tw-w-full tw-flex-col tw-gap-4", className), ...props, children: [
-  /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-w-full tw-items-center tw-justify-between tw-gap-4", children: [
-    /* @__PURE__ */ jsx("div", { className: "tw-min-w-0 tw-flex-1", children: breadcrumbs }),
-    overflowActions && /* @__PURE__ */ jsx("div", { className: "tw-flex tw-shrink-0 tw-items-center tw-gap-2", children: overflowActions })
-  ] }),
-  /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-w-full tw-flex-wrap tw-items-start tw-justify-between tw-gap-x-4 tw-gap-y-3", children: [
-    /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-min-w-64 tw-flex-1 tw-flex-col tw-gap-2 tw-pr-2", children: [
-      /* @__PURE__ */ jsxs("div", { className: titleRowClass, children: [
-        titleIcon && /* @__PURE__ */ jsx("span", { className: "tw-flex tw-shrink-0 tw-items-center", children: titleIcon }),
-        /* @__PURE__ */ jsx("h1", { className: compact ? titleCompactClass : titleClass, children: title }),
-        badges && /* @__PURE__ */ jsx("div", { className: badgesClass, children: badges })
-      ] }),
-      description && /* @__PURE__ */ jsx("p", { className: descriptionClass, children: description })
-    ] }),
-    (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs("div", { className: "tw-ml-auto tw-flex tw-flex-wrap tw-items-center tw-justify-end tw-gap-2", children: [
-      secondaryAction,
-      primaryAction
-    ] })
-  ] }),
-  headerNav
-] });
+}) => {
+  const titleRow = /* @__PURE__ */ jsxs("div", { className: cn(titleRowClass, "tw-min-w-64 tw-flex-1 tw-pr-2"), children: [
+    titleIcon && /* @__PURE__ */ jsx("span", { className: "tw-flex tw-shrink-0 tw-items-center", children: titleIcon }),
+    /* @__PURE__ */ jsx("h1", { className: compact ? titleCompactClass : titleClass, children: title }),
+    badges && /* @__PURE__ */ jsx("div", { className: badgesClass, children: badges })
+  ] });
+  const actions = (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs("div", { className: "tw-ml-auto tw-flex tw-flex-wrap tw-items-center tw-justify-end tw-gap-2", children: [
+    secondaryAction,
+    primaryAction
+  ] });
+  const descriptionNode = description && /* @__PURE__ */ jsx("p", { className: descriptionClass, children: description });
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      ref,
+      className: cn("tw-flex tw-w-full tw-flex-col tw-gap-4", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-w-full tw-items-center tw-justify-between tw-gap-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "tw-min-w-0 tw-flex-1", children: breadcrumbs }),
+          overflowActions && /* @__PURE__ */ jsx("div", { className: "tw-flex tw-shrink-0 tw-items-center tw-gap-2", children: overflowActions })
+        ] }),
+        fullWidthDescription ? /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-w-full tw-flex-col tw-gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-w-full tw-flex-wrap tw-items-start tw-justify-between tw-gap-x-4 tw-gap-y-3", children: [
+            titleRow,
+            actions
+          ] }),
+          descriptionNode
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-w-full tw-flex-wrap tw-items-start tw-justify-between tw-gap-x-4 tw-gap-y-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-min-w-64 tw-flex-1 tw-flex-col tw-gap-2 tw-pr-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: titleRowClass, children: [
+              titleIcon && /* @__PURE__ */ jsx("span", { className: "tw-flex tw-shrink-0 tw-items-center", children: titleIcon }),
+              /* @__PURE__ */ jsx("h1", { className: compact ? titleCompactClass : titleClass, children: title }),
+              badges && /* @__PURE__ */ jsx("div", { className: badgesClass, children: badges })
+            ] }),
+            descriptionNode
+          ] }),
+          actions
+        ] }),
+        headerNav
+      ]
+    }
+  );
+};
 var PageHeaderIndex = ({
   ref,
   className,
@@ -13392,9 +13416,11 @@ var PageHeaderIndex = ({
   documentation,
   action,
   headerNav,
+  fullWidthDescription = false,
   ...props
 }) => {
   const subtitle = metadata ?? description;
+  const hasActions = Boolean(documentation || action);
   return /* @__PURE__ */ jsxs(
     "header",
     {
@@ -13402,12 +13428,21 @@ var PageHeaderIndex = ({
       className: cn("tw-flex tw-w-full tw-flex-col tw-gap-4", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-4", children: [
+        fullWidthDescription ? /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-w-full tw-flex-col tw-gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-w-full tw-flex-wrap tw-items-start tw-justify-between tw-gap-x-4 tw-gap-y-3", children: [
+            /* @__PURE__ */ jsx("div", { className: cn(titleRowClass, "tw-min-w-64 tw-flex-1 tw-pr-2"), children: /* @__PURE__ */ jsx("h1", { className: titleClass, children: title }) }),
+            hasActions && /* @__PURE__ */ jsxs("div", { className: "tw-ml-auto tw-flex tw-flex-wrap tw-items-center tw-justify-end tw-gap-2", children: [
+              documentation,
+              action
+            ] })
+          ] }),
+          subtitle && /* @__PURE__ */ jsx("p", { className: descriptionClass, children: subtitle })
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-4", children: [
           /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-gap-2 tw-pr-2", children: [
             /* @__PURE__ */ jsx("div", { className: titleRowClass, children: /* @__PURE__ */ jsx("h1", { className: titleClass, children: title }) }),
             subtitle && /* @__PURE__ */ jsx("p", { className: descriptionClass, children: subtitle })
           ] }),
-          (documentation || action) && /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-shrink-0 tw-items-center tw-gap-2", children: [
+          hasActions && /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-shrink-0 tw-items-center tw-gap-2", children: [
             documentation,
             action
           ] })