@payloadcms/ui 4.0.0-internal.5d5a2b2 → 4.0.0-internal.688c4d0

package/dist/css/colors.css

@@ -35,68 +35,17 @@
     /* 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);
+    /* ——————————————————————————————————————————————
+       Light Theme (default)
 
-    /* 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);
+       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.
+       ————————————————————————————————————————————— */
 
-    /* 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);
-
-    /* Field upload card */
-    --field-color-upload-bg: var(--color-bg-secondary);
-    --field-color-upload-border: var(--color-border);
-  }
-
-  /* ——————————————————————————————————————————————
-     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.
-     ————————————————————————————————————————————— */
-
-  :root {
     /* Background */
     --color-bg-assistive: var(--ramp-pink-500);
     --color-bg-assistive-hover: var(--ramp-pink-600);
@@ -295,6 +244,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
+       ————————————————————————————————————————————— */
   }
 
   /* ——————————————————————————————————————————————
@@ -433,5 +431,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/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/theme.css

@@ -24,5 +24,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

@@ -18,6 +18,11 @@
     border-width: 0;
   }
 
+  .scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-border) transparent;
+  }
+
   /* Global focus ring */
   :focus-visible {
     outline: var(--accessibility-outline);

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-large-font-size);
+    line-height: var(--text-body-large-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-large-font-size);
+    font-weight: var(--text-body-large-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"}

package/dist/elements/APIKeyInput/index.js

@@ -0,0 +1,86 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { EyeIcon } from '../../icons/Eye/index.js';
+import { KeyIcon } from '../../icons/Key/index.js';
+import { CopyToClipboard } from '../CopyToClipboard/index.js';
+import './index.css';
+const baseClass = 'api-key-input';
+/**
+ * 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 const APIKeyInput = t0 => {
+  const $ = _c(9);
+  const {
+    id,
+    "aria-label": t1,
+    highlighted,
+    value
+  } = t0;
+  const ariaLabel = t1 === undefined ? "API Key" : t1;
+  const [showKey, setShowKey] = useState(false);
+  const keyValue = value ?? "";
+  const t2 = highlighted && "highlight";
+  let t3;
+  if ($[0] !== t2) {
+    t3 = [`${baseClass}__control`, t2].filter(Boolean);
+    $[0] = t2;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const t4 = t3.join(" ");
+  let t5;
+  if ($[2] !== ariaLabel || $[3] !== id || $[4] !== keyValue || $[5] !== showKey || $[6] !== t4) {
+    let t6;
+    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+      t6 = () => setShowKey(_temp);
+      $[8] = t6;
+    } else {
+      t6 = $[8];
+    }
+    t5 = _jsxs("div", {
+      className: baseClass,
+      children: [_jsxs("div", {
+        className: t4,
+        children: [_jsx(KeyIcon, {
+          className: `${baseClass}__icon`
+        }), _jsx("input", {
+          "aria-label": ariaLabel,
+          className: `${baseClass}__field`,
+          id,
+          readOnly: true,
+          type: showKey ? "text" : "password",
+          value: keyValue
+        }), _jsx("button", {
+          "aria-label": showKey ? "Hide API key" : "Show API key",
+          className: `${baseClass}__toggle`,
+          onClick: t6,
+          type: "button",
+          children: _jsx(EyeIcon, {
+            active: showKey,
+            size: 24
+          })
+        })]
+      }), _jsx(CopyToClipboard, {
+        value: keyValue
+      })]
+    });
+    $[2] = ariaLabel;
+    $[3] = id;
+    $[4] = keyValue;
+    $[5] = showKey;
+    $[6] = t4;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  return t5;
+};
+function _temp(prev) {
+  return !prev;
+}
+//# sourceMappingURL=index.js.map

package/dist/elements/APIKeyInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useState","EyeIcon","KeyIcon","CopyToClipboard","baseClass","APIKeyInput","t0","$","id","t1","highlighted","value","ariaLabel","undefined","showKey","setShowKey","keyValue","t2","t3","filter","Boolean","t4","join","t5","t6","Symbol","for","_temp","_jsxs","className","children","_jsx","readOnly","type","onClick","active","size","prev"],"sources":["../../../src/elements/APIKeyInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useState } from 'react'\n\nimport { EyeIcon } from '../../icons/Eye/index.js'\nimport { KeyIcon } from '../../icons/Key/index.js'\nimport { CopyToClipboard } from '../CopyToClipboard/index.js'\nimport './index.css'\n\nconst baseClass = 'api-key-input'\n\nexport type APIKeyInputProps = {\n  readonly 'aria-label'?: string\n  readonly highlighted?: boolean\n  readonly id?: string\n  readonly value: null | string | undefined\n}\n\n/**\n * Read-only masked API key field: key icon, value, show/hide toggle, and copy\n * control. Shared by the core auth API-key field and the MCP API-keys collection.\n */\nexport const APIKeyInput: React.FC<APIKeyInputProps> = ({\n  id,\n  'aria-label': ariaLabel = 'API Key',\n  highlighted,\n  value,\n}) => {\n  const [showKey, setShowKey] = useState(false)\n  const keyValue = value ?? ''\n\n  return (\n    <div className={baseClass}>\n      <div\n        className={[`${baseClass}__control`, highlighted && 'highlight'].filter(Boolean).join(' ')}\n      >\n        <KeyIcon className={`${baseClass}__icon`} />\n        <input\n          aria-label={ariaLabel}\n          className={`${baseClass}__field`}\n          id={id}\n          readOnly\n          type={showKey ? 'text' : 'password'}\n          value={keyValue}\n        />\n        <button\n          aria-label={showKey ? 'Hide API key' : 'Show API key'}\n          className={`${baseClass}__toggle`}\n          onClick={() => setShowKey((prev) => !prev)}\n          type=\"button\"\n        >\n          <EyeIcon active={showKey} size={24} />\n        </button>\n      </div>\n      <CopyToClipboard value={keyValue} />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,OAAO,QAAQ;AACxB,SAASC,OAAO,QAAQ;AACxB,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AASlB;;;;AAIA,OAAO,MAAMC,WAAA,GAA0CC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,EAAA;IAAA,cAAAC,EAAA;IAAAC,WAAA;IAAAC;EAAA,IAAAL,EAKvD;EAHe,MAAAM,SAAA,GAAAH,EAAqB,KAAAI,SAAA,GAAT,SAAS,GAArBJ,EAAqB;EAInC,OAAAK,OAAA,EAAAC,UAAA,IAA8Bf,QAAA,MAAS;EACvC,MAAAgB,QAAA,GAAiBL,KAAA,IAAS;EAKiB,MAAAM,EAAA,GAAAP,WAAA,IAAe;EAAA,IAAAQ,EAAA;EAAA,IAAAX,CAAA,QAAAU,EAAA;IAAzCC,EAAA,IAAC,GAAAd,SAAA,WAAuB,EAAEa,EAAe,EAAAE,MAAA,CAAAC,OAAoB;IAAAb,CAAA,MAAAU,EAAA;IAAAV,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EAA7D,MAAAc,EAAA,GAAAH,EAA6D,CAAAI,IAAA,CAAc;EAAA,IAAAC,EAAA;EAAA,IAAAhB,CAAA,QAAAK,SAAA,IAAAL,CAAA,QAAAC,EAAA,IAAAD,CAAA,QAAAS,QAAA,IAAAT,CAAA,QAAAO,OAAA,IAAAP,CAAA,QAAAc,EAAA;IAAA,IAAAG,EAAA;IAAA,IAAAjB,CAAA,QAAAkB,MAAA,CAAAC,GAAA;MAc3EF,EAAA,GAAAA,CAAA,KAAMT,UAAA,CAAAY,KAAsB;MAAApB,CAAA,MAAAiB,EAAA;IAAA;MAAAA,EAAA,GAAAjB,CAAA;IAAA;IAhB3CgB,EAAA,GAAAK,KAAA,CAAC;MAAAC,SAAA,EAAAzB,SAAA;MAAA0B,QAAA,GACCF,KAAA,CAAC;QAAAC,SAAA,EACYR,EAA2E;QAAAS,QAAA,GAEtFC,IAAA,CAAA7B,OAAA;UAAA2B,SAAA,EAAoB,GAAAzB,SAAA;QAAoB,C,GACxC2B,IAAA,CAAC;UAAA,cACanB,SAAA;UAAAiB,SAAA,EACD,GAAAzB,SAAA,SAAqB;UAAAI,EAAA;UAAAwB,QAAA;UAAAC,IAAA,EAG1BnB,OAAA,GAAU,SAAS;UAAAH,KAAA,EAClBK;QAAA,C,GAETe,IAAA,CAAC;UAAA,cACajB,OAAA,GAAU,iBAAiB;UAAAe,SAAA,EAC5B,GAAAzB,SAAA,UAAsB;UAAA8B,OAAA,EACxBV,EAA4B;UAAAS,IAAA,EAChC;UAAAH,QAAA,EAELC,IAAA,CAAA9B,OAAA;YAAAkC,MAAA,EAAiBrB,OAAA;YAAAsB,IAAA;UAAA,C;;UAGrBL,IAAA,CAAA5B,eAAA;QAAAQ,KAAA,EAAwBK;MAAA,C;;;;;;;;;;;SAtB1BO,E;CAyBJ;AAnCuD,SAAAI,MAAAU,IAAA;EAAA,QA0BRA,IAAA;AAAA","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/AddNewRelation/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqD,MAAM,OAAO,CAAA;AAGzE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAUvC,OAAO,aAAa,CAAA;AAKpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkM1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/AddNewRelation/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAqD,MAAM,OAAO,CAAA;AAGzE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAUvC,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAqL1C,CAAA"}