@lindle/linoardo 1.0.30 → 1.0.31

package/dist/{chunk-LIEBZOLG.js → chunk-NJU7XT54.js}

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { createPortal } from 'react-dom';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -23,9 +24,12 @@ var Dialog = React.forwardRef((props, forwardedRef) => {
     fullscreen = false,
     maxWidth = "32rem",
     width,
+    onClose,
     containerClassName,
     overlayClassName,
     overlayProps,
+    portal = true,
+    portalContainer,
     className,
     style,
     role: roleProp = "dialog",
@@ -36,6 +40,7 @@ var Dialog = React.forwardRef((props, forwardedRef) => {
   } = props;
   const state = open ? "open" : "closed";
   const shouldRenderDialog = keepMounted || open;
+  const resolvedPortalContainer = portalContainer ?? (typeof document !== "undefined" ? document.body : null);
   const resolvedStyle = { ...style };
   if (fullscreen) {
     if (resolvedStyle.maxWidth === void 0) {
@@ -59,63 +64,72 @@ var Dialog = React.forwardRef((props, forwardedRef) => {
     }
   }
   const ariaModal = ariaModalProp ?? (roleProp === "dialog" || roleProp === "alertdialog" ? true : void 0);
-  const { className: overlayExtraClassName, ...restOverlayProps } = overlayProps ?? {};
+  const {
+    className: overlayExtraClassName,
+    onClick: overlayOnClick,
+    ...restOverlayProps
+  } = overlayProps ?? {};
   const overlayNode = shouldRenderDialog && scrim ? /* @__PURE__ */ jsx(
     "div",
     {
       ...restOverlayProps,
       className: twMerge(overlayBaseClasses, overlayClassName, overlayExtraClassName),
+      onClick: (event) => {
+        overlayOnClick?.(event);
+        if (!event.defaultPrevented) {
+          onClose?.();
+        }
+      },
       "data-state": state,
       "aria-hidden": true
     }
   ) : null;
+  const dialogNode = shouldRenderDialog ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: twMerge(containerBaseClasses, containerClassName),
+      "data-state": state,
+      "aria-hidden": !open,
+      children: [
+        overlayNode,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: twMerge(panelWrapperClasses, fullscreen ? "h-full items-stretch" : "mx-auto"),
+            "data-state": state,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ...rest,
+                ref: forwardedRef,
+                id,
+                role: roleProp,
+                tabIndex,
+                "aria-modal": ariaModal,
+                className: twMerge(
+                  panelBaseClasses,
+                  fullscreen ? "h-full w-full max-w-none rounded-none" : void 0,
+                  className
+                ),
+                style: resolvedStyle,
+                "data-state": state,
+                children
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) : null;
+  const outputNode = portal && resolvedPortalContainer && dialogNode ? createPortal(dialogNode, resolvedPortalContainer) : dialogNode;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     activator ? /* @__PURE__ */ jsx("div", { className: "inline-flex", children: activator }) : null,
-    shouldRenderDialog ? /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: twMerge(containerBaseClasses, containerClassName),
-        "data-state": state,
-        "aria-hidden": !open,
-        children: [
-          overlayNode,
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: twMerge(
-                panelWrapperClasses,
-                fullscreen ? "h-full items-stretch" : "mx-auto"
-              ),
-              "data-state": state,
-              children: /* @__PURE__ */ jsx(
-                "div",
-                {
-                  ...rest,
-                  ref: forwardedRef,
-                  id,
-                  role: roleProp,
-                  tabIndex,
-                  "aria-modal": ariaModal,
-                  className: twMerge(
-                    panelBaseClasses,
-                    fullscreen ? "h-full w-full max-w-none rounded-none" : void 0,
-                    className
-                  ),
-                  style: resolvedStyle,
-                  "data-state": state,
-                  children
-                }
-              )
-            }
-          )
-        ]
-      }
-    ) : null
+    outputNode
   ] });
 });
 Dialog.displayName = "Dialog";
 var Dialog_default = Dialog;
 
 export { Dialog_default };
-//# sourceMappingURL=chunk-LIEBZOLG.js.map
-//# sourceMappingURL=chunk-LIEBZOLG.js.map
+//# sourceMappingURL=chunk-NJU7XT54.js.map
+//# sourceMappingURL=chunk-NJU7XT54.js.map

package/dist/chunk-NJU7XT54.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Containment/Dialog/index.tsx"],"names":[],"mappings":"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","file":"chunk-NJU7XT54.js","sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { twMerge } from 'tailwind-merge';\n\nconst containerBaseClasses =\n  'fixed inset-0 z-[70] flex items-center justify-center p-4 sm:p-8 data-[state=closed]:pointer-events-none';\nconst overlayBaseClasses =\n  'absolute inset-0 bg-gray-900/55 backdrop-blur-[2px] transition-opacity duration-200 data-[state=closed]:opacity-0 data-[state=open]:opacity-100';\nconst panelWrapperClasses =\n  'relative z-10 flex w-full max-h-[95vh] justify-center transition-transform transition-opacity duration-200 data-[state=closed]:translate-y-4 data-[state=closed]:opacity-0 data-[state=open]:translate-y-0 data-[state=open]:opacity-100';\nconst panelBaseClasses =\n  'pointer-events-auto w-full max-h-[90vh] overflow-auto rounded-2xl bg-white p-6 text-gray-900 shadow-2xl shadow-black/20 ring-1 ring-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40';\n\nconst resolveSizeValue = (value?: string | number) => {\n  if (value === undefined) {\n    return undefined;\n  }\n  return typeof value === 'number' ? `${value}px` : value;\n};\n\nexport interface DialogProps extends React.HTMLAttributes<HTMLDivElement> {\n  activator?: React.ReactNode;\n  open?: boolean;\n  keepMounted?: boolean;\n  scrim?: boolean;\n  fullscreen?: boolean;\n  maxWidth?: string | number;\n  width?: string | number;\n  onClose?: () => void;\n  containerClassName?: string;\n  overlayClassName?: string;\n  overlayProps?: React.HTMLAttributes<HTMLDivElement>;\n  portal?: boolean;\n  portalContainer?: Element | null;\n}\n\n/**\n * Layered dialog container supporting scrim, fullscreen mode and controlled open state.\n */\nconst Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, forwardedRef) => {\n  const {\n    activator,\n    children,\n    open = false,\n    keepMounted = false,\n    scrim = true,\n    fullscreen = false,\n    maxWidth = '32rem',\n    width,\n    onClose,\n    containerClassName,\n    overlayClassName,\n    overlayProps,\n    portal = true,\n    portalContainer,\n    className,\n    style,\n    role: roleProp = 'dialog',\n    tabIndex = -1,\n    id,\n    ['aria-modal']: ariaModalProp,\n    ...rest\n  } = props;\n\n  const state = open ? 'open' : 'closed';\n  const shouldRenderDialog = keepMounted || open;\n  const resolvedPortalContainer =\n    portalContainer ?? (typeof document !== 'undefined' ? document.body : null);\n\n  const resolvedStyle: React.CSSProperties = { ...style };\n  if (fullscreen) {\n    if (resolvedStyle.maxWidth === undefined) {\n      resolvedStyle.maxWidth = 'none';\n    }\n    if (resolvedStyle.width === undefined) {\n      resolvedStyle.width = '100%';\n    }\n    if (resolvedStyle.height === undefined) {\n      resolvedStyle.height = '100%';\n    }\n    if (resolvedStyle.maxHeight === undefined) {\n      resolvedStyle.maxHeight = '100%';\n    }\n  } else {\n    if (resolvedStyle.maxWidth === undefined) {\n      resolvedStyle.maxWidth = resolveSizeValue(maxWidth);\n    }\n    if (width !== undefined && resolvedStyle.width === undefined) {\n      resolvedStyle.width = resolveSizeValue(width);\n    }\n  }\n\n  const ariaModal =\n    ariaModalProp ?? (roleProp === 'dialog' || roleProp === 'alertdialog' ? true : undefined);\n\n  const {\n    className: overlayExtraClassName,\n    onClick: overlayOnClick,\n    ...restOverlayProps\n  } = overlayProps ?? {};\n\n  const overlayNode =\n    shouldRenderDialog && scrim ? (\n      <div\n        {...restOverlayProps}\n        className={twMerge(overlayBaseClasses, overlayClassName, overlayExtraClassName)}\n        onClick={event => {\n          overlayOnClick?.(event);\n          if (!event.defaultPrevented) {\n            onClose?.();\n          }\n        }}\n        data-state={state}\n        aria-hidden\n      />\n    ) : null;\n\n  const dialogNode = shouldRenderDialog ? (\n    <div\n      className={twMerge(containerBaseClasses, containerClassName)}\n      data-state={state}\n      aria-hidden={!open}\n    >\n      {overlayNode}\n      <div\n        className={twMerge(panelWrapperClasses, fullscreen ? 'h-full items-stretch' : 'mx-auto')}\n        data-state={state}\n      >\n        <div\n          {...rest}\n          ref={forwardedRef}\n          id={id}\n          role={roleProp}\n          tabIndex={tabIndex}\n          aria-modal={ariaModal}\n          className={twMerge(\n            panelBaseClasses,\n            fullscreen ? 'h-full w-full max-w-none rounded-none' : undefined,\n            className\n          )}\n          style={resolvedStyle}\n          data-state={state}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  ) : null;\n\n  const outputNode =\n    portal && resolvedPortalContainer && dialogNode\n      ? createPortal(dialogNode, resolvedPortalContainer)\n      : dialogNode;\n\n  return (\n    <>\n      {activator ? <div className='inline-flex'>{activator}</div> : null}\n      {outputNode}\n    </>\n  );\n});\n\nDialog.displayName = 'Dialog';\n\nexport default Dialog;\n"]}

package/dist/{chunk-DDQ7ICWD.js → chunk-ZTP2JSQ6.js}

@@ -35,20 +35,23 @@ var Menu = React.forwardRef((props, ref) => {
     ...rest
   } = props;
   const hasContent = children !== void 0 && children !== null;
-  const isOpen = Boolean(open);
-  const shouldRenderContent = hasContent && (keepMounted || isOpen || openOnHover || openOnFocus);
-  const shouldRenderOverlay = scrim && hasContent && (isOpen || openOnHover || openOnFocus);
+  const isControlled = open !== void 0;
+  const isOpen = open === true;
+  const allowHoverTrigger = openOnHover && !isControlled;
+  const allowFocusTrigger = openOnFocus && !isControlled;
+  const shouldRenderContent = hasContent && (keepMounted || isOpen || allowHoverTrigger || allowFocusTrigger);
+  const shouldRenderOverlay = scrim && hasContent && (isOpen || allowHoverTrigger || allowFocusTrigger);
   const verticalPlacement = placement.startsWith("top") ? "top" : "bottom";
   const visibilityClasses = twMerge(
     "pointer-events-none opacity-0 scale-95",
     isOpen ? "pointer-events-auto opacity-100 scale-100" : void 0,
-    openOnHover ? "group-hover/menu:pointer-events-auto group-hover/menu:opacity-100 group-hover/menu:scale-100" : void 0,
-    openOnFocus ? "group-focus-within/menu:pointer-events-auto group-focus-within/menu:opacity-100 group-focus-within/menu:scale-100" : void 0
+    allowHoverTrigger ? "group-hover/menu:pointer-events-auto group-hover/menu:opacity-100 group-hover/menu:scale-100" : void 0,
+    allowFocusTrigger ? "group-focus-within/menu:pointer-events-auto group-focus-within/menu:opacity-100 group-focus-within/menu:scale-100" : void 0
   );
   const overlayVisibilityClasses = twMerge(
     "pointer-events-none opacity-0 transition-opacity duration-150",
-    openOnHover ? "group-hover/menu:opacity-100" : void 0,
-    openOnFocus ? "group-focus-within/menu:opacity-100" : void 0,
+    allowHoverTrigger ? "group-hover/menu:opacity-100" : void 0,
+    allowFocusTrigger ? "group-focus-within/menu:opacity-100" : void 0,
     isOpen ? "pointer-events-auto opacity-100" : void 0
   );
   const {
@@ -103,5 +106,5 @@ Menu.displayName = "Menu";
 var Menu_default = Menu;
 
 export { Menu_default };
-//# sourceMappingURL=chunk-DDQ7ICWD.js.map
-//# sourceMappingURL=chunk-DDQ7ICWD.js.map
+//# sourceMappingURL=chunk-ZTP2JSQ6.js.map
+//# sourceMappingURL=chunk-ZTP2JSQ6.js.map

package/dist/{chunk-DDQ7ICWD.js.map → chunk-ZTP2JSQ6.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/Containment/Menu/index.tsx"],"names":[],"mappings":"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","file":"chunk-DDQ7ICWD.js","sourcesContent":["import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport type MenuPlacement =\n  | 'bottom-start'\n  | 'bottom'\n  | 'bottom-end'\n  | 'top-start'\n  | 'top'\n  | 'top-end';\n\nexport interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  activator: React.ReactNode;\n  children: React.ReactNode;\n  placement?: MenuPlacement;\n  open?: boolean;\n  openOnHover?: boolean;\n  openOnFocus?: boolean;\n  matchActivatorWidth?: boolean;\n  keepMounted?: boolean;\n  scrim?: boolean;\n  contentClassName?: string;\n  contentProps?: React.HTMLAttributes<HTMLDivElement>;\n  overlayClassName?: string;\n}\n\nconst placementClasses: Record<MenuPlacement, string> = {\n  'bottom-start': 'left-0 top-full origin-top-left',\n  bottom: 'left-1/2 top-full -translate-x-1/2 origin-top',\n  'bottom-end': 'right-0 top-full origin-top-right',\n  'top-start': 'left-0 bottom-full origin-bottom-left',\n  top: 'left-1/2 bottom-full -translate-x-1/2 origin-bottom',\n  'top-end': 'right-0 bottom-full origin-bottom-right'\n};\n\nconst offsetClasses: Record<'top' | 'bottom', string> = {\n  top: 'mb-2',\n  bottom: 'mt-2'\n};\n\nconst menuBaseClasses =\n  'absolute z-50 min-w-[10rem] rounded-xl border border-gray-200/80 bg-white/95 p-2 text-sm text-gray-700 shadow-lg shadow-gray-900/10 ring-1 ring-black/5 backdrop-blur-md transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2';\n\nconst overlayBaseClasses = 'fixed inset-0 z-40 bg-gray-900/30 backdrop-blur-[1px]';\n\n/**\n * Contextual menu that opens relative to an activator with optional hover/focus behavior and scrim.\n */\nconst Menu = React.forwardRef<HTMLDivElement, MenuProps>((props, ref) => {\n  const {\n    activator,\n    children,\n    placement = 'bottom-start',\n    open,\n    openOnHover = true,\n    openOnFocus = true,\n    matchActivatorWidth = false,\n    keepMounted = false,\n    scrim = false,\n    contentClassName,\n    contentProps,\n    overlayClassName,\n    className,\n    ...rest\n  } = props;\n\n  const hasContent = children !== undefined && children !== null;\n  const isOpen = Boolean(open);\n  const shouldRenderContent =\n    hasContent && (keepMounted || isOpen || openOnHover || openOnFocus);\n  const shouldRenderOverlay = scrim && hasContent && (isOpen || openOnHover || openOnFocus);\n  const verticalPlacement = placement.startsWith('top') ? 'top' : 'bottom';\n\n  const visibilityClasses = twMerge(\n    'pointer-events-none opacity-0 scale-95',\n    isOpen ? 'pointer-events-auto opacity-100 scale-100' : undefined,\n    openOnHover\n      ? 'group-hover/menu:pointer-events-auto group-hover/menu:opacity-100 group-hover/menu:scale-100'\n      : undefined,\n    openOnFocus\n      ? 'group-focus-within/menu:pointer-events-auto group-focus-within/menu:opacity-100 group-focus-within/menu:scale-100'\n      : undefined\n  );\n\n  const overlayVisibilityClasses = twMerge(\n    'pointer-events-none opacity-0 transition-opacity duration-150',\n    openOnHover ? 'group-hover/menu:opacity-100' : undefined,\n    openOnFocus ? 'group-focus-within/menu:opacity-100' : undefined,\n    isOpen ? 'pointer-events-auto opacity-100' : undefined\n  );\n\n  const {\n    className: contentExtraClassName,\n    style: contentStyle,\n    role: contentRole,\n    tabIndex: contentTabIndex,\n    ...restContentProps\n  } = contentProps ?? {};\n\n  const overlayNode = shouldRenderOverlay ? (\n    <div\n      className={twMerge(overlayBaseClasses, overlayVisibilityClasses, overlayClassName)}\n      aria-hidden\n    />\n  ) : null;\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      className={twMerge('relative inline-flex min-w-0 group/menu', className)}\n      data-open={isOpen || undefined}\n    >\n      {overlayNode}\n      <div className='inline-flex w-full min-w-0'>{activator}</div>\n      {shouldRenderContent ? (\n        <div\n          {...restContentProps}\n          className={twMerge(\n            menuBaseClasses,\n            placementClasses[placement],\n            offsetClasses[verticalPlacement],\n            matchActivatorWidth ? 'min-w-full' : undefined,\n            visibilityClasses,\n            contentClassName,\n            contentExtraClassName\n          )}\n          data-state={isOpen ? 'open' : 'closed'}\n          role={contentRole ?? 'menu'}\n          tabIndex={contentTabIndex ?? -1}\n          style={contentStyle}\n        >\n          {children}\n        </div>\n      ) : null}\n    </div>\n  );\n});\n\nMenu.displayName = 'Menu';\n\nexport default Menu;\n"]}
+{"version":3,"sources":["../src/Containment/Menu/index.tsx"],"names":[],"mappings":"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","file":"chunk-ZTP2JSQ6.js","sourcesContent":["import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport type MenuPlacement =\n  | 'bottom-start'\n  | 'bottom'\n  | 'bottom-end'\n  | 'top-start'\n  | 'top'\n  | 'top-end';\n\nexport interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  activator: React.ReactNode;\n  children: React.ReactNode;\n  placement?: MenuPlacement;\n  open?: boolean;\n  openOnHover?: boolean;\n  openOnFocus?: boolean;\n  matchActivatorWidth?: boolean;\n  keepMounted?: boolean;\n  scrim?: boolean;\n  contentClassName?: string;\n  contentProps?: React.HTMLAttributes<HTMLDivElement>;\n  overlayClassName?: string;\n}\n\nconst placementClasses: Record<MenuPlacement, string> = {\n  'bottom-start': 'left-0 top-full origin-top-left',\n  bottom: 'left-1/2 top-full -translate-x-1/2 origin-top',\n  'bottom-end': 'right-0 top-full origin-top-right',\n  'top-start': 'left-0 bottom-full origin-bottom-left',\n  top: 'left-1/2 bottom-full -translate-x-1/2 origin-bottom',\n  'top-end': 'right-0 bottom-full origin-bottom-right'\n};\n\nconst offsetClasses: Record<'top' | 'bottom', string> = {\n  top: 'mb-2',\n  bottom: 'mt-2'\n};\n\nconst menuBaseClasses =\n  'absolute z-50 min-w-[10rem] rounded-xl border border-gray-200/80 bg-white/95 p-2 text-sm text-gray-700 shadow-lg shadow-gray-900/10 ring-1 ring-black/5 backdrop-blur-md transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2';\n\nconst overlayBaseClasses = 'fixed inset-0 z-40 bg-gray-900/30 backdrop-blur-[1px]';\n\n/**\n * Contextual menu that opens relative to an activator with optional hover/focus behavior and scrim.\n */\nconst Menu = React.forwardRef<HTMLDivElement, MenuProps>((props, ref) => {\n  const {\n    activator,\n    children,\n    placement = 'bottom-start',\n    open,\n    openOnHover = true,\n    openOnFocus = true,\n    matchActivatorWidth = false,\n    keepMounted = false,\n    scrim = false,\n    contentClassName,\n    contentProps,\n    overlayClassName,\n    className,\n    ...rest\n  } = props;\n\n  const hasContent = children !== undefined && children !== null;\n  const isControlled = open !== undefined;\n  const isOpen = open === true;\n  const allowHoverTrigger = openOnHover && !isControlled;\n  const allowFocusTrigger = openOnFocus && !isControlled;\n  const shouldRenderContent =\n    hasContent && (keepMounted || isOpen || allowHoverTrigger || allowFocusTrigger);\n  const shouldRenderOverlay =\n    scrim && hasContent && (isOpen || allowHoverTrigger || allowFocusTrigger);\n  const verticalPlacement = placement.startsWith('top') ? 'top' : 'bottom';\n\n  const visibilityClasses = twMerge(\n    'pointer-events-none opacity-0 scale-95',\n    isOpen ? 'pointer-events-auto opacity-100 scale-100' : undefined,\n    allowHoverTrigger\n      ? 'group-hover/menu:pointer-events-auto group-hover/menu:opacity-100 group-hover/menu:scale-100'\n      : undefined,\n    allowFocusTrigger\n      ? 'group-focus-within/menu:pointer-events-auto group-focus-within/menu:opacity-100 group-focus-within/menu:scale-100'\n      : undefined\n  );\n\n  const overlayVisibilityClasses = twMerge(\n    'pointer-events-none opacity-0 transition-opacity duration-150',\n    allowHoverTrigger ? 'group-hover/menu:opacity-100' : undefined,\n    allowFocusTrigger ? 'group-focus-within/menu:opacity-100' : undefined,\n    isOpen ? 'pointer-events-auto opacity-100' : undefined\n  );\n\n  const {\n    className: contentExtraClassName,\n    style: contentStyle,\n    role: contentRole,\n    tabIndex: contentTabIndex,\n    ...restContentProps\n  } = contentProps ?? {};\n\n  const overlayNode = shouldRenderOverlay ? (\n    <div\n      className={twMerge(overlayBaseClasses, overlayVisibilityClasses, overlayClassName)}\n      aria-hidden\n    />\n  ) : null;\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      className={twMerge('relative inline-flex min-w-0 group/menu', className)}\n      data-open={isOpen || undefined}\n    >\n      {overlayNode}\n      <div className='inline-flex w-full min-w-0'>{activator}</div>\n      {shouldRenderContent ? (\n        <div\n          {...restContentProps}\n          className={twMerge(\n            menuBaseClasses,\n            placementClasses[placement],\n            offsetClasses[verticalPlacement],\n            matchActivatorWidth ? 'min-w-full' : undefined,\n            visibilityClasses,\n            contentClassName,\n            contentExtraClassName\n          )}\n          data-state={isOpen ? 'open' : 'closed'}\n          role={contentRole ?? 'menu'}\n          tabIndex={contentTabIndex ?? -1}\n          style={contentStyle}\n        >\n          {children}\n        </div>\n      ) : null}\n    </div>\n  );\n});\n\nMenu.displayName = 'Menu';\n\nexport default Menu;\n"]}

package/dist/dialog.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var React = require('react');
+var reactDom = require('react-dom');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -45,9 +46,12 @@ var Dialog = React__namespace.forwardRef((props, forwardedRef) => {
     fullscreen = false,
     maxWidth = "32rem",
     width,
+    onClose,
     containerClassName,
     overlayClassName,
     overlayProps,
+    portal = true,
+    portalContainer,
     className,
     style,
     role: roleProp = "dialog",
@@ -58,6 +62,7 @@ var Dialog = React__namespace.forwardRef((props, forwardedRef) => {
   } = props;
   const state = open ? "open" : "closed";
   const shouldRenderDialog = keepMounted || open;
+  const resolvedPortalContainer = portalContainer ?? (typeof document !== "undefined" ? document.body : null);
   const resolvedStyle = { ...style };
   if (fullscreen) {
     if (resolvedStyle.maxWidth === void 0) {
@@ -81,58 +86,67 @@ var Dialog = React__namespace.forwardRef((props, forwardedRef) => {
     }
   }
   const ariaModal = ariaModalProp ?? (roleProp === "dialog" || roleProp === "alertdialog" ? true : void 0);
-  const { className: overlayExtraClassName, ...restOverlayProps } = overlayProps ?? {};
+  const {
+    className: overlayExtraClassName,
+    onClick: overlayOnClick,
+    ...restOverlayProps
+  } = overlayProps ?? {};
   const overlayNode = shouldRenderDialog && scrim ? /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ...restOverlayProps,
       className: tailwindMerge.twMerge(overlayBaseClasses, overlayClassName, overlayExtraClassName),
+      onClick: (event) => {
+        overlayOnClick?.(event);
+        if (!event.defaultPrevented) {
+          onClose?.();
+        }
+      },
       "data-state": state,
       "aria-hidden": true
     }
   ) : null;
+  const dialogNode = shouldRenderDialog ? /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: tailwindMerge.twMerge(containerBaseClasses, containerClassName),
+      "data-state": state,
+      "aria-hidden": !open,
+      children: [
+        overlayNode,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: tailwindMerge.twMerge(panelWrapperClasses, fullscreen ? "h-full items-stretch" : "mx-auto"),
+            "data-state": state,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ...rest,
+                ref: forwardedRef,
+                id,
+                role: roleProp,
+                tabIndex,
+                "aria-modal": ariaModal,
+                className: tailwindMerge.twMerge(
+                  panelBaseClasses,
+                  fullscreen ? "h-full w-full max-w-none rounded-none" : void 0,
+                  className
+                ),
+                style: resolvedStyle,
+                "data-state": state,
+                children
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) : null;
+  const outputNode = portal && resolvedPortalContainer && dialogNode ? reactDom.createPortal(dialogNode, resolvedPortalContainer) : dialogNode;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     activator ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex", children: activator }) : null,
-    shouldRenderDialog ? /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: tailwindMerge.twMerge(containerBaseClasses, containerClassName),
-        "data-state": state,
-        "aria-hidden": !open,
-        children: [
-          overlayNode,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: tailwindMerge.twMerge(
-                panelWrapperClasses,
-                fullscreen ? "h-full items-stretch" : "mx-auto"
-              ),
-              "data-state": state,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  ...rest,
-                  ref: forwardedRef,
-                  id,
-                  role: roleProp,
-                  tabIndex,
-                  "aria-modal": ariaModal,
-                  className: tailwindMerge.twMerge(
-                    panelBaseClasses,
-                    fullscreen ? "h-full w-full max-w-none rounded-none" : void 0,
-                    className
-                  ),
-                  style: resolvedStyle,
-                  "data-state": state,
-                  children
-                }
-              )
-            }
-          )
-        ]
-      }
-    ) : null
+    outputNode
   ] });
 });
 Dialog.displayName = "Dialog";

package/dist/dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Containment/Dialog/index.tsx"],"names":["React","jsx","twMerge","jsxs","Fragment"],"mappings":"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","file":"dialog.cjs","sourcesContent":["import * as React from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nconst containerBaseClasses =\n  'fixed inset-0 z-[70] flex items-center justify-center p-4 sm:p-8 data-[state=closed]:pointer-events-none';\nconst overlayBaseClasses =\n  'absolute inset-0 bg-gray-900/55 backdrop-blur-[2px] transition-opacity duration-200 data-[state=closed]:opacity-0 data-[state=open]:opacity-100';\nconst panelWrapperClasses =\n  'relative z-10 flex w-full max-h-[95vh] justify-center transition-transform transition-opacity duration-200 data-[state=closed]:translate-y-4 data-[state=closed]:opacity-0 data-[state=open]:translate-y-0 data-[state=open]:opacity-100';\nconst panelBaseClasses =\n  'pointer-events-auto w-full max-h-[90vh] overflow-auto rounded-2xl bg-white p-6 text-gray-900 shadow-2xl shadow-black/20 ring-1 ring-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40';\n\nconst resolveSizeValue = (value?: string | number) => {\n  if (value === undefined) {\n    return undefined;\n  }\n  return typeof value === 'number' ? `${value}px` : value;\n};\n\nexport interface DialogProps extends React.HTMLAttributes<HTMLDivElement> {\n  activator?: React.ReactNode;\n  open?: boolean;\n  keepMounted?: boolean;\n  scrim?: boolean;\n  fullscreen?: boolean;\n  maxWidth?: string | number;\n  width?: string | number;\n  containerClassName?: string;\n  overlayClassName?: string;\n  overlayProps?: React.HTMLAttributes<HTMLDivElement>;\n}\n\n/**\n * Layered dialog container supporting scrim, fullscreen mode and controlled open state.\n */\nconst Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, forwardedRef) => {\n  const {\n    activator,\n    children,\n    open = false,\n    keepMounted = false,\n    scrim = true,\n    fullscreen = false,\n    maxWidth = '32rem',\n    width,\n    containerClassName,\n    overlayClassName,\n    overlayProps,\n    className,\n    style,\n    role: roleProp = 'dialog',\n    tabIndex = -1,\n    id,\n    ['aria-modal']: ariaModalProp,\n    ...rest\n  } = props;\n\n  const state = open ? 'open' : 'closed';\n  const shouldRenderDialog = keepMounted || open;\n\n  const resolvedStyle: React.CSSProperties = { ...style };\n  if (fullscreen) {\n    if (resolvedStyle.maxWidth === undefined) {\n      resolvedStyle.maxWidth = 'none';\n    }\n    if (resolvedStyle.width === undefined) {\n      resolvedStyle.width = '100%';\n    }\n    if (resolvedStyle.height === undefined) {\n      resolvedStyle.height = '100%';\n    }\n    if (resolvedStyle.maxHeight === undefined) {\n      resolvedStyle.maxHeight = '100%';\n    }\n  } else {\n    if (resolvedStyle.maxWidth === undefined) {\n      resolvedStyle.maxWidth = resolveSizeValue(maxWidth);\n    }\n    if (width !== undefined && resolvedStyle.width === undefined) {\n      resolvedStyle.width = resolveSizeValue(width);\n    }\n  }\n\n  const ariaModal =\n    ariaModalProp ?? (roleProp === 'dialog' || roleProp === 'alertdialog' ? true : undefined);\n\n  const { className: overlayExtraClassName, ...restOverlayProps } = overlayProps ?? {};\n\n  const overlayNode =\n    shouldRenderDialog && scrim ? (\n      <div\n        {...restOverlayProps}\n        className={twMerge(overlayBaseClasses, overlayClassName, overlayExtraClassName)}\n        data-state={state}\n        aria-hidden\n      />\n    ) : null;\n\n  return (\n    <>\n      {activator ? <div className='inline-flex'>{activator}</div> : null}\n      {shouldRenderDialog ? (\n        <div\n          className={twMerge(containerBaseClasses, containerClassName)}\n          data-state={state}\n          aria-hidden={!open}\n        >\n          {overlayNode}\n          <div\n            className={twMerge(\n              panelWrapperClasses,\n              fullscreen ? 'h-full items-stretch' : 'mx-auto'\n            )}\n            data-state={state}\n          >\n            <div\n              {...rest}\n              ref={forwardedRef}\n              id={id}\n              role={roleProp}\n              tabIndex={tabIndex}\n              aria-modal={ariaModal}\n              className={twMerge(\n                panelBaseClasses,\n                fullscreen ? 'h-full w-full max-w-none rounded-none' : undefined,\n                className\n              )}\n              style={resolvedStyle}\n              data-state={state}\n            >\n              {children}\n            </div>\n          </div>\n        </div>\n      ) : null}\n    </>\n  );\n});\n\nDialog.displayName = 'Dialog';\n\nexport default Dialog;\n"]}
+{"version":3,"sources":["../src/Containment/Dialog/index.tsx"],"names":["React","jsx","twMerge","jsxs","createPortal","Fragment"],"mappings":"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","file":"dialog.cjs","sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { twMerge } from 'tailwind-merge';\n\nconst containerBaseClasses =\n  'fixed inset-0 z-[70] flex items-center justify-center p-4 sm:p-8 data-[state=closed]:pointer-events-none';\nconst overlayBaseClasses =\n  'absolute inset-0 bg-gray-900/55 backdrop-blur-[2px] transition-opacity duration-200 data-[state=closed]:opacity-0 data-[state=open]:opacity-100';\nconst panelWrapperClasses =\n  'relative z-10 flex w-full max-h-[95vh] justify-center transition-transform transition-opacity duration-200 data-[state=closed]:translate-y-4 data-[state=closed]:opacity-0 data-[state=open]:translate-y-0 data-[state=open]:opacity-100';\nconst panelBaseClasses =\n  'pointer-events-auto w-full max-h-[90vh] overflow-auto rounded-2xl bg-white p-6 text-gray-900 shadow-2xl shadow-black/20 ring-1 ring-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40';\n\nconst resolveSizeValue = (value?: string | number) => {\n  if (value === undefined) {\n    return undefined;\n  }\n  return typeof value === 'number' ? `${value}px` : value;\n};\n\nexport interface DialogProps extends React.HTMLAttributes<HTMLDivElement> {\n  activator?: React.ReactNode;\n  open?: boolean;\n  keepMounted?: boolean;\n  scrim?: boolean;\n  fullscreen?: boolean;\n  maxWidth?: string | number;\n  width?: string | number;\n  onClose?: () => void;\n  containerClassName?: string;\n  overlayClassName?: string;\n  overlayProps?: React.HTMLAttributes<HTMLDivElement>;\n  portal?: boolean;\n  portalContainer?: Element | null;\n}\n\n/**\n * Layered dialog container supporting scrim, fullscreen mode and controlled open state.\n */\nconst Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, forwardedRef) => {\n  const {\n    activator,\n    children,\n    open = false,\n    keepMounted = false,\n    scrim = true,\n    fullscreen = false,\n    maxWidth = '32rem',\n    width,\n    onClose,\n    containerClassName,\n    overlayClassName,\n    overlayProps,\n    portal = true,\n    portalContainer,\n    className,\n    style,\n    role: roleProp = 'dialog',\n    tabIndex = -1,\n    id,\n    ['aria-modal']: ariaModalProp,\n    ...rest\n  } = props;\n\n  const state = open ? 'open' : 'closed';\n  const shouldRenderDialog = keepMounted || open;\n  const resolvedPortalContainer =\n    portalContainer ?? (typeof document !== 'undefined' ? document.body : null);\n\n  const resolvedStyle: React.CSSProperties = { ...style };\n  if (fullscreen) {\n    if (resolvedStyle.maxWidth === undefined) {\n      resolvedStyle.maxWidth = 'none';\n    }\n    if (resolvedStyle.width === undefined) {\n      resolvedStyle.width = '100%';\n    }\n    if (resolvedStyle.height === undefined) {\n      resolvedStyle.height = '100%';\n    }\n    if (resolvedStyle.maxHeight === undefined) {\n      resolvedStyle.maxHeight = '100%';\n    }\n  } else {\n    if (resolvedStyle.maxWidth === undefined) {\n      resolvedStyle.maxWidth = resolveSizeValue(maxWidth);\n    }\n    if (width !== undefined && resolvedStyle.width === undefined) {\n      resolvedStyle.width = resolveSizeValue(width);\n    }\n  }\n\n  const ariaModal =\n    ariaModalProp ?? (roleProp === 'dialog' || roleProp === 'alertdialog' ? true : undefined);\n\n  const {\n    className: overlayExtraClassName,\n    onClick: overlayOnClick,\n    ...restOverlayProps\n  } = overlayProps ?? {};\n\n  const overlayNode =\n    shouldRenderDialog && scrim ? (\n      <div\n        {...restOverlayProps}\n        className={twMerge(overlayBaseClasses, overlayClassName, overlayExtraClassName)}\n        onClick={event => {\n          overlayOnClick?.(event);\n          if (!event.defaultPrevented) {\n            onClose?.();\n          }\n        }}\n        data-state={state}\n        aria-hidden\n      />\n    ) : null;\n\n  const dialogNode = shouldRenderDialog ? (\n    <div\n      className={twMerge(containerBaseClasses, containerClassName)}\n      data-state={state}\n      aria-hidden={!open}\n    >\n      {overlayNode}\n      <div\n        className={twMerge(panelWrapperClasses, fullscreen ? 'h-full items-stretch' : 'mx-auto')}\n        data-state={state}\n      >\n        <div\n          {...rest}\n          ref={forwardedRef}\n          id={id}\n          role={roleProp}\n          tabIndex={tabIndex}\n          aria-modal={ariaModal}\n          className={twMerge(\n            panelBaseClasses,\n            fullscreen ? 'h-full w-full max-w-none rounded-none' : undefined,\n            className\n          )}\n          style={resolvedStyle}\n          data-state={state}\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  ) : null;\n\n  const outputNode =\n    portal && resolvedPortalContainer && dialogNode\n      ? createPortal(dialogNode, resolvedPortalContainer)\n      : dialogNode;\n\n  return (\n    <>\n      {activator ? <div className='inline-flex'>{activator}</div> : null}\n      {outputNode}\n    </>\n  );\n});\n\nDialog.displayName = 'Dialog';\n\nexport default Dialog;\n"]}

package/dist/dialog.d.cts

@@ -8,9 +8,12 @@ interface DialogProps extends react.HTMLAttributes<HTMLDivElement> {
     fullscreen?: boolean;
     maxWidth?: string | number;
     width?: string | number;
+    onClose?: () => void;
     containerClassName?: string;
     overlayClassName?: string;
     overlayProps?: react.HTMLAttributes<HTMLDivElement>;
+    portal?: boolean;
+    portalContainer?: Element | null;
 }
 /**
  * Layered dialog container supporting scrim, fullscreen mode and controlled open state.

package/dist/dialog.d.ts

@@ -8,9 +8,12 @@ interface DialogProps extends react.HTMLAttributes<HTMLDivElement> {
     fullscreen?: boolean;
     maxWidth?: string | number;
     width?: string | number;
+    onClose?: () => void;
     containerClassName?: string;
     overlayClassName?: string;
     overlayProps?: react.HTMLAttributes<HTMLDivElement>;
+    portal?: boolean;
+    portalContainer?: Element | null;
 }
 /**
  * Layered dialog container supporting scrim, fullscreen mode and controlled open state.

package/dist/dialog.js

@@ -1,3 +1,3 @@
-export { Dialog_default as default } from './chunk-LIEBZOLG.js';
+export { Dialog_default as default } from './chunk-NJU7XT54.js';
 //# sourceMappingURL=dialog.js.map
 //# sourceMappingURL=dialog.js.map

package/dist/index.cjs

@@ -3,6 +3,7 @@
 var React4 = require('react');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
 var react = require('@tiptap/react');
 var StarterKit = require('@tiptap/starter-kit');
 var marked = require('marked');
@@ -905,20 +906,23 @@ var Menu = React4__namespace.forwardRef((props, ref) => {
     ...rest
   } = props;
   const hasContent = children !== void 0 && children !== null;
-  const isOpen = Boolean(open);
-  const shouldRenderContent = hasContent && (keepMounted || isOpen || openOnHover || openOnFocus);
-  const shouldRenderOverlay = scrim && hasContent && (isOpen || openOnHover || openOnFocus);
+  const isControlled = open !== void 0;
+  const isOpen = open === true;
+  const allowHoverTrigger = openOnHover && !isControlled;
+  const allowFocusTrigger = openOnFocus && !isControlled;
+  const shouldRenderContent = hasContent && (keepMounted || isOpen || allowHoverTrigger || allowFocusTrigger);
+  const shouldRenderOverlay = scrim && hasContent && (isOpen || allowHoverTrigger || allowFocusTrigger);
   const verticalPlacement = placement.startsWith("top") ? "top" : "bottom";
   const visibilityClasses = tailwindMerge.twMerge(
     "pointer-events-none opacity-0 scale-95",
     isOpen ? "pointer-events-auto opacity-100 scale-100" : void 0,
-    openOnHover ? "group-hover/menu:pointer-events-auto group-hover/menu:opacity-100 group-hover/menu:scale-100" : void 0,
-    openOnFocus ? "group-focus-within/menu:pointer-events-auto group-focus-within/menu:opacity-100 group-focus-within/menu:scale-100" : void 0
+    allowHoverTrigger ? "group-hover/menu:pointer-events-auto group-hover/menu:opacity-100 group-hover/menu:scale-100" : void 0,
+    allowFocusTrigger ? "group-focus-within/menu:pointer-events-auto group-focus-within/menu:opacity-100 group-focus-within/menu:scale-100" : void 0
   );
   const overlayVisibilityClasses = tailwindMerge.twMerge(
     "pointer-events-none opacity-0 transition-opacity duration-150",
-    openOnHover ? "group-hover/menu:opacity-100" : void 0,
-    openOnFocus ? "group-focus-within/menu:opacity-100" : void 0,
+    allowHoverTrigger ? "group-hover/menu:opacity-100" : void 0,
+    allowFocusTrigger ? "group-focus-within/menu:opacity-100" : void 0,
     isOpen ? "pointer-events-auto opacity-100" : void 0
   );
   const {
@@ -1352,9 +1356,12 @@ var Dialog = React4__namespace.forwardRef((props, forwardedRef) => {
     fullscreen = false,
     maxWidth = "32rem",
     width,
+    onClose,
     containerClassName,
     overlayClassName,
     overlayProps,
+    portal = true,
+    portalContainer,
     className,
     style,
     role: roleProp = "dialog",
@@ -1365,6 +1372,7 @@ var Dialog = React4__namespace.forwardRef((props, forwardedRef) => {
   } = props;
   const state = open ? "open" : "closed";
   const shouldRenderDialog = keepMounted || open;
+  const resolvedPortalContainer = portalContainer ?? (typeof document !== "undefined" ? document.body : null);
   const resolvedStyle = { ...style };
   if (fullscreen) {
     if (resolvedStyle.maxWidth === void 0) {
@@ -1388,58 +1396,67 @@ var Dialog = React4__namespace.forwardRef((props, forwardedRef) => {
     }
   }
   const ariaModal = ariaModalProp ?? (roleProp === "dialog" || roleProp === "alertdialog" ? true : void 0);
-  const { className: overlayExtraClassName, ...restOverlayProps } = overlayProps ?? {};
+  const {
+    className: overlayExtraClassName,
+    onClick: overlayOnClick,
+    ...restOverlayProps
+  } = overlayProps ?? {};
   const overlayNode = shouldRenderDialog && scrim ? /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ...restOverlayProps,
       className: tailwindMerge.twMerge(overlayBaseClasses2, overlayClassName, overlayExtraClassName),
+      onClick: (event) => {
+        overlayOnClick?.(event);
+        if (!event.defaultPrevented) {
+          onClose?.();
+        }
+      },
       "data-state": state,
       "aria-hidden": true
     }
   ) : null;
+  const dialogNode = shouldRenderDialog ? /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: tailwindMerge.twMerge(containerBaseClasses, containerClassName),
+      "data-state": state,
+      "aria-hidden": !open,
+      children: [
+        overlayNode,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: tailwindMerge.twMerge(panelWrapperClasses, fullscreen ? "h-full items-stretch" : "mx-auto"),
+            "data-state": state,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ...rest,
+                ref: forwardedRef,
+                id,
+                role: roleProp,
+                tabIndex,
+                "aria-modal": ariaModal,
+                className: tailwindMerge.twMerge(
+                  panelBaseClasses,
+                  fullscreen ? "h-full w-full max-w-none rounded-none" : void 0,
+                  className
+                ),
+                style: resolvedStyle,
+                "data-state": state,
+                children
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) : null;
+  const outputNode = portal && resolvedPortalContainer && dialogNode ? reactDom.createPortal(dialogNode, resolvedPortalContainer) : dialogNode;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     activator ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex", children: activator }) : null,
-    shouldRenderDialog ? /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: tailwindMerge.twMerge(containerBaseClasses, containerClassName),
-        "data-state": state,
-        "aria-hidden": !open,
-        children: [
-          overlayNode,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: tailwindMerge.twMerge(
-                panelWrapperClasses,
-                fullscreen ? "h-full items-stretch" : "mx-auto"
-              ),
-              "data-state": state,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  ...rest,
-                  ref: forwardedRef,
-                  id,
-                  role: roleProp,
-                  tabIndex,
-                  "aria-modal": ariaModal,
-                  className: tailwindMerge.twMerge(
-                    panelBaseClasses,
-                    fullscreen ? "h-full w-full max-w-none rounded-none" : void 0,
-                    className
-                  ),
-                  style: resolvedStyle,
-                  "data-state": state,
-                  children
-                }
-              )
-            }
-          )
-        ]
-      }
-    ) : null
+    outputNode
   ] });
 });
 Dialog.displayName = "Dialog";