@reforma/components 0.0.0-stage → 0.1.0

package/dist/Modal/views/ModalResizeHandles.js

@@ -0,0 +1,44 @@
+import { Show as r } from "../../Show/Show.js";
+import { jsxs as i, Fragment as o, jsx as e } from "react/jsx-runtime";
+function s({
+  resizable: a,
+  handleClassName: t
+}) {
+  const d = a ? a.direction || "both" : !1;
+  return /* @__PURE__ */ i(o, {
+    children: [/* @__PURE__ */ e(r, {
+      when: d === "both" || d === "x",
+      children: /* @__PURE__ */ e("div", {
+        className: t,
+        "data-modal-resize-handle": !0,
+        "data-resize": "x"
+      })
+    }), /* @__PURE__ */ e(r, {
+      when: d === "both" || d === "y",
+      children: /* @__PURE__ */ e("div", {
+        className: t,
+        "data-modal-resize-handle": !0,
+        "data-resize": "y"
+      })
+    }), /* @__PURE__ */ e(r, {
+      when: d === "both",
+      children: /* @__PURE__ */ e("div", {
+        className: t,
+        "data-modal-resize-handle": !0,
+        "data-resize": "both",
+        children: /* @__PURE__ */ i("svg", {
+          viewBox: "0 0 16 16",
+          children: [/* @__PURE__ */ e("path", {
+            d: "M7 11.9497L11.9497 7L12.6569 7.70711L7.70711 12.6569L7 11.9497Z"
+          }), /* @__PURE__ */ e("path", {
+            d: "M2 11.8995L11.8995 2L12.6066 2.70711L2.70711 12.6066L2 11.8995Z"
+          })]
+        })
+      })
+    })]
+  });
+}
+export {
+  s as ModalResizeHandles
+};
+//# sourceMappingURL=ModalResizeHandles.js.map

package/dist/Modal/views/ModalResizeHandles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalResizeHandles.js","sources":["../../../src/Modal/views/ModalResizeHandles.tsx"],"sourcesContent":["import { Show } from '../../Show';\n\nimport type { ModalOptions } from '../typings';\n\nexport type ModalResizeHandlesProps = {\n    resizable?: ModalOptions['resizable'];\n    handleClassName?: string;\n};\n\nexport function ModalResizeHandles({ resizable, handleClassName }: ModalResizeHandlesProps) {\n    const direction = resizable ? (resizable.direction || 'both') : false;\n\n    return (\n        <>\n            <Show when={ direction === 'both' || direction === 'x' }>\n                <div className={ handleClassName } data-modal-resize-handle data-resize=\"x\" />\n            </Show>\n            <Show when={ direction === 'both' || direction === 'y' }>\n                <div className={ handleClassName } data-modal-resize-handle data-resize=\"y\" />\n            </Show>\n            <Show when={ direction === 'both' }>\n                <div className={ handleClassName } data-modal-resize-handle data-resize=\"both\">\n                    <svg viewBox=\"0 0 16 16\">\n                        <path d=\"M7 11.9497L11.9497 7L12.6569 7.70711L7.70711 12.6569L7 11.9497Z\" />\n                        <path d=\"M2 11.8995L11.8995 2L12.6066 2.70711L2.70711 12.6066L2 11.8995Z\" />\n                    </svg>\n                </div>\n            </Show>\n        </>\n    );\n}\n"],"names":["ModalResizeHandles","resizable","handleClassName","direction","_Fragment","_jsx","Show"],"mappings":";;AAEO,SAASA,EAAmB;AAAA,EACjC,WAAAC;AAAA,EACA,iBAAAC;AACF,GAAG;AACD,QAAMC,IAAYF,IAAYA,EAAU,aAAa,SAAS;AAC9D,2BAA0BG,GAAW;AAAA,IACnC,UAAU,CAAcC,gBAAAA,EAAKC,GAAM;AAAA,MACjC,MAAMH,MAAc,UAAUA,MAAc;AAAA,MAC5C,4BAA4B,OAAO;AAAA,QACjC,WAAWD;AAAA,QACX,4BAA4B;AAAA,QAC5B,eAAe;AAAA,MAAA,CAChB;AAAA,IAAA,CACF,GAAgBG,gBAAAA,EAAKC,GAAM;AAAA,MAC1B,MAAMH,MAAc,UAAUA,MAAc;AAAA,MAC5C,4BAA4B,OAAO;AAAA,QACjC,WAAWD;AAAA,QACX,4BAA4B;AAAA,QAC5B,eAAe;AAAA,MAAA,CAChB;AAAA,IAAA,CACF,GAAgBG,gBAAAA,EAAKC,GAAM;AAAA,MAC1B,MAAMH,MAAc;AAAA,MACpB,4BAA4B,OAAO;AAAA,QACjC,WAAWD;AAAA,QACX,4BAA4B;AAAA,QAC5B,eAAe;AAAA,QACf,4BAA6B,OAAO;AAAA,UAClC,SAAS;AAAA,UACT,UAAU,CAAcG,gBAAAA,EAAK,QAAQ;AAAA,YACnC,GAAG;AAAA,UAAA,CACJ,GAAgBA,gBAAAA,EAAK,QAAQ;AAAA,YAC5B,GAAG;AAAA,UAAA,CACJ,CAAC;AAAA,QAAA,CACH;AAAA,MAAA,CACF;AAAA,IAAA,CACF,CAAC;AAAA,EAAA,CACH;AACH;"}

package/dist/Modal/views/ModalResponsiveToggle.d.ts

@@ -0,0 +1,9 @@
+import type { ModalInstance } from '../typings';
+export type ModalResponsiveToggleProps = {
+    modal: ModalInstance;
+    className?: string;
+};
+export declare const ModalResponsiveToggle: (({ modal, className }: ModalResponsiveToggleProps) => import("react").JSX.Element) & import("react").NamedExoticComponent<ModalResponsiveToggleProps> & {
+    readonly type: ({ modal, className }: ModalResponsiveToggleProps) => import("react").JSX.Element;
+};
+//# sourceMappingURL=ModalResponsiveToggle.d.ts.map

package/dist/Modal/views/ModalResponsiveToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalResponsiveToggle.d.ts","sourceRoot":"","sources":["../../../src/Modal/views/ModalResponsiveToggle.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAmB,MAAM,YAAY,CAAC;AAEjE,MAAM,MAAM,0BAA0B,GAAG;IACrC,KAAK,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,qBAAqB,0BAAmC,0BAA0B;0CAA1B,0BAA0B;CAiD7F,CAAC"}

package/dist/Modal/views/ModalResponsiveToggle.js

@@ -0,0 +1,41 @@
+import { observer as v } from "mobx-react-lite";
+import { Show as u } from "../../Show/Show.js";
+import { ToggleButtonGroup as d, ToggleButtonGroupItem as g } from "../../ToggleButtonGroup/ToggleButtonGroup.js";
+import { jsx as i } from "react/jsx-runtime";
+const S = v(({
+  modal: n,
+  className: c
+}) => {
+  const r = n.currentOptions, l = r?.adaptive, p = r?.responsiveModes, t = !l || !p ? [] : Object.keys(l).map((e) => {
+    const o = p[e];
+    return o ? {
+      value: e,
+      icon: o.icon,
+      iconSize: o.iconSize,
+      tip: o.tip
+    } : null;
+  }).filter((e) => e !== null);
+  let s = n.responsiveMode;
+  t.some((e) => e.value === s) || (s = "all");
+  const a = t.length > 1;
+  return /* @__PURE__ */ i(u, {
+    when: a,
+    children: /* @__PURE__ */ i(d, {
+      variant: "transparent",
+      selectedKeys: s ?? void 0,
+      onSelectionChange: (e) => {
+        const o = e.values().next().value;
+        o != null && n.toggleResponsiveMode(String(o));
+      },
+      className: c,
+      children: t.map((e) => /* @__PURE__ */ i(g, {
+        value: e.value,
+        children: e.tip
+      }, e.value))
+    })
+  });
+});
+export {
+  S as ModalResponsiveToggle
+};
+//# sourceMappingURL=ModalResponsiveToggle.js.map

package/dist/Modal/views/ModalResponsiveToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalResponsiveToggle.js","sources":["../../../src/Modal/views/ModalResponsiveToggle.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite';\n\nimport { Show } from '../../Show';\nimport { ToggleButtonGroup, ToggleButtonGroupItem } from '../../ToggleButtonGroup';\n\nimport type { ModalInstance, ModalTabOptions } from '../typings';\n\nexport type ModalResponsiveToggleProps = {\n    modal: ModalInstance;\n    className?: string;\n};\n\nexport const ModalResponsiveToggle = observer(({ modal, className }: ModalResponsiveToggleProps) => {\n    const options = modal.currentOptions as ModalTabOptions;\n    const adaptive = options?.adaptive;\n    const responsiveModes = options?.responsiveModes;\n\n    const responsiveModesList = (!adaptive || !responsiveModes)\n        ? []\n        : Object.keys(adaptive)\n            .map((value) => {\n                const meta = responsiveModes[value];\n\n                if (!meta) {\n                    return null;\n                }\n\n                return { value, icon: meta.icon, iconSize: meta.iconSize, tip: meta.tip };\n            })\n            .filter((item): item is NonNullable<typeof item> => item !== null);\n\n    let responsiveMode = modal.responsiveMode;\n\n    if (!responsiveModesList.some(item => item.value === responsiveMode)) {\n        responsiveMode = 'all';\n    }\n\n    const showAdaptiveToggle = responsiveModesList.length > 1;\n\n    return (\n        <Show when={ showAdaptiveToggle }>\n            <ToggleButtonGroup\n                variant=\"transparent\"\n                selectedKeys={ responsiveMode ?? undefined }\n                onSelectionChange={ (keys) => {\n                    const key = keys.values().next().value;\n\n                    if (key != null) {\n                        modal.toggleResponsiveMode(String(key));\n                    }\n                } }\n                className={ className }\n            >\n                { responsiveModesList.map(item => (\n                    <ToggleButtonGroupItem key={ item.value } value={ item.value }>\n                        { item.tip }\n                    </ToggleButtonGroupItem>\n                )) }\n            </ToggleButtonGroup>\n        </Show>\n    );\n});\n"],"names":["ModalResponsiveToggle","observer","modal","className","options","adaptive","responsiveModes","responsiveModesList","value","meta","item","responsiveMode","showAdaptiveToggle","Show","ToggleButtonGroup","keys","key","ToggleButtonGroupItem"],"mappings":";;;;AAIO,MAAMA,IAAwBC,EAAS,CAAC;AAAA,EAC7C,OAAAC;AAAA,EACA,WAAAC;AACF,MAAM;AACJ,QAAMC,IAAUF,EAAM,gBAChBG,IAAWD,GAAS,UACpBE,IAAkBF,GAAS,iBAC3BG,IAAsB,CAACF,KAAY,CAACC,IAAkB,CAAA,IAAK,OAAO,KAAKD,CAAQ,EAAE,IAAI,CAAAG,MAAS;AAClG,UAAMC,IAAOH,EAAgBE,CAAK;AAClC,WAAKC,IAGE;AAAA,MACL,OAAAD;AAAA,MACA,MAAMC,EAAK;AAAA,MACX,UAAUA,EAAK;AAAA,MACf,KAAKA,EAAK;AAAA,IAAA,IANH;AAAA,EAQX,CAAC,EAAE,OAAO,CAAAC,MAAQA,MAAS,IAAI;AAC/B,MAAIC,IAAiBT,EAAM;AAC3B,EAAKK,EAAoB,KAAK,OAAQG,EAAK,UAAUC,CAAc,MACjEA,IAAiB;AAEnB,QAAMC,IAAqBL,EAAoB,SAAS;AACxD,2BAAyBM,GAAM;AAAA,IAC7B,MAAMD;AAAA,IACN,4BAA4BE,GAAmB;AAAA,MAC7C,SAAS;AAAA,MACT,cAAcH,KAAkB;AAAA,MAChC,mBAAmB,CAAAI,MAAQ;AACzB,cAAMC,IAAMD,EAAK,OAAA,EAAS,OAAO;AACjC,QAAIC,KAAO,QACTd,EAAM,qBAAqB,OAAOc,CAAG,CAAC;AAAA,MAE1C;AAAA,MACA,WAAAb;AAAA,MACA,UAAUI,EAAoB,IAAI,CAAAG,wBAA0BO,GAAuB;AAAA,QACjF,OAAOP,EAAK;AAAA,QACZ,UAAUA,EAAK;AAAA,MAAA,GACdA,EAAK,KAAK,CAAC;AAAA,IAAA,CACf;AAAA,EAAA,CACF;AACH,CAAC;"}

package/dist/Modal/views/ModalRoot.d.ts

@@ -0,0 +1,8 @@
+import type { ModalInstance } from '../typings';
+export type ModalRootProps = {
+    modal: ModalInstance;
+};
+export declare const ModalRoot: (({ modal }: ModalRootProps) => import("react").JSX.Element) & import("react").NamedExoticComponent<ModalRootProps> & {
+    readonly type: ({ modal }: ModalRootProps) => import("react").JSX.Element;
+};
+//# sourceMappingURL=ModalRoot.d.ts.map

package/dist/Modal/views/ModalRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalRoot.d.ts","sourceRoot":"","sources":["../../../src/Modal/views/ModalRoot.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,MAAM,cAAc,GAAG;IACzB,KAAK,EAAE,aAAa,CAAC;CACxB,CAAC;AAWF,eAAO,MAAM,SAAS,eAAwB,cAAc;+BAAd,cAAc;CA4F1D,CAAC"}

package/dist/Modal/views/ModalRoot.js

@@ -0,0 +1,56 @@
+import { clsx as y } from "../../node_modules/clsx/dist/clsx.js";
+import { observer as p } from "mobx-react-lite";
+import { useMemo as v, useCallback as f, useLayoutEffect as m } from "react";
+import { createPortal as u } from "react-dom";
+import { ModalProvider as h } from "../hooks/useModalProvider.js";
+import l from "../Modal.js";
+import n from "../styles/Overlay.module.css.js";
+import { ComponentRenderer as x } from "./ComponentRender.js";
+import { Modal as b } from "./Modal.js";
+import { jsx as s, jsxs as g } from "react/jsx-runtime";
+function I(o) {
+  const e = document.querySelectorAll("[data-modal-overlay]"), r = e[e.length - 1];
+  o.tabIndex = r ? parseInt(r.getAttribute("tabindex") || "0", 10) + 1 : 0;
+}
+const B = p(({
+  modal: o
+}) => {
+  const e = o.currentOptions, r = e.theme || "light", d = v(() => {
+    const t = {};
+    return e.zIndex != null && (t.zIndex = e.zIndex), e.padding != null && e.padding !== "" && (t.padding = typeof e.padding == "number" ? `${e.padding}px` : e.padding), o.hidden && (t.visibility = "hidden", t.opacity = 0), t;
+  }, [o.hidden, e.zIndex, e.padding]), c = f((t) => {
+    o.setOverlay(t), t && (t.style.visibility = "hidden");
+  }, [o]);
+  m(() => {
+    const t = o.overlay;
+    if (!t)
+      return;
+    const a = () => {
+      I(t);
+    };
+    return a(), l.events.on("open close show hide", a), () => {
+      l.events.off("open close show hide", a);
+    };
+  }, [o]);
+  const i = /* @__PURE__ */ s("div", {
+    ref: c,
+    "data-modal": o.name,
+    "data-modal-overlay": "",
+    className: y(n.overlay, e.overlay && n.on, e.shadow && n.shadow, e.scrollable === "overlay" && n.scrollableContent, e.overlayClass, r),
+    style: d,
+    children: /* @__PURE__ */ g(h, {
+      value: o,
+      children: [e.overlayBackdrop ? /* @__PURE__ */ s(x, {
+        component: e.overlayBackdrop,
+        modal: o
+      }) : null, /* @__PURE__ */ s(b, {
+        modal: o
+      })]
+    })
+  });
+  return e.reactHost ? /* @__PURE__ */ u(i, document.body) : i;
+});
+export {
+  B as ModalRoot
+};
+//# sourceMappingURL=ModalRoot.js.map

package/dist/Modal/views/ModalRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalRoot.js","sources":["../../../src/Modal/views/ModalRoot.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { observer } from 'mobx-react-lite';\nimport { useCallback, useLayoutEffect, useMemo } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { ModalProvider } from '../hooks/useModalProvider';\nimport ModalController from '../Modal';\nimport overlayStyles from '../styles/Overlay.module.css';\nimport { ComponentRenderer } from './ComponentRender';\nimport { Modal } from './Modal';\n\nimport type { ModalInstance } from '../typings';\n\nexport type ModalRootProps = {\n    modal: ModalInstance;\n};\n\nfunction syncOverlayTabIndex(overlay: HTMLElement) {\n    const existingOverlays = document.querySelectorAll('[data-modal-overlay]');\n    const lastOverlay = existingOverlays[existingOverlays.length - 1];\n\n    overlay.tabIndex = lastOverlay\n        ? (parseInt(lastOverlay.getAttribute('tabindex') || '0', 10) + 1)\n        : 0;\n}\n\nexport const ModalRoot = observer(({ modal }: ModalRootProps) => {\n    const options = modal.currentOptions;\n    const themeClass = options.theme || 'light';\n\n    const overlayStyle = useMemo(() => {\n        const style: {\n            zIndex?: number;\n            padding?: string;\n            visibility?: 'hidden';\n            opacity?: number;\n        } = {};\n\n        if (options.zIndex != null) {\n            style.zIndex = options.zIndex;\n        }\n\n        if (options.padding != null && options.padding !== '') {\n            style.padding = typeof options.padding === 'number'\n                ? `${ options.padding }px`\n                : options.padding;\n        }\n\n        if (modal.hidden) {\n            style.visibility = 'hidden';\n            style.opacity = 0;\n        }\n\n        return style;\n    }, [modal.hidden, options.zIndex, options.padding]);\n\n    const setOverlayRef = useCallback((el: HTMLDivElement | null) => {\n        modal.setOverlay(el);\n\n        if (el) {\n            el.style.visibility = 'hidden';\n        }\n    }, [modal]);\n\n    useLayoutEffect(() => {\n        const overlay = modal.overlay;\n\n        if (!overlay) {\n            return;\n        }\n\n        const sync = () => {\n            syncOverlayTabIndex(overlay);\n        };\n\n        sync();\n        void ModalController.events.on('open close show hide', sync);\n\n        return () => {\n            void ModalController.events.off('open close show hide', sync);\n        };\n    }, [modal]);\n\n    const overlay = (\n        <div\n            ref={ setOverlayRef }\n            data-modal={ modal.name }\n            data-modal-overlay=\"\"\n            className={ clsx(\n                overlayStyles.overlay,\n                options.overlay && overlayStyles.on,\n                options.shadow && overlayStyles.shadow,\n                options.scrollable === 'overlay' && overlayStyles.scrollableContent,\n                options.overlayClass,\n                themeClass\n            ) }\n            style={ overlayStyle }\n        >\n            <ModalProvider value={ modal }>\n                { options.overlayBackdrop\n                    ? (\n                        <ComponentRenderer\n                            component={ options.overlayBackdrop }\n                            modal={ modal }\n                        />\n                    )\n                    : null }\n\n                <Modal modal={ modal } />\n            </ModalProvider>\n        </div>\n    );\n\n    if (options.reactHost) {\n        return createPortal(overlay, document.body);\n    }\n\n    return overlay;\n});\n"],"names":["syncOverlayTabIndex","overlay","existingOverlays","lastOverlay","ModalRoot","observer","modal","options","themeClass","overlayStyle","useMemo","style","setOverlayRef","useCallback","el","useLayoutEffect","sync","ModalController","clsx","overlayStyles","ModalProvider","ComponentRenderer","_jsx","Modal","createPortal"],"mappings":";;;;;;;;;;AAUA,SAASA,EAAoBC,GAAS;AACpC,QAAMC,IAAmB,SAAS,iBAAiB,sBAAsB,GACnEC,IAAcD,EAAiBA,EAAiB,SAAS,CAAC;AAChE,EAAAD,EAAQ,WAAWE,IAAc,SAASA,EAAY,aAAa,UAAU,KAAK,KAAK,EAAE,IAAI,IAAI;AACnG;AACO,MAAMC,IAAYC,EAAS,CAAC;AAAA,EACjC,OAAAC;AACF,MAAM;AACJ,QAAMC,IAAUD,EAAM,gBAChBE,IAAaD,EAAQ,SAAS,SAC9BE,IAAeC,EAAQ,MAAM;AACjC,UAAMC,IAAQ,CAAA;AACd,WAAIJ,EAAQ,UAAU,SACpBI,EAAM,SAASJ,EAAQ,SAErBA,EAAQ,WAAW,QAAQA,EAAQ,YAAY,OACjDI,EAAM,UAAU,OAAOJ,EAAQ,WAAY,WAAW,GAAGA,EAAQ,OAAO,OAAOA,EAAQ,UAErFD,EAAM,WACRK,EAAM,aAAa,UACnBA,EAAM,UAAU,IAEXA;AAAA,EACT,GAAG,CAACL,EAAM,QAAQC,EAAQ,QAAQA,EAAQ,OAAO,CAAC,GAC5CK,IAAgBC,EAAY,CAAAC,MAAM;AACtC,IAAAR,EAAM,WAAWQ,CAAE,GACfA,MACFA,EAAG,MAAM,aAAa;AAAA,EAE1B,GAAG,CAACR,CAAK,CAAC;AACV,EAAAS,EAAgB,MAAM;AACpB,UAAMd,IAAUK,EAAM;AACtB,QAAI,CAACL;AACH;AAEF,UAAMe,IAAO,MAAM;AACjB,MAAAhB,EAAoBC,CAAO;AAAA,IAC7B;AACA,WAAAe,EAAA,GACKC,EAAgB,OAAO,GAAG,wBAAwBD,CAAI,GACpD,MAAM;AACX,MAAKC,EAAgB,OAAO,IAAI,wBAAwBD,CAAI;AAAA,IAC9D;AAAA,EACF,GAAG,CAACV,CAAK,CAAC;AACV,QAAML,sBAA4B,OAAO;AAAA,IACvC,KAAKW;AAAA,IACL,cAAcN,EAAM;AAAA,IACpB,sBAAsB;AAAA,IACtB,WAAWY,EAAKC,EAAc,SAASZ,EAAQ,WAAWY,EAAc,IAAIZ,EAAQ,UAAUY,EAAc,QAAQZ,EAAQ,eAAe,aAAaY,EAAc,mBAAmBZ,EAAQ,cAAcC,CAAU;AAAA,IACzN,OAAOC;AAAA,IACP,4BAA6BW,GAAe;AAAA,MAC1C,OAAOd;AAAA,MACP,UAAU,CAACC,EAAQ,oCAAoCc,GAAmB;AAAA,QACxE,WAAWd,EAAQ;AAAA,QACnB,OAAAD;AAAA,MAAA,CACD,IAAI,MAAmBgB,gBAAAA,EAAKC,GAAO;AAAA,QAClC,OAAAjB;AAAA,MAAA,CACD,CAAC;AAAA,IAAA,CACH;AAAA,EAAA,CACF;AACD,SAAIC,EAAQ,YACU,gBAAAiB,EAAavB,GAAS,SAAS,IAAI,IAElDA;AACT,CAAC;"}

package/dist/Modal/views/ModalTitle.d.ts

@@ -0,0 +1,15 @@
+import type { ModalInstance } from '../typings';
+export type ModalTitleProps = {
+    className?: string | string[];
+    modal: ModalInstance;
+    titleClassName?: string;
+    closeClassName?: string;
+    tabsListClassName?: string;
+    titleTextClassName?: string;
+    actionsClassName?: string;
+    responsiveToggleClassName?: string;
+};
+export declare const ModalTitle: (({ className, modal, titleClassName, closeClassName, tabsListClassName, titleTextClassName, actionsClassName, responsiveToggleClassName, }: ModalTitleProps) => import("react").JSX.Element) & import("react").NamedExoticComponent<ModalTitleProps> & {
+    readonly type: ({ className, modal, titleClassName, closeClassName, tabsListClassName, titleTextClassName, actionsClassName, responsiveToggleClassName, }: ModalTitleProps) => import("react").JSX.Element;
+};
+//# sourceMappingURL=ModalTitle.d.ts.map

package/dist/Modal/views/ModalTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalTitle.d.ts","sourceRoot":"","sources":["../../../src/Modal/views/ModalTitle.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,MAAM,eAAe,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,KAAK,EAAE,aAAa,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,yBAAyB,CAAC,EAAE,MAAM,CAAC;CACtC,CAAC;AAEF,eAAO,MAAM,UAAU,+IASpB,eAAe;+JAAf,eAAe;CAmDhB,CAAC"}

package/dist/Modal/views/ModalTitle.js

@@ -0,0 +1,69 @@
+import { Close as s } from "@reforma/icons/14";
+import { clsx as g } from "../../node_modules/clsx/dist/clsx.js";
+import { observer as b } from "mobx-react-lite";
+import { Button as n } from "../../Button/Button.js";
+import { Show as r } from "../../Show/Show.js";
+import { ModalActions as v } from "./ModalActions.js";
+import { ModalResponsiveToggle as T } from "./ModalResponsiveToggle.js";
+import { ModalTitleTabs as w } from "./ModalTitleTabs.js";
+import { jsxs as a, Fragment as x, jsx as o } from "react/jsx-runtime";
+const R = b(({
+  className: c,
+  modal: t,
+  titleClassName: m,
+  closeClassName: l,
+  tabsListClassName: d,
+  titleTextClassName: h,
+  actionsClassName: p,
+  responsiveToggleClassName: f
+}) => {
+  const e = t.currentOptions, i = (t.options.tabs || []).length > 0 || !!e.title || !!e.modalActions?.length, u = g(m, c, e.handle && "draggable");
+  return /* @__PURE__ */ a(x, {
+    children: [/* @__PURE__ */ o(r, {
+      when: i,
+      children: /* @__PURE__ */ a("div", {
+        className: u,
+        "data-modal-title": !0,
+        children: [/* @__PURE__ */ o(w, {
+          modal: t,
+          tabsListClassName: d,
+          titleTextClassName: h
+        }), /* @__PURE__ */ o(v, {
+          modal: t,
+          actionsClassName: p
+        }), /* @__PURE__ */ o(T, {
+          modal: t,
+          className: f
+        }), /* @__PURE__ */ o(r, {
+          when: e.closeButton,
+          children: /* @__PURE__ */ o(n, {
+            size: "sm",
+            iconOnly: !0,
+            variant: "filling",
+            color: "inherit",
+            className: l,
+            "data-modal-close": !0,
+            "aria-label": "Close",
+            children: /* @__PURE__ */ o(s, {})
+          })
+        })]
+      })
+    }), /* @__PURE__ */ o(r, {
+      when: !i && e.closeButton,
+      children: /* @__PURE__ */ o(n, {
+        iconOnly: !0,
+        variant: "filling",
+        size: "sm",
+        color: "secondary",
+        className: l,
+        "data-modal-close": !0,
+        "aria-label": "Close",
+        children: /* @__PURE__ */ o(s, {})
+      })
+    })]
+  });
+});
+export {
+  R as ModalTitle
+};
+//# sourceMappingURL=ModalTitle.js.map

package/dist/Modal/views/ModalTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalTitle.js","sources":["../../../src/Modal/views/ModalTitle.tsx"],"sourcesContent":["import { Close } from '@reforma/icons/14';\nimport clsx from 'clsx';\nimport { observer } from 'mobx-react-lite';\n\nimport { Button } from '../../Button';\nimport { Show } from '../../Show';\nimport { ModalActions } from './ModalActions';\nimport { ModalResponsiveToggle } from './ModalResponsiveToggle';\nimport { ModalTitleTabs } from './ModalTitleTabs';\n\nimport type { ModalInstance } from '../typings';\n\nexport type ModalTitleProps = {\n    className?: string | string[];\n    modal: ModalInstance;\n    titleClassName?: string;\n    closeClassName?: string;\n    tabsListClassName?: string;\n    titleTextClassName?: string;\n    actionsClassName?: string;\n    responsiveToggleClassName?: string;\n};\n\nexport const ModalTitle = observer(({\n    className,\n    modal,\n    titleClassName,\n    closeClassName,\n    tabsListClassName,\n    titleTextClassName,\n    actionsClassName,\n    responsiveToggleClassName,\n}: ModalTitleProps) => {\n    const options = modal.currentOptions;\n    const tabs = modal.options.tabs || [];\n    const hasTitle = tabs.length > 0 || !!options.title || !!options.modalActions?.length;\n\n    const resolvedTitleClassName = clsx(titleClassName, className, options.handle && 'draggable');\n\n    return (\n        <>\n            <Show when={ hasTitle }>\n                <div className={ resolvedTitleClassName } data-modal-title>\n                    <ModalTitleTabs\n                        modal={ modal }\n                        tabsListClassName={ tabsListClassName }\n                        titleTextClassName={ titleTextClassName }\n                    />\n                    <ModalActions\n                        modal={ modal }\n                        actionsClassName={ actionsClassName }\n                    />\n                    <ModalResponsiveToggle modal={ modal } className={ responsiveToggleClassName } />\n                    <Show when={ options.closeButton }>\n                        <Button\n                            size=\"sm\"\n                            iconOnly\n                            variant=\"filling\"\n                            color=\"inherit\"\n                            className={ closeClassName }\n                            data-modal-close\n                            aria-label=\"Close\"\n                        >\n                            <Close />\n                        </Button>\n                    </Show>\n                </div>\n            </Show>\n            <Show when={ !hasTitle && options.closeButton }>\n                <Button\n                    iconOnly\n                    variant=\"filling\"\n                    size=\"sm\"\n                    color=\"secondary\"\n                    className={ closeClassName }\n                    data-modal-close\n                    aria-label=\"Close\"\n                >\n                    <Close />\n                </Button>\n            </Show>\n        </>\n    );\n});\n"],"names":["ModalTitle","observer","className","modal","titleClassName","closeClassName","tabsListClassName","titleTextClassName","actionsClassName","responsiveToggleClassName","options","hasTitle","resolvedTitleClassName","clsx","_Fragment","_jsx","Show","ModalTitleTabs","ModalActions","ModalResponsiveToggle","Button","Close"],"mappings":";;;;;;;;;AASO,MAAMA,IAAaC,EAAS,CAAC;AAAA,EAClC,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,2BAAAC;AACF,MAAM;AACJ,QAAMC,IAAUP,EAAM,gBAEhBQ,KADOR,EAAM,QAAQ,QAAQ,CAAA,GACb,SAAS,KAAK,CAAC,CAACO,EAAQ,SAAS,CAAC,CAACA,EAAQ,cAAc,QACzEE,IAAyBC,EAAKT,GAAgBF,GAAWQ,EAAQ,UAAU,WAAW;AAC5F,2BAA0BI,GAAW;AAAA,IACnC,UAAU,CAAcC,gBAAAA,EAAKC,GAAM;AAAA,MACjC,MAAML;AAAA,MACN,4BAA6B,OAAO;AAAA,QAClC,WAAWC;AAAA,QACX,oBAAoB;AAAA,QACpB,UAAU,CAAcG,gBAAAA,EAAKE,GAAgB;AAAA,UAC3C,OAAAd;AAAA,UACA,mBAAAG;AAAA,UACA,oBAAAC;AAAA,QAAA,CACD,GAAgBQ,gBAAAA,EAAKG,GAAc;AAAA,UAClC,OAAAf;AAAA,UACA,kBAAAK;AAAA,QAAA,CACD,GAAgBO,gBAAAA,EAAKI,GAAuB;AAAA,UAC3C,OAAAhB;AAAA,UACA,WAAWM;AAAA,QAAA,CACZ,GAAgBM,gBAAAA,EAAKC,GAAM;AAAA,UAC1B,MAAMN,EAAQ;AAAA,UACd,4BAA4BU,GAAQ;AAAA,YAClC,MAAM;AAAA,YACN,UAAU;AAAA,YACV,SAAS;AAAA,YACT,OAAO;AAAA,YACP,WAAWf;AAAA,YACX,oBAAoB;AAAA,YACpB,cAAc;AAAA,YACd,UAAuBU,gBAAAA,EAAKM,GAAO,CAAA,CAAE;AAAA,UAAA,CACtC;AAAA,QAAA,CACF,CAAC;AAAA,MAAA,CACH;AAAA,IAAA,CACF,GAAgBN,gBAAAA,EAAKC,GAAM;AAAA,MAC1B,MAAM,CAACL,KAAYD,EAAQ;AAAA,MAC3B,4BAA4BU,GAAQ;AAAA,QAClC,UAAU;AAAA,QACV,SAAS;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,QACP,WAAWf;AAAA,QACX,oBAAoB;AAAA,QACpB,cAAc;AAAA,QACd,UAAuBU,gBAAAA,EAAKM,GAAO,CAAA,CAAE;AAAA,MAAA,CACtC;AAAA,IAAA,CACF,CAAC;AAAA,EAAA,CACH;AACH,CAAC;"}

package/dist/Modal/views/ModalTitleTabs.d.ts

@@ -0,0 +1,11 @@
+import type { ModalInstance } from '../typings';
+export type ModalTitleTabsProps = {
+    className?: string | string[];
+    modal: ModalInstance;
+    tabsListClassName?: string;
+    titleTextClassName?: string;
+};
+export declare const ModalTitleTabs: (({ className, modal, tabsListClassName, titleTextClassName }: ModalTitleTabsProps) => import("react").JSX.Element) & import("react").NamedExoticComponent<ModalTitleTabsProps> & {
+    readonly type: ({ className, modal, tabsListClassName, titleTextClassName }: ModalTitleTabsProps) => import("react").JSX.Element;
+};
+//# sourceMappingURL=ModalTitleTabs.d.ts.map

package/dist/Modal/views/ModalTitleTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalTitleTabs.d.ts","sourceRoot":"","sources":["../../../src/Modal/views/ModalTitleTabs.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,MAAM,mBAAmB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC9B,KAAK,EAAE,aAAa,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,cAAc,iEAA0E,mBAAmB;iFAAnB,mBAAmB;CAqCtH,CAAC"}

package/dist/Modal/views/ModalTitleTabs.js

@@ -0,0 +1,43 @@
+import { clsx as h } from "../../node_modules/clsx/dist/clsx.js";
+import { observer as u } from "mobx-react-lite";
+import { Show as a } from "../../Show/Show.js";
+import { ToggleButtonGroup as v, ToggleButtonGroupItem as T } from "../../ToggleButtonGroup/ToggleButtonGroup.js";
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
+const j = u(({
+  className: c,
+  modal: r,
+  tabsListClassName: l,
+  titleTextClassName: d
+}) => {
+  const e = r.currentOptions, n = (e.tabs || []).map((t) => ({
+    ...t,
+    value: t.id
+  })), o = n.length > 1, m = e.activeTab || e.id, p = e.title || n[0]?.title;
+  return /* @__PURE__ */ g("div", {
+    className: h(o ? l : d, c),
+    "data-modal-tabs-list": o ? "" : void 0,
+    children: [/* @__PURE__ */ i(a, {
+      when: !o,
+      children: p
+    }), /* @__PURE__ */ i(a, {
+      when: o,
+      children: /* @__PURE__ */ i(v, {
+        variant: "transparent",
+        selectedKeys: m ?? void 0,
+        onSelectionChange: (t) => {
+          const s = t.values().next().value;
+          s != null && r.selectTab(String(s));
+        },
+        className: l,
+        children: n.map((t) => /* @__PURE__ */ i(T, {
+          value: t.id,
+          children: t.title ?? t.id
+        }, t.id))
+      })
+    })]
+  });
+});
+export {
+  j as ModalTitleTabs
+};
+//# sourceMappingURL=ModalTitleTabs.js.map

package/dist/Modal/views/ModalTitleTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalTitleTabs.js","sources":["../../../src/Modal/views/ModalTitleTabs.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { observer } from 'mobx-react-lite';\n\nimport { Show } from '../../Show';\nimport { ToggleButtonGroup, ToggleButtonGroupItem } from '../../ToggleButtonGroup';\n\nimport type { ModalInstance } from '../typings';\n\nexport type ModalTitleTabsProps = {\n    className?: string | string[];\n    modal: ModalInstance;\n    tabsListClassName?: string;\n    titleTextClassName?: string;\n};\n\nexport const ModalTitleTabs = observer(({ className, modal, tabsListClassName, titleTextClassName }: ModalTitleTabsProps) => {\n    const options = modal.currentOptions;\n    const tabs = (options.tabs || []).map(tab => ({ ...tab, value: tab.id }));\n    const showTabs = tabs.length > 1;\n    const activeTabId = options.activeTab || options.id;\n    const title = options.title || tabs[0]?.title;\n\n    return (\n        <div\n            className={ clsx(showTabs ? tabsListClassName : titleTextClassName, className) }\n            data-modal-tabs-list={ showTabs ? '' : undefined }\n        >\n            <Show when={ !showTabs }>\n                { title }\n            </Show>\n            <Show when={ showTabs }>\n                <ToggleButtonGroup\n                    variant=\"transparent\"\n                    selectedKeys={ activeTabId ?? undefined }\n                    onSelectionChange={ (keys) => {\n                        const key = keys.values().next().value;\n\n                        if (key != null) {\n                            modal.selectTab(String(key));\n                        }\n                    } }\n                    className={ tabsListClassName }\n                >\n                    { tabs.map(tab => (\n                        <ToggleButtonGroupItem key={ tab.id } value={ tab.id }>\n                            { tab.title ?? tab.id }\n                        </ToggleButtonGroupItem>\n                    )) }\n                </ToggleButtonGroup>\n            </Show>\n        </div>\n    );\n});\n"],"names":["ModalTitleTabs","observer","className","modal","tabsListClassName","titleTextClassName","options","tabs","tab","showTabs","activeTabId","title","clsx","_jsx","Show","ToggleButtonGroup","keys","key","ToggleButtonGroupItem"],"mappings":";;;;;AAKO,MAAMA,IAAiBC,EAAS,CAAC;AAAA,EACtC,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,oBAAAC;AACF,MAAM;AACJ,QAAMC,IAAUH,EAAM,gBAChBI,KAAQD,EAAQ,QAAQ,CAAA,GAAI,IAAI,CAAAE,OAAQ;AAAA,IAC5C,GAAGA;AAAA,IACH,OAAOA,EAAI;AAAA,EAAA,EACX,GACIC,IAAWF,EAAK,SAAS,GACzBG,IAAcJ,EAAQ,aAAaA,EAAQ,IAC3CK,IAAQL,EAAQ,SAASC,EAAK,CAAC,GAAG;AACxC,2BAA0B,OAAO;AAAA,IAC/B,WAAWK,EAAKH,IAAWL,IAAoBC,GAAoBH,CAAS;AAAA,IAC5E,wBAAwBO,IAAW,KAAK;AAAA,IACxC,UAAU,CAAcI,gBAAAA,EAAKC,GAAM;AAAA,MACjC,MAAM,CAACL;AAAA,MACP,UAAUE;AAAA,IAAA,CACX,GAAgBE,gBAAAA,EAAKC,GAAM;AAAA,MAC1B,MAAML;AAAA,MACN,4BAA4BM,GAAmB;AAAA,QAC7C,SAAS;AAAA,QACT,cAAcL,KAAe;AAAA,QAC7B,mBAAmB,CAAAM,MAAQ;AACzB,gBAAMC,IAAMD,EAAK,OAAA,EAAS,OAAO;AACjC,UAAIC,KAAO,QACTd,EAAM,UAAU,OAAOc,CAAG,CAAC;AAAA,QAE/B;AAAA,QACA,WAAWb;AAAA,QACX,UAAUG,EAAK,IAAI,CAAAC,wBAAyBU,GAAuB;AAAA,UACjE,OAAOV,EAAI;AAAA,UACX,UAAUA,EAAI,SAASA,EAAI;AAAA,QAAA,GAC1BA,EAAI,EAAE,CAAC;AAAA,MAAA,CACX;AAAA,IAAA,CACF,CAAC;AAAA,EAAA,CACH;AACH,CAAC;"}

package/dist/Popover/Popover.d.ts

@@ -0,0 +1,16 @@
+import { OverlayTriggerStateContext, type DialogTriggerProps, type PopoverProps as RACPopoverProps } from 'react-aria-components';
+import { type OverlayWidth } from '../utils/resolveOverlayWidth';
+import type { CSSProperties } from 'react';
+import type { Spacing } from '../types';
+export type { DialogTriggerProps as PopoverTriggerProps };
+export { OverlayTriggerStateContext };
+export type PopoverSpacing = Spacing | 'none';
+export interface PopoverProps extends Omit<RACPopoverProps, 'className' | 'style'> {
+    className?: string;
+    spacing?: PopoverSpacing;
+    style?: CSSProperties;
+    width?: OverlayWidth;
+}
+export declare function PopoverTrigger(props: DialogTriggerProps): import("react").JSX.Element;
+export declare function Popover({ className, children, spacing, style: styleProp, width, offset, containerPadding, ...props }: PopoverProps): import("react").JSX.Element;
+//# sourceMappingURL=Popover.d.ts.map

package/dist/Popover/Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,0BAA0B,EAE1B,KAAK,kBAAkB,EACvB,KAAK,YAAY,IAAI,eAAe,EACvC,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAGtF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAaxC,YAAY,EAAE,kBAAkB,IAAI,mBAAmB,EAAE,CAAC;AAC1D,OAAO,EAAE,0BAA0B,EAAE,CAAC;AAEtC,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,MAAM,CAAC;AAE9C,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,eAAe,EAAE,WAAW,GAAG,OAAO,CAAC;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,kBAAkB,+BAEvD;AAED,wBAAgB,OAAO,CAAC,EACpB,SAAS,EACT,QAAQ,EACR,OAAc,EACd,KAAK,EAAE,SAAS,EAChB,KAAK,EAEL,MAAU,EAEV,gBAAoB,EACpB,GAAG,KAAK,EACX,EAAE,YAAY,+BAoBd"}

package/dist/Popover/Popover.js

@@ -0,0 +1,53 @@
+import { cn as c } from "@reforma/lib";
+import { Popover as g, DialogTrigger as d } from "react-aria-components";
+import { OverlayTriggerStateContext as O } from "react-aria-components";
+import { resolveOverlayWidth as v } from "../utils/resolveOverlayWidth.js";
+import f from "./Popover.module.css.js";
+import { jsx as e } from "react/jsx-runtime";
+const u = {
+  none: "",
+  xxs: "p-xxs",
+  xs: "p-xs",
+  sm: "p-sm",
+  md: "p-md",
+  lg: "p-lg",
+  xl: "p-xl",
+  xxl: "p-xxl"
+};
+function T(o) {
+  return /* @__PURE__ */ e(d, {
+    ...o
+  });
+}
+function h({
+  className: o,
+  children: l,
+  spacing: s = "xs",
+  style: r,
+  width: p,
+  // Single source of gap — do not also use CSS margins (they stack with Floating UI offset).
+  offset: m = 8,
+  // RAC default is 12; keep overlays closer to the viewport edge.
+  containerPadding: n = 8,
+  ...x
+}) {
+  const t = v(p), i = u[s], a = t != null || r != null ? {
+    ...r,
+    ...t
+  } : void 0;
+  return /* @__PURE__ */ e(g, {
+    className: c(f.popover, i, o),
+    style: a,
+    offset: m,
+    containerPadding: n,
+    ...x,
+    "data-modal-clickout-layer": !0,
+    children: l
+  });
+}
+export {
+  O as OverlayTriggerStateContext,
+  h as Popover,
+  T as PopoverTrigger
+};
+//# sourceMappingURL=Popover.js.map

package/dist/Popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["import { cn } from '@reforma/lib';\nimport {\n    DialogTrigger,\n    OverlayTriggerStateContext,\n    Popover as RACPopover,\n    type DialogTriggerProps,\n    type PopoverProps as RACPopoverProps,\n} from 'react-aria-components';\n\nimport { resolveOverlayWidth, type OverlayWidth } from '../utils/resolveOverlayWidth';\nimport styles from './Popover.module.css';\n\nimport type { CSSProperties } from 'react';\nimport type { Spacing } from '../types';\n\nconst PADDING_CLASSES: Record<PopoverSpacing, string> = {\n    none: '',\n    xxs: 'p-xxs',\n    xs: 'p-xs',\n    sm: 'p-sm',\n    md: 'p-md',\n    lg: 'p-lg',\n    xl: 'p-xl',\n    xxl: 'p-xxl',\n};\n\nexport type { DialogTriggerProps as PopoverTriggerProps };\nexport { OverlayTriggerStateContext };\n\nexport type PopoverSpacing = Spacing | 'none';\n\nexport interface PopoverProps extends Omit<RACPopoverProps, 'className' | 'style'> {\n    className?: string;\n    spacing?: PopoverSpacing;\n    style?: CSSProperties;\n    width?: OverlayWidth;\n}\n\nexport function PopoverTrigger(props: DialogTriggerProps) {\n    return <DialogTrigger { ...props } />;\n}\n\nexport function Popover({\n    className,\n    children,\n    spacing = 'xs',\n    style: styleProp,\n    width,\n    // Single source of gap — do not also use CSS margins (they stack with Floating UI offset).\n    offset = 8,\n    // RAC default is 12; keep overlays closer to the viewport edge.\n    containerPadding = 8,\n    ...props\n}: PopoverProps) {\n    const widthStyle = resolveOverlayWidth(width);\n    const paddingClass = PADDING_CLASSES[spacing as Spacing];\n\n    const style = (widthStyle != null || styleProp != null)\n        ? { ...styleProp, ...widthStyle }\n        : undefined;\n\n    return (\n        <RACPopover\n            className={ cn(styles.popover, paddingClass, className) }\n            style={ style }\n            offset={ offset }\n            containerPadding={ containerPadding }\n            { ...props }\n            data-modal-clickout-layer\n        >\n            { children }\n        </RACPopover>\n    );\n}\n"],"names":["PADDING_CLASSES","PopoverTrigger","props","DialogTrigger","Popover","className","children","spacing","styleProp","width","offset","containerPadding","widthStyle","resolveOverlayWidth","paddingClass","style","RACPopover","cn","styles"],"mappings":";;;;;;AAKA,MAAMA,IAAkB;AAAA,EACtB,MAAM;AAAA,EACN,KAAK;AAAA,EACL,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,KAAK;AACP;AAEO,SAASC,EAAeC,GAAO;AACpC,2BAAyBC,GAAe;AAAA,IACtC,GAAGD;AAAA,EAAA,CACJ;AACH;AACO,SAASE,EAAQ;AAAA,EACtB,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,OAAOC;AAAA,EACP,OAAAC;AAAA;AAAA,EAEA,QAAAC,IAAS;AAAA;AAAA,EAET,kBAAAC,IAAmB;AAAA,EACnB,GAAGT;AACL,GAAG;AACD,QAAMU,IAAaC,EAAoBJ,CAAK,GACtCK,IAAed,EAAgBO,CAAO,GACtCQ,IAAQH,KAAc,QAAQJ,KAAa,OAAO;AAAA,IACtD,GAAGA;AAAA,IACH,GAAGI;AAAA,EAAA,IACD;AACJ,2BAAyBI,GAAY;AAAA,IACnC,WAAWC,EAAGC,EAAO,SAASJ,GAAcT,CAAS;AAAA,IACrD,OAAAU;AAAA,IACA,QAAAL;AAAA,IACA,kBAAAC;AAAA,IACA,GAAGT;AAAA,IACH,6BAA6B;AAAA,IAC7B,UAAAI;AAAA,EAAA,CACD;AACH;"}

package/dist/Popover/Popover.module.css

@@ -0,0 +1 @@
+@layer components{.Popover_popover_D8IlUx{font-weight:400;font-size:var(--text-sm);line-height:var(--leading-sm);font-family:Onest,sans-serif;letter-spacing:0;--popover-origin: top center;--popover-from: 0 calc(-1 * var(--spacing-sm));--popover-ease: cubic-bezier(.22, 1.2, .28, 1);--popover-shadow: 0 var(--spacing-16) var(--spacing-32) 0 var(--color-dark-a10);--popover-shadow-enter: 0 var(--spacing-8) var(--spacing-16) 0 var(--color-dark-a5);display:flex;flex-flow:column;border-radius:calc(var(--radius-lg) * var(--squircle-radius-factor));corner-shape:superellipse(var(--squircle-value));transform-origin:var(--trigger-anchor-point, var(--popover-origin));translate:0;scale:1;opacity:1;z-index:var(--z-popover)!important;transition:opacity .28s var(--popover-ease),translate .28s var(--popover-ease),scale .28s var(--popover-ease),box-shadow .28s var(--popover-ease);outline:none;box-shadow:var(--popover-shadow);border:1px solid var(--color-surface-border);background:var(--color-surface-float);min-width:var(--spacing-192);max-width:min(calc(100vw - var(--spacing-16)),20rem);color:var(--color-text)}.Popover_popover_D8IlUx:focus-visible{outline:none}.Popover_popover_D8IlUx[data-entering]{translate:var(--popover-from);scale:.97;opacity:.6;box-shadow:var(--popover-shadow-enter)}.Popover_popover_D8IlUx[data-exiting]{translate:var(--popover-from);scale:.97;opacity:0;transition-duration:.12s;transition-timing-function:var(--ease);box-shadow:var(--popover-shadow-enter)}.Popover_popover_D8IlUx[data-placement^=bottom]{--popover-origin: top center;--popover-from: 0 calc(-1 * var(--spacing-sm))}.Popover_popover_D8IlUx[data-placement^=top]{--popover-origin: bottom center;--popover-from: 0 var(--spacing-sm)}.Popover_popover_D8IlUx[data-placement^=left],.Popover_popover_D8IlUx[data-placement^=start]{--popover-origin: center right;--popover-from: var(--spacing-sm) 0}.Popover_popover_D8IlUx[data-placement^=right],.Popover_popover_D8IlUx[data-placement^=end]{--popover-origin: center left;--popover-from: calc(-1 * var(--spacing-sm)) 0}@media(prefers-reduced-motion:reduce){.Popover_popover_D8IlUx{transition:opacity var(--transition-duration-fast) var(--ease)}.Popover_popover_D8IlUx[data-entering],.Popover_popover_D8IlUx[data-exiting]{translate:0;scale:1;box-shadow:var(--popover-shadow)}}.Popover_popover_D8IlUx .Popover_react-aria-OverlayArrow_fQ32wo svg{display:block;fill:var(--color-surface-float)}}

package/dist/Popover/Popover.module.css.js

@@ -0,0 +1,8 @@
+const o = "Popover_popover_D8IlUx", p = {
+  popover: o
+};
+export {
+  p as default,
+  o as popover
+};
+//# sourceMappingURL=Popover.module.css.js.map

package/dist/Popover/Popover.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/Popover/PopoverScroll.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode, type Ref } from 'react';
+export interface PopoverScrollProps {
+    /** When set, constrains height and enables vertical scrolling inside the popover. */
+    maxHeight?: number | string;
+    /** Optional ref to the scroll viewport (infinite lists, etc.). */
+    containerRef?: Ref<HTMLDivElement | null>;
+    className?: string;
+    children: ReactNode;
+}
+/**
+ * Scroll shell for popover content: vertical {@link Scrollable} with optional `maxHeight`.
+ * Wrap {@link ListBox} or {@link Menu} — keyboard focus and selected-item scroll live on those components.
+ */
+export declare function PopoverScroll({ maxHeight, containerRef, className, children }: PopoverScrollProps): import("react").JSX.Element;
+export declare namespace PopoverScroll {
+    var displayName: string;
+}
+//# sourceMappingURL=PopoverScroll.d.ts.map

package/dist/Popover/PopoverScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverScroll.d.ts","sourceRoot":"","sources":["../../src/Popover/PopoverScroll.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,KAAK,GAAG,EAAE,MAAM,OAAO,CAAC;AAM5C,MAAM,WAAW,kBAAkB;IAC/B,qFAAqF;IACrF,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,kEAAkE;IAClE,YAAY,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,+BAejG;yBAfe,aAAa"}

package/dist/Popover/PopoverScroll.js

@@ -0,0 +1,26 @@
+import { cn as p } from "@reforma/lib";
+import c from "../List/ListBox.module.css.js";
+import { Scrollable as m } from "../Scrollable/Scrollable.js";
+import { jsx as n } from "react/jsx-runtime";
+function s({
+  maxHeight: o,
+  containerRef: r,
+  className: l,
+  children: e
+}) {
+  const t = o != null ? {
+    maxHeight: typeof o == "number" ? `${o}px` : o
+  } : void 0;
+  return /* @__PURE__ */ n(m, {
+    className: p(c.scrollableContainer, l),
+    vertical: !0,
+    style: t,
+    containerRef: r,
+    children: e
+  });
+}
+s.displayName = "PopoverScroll";
+export {
+  s as PopoverScroll
+};
+//# sourceMappingURL=PopoverScroll.js.map

package/dist/Popover/PopoverScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverScroll.js","sources":["../../src/Popover/PopoverScroll.tsx"],"sourcesContent":["import { cn } from '@reforma/lib';\nimport { ReactNode, type Ref } from 'react';\n\nimport listStyles from '../List/ListBox.module.css';\nimport { Scrollable } from '../Scrollable';\n\n\nexport interface PopoverScrollProps {\n    /** When set, constrains height and enables vertical scrolling inside the popover. */\n    maxHeight?: number | string;\n    /** Optional ref to the scroll viewport (infinite lists, etc.). */\n    containerRef?: Ref<HTMLDivElement | null>;\n    className?: string;\n    children: ReactNode;\n}\n\n/**\n * Scroll shell for popover content: vertical {@link Scrollable} with optional `maxHeight`.\n * Wrap {@link ListBox} or {@link Menu} — keyboard focus and selected-item scroll live on those components.\n */\nexport function PopoverScroll({ maxHeight, containerRef, className, children }: PopoverScrollProps) {\n    const style = maxHeight != null\n        ? { maxHeight: typeof maxHeight === 'number' ? `${ maxHeight }px` : maxHeight }\n        : undefined;\n\n    return (\n        <Scrollable\n            className={ cn(listStyles.scrollableContainer, className) }\n            vertical\n            style={ style }\n            containerRef={ containerRef }\n        >\n            { children }\n        </Scrollable>\n    );\n}\n\nPopoverScroll.displayName = 'PopoverScroll';\n"],"names":["PopoverScroll","maxHeight","containerRef","className","children","style","Scrollable","cn","listStyles"],"mappings":";;;;AASO,SAASA,EAAc;AAAA,EAC5B,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,GAAG;AACD,QAAMC,IAAQJ,KAAa,OAAO;AAAA,IAChC,WAAW,OAAOA,KAAc,WAAW,GAAGA,CAAS,OAAOA;AAAA,EAAA,IAC5D;AACJ,2BAAyBK,GAAY;AAAA,IACnC,WAAWC,EAAGC,EAAW,qBAAqBL,CAAS;AAAA,IACvD,UAAU;AAAA,IACV,OAAAE;AAAA,IACA,cAAAH;AAAA,IACA,UAAAE;AAAA,EAAA,CACD;AACH;AACAJ,EAAc,cAAc;"}

package/dist/Popover/index.d.ts

@@ -0,0 +1,4 @@
+export { OverlayTriggerStateContext, Popover, PopoverTrigger, type PopoverProps, type PopoverSpacing, type PopoverTriggerProps } from './Popover';
+export { PopoverScroll, type PopoverScrollProps } from './PopoverScroll';
+export { useContextMenu, type UseContextMenuResult } from './useContextMenu';
+//# sourceMappingURL=index.d.ts.map

package/dist/Popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Popover/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,OAAO,EAAE,cAAc,EAAE,KAAK,YAAY,EAAE,KAAK,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAClJ,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,KAAK,oBAAoB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/Popover/index.js

@@ -0,0 +1,12 @@
+import { Popover as e, PopoverTrigger as t } from "./Popover.js";
+import { PopoverScroll as x } from "./PopoverScroll.js";
+import { useContextMenu as g } from "./useContextMenu.js";
+import { OverlayTriggerStateContext as v } from "react-aria-components";
+export {
+  v as OverlayTriggerStateContext,
+  e as Popover,
+  x as PopoverScroll,
+  t as PopoverTrigger,
+  g as useContextMenu
+};
+//# sourceMappingURL=index.js.map

package/dist/Popover/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/Popover/useContextMenu.d.ts

@@ -0,0 +1,44 @@
+import type { MouseEvent, RefObject } from 'react';
+import type { PopoverProps } from './Popover';
+export interface UseContextMenuResult {
+    /** Spread onto the element that should respond to right-click. */
+    areaProps: {
+        onContextMenu: (e: MouseEvent) => void;
+    };
+    /** Spread onto `<Popover>` to control open state and positioning. */
+    popoverProps: Pick<PopoverProps, 'isOpen' | 'onOpenChange'> & {
+        triggerRef: RefObject<Element | null>;
+    };
+    /** Whether the context menu is currently open. */
+    isOpen: boolean;
+    /** Programmatically close the context menu. */
+    close: () => void;
+}
+/**
+ * Hook for opening a `<Popover>` as a context menu (right-click).
+ *
+ * Uses a real zero-size DOM element positioned at the cursor so
+ * React Aria's ResizeObserver and positioning work correctly.
+ *
+ * **Important:** Only render the `<Popover>` when `isOpen` is `true`.
+ *
+ * @example
+ * ```tsx
+ * const contextMenu = useContextMenu();
+ *
+ * <div { ...contextMenu.areaProps }>
+ *   <Card />
+ * </div>
+ *
+ * <Show when={ contextMenu.isOpen }>
+ *   <Popover { ...contextMenu.popoverProps } placement="bottom start">
+ *     <Menu onAction={ handleAction } aria-label="Actions">
+ *       <MenuItem>Edit</MenuItem>
+ *       <MenuItem isDanger>Delete</MenuItem>
+ *     </Menu>
+ *   </Popover>
+ * </Show>
+ * ```
+ */
+export declare function useContextMenu(): UseContextMenuResult;
+//# sourceMappingURL=useContextMenu.d.ts.map

package/dist/Popover/useContextMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useContextMenu.d.ts","sourceRoot":"","sources":["../../src/Popover/useContextMenu.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C,MAAM,WAAW,oBAAoB;IACjC,kEAAkE;IAClE,SAAS,EAAE;QACP,aAAa,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;KAC1C,CAAC;IAEF,qEAAqE;IACrE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,GAAG,cAAc,CAAC,GAAG;QAC1D,UAAU,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;KACzC,CAAC;IAEF,kDAAkD;IAClD,MAAM,EAAE,OAAO,CAAC;IAEhB,+CAA+C;IAC/C,KAAK,EAAE,MAAM,IAAI,CAAC;CACrB;AAwBD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,cAAc,IAAI,oBAAoB,CAyCrD"}