@payloadcms/ui 3.0.0-alpha.0

package/dist/elements/EditMany/index.scss

@@ -0,0 +1,205 @@
+@import '../../scss/styles.scss';
+
+.edit-many {
+  &__toggle {
+    font-size: 1rem;
+    line-height: base(1);
+    display: inline-flex;
+    background: var(--theme-elevation-150);
+    color: var(--theme-elevation-800);
+    border-radius: $style-radius-s;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    border: 0;
+    padding: 0 base(0.25);
+    align-items: center;
+    cursor: pointer;
+    text-decoration: none;
+
+    &:active,
+    &:focus {
+      outline: none;
+    }
+
+    &:hover {
+      background: var(--theme-elevation-100);
+    }
+
+    &:active {
+      background: var(--theme-elevation-100);
+    }
+  }
+
+  &__form {
+    height: 100%;
+  }
+
+  &__main {
+    width: calc(100% - #{base(15)});
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
+
+  &__header {
+    display: flex;
+    margin-top: base(2.5);
+    margin-bottom: base(1);
+    width: 100%;
+
+    &__title {
+      margin: 0;
+      flex-grow: 1;
+    }
+
+    &__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;
+        [dir='ltr'] & {
+          left: base(-0.825);
+        }
+
+        [dir='rtl'] & {
+          right: base(-0.825);
+        }
+        top: base(-0.825);
+
+        .stroke {
+          stroke-width: 2px;
+          vector-effect: non-scaling-stroke;
+        }
+      }
+    }
+  }
+
+  &__edit {
+    padding-top: base(1);
+    padding-bottom: base(2);
+    flex-grow: 1;
+  }
+  [dir='rtl'] &__sidebar-wrap {
+    left: 0;
+    border-right: 1px solid var(--theme-elevation-100);
+    right: auto;
+  }
+
+  &__sidebar-wrap {
+    position: fixed;
+    width: base(15);
+    height: 100%;
+    top: 0;
+    right: 0;
+    overflow: visible;
+    border-left: 1px solid var(--theme-elevation-100);
+  }
+
+  &__sidebar {
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  &__sidebar-sticky-wrap {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
+
+  &__collection-actions,
+  &__meta,
+  &__sidebar-fields {
+    [dir='ltr'] & {
+      padding-left: base(1.5);
+    }
+    [dir='rtl'] & {
+      padding-right: base(1.5);
+    }
+  }
+
+  &__document-actions {
+    padding-right: $baseline;
+    position: sticky;
+    top: 0;
+    z-index: var(--z-nav);
+
+    > * {
+      position: relative;
+      z-index: 1;
+    }
+
+    @include mid-break {
+      @include blur-bg;
+    }
+  }
+
+  &__document-actions {
+    display: flex;
+    flex-wrap: wrap;
+    padding: base(1);
+    gap: base(0.5);
+
+    .form-submit {
+      width: calc(50% - #{base(1)});
+
+      @include mid-break {
+        width: auto;
+        flex-grow: 1;
+      }
+
+      .btn {
+        width: 100%;
+        padding-left: base(0.5);
+        padding-right: base(0.5);
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  @include mid-break {
+    &__main {
+      width: 100%;
+      min-height: initial;
+    }
+
+    &__sidebar-wrap {
+      position: static;
+      width: 100%;
+      height: initial;
+    }
+
+    &__form {
+      display: block;
+    }
+
+    &__edit {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    &__document-actions {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      top: auto;
+      z-index: var(--z-nav);
+    }
+
+    &__document-actions,
+    &__sidebar-fields {
+      padding-left: var(--gutter-h);
+      padding-right: var(--gutter-h);
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+import type { SanitizedCollectionConfig } from 'payload/types';
+export type Props = {
+    collection: SanitizedCollectionConfig;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/EditMany/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAE9D,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,EAAE,yBAAyB,CAAA;CACtC,CAAA"}

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

@@ -0,0 +1,13 @@
+import type { Data } from 'payload/types';
+import React from 'react';
+import 'react-image-crop/dist/ReactCrop.css';
+import './index.scss';
+export declare const EditUpload: React.FC<{
+    doc?: Data;
+    fileName: string;
+    fileSrc: string;
+    imageCacheTag?: string;
+    showCrop?: boolean;
+    showFocalPoint?: boolean;
+}>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/EditUpload/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAGzC,OAAO,KAA2B,MAAM,OAAO,CAAA;AAE/C,OAAO,qCAAqC,CAAA;AAO5C,OAAO,cAAc,CAAA;AAerB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,GAAG,CAAC,EAAE,IAAI,CAAA;IACV,QAAQ,EAAE,MAAM,CAAA;IAChB,OAAO,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CA2OA,CAAA"}

package/dist/elements/EditUpload/index.scss

@@ -0,0 +1,224 @@
+@import '../../scss/styles.scss';
+
+$header-height: base(5);
+
+.edit-upload {
+  --edit-upload-cell-spacing: calc(var(--base) * 1.5);
+  --edit-upload-sidebar-width: calc(350px + var(--gutter-h));
+  height: 100%;
+  margin-right: calc(var(--gutter-h) * -1);
+  margin-left: calc(var(--gutter-h) * -1);
+
+  &__header {
+    height: $header-height;
+    border-bottom: 1px solid var(--theme-elevation-150);
+    padding: 0 var(--gutter-h);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    & h2 {
+      margin: 0;
+      text-wrap: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  [dir='rtl']
+  &__actions {
+    margin-right: auto;
+    margin-left: unset;
+  }
+
+  &__actions {
+    min-width: 350px;
+    margin-left: auto;
+    padding: base(0.5) 0 base(0.5) base(1.5);
+    justify-content: flex-end;
+    display: flex;
+    gap: base(1);
+    text-wrap: nowrap;
+  }
+
+  &__toolWrap {
+    display: flex;
+    justify-content: flex-end;
+    height: (calc(100% - #{$header-height}));
+  }
+
+  .ReactCrop__selection-addon,
+  &__crop-window {
+    height: 100%;
+    width: 100%;
+  }
+
+  &__focal-wrapper {
+    position: relative;
+    display: inline-flex;
+    max-height: 100%;
+  }
+
+  &__draggable-container {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    pointer-events: none;
+
+    &--dragging {
+      pointer-events: all;
+
+      .edit-upload__focalPoint {
+        cursor: grabbing;
+      }
+    }
+  }
+
+  &__draggable {
+    @include btn-reset;
+    position: absolute;
+  }
+
+  &__focalPoint {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: grab;
+    width: 50px;
+    height: 50px;
+    transform: translate3d(-50%, -50%, 0);
+    pointer-events: all;
+
+    svg {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 100%;
+      width: base(2);
+      height: base(2);
+      color: white;
+    }
+  }
+
+  &__crop,
+  &__focalOnly {
+    padding: base(1.5) base(1.5) base(1.5) 0;
+  }
+
+  &__crop {
+    padding: var(--edit-upload-cell-spacing);
+    padding-left: var(--gutter-h);
+    display: flex;
+    align-items: flex-start;
+    height: 100%;
+  }
+
+  &__imageWrap {
+    position: relative;
+  }
+
+  &__point {
+    cursor: move;
+    position: absolute;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 100%;
+
+    & svg {
+      width: base(2);
+      height: base(2);
+    }
+  }
+
+  &__sidebar {
+    border-left: 1px solid var(--theme-elevation-150);
+    padding-top: var(--edit-upload-cell-spacing);
+    min-width: var(--edit-upload-sidebar-width);
+
+    & > div:first-child {
+      margin-bottom: base(1);
+    }
+  }
+
+  &__groupWrap {
+    display: flex;
+    flex-direction: column;
+    gap: base(0.5);
+    padding-right: var(--gutter-h);
+    padding-left: var(--edit-upload-cell-spacing);
+    width: 100%;
+
+    + .edit-upload__groupWrap {
+      padding-top: var(--edit-upload-cell-spacing);
+      margin-top: var(--edit-upload-cell-spacing);
+      border-top: 1px solid var(--theme-elevation-150);
+    }
+  }
+
+  &__inputsWrap,
+  &__titleWrap {
+    display: flex;
+    gap: base(1);
+  }
+
+  &__titleWrap {
+    justify-content: space-between;
+    align-items: center;
+
+    & h3 {
+      margin: 0;
+    }
+  }
+
+  &__reset {
+    height: fit-content;
+    border-radius: var(--style-radius-s);
+    background-color: var(--theme-elevation-150);
+    padding: 0 base(0.25);
+  }
+
+  &__input {
+    flex: 1;
+    & input {
+      @include formInput;
+    }
+  }
+
+  @include mid-break {
+    --edit-upload-cell-spacing: var(--gutter-h);
+    &__sidebar {
+      padding-left: 0;
+      border-left: 0;
+      width: 100%;
+    }
+    &__toolWrap {
+      flex-direction: column-reverse;
+    }
+  }
+
+  @include small-break {
+    flex-direction: column;
+
+    &__focalPoint {
+      border-right: none;
+      padding: base(1) 0;
+    }
+
+    &__inputsWrap {
+      flex-direction: column;
+      gap: base(1);
+    }
+
+    &__sidebar {
+      min-width: 0;
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { Props } from './types';
+import './index.scss';
+export declare const ErrorPill: React.FC<Props>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ErrorPill/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAEpC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkBrC,CAAA"}

package/dist/elements/ErrorPill/index.scss

@@ -0,0 +1,43 @@
+@import '../../scss/styles.scss';
+
+.error-pill {
+  align-self: center;
+  align-items: center;
+  border: 0;
+  padding: 0 base(0.25);
+  flex-shrink: 0;
+  border-radius: var(--style-radius-l);
+  line-height: 18px;
+  font-size: 11px;
+  text-align: center;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &--fixed-width {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    position: relative;
+  }
+
+  &__count {
+    letter-spacing: 0.5px;
+    margin-left: 0.5px;
+  }
+}
+
+html[data-theme='light'] {
+  .error-pill {
+    background: var(--theme-error-250);
+    color: var(--theme-error-750);
+  }
+}
+
+html[data-theme='dark'] {
+  .error-pill {
+    background: var(--theme-error-500);
+    color: var(--color-base-1000);
+  }
+}

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

@@ -0,0 +1,8 @@
+import type { I18n } from '@payloadcms/translations';
+export type Props = {
+    className?: string;
+    count: number;
+    i18n: I18n;
+    withMessage?: boolean;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/ErrorPill/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AACpD,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,IAAI,CAAA;IACV,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA"}

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

@@ -0,0 +1,10 @@
+import type { Field, FieldWithPath } from 'payload/types';
+import React from 'react';
+import './index.scss';
+type Props = {
+    fields: Field[];
+    setSelected: (fields: FieldWithPath[]) => void;
+};
+export declare const FieldSelect: React.FC<Props>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FieldSelect/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAIzD,OAAO,KAAmB,MAAM,OAAO,CAAA;AAOvC,OAAO,cAAc,CAAA;AAIrB,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,KAAK,EAAE,CAAA;IACf,WAAW,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,IAAI,CAAA;CAC/C,CAAA;AA2DD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmCvC,CAAA"}

package/dist/elements/FieldSelect/index.scss

@@ -0,0 +1,5 @@
+@import '../../scss/styles.scss';
+
+.field-select {
+  margin-bottom: base(1);
+}

package/dist/elements/FileDetails/FileMeta/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { Props } from './types';
+import './index.scss';
+declare const FileMeta: React.FC<Props>;
+export default FileMeta;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/FileDetails/FileMeta/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FileDetails/FileMeta/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAMpC,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA+C7B,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/dist/elements/FileDetails/FileMeta/index.scss

@@ -0,0 +1,28 @@
+@import '../../../scss/styles.scss';
+
+.file-meta {
+  &__url {
+    display: flex;
+
+    a {
+      font-weight: 600;
+      text-decoration: none;
+
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__size-type,
+  &__url a {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__edit {
+    position: relative;
+  }
+}

package/dist/elements/FileDetails/FileMeta/types.d.ts

@@ -0,0 +1,12 @@
+export type Props = {
+    collection?: string;
+    filename: string;
+    filesize: number;
+    height?: number;
+    id?: string;
+    mimeType: string;
+    sizes?: unknown;
+    url: string;
+    width?: number;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/elements/FileDetails/FileMeta/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/elements/FileDetails/FileMeta/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA"}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { Props } from './types';
+import './index.scss';
+declare const FileDetails: React.FC<Props>;
+export default FileDetails;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/FileDetails/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAMpC,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA4ChC,CAAA;AAED,eAAe,WAAW,CAAA"}