@payloadcms/ui 3.0.0-alpha.0

package/dist/forms/fields/Blocks/index.scss

@@ -0,0 +1,122 @@
+@import '../../../scss/styles.scss';
+
+.blocks-field {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--base) / 2);
+
+  &__header {
+    h3 {
+      margin: 0;
+    }
+  }
+
+  &__header-wrap {
+    display: flex;
+    align-items: flex-end;
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  &__heading-with-error {
+    display: flex;
+    align-items: center;
+    gap: base(0.5);
+  }
+
+  &--has-no-error {
+    > .array-field__header .array-field__heading-with-error {
+      color: var(--theme-text);
+    }
+  }
+
+  &--has-error {
+    > .array-field__header {
+      color: var(--theme-error-500);
+    }
+  }
+
+  &__error-pill {
+    align-self: center;
+  }
+
+  &__header-actions {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+  }
+
+  &__header-action {
+    @extend %btn-reset;
+    cursor: pointer;
+    margin-left: base(0.5);
+
+    &:hover,
+    &:focus-visible {
+      text-decoration: underline;
+    }
+  }
+
+  &__block-header {
+    display: inline-flex;
+    max-width: 100%;
+    overflow: hidden;
+    gap: base(0.375);
+  }
+
+  &__block-number {
+    flex-shrink: 0;
+  }
+
+  &__block-pill {
+    flex-shrink: 0;
+    display: block;
+    line-height: unset;
+  }
+
+  &__error-wrap {
+    position: relative;
+  }
+
+  &__rows {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) / 2);
+  }
+
+  &__drawer-toggler {
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    border: none;
+    align-self: flex-start;
+
+    .btn {
+      color: var(--theme-elevation-400);
+      margin: 0;
+
+      &:hover {
+        color: var(--theme-elevation-800);
+      }
+    }
+  }
+}
+
+html[data-theme='light'] {
+  .blocks-field--has-error {
+    .section-title__input,
+    .blocks-field__heading-with-error {
+      color: var(--theme-error-750);
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .blocks-field--has-error {
+    .section-title__input,
+    .blocks-field__heading-with-error {
+      color: var(--theme-error-500);
+    }
+  }
+}

package/dist/forms/fields/Blocks/types.d.ts

@@ -0,0 +1,9 @@
+import type { FieldPermissions } from 'payload/auth';
+import type { FormFieldBase } from '../shared';
+export type Props = FormFieldBase & {
+    forceRender?: boolean;
+    indexPath: string;
+    name?: string;
+    permissions: FieldPermissions;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/forms/fields/Blocks/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/forms/fields/Blocks/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAEpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAE9C,MAAM,MAAM,KAAK,GAAG,aAAa,GAAG;IAClC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,gBAAgB,CAAA;CAC9B,CAAA"}

package/dist/forms/fields/Checkbox/Input.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+type Props = {
+    AfterInput?: React.ReactNode;
+    BeforeInput?: React.ReactNode;
+    Label?: React.ReactNode;
+    checked?: boolean;
+    className?: string;
+    id?: string;
+    inputRef?: React.RefObject<HTMLInputElement>;
+    name?: string;
+    onToggle: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    partialChecked?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+};
+export declare const inputBaseClass = "checkbox-input";
+export declare const CheckboxInput: React.FC<Props>;
+export {};
+//# sourceMappingURL=Input.d.ts.map

package/dist/forms/fields/Checkbox/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../src/forms/fields/Checkbox/Input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,KAAK,KAAK,GAAG;IACX,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAA;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC9D,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,cAAc,mBAAmB,CAAA;AAE9C,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmDzC,CAAA"}

package/dist/forms/fields/Checkbox/index.d.ts

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

package/dist/forms/fields/Checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/forms/fields/Checkbox/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAQpC,OAAO,cAAc,CAAA;;AA6FrB,wBAAsC"}

package/dist/forms/fields/Checkbox/index.scss

@@ -0,0 +1,138 @@
+@import '../../../scss/styles.scss';
+
+.checkbox {
+  position: relative;
+  margin-bottom: $baseline;
+
+  .tooltip:not([aria-hidden='true']) {
+    right: auto;
+    position: relative;
+    margin-bottom: 0.2em;
+    max-width: fit-content;
+  }
+
+  &__error-wrap {
+    position: relative;
+  }
+}
+
+.checkbox-input {
+  display: inline-flex;
+
+  label {
+    padding-bottom: 0;
+    padding-left: base(0.5);
+
+    &[for] {
+      cursor: pointer;
+    }
+  }
+
+  [dir='rtl'] &__input {
+    margin-right: 0;
+    margin-left: base(0.5);
+  }
+
+  &__input {
+    @include formInput;
+    display: flex;
+    padding: 0;
+    line-height: 0;
+    position: relative;
+    width: $baseline;
+    height: $baseline;
+
+    & input[type='checkbox'] {
+      position: absolute;
+      // Without the extra 4px, there is an uncheckable area due to the border of the parent element
+      width: calc(100% + 4px);
+      height: calc(100% + 4px);
+      padding: 0;
+      margin: 0;
+      margin-left: -2px;
+      margin-top: -2px;
+      opacity: 0;
+      border-radius: 0;
+      z-index: 1;
+      cursor: pointer;
+    }
+  }
+
+  &__icon {
+    position: absolute;
+
+    svg {
+      opacity: 0;
+    }
+  }
+
+  &:not(&--read-only) {
+    &:active,
+    &:focus-within,
+    &:focus {
+      .checkbox-input__input,
+      & input[type='checkbox'] {
+        @include inputShadowActive;
+
+        outline: 0;
+        box-shadow: 0 0 3px 3px var(--theme-success-400) !important;
+        border: 1px solid var(--theme-elevation-150);
+      }
+    }
+
+    &:hover {
+      .checkbox-input__input,
+      & input[type='checkbox'] {
+        border-color: var(--theme-elevation-250);
+      }
+    }
+  }
+
+  &:not(&--read-only):not(&--checked) {
+    &:hover {
+      cursor: pointer;
+
+      svg {
+        opacity: 0.2;
+      }
+    }
+  }
+
+  &--checked {
+    .checkbox-input__icon {
+      svg {
+        opacity: 1;
+      }
+    }
+  }
+
+  &--read-only {
+    .checkbox-input__input {
+      background-color: var(--theme-elevation-100);
+    }
+
+    label {
+      color: var(--theme-elevation-400);
+    }
+  }
+}
+
+html[data-theme='light'] {
+  .checkbox {
+    &.error {
+      .checkbox-input__input {
+        @include lightInputError;
+      }
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .checkbox {
+    &.error {
+      .checkbox-input__input {
+        @include darkInputError;
+      }
+    }
+  }
+}

package/dist/forms/fields/Checkbox/types.d.ts

@@ -0,0 +1,11 @@
+import type { FormFieldBase } from '../shared';
+export type Props = FormFieldBase & {
+    checked?: boolean;
+    disableFormData?: boolean;
+    id?: string;
+    name?: string;
+    onChange?: (val: boolean) => void;
+    partialChecked?: boolean;
+    path?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/forms/fields/Checkbox/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/forms/fields/Checkbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAE9C,MAAM,MAAM,KAAK,GAAG,aAAa,GAAG;IAClC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAA;IACjC,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA"}

package/dist/forms/fields/Code/index.d.ts

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

package/dist/forms/fields/Code/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/forms/fields/Code/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAOpC,OAAO,cAAc,CAAA;;AAgFrB,wBAAkC"}

package/dist/forms/fields/Code/index.scss

@@ -0,0 +1,36 @@
+@import '../../../scss/styles.scss';
+
+.code-field {
+  position: relative;
+
+  &.error {
+    textarea {
+      border: 1px solid var(--theme-error-500) !important;
+    }
+    .code-editor {
+      border-color: var(--theme-error-500);
+    }
+  }
+}
+
+html[data-theme='light'] {
+  .code-field {
+    &.error {
+      .monaco-editor-background,
+      .margin {
+        background-color: var(--theme-error-50);
+      }
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .code-field {
+    &.error {
+      .monaco-editor-background,
+      .margin {
+        background-color: var(--theme-error-100);
+      }
+    }
+  }
+}

package/dist/forms/fields/Code/types.d.ts

@@ -0,0 +1,6 @@
+import type { FormFieldBase } from '../shared';
+export type Props = FormFieldBase & {
+    name?: string;
+    path?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/forms/fields/Code/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/forms/fields/Code/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAE9C,MAAM,MAAM,KAAK,GAAG,aAAa,GAAG;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA"}

package/dist/forms/fields/Collapsible/index.d.ts

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

package/dist/forms/fields/Collapsible/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/forms/fields/Collapsible/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAqD,MAAM,OAAO,CAAA;AAEzE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAapC,OAAO,cAAc,CAAA;;AAyHrB,wBAA8C"}

package/dist/forms/fields/Collapsible/index.scss

@@ -0,0 +1,14 @@
+@import '../../../scss/styles.scss';
+
+.collapsible-field {
+  &__row-label-wrap {
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    gap: base(0.5);
+  }
+
+  &--has-error {
+    border: 1px solid var(--theme-error-500);
+  }
+}

package/dist/forms/fields/Collapsible/types.d.ts

@@ -0,0 +1,9 @@
+import type { FieldPermissions } from 'payload/auth';
+import type { FieldTypes } from 'payload/config';
+import type { FormFieldBase } from '../shared';
+export type Props = FormFieldBase & {
+    fieldTypes: FieldTypes;
+    indexPath: string;
+    permissions: FieldPermissions;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/forms/fields/Collapsible/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/forms/fields/Collapsible/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAEhD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAE9C,MAAM,MAAM,KAAK,GAAG,aAAa,GAAG;IAClC,UAAU,EAAE,UAAU,CAAA;IACtB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,gBAAgB,CAAA;CAC9B,CAAA"}

package/dist/forms/fields/ConfirmPassword/index.d.ts

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

package/dist/forms/fields/ConfirmPassword/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/forms/fields/ConfirmPassword/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAG1C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAQpC,OAAO,cAAc,CAAA;AAErB,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAoDpC,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/forms/fields/ConfirmPassword/index.scss

@@ -0,0 +1,29 @@
+@import '../../../scss/styles.scss';
+
+.field-type.confirm-password {
+  position: relative;
+
+  input {
+    @include formInput;
+  }
+}
+
+html[data-theme='light'] {
+  .field-type.field-type.confirm-password {
+    &.error {
+      input {
+        @include lightInputError;
+      }
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .field-type.field-type.confirm-password {
+    &.error {
+      input {
+        @include darkInputError;
+      }
+    }
+  }
+}

package/dist/forms/fields/ConfirmPassword/types.d.ts

@@ -0,0 +1,4 @@
+export type Props = {
+    disabled?: boolean;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/forms/fields/ConfirmPassword/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/forms/fields/ConfirmPassword/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA"}

package/dist/forms/fields/DateTime/index.d.ts

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

package/dist/forms/fields/DateTime/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/forms/fields/DateTime/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAMpC,OAAO,cAAc,CAAA;AAIrB,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAyE7B,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/dist/forms/fields/DateTime/index.scss

@@ -0,0 +1,27 @@
+@import '../../../scss/styles';
+
+.date-time-field {
+  &__error-wrap {
+    position: relative;
+  }
+}
+
+html[data-theme='light'] {
+  .date-time-field {
+    &--has-error {
+      .react-datepicker__input-container input {
+        @include lightInputError;
+      }
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .date-time-field {
+    &--has-error {
+      .react-datepicker__input-container input {
+        @include darkInputError;
+      }
+    }
+  }
+}

package/dist/forms/fields/DateTime/types.d.ts

@@ -0,0 +1,6 @@
+import type { FormFieldBase } from '../shared';
+export type Props = FormFieldBase & {
+    name?: string;
+    path: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/forms/fields/DateTime/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/forms/fields/DateTime/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAE9C,MAAM,MAAM,KAAK,GAAG,aAAa,GAAG;IAClC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb,CAAA"}

package/dist/forms/fields/Email/index.d.ts

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

package/dist/forms/fields/Email/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/forms/fields/Email/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAOpC,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAmEjC,CAAA;;AAED,wBAAmC"}

package/dist/forms/fields/Email/index.scss

@@ -0,0 +1,35 @@
+@import '../../../scss/styles.scss';
+
+.field-type.email {
+  position: relative;
+
+  input {
+    @include formInput;
+  }
+
+  &.error {
+    input {
+      background-color: var(--theme-error-200);
+    }
+  }
+}
+
+html[data-theme='light'] {
+  .field-type.email {
+    &.error {
+      input {
+        @include lightInputError;
+      }
+    }
+  }
+}
+
+html[data-theme='dark'] {
+  .field-type.email {
+    &.error {
+      input {
+        @include darkInputError;
+      }
+    }
+  }
+}

package/dist/forms/fields/Email/types.d.ts

@@ -0,0 +1,7 @@
+import type { FormFieldBase } from '../shared';
+export type Props = FormFieldBase & {
+    autoComplete?: string;
+    name?: string;
+    path?: string;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/forms/fields/Email/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/forms/fields/Email/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAE9C,MAAM,MAAM,KAAK,GAAG,aAAa,GAAG;IAClC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA"}

package/dist/forms/fields/Group/index.d.ts

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

package/dist/forms/fields/Group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/forms/fields/Group/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAapC,OAAO,cAAc,CAAA;;AA6ErB,wBAAmC"}