@payloadcms/ui 3.0.0-alpha.0

package/dist/elements/DocumentControls/index.scss

@@ -0,0 +1,218 @@
+@import '../../scss/styles.scss';
+
+.doc-controls {
+  @include blur-bg-light;
+  position: sticky;
+  top: 0;
+  width: 100%;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+
+  &__divider {
+    content: '';
+    display: block;
+    position: absolute;
+    height: 1px;
+    background: var(--theme-elevation-100);
+    width: 100%;
+    left: 0;
+    top: 100%;
+  }
+
+  &__wrapper {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: var(--base);
+    padding-bottom: 1px;
+    z-index: 1;
+    height: var(--doc-controls-height);
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    overflow: hidden;
+  }
+
+  &__meta {
+    flex-grow: 1;
+    display: flex;
+    list-style: none;
+    padding: 0;
+    gap: var(--base);
+    margin: 0;
+    width: 100%;
+  }
+
+  &__list-item {
+    display: flex;
+    align-items: center;
+    margin: 0;
+  }
+
+  &__value-wrap {
+    overflow: hidden;
+  }
+
+  &__value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin: 0;
+    font-weight: 600;
+  }
+
+  &__label {
+    color: var(--theme-elevation-500);
+    white-space: nowrap;
+    margin: 0;
+  }
+
+  &__controls-wrapper {
+    --controls-gap: calc(var(--base) / 2);
+    --dot-button-width: calc(var(--base) * 2);
+    display: flex;
+    align-items: center;
+    margin: 0;
+    gap: var(--controls-gap);
+    position: relative;
+  }
+
+  &__controls {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    gap: calc(var(--base) / 2);
+
+    button {
+      margin: 0;
+      white-space: nowrap;
+    }
+  }
+
+  &__dots {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: 2px;
+    border: 1px solid var(--theme-elevation-100);
+    border-radius: $style-radius-m;
+    height: calc(var(--base) * 1.5);
+    width: calc(var(--base) * 1.5);
+
+    &:hover {
+      border: 1px solid var(--theme-elevation-500);
+      background-color: var(--theme-elevation-100);
+    }
+
+    > div {
+      width: 3px;
+      height: 3px;
+      border-radius: 100%;
+      background-color: currentColor;
+    }
+  }
+
+  &__popup {
+    position: relative;
+  }
+
+  .popup--active {
+    .doc-controls {
+      &__dots {
+        border: 1px solid var(--theme-elevation-500);
+        background-color: var(--theme-elevation-100);
+      }
+    }
+  }
+
+  .popup__trigger-wrap {
+    display: flex;
+  }
+
+  @include mid-break {
+    // On mobile, only stick the controls to the top
+    // The timestamps and meta can scroll past
+    // The same container needs to the sticky, though
+    // So we use a static height with a negative top equal to the meta height plus top padding
+    top: calc(var(--base) * -2);
+    padding-right: 0;
+    padding-left: 0;
+
+    &__wrapper {
+      flex-direction: column;
+      gap: 0;
+      height: unset;
+    }
+
+    &__content {
+      width: 100%;
+      overflow: auto;
+      height: calc(var(--base) * 2);
+
+      // this container has a fixed height
+      // this means the scrollbar (when present) overlaps the content
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    &__meta {
+      width: auto;
+      gap: calc(var(--base) / 2);
+      margin-left: var(--gutter-h);
+
+      &::after {
+        content: '';
+        display: block;
+        position: sticky;
+        right: 0;
+        width: calc(var(--base) * 2);
+        height: var(--base);
+        background: linear-gradient(to right, transparent, var(--theme-bg));
+        flex-shrink: 0;
+        z-index: 1111;
+        pointer-events: none;
+      }
+    }
+
+    &__controls-wrapper {
+      width: 100%;
+      transform: translate3d(0, 0, 0);
+      padding-right: var(--gutter-h);
+      justify-content: space-between;
+      height: var(--doc-controls-height);
+      border-top: 1px solid var(--theme-elevation-100);
+    }
+
+    &__controls {
+      padding-left: var(--gutter-h);
+      overflow: auto;
+
+      // do not show scrollbar because the parent container has a static height
+      // this container has a gradient overlay as visual indication of `overflow: scroll`
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      &::after {
+        content: '';
+        display: block;
+        position: sticky;
+        right: 0;
+        width: calc(var(--base) * 2);
+        height: calc(var(--base) * 1.5);
+        background: linear-gradient(to right, transparent, var(--theme-bg));
+        flex-shrink: 0;
+        z-index: 1111;
+        pointer-events: none;
+      }
+    }
+  }
+}

package/dist/elements/DocumentDrawer/DrawerContent.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { DocumentDrawerProps } from './types';
+export declare const DocumentDrawerContent: React.FC<DocumentDrawerProps>;
+//# sourceMappingURL=DrawerContent.d.ts.map

package/dist/elements/DocumentDrawer/DrawerContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAIvE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AA+JlD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAwB/D,CAAA"}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { DocumentDrawerProps, DocumentTogglerProps, UseDocumentDrawer } from './types';
+import './index.scss';
+export declare const baseClass = "doc-drawer";
+export declare const DocumentDrawerToggler: React.FC<DocumentTogglerProps>;
+export declare const DocumentDrawer: React.FC<DocumentDrawerProps>;
+export declare const useDocumentDrawer: UseDocumentDrawer;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2D,MAAM,OAAO,CAAA;AAE/E,OAAO,KAAK,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAO3F,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,SAAS,eAAe,CAAA;AAcrC,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAyBhE,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAQxD,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,iBAiE/B,CAAA"}

package/dist/elements/DocumentDrawer/index.scss

@@ -0,0 +1,73 @@
+@import '../../scss/styles.scss';
+
+.doc-drawer {
+  &__header {
+    width: 100%;
+    margin-top: base(2.5);
+    display: flex;
+    flex-direction: column;
+    gap: base(0.5);
+    align-items: flex-start;
+  }
+
+  &__header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    width: 100%;
+  }
+
+  &__header-text {
+    margin: 0;
+  }
+
+  &__toggler {
+    background: transparent;
+    border: 0;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    color: inherit;
+
+    &:focus,
+    &:focus-within {
+      outline: none;
+    }
+
+    &:disabled {
+      pointer-events: none;
+    }
+  }
+
+  &__header-close {
+    border: 0;
+    background-color: transparent;
+    padding: 0;
+    cursor: pointer;
+    overflow: hidden;
+    width: base(1);
+    height: base(1);
+
+    svg {
+      width: base(2.75);
+      height: base(2.75);
+      position: relative;
+      left: base(-0.825);
+      top: base(-0.825);
+
+      .stroke {
+        stroke-width: 2px;
+        vector-effect: non-scaling-stroke;
+      }
+    }
+  }
+
+  @include mid-break {
+    &__header {
+      margin-top: base(1.5);
+      margin-bottom: base(0.5);
+      padding-left: var(--gutter-h);
+      padding-right: var(--gutter-h);
+    }
+  }
+}

package/dist/elements/DocumentDrawer/types.d.ts

@@ -0,0 +1,34 @@
+import type React from 'react';
+import type { HTMLAttributes } from 'react';
+import type { DocumentInfoContext } from '../../providers/DocumentInfo/types';
+import type { Props as DrawerProps } from '../Drawer/types';
+export type DocumentDrawerProps = Pick<DrawerProps, 'Header'> & {
+    collectionSlug: string;
+    drawerSlug?: string;
+    id?: number | string;
+    onSave?: DocumentInfoContext['onSave'];
+};
+export type DocumentTogglerProps = HTMLAttributes<HTMLButtonElement> & {
+    children?: React.ReactNode;
+    className?: string;
+    collectionSlug: string;
+    disabled?: boolean;
+    drawerSlug?: string;
+    id?: string;
+};
+export type UseDocumentDrawer = (args: {
+    collectionSlug: string;
+    id?: number | string;
+}) => [
+    React.FC<Omit<DocumentDrawerProps, 'collectionSlug' | 'id'>>,
+    React.FC<Omit<DocumentTogglerProps, 'collectionSlug' | 'id'>>,
+    {
+        closeDrawer: () => void;
+        drawerDepth: number;
+        drawerSlug: string;
+        isDrawerOpen: boolean;
+        openDrawer: () => void;
+        toggleDrawer: () => void;
+    }
+];
+//# sourceMappingURL=types.d.ts.map

package/dist/elements/DocumentDrawer/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentDrawer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAA;AAC7E,OAAO,KAAK,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAE3D,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,GAAG;IAC9D,cAAc,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAA;CACvC,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,iBAAiB,CAAC,GAAG;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,CAAC,IAAI,EAAE;IAAE,cAAc,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,KAAK;IAC1F,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC5D,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC7D;QACE,WAAW,EAAE,MAAM,IAAI,CAAA;QACvB,WAAW,EAAE,MAAM,CAAA;QACnB,UAAU,EAAE,MAAM,CAAA;QAClB,YAAY,EAAE,OAAO,CAAA;QACrB,UAAU,EAAE,MAAM,IAAI,CAAA;QACtB,YAAY,EAAE,MAAM,IAAI,CAAA;KACzB;CACF,CAAA"}

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

@@ -0,0 +1,12 @@
+import type { Description } from 'payload/types';
+import React from 'react';
+import type { FieldMap } from '../../utilities/buildComponentMap/types';
+import './index.scss';
+export declare const DocumentFields: React.FC<{
+    AfterFields?: React.ReactNode;
+    BeforeFields?: React.ReactNode;
+    description?: Description;
+    fieldMap: FieldMap;
+    forceSidebarWrap?: boolean;
+}>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentFields/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAEhD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAA;AAIvE,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,QAAQ,EAAE,QAAQ,CAAA;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,CA8CA,CAAA"}

package/dist/elements/DocumentFields/index.scss

@@ -0,0 +1,192 @@
+@import '../../scss/styles.scss';
+
+.document-fields {
+  width: 100%;
+  display: flex;
+  --doc-sidebar-width: 325px;
+
+  &--has-sidebar {
+    .document-fields {
+      &__main {
+        width: 66.66%;
+      }
+
+      &__edit {
+        [dir='ltr'] & {
+          top: 0;
+          right: 0;
+          border-right: 1px solid var(--theme-elevation-100);
+          padding-right: calc(var(--base) * 2);
+        }
+
+        [dir='rtl'] & {
+          top: 0;
+          left: 0;
+          border-left: 1px solid var(--theme-elevation-100);
+          padding-left: calc(var(--base) * 2);
+        }
+      }
+
+      &__fields {
+        & > .tabs-field,
+        & > .group-field {
+          margin-right: calc(var(--base) * -2);
+        }
+      }
+    }
+  }
+
+  &__main {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    flex-grow: 1;
+  }
+
+  &__edit {
+    padding-top: calc(var(--base) * 1.5);
+    padding-bottom: var(--spacing-view-bottom);
+    flex-grow: 1;
+  }
+
+  &__sidebar-wrap {
+    position: sticky;
+    top: var(--doc-controls-height);
+    width: 33.33%;
+    height: calc(100vh - var(--doc-controls-height));
+    min-width: var(--doc-sidebar-width);
+    flex-shrink: 0;
+  }
+
+  &__sidebar {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
+
+  &__sidebar-fields {
+    display: flex;
+    flex-direction: column;
+    gap: var(--base);
+    padding-top: calc(var(--base) * 1.5);
+    padding-left: calc(var(--base) * 2);
+    padding-right: var(--gutter-h);
+    padding-bottom: var(--spacing-view-bottom);
+  }
+
+  &__label {
+    color: var(--theme-elevation-400);
+  }
+
+  &--force-sidebar-wrap {
+    display: block;
+
+    .document-fields {
+      &__main {
+        width: 100%;
+        min-height: initial;
+      }
+
+      &__sidebar-wrap {
+        position: static;
+        width: 100%;
+        height: initial;
+        border-left: 0;
+      }
+
+      &__sidebar {
+        padding-bottom: base(3.5);
+        overflow: visible;
+      }
+
+      &__sidebar-fields {
+        padding-top: 0;
+        padding-left: var(--gutter-h);
+        padding-bottom: 0;
+      }
+    }
+  }
+
+  @include mid-break {
+    display: block;
+
+    &--has-sidebar {
+      .document-fields {
+        &__main {
+          width: 100%;
+        }
+
+        &__edit {
+          [dir='ltr'] & {
+            border-right: 0;
+            padding-right: var(--gutter-h);
+          }
+
+          [dir='rtl'] & {
+            border-left: 0;
+            padding-left: var(--gutter-h);
+          }
+        }
+
+        &__fields {
+          & > .tabs-field,
+          & > .group-field {
+            margin-right: calc(var(--gutter-h) * -1);
+          }
+        }
+      }
+    }
+
+    &__main {
+      width: 100%;
+      min-height: initial;
+    }
+
+    &__sidebar-wrap {
+      position: static;
+      width: 100%;
+      height: initial;
+      border-left: 0;
+    }
+
+    &__form {
+      display: block;
+    }
+
+    &__sidebar-fields {
+      padding-top: 0;
+      padding-left: var(--gutter-h);
+      padding-right: var(--gutter-h);
+      padding-bottom: 0;
+      gap: base(0.5);
+
+      [dir='ltr'] & {
+        padding-right: var(--gutter-h);
+      }
+
+      [dir='rtl'] & {
+        padding-left: var(--gutter-h);
+      }
+    }
+
+    &__sidebar {
+      padding-bottom: base(3.5);
+      overflow: visible;
+    }
+  }
+
+  @include small-break {
+    &__sidebar-wrap {
+      min-width: initial;
+      width: 100%;
+    }
+
+    &__edit {
+      padding-top: calc(var(--base) / 2);
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+import type React from 'react';
+export declare const ShouldRenderTabs: React.FC<{
+    children: React.ReactNode;
+}>;
+//# sourceMappingURL=ShouldRenderTabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShouldRenderTabs.d.ts","sourceRoot":"","sources":["../../../../src/elements/DocumentHeader/Tabs/ShouldRenderTabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAWA,CAAA"}

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

@@ -0,0 +1,12 @@
+import type { SanitizedConfig } from 'payload/types';
+import React from 'react';
+export declare const DocumentTabLink: React.FC<{
+    adminRoute: SanitizedConfig['routes']['admin'];
+    baseClass: string;
+    children?: React.ReactNode;
+    href: string;
+    isActive?: boolean;
+    isCollection?: boolean;
+    newTab?: boolean;
+}>;
+//# sourceMappingURL=TabLink.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabLink.d.ts","sourceRoot":"","sources":["../../../../../src/elements/DocumentHeader/Tabs/Tab/TabLink.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAIpD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC;IACrC,UAAU,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAA;IAC9C,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAmCA,CAAA"}

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

@@ -0,0 +1,6 @@
+import type { DocumentTabConfig, DocumentTabProps } from 'payload/types';
+import React from 'react';
+import './index.scss';
+export declare const baseClass = "doc-tab";
+export declare const DocumentTab: React.FC<DocumentTabProps & 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,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAExE,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,SAAS,YAAY,CAAA;AAElC,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,GAAG,iBAAiB,CAqEtE,CAAA"}

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

@@ -0,0 +1,89 @@
+@import '../../../../scss/styles.scss';
+
+.doc-tab {
+  @extend %h5;
+  position: relative;
+
+  &__link {
+    text-decoration: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    white-space: nowrap;
+
+    // Use a pseudo element for the accessability so that it doesn't take up DOM space
+    // Also because the parent element has `overflow: hidden` which would clip an outline
+    &:focus-visible::after {
+      content: '';
+      border: var(--accessibility-outline);
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+    }
+  }
+
+  &:focus:not(:focus-visible) {
+    opacity: 1;
+  }
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 2px;
+    background-color: var(--theme-elevation-50);
+    opacity: 0;
+  }
+
+  &:hover {
+    &::before {
+      opacity: 1;
+    }
+
+    .doc-tab__count {
+      background-color: var(--theme-elevation-150);
+    }
+  }
+
+  &--active {
+    &::before {
+      opacity: 1;
+      background-color: var(--theme-elevation-100);
+    }
+
+    .doc-tab {
+      &__count {
+        background-color: var(--theme-elevation-250);
+      }
+    }
+
+    &:hover {
+      .doc-tab {
+        &__count {
+          background-color: var(--theme-elevation-250);
+        }
+      }
+    }
+  }
+
+  &__label {
+    display: flex;
+    position: relative;
+    align-items: center;
+    gap: 4px;
+    width: 100%;
+    height: 100%;
+    padding: calc(var(--base) / 2) calc(var(--base));
+  }
+
+  &__count {
+    padding: 0px 7px;
+    background-color: var(--theme-elevation-100);
+    border-radius: 1px;
+  }
+}

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

@@ -0,0 +1,7 @@
+import type { EditViewConfig } from 'payload/config';
+import type { SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload/types';
+export declare const getCustomViews: (args: {
+    collectionConfig: SanitizedCollectionConfig;
+    globalConfig: SanitizedGlobalConfig;
+}) => EditViewConfig[];
+//# sourceMappingURL=getCustomViews.d.ts.map