@payloadcms/ui 3.0.0-alpha.0

package/dist/scss/queries.scss

@@ -0,0 +1,27 @@
+////////////////////////////
+// MEDIA QUERIES
+/////////////////////////////
+
+@mixin extra-small-break {
+  @media (max-width: $breakpoint-xs-width) {
+    @content;
+  }
+}
+
+@mixin small-break {
+  @media (max-width: $breakpoint-s-width) {
+    @content;
+  }
+}
+
+@mixin mid-break {
+  @media (max-width: $breakpoint-m-width) {
+    @content;
+  }
+}
+
+@mixin large-break {
+  @media (max-width: $breakpoint-l-width) {
+    @content;
+  }
+}

package/dist/scss/resets.scss

@@ -0,0 +1,17 @@
+%btn-reset {
+  border: 0;
+  background: none;
+  box-shadow: none;
+  border-radius: 0;
+  padding: 0;
+  color: currentColor;
+}
+
+@mixin btn-reset {
+  border: 0;
+  background: none;
+  box-shadow: none;
+  border-radius: 0;
+  padding: 0;
+  color: currentColor;
+}

package/dist/scss/styles.scss

@@ -0,0 +1,11 @@
+@import 'vars';
+@import 'z-index';
+
+//////////////////////////////
+// IMPORT OVERRIDES
+//////////////////////////////
+
+@import 'type';
+@import 'queries';
+@import 'resets';
+@import 'svg';

package/dist/scss/svg.scss

@@ -0,0 +1,10 @@
+@mixin color-svg($color) {
+  .stroke {
+    stroke: $color;
+    fill: none;
+  }
+
+  .fill {
+    fill: $color;
+  }
+}

package/dist/scss/toastify.scss

@@ -0,0 +1,59 @@
+@import 'vars';
+@import '../../node_modules/react-toastify/dist/ReactToastify.css';
+
+.Toastify {
+  .Toastify__toast-container {
+    left: base(5);
+    transform: none;
+    right: base(5);
+    width: auto;
+  }
+
+  .Toastify__toast {
+    padding: base(0.5);
+    border-radius: $style-radius-m;
+    font-weight: 600;
+  }
+
+  .Toastify__close-button {
+    align-self: center;
+    opacity: 0.7;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .Toastify__toast--success {
+    color: var(--color-success-900);
+    background: var(--color-success-500);
+
+    .Toastify__progress-bar {
+      background-color: var(--color-success-900);
+    }
+  }
+
+  .Toastify__close-button--success {
+    color: var(--color-success-900);
+  }
+
+  .Toastify__toast--error {
+    background: var(--theme-error-500);
+    color: #fff;
+
+    .Toastify__progress-bar {
+      background-color: #fff;
+    }
+  }
+
+  .Toastify__close-button--light {
+    color: inherit;
+  }
+
+  @include mid-break {
+    .Toastify__toast-container {
+      left: $baseline;
+      right: $baseline;
+    }
+  }
+}

package/dist/scss/type.scss

@@ -0,0 +1,117 @@
+@import 'vars';
+@import 'queries';
+
+/////////////////////////////
+// HEADINGS
+/////////////////////////////
+
+%h1,
+%h2,
+%h3,
+%h4,
+%h5,
+%h6 {
+  font-family: var(--font-body);
+  font-weight: 500;
+}
+
+%jumbo {
+  font-size: base(2.5);
+  line-height: 1;
+  margin: 0 0 base(2);
+}
+
+%h1 {
+  margin: 0 0 base(1);
+  font-size: base(2);
+  line-height: 1.15;
+  letter-spacing: -1px;
+
+  @include small-break {
+    letter-spacing: -0.5px;
+    font-size: base(1.25);
+  }
+}
+
+%h2 {
+  margin: 0 0 base(1);
+  font-size: base(1.25);
+  line-height: 1.15;
+  letter-spacing: -0.5px;
+
+  @include small-break {
+    font-size: base(0.85);
+  }
+}
+
+%h3 {
+  margin: 0 0 base(1);
+  font-size: base(0.925);
+  line-height: 1.25;
+  letter-spacing: -0.5px;
+
+  @include small-break {
+    font-size: base(0.65);
+    line-height: 1.25;
+  }
+}
+
+%h4 {
+  margin: 0 0 $baseline;
+  font-size: base(0.75);
+  line-height: 1.5;
+  letter-spacing: -0.375px;
+}
+
+%h5 {
+  margin: 0;
+  font-size: base(0.5625);
+  line-height: 1.5;
+}
+
+%h6 {
+  margin: 0;
+  font-size: base(0.5);
+  line-height: 1.5;
+}
+
+%small {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.5;
+}
+
+/////////////////////////////
+// TYPE STYLES
+/////////////////////////////
+
+%large-body {
+  font-size: base(0.6);
+  line-height: base(1);
+  letter-spacing: base(0.02);
+
+  @include mid-break {
+    font-size: base(0.7);
+    line-height: base(1);
+  }
+
+  @include small-break {
+    font-size: base(0.55);
+    line-height: base(0.75);
+  }
+}
+
+%body {
+  font-size: $baseline-body-size;
+  line-height: $baseline-px;
+  font-weight: normal;
+}
+
+%code {
+  font-size: base(0.4);
+  color: var(--theme-elevation-400);
+
+  span {
+    color: var(--theme-elevation-800);
+  }
+}

package/dist/scss/vars.scss

@@ -0,0 +1,220 @@
+@use 'sass:math';
+
+/////////////////////////////
+// BREAKPOINTS
+/////////////////////////////
+
+$breakpoint-xs-width: 400px !default;
+$breakpoint-s-width: 768px !default;
+$breakpoint-m-width: 1024px !default;
+$breakpoint-l-width: 1440px !default;
+
+//////////////////////////////
+// BASELINE GRID
+//////////////////////////////
+
+$baseline-px: 25px !default;
+$baseline-body-size: 13px !default;
+$baseline: math.div($baseline-px, $baseline-body-size) + rem;
+
+@function base($multiplier) {
+  @return (math.div($baseline-px, $baseline-body-size) * $multiplier) + rem;
+}
+
+//////////////////////////////
+// FONTS (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
+//////////////////////////////
+
+$font-body: 'Suisse Intl' !default;
+$font-mono: monospace !default;
+
+//////////////////////////////
+// COLORS (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
+//////////////////////////////
+
+$color-dark-gray: #333333 !default;
+$color-gray: #9a9a9a !default;
+$color-light-gray: #dadada !default;
+$color-background-gray: #f3f3f3 !default;
+$color-red: #ff6f76 !default;
+$color-yellow: #fdffa4 !default;
+$color-green: #b2ffd6 !default;
+$color-purple: #f3ddf3 !default;
+
+//////////////////////////////
+// STYLES
+//////////////////////////////
+
+$style-radius-s: 3px !default;
+$style-radius-m: 4px !default;
+$style-radius-l: 9px !default;
+$style-stroke-width: 1px !default;
+
+$style-stroke-width-s: 1px !default;
+$style-stroke-width-m: 2px !default;
+
+//////////////////////////////
+// MISC
+//////////////////////////////
+
+$top-header-offset: calc(var(--base) - 1px);
+$top-header-offset-m: calc(var(--base) * 3);
+$focus-box-shadow: 0 0 0 $style-stroke-width-m var(--theme-success-500);
+
+//////////////////////////////
+// SHADOWS
+//////////////////////////////
+
+@mixin shadow-sm {
+  box-shadow:
+    0 2px 3px 0 rgba(0, 2, 4, 0.05),
+    0 10px 4px -8px rgba(0, 2, 4, 0.02);
+}
+
+@mixin shadow-m {
+  box-shadow:
+    0 0 30px 0 rgb(0 2 4 / 12%),
+    0 30px 25px -8px rgb(0 2 4 / 10%);
+}
+
+@mixin shadow-lg {
+  box-shadow:
+    0 20px 35px -10px rgba(0, 2, 4, 0.2),
+    0 6px 4px -4px rgba(0, 2, 4, 0.02);
+}
+
+@mixin shadow-lg-top {
+  box-shadow:
+    0 -20px 35px -10px rgba(0, 2, 4, 0.2),
+    0 -6px 4px -4px rgba(0, 2, 4, 0.02);
+}
+
+@mixin shadow {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  }
+}
+
+@mixin inputShadowActive {
+  box-shadow:
+    0 2px 3px 0 rgba(0, 2, 4, 0.16),
+    0 6px 4px -4px rgba(0, 2, 4, 0.13);
+}
+
+@mixin inputShadow {
+  @include shadow-sm;
+
+  &:not(:disabled) {
+    &:hover {
+      box-shadow:
+        0 2px 3px 0 rgba(0, 2, 4, 0.13),
+        0 6px 4px -4px rgba(0, 2, 4, 0.1);
+    }
+
+    &:active,
+    &:focus-within,
+    &:focus {
+      @include inputShadowActive;
+    }
+  }
+}
+
+@mixin soft-shadow-bottom {
+  box-shadow: 0 7px 14px 0px rgb(0 0 0 / 5%);
+}
+
+//////////////////////////////
+// STYLE MIXINS
+//////////////////////////////
+
+@mixin blur-bg($color: var(--theme-bg), $opacity: 0.75) {
+  &:before,
+  &:after {
+    content: ' ';
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  &:before {
+    background: $color;
+    opacity: $opacity;
+  }
+
+  &:after {
+    backdrop-filter: blur(8px);
+  }
+}
+
+@mixin blur-bg-light {
+  @include blur-bg(var(--theme-bg), 0.3);
+}
+
+@mixin formInput() {
+  @include inputShadow;
+  font-family: var(--font-body);
+  width: 100%;
+  border: 1px solid var(--theme-elevation-150);
+  background: var(--theme-input-bg);
+  color: var(--theme-elevation-800);
+  border-radius: 0;
+  font-size: 1rem;
+  height: base(2);
+  line-height: base(1);
+  padding: base(0.5) base(0.75);
+  -webkit-appearance: none;
+
+  &[data-rtl='true'] {
+    direction: rtl;
+  }
+
+  &::-webkit-input-placeholder {
+    color: var(--theme-elevation-400);
+    font-weight: normal;
+    font-size: 1rem;
+  }
+
+  &::-moz-placeholder {
+    color: var(--theme-elevation-400);
+    font-weight: normal;
+    font-size: 1rem;
+  }
+
+  &:hover {
+    border-color: var(--theme-elevation-250);
+  }
+
+  &:focus,
+  &:focus-within,
+  &:active {
+    border-color: var(--theme-elevation-400);
+    outline: 0;
+  }
+
+  &:disabled {
+    background: var(--theme-elevation-200);
+    color: var(--theme-elevation-450);
+
+    &:hover {
+      border-color: var(--theme-elevation-150);
+    }
+  }
+}
+
+@mixin lightInputError {
+  background-color: var(--theme-error-50);
+  border: 1px solid var(--theme-error-500);
+}
+
+@mixin darkInputError {
+  background-color: var(--theme-error-100);
+  border: 1px solid var(--theme-error-400);
+
+  &:hover {
+    border-color: var(--theme-error-500);
+  }
+}

package/dist/scss/z-index.scss

@@ -0,0 +1,9 @@
+/////////////////////////////
+// Z-INDEX CHART (DEPRECATED. DO NOT USE. PREFER CSS VARIABLES)
+/////////////////////////////
+
+$z-page: 20;
+$z-page-content: 30;
+$z-nav: 40;
+$z-modal: 50;
+$z-status: 60;

package/dist/templates/Default/NavHamburger/index.d.ts

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

package/dist/templates/Default/NavHamburger/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/templates/Default/NavHamburger/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAGhC,CAAA"}

package/dist/templates/Default/Wrapper/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './index.scss';
+export declare const Wrapper: React.FC<{
+    baseClass?: string;
+    children?: React.ReactNode;
+    className?: string;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/templates/Default/Wrapper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/templates/Default/Wrapper/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAErB,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAaA,CAAA"}

package/dist/templates/Default/Wrapper/index.scss

@@ -0,0 +1,25 @@
+@import '../../../scss/styles.scss';
+
+.template-default {
+  min-height: 100vh;
+  display: grid;
+  position: relative;
+  grid-template-columns: 0 auto;
+  transition: grid-template-columns var(--nav-trans-time) linear;
+  isolation: isolate;
+
+  @media (prefers-reduced-motion) {
+    transition: none;
+  }
+
+  &--nav-open {
+    width: 100%;
+    grid-template-columns: var(--nav-width) auto;
+
+    .template-default {
+      &__nav-overlay {
+        transition: opacity var(--nav-trans-time) linear;
+      }
+    }
+  }
+}

package/dist/templates/Default/index.d.ts

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

package/dist/templates/Default/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/Default/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAQpC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA2C3C,CAAA"}

package/dist/templates/Default/index.scss

@@ -0,0 +1,65 @@
+@import '../../scss/styles.scss';
+
+.template-default {
+  [dir='rtl']
+  &__nav-toggler-wrapper {
+    left: unset;
+    right: 0;
+  }
+
+  &__nav-toggler-wrapper {
+    position: fixed;
+    z-index: var(--z-modal);
+    top: 0;
+    left: 0;
+    height: var(--app-header-height);
+    width: var(--gutter-h);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__wrap {
+    min-width: 0;
+    width: 100%;
+    flex-grow: 1;
+    position: relative;
+    background-color: var(--theme-bg);
+    &:before {
+      content: '';
+      display: block;
+      position: absolute;
+      inset: 0;
+      background-color: inherit;
+      opacity: 0;
+      z-index: var(--z-status);
+      visibility: hidden;
+      transition: all var(--nav-trans-time) linear;
+    }
+  }
+
+  @include mid-break {
+    &__nav-toggler-wrapper {
+      .hamburger {
+        left: unset;
+      }
+    }
+  }
+
+  @include small-break {
+    &__nav-toggler-wrapper {
+      width: unset;
+      justify-content: unset;
+
+      .hamburger {
+        display: none;
+      }
+    }
+
+    .template-default {
+      &__wrap {
+        min-width: 100vw;
+      }
+    }
+  }
+}

package/dist/templates/Default/types.d.ts

@@ -0,0 +1,12 @@
+import type { Permissions, User } from 'payload/auth';
+import type { SanitizedConfig } from 'payload/types';
+import type React from 'react';
+export type Props = {
+    children?: React.ReactNode;
+    className?: string;
+    config: Promise<SanitizedConfig> | SanitizedConfig;
+    i18n: any;
+    permissions: Permissions;
+    user: User;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/templates/Default/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/templates/Default/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AACpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,EAAE,OAAO,CAAC,eAAe,CAAC,GAAG,eAAe,CAAA;IAClD,IAAI,EAAE,GAAG,CAAA;IACT,WAAW,EAAE,WAAW,CAAA;IACxB,IAAI,EAAE,IAAI,CAAA;CACX,CAAA"}

package/dist/templates/Minimal/index.d.ts

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

package/dist/templates/Minimal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/templates/Minimal/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,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAU3C,CAAA"}

package/dist/templates/Minimal/index.scss

@@ -0,0 +1,26 @@
+@import '../../scss/styles';
+
+.template-minimal {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  padding: base(3) $baseline;
+  margin-left: auto;
+  margin-right: auto;
+  min-height: 100%;
+
+  &--width-normal {
+    .template-minimal__wrap {
+      max-width: 500px;
+      width: 100%;
+    }
+  }
+
+  &--width-wide {
+    .template-minimal__wrap {
+      max-width: 1024px;
+      width: 100%;
+    }
+  }
+}

package/dist/templates/Minimal/types.d.ts

@@ -0,0 +1,8 @@
+import type React from 'react';
+export type Props = {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    width?: 'normal' | 'wide';
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/templates/Minimal/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/templates/Minimal/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,KAAK,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;CAC1B,CAAA"}

package/dist/utilities/api.d.ts

@@ -0,0 +1,12 @@
+type GetOptions = RequestInit & {
+    params?: Record<string, unknown>;
+};
+export declare const requests: {
+    delete: (url: string, options?: RequestInit) => Promise<Response>;
+    get: (url: string, options?: GetOptions) => Promise<Response>;
+    patch: (url: string, options?: RequestInit) => Promise<Response>;
+    post: (url: string, options?: RequestInit) => Promise<Response>;
+    put: (url: string, options?: RequestInit) => Promise<Response>;
+};
+export {};
+//# sourceMappingURL=api.d.ts.map

package/dist/utilities/api.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../src/utilities/api.ts"],"names":[],"mappings":"AAEA,KAAK,UAAU,GAAG,WAAW,GAAG;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,QAAQ;kBACL,MAAM,YAAW,WAAW,KAAqB,QAAQ,QAAQ,CAAC;eAerE,MAAM,YAAW,UAAU,KAAqB,QAAQ,QAAQ,CAAC;iBAW/D,MAAM,YAAW,WAAW,KAAqB,QAAQ,QAAQ,CAAC;gBAenE,MAAM,YAAW,WAAW,KAAqB,QAAQ,QAAQ,CAAC;eAenE,MAAM,YAAW,WAAW,KAAqB,QAAQ,QAAQ,CAAC;CAc9E,CAAA"}