@payloadcms/ui 4.0.0-internal.a0ef1b8 → 4.0.0-internal.a7ca468

package/LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018-2025 Payload CMS, Inc. <info@payloadcms.com>
+Copyright (c) 2018-2026 Payload CMS, LLC <info@payloadcms.com>
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

package/dist/css/app.css

@@ -0,0 +1,121 @@
+@layer payload-default, payload;
+
+@import '../styles.css';
+
+@layer payload-default {
+  :root {
+    --font-body: var(--font-family-sans), sans-serif;
+    --font-mono: var(--font-family-mono), 'SF Mono', Menlo, Consolas, Monaco, monospace;
+
+    --app-header-height: 0px;
+    --doc-controls-height: 0px;
+    --doc-header-height: 0px;
+    --nav-width: 275px;
+  }
+
+  @media (max-width: 768px) {
+    :root {
+      --nav-width: 100vw;
+    }
+  }
+
+  /* GLOBAL STYLES */
+
+  * {
+    box-sizing: border-box;
+  }
+
+  html {
+    background: var(--color-bg);
+    -webkit-font-smoothing: antialiased;
+
+    &[data-theme='dark'] {
+      color-scheme: dark;
+    }
+  }
+
+  html,
+  body,
+  #app {
+    height: 100%;
+  }
+
+  body {
+    font-family: var(--font-body);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-letter-spacing);
+    color: var(--color-text);
+    margin: 0;
+    /* this is for the nav to be able to push the document over */
+    overflow-x: hidden;
+  }
+
+  /* Lock background scroll while a drawer is open. Backs up faceless-ui's JS
+     body-scroll-lock, which a sibling modal can clear prematurely. */
+  body:has(.drawer--is-open) {
+    overflow: hidden;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  ul,
+  ol {
+    padding-left: 1.53846rem;
+    margin: 0;
+  }
+
+  :focus-visible {
+    outline: var(--accessibility-outline);
+    outline-offset: var(--accessibility-outline-offset);
+    border-radius: var(--radius-medium);
+  }
+
+  a {
+    color: currentColor;
+
+    &:focus {
+      &:not(:focus-visible) {
+        opacity: 0.8;
+      }
+    }
+
+    &:active {
+      opacity: 0.7;
+    }
+  }
+
+  svg {
+    vertical-align: middle;
+  }
+
+  dialog {
+    width: 100%;
+    border: 0;
+    padding: 0;
+    color: currentColor;
+  }
+
+  .payload__modal-item {
+    min-height: 100%;
+    background: transparent;
+  }
+
+  .payload__modal-container--enterDone {
+    overflow: auto;
+  }
+
+  .payload__modal-item--enter,
+  .payload__modal-item--enterDone {
+    z-index: var(--z-modal);
+  }
+}

package/dist/css/colors.css

@@ -35,68 +35,20 @@
     /* Modal */
     --color-modalbackdrop: rgba(0, 0, 0, 0.5);
 
-    /* Field — override these to theme all form fields at once */
-    --field-color-bg: var(--color-bg);
-    --field-color-border: var(--special-border-translucent);
-    --field-color-text: var(--color-text);
-    --field-color-placeholder: var(--color-text-tertiary);
-
-    /* Field hover */
-    --field-color-border-hover: var(--special-border-translucent-strong);
-
-    /* Field focus */
-    --field-color-border-focus: var(--accessibility-focus-color);
-
-    /* Field disabled */
-    --field-color-bg-disabled: transparent;
-    --field-color-border-disabled: var(--color-border);
-    --field-color-text-disabled: var(--color-text-disabled);
-
-    /* Field read-only */
-    --field-color-bg-readonly: var(--color-bg);
-    --field-color-border-readonly: var(--color-border);
-    --field-color-text-readonly: var(--color-text-secondary);
-
-    /* Field error */
-    --field-color-border-error: var(--color-border-danger-strong);
-
-    /* Field label */
-    --field-color-label: var(--color-text);
-    --field-color-label-required: var(--color-text-danger);
-
-    /* Field description */
-    --field-color-description: var(--color-text-secondary);
-
-    /* Field error message */
-    --field-color-error-bg: var(--color-bg-danger);
-    --field-color-error-text: var(--color-text-ondanger);
-
-    /* Field toggle controls (checkbox, radio) */
-    --field-color-toggle-border: var(--color-border-strong);
-    --field-color-toggle-border-hover: var(--color-border-selected-strong);
-    --field-color-toggle-bg-checked: var(--color-bg-brand);
-    --field-color-toggle-border-checked: var(--color-border-selected);
-    --field-color-toggle-icon: var(--color-icon-onbrand);
-    --field-color-toggle-bg-disabled: var(--color-bg-disabled);
-    --field-color-toggle-border-disabled: var(--color-border-disabled);
+    /* Focal point */
+    --color-focal-point-backdrop: var(--ramp-black-500);
 
-    /* Field upload card */
-    --field-color-upload-bg: var(--color-bg-secondary);
-    --field-color-upload-border: var(--color-border);
-  }
+    /* ——————————————————————————————————————————————
+       Light Theme (default)
 
-  /* ——————————————————————————————————————————————
-     Light Theme (default)
-
-     Naming rules (UI3 parity — matches fpl/tokens):
-     - Every semantic color is prefixed with `--color-`.
-     - The `default` category is implicit. `--color-bg-secondary` (not `--color-bg-default-secondary`).
-     - The `default` variant is implicit. `--color-bg` (not `--color-bg-default`); `--color-bg-brand` (not `--color-bg-brand-default`).
-     - `on{X}` is one segment. `--color-text-onbrand`, `--color-icon-ondisabled`.
-     - Palette tokens live in the `--ramp-*` namespace.
-     ————————————————————————————————————————————— */
+       Naming rules (UI3 parity — matches fpl/tokens):
+       - Every semantic color is prefixed with `--color-`.
+       - The `default` category is implicit. `--color-bg-secondary` (not `--color-bg-default-secondary`).
+       - The `default` variant is implicit. `--color-bg` (not `--color-bg-default`); `--color-bg-brand` (not `--color-bg-brand-default`).
+       - `on{X}` is one segment. `--color-text-onbrand`, `--color-icon-ondisabled`.
+       - Palette tokens live in the `--ramp-*` namespace.
+       ————————————————————————————————————————————— */
 
-  :root {
     /* Background */
     --color-bg-assistive: var(--ramp-pink-500);
     --color-bg-assistive-hover: var(--ramp-pink-600);
@@ -295,6 +247,55 @@
     --multiplayer-yellow: var(--special-multiplayer-yellow);
     --multiplayer-green: var(--special-multiplayer-green);
     --multiplayer-grey: var(--special-multiplayer-grey);
+
+    /* ——————————————————————————————————————————————
+       Field Tokens
+       ——————————————————————————————————————————————
+       Override these to retheme all "light" themed
+       form fields at once
+       ————————————————————————————————————————————— */
+
+    --field-color-bg: var(--color-bg);
+    --field-color-border: var(--special-border-translucent);
+    --field-color-text: var(--color-text);
+    --field-color-placeholder: var(--color-text-tertiary);
+
+    --field-color-border-hover: var(--special-border-translucent-strong);
+
+    --field-color-border-focus: var(--accessibility-focus-color);
+
+    --field-color-bg-disabled: transparent;
+    --field-color-border-disabled: var(--color-border);
+    --field-color-text-disabled: var(--color-text-disabled);
+
+    --field-color-bg-readonly: var(--color-bg);
+    --field-color-border-readonly: var(--color-border);
+    --field-color-text-readonly: var(--color-text-secondary);
+
+    --field-color-border-error: var(--color-border-danger-strong);
+
+    --field-color-label: var(--color-text);
+    --field-color-label-required: var(--color-text-danger);
+
+    --field-color-description: var(--color-text-secondary);
+
+    --field-color-error-bg: var(--color-bg-danger);
+    --field-color-error-text: var(--color-text-ondanger);
+
+    --field-color-toggle-border: var(--color-border-strong);
+    --field-color-toggle-border-hover: var(--color-border-selected-strong);
+    --field-color-toggle-bg-checked: var(--color-bg-brand);
+    --field-color-toggle-border-checked: var(--color-border-selected);
+    --field-color-toggle-icon: var(--color-icon-onbrand);
+    --field-color-toggle-bg-disabled: var(--color-bg-disabled);
+    --field-color-toggle-border-disabled: var(--color-border-disabled);
+
+    --field-color-upload-bg: var(--color-bg-secondary);
+    --field-color-upload-border: var(--color-border);
+
+    /* ——————————————————————————————————————————————
+       End Field Tokens
+       ————————————————————————————————————————————— */
   }
 
   /* ——————————————————————————————————————————————
@@ -317,6 +318,9 @@
     --color-bg-component-tertiary: var(--ramp-pale-purple-800);
     --color-bg-component-tertiary-hover: var(--ramp-pale-purple-700);
 
+    --color-bg-danger: var(--ramp-dark-red-500);
+    --color-bg-danger-hover: var(--ramp-dark-red-600);
+    --color-bg-danger-pressed: var(--ramp-dark-red-700);
     --color-bg-danger-tertiary: var(--ramp-pale-red-800);
     --color-bg-danger-tertiary-hover: var(--ramp-pale-red-700);
     --color-bg-danger-tertiary-pressed: var(--ramp-pale-red-600);
@@ -433,5 +437,54 @@
     --special-bg-transparent-secondary-hover: var(--ramp-white-200);
     --special-border-translucent: var(--ramp-white-200);
     --special-border-translucent-strong: var(--ramp-white-300);
+
+    /* ————————————————————————————————————————————————
+       Field Tokens
+       ————————————————————————————————————————————————
+       Override these to retheme all "dark" themed
+       form fields at once
+       ——————————————————————————————————————————————— */
+
+    --field-color-bg: var(--color-bg);
+    --field-color-border: var(--special-border-translucent);
+    --field-color-text: var(--color-text);
+    --field-color-placeholder: var(--color-text-tertiary);
+
+    --field-color-border-hover: var(--special-border-translucent-strong);
+
+    --field-color-border-focus: var(--accessibility-focus-color);
+
+    --field-color-bg-disabled: transparent;
+    --field-color-border-disabled: var(--color-border);
+    --field-color-text-disabled: var(--color-text-disabled);
+
+    --field-color-bg-readonly: var(--color-bg);
+    --field-color-border-readonly: var(--color-border);
+    --field-color-text-readonly: var(--color-text-secondary);
+
+    --field-color-border-error: var(--color-border-danger-strong);
+
+    --field-color-label: var(--color-text);
+    --field-color-label-required: var(--color-text-danger);
+
+    --field-color-description: var(--color-text-secondary);
+
+    --field-color-error-bg: var(--color-bg-danger);
+    --field-color-error-text: var(--color-text-ondanger);
+
+    --field-color-toggle-border: var(--color-border-strong);
+    --field-color-toggle-border-hover: var(--color-border-selected-strong);
+    --field-color-toggle-bg-checked: var(--color-bg-brand);
+    --field-color-toggle-border-checked: var(--color-border-selected);
+    --field-color-toggle-icon: var(--color-icon-onbrand);
+    --field-color-toggle-bg-disabled: var(--color-bg-disabled);
+    --field-color-toggle-border-disabled: var(--color-border-disabled);
+
+    --field-color-upload-bg: var(--color-bg-secondary);
+    --field-color-upload-border: var(--color-border);
+
+    /* ——————————————————————————————————————————————
+       End Field Tokens
+       ————————————————————————————————————————————— */
   }
 }

package/dist/css/design-tokens.css

@@ -88,6 +88,11 @@
     --ramp-red-900: #771208;
     --ramp-red-1000: #660e0b;
 
+    /* Dark Red */
+    --ramp-dark-red-500: #e03e1a;
+    --ramp-dark-red-600: #c4381c;
+    --ramp-dark-red-700: #963323;
+
     /* Pale Red */
     --ramp-pale-red-600: #a55440;
     --ramp-pale-red-700: #864537;

package/dist/css/elevations.css

@@ -2,6 +2,8 @@
   :root {
     /* Light mode elevations */
 
+    --elevation-100-canvas: 0 0 0.5px 0 rgba(0, 0, 0, 0.3);
+
     --elevation-300-tooltip:
       0 0 0.5px 0 rgba(0, 0, 0, 0.15), 0 5px 12px 0 rgba(0, 0, 0, 0.13),
       0 1px 3px 0 rgba(0, 0, 0, 0.1);
@@ -18,6 +20,8 @@
   [data-theme='dark'] {
     /* Dark mode elevations */
 
+    --elevation-100-canvas: 0 0 0.5px 0 rgba(0, 0, 0, 0.5);
+
     --elevation-300-tooltip:
       0 0.5px 0 0 rgba(255, 255, 255, 0.08) inset, 0 5px 12px 0 rgba(0, 0, 0, 0.35),
       0 0 0.5px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 3px 0 rgba(0, 0, 0, 0.5);

package/dist/css/forms.css

@@ -1,7 +1,7 @@
 @layer payload-default {
   .form-input {
     width: 100%;
-    min-height: var(--field-min-height);
+    min-height: var(--field-min-height-large);
     background: var(--field-color-bg);
     border: var(--stroke-width-small) solid var(--field-color-border);
     border-radius: var(--field-border-radius);
@@ -13,9 +13,6 @@
     padding: 0 var(--field-padding-inline);
     appearance: none;
     -webkit-appearance: none;
-    transition-property: box-shadow, background-color;
-    transition-duration: 100ms;
-    transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
     outline: none;
 
     &[data-rtl='true'] {
@@ -69,10 +66,7 @@
     background: var(--field-color-bg);
     border: var(--stroke-width-small) solid var(--field-color-border);
     border-radius: var(--field-border-radius);
-    min-height: var(--field-min-height);
-    transition-property: box-shadow, background-color;
-    transition-duration: 100ms;
-    transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
+    min-height: var(--field-min-height-large);
 
     &:where(:hover:not(:focus-within):not(:has(input:disabled)):not(:has(input:read-only))) {
       border-color: var(--field-color-border-hover);
@@ -91,7 +85,6 @@
 
     input.form-input {
       flex: 1 1 0%;
-      width: 0;
       min-width: 0;
       background: transparent;
       border: none;
@@ -112,4 +105,8 @@
       border-color: var(--field-color-border-focus);
     }
   }
+
+  .field-type[data-size='medium'] {
+    --field-min-height-large: var(--field-min-height-medium);
+  }
 }

package/dist/css/radius.css

@@ -2,11 +2,9 @@
   :root {
     --radius-none: 0;
     --radius-small: 0.125rem;
+    --radius-chip: 0.1875rem;
     --radius-medium: 0.3125rem;
     --radius-large: 0.8125rem;
     --radius-full: 9999px;
-
-    --stroke-width-small: 1px;
-    --stroke-width-medium: 2px;
   }
 }

package/dist/css/spacing.css

@@ -2,6 +2,7 @@
   :root {
     --spacer-0: 0;
     --spacer-1: 0.25rem; /** 4px */
+    --spacer-1-5: 0.375rem; /** 6px */
     --spacer-2: 0.5rem; /** 8px */
     --spacer-2-5: 0.75rem; /** 12px */
     --spacer-3: 1rem; /** 16px */
@@ -15,19 +16,26 @@
     --spacing-view-bottom: var(--gutter-h);
 
     /* Breakpoints */
-    --breakpoint-m-width: 1024px;
+    --breakpoint-xs-width: 400px;
     --breakpoint-s-width: 768px;
+    --breakpoint-m-width: 1024px;
+    --breakpoint-l-width: 1440px;
   }
 
-  @media (max-width: 1024px) {
+  @media (max-width: 1440px) {
     :root {
       --gutter-h: var(--spacer-4);
     }
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 1024px) {
     :root {
       --gutter-h: var(--spacer-3);
+    }
+  }
+
+  @media (max-width: 768px) {
+    :root {
       --spacing-field: var(--spacer-2-5);
       --spacing-view-bottom: var(--spacer-6);
     }

package/dist/css/theme.css

@@ -10,7 +10,8 @@
 @layer payload-default {
   :root {
     /* Fields — controls text inputs, selects, date pickers, code editors, etc. */
-    --field-min-height: var(--spacer-5);
+    --field-min-height-large: var(--spacer-5);
+    --field-min-height-medium: var(--spacer-4);
     --field-padding-inline: var(--spacer-2);
     --field-border-radius: var(--radius-medium);
 
@@ -24,5 +25,9 @@
     /* Popup menus */
     --popup-radius: var(--radius-large);
     --popup-item-radius: var(--button-radius);
+
+    /* Stroke widths */
+    --stroke-width-small: 1px;
+    --stroke-width-medium: 2px;
   }
 }

package/dist/css/utilities.css

@@ -1,8 +1,9 @@
 @layer payload-default {
   :root {
     --accessibility-focus-color: var(--color-border-selected);
-    --accessibility-outline: 1px solid var(--accessibility-focus-color);
+    --accessibility-outline: var(--stroke-width-small) solid var(--accessibility-focus-color);
     --accessibility-outline-offset: 1px;
+    --scrollbar-color: var(--color-bg-secondary-pressed);
   }
 
   /* Screen reader only */
@@ -18,6 +19,11 @@
     border-width: 0;
   }
 
+  .scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-color) transparent;
+  }
+
   /* Global focus ring */
   :focus-visible {
     outline: var(--accessibility-outline);

package/dist/css/z-index.css

@@ -0,0 +1,10 @@
+@layer payload-default {
+  :root {
+    /* --z-popup needs to be higher than --z-modal to ensure the popup is displayed when modal is open */
+    --z-popup: 60;
+    --z-nav: 20;
+    --z-modal: 30;
+    --z-status: 40;
+    --z-portal-element: 9999;
+  }
+}

package/dist/elements/APIKeyInput/index.css

@@ -0,0 +1,92 @@
+@layer payload-default {
+  .api-key-input {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+    width: 100%;
+  }
+
+  .api-key-input__control {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    gap: var(--spacer-2);
+    min-width: 0;
+    min-height: var(--spacer-5);
+    padding: 0 var(--spacer-2);
+    background: var(--color-bg-secondary);
+    border: var(--stroke-width-small) solid transparent;
+    border-radius: var(--radius-medium);
+  }
+
+  .api-key-input__icon {
+    flex-shrink: 0;
+    width: var(--spacer-4);
+    height: var(--spacer-4);
+    color: var(--color-icon-secondary);
+  }
+
+  .api-key-input__field {
+    flex-grow: 1;
+    min-width: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    outline: none;
+    color: var(--color-text);
+    font-family: var(--font-family-mono);
+    font-size: var(--text-body-medium-font-size);
+    line-height: var(--text-body-medium-line-height);
+  }
+
+  .api-key-input__field:focus,
+  .api-key-input__field:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .api-key-input__field[type='password'] {
+    font-family: var(--font-family-sans);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
+    letter-spacing: 0.025rem;
+  }
+
+  .api-key-input__toggle {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    appearance: none;
+    width: var(--spacer-4);
+    height: var(--spacer-4);
+    padding: 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--color-icon-secondary);
+  }
+
+  .api-key-input__toggle:hover {
+    color: var(--color-icon);
+  }
+
+  .api-key-input .copy-to-clipboard {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--spacer-5);
+    min-height: var(--spacer-5);
+    padding: 0;
+    color: var(--color-icon-secondary);
+    background: var(--color-bg-secondary);
+    border: var(--stroke-width-small) solid transparent;
+    border-radius: var(--radius-medium);
+  }
+
+  .api-key-input .copy-to-clipboard:hover {
+    color: var(--color-icon);
+    background: var(--color-bg-hover);
+  }
+}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import './index.css';
+export type APIKeyInputProps = {
+    readonly 'aria-label'?: string;
+    readonly highlighted?: boolean;
+    readonly id?: string;
+    readonly value: null | string | undefined;
+};
+/**
+ * Read-only masked API key field: key icon, value, show/hide toggle, and copy
+ * control. Shared by the core auth API-key field and the MCP API-keys collection.
+ */
+export declare const APIKeyInput: React.FC<APIKeyInputProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/APIKeyInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;CAC1C,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmClD,CAAA"}