@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.5f0cd13

package/dist/elements/DocumentHeader/Tabs/Tab/TabLink.js

@@ -0,0 +1,81 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { formatAdminURL } from 'payload/shared';
+import React from 'react';
+import { useParams, usePathname, useSearchParams } from '../../../../providers/RouterAdapter/index.js';
+import { Button } from '../../../Button/index.js';
+export const DocumentTabLink = t0 => {
+  const $ = _c(13);
+  const {
+    adminRoute,
+    ariaLabel,
+    baseClass,
+    children,
+    href: hrefFromProps,
+    isActive: isActiveFromProps,
+    newTab
+  } = t0;
+  const pathname = usePathname();
+  const params = useParams();
+  const searchParams = useSearchParams();
+  const locale = searchParams.get("locale");
+  const [entityType, entitySlug, segmentThree, segmentFour] = params.segments || [];
+  const isCollection = entityType === "collections";
+  const t1 = `/${isCollection ? "collections" : "globals"}/${entitySlug}`;
+  let t2;
+  if ($[0] !== adminRoute || $[1] !== t1) {
+    t2 = formatAdminURL({
+      adminRoute,
+      path: t1
+    });
+    $[0] = adminRoute;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let docPath = t2;
+  if (isCollection) {
+    if (segmentThree === "trash" && segmentFour) {
+      docPath = docPath + `/trash/${segmentFour}`;
+    } else {
+      if (segmentThree) {
+        docPath = docPath + `/${segmentThree}`;
+      }
+    }
+  }
+  const href = `${docPath}${hrefFromProps}`;
+  const hrefWithLocale = `${href}${locale ? `?locale=${locale}` : ""}`;
+  let t3;
+  if ($[3] !== ariaLabel || $[4] !== baseClass || $[5] !== children || $[6] !== docPath || $[7] !== href || $[8] !== hrefWithLocale || $[9] !== isActiveFromProps || $[10] !== newTab || $[11] !== pathname) {
+    const isActive = href === docPath && pathname === docPath || href !== docPath && pathname.startsWith(href) || isActiveFromProps;
+    t3 = _jsx(Button, {
+      "aria-label": ariaLabel,
+      buttonStyle: isActive ? "pill" : "ghost",
+      className: [baseClass, isActive && `${baseClass}--active`].filter(Boolean).join(" "),
+      disabled: isActive,
+      el: !isActive || href !== pathname ? "link" : "div",
+      margin: false,
+      newTab,
+      size: "medium",
+      to: !isActive || href !== pathname ? hrefWithLocale : undefined,
+      children
+    });
+    $[3] = ariaLabel;
+    $[4] = baseClass;
+    $[5] = children;
+    $[6] = docPath;
+    $[7] = href;
+    $[8] = hrefWithLocale;
+    $[9] = isActiveFromProps;
+    $[10] = newTab;
+    $[11] = pathname;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  return t3;
+};
+//# sourceMappingURL=TabLink.js.map

package/dist/elements/DocumentHeader/Tabs/Tab/TabLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabLink.js","names":["c","_c","formatAdminURL","React","useParams","usePathname","useSearchParams","Button","DocumentTabLink","t0","$","adminRoute","ariaLabel","baseClass","children","href","hrefFromProps","isActive","isActiveFromProps","newTab","pathname","params","searchParams","locale","get","entityType","entitySlug","segmentThree","segmentFour","segments","isCollection","t1","t2","path","docPath","hrefWithLocale","t3","startsWith","_jsx","buttonStyle","className","filter","Boolean","join","disabled","el","margin","size","to","undefined"],"sources":["../../../../../src/elements/DocumentHeader/Tabs/Tab/TabLink.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedConfig } from 'payload'\n\nimport { formatAdminURL } from 'payload/shared'\nimport React from 'react'\n\nimport {\n  useParams,\n  usePathname,\n  useSearchParams,\n} from '../../../../providers/RouterAdapter/index.js'\nimport { Button } from '../../../Button/index.js'\n\nexport const DocumentTabLink: React.FC<{\n  adminRoute: SanitizedConfig['routes']['admin']\n  ariaLabel?: string\n  baseClass: string\n  children?: React.ReactNode\n  href: string\n  isActive?: boolean\n  newTab?: boolean\n}> = ({\n  adminRoute,\n  ariaLabel,\n  baseClass,\n  children,\n  href: hrefFromProps,\n  isActive: isActiveFromProps,\n  newTab,\n}) => {\n  const pathname = usePathname()\n  const params = useParams()\n\n  const searchParams = useSearchParams()\n\n  const locale = searchParams.get('locale')\n\n  const [entityType, entitySlug, segmentThree, segmentFour, ...rest] = params.segments || []\n  const isCollection = entityType === 'collections'\n\n  let docPath = formatAdminURL({\n    adminRoute,\n    path: `/${isCollection ? 'collections' : 'globals'}/${entitySlug}`,\n  })\n\n  if (isCollection) {\n    if (segmentThree === 'trash' && segmentFour) {\n      docPath += `/trash/${segmentFour}`\n    } else if (segmentThree) {\n      docPath += `/${segmentThree}`\n    }\n  }\n\n  const href = `${docPath}${hrefFromProps}`\n  // separated the two so it doesn't break checks against pathname\n  const hrefWithLocale = `${href}${locale ? `?locale=${locale}` : ''}`\n\n  const isActive =\n    (href === docPath && pathname === docPath) ||\n    (href !== docPath && pathname.startsWith(href)) ||\n    isActiveFromProps\n\n  return (\n    <Button\n      aria-label={ariaLabel}\n      buttonStyle={isActive ? 'pill' : 'ghost'}\n      className={[baseClass, isActive && `${baseClass}--active`].filter(Boolean).join(' ')}\n      disabled={isActive}\n      el={!isActive || href !== pathname ? 'link' : 'div'}\n      margin={false}\n      newTab={newTab}\n      size=\"medium\"\n      to={!isActive || href !== pathname ? hrefWithLocale : undefined}\n    >\n      {children}\n    </Button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SACEC,SAAS,EACTC,WAAW,EACXC,eAAe,QACV;AACP,SAASC,MAAM,QAAQ;AAEvB,OAAO,MAAMC,eAAA,GAQRC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,UAAA;IAAAC,SAAA;IAAAC,SAAA;IAAAC,QAAA;IAAAC,IAAA,EAAAC,aAAA;IAAAC,QAAA,EAAAC,iBAAA;IAAAC;EAAA,IAAAV,EAQL;EACC,MAAAW,QAAA,GAAiBf,WAAA;EACjB,MAAAgB,MAAA,GAAejB,SAAA;EAEf,MAAAkB,YAAA,GAAqBhB,eAAA;EAErB,MAAAiB,MAAA,GAAeD,YAAA,CAAAE,GAAA,CAAiB;EAEhC,OAAAC,UAAA,EAAAC,UAAA,EAAAC,YAAA,EAAAC,WAAA,IAAqEP,MAAA,CAAAQ,QAAA,MAAqB;EAC1F,MAAAC,YAAA,GAAqBL,UAAA,KAAe;EAI5B,MAAAM,EAAA,OAAID,YAAA,GAAe,gBAAgB,aAAaJ,UAAA,EAAY;EAAA,IAAAM,EAAA;EAAA,IAAAtB,CAAA,QAAAC,UAAA,IAAAD,CAAA,QAAAqB,EAAA;IAFtDC,EAAA,GAAA9B,cAAA;MAAAS,UAAA;MAAAsB,IAAA,EAENF;IAA4D,CACpE;IAAArB,CAAA,MAAAC,UAAA;IAAAD,CAAA,MAAAqB,EAAA;IAAArB,CAAA,MAAAsB,EAAA;EAAA;IAAAA,EAAA,GAAAtB,CAAA;EAAA;EAHA,IAAAwB,OAAA,GAAcF,EAGd;EAAA,IAEIF,YAAA;IAAA,IACEH,YAAA,KAAiB,WAAWC,WAAA;MAC9BM,OAAA,GAAAA,OAAA,GAAW,UAAUN,WAAA,EAAa;IAAA;MAAA,IACzBD,YAAA;QACTO,OAAA,GAAAA,OAAA,GAAW,IAAIP,YAAA,EAAc;MAAA;IAAA;EAAA;EAIjC,MAAAZ,IAAA,GAAa,GAAGmB,OAAA,GAAUlB,aAAA,EAAe;EAEzC,MAAAmB,cAAA,GAAuB,GAAGpB,IAAA,GAAOQ,MAAA,GAAS,WAAWA,MAAA,EAAQ,GAAG,IAAI;EAAA,IAAAa,EAAA;EAAA,IAAA1B,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAG,SAAA,IAAAH,CAAA,QAAAI,QAAA,IAAAJ,CAAA,QAAAwB,OAAA,IAAAxB,CAAA,QAAAK,IAAA,IAAAL,CAAA,QAAAyB,cAAA,IAAAzB,CAAA,QAAAQ,iBAAA,IAAAR,CAAA,SAAAS,MAAA,IAAAT,CAAA,SAAAU,QAAA;IAEpE,MAAAH,QAAA,GACEF,IAAC,KAASmB,OAAA,IAAWd,QAAA,KAAac,OAAA,IACjCnB,IAAA,KAASmB,OAAA,IAAWd,QAAA,CAAAiB,UAAA,CAAoBtB,IAAA,KACzCG,iBAAA;IAGAkB,EAAA,GAAAE,IAAA,CAAA/B,MAAA;MAAA,cACcK,SAAA;MAAA2B,WAAA,EACCtB,QAAA,GAAW,SAAS;MAAAuB,SAAA,EACtB,CAAC3B,SAAA,EAAWI,QAAA,IAAY,GAAGJ,SAAA,UAAmB,EAAA4B,MAAA,CAAAC,OAAS,EAAAC,IAAA,CAAc;MAAAC,QAAA,EACtE3B,QAAA;MAAA4B,EAAA,EACN,CAAC5B,QAAA,IAAYF,IAAA,KAASK,QAAA,GAAW,SAAS;MAAA0B,MAAA;MAAA3B,MAAA;MAAA4B,IAAA,EAGzC;MAAAC,EAAA,EACD,CAAC/B,QAAA,IAAYF,IAAA,KAASK,QAAA,GAAWe,cAAA,GAAAc,SAAiB;MAAAnC;IAAA,C;;;;;;;;;;;;;;SATxDsB,E;CAcJ","ignoreList":[]}

package/dist/elements/DocumentHeader/Tabs/Tab/index.css

@@ -0,0 +1,47 @@
+@layer payload-default {
+  .doc-tab {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    white-space: nowrap;
+    color: var(--color-text-secondary);
+  }
+
+  .doc-tab:hover {
+    color: var(--color-text);
+  }
+
+  .doc-tab:hover .pill-version-count {
+    background-color: var(--color-bg-tertiary);
+    color: var(--color-text);
+  }
+
+  .doc-tab--active {
+    color: var(--color-text);
+  }
+
+  .doc-tab--active .pill-version-count {
+    background-color: var(--color-bg-tertiary);
+    color: var(--color-text);
+  }
+
+  .doc-tab--active:hover .pill-version-count {
+    background-color: var(--color-bg-tertiary);
+    color: var(--color-text);
+  }
+
+  .doc-tab--active.btn--disabled {
+    color: var(--color-text);
+    cursor: default;
+  }
+
+  .doc-tab__label {
+    display: flex;
+    position: relative;
+    align-items: center;
+    gap: var(--spacer-1);
+    width: 100%;
+    height: 100%;
+    line-height: var(--spacer-3);
+  }
+}

package/dist/elements/DocumentHeader/Tabs/Tab/index.d.ts

@@ -0,0 +1,16 @@
+import type { DocumentTabConfig, PayloadRequest, SanitizedCollectionConfig, SanitizedGlobalConfig, SanitizedPermissions } from 'payload';
+import type React from 'react';
+import './index.css';
+export declare const baseClass = "doc-tab";
+export declare const DefaultDocumentTab: React.FC<{
+    apiURL?: string;
+    collectionConfig?: SanitizedCollectionConfig;
+    globalConfig?: SanitizedGlobalConfig;
+    path?: string;
+    permissions?: SanitizedPermissions;
+    req: PayloadRequest;
+    tabConfig: {
+        readonly Pill_Component?: React.FC;
+    } & DocumentTabConfig;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/DocumentHeader/Tabs/Tab/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/DocumentHeader/Tabs/Tab/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,iBAAiB,EAEjB,cAAc,EACd,yBAAyB,EACzB,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,SAAS,CAAA;AAChB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,SAAS,YAAY,CAAA;AAElC,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gBAAgB,CAAC,EAAE,yBAAyB,CAAA;IAC5C,YAAY,CAAC,EAAE,qBAAqB,CAAA;IACpC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,oBAAoB,CAAA;IAClC,GAAG,EAAE,cAAc,CAAA;IACnB,SAAS,EAAE;QAAE,QAAQ,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;KAAE,GAAG,iBAAiB,CAAA;CACtE,CAmEA,CAAA"}

package/dist/elements/DocumentHeader/Tabs/Tab/index.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary
+import { DocumentTabLink } from '../../../../exports/client/index.js';
+import { RenderServerComponent } from '../../../RenderServerComponent/index.js';
+import './index.css';
+export const baseClass = 'doc-tab';
+export const DefaultDocumentTab = props => {
+  const {
+    apiURL,
+    collectionConfig,
+    globalConfig,
+    permissions,
+    req,
+    tabConfig: {
+      href: tabHref,
+      isActive: tabIsActive,
+      label,
+      newTab,
+      Pill,
+      Pill_Component
+    }
+  } = props;
+  let href = typeof tabHref === 'string' ? tabHref : '';
+  let isActive = typeof tabIsActive === 'boolean' ? tabIsActive : false;
+  if (typeof tabHref === 'function') {
+    href = tabHref({
+      apiURL,
+      collection: collectionConfig,
+      global: globalConfig,
+      routes: req.payload.config.routes
+    });
+  }
+  if (typeof tabIsActive === 'function') {
+    isActive = tabIsActive({
+      href
+    });
+  }
+  const labelToRender = typeof label === 'function' ? label({
+    t: req.i18n.t
+  }) : label;
+  return /*#__PURE__*/_jsx(DocumentTabLink, {
+    adminRoute: req.payload.config.routes.admin,
+    ariaLabel: labelToRender,
+    baseClass: baseClass,
+    href: href,
+    isActive: isActive,
+    newTab: newTab,
+    children: /*#__PURE__*/_jsxs("span", {
+      className: `${baseClass}__label`,
+      children: [labelToRender, Pill || Pill_Component ? /*#__PURE__*/_jsxs(Fragment, {
+        children: [" ", RenderServerComponent({
+          Component: Pill,
+          Fallback: Pill_Component,
+          importMap: req.payload.importMap,
+          serverProps: {
+            i18n: req.i18n,
+            payload: req.payload,
+            permissions,
+            req,
+            server: req.server,
+            user: req.user
+          }
+        })]
+      }) : null]
+    })
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/DocumentHeader/Tabs/Tab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["Fragment","DocumentTabLink","RenderServerComponent","baseClass","DefaultDocumentTab","props","apiURL","collectionConfig","globalConfig","permissions","req","tabConfig","href","tabHref","isActive","tabIsActive","label","newTab","Pill","Pill_Component","collection","global","routes","payload","config","labelToRender","t","i18n","_jsx","adminRoute","admin","ariaLabel","_jsxs","className","Component","Fallback","importMap","serverProps","server","user"],"sources":["../../../../../src/elements/DocumentHeader/Tabs/Tab/index.tsx"],"sourcesContent":["import type {\n  DocumentTabConfig,\n  DocumentTabServerPropsOnly,\n  PayloadRequest,\n  SanitizedCollectionConfig,\n  SanitizedGlobalConfig,\n  SanitizedPermissions,\n} from 'payload'\nimport type React from 'react'\n\nimport { Fragment } from 'react'\n\n// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary\nimport { DocumentTabLink } from '../../../../exports/client/index.js'\nimport { RenderServerComponent } from '../../../RenderServerComponent/index.js'\nimport './index.css'\n\nexport const baseClass = 'doc-tab'\n\nexport const DefaultDocumentTab: React.FC<{\n  apiURL?: string\n  collectionConfig?: SanitizedCollectionConfig\n  globalConfig?: SanitizedGlobalConfig\n  path?: string\n  permissions?: SanitizedPermissions\n  req: PayloadRequest\n  tabConfig: { readonly Pill_Component?: React.FC } & DocumentTabConfig\n}> = (props) => {\n  const {\n    apiURL,\n    collectionConfig,\n    globalConfig,\n    permissions,\n    req,\n    tabConfig: { href: tabHref, isActive: tabIsActive, label, newTab, Pill, Pill_Component },\n  } = props\n\n  let href = typeof tabHref === 'string' ? tabHref : ''\n  let isActive = typeof tabIsActive === 'boolean' ? tabIsActive : false\n\n  if (typeof tabHref === 'function') {\n    href = tabHref({\n      apiURL,\n      collection: collectionConfig,\n      global: globalConfig,\n      routes: req.payload.config.routes,\n    })\n  }\n\n  if (typeof tabIsActive === 'function') {\n    isActive = tabIsActive({\n      href,\n    })\n  }\n\n  const labelToRender =\n    typeof label === 'function'\n      ? label({\n          t: req.i18n.t,\n        })\n      : label\n\n  return (\n    <DocumentTabLink\n      adminRoute={req.payload.config.routes.admin}\n      ariaLabel={labelToRender}\n      baseClass={baseClass}\n      href={href}\n      isActive={isActive}\n      newTab={newTab}\n    >\n      <span className={`${baseClass}__label`}>\n        {labelToRender}\n        {Pill || Pill_Component ? (\n          <Fragment>\n            &nbsp;\n            {RenderServerComponent({\n              Component: Pill,\n              Fallback: Pill_Component,\n              importMap: req.payload.importMap,\n              serverProps: {\n                i18n: req.i18n,\n                payload: req.payload,\n                permissions,\n                req,\n                server: req.server,\n                user: req.user,\n              } satisfies DocumentTabServerPropsOnly,\n            })}\n          </Fragment>\n        ) : null}\n      </span>\n    </DocumentTabLink>\n  )\n}\n"],"mappings":";AAUA,SAASA,QAAQ,QAAQ;AAEzB;AACA,SAASC,eAAe,QAAQ;AAChC,SAASC,qBAAqB,QAAQ;AACtC,OAAO;AAEP,OAAO,MAAMC,SAAA,GAAY;AAEzB,OAAO,MAAMC,kBAAA,GAQPC,KAAA;EACJ,MAAM;IACJC,MAAM;IACNC,gBAAgB;IAChBC,YAAY;IACZC,WAAW;IACXC,GAAG;IACHC,SAAA,EAAW;MAAEC,IAAA,EAAMC,OAAO;MAAEC,QAAA,EAAUC,WAAW;MAAEC,KAAK;MAAEC,MAAM;MAAEC,IAAI;MAAEC;IAAc;EAAE,CACzF,GAAGd,KAAA;EAEJ,IAAIO,IAAA,GAAO,OAAOC,OAAA,KAAY,WAAWA,OAAA,GAAU;EACnD,IAAIC,QAAA,GAAW,OAAOC,WAAA,KAAgB,YAAYA,WAAA,GAAc;EAEhE,IAAI,OAAOF,OAAA,KAAY,YAAY;IACjCD,IAAA,GAAOC,OAAA,CAAQ;MACbP,MAAA;MACAc,UAAA,EAAYb,gBAAA;MACZc,MAAA,EAAQb,YAAA;MACRc,MAAA,EAAQZ,GAAA,CAAIa,OAAO,CAACC,MAAM,CAACF;IAC7B;EACF;EAEA,IAAI,OAAOP,WAAA,KAAgB,YAAY;IACrCD,QAAA,GAAWC,WAAA,CAAY;MACrBH;IACF;EACF;EAEA,MAAMa,aAAA,GACJ,OAAOT,KAAA,KAAU,aACbA,KAAA,CAAM;IACJU,CAAA,EAAGhB,GAAA,CAAIiB,IAAI,CAACD;EACd,KACAV,KAAA;EAEN,oBACEY,IAAA,CAAC3B,eAAA;IACC4B,UAAA,EAAYnB,GAAA,CAAIa,OAAO,CAACC,MAAM,CAACF,MAAM,CAACQ,KAAK;IAC3CC,SAAA,EAAWN,aAAA;IACXtB,SAAA,EAAWA,SAAA;IACXS,IAAA,EAAMA,IAAA;IACNE,QAAA,EAAUA,QAAA;IACVG,MAAA,EAAQA,MAAA;cAER,aAAAe,KAAA,CAAC;MAAKC,SAAA,EAAW,GAAG9B,SAAA,SAAkB;iBACnCsB,aAAA,EACAP,IAAA,IAAQC,cAAA,gBACPa,KAAA,CAAChC,QAAA;mBAAS,KAEPE,qBAAA,CAAsB;UACrBgC,SAAA,EAAWhB,IAAA;UACXiB,QAAA,EAAUhB,cAAA;UACViB,SAAA,EAAW1B,GAAA,CAAIa,OAAO,CAACa,SAAS;UAChCC,WAAA,EAAa;YACXV,IAAA,EAAMjB,GAAA,CAAIiB,IAAI;YACdJ,OAAA,EAASb,GAAA,CAAIa,OAAO;YACpBd,WAAA;YACAC,GAAA;YACA4B,MAAA,EAAQ5B,GAAA,CAAI4B,MAAM;YAClBC,IAAA,EAAM7B,GAAA,CAAI6B;UACZ;QACF;WAEA;;;AAIZ","ignoreList":[]}

package/dist/elements/DocumentHeader/Tabs/index.css

@@ -0,0 +1,43 @@
+@layer payload-default {
+  .doc-tabs {
+    display: flex;
+  }
+
+  .doc-tabs__tabs {
+    display: flex;
+    gap: var(--spacer-1);
+    list-style: none;
+    align-items: center;
+    margin: 0;
+    padding: var(--spacer-1) 0;
+  }
+
+  @media (max-width: 768px) {
+    .doc-tabs {
+      width: 100%;
+      overflow: auto;
+    }
+
+    /* this container has a gradient overlay as visual indication of `overflow: scroll` */
+    .doc-tabs::-webkit-scrollbar {
+      display: none;
+    }
+
+    .doc-tabs::after {
+      content: '';
+      display: block;
+      position: sticky;
+      right: 0;
+      width: var(--spacer-5);
+      height: var(--spacer-5);
+      background: linear-gradient(to right, transparent, var(--color-bg));
+      flex-shrink: 0;
+      z-index: 1111;
+      pointer-events: none;
+    }
+
+    .doc-tabs__tabs-container {
+      margin-right: auto;
+    }
+  }
+}

package/dist/elements/DocumentHeader/Tabs/index.d.ts

@@ -0,0 +1,10 @@
+import type { PayloadRequest, SanitizedCollectionConfig, SanitizedGlobalConfig, SanitizedPermissions } from 'payload';
+import React from 'react';
+import './index.css';
+export declare const DocumentTabs: React.FC<{
+    collectionConfig: SanitizedCollectionConfig;
+    globalConfig: SanitizedGlobalConfig;
+    permissions: SanitizedPermissions;
+    req: PayloadRequest;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/DocumentHeader/Tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/DocumentHeader/Tabs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAGV,cAAc,EACd,yBAAyB,EACzB,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,SAAS,CAAA;AAEhB,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,gBAAgB,EAAE,yBAAyB,CAAA;IAC3C,YAAY,EAAE,qBAAqB,CAAA;IACnC,WAAW,EAAE,oBAAoB,CAAA;IACjC,GAAG,EAAE,cAAc,CAAA;CACpB,CA8DA,CAAA"}

package/dist/elements/DocumentHeader/Tabs/index.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary
+import { ShouldRenderTabs } from '../../../exports/client/index.js';
+import { RenderServerComponent } from '../../RenderServerComponent/index.js';
+import { DefaultDocumentTab } from './Tab/index.js';
+import { getTabs } from './tabs/index.js';
+import './index.css';
+const baseClass = 'doc-tabs';
+export const DocumentTabs = ({
+  collectionConfig,
+  globalConfig,
+  permissions,
+  req
+}) => {
+  const {
+    config
+  } = req.payload;
+  const tabs = getTabs({
+    collectionConfig,
+    globalConfig
+  });
+  return /*#__PURE__*/_jsx(ShouldRenderTabs, {
+    children: /*#__PURE__*/_jsx("div", {
+      className: baseClass,
+      children: /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__tabs-container`,
+        children: /*#__PURE__*/_jsx("ul", {
+          className: `${baseClass}__tabs`,
+          children: tabs?.map(({
+            tab: tabConfig,
+            viewPath
+          }, index) => {
+            const {
+              condition
+            } = tabConfig || {};
+            const meetsCondition = !condition || condition({
+              collectionConfig,
+              config,
+              globalConfig,
+              permissions,
+              req
+            });
+            if (!meetsCondition) {
+              return null;
+            }
+            if (tabConfig?.Component) {
+              return RenderServerComponent({
+                clientProps: {
+                  path: viewPath
+                },
+                Component: tabConfig.Component,
+                importMap: req.payload.importMap,
+                key: `tab-${index}`,
+                serverProps: {
+                  collectionConfig,
+                  globalConfig,
+                  i18n: req.i18n,
+                  payload: req.payload,
+                  permissions,
+                  req,
+                  server: req.server,
+                  user: req.user
+                }
+              });
+            }
+            return /*#__PURE__*/_jsx(DefaultDocumentTab, {
+              collectionConfig: collectionConfig,
+              globalConfig: globalConfig,
+              path: viewPath,
+              permissions: permissions,
+              req: req,
+              tabConfig: tabConfig
+            }, `tab-${index}`);
+          })
+        })
+      })
+    })
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/DocumentHeader/Tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","ShouldRenderTabs","RenderServerComponent","DefaultDocumentTab","getTabs","baseClass","DocumentTabs","collectionConfig","globalConfig","permissions","req","config","payload","tabs","_jsx","className","map","tab","tabConfig","viewPath","index","condition","meetsCondition","Component","clientProps","path","importMap","key","serverProps","i18n","server","user"],"sources":["../../../../src/elements/DocumentHeader/Tabs/index.tsx"],"sourcesContent":["import type {\n  DocumentTabClientProps,\n  DocumentTabServerPropsOnly,\n  PayloadRequest,\n  SanitizedCollectionConfig,\n  SanitizedGlobalConfig,\n  SanitizedPermissions,\n} from 'payload'\n\nimport React from 'react'\n\n// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary\nimport { ShouldRenderTabs } from '../../../exports/client/index.js'\nimport { RenderServerComponent } from '../../RenderServerComponent/index.js'\nimport { DefaultDocumentTab } from './Tab/index.js'\nimport { getTabs } from './tabs/index.js'\nimport './index.css'\n\nconst baseClass = 'doc-tabs'\n\nexport const DocumentTabs: React.FC<{\n  collectionConfig: SanitizedCollectionConfig\n  globalConfig: SanitizedGlobalConfig\n  permissions: SanitizedPermissions\n  req: PayloadRequest\n}> = ({ collectionConfig, globalConfig, permissions, req }) => {\n  const { config } = req.payload\n\n  const tabs = getTabs({\n    collectionConfig,\n    globalConfig,\n  })\n\n  return (\n    <ShouldRenderTabs>\n      <div className={baseClass}>\n        <div className={`${baseClass}__tabs-container`}>\n          <ul className={`${baseClass}__tabs`}>\n            {tabs?.map(({ tab: tabConfig, viewPath }, index) => {\n              const { condition } = tabConfig || {}\n\n              const meetsCondition =\n                !condition ||\n                condition({ collectionConfig, config, globalConfig, permissions, req })\n\n              if (!meetsCondition) {\n                return null\n              }\n\n              if (tabConfig?.Component) {\n                return RenderServerComponent({\n                  clientProps: {\n                    path: viewPath,\n                  } satisfies DocumentTabClientProps,\n                  Component: tabConfig.Component,\n                  importMap: req.payload.importMap,\n                  key: `tab-${index}`,\n                  serverProps: {\n                    collectionConfig,\n                    globalConfig,\n                    i18n: req.i18n,\n                    payload: req.payload,\n                    permissions,\n                    req,\n                    server: req.server,\n                    user: req.user,\n                  } satisfies DocumentTabServerPropsOnly,\n                })\n              }\n\n              return (\n                <DefaultDocumentTab\n                  collectionConfig={collectionConfig}\n                  globalConfig={globalConfig}\n                  key={`tab-${index}`}\n                  path={viewPath}\n                  permissions={permissions}\n                  req={req}\n                  tabConfig={tabConfig}\n                />\n              )\n            })}\n          </ul>\n        </div>\n      </div>\n    </ShouldRenderTabs>\n  )\n}\n"],"mappings":";AASA,OAAOA,KAAA,MAAW;AAElB;AACA,SAASC,gBAAgB,QAAQ;AACjC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,kBAAkB,QAAQ;AACnC,SAASC,OAAO,QAAQ;AACxB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,YAAA,GAKRA,CAAC;EAAEC,gBAAgB;EAAEC,YAAY;EAAEC,WAAW;EAAEC;AAAG,CAAE;EACxD,MAAM;IAAEC;EAAM,CAAE,GAAGD,GAAA,CAAIE,OAAO;EAE9B,MAAMC,IAAA,GAAOT,OAAA,CAAQ;IACnBG,gBAAA;IACAC;EACF;EAEA,oBACEM,IAAA,CAACb,gBAAA;cACC,aAAAa,IAAA,CAAC;MAAIC,SAAA,EAAWV,SAAA;gBACd,aAAAS,IAAA,CAAC;QAAIC,SAAA,EAAW,GAAGV,SAAA,kBAA2B;kBAC5C,aAAAS,IAAA,CAAC;UAAGC,SAAA,EAAW,GAAGV,SAAA,QAAiB;oBAChCQ,IAAA,EAAMG,GAAA,CAAI,CAAC;YAAEC,GAAA,EAAKC,SAAS;YAAEC;UAAQ,CAAE,EAAEC,KAAA;YACxC,MAAM;cAAEC;YAAS,CAAE,GAAGH,SAAA,IAAa,CAAC;YAEpC,MAAMI,cAAA,GACJ,CAACD,SAAA,IACDA,SAAA,CAAU;cAAEd,gBAAA;cAAkBI,MAAA;cAAQH,YAAA;cAAcC,WAAA;cAAaC;YAAI;YAEvE,IAAI,CAACY,cAAA,EAAgB;cACnB,OAAO;YACT;YAEA,IAAIJ,SAAA,EAAWK,SAAA,EAAW;cACxB,OAAOrB,qBAAA,CAAsB;gBAC3BsB,WAAA,EAAa;kBACXC,IAAA,EAAMN;gBACR;gBACAI,SAAA,EAAWL,SAAA,CAAUK,SAAS;gBAC9BG,SAAA,EAAWhB,GAAA,CAAIE,OAAO,CAACc,SAAS;gBAChCC,GAAA,EAAK,OAAOP,KAAA,EAAO;gBACnBQ,WAAA,EAAa;kBACXrB,gBAAA;kBACAC,YAAA;kBACAqB,IAAA,EAAMnB,GAAA,CAAImB,IAAI;kBACdjB,OAAA,EAASF,GAAA,CAAIE,OAAO;kBACpBH,WAAA;kBACAC,GAAA;kBACAoB,MAAA,EAAQpB,GAAA,CAAIoB,MAAM;kBAClBC,IAAA,EAAMrB,GAAA,CAAIqB;gBACZ;cACF;YACF;YAEA,oBACEjB,IAAA,CAACX,kBAAA;cACCI,gBAAA,EAAkBA,gBAAA;cAClBC,YAAA,EAAcA,YAAA;cAEdiB,IAAA,EAAMN,QAAA;cACNV,WAAA,EAAaA,WAAA;cACbC,GAAA,EAAKA,GAAA;cACLQ,SAAA,EAAWA;eAJN,OAAOE,KAAA,EAAO;UAOzB;;;;;AAMZ","ignoreList":[]}

package/dist/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.css

@@ -0,0 +1,11 @@
+@layer payload-default {
+  .pill-version-count {
+    line-height: var(--spacer-2-5);
+    min-width: var(--spacer-2-5);
+    text-align: center;
+    background-color: var(--color-bg-secondary);
+    border-radius: var(--radius-small);
+    padding: 2px var(--spacer-1);
+    color: var(--color-text-secondary);
+  }
+}

package/dist/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.css';
+export declare const VersionsPill: React.FC;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAQhC,CAAA"}

package/dist/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.js

@@ -0,0 +1,30 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useDocumentInfo } from '../../../../../providers/DocumentInfo/index.js';
+import './index.css';
+const baseClass = 'pill-version-count';
+export const VersionsPill = () => {
+  const $ = _c(2);
+  const {
+    versionCount
+  } = useDocumentInfo();
+  if (!versionCount) {
+    return null;
+  }
+  let t0;
+  if ($[0] !== versionCount) {
+    t0 = _jsx("span", {
+      className: baseClass,
+      children: versionCount
+    });
+    $[0] = versionCount;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useDocumentInfo","baseClass","VersionsPill","$","versionCount","t0","_jsx","className","children"],"sources":["../../../../../../src/elements/DocumentHeader/Tabs/tabs/VersionsPill/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { useDocumentInfo } from '../../../../../providers/DocumentInfo/index.js'\nimport './index.css'\n\nconst baseClass = 'pill-version-count'\n\nexport const VersionsPill: React.FC = () => {\n  const { versionCount } = useDocumentInfo()\n\n  if (!versionCount) {\n    return null\n  }\n\n  return <span className={baseClass}>{versionCount}</span>\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,YAAA,GAAyBA,CAAA;EAAA,MAAAC,CAAA,GAAAL,EAAA;EACpC;IAAAM;EAAA,IAAyBJ,eAAA;EAAA,KAEpBI,YAAA;IAAA;EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAF,CAAA,QAAAC,YAAA;IAIEC,EAAA,GAAAC,IAAA,CAAC;MAAAC,SAAA,EAAAN,SAAA;MAAAO,QAAA,EAA4BJ;IAAA,C;;;;;;SAA7BC,E;CACT","ignoreList":[]}

package/dist/elements/DocumentHeader/Tabs/tabs/index.d.ts

@@ -0,0 +1,11 @@
+import type { DocumentTabConfig, SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload';
+export declare const documentViewKeys: string[];
+export type DocumentViewKey = (typeof documentViewKeys)[number];
+export declare const getTabs: ({ collectionConfig, globalConfig, }: {
+    collectionConfig?: SanitizedCollectionConfig;
+    globalConfig?: SanitizedGlobalConfig;
+}) => {
+    tab: DocumentTabConfig;
+    viewPath: string;
+}[];
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/DocumentHeader/Tabs/tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/DocumentHeader/Tabs/tabs/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAKlG,eAAO,MAAM,gBAAgB,UAAgD,CAAA;AAE7E,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE/D,eAAO,MAAM,OAAO,GAAI,qCAGrB;IACD,gBAAgB,CAAC,EAAE,yBAAyB,CAAA;IAC5C,YAAY,CAAC,EAAE,qBAAqB,CAAA;CACrC,KAAG;IAAE,GAAG,EAAE,iBAAiB,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,EAqE/C,CAAA"}

package/dist/elements/DocumentHeader/Tabs/tabs/index.js

@@ -0,0 +1,69 @@
+// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary
+import { VersionsPill } from '../../../../exports/client/index.js';
+export const documentViewKeys = ['api', 'default', 'livePreview', 'versions'];
+export const getTabs = ({
+  collectionConfig,
+  globalConfig
+}) => {
+  const customViews = collectionConfig?.admin?.components?.views?.edit || globalConfig?.admin?.components?.views?.edit || {};
+  return [{
+    tab: {
+      href: '',
+      label: ({
+        t
+      }) => t('general:edit'),
+      order: 100,
+      ...(customViews?.['default']?.tab || {})
+    },
+    viewPath: '/'
+  }, {
+    tab: {
+      condition: ({
+        collectionConfig,
+        globalConfig,
+        permissions
+      }) => Boolean(collectionConfig?.versions && permissions?.collections?.[collectionConfig?.slug]?.readVersions || globalConfig?.versions && permissions?.globals?.[globalConfig?.slug]?.readVersions),
+      href: '/versions',
+      label: ({
+        t
+      }) => t('version:versions'),
+      order: 300,
+      Pill_Component: VersionsPill,
+      ...(customViews?.['versions']?.tab || {})
+    },
+    viewPath: '/versions'
+  }, {
+    tab: {
+      href: '/api',
+      label: 'API',
+      order: 400,
+      ...(customViews?.['api']?.tab || {})
+    },
+    viewPath: '/api'
+  }].concat(Object.entries(customViews).reduce((acc, [key, value]) => {
+    if (documentViewKeys.includes(key)) {
+      return acc;
+    }
+    if (value?.tab) {
+      acc.push({
+        tab: value.tab,
+        viewPath: 'path' in value ? value.path : ''
+      });
+    }
+    return acc;
+  }, []))?.sort(({
+    tab: a
+  }, {
+    tab: b
+  }) => {
+    if (a.order === undefined && b.order === undefined) {
+      return 0;
+    } else if (a.order === undefined) {
+      return 1;
+    } else if (b.order === undefined) {
+      return -1;
+    }
+    return a.order - b.order;
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/DocumentHeader/Tabs/tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["VersionsPill","documentViewKeys","getTabs","collectionConfig","globalConfig","customViews","admin","components","views","edit","tab","href","label","t","order","viewPath","condition","permissions","Boolean","versions","collections","slug","readVersions","globals","Pill_Component","concat","Object","entries","reduce","acc","key","value","includes","push","path","sort","a","b","undefined"],"sources":["../../../../../src/elements/DocumentHeader/Tabs/tabs/index.tsx"],"sourcesContent":["import type { DocumentTabConfig, SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload'\n\n// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary\nimport { VersionsPill } from '../../../../exports/client/index.js'\n\nexport const documentViewKeys = ['api', 'default', 'livePreview', 'versions']\n\nexport type DocumentViewKey = (typeof documentViewKeys)[number]\n\nexport const getTabs = ({\n  collectionConfig,\n  globalConfig,\n}: {\n  collectionConfig?: SanitizedCollectionConfig\n  globalConfig?: SanitizedGlobalConfig\n}): { tab: DocumentTabConfig; viewPath: string }[] => {\n  const customViews =\n    collectionConfig?.admin?.components?.views?.edit ||\n    globalConfig?.admin?.components?.views?.edit ||\n    {}\n\n  return [\n    {\n      tab: {\n        href: '',\n        label: ({ t }) => t('general:edit'),\n        order: 100,\n        ...(customViews?.['default']?.tab || {}),\n      },\n      viewPath: '/',\n    },\n    {\n      tab: {\n        condition: ({ collectionConfig, globalConfig, permissions }) =>\n          Boolean(\n            (collectionConfig?.versions &&\n              permissions?.collections?.[collectionConfig?.slug]?.readVersions) ||\n              (globalConfig?.versions && permissions?.globals?.[globalConfig?.slug]?.readVersions),\n          ),\n        href: '/versions',\n        label: ({ t }) => t('version:versions'),\n        order: 300,\n        Pill_Component: VersionsPill,\n        ...(customViews?.['versions']?.tab || {}),\n      },\n      viewPath: '/versions',\n    },\n    {\n      tab: {\n        href: '/api',\n        label: 'API',\n        order: 400,\n        ...(customViews?.['api']?.tab || {}),\n      },\n      viewPath: '/api',\n    },\n  ]\n    .concat(\n      Object.entries(customViews).reduce((acc, [key, value]) => {\n        if (documentViewKeys.includes(key)) {\n          return acc\n        }\n\n        if (value?.tab) {\n          acc.push({\n            tab: value.tab,\n            viewPath: 'path' in value ? value.path : '',\n          })\n        }\n\n        return acc\n      }, []),\n    )\n    ?.sort(({ tab: a }, { tab: b }) => {\n      if (a.order === undefined && b.order === undefined) {\n        return 0\n      } else if (a.order === undefined) {\n        return 1\n      } else if (b.order === undefined) {\n        return -1\n      }\n\n      return a.order - b.order\n    })\n}\n"],"mappings":"AAEA;AACA,SAASA,YAAY,QAAQ;AAE7B,OAAO,MAAMC,gBAAA,GAAmB,CAAC,OAAO,WAAW,eAAe,WAAW;AAI7E,OAAO,MAAMC,OAAA,GAAUA,CAAC;EACtBC,gBAAgB;EAChBC;AAAY,CAIb;EACC,MAAMC,WAAA,GACJF,gBAAA,EAAkBG,KAAA,EAAOC,UAAA,EAAYC,KAAA,EAAOC,IAAA,IAC5CL,YAAA,EAAcE,KAAA,EAAOC,UAAA,EAAYC,KAAA,EAAOC,IAAA,IACxC,CAAC;EAEH,OAAO,CACL;IACEC,GAAA,EAAK;MACHC,IAAA,EAAM;MACNC,KAAA,EAAOA,CAAC;QAAEC;MAAC,CAAE,KAAKA,CAAA,CAAE;MACpBC,KAAA,EAAO;MACP,IAAIT,WAAA,GAAc,UAAU,EAAEK,GAAA,IAAO,CAAC,CAAC;IACzC;IACAK,QAAA,EAAU;EACZ,GACA;IACEL,GAAA,EAAK;MACHM,SAAA,EAAWA,CAAC;QAAEb,gBAAgB;QAAEC,YAAY;QAAEa;MAAW,CAAE,KACzDC,OAAA,CACEf,gBAAC,EAAkBgB,QAAA,IACjBF,WAAA,EAAaG,WAAA,GAAcjB,gBAAA,EAAkBkB,IAAA,CAAK,EAAEC,YAAA,IACnDlB,YAAA,EAAce,QAAA,IAAYF,WAAA,EAAaM,OAAA,GAAUnB,YAAA,EAAciB,IAAA,CAAK,EAAEC,YAAA;MAE7EX,IAAA,EAAM;MACNC,KAAA,EAAOA,CAAC;QAAEC;MAAC,CAAE,KAAKA,CAAA,CAAE;MACpBC,KAAA,EAAO;MACPU,cAAA,EAAgBxB,YAAA;MAChB,IAAIK,WAAA,GAAc,WAAW,EAAEK,GAAA,IAAO,CAAC,CAAC;IAC1C;IACAK,QAAA,EAAU;EACZ,GACA;IACEL,GAAA,EAAK;MACHC,IAAA,EAAM;MACNC,KAAA,EAAO;MACPE,KAAA,EAAO;MACP,IAAIT,WAAA,GAAc,MAAM,EAAEK,GAAA,IAAO,CAAC,CAAC;IACrC;IACAK,QAAA,EAAU;EACZ,EACD,CACEU,MAAM,CACLC,MAAA,CAAOC,OAAO,CAACtB,WAAA,EAAauB,MAAM,CAAC,CAACC,GAAA,EAAK,CAACC,GAAA,EAAKC,KAAA,CAAM;IACnD,IAAI9B,gBAAA,CAAiB+B,QAAQ,CAACF,GAAA,GAAM;MAClC,OAAOD,GAAA;IACT;IAEA,IAAIE,KAAA,EAAOrB,GAAA,EAAK;MACdmB,GAAA,CAAII,IAAI,CAAC;QACPvB,GAAA,EAAKqB,KAAA,CAAMrB,GAAG;QACdK,QAAA,EAAU,UAAUgB,KAAA,GAAQA,KAAA,CAAMG,IAAI,GAAG;MAC3C;IACF;IAEA,OAAOL,GAAA;EACT,GAAG,EAAE,IAELM,IAAA,CAAK,CAAC;IAAEzB,GAAA,EAAK0B;EAAC,CAAE,EAAE;IAAE1B,GAAA,EAAK2B;EAAC,CAAE;IAC5B,IAAID,CAAA,CAAEtB,KAAK,KAAKwB,SAAA,IAAaD,CAAA,CAAEvB,KAAK,KAAKwB,SAAA,EAAW;MAClD,OAAO;IACT,OAAO,IAAIF,CAAA,CAAEtB,KAAK,KAAKwB,SAAA,EAAW;MAChC,OAAO;IACT,OAAO,IAAID,CAAA,CAAEvB,KAAK,KAAKwB,SAAA,EAAW;MAChC,OAAO,CAAC;IACV;IAEA,OAAOF,CAAA,CAAEtB,KAAK,GAAGuB,CAAA,CAAEvB,KAAK;EAC1B;AACJ","ignoreList":[]}

package/dist/elements/DocumentHeader/index.css

@@ -0,0 +1,40 @@
+@layer payload-default {
+  .doc-header {
+    width: 100%;
+    padding: var(--spacer-2-5) var(--gutter-h);
+    position: relative;
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2-5);
+  }
+
+  .doc-header__title {
+    flex-grow: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
+    vertical-align: top;
+  }
+
+  .doc-header__after-header {
+    padding-top: var(--spacer-3);
+  }
+
+  @media (max-width: 768px) {
+    .doc-header {
+      flex-direction: column;
+      padding: var(--spacer-2) var(--gutter-h);
+      gap: var(--spacer-2);
+    }
+
+    .doc-header__title {
+      width: 100%;
+    }
+
+    .doc-header__after-header {
+      padding-top: var(--spacer-1);
+    }
+  }
+}

package/dist/elements/DocumentHeader/index.d.ts

@@ -0,0 +1,15 @@
+import type { PayloadRequest, SanitizedCollectionConfig, SanitizedGlobalConfig, SanitizedPermissions } from 'payload';
+import React from 'react';
+import './index.css';
+/**
+ * @internal
+ */
+export declare const DocumentHeader: React.FC<{
+    AfterHeader?: React.ReactNode;
+    collectionConfig?: SanitizedCollectionConfig;
+    globalConfig?: SanitizedGlobalConfig;
+    hideTabs?: boolean;
+    permissions: SanitizedPermissions;
+    req: PayloadRequest;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/DocumentHeader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentHeader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,yBAAyB,EACzB,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,SAAS,CAAA;AAEhB,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,aAAa,CAAA;AAIpB;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,gBAAgB,CAAC,EAAE,yBAAyB,CAAA;IAC5C,YAAY,CAAC,EAAE,qBAAqB,CAAA;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,EAAE,oBAAoB,CAAA;IACjC,GAAG,EAAE,cAAc,CAAA;CACpB,CAiBA,CAAA"}

package/dist/elements/DocumentHeader/index.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary
+import { RenderTitle } from '../../exports/client/index.js';
+import { DocumentTabs } from './Tabs/index.js';
+import './index.css';
+const baseClass = `doc-header`;
+/**
+ * @internal
+ */
+export const DocumentHeader = props => {
+  const {
+    AfterHeader,
+    collectionConfig,
+    globalConfig,
+    hideTabs,
+    permissions,
+    req
+  } = props;
+  return /*#__PURE__*/_jsxs("div", {
+    className: baseClass,
+    children: [/*#__PURE__*/_jsx(RenderTitle, {
+      className: `${baseClass}__title`
+    }), !hideTabs && /*#__PURE__*/_jsx(DocumentTabs, {
+      collectionConfig: collectionConfig,
+      globalConfig: globalConfig,
+      permissions: permissions,
+      req: req
+    }), AfterHeader ? /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__after-header`,
+      children: AfterHeader
+    }) : null]
+  });
+};
+//# sourceMappingURL=index.js.map