@payloadcms/ui 3.0.0-alpha.0

package/dist/elements/DatePicker/index.scss

@@ -0,0 +1,383 @@
+@import '../../scss/styles';
+
+$cal-icon-width: 18px;
+
+[dir='rtl'] {
+  .date-time-picker {
+    .react-datepicker__input-container input {
+      padding-right: base(3.4);
+    }
+  }
+}
+
+.date-time-picker {
+  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box,
+  .react-datepicker__time-container {
+    width: 120px;
+  }
+
+  &__icon-wrap {
+    position: relative;
+    z-index: 1;
+  }
+
+  .icon--calendar,
+  &__clear-button {
+    position: absolute;
+  }
+
+  .icon--calendar,
+  .icon--x {
+    @include color-svg(var(--theme-elevation-800));
+    height: auto;
+  }
+
+  &__clear-button {
+    top: base(0.5);
+    right: base(2);
+  }
+
+  .icon--calendar {
+    top: base(0.625);
+    right: base(0.75);
+    width: $cal-icon-width;
+    pointer-events: none;
+  }
+
+  .icon--x {
+    width: base(1);
+  }
+
+  &__clear-button {
+    appearance: none;
+    background-color: transparent;
+    border: none;
+    outline: none;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  &__appearance--timeOnly {
+    .react-datepicker {
+      width: 100%;
+
+      &__month-container,
+      &__navigation--previous,
+      &__navigation--next {
+        display: none;
+        visibility: hidden;
+      }
+
+      &-popper,
+      &__time-container,
+      &__time-box {
+        width: base(6);
+      }
+
+      &__time-container {
+        .react-datepicker__time {
+          .react-datepicker__time-box {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+
+  .react-datepicker-wrapper {
+    display: block;
+  }
+
+  .react-datepicker-wrapper,
+  .react-datepicker__input-container {
+    width: 100%;
+  }
+
+  .react-datepicker__input-container input {
+    @include formInput;
+    padding-right: calc(#{base(0.75)} + #{$cal-icon-width});
+  }
+
+  &--has-error {
+    .react-datepicker__input-container input {
+      background-color: var(--theme-error-200);
+    }
+  }
+
+  .react-datepicker {
+    @include shadow-lg;
+    border: 1px solid var(--theme-elevation-100);
+    background: var(--theme-input-bg);
+    display: inline-flex;
+    font-family: var(--font-body);
+    font-weight: 100;
+    border-radius: 0;
+    color: var(--theme-elevation-800);
+
+    &__header {
+      padding-top: 0;
+      text-transform: none;
+      text-align: center;
+      border-radius: 0;
+      border: none;
+      background-color: var(--theme-input-bg);
+
+      &--time {
+        padding: 10px 0;
+        border-bottom: 1px solid var(--theme-elevation-150);
+        font-weight: 600;
+      }
+    }
+
+    &__navigation {
+      background: none;
+      line-height: 1.7rem;
+      text-align: center;
+      cursor: pointer;
+      position: absolute;
+      top: 10px;
+      width: 0;
+      padding: 0;
+      border: 0.45rem solid transparent;
+      z-index: 1;
+      height: 10px;
+      width: 10px;
+      text-indent: -999em;
+      overflow: hidden;
+      top: 15px;
+
+      &--next {
+        border-left-color: var(--theme-elevation-400);
+
+        &:focus {
+          border-left-color: var(--theme-elevation-500);
+          outline: none;
+        }
+      }
+
+      &--previous {
+        border-right-color: var(--theme-elevation-400);
+
+        &:focus {
+          border-right-color: var(--theme-elevation-500);
+          outline: none;
+        }
+      }
+    }
+
+    &__current-month,
+    &__header,
+    &-year-header,
+    &__day-name,
+    &__day,
+    &__time-name,
+    &-time__header {
+      color: var(--theme-elevation-1000);
+    }
+
+    &__current-month {
+      display: none;
+    }
+
+    &__header__dropdown,
+    &-year-header {
+      padding: 10px 0;
+      font-weight: bold;
+    }
+
+    &__month-container {
+      border-right: 1px solid var(--theme-elevation-150);
+    }
+
+    &__time {
+      background: none;
+    }
+
+    &__time-container {
+      border-left: none;
+    }
+
+    &__month-text {
+      &:hover {
+        background: var(--theme-elevation-100);
+      }
+    }
+
+    &__month-select,
+    &__year-select {
+      min-width: 70px;
+      border: none;
+      background: none;
+      outline: none;
+      cursor: pointer;
+
+      option {
+        background-color: var(--theme-elevation-50);
+      }
+    }
+
+    &__day-names {
+      background-color: var(--theme-elevation-100);
+    }
+
+    &__day {
+      box-shadow: inset 0px 0px 0px 1px var(--theme-elevation-150);
+      font-size: base(0.55);
+
+      &:hover {
+        background: var(--theme-elevation-100);
+      }
+
+      &:focus {
+        outline: 0;
+        background: var(--theme-elevation-400);
+      }
+
+      &--selected {
+        font-weight: bold;
+
+        &:focus {
+          background-color: var(--theme-elevation-150);
+        }
+      }
+
+      &--keyboard-selected {
+        color: var(--theme-elevation-0);
+        font-weight: bold;
+
+        &:focus {
+          background-color: var(--theme-elevation-150);
+          box-shadow:
+            inset 0px 0px 0px 1px var(--theme-elevation-800),
+            0px 0px 0px 1px var(--theme-elevation-800);
+        }
+      }
+
+      &--today {
+        font-weight: bold;
+      }
+    }
+
+    &__day,
+    &__day-name {
+      width: base(1.5);
+      margin: base(0.15);
+      line-height: base(1.25);
+    }
+  }
+
+  .react-datepicker-popper {
+    z-index: 10;
+    border: none;
+  }
+
+  .react-datepicker__time-container
+    .react-datepicker__time
+    .react-datepicker__time-box
+    ul.react-datepicker__time-list {
+    max-height: 100%;
+  }
+
+  .react-datepicker__day--keyboard-selected,
+  .react-datepicker__month-text--keyboard-selected,
+  .react-datepicker__time-container
+    .react-datepicker__time
+    .react-datepicker__time-box
+    ul.react-datepicker__time-list
+    li.react-datepicker__time-list-item--selected {
+    box-shadow: none;
+    background-color: var(--theme-elevation-150);
+    font-weight: bold;
+    color: var(--theme-elevation-800);
+    border-radius: 0;
+  }
+
+  .react-datepicker__time-container
+    .react-datepicker__time
+    .react-datepicker__time-box
+    ul.react-datepicker__time-list
+    li.react-datepicker__time-list-item--selected,
+  .react-datepicker__day--selected,
+  .react-datepicker__day--in-selecting-range,
+  .react-datepicker__day--in-range,
+  .react-datepicker__month-text--selected,
+  .react-datepicker__month-text--in-selecting-range,
+  .react-datepicker__month-text--in-range {
+    box-shadow: none;
+    background-color: var(--theme-elevation-150);
+    color: var(--theme-elevation-800);
+    font-weight: bold;
+    border-radius: 0;
+  }
+
+  .react-datepicker__time-container
+    .react-datepicker__time
+    .react-datepicker__time-box
+    ul.react-datepicker__time-list
+    li.react-datepicker__time-list-item:hover {
+    background: var(--theme-elevation-100);
+  }
+
+  .react-datepicker__day:hover,
+  .react-datepicker__month-text:hover {
+    border-radius: 0;
+  }
+
+  .react-datepicker__navigation--next--with-time:not(
+      .react-datepicker__navigation--next--with-today-button
+    ) {
+    right: 130px;
+  }
+
+  .react-datepicker__time-container
+    .react-datepicker__time
+    .react-datepicker__time-box
+    ul.react-datepicker__time-list
+    li.react-datepicker__time-list-item {
+    line-height: 20px;
+    font-size: base(0.5);
+  }
+
+  &__appearance--dayOnly,
+  &__appearance--monthOnly {
+    .react-datepicker {
+      &__month-container {
+        border-right: none;
+      }
+    }
+  }
+
+  @include small-break {
+    .react-datepicker {
+      flex-direction: column;
+    }
+    .react-datepicker__month-container {
+      border-right: 0;
+    }
+    .react-datepicker__time-container {
+      width: auto;
+    }
+    .react-datepicker__header--time {
+      background-color: var(--theme-elevation-100);
+      padding: 8px 0;
+      border-bottom: none;
+    }
+    .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
+      height: 120px;
+      width: unset;
+      > ul {
+        height: 120px;
+      }
+    }
+    .react-datepicker__navigation--next--with-time:not(
+        .react-datepicker__navigation--next--with-today-button
+      ) {
+      right: 0px;
+    }
+    &__input-wrapper {
+      .icon {
+        top: calc(50% - #{base(0.25)});
+      }
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+import type { DayPickerProps, SharedProps, TimePickerProps } from 'payload/types';
+export type Props = SharedProps & DayPickerProps & TimePickerProps & {
+    onChange?: (val: Date) => void;
+    placeholder?: string;
+    readOnly?: boolean;
+    value?: Date;
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/DatePicker/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAEjF,MAAM,MAAM,KAAK,GAAG,WAAW,GAC7B,cAAc,GACd,eAAe,GAAG;IAChB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,KAAK,IAAI,CAAA;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,IAAI,CAAA;CACb,CAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DeleteDocument/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAgC,MAAM,OAAO,CAAA;AAGpD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAWpC,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA2HnC,CAAA;AAED,eAAe,cAAc,CAAA"}

package/dist/elements/DeleteDocument/index.scss

@@ -0,0 +1,27 @@
+@import '../../scss/styles.scss';
+
+.delete-document {
+  @include blur-bg;
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  &__template {
+    z-index: 1;
+    position: relative;
+  }
+
+  &__toggle {
+    @extend %btn-reset;
+  }
+
+  .btn {
+    margin: 0;
+  }
+
+  &__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $baseline;
+  }
+}

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

@@ -0,0 +1,10 @@
+import type { SanitizedCollectionConfig } from 'payload/types';
+export type Props = {
+    buttonId?: string;
+    collectionSlug: SanitizedCollectionConfig['slug'];
+    id?: string;
+    singularLabel: SanitizedCollectionConfig['labels']['singular'];
+    title?: string;
+    useAsTitle: SanitizedCollectionConfig['admin']['useAsTitle'];
+};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/DeleteDocument/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,eAAe,CAAA;AAE9D,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IACjD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,aAAa,EAAE,yBAAyB,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAA;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,yBAAyB,CAAC,OAAO,CAAC,CAAC,YAAY,CAAC,CAAA;CAC7D,CAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DeleteMany/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgC,MAAM,OAAO,CAAA;AAGpD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAWpC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0GtC,CAAA;AAED,eAAe,UAAU,CAAA"}

package/dist/elements/DeleteMany/index.scss

@@ -0,0 +1,17 @@
+@import '../../scss/styles.scss';
+
+.delete-documents {
+  @include blur-bg;
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  &__template {
+    z-index: 1;
+    position: relative;
+  }
+
+  .btn {
+    margin-right: $baseline;
+  }
+}

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

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

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

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

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

@@ -0,0 +1,16 @@
+import type { CollectionPermission, GlobalPermission } from 'payload/auth';
+import type { SanitizedCollectionConfig, SanitizedGlobalConfig } from 'payload/types';
+import React from 'react';
+import './index.scss';
+export declare const DocumentControls: React.FC<{
+    apiURL: string;
+    data?: any;
+    disableActions?: boolean;
+    hasSavePermission?: boolean;
+    id?: number | string;
+    isAccountView?: boolean;
+    isEditing?: boolean;
+    permissions: CollectionPermission | GlobalPermission | null;
+    slug: SanitizedCollectionConfig['slug'] | SanitizedGlobalConfig['slug'];
+}>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/DocumentControls/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAC1E,OAAO,KAAK,EAAE,yBAAyB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAA;AAErF,OAAO,KAAmB,MAAM,OAAO,CAAA;AAiBvC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IACtC,MAAM,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,GAAG,CAAA;IACV,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,EAAE,oBAAoB,GAAG,gBAAgB,GAAG,IAAI,CAAA;IAC3D,IAAI,EAAE,yBAAyB,CAAC,MAAM,CAAC,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAA;CACxE,CA4MA,CAAA"}