@payloadcms/ui 3.91.0-internal.c1569dc → 4.0.0-beta.1

package/dist/elements/Popup/PopupButtonList/index.css

@@ -0,0 +1,196 @@
+@layer payload-default {
+  .popup-button-list {
+    display: flex;
+    flex-direction: column;
+    padding: 0 var(--spacer-2);
+    text-align: left;
+  }
+
+  .popup-button-list > .popup {
+    align-self: stretch;
+  }
+
+  .popup-button-list > .popup-divider:first-child {
+    display: none;
+  }
+
+  [dir='rtl'] .popup-button-list__text-align--left {
+    text-align: right;
+  }
+
+  .popup-button-list__text-align--left {
+    text-align: left;
+  }
+
+  .popup-button-list__text-align--center {
+    text-align: center;
+  }
+
+  [dir='rtl'] .popup-button-list__text-align--right {
+    text-align: left;
+  }
+
+  .popup-button-list__text-align--right {
+    text-align: right;
+  }
+
+  .popup-button-list__button {
+    cursor: pointer;
+    text-align: inherit;
+    text-decoration: none;
+    white-space: nowrap;
+    border-radius: var(--popup-item-radius);
+    display: flex;
+    align-items: stretch;
+    flex: 1;
+    width: 100%;
+    color: var(--popup-item-color, var(--color-text));
+    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);
+  }
+
+  .popup-button-list__label {
+    display: flex;
+    align-items: center;
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+    line-height: var(--text-body-medium-line-height);
+    padding: var(--spacer-1) var(--spacer-2);
+  }
+
+  .popup-button-list__button:focus-visible {
+    outline: var(--accessibility-outline);
+    outline-offset: -1px;
+    border-radius: var(--popup-item-radius);
+  }
+  .popup-button-list__button:hover {
+    outline: none;
+    background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
+    color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
+  }
+
+  .popup__content[role='menu']:has(
+      > .popup__scroll-container
+        > .popup-button-list
+        > .popup
+        > .popup__trigger-wrap
+        [aria-expanded='true']
+    )
+    > .popup__scroll-container
+    > .popup-button-list
+    > .popup-button-list__button:not(.popup-button-list__button--selected):hover {
+    background-color: transparent;
+    color: var(--popup-item-color, var(--color-text));
+  }
+
+  .popup-button-list__disabled {
+    cursor: not-allowed;
+    color: var(--color-text-disabled);
+  }
+
+  .popup-button-list__disabled:hover,
+  .popup-button-list__disabled:focus-visible,
+  .popup-button-list__disabled:focus-within {
+    background-color: transparent;
+    color: var(--color-text-disabled);
+  }
+
+  .popup-button-list__button--selected {
+    background-color: var(--popup-item-bg-selected, var(--color-bg-selected));
+    color: var(--popup-item-color-selected, var(--popup-item-color, var(--color-text)));
+  }
+
+  .popup-button-list__button--selected:hover {
+    background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
+    color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
+  }
+
+  /* Hide icon element by default (outside RadioGroup/MenuItem) */
+  .popup-button-list__icon {
+    display: none;
+    flex-shrink: 0;
+  }
+
+  .popup-button-list__submenu-icon {
+    flex-shrink: 0;
+  }
+
+  /* RadioGroup - selected items show only the checkmark, no background fill */
+  .popup-button-list--with-icons .popup-button-list__button--selected {
+    background-color: transparent;
+    color: var(--popup-item-color, var(--color-text));
+  }
+
+  .popup-button-list--with-icons .popup-button-list__button--selected:hover {
+    background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
+    color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
+  }
+
+  /* RadioGroup - for radio-style selection rows with 16px icons */
+  .popup-button-list--with-icons .popup-button-list__button {
+    padding-right: var(--spacer-2);
+  }
+
+  .popup-button-list--with-icons .popup-button-list__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(var(--spacer-3) + var(--spacer-1));
+    padding: var(--spacer-1) 0 var(--spacer-1) var(--spacer-1);
+  }
+
+  .popup-button-list--with-icons .popup-button-list__label {
+    padding: var(--spacer-1) 0 var(--spacer-1) var(--spacer-1);
+  }
+
+  /* MenuItem - for action menu items with 16px icons (default) */
+  .popup-button-list--with-actions .popup-button-list__button {
+    padding-right: var(--spacer-2);
+    align-items: center;
+  }
+
+  .popup-button-list--with-actions .popup-button-list__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(var(--spacer-3) + var(--spacer-1));
+    padding: var(--spacer-1) 0 var(--spacer-1) var(--spacer-1);
+  }
+
+  .popup-button-list--with-actions .popup-button-list__label {
+    padding: var(--spacer-1) 0 var(--spacer-1) var(--spacer-1);
+  }
+
+  .popup-button-list--large .popup-button-list__icon {
+    width: auto;
+    padding: 0 0 0 var(--spacer-1);
+  }
+
+  /* Submenu trigger buttons: icon on left, label in middle, chevron pushed right */
+  .popup-button-list__button--submenu-trigger {
+    align-items: center;
+  }
+
+  .popup-button-list__button--submenu-trigger:hover,
+  .popup-button-list__button--submenu-trigger.popup-button-list__button--selected,
+  .popup-button-list__button--submenu-trigger.popup-button-list__button--selected:hover {
+    background-color: var(--popup-item-bg-hover, var(--color-bg-brand));
+    color: var(--popup-item-color-hover, var(--color-text-onbrand));
+  }
+
+  .popup-button-list__submenu-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-inline-start: var(--spacer-1);
+  }
+
+  .popup-button-list__chevron {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+  }
+}

package/dist/elements/Popup/PopupButtonList/index.d.ts

@@ -1,22 +1,55 @@
-import type { LinkProps } from 'next/link.js';
+import type { LinkAdapterProps } from 'payload';
 import * as React from 'react';
-import './index.scss';
+import './index.css';
 export { PopupListDivider as Divider } from '../PopupDivider/index.js';
 export { PopupListGroupLabel as GroupLabel } from '../PopupGroupLabel/index.js';
+export { SubmenuTrigger } from './SubmenuTrigger/index.js';
 export declare const ButtonGroup: React.FC<{
-    buttonSize?: 'default' | 'small';
+    buttonSize?: 'default' | 'medium';
     children: React.ReactNode;
     className?: string;
     textAlign?: 'center' | 'left' | 'right';
 }>;
+/**
+ * A ButtonGroup variant for action menu items.
+ * @param size - 'large' for 24px icons (default), 'small' for 16px icons
+ */
+export declare const MenuItem: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+    size?: 'large' | 'small';
+}>;
+/**
+ * A ButtonGroup variant for radio-style selection items.
+ * Uses 16px icons with padding on label - ideal for checkbox/selection rows.
+ */
+export declare const RadioGroup: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+}>;
+export declare const CheckboxGroup: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+}>;
 type MenuButtonProps = {
     active?: boolean;
+    ariaChecked?: boolean;
+    ariaCurrent?: React.AriaAttributes['aria-current'];
     children: React.ReactNode;
     className?: string;
     disabled?: boolean;
-    href?: LinkProps['href'];
+    href?: LinkAdapterProps['href'];
+    icon?: React.ReactNode;
     id?: string;
     onClick?: (e?: React.MouseEvent) => void;
+    role?: 'menuitem' | 'menuitemcheckbox' | 'menuitemradio';
 };
 export declare const Button: React.FC<MenuButtonProps>;
+/**
+ * A Button variant for use within RadioGroup.
+ * Automatically shows a checkmark icon when active.
+ */
+export declare const RadioGroupItem: React.FC<Omit<MenuButtonProps, 'icon'>>;
+/** A Button variant for independently selectable items within CheckboxGroup. */
+export declare const CheckboxGroupItem: React.FC<Omit<MenuButtonProps, 'icon'>>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/Popup/PopupButtonList/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupButtonList/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,cAAc,CAAA;AAIrB,OAAO,EAAE,gBAAgB,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAE,mBAAmB,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAE/E,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,UAAU,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;CACxC,CAUA,CAAA;AAED,KAAK,eAAe,GAAG;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;IACxB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CACzC,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA4D5C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupButtonList/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,aAAa,CAAA;AAcpB,OAAO,EAAE,gBAAgB,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAE,mBAAmB,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAC/E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE1D,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;CACxC,CAUA,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CACzB,CAUA,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAOA,CAAA;AAED,eAAO,MAAM,aAAa;cAXd,KAAK,CAAC,SAAS;gBACb,MAAM;EAUmB,CAAA;AAEvC,KAAK,eAAe,GAAG;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAA;IAClD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;IACxC,IAAI,CAAC,EAAE,UAAU,GAAG,kBAAkB,GAAG,eAAe,CAAA;CACzD,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA6F5C,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,CAYlE,CAAA;AAED,gFAAgF;AAChF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,CAYrE,CAAA"}

package/dist/elements/Popup/PopupButtonList/index.js

@@ -1,12 +1,23 @@
 'use client';
 
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
+import { CheckIcon } from '../../../icons/Check/index.js';
 import { Link } from '../../Link/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'popup-button-list';
+const Group = ({
+  children,
+  className,
+  role
+}) => /*#__PURE__*/_jsx("div", {
+  className: className,
+  role: role,
+  children: children
+});
 export { PopupListDivider as Divider } from '../PopupDivider/index.js';
 export { PopupListGroupLabel as GroupLabel } from '../PopupGroupLabel/index.js';
+export { SubmenuTrigger } from './SubmenuTrigger/index.js';
 export const ButtonGroup = ({
   buttonSize = 'default',
   children,
@@ -14,24 +25,66 @@ export const ButtonGroup = ({
   textAlign = 'left'
 }) => {
   const classes = [baseClass, className, `${baseClass}__text-align--${textAlign}`, `${baseClass}__button-size--${buttonSize}`].filter(Boolean).join(' ');
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Group, {
     className: classes,
     children: children
   });
 };
+/**
+ * A ButtonGroup variant for action menu items.
+ * @param size - 'large' for 24px icons (default), 'small' for 16px icons
+ */
+export const MenuItem = ({
+  children,
+  className,
+  size = 'large'
+}) => {
+  const classes = [baseClass, className, `${baseClass}--with-actions`, size === 'large' && `${baseClass}--large`].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsx(Group, {
+    className: classes,
+    children: children
+  });
+};
+/**
+ * A ButtonGroup variant for radio-style selection items.
+ * Uses 16px icons with padding on label - ideal for checkbox/selection rows.
+ */
+export const RadioGroup = ({
+  children,
+  className
+}) => {
+  const classes = [baseClass, className, `${baseClass}--with-icons`].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsx(Group, {
+    className: classes,
+    role: "group",
+    children: children
+  });
+};
+export const CheckboxGroup = RadioGroup;
 export const Button = ({
   id,
   active,
+  ariaChecked,
+  ariaCurrent,
   children,
   className,
   disabled,
   href,
-  onClick
+  icon,
+  onClick,
+  role
 }) => {
   const classes = [`${baseClass}__button`, disabled && `${baseClass}__disabled`, active && `${baseClass}__button--selected`, className].filter(Boolean).join(' ');
+  // Always render icon element - CSS hides it outside RadioGroup/MenuItem
+  const iconElement = /*#__PURE__*/_jsx("span", {
+    className: `${baseClass}__icon`,
+    children: icon
+  });
   if (!disabled) {
     if (href) {
-      return /*#__PURE__*/_jsx(Link, {
+      return /*#__PURE__*/_jsxs(Link, {
+        "aria-checked": ariaChecked,
+        "aria-current": ariaCurrent,
         className: classes,
         href: href,
         id: id,
@@ -41,11 +94,18 @@ export const Button = ({
           }
         },
         prefetch: false,
-        children: children
+        role: role ?? 'menuitem',
+        tabIndex: -1,
+        children: [iconElement, /*#__PURE__*/_jsx("span", {
+          className: `${baseClass}__label`,
+          children: children
+        })]
       });
     }
     if (onClick) {
-      return /*#__PURE__*/_jsx("button", {
+      return /*#__PURE__*/_jsxs("button", {
+        "aria-checked": ariaChecked,
+        "aria-current": ariaCurrent,
         className: classes,
         id: id,
         onClick: e => {
@@ -53,15 +113,62 @@ export const Button = ({
             onClick(e);
           }
         },
+        role: role ?? 'menuitem',
+        tabIndex: -1,
         type: "button",
-        children: children
+        children: [iconElement, /*#__PURE__*/_jsx("span", {
+          className: `${baseClass}__label`,
+          children: children
+        })]
       });
     }
   }
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsxs("button", {
+    "aria-current": ariaCurrent,
+    "aria-disabled": "true",
     className: classes,
+    "data-popup-prevent-close": true,
     id: id,
-    children: children
+    onClick: event => event.preventDefault(),
+    onKeyDown: event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+      }
+    },
+    role: role ?? 'menuitem',
+    tabIndex: -1,
+    type: "button",
+    children: [iconElement, /*#__PURE__*/_jsx("span", {
+      className: `${baseClass}__label`,
+      children: children
+    })]
+  });
+};
+/**
+ * A Button variant for use within RadioGroup.
+ * Automatically shows a checkmark icon when active.
+ */
+export const RadioGroupItem = props => {
+  return /*#__PURE__*/_jsx(Button, {
+    ...props,
+    ariaChecked: Boolean(props.active),
+    className: [`${baseClass}__button--radio-group-item`, props.className].filter(Boolean).join(' '),
+    icon: props.active ? /*#__PURE__*/_jsx(CheckIcon, {
+      size: 16
+    }) : undefined,
+    role: "menuitemradio"
+  });
+};
+/** A Button variant for independently selectable items within CheckboxGroup. */
+export const CheckboxGroupItem = props => {
+  return /*#__PURE__*/_jsx(Button, {
+    ...props,
+    ariaChecked: Boolean(props.active),
+    className: [`${baseClass}__button--radio-group-item`, props.className].filter(Boolean).join(' '),
+    icon: props.active ? /*#__PURE__*/_jsx(CheckIcon, {
+      size: 16
+    }) : undefined,
+    role: "menuitemcheckbox"
   });
 };
 //# sourceMappingURL=index.js.map

package/dist/elements/Popup/PopupButtonList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","Link","baseClass","PopupListDivider","Divider","PopupListGroupLabel","GroupLabel","ButtonGroup","buttonSize","children","className","textAlign","classes","filter","Boolean","join","_jsx","Button","id","active","disabled","href","onClick","e","prefetch","type"],"sources":["../../../../src/elements/Popup/PopupButtonList/index.tsx"],"sourcesContent":["'use client'\nimport type { LinkProps } from 'next/link.js'\n\nimport * as React from 'react'\n\nimport { Link } from '../../Link/index.js'\nimport './index.scss'\n\nconst baseClass = 'popup-button-list'\n\nexport { PopupListDivider as Divider } from '../PopupDivider/index.js'\nexport { PopupListGroupLabel as GroupLabel } from '../PopupGroupLabel/index.js'\n\nexport const ButtonGroup: React.FC<{\n  buttonSize?: 'default' | 'small'\n  children: React.ReactNode\n  className?: string\n  textAlign?: 'center' | 'left' | 'right'\n}> = ({ buttonSize = 'default', children, className, textAlign = 'left' }) => {\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}__text-align--${textAlign}`,\n    `${baseClass}__button-size--${buttonSize}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n  return <div className={classes}>{children}</div>\n}\n\ntype MenuButtonProps = {\n  active?: boolean\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  href?: LinkProps['href']\n  id?: string\n  onClick?: (e?: React.MouseEvent) => void\n}\n\nexport const Button: React.FC<MenuButtonProps> = ({\n  id,\n  active,\n  children,\n  className,\n  disabled,\n  href,\n  onClick,\n}) => {\n  const classes = [\n    `${baseClass}__button`,\n    disabled && `${baseClass}__disabled`,\n    active && `${baseClass}__button--selected`,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  if (!disabled) {\n    if (href) {\n      return (\n        <Link\n          className={classes}\n          href={href}\n          id={id}\n          onClick={(e) => {\n            if (onClick) {\n              onClick(e)\n            }\n          }}\n          prefetch={false}\n        >\n          {children}\n        </Link>\n      )\n    }\n\n    if (onClick) {\n      return (\n        <button\n          className={classes}\n          id={id}\n          onClick={(e) => {\n            if (onClick) {\n              onClick(e)\n            }\n          }}\n          type=\"button\"\n        >\n          {children}\n        </button>\n      )\n    }\n  }\n\n  return (\n    <div className={classes} id={id}>\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,YAAYA,KAAA,MAAW;AAEvB,SAASC,IAAI,QAAQ;AACrB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,SAASC,gBAAA,IAAoBC,OAAO,QAAQ;AAC5C,SAASC,mBAAA,IAAuBC,UAAU,QAAQ;AAElD,OAAO,MAAMC,WAAA,GAKRA,CAAC;EAAEC,UAAA,GAAa,SAAS;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,SAAA,GAAY;AAAM,CAAE;EACvE,MAAMC,OAAA,GAAU,CACdV,SAAA,EACAQ,SAAA,EACA,GAAGR,SAAA,iBAA0BS,SAAA,EAAW,EACxC,GAAGT,SAAA,kBAA2BM,UAAA,EAAY,CAC3C,CACEK,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EACR,oBAAOC,IAAA,CAAC;IAAIN,SAAA,EAAWE,OAAA;cAAUH;;AACnC;AAYA,OAAO,MAAMQ,MAAA,GAAoCA,CAAC;EAChDC,EAAE;EACFC,MAAM;EACNV,QAAQ;EACRC,SAAS;EACTU,QAAQ;EACRC,IAAI;EACJC;AAAO,CACR;EACC,MAAMV,OAAA,GAAU,CACd,GAAGV,SAAA,UAAmB,EACtBkB,QAAA,IAAY,GAAGlB,SAAA,YAAqB,EACpCiB,MAAA,IAAU,GAAGjB,SAAA,oBAA6B,EAC1CQ,SAAA,CACD,CACEG,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,IAAI,CAACK,QAAA,EAAU;IACb,IAAIC,IAAA,EAAM;MACR,oBACEL,IAAA,CAACf,IAAA;QACCS,SAAA,EAAWE,OAAA;QACXS,IAAA,EAAMA,IAAA;QACNH,EAAA,EAAIA,EAAA;QACJI,OAAA,EAAUC,CAAA;UACR,IAAID,OAAA,EAAS;YACXA,OAAA,CAAQC,CAAA;UACV;QACF;QACAC,QAAA,EAAU;kBAETf;;IAGP;IAEA,IAAIa,OAAA,EAAS;MACX,oBACEN,IAAA,CAAC;QACCN,SAAA,EAAWE,OAAA;QACXM,EAAA,EAAIA,EAAA;QACJI,OAAA,EAAUC,CAAA;UACR,IAAID,OAAA,EAAS;YACXA,OAAA,CAAQC,CAAA;UACV;QACF;QACAE,IAAA,EAAK;kBAEJhB;;IAGP;EACF;EAEA,oBACEO,IAAA,CAAC;IAAIN,SAAA,EAAWE,OAAA;IAASM,EAAA,EAAIA,EAAA;cAC1BT;;AAGP","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","CheckIcon","Link","baseClass","Group","children","className","role","_jsx","PopupListDivider","Divider","PopupListGroupLabel","GroupLabel","SubmenuTrigger","ButtonGroup","buttonSize","textAlign","classes","filter","Boolean","join","MenuItem","size","RadioGroup","CheckboxGroup","Button","id","active","ariaChecked","ariaCurrent","disabled","href","icon","onClick","iconElement","_jsxs","e","prefetch","tabIndex","type","event","preventDefault","onKeyDown","key","RadioGroupItem","props","undefined","CheckboxGroupItem"],"sources":["../../../../src/elements/Popup/PopupButtonList/index.tsx"],"sourcesContent":["'use client'\nimport type { LinkAdapterProps } from 'payload'\n\nimport * as React from 'react'\n\nimport { CheckIcon } from '../../../icons/Check/index.js'\nimport { Link } from '../../Link/index.js'\nimport './index.css'\n\nconst baseClass = 'popup-button-list'\n\nconst Group: React.FC<{\n  children: React.ReactNode\n  className?: string\n  role?: 'group'\n}> = ({ children, className, role }) => (\n  <div className={className} role={role}>\n    {children}\n  </div>\n)\n\nexport { PopupListDivider as Divider } from '../PopupDivider/index.js'\nexport { PopupListGroupLabel as GroupLabel } from '../PopupGroupLabel/index.js'\nexport { SubmenuTrigger } from './SubmenuTrigger/index.js'\n\nexport const ButtonGroup: React.FC<{\n  buttonSize?: 'default' | 'medium'\n  children: React.ReactNode\n  className?: string\n  textAlign?: 'center' | 'left' | 'right'\n}> = ({ buttonSize = 'default', children, className, textAlign = 'left' }) => {\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}__text-align--${textAlign}`,\n    `${baseClass}__button-size--${buttonSize}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n  return <Group className={classes}>{children}</Group>\n}\n\n/**\n * A ButtonGroup variant for action menu items.\n * @param size - 'large' for 24px icons (default), 'small' for 16px icons\n */\nexport const MenuItem: React.FC<{\n  children: React.ReactNode\n  className?: string\n  size?: 'large' | 'small'\n}> = ({ children, className, size = 'large' }) => {\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--with-actions`,\n    size === 'large' && `${baseClass}--large`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n  return <Group className={classes}>{children}</Group>\n}\n\n/**\n * A ButtonGroup variant for radio-style selection items.\n * Uses 16px icons with padding on label - ideal for checkbox/selection rows.\n */\nexport const RadioGroup: React.FC<{\n  children: React.ReactNode\n  className?: string\n}> = ({ children, className }) => {\n  const classes = [baseClass, className, `${baseClass}--with-icons`].filter(Boolean).join(' ')\n  return (\n    <Group className={classes} role=\"group\">\n      {children}\n    </Group>\n  )\n}\n\nexport const CheckboxGroup = RadioGroup\n\ntype MenuButtonProps = {\n  active?: boolean\n  ariaChecked?: boolean\n  ariaCurrent?: React.AriaAttributes['aria-current']\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  href?: LinkAdapterProps['href']\n  icon?: React.ReactNode\n  id?: string\n  onClick?: (e?: React.MouseEvent) => void\n  role?: 'menuitem' | 'menuitemcheckbox' | 'menuitemradio'\n}\n\nexport const Button: React.FC<MenuButtonProps> = ({\n  id,\n  active,\n  ariaChecked,\n  ariaCurrent,\n  children,\n  className,\n  disabled,\n  href,\n  icon,\n  onClick,\n  role,\n}) => {\n  const classes = [\n    `${baseClass}__button`,\n    disabled && `${baseClass}__disabled`,\n    active && `${baseClass}__button--selected`,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  // Always render icon element - CSS hides it outside RadioGroup/MenuItem\n  const iconElement = <span className={`${baseClass}__icon`}>{icon}</span>\n\n  if (!disabled) {\n    if (href) {\n      return (\n        <Link\n          aria-checked={ariaChecked}\n          aria-current={ariaCurrent}\n          className={classes}\n          href={href}\n          id={id}\n          onClick={(e) => {\n            if (onClick) {\n              onClick(e)\n            }\n          }}\n          prefetch={false}\n          role={role ?? 'menuitem'}\n          tabIndex={-1}\n        >\n          {iconElement}\n          <span className={`${baseClass}__label`}>{children}</span>\n        </Link>\n      )\n    }\n\n    if (onClick) {\n      return (\n        <button\n          aria-checked={ariaChecked}\n          aria-current={ariaCurrent}\n          className={classes}\n          id={id}\n          onClick={(e) => {\n            if (onClick) {\n              onClick(e)\n            }\n          }}\n          role={role ?? 'menuitem'}\n          tabIndex={-1}\n          type=\"button\"\n        >\n          {iconElement}\n          <span className={`${baseClass}__label`}>{children}</span>\n        </button>\n      )\n    }\n  }\n\n  return (\n    <button\n      aria-current={ariaCurrent}\n      aria-disabled=\"true\"\n      className={classes}\n      data-popup-prevent-close\n      id={id}\n      onClick={(event) => event.preventDefault()}\n      onKeyDown={(event) => {\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault()\n        }\n      }}\n      role={role ?? 'menuitem'}\n      tabIndex={-1}\n      type=\"button\"\n    >\n      {iconElement}\n      <span className={`${baseClass}__label`}>{children}</span>\n    </button>\n  )\n}\n\n/**\n * A Button variant for use within RadioGroup.\n * Automatically shows a checkmark icon when active.\n */\nexport const RadioGroupItem: React.FC<Omit<MenuButtonProps, 'icon'>> = (props) => {\n  return (\n    <Button\n      {...props}\n      ariaChecked={Boolean(props.active)}\n      className={[`${baseClass}__button--radio-group-item`, props.className]\n        .filter(Boolean)\n        .join(' ')}\n      icon={props.active ? <CheckIcon size={16} /> : undefined}\n      role=\"menuitemradio\"\n    />\n  )\n}\n\n/** A Button variant for independently selectable items within CheckboxGroup. */\nexport const CheckboxGroupItem: React.FC<Omit<MenuButtonProps, 'icon'>> = (props) => {\n  return (\n    <Button\n      {...props}\n      ariaChecked={Boolean(props.active)}\n      className={[`${baseClass}__button--radio-group-item`, props.className]\n        .filter(Boolean)\n        .join(' ')}\n      icon={props.active ? <CheckIcon size={16} /> : undefined}\n      role=\"menuitemcheckbox\"\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Popup/PopupDivider/index.css

@@ -0,0 +1,8 @@
+@layer payload-default {
+  .popup-divider {
+    height: var(--stroke-width-small);
+    background-color: var(--color-border);
+    border: none;
+    margin-block: var(--spacer-2);
+  }
+}

package/dist/elements/Popup/PopupDivider/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const PopupListDivider: React.FC;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/Popup/PopupDivider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupDivider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAEpC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupDivider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAEpC,CAAA"}

package/dist/elements/Popup/PopupDivider/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import './index.scss';
+import './index.css';
 const baseClass = 'popup-divider';
 export const PopupListDivider = () => {
   return /*#__PURE__*/_jsx("hr", {

package/dist/elements/Popup/PopupDivider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","baseClass","PopupListDivider","_jsx","className"],"sources":["../../../../src/elements/Popup/PopupDivider/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'popup-divider'\n\nexport const PopupListDivider: React.FC = () => {\n  return <hr className={baseClass} />\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,gBAAA,GAA6BA,CAAA;EACxC,oBAAOC,IAAA,CAAC;IAAGC,SAAA,EAAWH;;AACxB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","baseClass","PopupListDivider","_jsx","className"],"sources":["../../../../src/elements/Popup/PopupDivider/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'popup-divider'\n\nexport const PopupListDivider: React.FC = () => {\n  return <hr className={baseClass} />\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,gBAAA,GAA6BA,CAAA;EACxC,oBAAOC,IAAA,CAAC;IAAGC,SAAA,EAAWH;;AACxB","ignoreList":[]}

package/dist/elements/Popup/PopupGroupLabel/index.css

@@ -0,0 +1,23 @@
+@layer payload-default {
+  .popup-list-group-label {
+    color: var(--color-text-secondary);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+    line-height: var(--text-body-medium-line-height);
+    padding-block: var(--spacer-1);
+    padding-inline: var(--spacer-3);
+  }
+
+  /* Align the label's text with its sibling button labels, which carry a
+     var(--spacer-1) inset. The icon variants reserve an extra icon-slot
+     inset, so their labels sit one more var(--spacer-1) in. */
+  .popup-button-list .popup-list-group-label {
+    padding-inline-start: var(--spacer-1);
+  }
+
+  .popup-button-list--with-actions .popup-list-group-label,
+  .popup-button-list--with-icons .popup-list-group-label {
+    padding-inline-start: var(--spacer-2);
+  }
+}

package/dist/elements/Popup/PopupGroupLabel/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export declare const PopupListGroupLabel: React.FC<{
     label: string;
 }>;

package/dist/elements/Popup/PopupGroupLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupGroupLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IACzC,KAAK,EAAE,MAAM,CAAA;CACd,CAEA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupGroupLabel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IACzC,KAAK,EAAE,MAAM,CAAA;CACd,CAEA,CAAA"}

package/dist/elements/Popup/PopupGroupLabel/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import './index.scss';
+import './index.css';
 const baseClass = 'popup-list-group-label';
 export const PopupListGroupLabel = ({
   label

package/dist/elements/Popup/PopupGroupLabel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","baseClass","PopupListGroupLabel","label","_jsx","className"],"sources":["../../../../src/elements/Popup/PopupGroupLabel/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'popup-list-group-label'\n\nexport const PopupListGroupLabel: React.FC<{\n  label: string\n}> = ({ label }) => {\n  return <p className={baseClass}>{label}</p>\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,mBAAA,GAERA,CAAC;EAAEC;AAAK,CAAE;EACb,oBAAOC,IAAA,CAAC;IAAEC,SAAA,EAAWJ,SAAA;cAAYE;;AACnC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","baseClass","PopupListGroupLabel","label","_jsx","className"],"sources":["../../../../src/elements/Popup/PopupGroupLabel/index.tsx"],"sourcesContent":["import React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'popup-list-group-label'\n\nexport const PopupListGroupLabel: React.FC<{\n  label: string\n}> = ({ label }) => {\n  return <p className={baseClass}>{label}</p>\n}\n"],"mappings":";AAAA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,mBAAA,GAERA,CAAC;EAAEC;AAAK,CAAE;EACb,oBAAOC,IAAA,CAAC;IAAEC,SAAA,EAAWJ,SAAA;cAAYE;;AACnC","ignoreList":[]}

package/dist/elements/Popup/PopupTrigger/index.css

@@ -0,0 +1,30 @@
+@layer payload-default {
+  .popup-button {
+    height: 100%;
+    color: currentColor;
+    padding: 0;
+    font-size: inherit;
+    line-height: inherit;
+    font-family: inherit;
+    cursor: pointer;
+    display: inline-flex;
+    border-radius: var(--button-radius, 0.3125rem);
+  }
+
+  .popup-button--background {
+    background: transparent;
+  }
+
+  .popup-button:hover:not(.popup-button--disabled) {
+    background: var(--color-bg-transparent-hover);
+  }
+
+  .popup-button:active:not(.popup-button--disabled),
+  .popup-button--active:not(.popup-button--disabled) {
+    background: var(--color-bg-transparent-pressed);
+  }
+
+  .popup-button--disabled {
+    cursor: not-allowed;
+  }
+}

package/dist/elements/Popup/PopupTrigger/index.d.ts

@@ -1,14 +1,30 @@
+import type { AriaAttributes } from 'react';
 import React from 'react';
-import './index.scss';
+import './index.css';
+export type PopupButtonRenderProps = {
+    active: boolean;
+    'aria-controls': AriaAttributes['aria-controls'];
+    'aria-expanded': AriaAttributes['aria-expanded'];
+    'aria-haspopup'?: AriaAttributes['aria-haspopup'];
+    onClick: React.MouseEventHandler;
+    onKeyDown: React.KeyboardEventHandler;
+    role?: 'menuitem';
+    tabIndex?: -1;
+};
 export type PopupTriggerProps = {
     active: boolean;
-    button: React.ReactNode;
-    buttonType: 'custom' | 'default' | 'none';
+    button?: React.ReactNode;
+    buttonAriaLabel?: string;
+    buttonType: 'custom' | 'default';
     className?: string;
+    contentId: string;
     disabled?: boolean;
+    isMenuItem?: boolean;
     noBackground?: boolean;
+    popupType?: AriaAttributes['aria-haspopup'];
+    renderButton?: (props: PopupButtonRenderProps) => React.ReactNode;
     setActive: (active: boolean, viaKeyboard?: boolean) => void;
-    size?: 'large' | 'medium' | 'small' | 'xsmall';
+    size?: 'large' | 'medium';
 };
 export declare const PopupTrigger: React.FC<PopupTriggerProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/Popup/PopupTrigger/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,UAAU,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,WAAW,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3D,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;CAC/C,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuDpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,OAAO,CAAA;IACf,eAAe,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;IAChD,eAAe,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;IAChD,eAAe,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;IACjD,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAChC,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAA;IACrC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAA;CACd,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,EAAE,QAAQ,GAAG,SAAS,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;IAC3C,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAA;IACjE,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,WAAW,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3D,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkJpD,CAAA"}