@protonradio/proton-ui 0.11.8 → 0.11.10-beta.1

package/dist/components/Menu/MenuTrigger.es.js

@@ -0,0 +1,97 @@
+import { j as e } from "../../node_modules/react/jsx-runtime.es.js";
+import { useMemo as A, useRef as B, useEffect as E } from "react";
+import { Button as I } from "../../node_modules/react-aria-components/dist/Button.es.js";
+import { useBreakpoint as O } from "../../hooks/useBreakpoint.es.js";
+import { ActionMenu as P } from "../ActionMenu/ActionMenu.es.js";
+/* empty css                   */
+import { useMenuTrigger as R } from "../../node_modules/@react-aria/menu/dist/useMenuTrigger.es.js";
+import { useMenuTriggerState as S } from "../../node_modules/@react-stately/menu/dist/useMenuTriggerState.es.js";
+import { PopoverMenu as w } from "./PopoverMenu.es.js";
+import { csx as k } from "../../utils/string.es.js";
+import { BREAKPOINTS as z } from "../../constants/breakpoint.es.js";
+function V({
+  renderTrigger: t,
+  size: j = 24,
+  title: p,
+  items: u,
+  disabled: f,
+  onClose: o,
+  triggerTestId: T = "MenuTrigger-Trigger",
+  menuTestId: $,
+  onSelectionChange: n,
+  selectedKey: c,
+  disabledKeys: a
+}) {
+  const g = A(
+    () => u.map((i) => ({ ...i, id: i.key })),
+    [u]
+  ), d = O(z.SMALL), x = S({}), { isOpen: r, setOpen: m } = x, s = B(null), { menuTriggerProps: h, menuProps: N } = R(
+    {},
+    x,
+    s
+  );
+  function M(i) {
+    const l = Array.from(i)[0];
+    l && (n == null || n(l));
+  }
+  const b = /* @__PURE__ */ e.jsx(
+    I,
+    {
+      ...h,
+      "data-testid": T,
+      isDisabled: f,
+      className: k("proton-MenuTrigger__button"),
+      ref: s,
+      children: /* @__PURE__ */ e.jsx(L, { size: j })
+    }
+  ), v = t ? t({
+    isOpen: r,
+    setIsOpen: m,
+    disabled: f,
+    triggerRef: s
+  }) : b;
+  return E(() => () => {
+    r && (o == null || o());
+  }, [r, o]), /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    v,
+    r && d && /* @__PURE__ */ e.jsx(
+      P,
+      {
+        actions: g,
+        title: p,
+        isOpen: r,
+        onClose: () => m(!1),
+        showCancel: !0,
+        "data-testid": $,
+        selectionMode: "single",
+        onSelectionChange: M,
+        selectedKeys: c ? [c] : void 0,
+        disabledKeys: a
+      }
+    ),
+    r && !d && /* @__PURE__ */ e.jsx(
+      w,
+      {
+        isOpen: r,
+        setIsOpen: m,
+        items: g,
+        selectedKey: c,
+        disabledKeys: a,
+        title: p,
+        onSelectionChange: M,
+        triggerRef: s
+      }
+    )
+  ] });
+}
+const L = ({ size: t }) => /* @__PURE__ */ e.jsx("svg", { viewBox: "0 0 24 24", width: t, height: t, children: /* @__PURE__ */ e.jsx(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M4 14c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"
+  }
+) });
+export {
+  V as MenuTrigger
+};
+//# sourceMappingURL=MenuTrigger.es.js.map

package/dist/components/Menu/MenuTrigger.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTrigger.es.js","sources":["../../../src/components/Menu/MenuTrigger.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { ReactNode, useEffect, useMemo, useRef } from \"react\";\r\n\r\nimport { Button as AriaButton, Selection } from \"react-aria-components\";\r\nimport { BREAKPOINTS } from \"../../constants\";\r\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\r\nimport { ActionMenu, ActionMenuAction } from \"../ActionMenu/ActionMenu\";\r\n\r\nimport { csx } from \"../../utils\";\r\n\r\nimport \"./MenuTrigger.css\";\r\n\r\nimport { useMenuTrigger } from \"@react-aria/menu\";\r\nimport { useMenuTriggerState } from \"@react-stately/menu\";\r\nimport { PopoverMenu } from \"./PopoverMenu\";\r\n\r\ninterface TriggerProps {\r\n  disabled?: boolean;\r\n  isOpen?: boolean;\r\n  setIsOpen?: (isOpen: boolean) => void;\r\n  triggerRef: React.RefObject<HTMLButtonElement>;\r\n}\r\n\r\nexport interface MenuProps {\r\n  /** Custom trigger component. If not provided, defaults to ellipsis icon.\r\n   * - @prop triggerProps {@link TriggerProps}\r\n   */\r\n  renderTrigger?: (triggerProps: TriggerProps) => ReactNode;\r\n\r\n  /** Size of the trigger icon\r\n   * @default 24\r\n   */\r\n  size?: number;\r\n\r\n  /** Title of the parent menu */\r\n  title?: string;\r\n\r\n  /** Array of menu actions/items to display\r\n   * - type {@link ActionMenuAction}[]\r\n   */\r\n  items: ActionMenuAction[];\r\n\r\n  /** Whether the menu is disabled\r\n   * @default false\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /** Callback when menu closes */\r\n  onClose?: () => void;\r\n\r\n  /** Test ID for the trigger component */\r\n  triggerTestId?: string;\r\n\r\n  /** Test ID for the menu */\r\n  menuTestId?: string;\r\n\r\n  /** Callback when a menu item is selected */\r\n  onSelectionChange?: (key: string) => void;\r\n\r\n  /** The key of the selected item */\r\n  selectedKey?: string;\r\n\r\n  /** The keys of the disabled items */\r\n  disabledKeys?: string[];\r\n}\r\n\r\n/**\r\n * A component that displays either a popover menu or an action menu\r\n * depending on the screen size when the menu trigger is pressed.\r\n *\r\n * API:\r\n *  - {@link MenuProps}\r\n */\r\nexport function MenuTrigger({\r\n  renderTrigger,\r\n  size = 24,\r\n  title,\r\n  items,\r\n  disabled,\r\n  onClose,\r\n  triggerTestId = \"MenuTrigger-Trigger\",\r\n  menuTestId,\r\n  onSelectionChange,\r\n  selectedKey,\r\n  disabledKeys,\r\n}: MenuProps) {\r\n  const menuItems = useMemo(\r\n    () => items.map((item) => ({ ...item, id: item.key })),\r\n    [items]\r\n  );\r\n  const isMobile = useBreakpoint(BREAKPOINTS.SMALL);\r\n\r\n  const menuState = useMenuTriggerState({});\r\n  const { isOpen, setOpen: setIsOpen } = menuState;\r\n  const triggerRef = useRef(null);\r\n  const { menuTriggerProps, menuProps } = useMenuTrigger<ActionMenuAction>(\r\n    {},\r\n    menuState,\r\n    triggerRef\r\n  );\r\n\r\n  function handleSingleSelectionChange(key: Selection) {\r\n    const nextKey = Array.from(key)[0];\r\n    if (nextKey) {\r\n      onSelectionChange?.(nextKey as string);\r\n    }\r\n  }\r\n\r\n  const defaultTrigger = (\r\n    <AriaButton\r\n      {...menuTriggerProps}\r\n      data-testid={triggerTestId}\r\n      isDisabled={disabled}\r\n      className={csx(\"proton-MenuTrigger__button\")}\r\n      ref={triggerRef}\r\n    >\r\n      <EllipsisIcon size={size} />\r\n    </AriaButton>\r\n  );\r\n\r\n  const TriggerComponent = renderTrigger\r\n    ? renderTrigger({\r\n        isOpen,\r\n        setIsOpen,\r\n        disabled,\r\n        triggerRef,\r\n      })\r\n    : defaultTrigger;\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      if (isOpen) {\r\n        onClose?.();\r\n      }\r\n    };\r\n  }, [isOpen, onClose]);\r\n\r\n  return (\r\n    <>\r\n      {TriggerComponent}\r\n\r\n      {isOpen && isMobile && (\r\n        <ActionMenu\r\n          actions={menuItems}\r\n          title={title}\r\n          isOpen={isOpen}\r\n          onClose={() => setIsOpen(false)}\r\n          showCancel\r\n          data-testid={menuTestId}\r\n          selectionMode=\"single\"\r\n          onSelectionChange={handleSingleSelectionChange}\r\n          selectedKeys={selectedKey ? [selectedKey] : undefined}\r\n          disabledKeys={disabledKeys}\r\n        />\r\n      )}\r\n\r\n      {isOpen && !isMobile && (\r\n        <PopoverMenu\r\n          isOpen={isOpen}\r\n          setIsOpen={setIsOpen}\r\n          items={menuItems}\r\n          selectedKey={selectedKey}\r\n          disabledKeys={disabledKeys}\r\n          title={title}\r\n          onSelectionChange={handleSingleSelectionChange}\r\n          triggerRef={triggerRef}\r\n        />\r\n      )}\r\n    </>\r\n  );\r\n}\r\n\r\nconst EllipsisIcon = ({ size }: { size: number }) => (\r\n  <svg viewBox=\"0 0 24 24\" width={size} height={size}>\r\n    <path\r\n      fill=\"currentColor\"\r\n      d=\"M4 14c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm8 0c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z\"\r\n    />\r\n  </svg>\r\n);\r\n"],"names":["MenuTrigger","renderTrigger","size","title","items","disabled","onClose","triggerTestId","menuTestId","onSelectionChange","selectedKey","disabledKeys","menuItems","useMemo","item","isMobile","useBreakpoint","BREAKPOINTS","menuState","useMenuTriggerState","isOpen","setIsOpen","triggerRef","useRef","menuTriggerProps","menuProps","useMenuTrigger","handleSingleSelectionChange","key","nextKey","defaultTrigger","jsx","AriaButton","csx","EllipsisIcon","TriggerComponent","useEffect","jsxs","Fragment","ActionMenu","PopoverMenu"],"mappings":";;;;;;;;;;;AA0EO,SAASA,EAAY;AAAA,EAC1B,eAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,YAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AACF,GAAc;AACZ,QAAMC,IAAYC;AAAA,IAChB,MAAMT,EAAM,IAAI,CAACU,OAAU,EAAE,GAAGA,GAAM,IAAIA,EAAK,IAAA,EAAM;AAAA,IACrD,CAACV,CAAK;AAAA,EAAA,GAEFW,IAAWC,EAAcC,EAAY,KAAK,GAE1CC,IAAYC,EAAoB,CAAA,CAAE,GAClC,EAAE,QAAAC,GAAQ,SAASC,EAAA,IAAcH,GACjCI,IAAaC,EAAO,IAAI,GACxB,EAAE,kBAAAC,GAAkB,WAAAC,EAAA,IAAcC;AAAAA,IACtC,CAAC;AAAA,IACDR;AAAA,IACAI;AAAA,EAAA;AAGF,WAASK,EAA4BC,GAAgB;AACnD,UAAMC,IAAU,MAAM,KAAKD,CAAG,EAAE,CAAC;AACjC,IAAIC,MACFpB,KAAA,QAAAA,EAAoBoB;AAAA,EAExB;AAEA,QAAMC,IACJC,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACE,GAAGR;AAAA,MACJ,eAAajB;AAAA,MACb,YAAYF;AAAA,MACZ,WAAW4B,EAAI,4BAA4B;AAAA,MAC3C,KAAKX;AAAA,MAEL,UAAAS,gBAAAA,EAAA,IAACG,KAAa,MAAAhC,EAAY,CAAA;AAAA,IAAA;AAAA,EAAA,GAIxBiC,IAAmBlC,IACrBA,EAAc;AAAA,IACZ,QAAAmB;AAAA,IACA,WAAAC;AAAA,IACA,UAAAhB;AAAA,IACA,YAAAiB;AAAA,EACD,CAAA,IACDQ;AAEJ,SAAAM,EAAU,MACD,MAAM;AACX,IAAIhB,MACQd,KAAA,QAAAA;AAAA,EACZ,GAED,CAACc,GAAQd,CAAO,CAAC,GAIf+B,gBAAAA,EAAA,KAAAC,YAAA,EAAA,UAAA;AAAA,IAAAH;AAAA,IAEAf,KAAUL,KACTgB,gBAAAA,EAAA;AAAA,MAACQ;AAAA,MAAA;AAAA,QACC,SAAS3B;AAAA,QACT,OAAAT;AAAA,QACA,QAAAiB;AAAA,QACA,SAAS,MAAMC,EAAU,EAAK;AAAA,QAC9B,YAAU;AAAA,QACV,eAAab;AAAA,QACb,eAAc;AAAA,QACd,mBAAmBmB;AAAA,QACnB,cAAcjB,IAAc,CAACA,CAAW,IAAI;AAAA,QAC5C,cAAAC;AAAA,MAAA;AAAA,IACF;AAAA,IAGDS,KAAU,CAACL,KACVgB,gBAAAA,EAAA;AAAA,MAACS;AAAA,MAAA;AAAA,QACC,QAAApB;AAAA,QACA,WAAAC;AAAA,QACA,OAAOT;AAAA,QACP,aAAAF;AAAA,QACA,cAAAC;AAAA,QACA,OAAAR;AAAA,QACA,mBAAmBwB;AAAA,QACnB,YAAAL;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ,EAAA,CAAA;AAEJ;AAEA,MAAMY,IAAe,CAAC,EAAE,MAAAhC,EACtB,MAAA6B,gBAAAA,EAAA,IAAC,OAAI,EAAA,SAAQ,aAAY,OAAO7B,GAAM,QAAQA,GAC5C,UAAA6B,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,GAAE;AAAA,EAAA;AACJ,GACF;"}

package/dist/components/Menu/PopoverMenu.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../node_modules/react/jsx-runtime.cjs.js"),R=require("../../node_modules/react-aria-components/dist/Header.cjs.js"),x=require("../../node_modules/react-aria-components/dist/Menu.cjs.js"),d=require("../../node_modules/react-aria-components/dist/Popover.cjs.js"),p=require("../../node_modules/react-aria-components/dist/Text.cjs.js"),E=require("../ThemeProvider.cjs.js"),c=require("../../utils/string.cjs.js");function M({items:n,isOpen:e,setIsOpen:r,onSelectionChange:m,selectedKey:i,disabledKeys:t,title:u,triggerRef:l}){const{className:o,style:a}=E.useTheme();return s.jsxRuntimeExports.jsx(d.Popover,{className:c.csx("proton-Popover",o),style:a,triggerRef:l,isOpen:e,onOpenChange:r,children:s.jsxRuntimeExports.jsx(x.Menu,{items:n,className:c.csx("proton-ListBox","proton-MenuTrigger__menu"),selectionMode:"single",onSelectionChange:m,selectedKeys:new Set([i]),disabledKeys:t,onClose:()=>r(!1),autoFocus:!0,children:s.jsxRuntimeExports.jsxs(x.MenuSection,{children:[u&&s.jsxRuntimeExports.jsx(R.Header,{className:"proton-MenuTrigger__menu-header",children:u}),n.map(g=>h({item:g,className:o,style:a,disabledKeys:t,onClose:()=>r(!1)}))]})})})}function h(n){var l;const{item:e,className:r,style:m,disabledKeys:i,onClose:t}=n;let u=((l=e.label)==null?void 0:l.toString())||"";return e.children?s.jsxRuntimeExports.jsxs(x.SubmenuTrigger,{children:[s.jsxRuntimeExports.jsx(j,{textValue:u,children:e.label}),s.jsxRuntimeExports.jsx(d.Popover,{className:c.csx("proton-Popover",r),style:m,children:s.jsxRuntimeExports.jsx(x.Menu,{items:e.children,className:"proton-ListBox proton-MenuTrigger__menu",disabledKeys:i,onClose:t,children:o=>h({...n,item:o})})})]},e.key):s.jsxRuntimeExports.jsxs(j,{textValue:u,onAction:()=>{var o;(o=e.onAction)==null||o.call(e,e.key),t==null||t()},isDisabled:i==null?void 0:i.includes(e.key),id:e.key,children:[s.jsxRuntimeExports.jsx(p.Text,{slot:"label",children:e.label}),s.jsxRuntimeExports.jsx(p.Text,{slot:"description",children:e.description})]},e.key)}function j(n){return s.jsxRuntimeExports.jsx(x.MenuItem,{...n,className:({isFocused:e,isOpen:r})=>c.csx("proton-ListBox__item proton-MenuTrigger__menu-item",e&&"focused",r&&"open"),children:({hasSubmenu:e})=>s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[n.children,e&&s.jsxRuntimeExports.jsx("svg",{className:"proton-MenuTrigger__chevron",viewBox:"0 0 256 256",children:s.jsxRuntimeExports.jsx("path",{fill:"currentColor",d:"m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17"})})]})})}exports.PopoverMenu=M;
+//# sourceMappingURL=PopoverMenu.cjs.js.map

package/dist/components/Menu/PopoverMenu.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverMenu.cjs.js","sources":["../../../src/components/Menu/PopoverMenu.tsx"],"sourcesContent":["import {\r\n  Menu as AriaMenu,\r\n  Header as AriaMenuHeader,\r\n  MenuItem as AriaMenuItem,\r\n  MenuItemProps as AriaMenuItemProps,\r\n  Popover as AriaPopover,\r\n  SubmenuTrigger as AriaSubmenuTrigger,\r\n  MenuSection,\r\n  Selection,\r\n  Text,\r\n} from \"react-aria-components\";\r\n\r\nimport { csx } from \"../../utils\";\r\nimport { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\n\r\ninterface PopoverMenuProps {\r\n  /** The keys of the disabled items */\r\n  disabledKeys?: string[];\r\n\r\n  /** Whether the menu is open */\r\n  isOpen: boolean;\r\n\r\n  /** Array of menu actions/items to display\r\n   * - type {@link ActionMenuAction}[]\r\n   */\r\n  items: ActionMenuAction[];\r\n\r\n  /** Callback when a menu item is selected\r\n   * - @prop keys {@link Selection}\r\n   */\r\n  onSelectionChange?: (keys: Selection) => void;\r\n\r\n  /** Callback when the menu is opened or closed */\r\n  setIsOpen: (isOpen: boolean) => void;\r\n\r\n  /** The key of the selected item */\r\n  selectedKey?: string;\r\n\r\n  /** Title of the parent menu */\r\n  title?: string;\r\n\r\n  /** Reference to the trigger button */\r\n  triggerRef: React.RefObject<HTMLButtonElement>;\r\n}\r\n\r\n/**\r\n * A popover menu component that displays a list of items.\r\n *\r\n * API:\r\n *  - {@link PopoverMenuProps}\r\n */\r\nexport function PopoverMenu({\r\n  items,\r\n  isOpen,\r\n  setIsOpen,\r\n  onSelectionChange,\r\n  selectedKey,\r\n  disabledKeys,\r\n  title,\r\n  triggerRef,\r\n}: PopoverMenuProps) {\r\n  const { className: themeClass, style: themeStyle } = useTheme();\r\n\r\n  return (\r\n    <AriaPopover\r\n      className={csx(\"proton-Popover\", themeClass)}\r\n      style={themeStyle as React.CSSProperties}\r\n      triggerRef={triggerRef}\r\n      isOpen={isOpen}\r\n      onOpenChange={setIsOpen}\r\n    >\r\n      <AriaMenu\r\n        items={items}\r\n        className={csx(\"proton-ListBox\", \"proton-MenuTrigger__menu\")}\r\n        selectionMode=\"single\"\r\n        onSelectionChange={onSelectionChange}\r\n        selectedKeys={new Set([selectedKey])}\r\n        disabledKeys={disabledKeys}\r\n        onClose={() => setIsOpen(false)}\r\n        autoFocus\r\n      >\r\n        <MenuSection>\r\n          {title && (\r\n            <AriaMenuHeader className=\"proton-MenuTrigger__menu-header\">\r\n              {title}\r\n            </AriaMenuHeader>\r\n          )}\r\n\r\n          {items.map((item) => {\r\n            return renderSubmenu({\r\n              item,\r\n              className: themeClass,\r\n              style: themeStyle as React.CSSProperties,\r\n              disabledKeys,\r\n              onClose: () => setIsOpen(false),\r\n            });\r\n          })}\r\n        </MenuSection>\r\n      </AriaMenu>\r\n    </AriaPopover>\r\n  );\r\n}\r\n\r\nfunction renderSubmenu(props: {\r\n  item: ActionMenuAction;\r\n  className: string;\r\n  style: React.CSSProperties;\r\n  disabledKeys?: string[];\r\n  onClose?: () => void;\r\n}) {\r\n  const { item, className, style, disabledKeys, onClose } = props;\r\n  let textValue = item.label?.toString() || \"\";\r\n  if (item.children) {\r\n    return (\r\n      <AriaSubmenuTrigger key={item.key}>\r\n        <MenuItem textValue={textValue}>{item.label}</MenuItem>\r\n        <AriaPopover className={csx(\"proton-Popover\", className)} style={style}>\r\n          <AriaMenu\r\n            items={item.children}\r\n            className=\"proton-ListBox proton-MenuTrigger__menu\"\r\n            disabledKeys={disabledKeys}\r\n            onClose={onClose}\r\n          >\r\n            {(child) =>\r\n              renderSubmenu({\r\n                ...props,\r\n                item: child as ActionMenuAction,\r\n              })\r\n            }\r\n          </AriaMenu>\r\n        </AriaPopover>\r\n      </AriaSubmenuTrigger>\r\n    );\r\n  } else {\r\n    return (\r\n      <MenuItem\r\n        textValue={textValue}\r\n        onAction={() => {\r\n          item.onAction?.(item.key);\r\n          onClose?.();\r\n        }}\r\n        key={item.key}\r\n        isDisabled={disabledKeys?.includes(item.key)}\r\n        id={item.key}\r\n      >\r\n        <Text slot=\"label\">{item.label}</Text>\r\n        <Text slot=\"description\">{item.description}</Text>\r\n      </MenuItem>\r\n    );\r\n  }\r\n}\r\n\r\nfunction MenuItem(props: AriaMenuItemProps) {\r\n  return (\r\n    <AriaMenuItem\r\n      {...props}\r\n      className={({ isFocused, isOpen }) =>\r\n        csx(\r\n          \"proton-ListBox__item proton-MenuTrigger__menu-item\",\r\n          isFocused && \"focused\",\r\n          isOpen && \"open\"\r\n        )\r\n      }\r\n    >\r\n      {({ hasSubmenu }) => (\r\n        <>\r\n          {props.children}\r\n          {hasSubmenu && (\r\n            <svg className=\"proton-MenuTrigger__chevron\" viewBox=\"0 0 256 256\">\r\n              <path\r\n                fill=\"currentColor\"\r\n                d=\"m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17\"\r\n              />\r\n            </svg>\r\n          )}\r\n        </>\r\n      )}\r\n    </AriaMenuItem>\r\n  );\r\n}\r\n"],"names":["PopoverMenu","items","isOpen","setIsOpen","onSelectionChange","selectedKey","disabledKeys","title","triggerRef","themeClass","themeStyle","useTheme","jsx","AriaPopover","csx","AriaMenu","MenuSection","AriaMenuHeader","item","renderSubmenu","props","className","style","onClose","textValue","_a","AriaSubmenuTrigger","MenuItem","child","jsxs","Text","AriaMenuItem","isFocused","hasSubmenu","Fragment"],"mappings":"4fAoDO,SAASA,EAAY,CAC1B,MAAAC,EACA,OAAAC,EACA,UAAAC,EACA,kBAAAC,EACA,YAAAC,EACA,aAAAC,EACA,MAAAC,EACA,WAAAC,CACF,EAAqB,CACnB,KAAM,CAAE,UAAWC,EAAY,MAAOC,CAAA,EAAeC,EAAAA,WAGnD,OAAAC,EAAA,kBAAA,IAACC,EAAA,QAAA,CACC,UAAWC,EAAAA,IAAI,iBAAkBL,CAAU,EAC3C,MAAOC,EACP,WAAAF,EACA,OAAAN,EACA,aAAcC,EAEd,SAAAS,EAAA,kBAAA,IAACG,EAAA,KAAA,CACC,MAAAd,EACA,UAAWa,EAAAA,IAAI,iBAAkB,0BAA0B,EAC3D,cAAc,SACd,kBAAAV,EACA,aAAc,IAAI,IAAI,CAACC,CAAW,CAAC,EACnC,aAAAC,EACA,QAAS,IAAMH,EAAU,EAAK,EAC9B,UAAS,GAET,kCAACa,cACE,CAAA,SAAA,CAAAT,GACEK,EAAA,kBAAA,IAAAK,SAAA,CAAe,UAAU,kCACvB,SACHV,EAAA,EAGDN,EAAM,IAAKiB,GACHC,EAAc,CACnB,KAAAD,EACA,UAAWT,EACX,MAAOC,EACP,aAAAJ,EACA,QAAS,IAAMH,EAAU,EAAK,CAAA,CAC/B,CACF,CAAA,EACH,CAAA,CACF,CAAA,CAAA,CAGN,CAEA,SAASgB,EAAcC,EAMpB,OACD,KAAM,CAAE,KAAAF,EAAM,UAAAG,EAAW,MAAAC,EAAO,aAAAhB,EAAc,QAAAiB,CAAY,EAAAH,EAC1D,IAAII,IAAYC,EAAAP,EAAK,QAAL,YAAAO,EAAY,aAAc,GAC1C,OAAIP,EAAK,kCAEJQ,iBACC,CAAA,SAAA,CAACd,EAAA,kBAAA,IAAAe,EAAA,CAAS,UAAAH,EAAuB,SAAAN,EAAK,MAAM,0BAC3CL,EAAAA,QAAY,CAAA,UAAWC,MAAI,iBAAkBO,CAAS,EAAG,MAAAC,EACxD,SAAAV,EAAA,kBAAA,IAACG,EAAA,KAAA,CACC,MAAOG,EAAK,SACZ,UAAU,0CACV,aAAAZ,EACA,QAAAiB,EAEC,SAACK,GACAT,EAAc,CACZ,GAAGC,EACH,KAAMQ,CAAA,CACP,CAAA,CAAA,EAGP,CAAA,GAhBuBV,EAAK,GAiB9B,EAIAW,EAAA,kBAAA,KAACF,EAAA,CACC,UAAAH,EACA,SAAU,IAAM,QACTC,EAAAP,EAAA,WAAA,MAAAO,EAAA,KAAAP,EAAWA,EAAK,KACXK,GAAA,MAAAA,GACZ,EAEA,WAAYjB,GAAA,YAAAA,EAAc,SAASY,EAAK,KACxC,GAAIA,EAAK,IAET,SAAA,CAAAN,EAAA,kBAAA,IAACkB,EAAK,KAAA,CAAA,KAAK,QAAS,SAAAZ,EAAK,MAAM,EAC9BN,EAAA,kBAAA,IAAAkB,EAAA,KAAA,CAAK,KAAK,cAAe,WAAK,YAAY,CAAA,CAAA,EALtCZ,EAAK,GAAA,CASlB,CAEA,SAASS,EAASP,EAA0B,CAExC,OAAAR,EAAA,kBAAA,IAACmB,EAAA,SAAA,CACE,GAAGX,EACJ,UAAW,CAAC,CAAE,UAAAY,EAAW,OAAA9B,CACvB,IAAAY,EAAA,IACE,qDACAkB,GAAa,UACb9B,GAAU,MACZ,EAGD,SAAC,CAAA,CAAE,WAAA+B,CAAW,IAEVJ,EAAAA,kBAAAA,KAAAK,EAAAA,kBAAAA,SAAA,CAAA,SAAA,CAAMd,EAAA,SACNa,GACErB,EAAAA,kBAAAA,IAAA,MAAA,CAAI,UAAU,8BAA8B,QAAQ,cACnD,SAAAA,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,wGAAA,CAAA,EAEN,CAAA,EAEJ,CAAA,CAAA,CAIR"}

package/dist/components/Menu/PopoverMenu.es.js

@@ -0,0 +1,116 @@
+import { j as r } from "../../node_modules/react/jsx-runtime.es.js";
+import { Header as $ } from "../../node_modules/react-aria-components/dist/Header.es.js";
+import { Menu as p, MenuSection as g, SubmenuTrigger as j, MenuItem as _ } from "../../node_modules/react-aria-components/dist/Menu.es.js";
+import { Popover as b } from "../../node_modules/react-aria-components/dist/Popover.es.js";
+import { Text as x } from "../../node_modules/react-aria-components/dist/Text.es.js";
+import { useTheme as M } from "../ThemeProvider.es.js";
+import { csx as a } from "../../utils/string.es.js";
+function B({
+  items: o,
+  isOpen: e,
+  setIsOpen: n,
+  onSelectionChange: m,
+  selectedKey: t,
+  disabledKeys: c,
+  title: l,
+  triggerRef: i
+}) {
+  const { className: s, style: u } = M();
+  return /* @__PURE__ */ r.jsx(
+    b,
+    {
+      className: a("proton-Popover", s),
+      style: u,
+      triggerRef: i,
+      isOpen: e,
+      onOpenChange: n,
+      children: /* @__PURE__ */ r.jsx(
+        p,
+        {
+          items: o,
+          className: a("proton-ListBox", "proton-MenuTrigger__menu"),
+          selectionMode: "single",
+          onSelectionChange: m,
+          selectedKeys: /* @__PURE__ */ new Set([t]),
+          disabledKeys: c,
+          onClose: () => n(!1),
+          autoFocus: !0,
+          children: /* @__PURE__ */ r.jsxs(g, { children: [
+            l && /* @__PURE__ */ r.jsx($, { className: "proton-MenuTrigger__menu-header", children: l }),
+            o.map((h) => f({
+              item: h,
+              className: s,
+              style: u,
+              disabledKeys: c,
+              onClose: () => n(!1)
+            }))
+          ] })
+        }
+      )
+    }
+  );
+}
+function f(o) {
+  var i;
+  const { item: e, className: n, style: m, disabledKeys: t, onClose: c } = o;
+  let l = ((i = e.label) == null ? void 0 : i.toString()) || "";
+  return e.children ? /* @__PURE__ */ r.jsxs(j, { children: [
+    /* @__PURE__ */ r.jsx(d, { textValue: l, children: e.label }),
+    /* @__PURE__ */ r.jsx(b, { className: a("proton-Popover", n), style: m, children: /* @__PURE__ */ r.jsx(
+      p,
+      {
+        items: e.children,
+        className: "proton-ListBox proton-MenuTrigger__menu",
+        disabledKeys: t,
+        onClose: c,
+        children: (s) => f({
+          ...o,
+          item: s
+        })
+      }
+    ) })
+  ] }, e.key) : /* @__PURE__ */ r.jsxs(
+    d,
+    {
+      textValue: l,
+      onAction: () => {
+        var s;
+        (s = e.onAction) == null || s.call(e, e.key), c == null || c();
+      },
+      isDisabled: t == null ? void 0 : t.includes(e.key),
+      id: e.key,
+      children: [
+        /* @__PURE__ */ r.jsx(x, { slot: "label", children: e.label }),
+        /* @__PURE__ */ r.jsx(x, { slot: "description", children: e.description })
+      ]
+    },
+    e.key
+  );
+}
+function d(o) {
+  return /* @__PURE__ */ r.jsx(
+    _,
+    {
+      ...o,
+      className: ({ isFocused: e, isOpen: n }) => a(
+        "proton-ListBox__item proton-MenuTrigger__menu-item",
+        e && "focused",
+        n && "open"
+      ),
+      children: ({ hasSubmenu: e }) => /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+        o.children,
+        e && /* @__PURE__ */ r.jsx("svg", { className: "proton-MenuTrigger__chevron", viewBox: "0 0 256 256", children: /* @__PURE__ */ r.jsx(
+          "path",
+          {
+            fill: "currentColor",
+            d: "m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17"
+          }
+        ) })
+      ] })
+    }
+  );
+}
+export {
+  B as PopoverMenu
+};
+//# sourceMappingURL=PopoverMenu.es.js.map

package/dist/components/Menu/PopoverMenu.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverMenu.es.js","sources":["../../../src/components/Menu/PopoverMenu.tsx"],"sourcesContent":["import {\r\n  Menu as AriaMenu,\r\n  Header as AriaMenuHeader,\r\n  MenuItem as AriaMenuItem,\r\n  MenuItemProps as AriaMenuItemProps,\r\n  Popover as AriaPopover,\r\n  SubmenuTrigger as AriaSubmenuTrigger,\r\n  MenuSection,\r\n  Selection,\r\n  Text,\r\n} from \"react-aria-components\";\r\n\r\nimport { csx } from \"../../utils\";\r\nimport { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\n\r\ninterface PopoverMenuProps {\r\n  /** The keys of the disabled items */\r\n  disabledKeys?: string[];\r\n\r\n  /** Whether the menu is open */\r\n  isOpen: boolean;\r\n\r\n  /** Array of menu actions/items to display\r\n   * - type {@link ActionMenuAction}[]\r\n   */\r\n  items: ActionMenuAction[];\r\n\r\n  /** Callback when a menu item is selected\r\n   * - @prop keys {@link Selection}\r\n   */\r\n  onSelectionChange?: (keys: Selection) => void;\r\n\r\n  /** Callback when the menu is opened or closed */\r\n  setIsOpen: (isOpen: boolean) => void;\r\n\r\n  /** The key of the selected item */\r\n  selectedKey?: string;\r\n\r\n  /** Title of the parent menu */\r\n  title?: string;\r\n\r\n  /** Reference to the trigger button */\r\n  triggerRef: React.RefObject<HTMLButtonElement>;\r\n}\r\n\r\n/**\r\n * A popover menu component that displays a list of items.\r\n *\r\n * API:\r\n *  - {@link PopoverMenuProps}\r\n */\r\nexport function PopoverMenu({\r\n  items,\r\n  isOpen,\r\n  setIsOpen,\r\n  onSelectionChange,\r\n  selectedKey,\r\n  disabledKeys,\r\n  title,\r\n  triggerRef,\r\n}: PopoverMenuProps) {\r\n  const { className: themeClass, style: themeStyle } = useTheme();\r\n\r\n  return (\r\n    <AriaPopover\r\n      className={csx(\"proton-Popover\", themeClass)}\r\n      style={themeStyle as React.CSSProperties}\r\n      triggerRef={triggerRef}\r\n      isOpen={isOpen}\r\n      onOpenChange={setIsOpen}\r\n    >\r\n      <AriaMenu\r\n        items={items}\r\n        className={csx(\"proton-ListBox\", \"proton-MenuTrigger__menu\")}\r\n        selectionMode=\"single\"\r\n        onSelectionChange={onSelectionChange}\r\n        selectedKeys={new Set([selectedKey])}\r\n        disabledKeys={disabledKeys}\r\n        onClose={() => setIsOpen(false)}\r\n        autoFocus\r\n      >\r\n        <MenuSection>\r\n          {title && (\r\n            <AriaMenuHeader className=\"proton-MenuTrigger__menu-header\">\r\n              {title}\r\n            </AriaMenuHeader>\r\n          )}\r\n\r\n          {items.map((item) => {\r\n            return renderSubmenu({\r\n              item,\r\n              className: themeClass,\r\n              style: themeStyle as React.CSSProperties,\r\n              disabledKeys,\r\n              onClose: () => setIsOpen(false),\r\n            });\r\n          })}\r\n        </MenuSection>\r\n      </AriaMenu>\r\n    </AriaPopover>\r\n  );\r\n}\r\n\r\nfunction renderSubmenu(props: {\r\n  item: ActionMenuAction;\r\n  className: string;\r\n  style: React.CSSProperties;\r\n  disabledKeys?: string[];\r\n  onClose?: () => void;\r\n}) {\r\n  const { item, className, style, disabledKeys, onClose } = props;\r\n  let textValue = item.label?.toString() || \"\";\r\n  if (item.children) {\r\n    return (\r\n      <AriaSubmenuTrigger key={item.key}>\r\n        <MenuItem textValue={textValue}>{item.label}</MenuItem>\r\n        <AriaPopover className={csx(\"proton-Popover\", className)} style={style}>\r\n          <AriaMenu\r\n            items={item.children}\r\n            className=\"proton-ListBox proton-MenuTrigger__menu\"\r\n            disabledKeys={disabledKeys}\r\n            onClose={onClose}\r\n          >\r\n            {(child) =>\r\n              renderSubmenu({\r\n                ...props,\r\n                item: child as ActionMenuAction,\r\n              })\r\n            }\r\n          </AriaMenu>\r\n        </AriaPopover>\r\n      </AriaSubmenuTrigger>\r\n    );\r\n  } else {\r\n    return (\r\n      <MenuItem\r\n        textValue={textValue}\r\n        onAction={() => {\r\n          item.onAction?.(item.key);\r\n          onClose?.();\r\n        }}\r\n        key={item.key}\r\n        isDisabled={disabledKeys?.includes(item.key)}\r\n        id={item.key}\r\n      >\r\n        <Text slot=\"label\">{item.label}</Text>\r\n        <Text slot=\"description\">{item.description}</Text>\r\n      </MenuItem>\r\n    );\r\n  }\r\n}\r\n\r\nfunction MenuItem(props: AriaMenuItemProps) {\r\n  return (\r\n    <AriaMenuItem\r\n      {...props}\r\n      className={({ isFocused, isOpen }) =>\r\n        csx(\r\n          \"proton-ListBox__item proton-MenuTrigger__menu-item\",\r\n          isFocused && \"focused\",\r\n          isOpen && \"open\"\r\n        )\r\n      }\r\n    >\r\n      {({ hasSubmenu }) => (\r\n        <>\r\n          {props.children}\r\n          {hasSubmenu && (\r\n            <svg className=\"proton-MenuTrigger__chevron\" viewBox=\"0 0 256 256\">\r\n              <path\r\n                fill=\"currentColor\"\r\n                d=\"m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17\"\r\n              />\r\n            </svg>\r\n          )}\r\n        </>\r\n      )}\r\n    </AriaMenuItem>\r\n  );\r\n}\r\n"],"names":["PopoverMenu","items","isOpen","setIsOpen","onSelectionChange","selectedKey","disabledKeys","title","triggerRef","themeClass","themeStyle","useTheme","jsx","AriaPopover","csx","AriaMenu","MenuSection","AriaMenuHeader","item","renderSubmenu","props","className","style","onClose","textValue","_a","AriaSubmenuTrigger","MenuItem","child","jsxs","Text","AriaMenuItem","isFocused","hasSubmenu","Fragment"],"mappings":"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"}

package/dist/components/Modal/Modal.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../node_modules/react/jsx-runtime.cjs.js"),E=require("../../node_modules/@react-aria/button/dist/useButton.cjs.js"),q=require("../../node_modules/@react-aria/dialog/dist/useDialog.cjs.js"),m=require("../../node_modules/@react-aria/focus/dist/FocusScope.cjs.js"),v=require("@react-aria/utils"),S=require("../../node_modules/@react-aria/overlays/dist/usePreventScroll.cjs.js"),_=require("../../node_modules/@react-aria/overlays/dist/useModalOverlay.cjs.js"),j=require("react"),b=require("../../node_modules/@react-stately/overlays/dist/useOverlayTriggerState.cjs.js"),h=require("../../hooks/useIsClosing.cjs.js"),f=require("../Button/Button.cjs.js");;/* empty css               */const y=require("../ScreenOverlay/ScreenOverlay.cjs.js"),B=require("../../hooks/useBreakpoint.cjs.js"),C=require("../../constants/breakpoint.cjs.js"),O=require("../../utils/string.cjs.js"),M=({children:s})=>e.jsxRuntimeExports.jsx("h2",{className:"proton-Modal__title",children:s}),R=({children:s})=>e.jsxRuntimeExports.jsx("h3",{className:"proton-Modal__subtitle",children:s}),g=({children:s})=>e.jsxRuntimeExports.jsx("div",{className:"proton-Modal__body",children:s}),P=s=>e.jsxRuntimeExports.jsx("div",{className:"proton-Modal__action",children:e.jsxRuntimeExports.jsx(f.Button,{...s})}),N=({children:s})=>e.jsxRuntimeExports.jsx(m.FocusScope,{autoFocus:!0,children:e.jsxRuntimeExports.jsx("div",{className:"proton-Modal__actions",children:s})}),F=({title:s,subtitle:o,body:r,onClose:n,children:c,isClosing:d,"data-testid":x})=>{const t=j.useRef(null),u=b.useOverlayTriggerState({isOpen:!0,onOpenChange:n}),{modalProps:p}=_.useModalOverlay({isDismissable:!1},u,t),{dialogProps:i}=q.useDialog({role:"dialog"},t);S.usePreventScroll();const l=j.useRef(null),{buttonProps:a}=E.useButton({onPress:n,"aria-label":"Close"},l);return e.jsxRuntimeExports.jsx(m.FocusScope,{contain:!0,restoreFocus:!0,autoFocus:!0,children:e.jsxRuntimeExports.jsxs("div",{"data-testid":x,className:O.csx("proton-Modal",d&&"proton-Modal--closing"),...v.mergeProps(p,i),ref:t,children:[e.jsxRuntimeExports.jsx("button",{name:"Close",className:"proton-Modal__close-button",...a,ref:l,children:"×"}),s&&e.jsxRuntimeExports.jsx(M,{children:s}),o&&e.jsxRuntimeExports.jsx(R,{children:o}),r&&e.jsxRuntimeExports.jsx(g,{children:r}),e.jsxRuntimeExports.jsx("div",{className:"proton-Modal__content",children:c})]})})},T=({isOpen:s,onClose:o,title:r,subtitle:n,body:c,children:d,isOverlay:x=!0,"data-testid":t})=>{const u=j.useRef(null),{isClosing:p,handleClose:i}=h.useIsClosing({onClose:o,overlayRef:u}),l=B.useBreakpoint(C.BREAKPOINTS.MEDIUM);if(!s)return null;const a=e.jsxRuntimeExports.jsx(F,{isOpen:s,title:r,subtitle:n,body:c,onClose:i,isClosing:p,"data-testid":t,children:d});return x||l?e.jsxRuntimeExports.jsx(y.ScreenOverlay,{fadeIn:!0,ref:u,onClose:i,children:a}):a},A=Object.assign(T,{Title:M,Subtitle:R,Body:g,Action:P,Actions:N});exports.Modal=A;
+//# sourceMappingURL=Modal.cjs.js.map

package/dist/components/Modal/Modal.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.cjs.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useButton } from \"@react-aria/button\";\r\nimport { useDialog } from \"@react-aria/dialog\";\r\nimport { FocusScope } from \"@react-aria/focus\";\r\nimport { useModalOverlay, usePreventScroll } from \"@react-aria/overlays\";\r\nimport { mergeProps } from \"@react-aria/utils\";\r\nimport { useRef } from \"react\";\r\nimport { useOverlayTriggerState } from \"@react-stately/overlays\";\r\nimport { BREAKPOINTS } from \"../../constants\";\r\nimport { useBreakpoint } from \"../../hooks\";\r\nimport { useIsClosing } from \"../../hooks/useIsClosing\";\r\nimport { csx } from \"../../utils\";\r\nimport { Button, ButtonProps } from \"../Button/Button\";\r\nimport \"./Modal.css\";\r\nimport { ScreenOverlay } from \"../ScreenOverlay/ScreenOverlay\";\r\n\r\nconst ModalTitle = ({ children }: { children: React.ReactNode }) => {\r\n  return <h2 className=\"proton-Modal__title\">{children}</h2>;\r\n};\r\n\r\nconst ModalSubtitle = ({ children }: { children: React.ReactNode }) => {\r\n  return <h3 className=\"proton-Modal__subtitle\">{children}</h3>;\r\n};\r\n\r\nconst ModalBody = ({ children }: { children: React.ReactNode }) => {\r\n  return <div className=\"proton-Modal__body\">{children}</div>;\r\n};\r\n\r\nconst ModalAction = (buttonProps: ButtonProps) => {\r\n  return (\r\n    <div className=\"proton-Modal__action\">\r\n      <Button {...buttonProps} />\r\n    </div>\r\n  );\r\n};\r\n\r\nconst ModalActions = ({ children }: { children: React.ReactNode }) => {\r\n  return (\r\n    <FocusScope autoFocus>\r\n      <div className=\"proton-Modal__actions\">{children}</div>\r\n    </FocusScope>\r\n  );\r\n};\r\n\r\nconst ModalContent = ({\r\n  title,\r\n  subtitle,\r\n  body,\r\n  onClose,\r\n  children,\r\n  isClosing,\r\n  \"data-testid\": dataTestId,\r\n}: ModalProps & {\r\n  isClosing: boolean;\r\n}) => {\r\n  const ref = useRef<HTMLDivElement>(null);\r\n  const state = useOverlayTriggerState({ isOpen: true, onOpenChange: onClose });\r\n  const { modalProps } = useModalOverlay(\r\n    {\r\n      isDismissable: false, //handle dismiss behavior in useIsClosing\r\n    },\r\n    state,\r\n    ref\r\n  );\r\n\r\n  const { dialogProps } = useDialog({ role: \"dialog\" }, ref);\r\n  usePreventScroll();\r\n\r\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\r\n  const { buttonProps: closeButtonProps } = useButton(\r\n    {\r\n      onPress: onClose,\r\n      \"aria-label\": \"Close\",\r\n    },\r\n    closeButtonRef\r\n  );\r\n\r\n  return (\r\n    <FocusScope contain restoreFocus autoFocus>\r\n      <div\r\n        data-testid={dataTestId}\r\n        className={csx(\"proton-Modal\", isClosing && \"proton-Modal--closing\")}\r\n        {...mergeProps(modalProps, dialogProps)}\r\n        ref={ref}\r\n      >\r\n        <button\r\n          name=\"Close\"\r\n          className=\"proton-Modal__close-button\"\r\n          {...closeButtonProps}\r\n          ref={closeButtonRef}\r\n        >\r\n          ×\r\n        </button>\r\n        {title && <ModalTitle>{title}</ModalTitle>}\r\n        {subtitle && <ModalSubtitle>{subtitle}</ModalSubtitle>}\r\n        {body && <ModalBody>{body}</ModalBody>}\r\n        <div className=\"proton-Modal__content\">{children}</div>\r\n      </div>\r\n    </FocusScope>\r\n  );\r\n};\r\n\r\nexport interface ModalProps {\r\n  /**\r\n   * Optional body text content for the modal\r\n   * */\r\n  body?: string;\r\n  /**\r\n   * Content to render inside the modal\r\n   * */\r\n  children: React.ReactNode;\r\n  /**\r\n   * data-testid for the modal\r\n   * */\r\n  \"data-testid\"?: string;\r\n  /**\r\n   * Controls the visibility of the modal\r\n   * */\r\n  isOpen: boolean;\r\n  /**\r\n   * Whether to show the modal with an overlay background.\r\n   * @default true\r\n   * */\r\n  isOverlay?: boolean;\r\n  /**\r\n   * Callback function when modal is closed\r\n   * */\r\n  onClose?: () => void;\r\n  /**\r\n   * Optional subtitle text below the modal title\r\n   * */\r\n  subtitle?: string;\r\n  /**\r\n   * Optional title text for the modal header\r\n   * */\r\n  title?: string;\r\n}\r\n\r\n/**\r\n * Modal component with overlay support and responsive behavior.\r\n *\r\n * API:\r\n *  - {@link ModalProps}\r\n */\r\nconst ModalWrapper = ({\r\n  isOpen,\r\n  onClose,\r\n  title,\r\n  subtitle,\r\n  body,\r\n  children,\r\n  isOverlay = true,\r\n  \"data-testid\": dataTestId,\r\n}: ModalProps) => {\r\n  const overlayRef = useRef<HTMLDivElement>(null);\r\n  const { isClosing, handleClose } = useIsClosing({\r\n    onClose,\r\n    overlayRef,\r\n  });\r\n  const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\r\n\r\n  if (!isOpen) return null;\r\n\r\n  const modalContent = (\r\n    <ModalContent\r\n      isOpen={isOpen}\r\n      title={title}\r\n      subtitle={subtitle}\r\n      body={body}\r\n      onClose={handleClose}\r\n      isClosing={isClosing}\r\n      data-testid={dataTestId}\r\n    >\r\n      {children}\r\n    </ModalContent>\r\n  );\r\n\r\n  return isOverlay || isMobile ? (\r\n    <ScreenOverlay fadeIn ref={overlayRef} onClose={handleClose}>\r\n      {modalContent}\r\n    </ScreenOverlay>\r\n  ) : (\r\n    modalContent\r\n  );\r\n};\r\n\r\nexport const Modal = Object.assign(ModalWrapper, {\r\n  /**\r\n   * Renders a h2 styled title\r\n   * */\r\n  Title: ModalTitle,\r\n  /**\r\n   * Renders a h3 styled subtitle\r\n   * */\r\n  Subtitle: ModalSubtitle,\r\n  /**\r\n   * Renders a div styled body\r\n   * */\r\n  Body: ModalBody,\r\n  /**\r\n   * Renders a Proton Button action\r\n   * - @prop buttonProps {@link ButtonProps}\r\n   * */\r\n  Action: ModalAction,\r\n  /**\r\n   * Renders a group of Proton Buttons\r\n   * */\r\n  Actions: ModalActions,\r\n});\r\n"],"names":["ModalTitle","children","jsx","ModalSubtitle","ModalBody","ModalAction","buttonProps","Button","ModalActions","FocusScope","ModalContent","title","subtitle","body","onClose","isClosing","dataTestId","ref","useRef","state","useOverlayTriggerState","modalProps","useModalOverlay","dialogProps","useDialog","usePreventScroll","closeButtonRef","closeButtonProps","useButton","jsxs","csx","mergeProps","ModalWrapper","isOpen","isOverlay","overlayRef","handleClose","useIsClosing","isMobile","useBreakpoint","BREAKPOINTS","modalContent","ScreenOverlay","Modal"],"mappings":"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"}

package/dist/components/Modal/Modal.es.js

@@ -0,0 +1,122 @@
+import { j as o } from "../../node_modules/react/jsx-runtime.es.js";
+import { useButton as $ } from "../../node_modules/@react-aria/button/dist/useButton.es.js";
+import { useDialog as _ } from "../../node_modules/@react-aria/dialog/dist/useDialog.es.js";
+import { FocusScope as x } from "../../node_modules/@react-aria/focus/dist/FocusScope.es.js";
+import { mergeProps as h } from "@react-aria/utils";
+import { usePreventScroll as g } from "../../node_modules/@react-aria/overlays/dist/usePreventScroll.es.js";
+import { useModalOverlay as v } from "../../node_modules/@react-aria/overlays/dist/useModalOverlay.es.js";
+import { useRef as f } from "react";
+import { useOverlayTriggerState as C } from "../../node_modules/@react-stately/overlays/dist/useOverlayTriggerState.es.js";
+import { useIsClosing as N } from "../../hooks/useIsClosing.es.js";
+import { Button as B } from "../Button/Button.es.js";
+/* empty css             */
+import { ScreenOverlay as P } from "../ScreenOverlay/ScreenOverlay.es.js";
+import { useBreakpoint as S } from "../../hooks/useBreakpoint.es.js";
+import { BREAKPOINTS as y } from "../../constants/breakpoint.es.js";
+import { csx as O } from "../../utils/string.es.js";
+const b = ({ children: t }) => /* @__PURE__ */ o.jsx("h2", { className: "proton-Modal__title", children: t }), M = ({ children: t }) => /* @__PURE__ */ o.jsx("h3", { className: "proton-Modal__subtitle", children: t }), j = ({ children: t }) => /* @__PURE__ */ o.jsx("div", { className: "proton-Modal__body", children: t }), A = (t) => /* @__PURE__ */ o.jsx("div", { className: "proton-Modal__action", children: /* @__PURE__ */ o.jsx(B, { ...t }) }), R = ({ children: t }) => /* @__PURE__ */ o.jsx(x, { autoFocus: !0, children: /* @__PURE__ */ o.jsx("div", { className: "proton-Modal__actions", children: t }) }), F = ({
+  title: t,
+  subtitle: s,
+  body: r,
+  onClose: a,
+  children: d,
+  isClosing: m,
+  "data-testid": p
+}) => {
+  const e = f(null), n = C({ isOpen: !0, onOpenChange: a }), { modalProps: u } = v(
+    {
+      isDismissable: !1
+      //handle dismiss behavior in useIsClosing
+    },
+    n,
+    e
+  ), { dialogProps: l } = _({ role: "dialog" }, e);
+  g();
+  const c = f(null), { buttonProps: i } = $(
+    {
+      onPress: a,
+      "aria-label": "Close"
+    },
+    c
+  );
+  return /* @__PURE__ */ o.jsx(x, { contain: !0, restoreFocus: !0, autoFocus: !0, children: /* @__PURE__ */ o.jsxs(
+    "div",
+    {
+      "data-testid": p,
+      className: O("proton-Modal", m && "proton-Modal--closing"),
+      ...h(u, l),
+      ref: e,
+      children: [
+        /* @__PURE__ */ o.jsx(
+          "button",
+          {
+            name: "Close",
+            className: "proton-Modal__close-button",
+            ...i,
+            ref: c,
+            children: "×"
+          }
+        ),
+        t && /* @__PURE__ */ o.jsx(b, { children: t }),
+        s && /* @__PURE__ */ o.jsx(M, { children: s }),
+        r && /* @__PURE__ */ o.jsx(j, { children: r }),
+        /* @__PURE__ */ o.jsx("div", { className: "proton-Modal__content", children: d })
+      ]
+    }
+  ) });
+}, I = ({
+  isOpen: t,
+  onClose: s,
+  title: r,
+  subtitle: a,
+  body: d,
+  children: m,
+  isOverlay: p = !0,
+  "data-testid": e
+}) => {
+  const n = f(null), { isClosing: u, handleClose: l } = N({
+    onClose: s,
+    overlayRef: n
+  }), c = S(y.MEDIUM);
+  if (!t) return null;
+  const i = /* @__PURE__ */ o.jsx(
+    F,
+    {
+      isOpen: t,
+      title: r,
+      subtitle: a,
+      body: d,
+      onClose: l,
+      isClosing: u,
+      "data-testid": e,
+      children: m
+    }
+  );
+  return p || c ? /* @__PURE__ */ o.jsx(P, { fadeIn: !0, ref: n, onClose: l, children: i }) : i;
+}, X = Object.assign(I, {
+  /**
+   * Renders a h2 styled title
+   * */
+  Title: b,
+  /**
+   * Renders a h3 styled subtitle
+   * */
+  Subtitle: M,
+  /**
+   * Renders a div styled body
+   * */
+  Body: j,
+  /**
+   * Renders a Proton Button action
+   * - @prop buttonProps {@link ButtonProps}
+   * */
+  Action: A,
+  /**
+   * Renders a group of Proton Buttons
+   * */
+  Actions: R
+});
+export {
+  X as Modal
+};
+//# sourceMappingURL=Modal.es.js.map

package/dist/components/Modal/Modal.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.es.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useButton } from \"@react-aria/button\";\r\nimport { useDialog } from \"@react-aria/dialog\";\r\nimport { FocusScope } from \"@react-aria/focus\";\r\nimport { useModalOverlay, usePreventScroll } from \"@react-aria/overlays\";\r\nimport { mergeProps } from \"@react-aria/utils\";\r\nimport { useRef } from \"react\";\r\nimport { useOverlayTriggerState } from \"@react-stately/overlays\";\r\nimport { BREAKPOINTS } from \"../../constants\";\r\nimport { useBreakpoint } from \"../../hooks\";\r\nimport { useIsClosing } from \"../../hooks/useIsClosing\";\r\nimport { csx } from \"../../utils\";\r\nimport { Button, ButtonProps } from \"../Button/Button\";\r\nimport \"./Modal.css\";\r\nimport { ScreenOverlay } from \"../ScreenOverlay/ScreenOverlay\";\r\n\r\nconst ModalTitle = ({ children }: { children: React.ReactNode }) => {\r\n  return <h2 className=\"proton-Modal__title\">{children}</h2>;\r\n};\r\n\r\nconst ModalSubtitle = ({ children }: { children: React.ReactNode }) => {\r\n  return <h3 className=\"proton-Modal__subtitle\">{children}</h3>;\r\n};\r\n\r\nconst ModalBody = ({ children }: { children: React.ReactNode }) => {\r\n  return <div className=\"proton-Modal__body\">{children}</div>;\r\n};\r\n\r\nconst ModalAction = (buttonProps: ButtonProps) => {\r\n  return (\r\n    <div className=\"proton-Modal__action\">\r\n      <Button {...buttonProps} />\r\n    </div>\r\n  );\r\n};\r\n\r\nconst ModalActions = ({ children }: { children: React.ReactNode }) => {\r\n  return (\r\n    <FocusScope autoFocus>\r\n      <div className=\"proton-Modal__actions\">{children}</div>\r\n    </FocusScope>\r\n  );\r\n};\r\n\r\nconst ModalContent = ({\r\n  title,\r\n  subtitle,\r\n  body,\r\n  onClose,\r\n  children,\r\n  isClosing,\r\n  \"data-testid\": dataTestId,\r\n}: ModalProps & {\r\n  isClosing: boolean;\r\n}) => {\r\n  const ref = useRef<HTMLDivElement>(null);\r\n  const state = useOverlayTriggerState({ isOpen: true, onOpenChange: onClose });\r\n  const { modalProps } = useModalOverlay(\r\n    {\r\n      isDismissable: false, //handle dismiss behavior in useIsClosing\r\n    },\r\n    state,\r\n    ref\r\n  );\r\n\r\n  const { dialogProps } = useDialog({ role: \"dialog\" }, ref);\r\n  usePreventScroll();\r\n\r\n  const closeButtonRef = useRef<HTMLButtonElement>(null);\r\n  const { buttonProps: closeButtonProps } = useButton(\r\n    {\r\n      onPress: onClose,\r\n      \"aria-label\": \"Close\",\r\n    },\r\n    closeButtonRef\r\n  );\r\n\r\n  return (\r\n    <FocusScope contain restoreFocus autoFocus>\r\n      <div\r\n        data-testid={dataTestId}\r\n        className={csx(\"proton-Modal\", isClosing && \"proton-Modal--closing\")}\r\n        {...mergeProps(modalProps, dialogProps)}\r\n        ref={ref}\r\n      >\r\n        <button\r\n          name=\"Close\"\r\n          className=\"proton-Modal__close-button\"\r\n          {...closeButtonProps}\r\n          ref={closeButtonRef}\r\n        >\r\n          ×\r\n        </button>\r\n        {title && <ModalTitle>{title}</ModalTitle>}\r\n        {subtitle && <ModalSubtitle>{subtitle}</ModalSubtitle>}\r\n        {body && <ModalBody>{body}</ModalBody>}\r\n        <div className=\"proton-Modal__content\">{children}</div>\r\n      </div>\r\n    </FocusScope>\r\n  );\r\n};\r\n\r\nexport interface ModalProps {\r\n  /**\r\n   * Optional body text content for the modal\r\n   * */\r\n  body?: string;\r\n  /**\r\n   * Content to render inside the modal\r\n   * */\r\n  children: React.ReactNode;\r\n  /**\r\n   * data-testid for the modal\r\n   * */\r\n  \"data-testid\"?: string;\r\n  /**\r\n   * Controls the visibility of the modal\r\n   * */\r\n  isOpen: boolean;\r\n  /**\r\n   * Whether to show the modal with an overlay background.\r\n   * @default true\r\n   * */\r\n  isOverlay?: boolean;\r\n  /**\r\n   * Callback function when modal is closed\r\n   * */\r\n  onClose?: () => void;\r\n  /**\r\n   * Optional subtitle text below the modal title\r\n   * */\r\n  subtitle?: string;\r\n  /**\r\n   * Optional title text for the modal header\r\n   * */\r\n  title?: string;\r\n}\r\n\r\n/**\r\n * Modal component with overlay support and responsive behavior.\r\n *\r\n * API:\r\n *  - {@link ModalProps}\r\n */\r\nconst ModalWrapper = ({\r\n  isOpen,\r\n  onClose,\r\n  title,\r\n  subtitle,\r\n  body,\r\n  children,\r\n  isOverlay = true,\r\n  \"data-testid\": dataTestId,\r\n}: ModalProps) => {\r\n  const overlayRef = useRef<HTMLDivElement>(null);\r\n  const { isClosing, handleClose } = useIsClosing({\r\n    onClose,\r\n    overlayRef,\r\n  });\r\n  const isMobile = useBreakpoint(BREAKPOINTS.MEDIUM);\r\n\r\n  if (!isOpen) return null;\r\n\r\n  const modalContent = (\r\n    <ModalContent\r\n      isOpen={isOpen}\r\n      title={title}\r\n      subtitle={subtitle}\r\n      body={body}\r\n      onClose={handleClose}\r\n      isClosing={isClosing}\r\n      data-testid={dataTestId}\r\n    >\r\n      {children}\r\n    </ModalContent>\r\n  );\r\n\r\n  return isOverlay || isMobile ? (\r\n    <ScreenOverlay fadeIn ref={overlayRef} onClose={handleClose}>\r\n      {modalContent}\r\n    </ScreenOverlay>\r\n  ) : (\r\n    modalContent\r\n  );\r\n};\r\n\r\nexport const Modal = Object.assign(ModalWrapper, {\r\n  /**\r\n   * Renders a h2 styled title\r\n   * */\r\n  Title: ModalTitle,\r\n  /**\r\n   * Renders a h3 styled subtitle\r\n   * */\r\n  Subtitle: ModalSubtitle,\r\n  /**\r\n   * Renders a div styled body\r\n   * */\r\n  Body: ModalBody,\r\n  /**\r\n   * Renders a Proton Button action\r\n   * - @prop buttonProps {@link ButtonProps}\r\n   * */\r\n  Action: ModalAction,\r\n  /**\r\n   * Renders a group of Proton Buttons\r\n   * */\r\n  Actions: ModalActions,\r\n});\r\n"],"names":["ModalTitle","children","jsx","ModalSubtitle","ModalBody","ModalAction","buttonProps","Button","ModalActions","FocusScope","ModalContent","title","subtitle","body","onClose","isClosing","dataTestId","ref","useRef","state","useOverlayTriggerState","modalProps","useModalOverlay","dialogProps","useDialog","usePreventScroll","closeButtonRef","closeButtonProps","useButton","jsxs","csx","mergeProps","ModalWrapper","isOpen","isOverlay","overlayRef","handleClose","useIsClosing","isMobile","useBreakpoint","BREAKPOINTS","modalContent","ScreenOverlay","Modal"],"mappings":"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"}

package/dist/components/Popover/Popover.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../node_modules/react/jsx-runtime.cjs.js"),c=require("react"),m=require("../../node_modules/@react-aria/overlays/dist/useOverlayTrigger.cjs.js"),j=require("../../node_modules/@react-aria/overlays/dist/DismissButton.cjs.js"),y=require("../../node_modules/@react-aria/overlays/dist/usePopover.cjs.js"),P=require("../../node_modules/@react-aria/overlays/dist/Overlay.cjs.js"),R=require("../../node_modules/@react-aria/button/dist/useButton.cjs.js"),f=require("../../node_modules/@react-stately/overlays/dist/useOverlayTriggerState.cjs.js"),q=require("../ThemeProvider.cjs.js");;/* empty css                 */const T=require("../../utils/string.cjs.js");function h(o){const r=c.useRef(null),t=f.useOverlayTriggerState(o||{}),{triggerProps:i,overlayProps:s}=m.useOverlayTrigger({type:"dialog"},t,r),{buttonProps:n}=R.useButton(i,r);return{buttonProps:n,overlayProps:s,buttonRef:r,state:t}}function p({children:o,state:r,arrow:t=!1,offset:i,...s}){const n=c.useRef(null),{popoverRef:u=n}=s,{className:x,style:v}=q.useTheme();let{popoverProps:a,underlayProps:d,arrowProps:g,placement:l}=y.usePopover({...s,offset:i,popoverRef:u},r);return e.jsxRuntimeExports.jsxs(P.Overlay,{children:[e.jsxRuntimeExports.jsx("div",{...d,style:{position:"fixed",inset:0}}),e.jsxRuntimeExports.jsxs("div",{...a,ref:u,className:T.csx("proton-Popover",x),style:{...a.style,...v},"data-testid":s["data-testid"]||void 0,"data-placement":l,"data-entering":!0,children:[e.jsxRuntimeExports.jsx(j.DismissButton,{onDismiss:r.close}),t&&e.jsxRuntimeExports.jsxs("svg",{...g,className:"arrow","data-placement":l,viewBox:"0 0 12 12",children:[e.jsxRuntimeExports.jsx("title",{children:"arrow"}),e.jsxRuntimeExports.jsx("path",{d:"M0 0 L6 6 L12 0"})]}),o]})]})}p.displayName="Popover";exports.Popover=p;exports.usePopoverTrigger=h;
+//# sourceMappingURL=Popover.cjs.js.map

package/dist/components/Popover/Popover.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.cjs.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useRef } from \"react\";\r\nimport type { AriaPopoverProps } from \"@react-aria/overlays\";\r\nimport { DismissButton, Overlay, usePopover } from \"@react-aria/overlays\";\r\nimport { useButton } from \"@react-aria/button\";\r\nimport { useOverlayTrigger } from \"@react-aria/overlays\";\r\nimport {\r\n  OverlayTriggerProps,\r\n  useOverlayTriggerState,\r\n  type OverlayTriggerState,\r\n} from \"@react-stately/overlays\";\r\nimport { csx } from \"../../utils\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\n\r\nimport \"./Popover.css\";\r\n\r\n/**\r\n * Hook for creating a popover trigger. This hook manages the state and events for the popover\r\n * and popover trigger. For examples see Popover.stories.tsx.\r\n *\r\n * API:\r\n *  - {@link OverlayTriggerProps}\r\n *\r\n * @example\r\n * ```tsx\r\n * let { buttonProps, overlayProps, buttonRef, state } = usePopoverTrigger();\r\n *\r\n * return (\r\n *   <div>\r\n *     <button {...buttonProps} ref={buttonRef}>\r\n *       Trigger\r\n *     </button>\r\n *\r\n *     {state.isOpen && (\r\n *       <Popover\r\n *         state={state}\r\n *         triggerRef={buttonRef}\r\n *         arrow={props.arrow}\r\n *         offset={props.offset}\r\n *         placement={props.placement}\r\n *       >\r\n *         <Dialog {...overlayProps} title=\"Popover\">\r\n *           Here is some popover content\r\n *         </Dialog>\r\n *       </Popover>\r\n *     )}\r\n *   </div>\r\n * );\r\n * ```\r\n */\r\nexport function usePopoverTrigger(props?: OverlayTriggerProps) {\r\n  const triggerRef = useRef<HTMLButtonElement>(null);\r\n\r\n  const state = useOverlayTriggerState(props || {});\r\n  const { triggerProps, overlayProps } = useOverlayTrigger(\r\n    { type: \"dialog\" },\r\n    state,\r\n    triggerRef\r\n  );\r\n  const { buttonProps } = useButton(triggerProps, triggerRef);\r\n\r\n  return { buttonProps, overlayProps, buttonRef: triggerRef, state };\r\n}\r\n\r\ninterface PopoverProps extends Omit<AriaPopoverProps, \"popoverRef\"> {\r\n  /**\r\n   * Whether to show an arrow on the popover.\r\n   */\r\n  arrow?: boolean;\r\n  /**\r\n   * Content to display within the popover.\r\n   */\r\n  children: React.ReactNode;\r\n  /**\r\n   * Can optionally forward the ref to the popover.\r\n   */\r\n  popoverRef?: React.RefObject<HTMLDivElement>;\r\n  /**\r\n   * The `isOpen` state of the popover and the methods to toggle it.\r\n   * - type {@link OverlayTriggerState}\r\n   */\r\n  state: OverlayTriggerState;\r\n}\r\n\r\n/**\r\n * Popover is an unstyled popover component that handles positioning. It should be used\r\n * with the Dialog component to provide a styled popover.\r\n *\r\n * A popover displays interactive content in context with a trigger element.\r\n * A tooltip displays a description of an element on hover or focus.\r\n *\r\n * @see {@link usePopoverTrigger} for a complete usage example\r\n *\r\n * API:\r\n *  - {@link PopoverProps}\r\n *  - extends {@link AriaPopoverProps}\r\n */\r\nexport function Popover({\r\n  children,\r\n  state,\r\n  arrow = false,\r\n  offset,\r\n  ...props\r\n}: PopoverProps) {\r\n  const ref = useRef<HTMLDivElement>(null);\r\n  const { popoverRef = ref } = props;\r\n  const { className, style } = useTheme();\r\n\r\n  let { popoverProps, underlayProps, arrowProps, placement } = usePopover(\r\n    {\r\n      ...props,\r\n      offset,\r\n      popoverRef,\r\n    },\r\n    state\r\n  );\r\n\r\n  return (\r\n    <Overlay>\r\n      <div {...underlayProps} style={{ position: \"fixed\", inset: 0 }} />\r\n      <div\r\n        {...popoverProps}\r\n        ref={popoverRef}\r\n        className={csx(\"proton-Popover\", className)}\r\n        style={{ ...popoverProps.style, ...style }}\r\n        data-testid={props[\"data-testid\"] || undefined}\r\n        data-placement={placement}\r\n        data-entering={true}\r\n      >\r\n        <DismissButton onDismiss={state.close} />\r\n        {arrow && (\r\n          <svg\r\n            {...arrowProps}\r\n            className=\"arrow\"\r\n            data-placement={placement}\r\n            viewBox=\"0 0 12 12\"\r\n          >\r\n            <title>arrow</title>\r\n            <path d=\"M0 0 L6 6 L12 0\" />\r\n          </svg>\r\n        )}\r\n        {children}\r\n      </div>\r\n    </Overlay>\r\n  );\r\n}\r\n\r\nPopover.displayName = \"Popover\";\r\n"],"names":["usePopoverTrigger","props","triggerRef","useRef","state","useOverlayTriggerState","triggerProps","overlayProps","useOverlayTrigger","buttonProps","useButton","Popover","children","arrow","offset","ref","popoverRef","className","style","useTheme","popoverProps","underlayProps","arrowProps","placement","usePopover","Overlay","jsx","jsxs","csx","DismissButton"],"mappings":"+uBAmDO,SAASA,EAAkBC,EAA6B,CACvD,MAAAC,EAAaC,SAA0B,IAAI,EAE3CC,EAAQC,EAAAA,uBAAuBJ,GAAS,CAAE,CAAA,EAC1C,CAAE,aAAAK,EAAc,aAAAC,CAAA,EAAiBC,EAAA,kBACrC,CAAE,KAAM,QAAS,EACjBJ,EACAF,CAAA,EAEI,CAAE,YAAAO,CAAgB,EAAAC,EAAA,UAAUJ,EAAcJ,CAAU,EAE1D,MAAO,CAAE,YAAAO,EAAa,aAAAF,EAAc,UAAWL,EAAY,MAAAE,CAAM,CACnE,CAmCO,SAASO,EAAQ,CACtB,SAAAC,EACA,MAAAR,EACA,MAAAS,EAAQ,GACR,OAAAC,EACA,GAAGb,CACL,EAAiB,CACT,MAAAc,EAAMZ,SAAuB,IAAI,EACjC,CAAE,WAAAa,EAAaD,CAAQ,EAAAd,EACvB,CAAE,UAAAgB,EAAW,MAAAC,CAAM,EAAIC,EAAS,SAAA,EAEtC,GAAI,CAAE,aAAAC,EAAc,cAAAC,EAAe,WAAAC,EAAY,UAAAC,CAAc,EAAAC,EAAA,WAC3D,CACE,GAAGvB,EACH,OAAAa,EACA,WAAAE,CACF,EACAZ,CAAA,EAGF,gCACGqB,UACC,CAAA,SAAA,CAACC,EAAAA,kBAAAA,IAAA,MAAA,CAAK,GAAGL,EAAe,MAAO,CAAE,SAAU,QAAS,MAAO,CAAA,EAAK,EAChEM,EAAA,kBAAA,KAAC,MAAA,CACE,GAAGP,EACJ,IAAKJ,EACL,UAAWY,EAAAA,IAAI,iBAAkBX,CAAS,EAC1C,MAAO,CAAE,GAAGG,EAAa,MAAO,GAAGF,CAAM,EACzC,cAAajB,EAAM,aAAa,GAAK,OACrC,iBAAgBsB,EAChB,gBAAe,GAEf,SAAA,CAACG,EAAAA,kBAAAA,IAAAG,EAAAA,cAAA,CAAc,UAAWzB,EAAM,KAAO,CAAA,EACtCS,GACCc,EAAA,kBAAA,KAAC,MAAA,CACE,GAAGL,EACJ,UAAU,QACV,iBAAgBC,EAChB,QAAQ,YAER,SAAA,CAAAG,EAAAA,kBAAAA,IAAC,SAAM,SAAK,OAAA,CAAA,EACZA,EAAAA,kBAAAA,IAAC,OAAK,CAAA,EAAE,iBAAkB,CAAA,CAAA,CAAA,CAC5B,EAEDd,CAAA,CAAA,CACH,CACF,CAAA,CAAA,CAEJ,CAEAD,EAAQ,YAAc"}

package/dist/components/Popover/Popover.es.js

@@ -0,0 +1,74 @@
+import { j as e } from "../../node_modules/react/jsx-runtime.es.js";
+import { useRef as m } from "react";
+import { useOverlayTrigger as x } from "../../node_modules/@react-aria/overlays/dist/useOverlayTrigger.es.js";
+import { DismissButton as $ } from "../../node_modules/@react-aria/overlays/dist/DismissButton.es.js";
+import { usePopover as v } from "../../node_modules/@react-aria/overlays/dist/usePopover.es.js";
+import { Overlay as b } from "../../node_modules/@react-aria/overlays/dist/Overlay.es.js";
+import { useButton as g } from "../../node_modules/@react-aria/button/dist/useButton.es.js";
+import { useOverlayTriggerState as y } from "../../node_modules/@react-stately/overlays/dist/useOverlayTriggerState.es.js";
+import { useTheme as P } from "../ThemeProvider.es.js";
+/* empty css               */
+import { csx as j } from "../../utils/string.es.js";
+function k(s) {
+  const r = m(null), t = y(s || {}), { triggerProps: a, overlayProps: o } = x(
+    { type: "dialog" },
+    t,
+    r
+  ), { buttonProps: i } = g(a, r);
+  return { buttonProps: i, overlayProps: o, buttonRef: r, state: t };
+}
+function h({
+  children: s,
+  state: r,
+  arrow: t = !1,
+  offset: a,
+  ...o
+}) {
+  const i = m(null), { popoverRef: p = i } = o, { className: f, style: d } = P();
+  let { popoverProps: n, underlayProps: l, arrowProps: u, placement: c } = v(
+    {
+      ...o,
+      offset: a,
+      popoverRef: p
+    },
+    r
+  );
+  return /* @__PURE__ */ e.jsxs(b, { children: [
+    /* @__PURE__ */ e.jsx("div", { ...l, style: { position: "fixed", inset: 0 } }),
+    /* @__PURE__ */ e.jsxs(
+      "div",
+      {
+        ...n,
+        ref: p,
+        className: j("proton-Popover", f),
+        style: { ...n.style, ...d },
+        "data-testid": o["data-testid"] || void 0,
+        "data-placement": c,
+        "data-entering": !0,
+        children: [
+          /* @__PURE__ */ e.jsx($, { onDismiss: r.close }),
+          t && /* @__PURE__ */ e.jsxs(
+            "svg",
+            {
+              ...u,
+              className: "arrow",
+              "data-placement": c,
+              viewBox: "0 0 12 12",
+              children: [
+                /* @__PURE__ */ e.jsx("title", { children: "arrow" }),
+                /* @__PURE__ */ e.jsx("path", { d: "M0 0 L6 6 L12 0" })
+              ]
+            }
+          ),
+          s
+        ]
+      }
+    )
+  ] });
+}
+h.displayName = "Popover";
+export {
+  h as Popover,
+  k as usePopoverTrigger
+};
+//# sourceMappingURL=Popover.es.js.map

package/dist/components/Popover/Popover.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.es.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useRef } from \"react\";\r\nimport type { AriaPopoverProps } from \"@react-aria/overlays\";\r\nimport { DismissButton, Overlay, usePopover } from \"@react-aria/overlays\";\r\nimport { useButton } from \"@react-aria/button\";\r\nimport { useOverlayTrigger } from \"@react-aria/overlays\";\r\nimport {\r\n  OverlayTriggerProps,\r\n  useOverlayTriggerState,\r\n  type OverlayTriggerState,\r\n} from \"@react-stately/overlays\";\r\nimport { csx } from \"../../utils\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\n\r\nimport \"./Popover.css\";\r\n\r\n/**\r\n * Hook for creating a popover trigger. This hook manages the state and events for the popover\r\n * and popover trigger. For examples see Popover.stories.tsx.\r\n *\r\n * API:\r\n *  - {@link OverlayTriggerProps}\r\n *\r\n * @example\r\n * ```tsx\r\n * let { buttonProps, overlayProps, buttonRef, state } = usePopoverTrigger();\r\n *\r\n * return (\r\n *   <div>\r\n *     <button {...buttonProps} ref={buttonRef}>\r\n *       Trigger\r\n *     </button>\r\n *\r\n *     {state.isOpen && (\r\n *       <Popover\r\n *         state={state}\r\n *         triggerRef={buttonRef}\r\n *         arrow={props.arrow}\r\n *         offset={props.offset}\r\n *         placement={props.placement}\r\n *       >\r\n *         <Dialog {...overlayProps} title=\"Popover\">\r\n *           Here is some popover content\r\n *         </Dialog>\r\n *       </Popover>\r\n *     )}\r\n *   </div>\r\n * );\r\n * ```\r\n */\r\nexport function usePopoverTrigger(props?: OverlayTriggerProps) {\r\n  const triggerRef = useRef<HTMLButtonElement>(null);\r\n\r\n  const state = useOverlayTriggerState(props || {});\r\n  const { triggerProps, overlayProps } = useOverlayTrigger(\r\n    { type: \"dialog\" },\r\n    state,\r\n    triggerRef\r\n  );\r\n  const { buttonProps } = useButton(triggerProps, triggerRef);\r\n\r\n  return { buttonProps, overlayProps, buttonRef: triggerRef, state };\r\n}\r\n\r\ninterface PopoverProps extends Omit<AriaPopoverProps, \"popoverRef\"> {\r\n  /**\r\n   * Whether to show an arrow on the popover.\r\n   */\r\n  arrow?: boolean;\r\n  /**\r\n   * Content to display within the popover.\r\n   */\r\n  children: React.ReactNode;\r\n  /**\r\n   * Can optionally forward the ref to the popover.\r\n   */\r\n  popoverRef?: React.RefObject<HTMLDivElement>;\r\n  /**\r\n   * The `isOpen` state of the popover and the methods to toggle it.\r\n   * - type {@link OverlayTriggerState}\r\n   */\r\n  state: OverlayTriggerState;\r\n}\r\n\r\n/**\r\n * Popover is an unstyled popover component that handles positioning. It should be used\r\n * with the Dialog component to provide a styled popover.\r\n *\r\n * A popover displays interactive content in context with a trigger element.\r\n * A tooltip displays a description of an element on hover or focus.\r\n *\r\n * @see {@link usePopoverTrigger} for a complete usage example\r\n *\r\n * API:\r\n *  - {@link PopoverProps}\r\n *  - extends {@link AriaPopoverProps}\r\n */\r\nexport function Popover({\r\n  children,\r\n  state,\r\n  arrow = false,\r\n  offset,\r\n  ...props\r\n}: PopoverProps) {\r\n  const ref = useRef<HTMLDivElement>(null);\r\n  const { popoverRef = ref } = props;\r\n  const { className, style } = useTheme();\r\n\r\n  let { popoverProps, underlayProps, arrowProps, placement } = usePopover(\r\n    {\r\n      ...props,\r\n      offset,\r\n      popoverRef,\r\n    },\r\n    state\r\n  );\r\n\r\n  return (\r\n    <Overlay>\r\n      <div {...underlayProps} style={{ position: \"fixed\", inset: 0 }} />\r\n      <div\r\n        {...popoverProps}\r\n        ref={popoverRef}\r\n        className={csx(\"proton-Popover\", className)}\r\n        style={{ ...popoverProps.style, ...style }}\r\n        data-testid={props[\"data-testid\"] || undefined}\r\n        data-placement={placement}\r\n        data-entering={true}\r\n      >\r\n        <DismissButton onDismiss={state.close} />\r\n        {arrow && (\r\n          <svg\r\n            {...arrowProps}\r\n            className=\"arrow\"\r\n            data-placement={placement}\r\n            viewBox=\"0 0 12 12\"\r\n          >\r\n            <title>arrow</title>\r\n            <path d=\"M0 0 L6 6 L12 0\" />\r\n          </svg>\r\n        )}\r\n        {children}\r\n      </div>\r\n    </Overlay>\r\n  );\r\n}\r\n\r\nPopover.displayName = \"Popover\";\r\n"],"names":["usePopoverTrigger","props","triggerRef","useRef","state","useOverlayTriggerState","triggerProps","overlayProps","useOverlayTrigger","buttonProps","useButton","Popover","children","arrow","offset","ref","popoverRef","className","style","useTheme","popoverProps","underlayProps","arrowProps","placement","usePopover","Overlay","jsx","jsxs","csx","DismissButton"],"mappings":";;;;;;;;;;;AAmDO,SAASA,EAAkBC,GAA6B;AACvD,QAAAC,IAAaC,EAA0B,IAAI,GAE3CC,IAAQC,EAAuBJ,KAAS,CAAE,CAAA,GAC1C,EAAE,cAAAK,GAAc,cAAAC,EAAA,IAAiBC;AAAAA,IACrC,EAAE,MAAM,SAAS;AAAA,IACjBJ;AAAA,IACAF;AAAA,EAAA,GAEI,EAAE,aAAAO,EAAgB,IAAAC,EAAUJ,GAAcJ,CAAU;AAE1D,SAAO,EAAE,aAAAO,GAAa,cAAAF,GAAc,WAAWL,GAAY,OAAAE,EAAM;AACnE;AAmCO,SAASO,EAAQ;AAAA,EACtB,UAAAC;AAAA,EACA,OAAAR;AAAA,EACA,OAAAS,IAAQ;AAAA,EACR,QAAAC;AAAA,EACA,GAAGb;AACL,GAAiB;AACT,QAAAc,IAAMZ,EAAuB,IAAI,GACjC,EAAE,YAAAa,IAAaD,EAAQ,IAAAd,GACvB,EAAE,WAAAgB,GAAW,OAAAC,EAAM,IAAIC,EAAS;AAEtC,MAAI,EAAE,cAAAC,GAAc,eAAAC,GAAe,YAAAC,GAAY,WAAAC,EAAc,IAAAC;AAAAA,IAC3D;AAAA,MACE,GAAGvB;AAAA,MACH,QAAAa;AAAA,MACA,YAAAE;AAAA,IACF;AAAA,IACAZ;AAAA,EAAA;AAGF,gCACGqB,GACC,EAAA,UAAA;AAAA,IAACC,gBAAAA,EAAAA,IAAA,OAAA,EAAK,GAAGL,GAAe,OAAO,EAAE,UAAU,SAAS,OAAO,EAAA,GAAK;AAAA,IAChEM,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGP;AAAA,QACJ,KAAKJ;AAAA,QACL,WAAWY,EAAI,kBAAkBX,CAAS;AAAA,QAC1C,OAAO,EAAE,GAAGG,EAAa,OAAO,GAAGF,EAAM;AAAA,QACzC,eAAajB,EAAM,aAAa,KAAK;AAAA,QACrC,kBAAgBsB;AAAA,QAChB,iBAAe;AAAA,QAEf,UAAA;AAAA,UAACG,gBAAAA,EAAAA,IAAAG,GAAA,EAAc,WAAWzB,EAAM,MAAO,CAAA;AAAA,UACtCS,KACCc,gBAAAA,EAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAGL;AAAA,cACJ,WAAU;AAAA,cACV,kBAAgBC;AAAA,cAChB,SAAQ;AAAA,cAER,UAAA;AAAA,gBAAAG,gBAAAA,EAAAA,IAAC,WAAM,UAAK,QAAA,CAAA;AAAA,gBACZA,gBAAAA,EAAAA,IAAC,QAAK,EAAA,GAAE,kBAAkB,CAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAC5B;AAAA,UAEDd;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EACF,EAAA,CAAA;AAEJ;AAEAD,EAAQ,cAAc;"}

package/dist/components/ScreenOverlay/ScreenOverlay.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../node_modules/react/jsx-runtime.cjs.js"),n=require("react");;/* empty css                       */const m=require("radix-ui"),a=require("../ThemeProvider.cjs.js"),y=require("../../utils/string.cjs.js"),i=n.forwardRef(({fadeIn:o=!1,onClose:e,children:c},s)=>{const{theme:d,palette:u}=a.useTheme();return n.useEffect(()=>{if(!e)return;const r=l=>{l.key==="Escape"&&e()};return document.addEventListener("keydown",r),()=>{document.removeEventListener("keydown",r)}},[e]),t.jsxRuntimeExports.jsx(m.Portal.Root,{children:t.jsxRuntimeExports.jsx(a.ThemeProvider,{theme:d,palette:u,children:t.jsxRuntimeExports.jsx("div",{ref:s,id:"background","aria-label":"Background overlay",role:"dialog","aria-modal":"true","data-testid":"screen-overlay",className:y.csx("proton-ScreenOverlay__background","proton-ScreenOverlay__z-index",o&&"proton-ScreenOverlay__fade-in"),onClick:r=>{e&&r.target===r.currentTarget&&e()},children:c})})})});i.displayName="ProtonUIScreenOverlay";exports.ScreenOverlay=i;
+//# sourceMappingURL=ScreenOverlay.cjs.js.map

package/dist/components/ScreenOverlay/ScreenOverlay.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenOverlay.cjs.js","sources":["../../../src/components/ScreenOverlay/ScreenOverlay.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { forwardRef, useEffect } from \"react\";\r\nimport \"./ScreenOverlay.css\";\r\nimport { csx } from \"../../utils\";\r\nimport { Portal } from \"radix-ui\";\r\nimport { useTheme, ThemeProvider } from \"../ThemeProvider\";\r\n\r\ninterface ScreenOverlayProps {\r\n  /**\r\n   * Children to render inside the overlay.\r\n   */\r\n  children?: React.ReactNode;\r\n\r\n  /**\r\n   * Whether to fade in the overlay.\r\n   */\r\n  fadeIn?: boolean;\r\n\r\n  /**\r\n   * Callback function to handle events (click or ESC key).\r\n   */\r\n  onClose?: () => void;\r\n\r\n  /**\r\n   * Ref to the overlay element.\r\n   */\r\n  ref?: React.RefObject<HTMLDivElement>;\r\n}\r\n\r\n/**\r\n * Base Overlay component for creating modal-like backgrounds.\r\n *\r\n * API:\r\n *  - {@link ScreenOverlayProps}\r\n */\r\nexport const ScreenOverlay = forwardRef<HTMLDivElement, ScreenOverlayProps>(\r\n  ({ fadeIn = false, onClose, children }, ref) => {\r\n    const { theme, palette } = useTheme();\r\n\r\n    useEffect(() => {\r\n      if (!onClose) return;\r\n\r\n      const handleEscKey = (event: KeyboardEvent) => {\r\n        if (event.key === \"Escape\") onClose();\r\n      };\r\n\r\n      document.addEventListener(\"keydown\", handleEscKey);\r\n      return () => {\r\n        document.removeEventListener(\"keydown\", handleEscKey);\r\n      };\r\n    }, [onClose]);\r\n\r\n    return (\r\n      <Portal.Root>\r\n        <ThemeProvider theme={theme} palette={palette}>\r\n          <div\r\n            ref={ref}\r\n            id=\"background\"\r\n            aria-label=\"Background overlay\"\r\n            role=\"dialog\"\r\n            aria-modal=\"true\"\r\n            data-testid=\"screen-overlay\"\r\n            className={csx(\r\n              \"proton-ScreenOverlay__background\",\r\n              \"proton-ScreenOverlay__z-index\",\r\n              fadeIn && \"proton-ScreenOverlay__fade-in\"\r\n            )}\r\n            onClick={(event: React.MouseEvent) => {\r\n              if (!onClose) return;\r\n\r\n              // Only trigger onClose if the click was directly on the background element\r\n              if (event.target === event.currentTarget) {\r\n                onClose();\r\n              }\r\n            }}\r\n          >\r\n            {children}\r\n          </div>\r\n        </ThemeProvider>\r\n      </Portal.Root>\r\n    );\r\n  }\r\n);\r\n\r\nScreenOverlay.displayName = \"ProtonUIScreenOverlay\";\r\n"],"names":["ScreenOverlay","forwardRef","fadeIn","onClose","children","ref","theme","palette","useTheme","useEffect","handleEscKey","event","Portal","jsx","ThemeProvider","csx"],"mappings":"gTAoCaA,EAAgBC,EAAA,WAC3B,CAAC,CAAE,OAAAC,EAAS,GAAO,QAAAC,EAAS,SAAAC,CAAA,EAAYC,IAAQ,CAC9C,KAAM,CAAE,MAAAC,EAAO,QAAAC,CAAQ,EAAIC,EAAS,SAAA,EAEpCC,OAAAA,EAAAA,UAAU,IAAM,CACd,GAAI,CAACN,EAAS,OAER,MAAAO,EAAgBC,GAAyB,CACzCA,EAAM,MAAQ,UAAkBR,EAAA,CAAA,EAG7B,gBAAA,iBAAiB,UAAWO,CAAY,EAC1C,IAAM,CACF,SAAA,oBAAoB,UAAWA,CAAY,CAAA,CACtD,EACC,CAACP,CAAO,CAAC,0BAGTS,EAAAA,OAAO,KAAP,CACC,SAACC,wBAAAC,EAAAA,cAAA,CAAc,MAAAR,EAAc,QAAAC,EAC3B,SAAAM,EAAA,kBAAA,IAAC,MAAA,CACC,IAAAR,EACA,GAAG,aACH,aAAW,qBACX,KAAK,SACL,aAAW,OACX,cAAY,iBACZ,UAAWU,EAAA,IACT,mCACA,gCACAb,GAAU,+BACZ,EACA,QAAUS,GAA4B,CAC/BR,GAGDQ,EAAM,SAAWA,EAAM,eACjBR,GAEZ,EAEC,SAAAC,CAAA,CAAA,CAEL,CAAA,CACF,CAAA,CAEJ,CACF,EAEAJ,EAAc,YAAc"}