@zyncat/ui 0.9.1 → 0.11.0

package/dist/{chunk-FLO4A6BI.js → chunk-WFHRAKN3.js}

@@ -1,5 +1,5 @@
-'use client';import { useReturnFocus, useFocusTrap } from './chunk-LDC3RIYA.js';
-import { useOverlayEntry } from './chunk-GY7JOPUQ.js';
+'use client';import { useReturnFocus, useFocusTrap } from './chunk-DKVUPFQR.js';
+import { useOverlayEntry } from './chunk-U4MHX3KH.js';
 import { useMotion, run } from './chunk-XWUWYSCT.js';
 import { animate } from './chunk-YGCVWGUG.js';
 import { UIMotion } from './chunk-S5ZTZANS.js';
@@ -9,46 +9,39 @@ import { useRef, useEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var SM = UIMotion;
-var ovLocks = 0;
-var ovSavedOverflow = "";
-var ovSavedPad = "";
-function useScrollLock() {
-  useEffect(() => {
-    if (++ovLocks === 1) {
-      const body = document.body;
-      const gutter = window.innerWidth - document.documentElement.clientWidth;
-      ovSavedOverflow = body.style.overflow;
-      ovSavedPad = body.style.paddingRight;
-      body.style.overflow = "hidden";
-      if (gutter > 0) body.style.paddingRight = (parseFloat(getComputedStyle(body).paddingRight) || 0) + gutter + "px";
-    }
-    return () => {
-      if (--ovLocks === 0) {
-        document.body.style.overflow = ovSavedOverflow;
-        document.body.style.paddingRight = ovSavedPad;
-      }
-    };
-  }, []);
+var ovScopeLocks = /* @__PURE__ */ new Map();
+function ovGutter(scope, cs) {
+  if (scope === document.body) return window.innerWidth - document.documentElement.clientWidth;
+  return scope.offsetWidth - scope.clientWidth - parseFloat(cs.borderLeftWidth) - parseFloat(cs.borderRightWidth);
 }
-var ovInertCount = 0;
-var ovInerted = /* @__PURE__ */ new Set();
-function useInertOutside() {
+function useScopeLock(container) {
   useEffect(() => {
-    if (++ovInertCount === 1) {
-      for (const el of Array.from(document.body.children)) {
+    const scope = container ?? document.body;
+    const lock = ovScopeLocks.get(scope) ?? {
+      depth: 0,
+      overflow: scope.style.overflow,
+      paddingRight: scope.style.paddingRight,
+      inerted: []
+    };
+    ovScopeLocks.set(scope, lock);
+    if (++lock.depth === 1) {
+      const cs = getComputedStyle(scope);
+      const gutter = ovGutter(scope, cs);
+      scope.style.overflow = "hidden";
+      if (gutter > 0) scope.style.paddingRight = (parseFloat(cs.paddingRight) || 0) + gutter + "px";
+      for (const el of Array.from(scope.children)) {
         if (el.hasAttribute("data-overlay-root") || el.tagName === "SCRIPT" || el.tagName === "STYLE" || el.inert)
           continue;
         el.inert = true;
-        ovInerted.add(el);
+        lock.inerted.push(el);
       }
     }
     return () => {
-      if (--ovInertCount === 0) {
-        ovInerted.forEach((el) => {
-          el.inert = false;
-        });
-        ovInerted.clear();
-      }
+      if (--lock.depth > 0) return;
+      scope.style.overflow = lock.overflow;
+      scope.style.paddingRight = lock.paddingRight;
+      for (const el of lock.inerted) el.inert = false;
+      ovScopeLocks.delete(scope);
     };
   }, []);
 }
@@ -83,8 +76,10 @@ function ModalShell({
   panelId,
   dismissible,
   requestClose,
+  container,
   panelRef: externalPanelRef = null,
   panelProps = {},
+  layerProps = {},
   animate: animateSpec,
   exit,
   children
@@ -100,26 +95,33 @@ function ModalShell({
     return panelRef.current ? plays.concat(run(panelSpec, panelRef.current)) : plays;
   };
   useMotion(layerRef, { animate: withScrim("open", animateSpec), exit: withScrim("close", exit) });
-  useScrollLock();
-  useInertOutside();
+  useScopeLock(container);
   useReturnFocus(layerRef);
   useFocusTrap({ panelRef, entry });
-  return /* @__PURE__ */ jsxs("div", { ref: layerRef, className: "overlay-layer " + layerClass, children: [
-    /* @__PURE__ */ jsx(OverlayScrim, { dismissible, onPress: requestClose, scrimRef }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        id: panelId,
-        tabIndex: -1,
-        ...panelProps,
-        ref: panelRef,
-        className: cx("overlay-panel", panelClass, panelProps.className),
-        children
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...layerProps,
+      ref: layerRef,
+      className: cx("overlay-layer", container && "overlay-layer--scoped", layerClass, layerProps.className),
+      children: [
+        /* @__PURE__ */ jsx(OverlayScrim, { dismissible, onPress: requestClose, scrimRef }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: panelId,
+            tabIndex: -1,
+            ...panelProps,
+            ref: panelRef,
+            className: cx("overlay-panel", panelClass, panelProps.className),
+            children
+          }
+        )
+      ]
+    }
+  );
 }
 
 export { ModalShell };
-//# sourceMappingURL=chunk-FLO4A6BI.js.map
-//# sourceMappingURL=chunk-FLO4A6BI.js.map
+//# sourceMappingURL=chunk-WFHRAKN3.js.map
+//# sourceMappingURL=chunk-WFHRAKN3.js.map

package/dist/chunk-WFHRAKN3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/internal/overlay/modal.tsx"],"names":[],"mappings":"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","file":"chunk-WFHRAKN3.js","sourcesContent":["'use client';\n\nimport './overlay.css';\nimport { useEffect, useRef, type ReactNode, type RefObject } from 'react';\nimport { animate, type Layer, type Playback } from '../../../engine';\nimport { useMotion, run, type MotionSpec, type MotionSpecs } from '../../../motion/use-motion';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { useOverlayEntry } from './layer';\nimport { useReturnFocus, useFocusTrap } from './focus';\nimport { cx } from '../utils/cx';\n\nconst SM = UIMotion;\n\ninterface OvScopeLock {\n  depth: number;\n  overflow: string;\n  paddingRight: string;\n  inerted: HTMLElement[];\n}\n\nconst ovScopeLocks = new Map<HTMLElement, OvScopeLock>();\n\nfunction ovGutter(scope: HTMLElement, cs: CSSStyleDeclaration): number {\n  if (scope === document.body) return window.innerWidth - document.documentElement.clientWidth;\n  return scope.offsetWidth - scope.clientWidth - parseFloat(cs.borderLeftWidth) - parseFloat(cs.borderRightWidth);\n}\n\nfunction useScopeLock(container?: HTMLElement | null) {\n  useEffect(() => {\n    const scope = container ?? document.body;\n    const lock: OvScopeLock = ovScopeLocks.get(scope) ?? {\n      depth: 0,\n      overflow: scope.style.overflow,\n      paddingRight: scope.style.paddingRight,\n      inerted: [],\n    };\n    ovScopeLocks.set(scope, lock);\n\n    if (++lock.depth === 1) {\n      const cs = getComputedStyle(scope);\n      const gutter = ovGutter(scope, cs);\n      scope.style.overflow = 'hidden';\n      if (gutter > 0) scope.style.paddingRight = (parseFloat(cs.paddingRight) || 0) + gutter + 'px';\n      for (const el of Array.from(scope.children) as HTMLElement[]) {\n        if (el.hasAttribute('data-overlay-root') || el.tagName === 'SCRIPT' || el.tagName === 'STYLE' || el.inert)\n          continue;\n        el.inert = true;\n        lock.inerted.push(el);\n      }\n    }\n    return () => {\n      if (--lock.depth > 0) return;\n      scope.style.overflow = lock.overflow;\n      scope.style.paddingRight = lock.paddingRight;\n      for (const el of lock.inerted) el.inert = false;\n      ovScopeLocks.delete(scope);\n    };\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\n}\n\nconst ovScrimTiming = {\n  open: { duration: SM.dur.slow, ease: SM.ease.entrance },\n  close: { duration: SM.dur.base, ease: SM.ease.standard },\n};\n\nfunction OverlayScrim({\n  dismissible,\n  onPress,\n  scrimRef,\n}: {\n  dismissible: boolean;\n  onPress: () => void;\n  scrimRef: RefObject<HTMLDivElement | null>;\n}) {\n  const down = useRef(false);\n  return (\n    <div\n      ref={scrimRef}\n      className=\"overlay-scrim\"\n      aria-hidden=\"true\"\n      onPointerDown={(e) => {\n        down.current = e.target === e.currentTarget;\n      }}\n      onClick={(e) => {\n        if (dismissible && down.current && e.target === e.currentTarget) onPress();\n      }}\n    ></div>\n  );\n}\n\nexport function ModalShell({\n  layerClass,\n  panelClass,\n  panelId,\n  dismissible,\n  requestClose,\n  container,\n  panelRef: externalPanelRef = null,\n  panelProps = {},\n  layerProps = {},\n  animate: animateSpec,\n  exit,\n  children,\n}: {\n  layerClass: string;\n  panelClass: string;\n  panelId: string;\n  dismissible: boolean;\n  requestClose: () => void;\n  container?: HTMLElement | null;\n  panelRef?: RefObject<HTMLElement> | null;\n  panelProps?: Record<string, any>;\n  layerProps?: Record<string, any>;\n  children: ReactNode;\n} & MotionSpecs) {\n  const layerRef = useRef<HTMLDivElement>(null);\n  const scrimRef = useRef<HTMLDivElement>(null);\n  const internalPanelRef = useRef<HTMLElement>(null);\n  const panelRef = externalPanelRef || internalPanelRef;\n  const entry = useOverlayEntry({ nodeRef: layerRef, dismissible, requestClose });\n\n  const withScrim = (dir: 'open' | 'close', panelSpec: MotionSpec | undefined) => (): Playback[] => {\n    const fade: Layer = { opacity: dir === 'open' ? [0, 1] : [0], timing: ovScrimTiming[dir] };\n    const plays = scrimRef.current ? [animate(scrimRef.current, fade)] : [];\n    return panelRef.current ? plays.concat(run(panelSpec, panelRef.current)) : plays;\n  };\n\n  useMotion(layerRef, { animate: withScrim('open', animateSpec), exit: withScrim('close', exit) });\n  useScopeLock(container);\n  useReturnFocus(layerRef);\n  useFocusTrap({ panelRef, entry });\n  return (\n    <div\n      {...layerProps}\n      ref={layerRef}\n      className={cx('overlay-layer', container && 'overlay-layer--scoped', layerClass, layerProps.className)}\n    >\n      <OverlayScrim dismissible={dismissible} onPress={requestClose} scrimRef={scrimRef} />\n      <div\n        id={panelId}\n        tabIndex={-1}\n        {...panelProps}\n        ref={panelRef as RefObject<HTMLDivElement>}\n        className={cx('overlay-panel', panelClass, panelProps.className)}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/{chunk-W5YM2FV4.js → chunk-XJQQQJAO.js}

@@ -1,8 +1,8 @@
-'use client';import { useAnchorPosition } from './chunk-EQ32F2QJ.js';
-import { useReturnFocus } from './chunk-LDC3RIYA.js';
-import { ovCloneTrigger, OverlayPortal, useOverlayEntry, useOutsidePress } from './chunk-GY7JOPUQ.js';
+'use client';import { useAnchorPosition } from './chunk-62P3KD57.js';
+import { useReturnFocus } from './chunk-DKVUPFQR.js';
+import { ovCloneTrigger, OverlayPortal, useOverlayEntry, useOutsidePress } from './chunk-U4MHX3KH.js';
 import { resolveMotionTiming } from './chunk-NEF5XAHG.js';
-import { Presence } from './chunk-356HZMT4.js';
+import { Presence } from './chunk-NGTA34V2.js';
 import { useMotion } from './chunk-XWUWYSCT.js';
 import { useControllable } from './chunk-MMRIQNEN.js';
 import { cx } from './chunk-QGNC7LH5.js';
@@ -21,6 +21,7 @@ function PopoverPanel({
   arrow,
   dismissible,
   requestClose,
+  anchor,
   triggerRef,
   htmlProps,
   animate,
@@ -31,7 +32,7 @@ function PopoverPanel({
   const entry = useOverlayEntry({ nodeRef: panelRef, dismissible, requestClose });
   useMotion(panelRef, { animate, exit });
   useReturnFocus(panelRef);
-  useAnchorPosition({ side, align, arrow, triggerRef, panelRef });
+  useAnchorPosition({ side, align, arrow, anchor, triggerRef, panelRef });
   useOutsidePress({ entry, refs: [triggerRef, panelRef], enabled: dismissible, onPress: requestClose });
   return /* @__PURE__ */ jsxs(
     "div",
@@ -52,6 +53,7 @@ function Popover({
   defaultOpen = false,
   onOpenChange,
   trigger = null,
+  anchor = null,
   side = "bottom",
   align = "start",
   arrow = false,
@@ -80,6 +82,7 @@ function Popover({
         arrow,
         dismissible,
         requestClose: close,
+        anchor,
         triggerRef,
         htmlProps,
         children
@@ -90,5 +93,5 @@ function Popover({
 }
 
 export { Popover };
-//# sourceMappingURL=chunk-W5YM2FV4.js.map
-//# sourceMappingURL=chunk-W5YM2FV4.js.map
+//# sourceMappingURL=chunk-XJQQQJAO.js.map
+//# sourceMappingURL=chunk-XJQQQJAO.js.map

package/dist/chunk-XJQQQJAO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/popover/Popover.tsx"],"names":[],"mappings":"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","file":"chunk-XJQQQJAO.js","sourcesContent":["'use client';\n\nimport './popover.css';\nimport { Fragment, useId, useRef, type HTMLAttributes, type ReactElement, type ReactNode, type RefObject } from 'react';\nimport { Presence } from '../../../motion/presence';\nimport { useMotion, type MotionSpecs } from '../../../motion/use-motion';\nimport { resolveMotionTiming } from '../../../motion/motion-timing';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { ovCloneTrigger, useOverlayEntry, useOutsidePress, OverlayPortal } from '../../internal/overlay/layer';\nimport { useReturnFocus } from '../../internal/overlay/focus';\nimport { useAnchorPosition, type VirtualAnchor } from '../../internal/overlay/position';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\nexport type { VirtualAnchor };\n\nconst POPOVER_TIMING = {\n  open: { duration: 'base', ease: 'entrance' },\n  close: { duration: 'fast', ease: 'exit' },\n} as const;\n\nexport interface PopoverProps {\n  /** Controlled open state. Omit to stay uncontrolled. */\n  open?: boolean;\n  /** Initial state when uncontrolled. Default false. */\n  defaultOpen?: boolean;\n  /** Fires whenever the open state changes. Pair with `open` for controlled use. */\n  onOpenChange?: (open: boolean) => void;\n\n  /** Cloned to toggle the panel, and used as the anchor unless `anchor` is set. */\n  trigger?: ReactElement | null;\n  /** Anchor to an arbitrary rect instead of the trigger - any `{ getBoundingClientRect() }`, which an element also satisfies.\n   *  Drive `open` yourself; pass a new object to re-place a moving anchor. */\n  anchor?: VirtualAnchor | null;\n\n  /** Preferred side; flips to the opposite side when cramped. Default 'bottom'. */\n  side?: 'top' | 'bottom' | 'left' | 'right';\n  /** Cross-axis alignment against the trigger. Default 'start'. */\n  align?: 'start' | 'center' | 'end';\n  /** Caret tracking the trigger center. Default false. */\n  arrow?: boolean;\n\n  /** Esc + outside-press dismissal. Default true. */\n  dismissible?: boolean;\n\n  /** Base id for the panel; drives the trigger's `aria-controls`. Auto-generated when omitted. */\n  id?: string;\n  /** Standard attributes (className, style, data-*, ...) forwarded to the popover panel. */\n  htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;\n  /** Open/close timing - motion tokens only, or `null` to disable. @default open 'base'/'entrance', close 'fast'/'exit' */\n  animation?: DisableableAnimation;\n  /** The ENTIRE surface - paint AND semantics. Drive dismissal with `open`/`onOpenChange`. */\n  children: ReactNode;\n}\n\nfunction PopoverPanel({\n  panelId,\n  side,\n  align,\n  arrow,\n  dismissible,\n  requestClose,\n  anchor,\n  triggerRef,\n  htmlProps,\n  animate,\n  exit,\n  children,\n}: {\n  panelId: string;\n  side: 'top' | 'bottom' | 'left' | 'right';\n  align: 'start' | 'center' | 'end';\n  arrow: boolean;\n  dismissible: boolean;\n  requestClose: () => void;\n  anchor?: VirtualAnchor | null;\n  triggerRef: RefObject<HTMLElement>;\n  htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;\n  children: ReactNode;\n} & MotionSpecs) {\n  const panelRef = useRef<HTMLElement>(null);\n  const entry = useOverlayEntry({ nodeRef: panelRef, dismissible, requestClose });\n  useMotion(panelRef, { animate, exit });\n  useReturnFocus(panelRef);\n  useAnchorPosition({ side, align, arrow, anchor, triggerRef, panelRef });\n  useOutsidePress({ entry, refs: [triggerRef, panelRef], enabled: dismissible, onPress: requestClose });\n  return (\n    <div\n      {...htmlProps}\n      id={panelId}\n      ref={panelRef as RefObject<HTMLDivElement>}\n      className={cx('overlay-popover', htmlProps?.className)}\n    >\n      {arrow && <span className=\"overlay-popover__arrow\" aria-hidden=\"true\"></span>}\n      {children}\n    </div>\n  );\n}\n\nexport function Popover({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  trigger = null,\n  anchor = null,\n  side = 'bottom',\n  align = 'start',\n  arrow = false,\n  dismissible = true,\n  id,\n  htmlProps,\n  animation,\n  children,\n}: PopoverProps) {\n  const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);\n  const triggerRef = useRef<HTMLElement>(null);\n  const autoId = useId();\n  const panelId = id || 'popover-' + autoId;\n  const close = () => setOpen(false);\n  const timings = resolveMotionTiming(animation, POPOVER_TIMING);\n\n  return (\n    <Fragment>\n      {ovCloneTrigger(trigger, { open, onPress: () => setOpen(!open), panelId, haspopup: 'true', triggerRef })}\n      <OverlayPortal>\n        <Presence>\n          {open && (\n            <PopoverPanel\n              key=\"panel\"\n              animate={{ opacity: [0, 1], scale: [0.96, 1], timing: timings.open }}\n              exit={{ opacity: [0], scale: [0.96], timing: timings.close }}\n              panelId={panelId}\n              side={side}\n              align={align}\n              arrow={arrow}\n              dismissible={dismissible}\n              requestClose={close}\n              anchor={anchor}\n              triggerRef={triggerRef}\n              htmlProps={htmlProps}\n            >\n              {children}\n            </PopoverPanel>\n          )}\n        </Presence>\n      </OverlayPortal>\n    </Fragment>\n  );\n}\n"]}

package/dist/date-field.js

@@ -1,14 +1,14 @@
 'use client';import { DtpPanel } from './chunk-Y7AJQVWJ.js';
 import './chunk-TCUCYFT7.js';
+import { Popover } from './chunk-XJQQQJAO.js';
+import './chunk-62P3KD57.js';
 import { FieldTrigger, displayDay, FieldShell } from './chunk-YGGCQNNU.js';
-import { Popover } from './chunk-W5YM2FV4.js';
-import './chunk-EQ32F2QJ.js';
-import './chunk-LDC3RIYA.js';
-import './chunk-GY7JOPUQ.js';
+import './chunk-DKVUPFQR.js';
+import './chunk-U4MHX3KH.js';
 import './chunk-UE63OOVG.js';
 import './chunk-WM5J5TDI.js';
 import './chunk-NEF5XAHG.js';
-import './chunk-356HZMT4.js';
+import './chunk-NGTA34V2.js';
 import './chunk-2QWJ6FAX.js';
 import './chunk-XWUWYSCT.js';
 import './chunk-YGCVWGUG.js';

package/dist/date-range-field.js

@@ -1,15 +1,15 @@
-'use client';import { Sheet } from './chunk-GLT5IKQY.js';
+'use client';import { Sheet } from './chunk-AMFGY56I.js';
 import { useDayFocus } from './chunk-TCUCYFT7.js';
+import { Popover } from './chunk-XJQQQJAO.js';
+import './chunk-62P3KD57.js';
 import { FieldShell, FieldTrigger, parse, today, tzLabel, MONTHS, pad, toKey, add, grid, DOW, col, within } from './chunk-YGGCQNNU.js';
-import './chunk-FLO4A6BI.js';
-import { Popover } from './chunk-W5YM2FV4.js';
-import './chunk-EQ32F2QJ.js';
-import './chunk-LDC3RIYA.js';
-import './chunk-GY7JOPUQ.js';
+import './chunk-WFHRAKN3.js';
+import './chunk-DKVUPFQR.js';
+import './chunk-U4MHX3KH.js';
 import './chunk-UE63OOVG.js';
 import { useGlide, GlidePill } from './chunk-WM5J5TDI.js';
 import './chunk-NEF5XAHG.js';
-import './chunk-356HZMT4.js';
+import './chunk-NGTA34V2.js';
 import { Motion } from './chunk-2QWJ6FAX.js';
 import './chunk-XWUWYSCT.js';
 import './chunk-YGCVWGUG.js';

package/dist/datetime-field.js

@@ -1,15 +1,15 @@
 'use client';import { DtpPanel } from './chunk-Y7AJQVWJ.js';
 import './chunk-TCUCYFT7.js';
+import { Popover } from './chunk-XJQQQJAO.js';
+import './chunk-62P3KD57.js';
 import { TimeSegments, disp12 } from './chunk-64UU4LGU.js';
 import { displayDay, FieldShell, FieldTrigger, pad } from './chunk-YGGCQNNU.js';
-import { Popover } from './chunk-W5YM2FV4.js';
-import './chunk-EQ32F2QJ.js';
-import './chunk-LDC3RIYA.js';
-import './chunk-GY7JOPUQ.js';
+import './chunk-DKVUPFQR.js';
+import './chunk-U4MHX3KH.js';
 import './chunk-UE63OOVG.js';
 import './chunk-WM5J5TDI.js';
 import './chunk-NEF5XAHG.js';
-import './chunk-356HZMT4.js';
+import './chunk-NGTA34V2.js';
 import './chunk-2QWJ6FAX.js';
 import './chunk-XWUWYSCT.js';
 import './chunk-YGCVWGUG.js';

package/dist/dialog.css

@@ -136,6 +136,9 @@
   color: var(--text-body);
   font: var(--type-body);
 }
+.dialog__body:first-child {
+  padding-top: var(--space-5);
+}
 .dialog:has(.dialog__icon) .dialog__body {
   padding-left: calc(var(--space-5) + 2.25rem + var(--space-3));
 }

package/dist/dialog.d.ts

@@ -25,6 +25,9 @@ interface DialogProps {
     icon?: ReactNode;
     /** Close button + backdrop/Esc dismissal. Default true. */
     dismissible?: boolean;
+    /** Center inside this element instead of the viewport - it must be positioned (`position: relative` or similar).
+     *  Scrim, scroll lock and inert scope to it; the rest of the page stays interactive. */
+    container?: HTMLElement | null;
     /** Action row - a node, or a render fn `(close) => node` so uncontrolled dialogs can dismiss. */
     footer?: ReactNode | ((close: () => void) => ReactNode);
     /** Dialog body - scrolls when tall; its scroll edges flag the header lift + footer divider. */
@@ -37,6 +40,6 @@ interface DialogProps {
     /** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'standard' */
     animation?: DisableableAnimation;
 }
-declare function Dialog({ open: controlledOpen, defaultOpen, onOpenChange, trigger, title, description, size, tone, icon, dismissible, footer, children, id, htmlProps, animation, }: DialogProps): react.JSX.Element;
+declare function Dialog({ open: controlledOpen, defaultOpen, onOpenChange, trigger, title, description, size, tone, icon, dismissible, container, footer, children, id, htmlProps, animation, }: DialogProps): react.JSX.Element;
 
 export { Dialog, type DialogProps };

package/dist/dialog.js

@@ -1,9 +1,9 @@
 'use client';import { useScrollEdges } from './chunk-BIDVNLJO.js';
-import { ModalShell } from './chunk-FLO4A6BI.js';
-import './chunk-LDC3RIYA.js';
-import { ovCloneTrigger, OverlayPortal } from './chunk-GY7JOPUQ.js';
+import { ModalShell } from './chunk-WFHRAKN3.js';
+import './chunk-DKVUPFQR.js';
+import { ovCloneTrigger, OverlayPortal } from './chunk-U4MHX3KH.js';
 import { resolveMotionTiming } from './chunk-NEF5XAHG.js';
-import { Presence } from './chunk-356HZMT4.js';
+import { Presence } from './chunk-NGTA34V2.js';
 import './chunk-XWUWYSCT.js';
 import './chunk-YGCVWGUG.js';
 import { IconSlot } from './chunk-2ERBBFZS.js';
@@ -52,7 +52,7 @@ function DialogSurface({
       "aria-labelledby": title ? titleId : void 0,
       "aria-describedby": description ? descId : void 0,
       children: [
-        /* @__PURE__ */ jsxs("header", { className: "dialog__header", children: [
+        (icon || title || description || dismissible) && /* @__PURE__ */ jsxs("header", { className: "dialog__header", children: [
           icon && /* @__PURE__ */ jsx("span", { className: "dialog__icon", children: /* @__PURE__ */ jsx(IconSlot, { size: "md", children: icon }) }),
           /* @__PURE__ */ jsxs("div", { className: "dialog__heading", children: [
             title && /* @__PURE__ */ jsx("h2", { className: "dialog__title", id: titleId, children: title }),
@@ -77,6 +77,7 @@ function Dialog({
   tone = "default",
   icon = null,
   dismissible = true,
+  container = null,
   footer = null,
   children,
   id,
@@ -91,7 +92,7 @@ function Dialog({
   const timings = resolveMotionTiming(animation, DIALOG_TIMING);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: "dialog", triggerRef }),
-    /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Presence, { children: open && /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(OverlayPortal, { container, children: /* @__PURE__ */ jsx(Presence, { children: open && /* @__PURE__ */ jsx(
       ModalShell,
       {
         animate: { y: [6, 0], scale: [0.98, 1], opacity: [0, 1], timing: timings.open },
@@ -100,6 +101,7 @@ function Dialog({
         panelClass: "overlay-panel--dialog",
         panelId,
         dismissible,
+        container,
         requestClose: close,
         children: /* @__PURE__ */ jsx(
           DialogSurface,

package/dist/dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/composites/dialog/Dialog.tsx"],"names":[],"mappings":"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","file":"dialog.js","sourcesContent":["'use client';\n\nimport './dialog.css';\nimport { Fragment, useId, useRef, type HTMLAttributes, type ReactElement, type ReactNode } from 'react';\nimport { Presence } from '../../../motion/presence';\nimport { resolveMotionTiming } from '../../../motion/motion-timing';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { ovCloneTrigger, OverlayPortal } from '../../internal/overlay/layer';\nimport { ModalShell } from '../../internal/overlay/modal';\nimport { Icon } from '../../internal/icon/Icon';\nimport { IconSlot } from '../../internal/icon/IconSlot';\nimport { useScrollEdges } from '../../internal/hooks/use-scroll-edges';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\nconst DIALOG_TIMING = {\n  open: { duration: 'slow', ease: 'entrance' },\n  close: { duration: 'base', ease: 'standard' },\n} as const;\n\nexport interface DialogProps {\n  /** Controlled open state. Omit for uncontrolled (use defaultOpen + trigger). */\n  open?: boolean;\n  /** Initial open state when uncontrolled. @default false */\n  defaultOpen?: boolean;\n  /** Fires whenever the open state changes. Pair with `open` for controlled use. */\n  onOpenChange?: (open: boolean) => void;\n  /** Optional element cloned to open the dialog on click (uncontrolled ergonomics). */\n  trigger?: ReactElement | null;\n  /** Header title - rendered as the `<h2>` and wired to `aria-labelledby`. */\n  title?: ReactNode;\n  /** Subtext under the title - wired to `aria-describedby`. @default null */\n  description?: ReactNode;\n  /** Panel width. @default 'md' */\n  size?: 'sm' | 'md' | 'lg';\n  /** 'danger' tints the header icon badge + is the convention for destructive confirms. */\n  tone?: 'default' | 'danger';\n  /** Your own icon node for the header badge (alert dialogs). */\n  icon?: ReactNode;\n  /** Close button + backdrop/Esc dismissal. Default true. */\n  dismissible?: boolean;\n  /** Action row - a node, or a render fn `(close) => node` so uncontrolled dialogs can dismiss. */\n  footer?: ReactNode | ((close: () => void) => ReactNode);\n  /** Dialog body - scrolls when tall; its scroll edges flag the header lift + footer divider. */\n  children?: ReactNode;\n  /** Base id for the panel; drives the trigger's `aria-controls` and the title/desc aria ids.\n   *  Auto-generated when omitted. */\n  id?: string;\n  /** Standard attributes (className, style, data-*, ...) forwarded to the dialog `<section>`. */\n  htmlProps?: HTMLAttributes<HTMLElement> & DataAttributes;\n  /** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'standard' */\n  animation?: DisableableAnimation;\n}\n\ninterface DialogSurfaceProps {\n  panelId: string;\n  size: 'sm' | 'md' | 'lg';\n  tone: 'default' | 'danger';\n  icon: ReactNode;\n  title: ReactNode;\n  description: ReactNode;\n  dismissible: boolean;\n  footerContent: ReactNode;\n  requestClose: () => void;\n  htmlProps?: HTMLAttributes<HTMLElement> & DataAttributes;\n  children?: ReactNode;\n}\n\nfunction DialogSurface({\n  panelId,\n  size,\n  tone,\n  icon,\n  title,\n  description,\n  dismissible,\n  footerContent,\n  requestClose,\n  htmlProps,\n  children,\n}: DialogSurfaceProps) {\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const titleId = panelId + '-title';\n  const descId = panelId + '-desc';\n\n  useScrollEdges(bodyRef, (edges, el) => {\n    el.toggleAttribute('data-scroll-top', edges.top);\n    el.toggleAttribute('data-scroll-bottom', edges.bottom);\n  });\n\n  return (\n    <section\n      {...htmlProps}\n      className={cx('dialog', htmlProps?.className)}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      data-size={size === 'md' ? undefined : size}\n      data-tone={tone === 'default' ? undefined : tone}\n      aria-labelledby={title ? titleId : undefined}\n      aria-describedby={description ? descId : undefined}\n    >\n      <header className=\"dialog__header\">\n        {icon && (\n          <span className=\"dialog__icon\">\n            <IconSlot size=\"md\">{icon}</IconSlot>\n          </span>\n        )}\n        <div className=\"dialog__heading\">\n          {title && (\n            <h2 className=\"dialog__title\" id={titleId}>\n              {title}\n            </h2>\n          )}\n          {description && (\n            <p className=\"dialog__desc\" id={descId}>\n              {description}\n            </p>\n          )}\n        </div>\n        {dismissible && (\n          <button type=\"button\" className=\"dialog__close\" aria-label=\"Close dialog\" onClick={requestClose}>\n            <Icon name=\"x\" size=\"sm\" weight=\"bold\" />\n          </button>\n        )}\n      </header>\n\n      <div className=\"dialog__body\" ref={bodyRef}>\n        {children}\n      </div>\n\n      {footerContent && <footer className=\"dialog__footer\">{footerContent}</footer>}\n    </section>\n  );\n}\n\nexport function Dialog({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  trigger = null,\n  title,\n  description = null,\n  size = 'md',\n  tone = 'default',\n  icon = null,\n  dismissible = true,\n  footer = null,\n  children,\n  id,\n  htmlProps,\n  animation,\n}: DialogProps) {\n  const autoId = useId();\n  const panelId = id || 'dialog-' + autoId;\n  const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);\n  const triggerRef = useRef<HTMLElement>(null);\n  const close = () => setOpen(false);\n\n  const timings = resolveMotionTiming(animation, DIALOG_TIMING);\n\n  return (\n    <Fragment>\n      {ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: 'dialog', triggerRef })}\n      <OverlayPortal>\n        <Presence>\n          {open && (\n            <ModalShell\n              key=\"dialog\"\n              animate={{ y: [6, 0], scale: [0.98, 1], opacity: [0, 1], timing: timings.open }}\n              exit={{ y: [6], scale: [0.98], opacity: [0], timing: timings.close }}\n              layerClass=\"overlay-layer--dialog\"\n              panelClass=\"overlay-panel--dialog\"\n              panelId={panelId}\n              dismissible={dismissible}\n              requestClose={close}\n            >\n              <DialogSurface\n                panelId={panelId}\n                size={size}\n                tone={tone}\n                icon={icon}\n                title={title}\n                description={description}\n                dismissible={dismissible}\n                footerContent={typeof footer === 'function' ? footer(close) : footer}\n                requestClose={close}\n                htmlProps={htmlProps}\n              >\n                {children}\n              </DialogSurface>\n            </ModalShell>\n          )}\n        </Presence>\n      </OverlayPortal>\n    </Fragment>\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/composites/dialog/Dialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAgBA,IAAM,aAAA,GAAgB;AAAA,EACpB,IAAA,EAAM,EAAE,QAAA,EAAU,MAAA,EAAQ,MAAM,UAAA,EAAW;AAAA,EAC3C,KAAA,EAAO,EAAE,QAAA,EAAU,MAAA,EAAQ,MAAM,UAAA;AACnC,CAAA;AAqDA,SAAS,aAAA,CAAc;AAAA,EACrB,OAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,OAAA,GAAU,OAAuB,IAAI,CAAA;AAC3C,EAAA,MAAM,UAAU,OAAA,GAAU,QAAA;AAC1B,EAAA,MAAM,SAAS,OAAA,GAAU,OAAA;AAEzB,EAAA,cAAA,CAAe,OAAA,EAAS,CAAC,KAAA,EAAO,EAAA,KAAO;AACrC,IAAA,EAAA,CAAG,eAAA,CAAgB,iBAAA,EAAmB,KAAA,CAAM,GAAG,CAAA;AAC/C,IAAA,EAAA,CAAG,eAAA,CAAgB,oBAAA,EAAsB,KAAA,CAAM,MAAM,CAAA;AAAA,EACvD,CAAC,CAAA;AAED,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,EAAA,CAAG,QAAA,EAAU,SAAA,EAAW,SAAS,CAAA;AAAA,MAC5C,IAAA,EAAK,QAAA;AAAA,MACL,YAAA,EAAW,MAAA;AAAA,MACX,WAAA,EAAW,IAAA,KAAS,IAAA,GAAO,MAAA,GAAY,IAAA;AAAA,MACvC,WAAA,EAAW,IAAA,KAAS,SAAA,GAAY,MAAA,GAAY,IAAA;AAAA,MAC5C,iBAAA,EAAiB,QAAQ,OAAA,GAAU,MAAA;AAAA,MACnC,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MAEvC,QAAA,EAAA;AAAA,QAAA,CAAA,IAAA,IAAQ,SAAS,WAAA,IAAe,WAAA,qBAChC,IAAA,CAAC,QAAA,EAAA,EAAO,WAAU,gBAAA,EACf,QAAA,EAAA;AAAA,UAAA,IAAA,oBACC,GAAA,CAAC,UAAK,SAAA,EAAU,cAAA,EACd,8BAAC,QAAA,EAAA,EAAS,IAAA,EAAK,IAAA,EAAM,QAAA,EAAA,IAAA,EAAK,CAAA,EAC5B,CAAA;AAAA,0BAEF,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,iBAAA,EACZ,QAAA,EAAA;AAAA,YAAA,KAAA,wBACE,IAAA,EAAA,EAAG,SAAA,EAAU,eAAA,EAAgB,EAAA,EAAI,SAC/B,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,YAED,+BACC,GAAA,CAAC,GAAA,EAAA,EAAE,WAAU,cAAA,EAAe,EAAA,EAAI,QAC7B,QAAA,EAAA,WAAA,EACH;AAAA,WAAA,EAEJ,CAAA;AAAA,UACC,+BACC,GAAA,CAAC,QAAA,EAAA,EAAO,MAAK,QAAA,EAAS,SAAA,EAAU,iBAAgB,YAAA,EAAW,cAAA,EAAe,SAAS,YAAA,EACjF,QAAA,kBAAA,GAAA,CAAC,QAAK,IAAA,EAAK,GAAA,EAAI,MAAK,IAAA,EAAK,MAAA,EAAO,QAAO,CAAA,EACzC;AAAA,SAAA,EAEJ,CAAA;AAAA,4BAGD,KAAA,EAAA,EAAI,SAAA,EAAU,cAAA,EAAe,GAAA,EAAK,SAChC,QAAA,EACH,CAAA;AAAA,QAEC,aAAA,oBAAiB,GAAA,CAAC,QAAA,EAAA,EAAO,SAAA,EAAU,kBAAkB,QAAA,EAAA,aAAA,EAAc;AAAA;AAAA;AAAA,GACtE;AAEJ;AAEO,SAAS,MAAA,CAAO;AAAA,EACrB,IAAA,EAAM,cAAA;AAAA,EACN,WAAA,GAAc,KAAA;AAAA,EACd,YAAA;AAAA,EACA,OAAA,GAAU,IAAA;AAAA,EACV,KAAA;AAAA,EACA,WAAA,GAAc,IAAA;AAAA,EACd,IAAA,GAAO,IAAA;AAAA,EACP,IAAA,GAAO,SAAA;AAAA,EACP,IAAA,GAAO,IAAA;AAAA,EACP,WAAA,GAAc,IAAA;AAAA,EACd,SAAA,GAAY,IAAA;AAAA,EACZ,MAAA,GAAS,IAAA;AAAA,EACT,QAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAgB;AACd,EAAA,MAAM,SAAS,KAAA,EAAM;AACrB,EAAA,MAAM,OAAA,GAAU,MAAM,SAAA,GAAY,MAAA;AAClC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,IAAI,eAAA,CAAgB,cAAA,EAAgB,aAAa,YAAY,CAAA;AACjF,EAAA,MAAM,UAAA,GAAa,OAAoB,IAAI,CAAA;AAC3C,EAAA,MAAM,KAAA,GAAQ,MAAM,OAAA,CAAQ,KAAK,CAAA;AAEjC,EAAA,MAAM,OAAA,GAAU,mBAAA,CAAoB,SAAA,EAAW,aAAa,CAAA;AAE5D,EAAA,4BACG,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,IAAA,cAAA,CAAe,OAAA,EAAS,EAAE,IAAA,EAAM,OAAA,EAAS,MAAM,OAAA,CAAQ,IAAI,CAAA,EAAG,OAAA,EAAS,QAAA,EAAU,QAAA,EAAU,UAAA,EAAY,CAAA;AAAA,oBACxG,GAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EACb,QAAA,kBAAA,GAAA,CAAC,YACE,QAAA,EAAA,IAAA,oBACC,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QAEC,SAAS,EAAE,CAAA,EAAG,CAAC,CAAA,EAAG,CAAC,GAAG,KAAA,EAAO,CAAC,MAAM,CAAC,CAAA,EAAG,SAAS,CAAC,CAAA,EAAG,CAAC,CAAA,EAAG,MAAA,EAAQ,QAAQ,IAAA,EAAK;AAAA,QAC9E,MAAM,EAAE,CAAA,EAAG,CAAC,CAAC,GAAG,KAAA,EAAO,CAAC,IAAI,CAAA,EAAG,SAAS,CAAC,CAAC,CAAA,EAAG,MAAA,EAAQ,QAAQ,KAAA,EAAM;AAAA,QACnE,UAAA,EAAW,uBAAA;AAAA,QACX,UAAA,EAAW,uBAAA;AAAA,QACX,OAAA;AAAA,QACA,WAAA;AAAA,QACA,SAAA;AAAA,QACA,YAAA,EAAc,KAAA;AAAA,QAEd,QAAA,kBAAA,GAAA;AAAA,UAAC,aAAA;AAAA,UAAA;AAAA,YACC,OAAA;AAAA,YACA,IAAA;AAAA,YACA,IAAA;AAAA,YACA,IAAA;AAAA,YACA,KAAA;AAAA,YACA,WAAA;AAAA,YACA,WAAA;AAAA,YACA,eAAe,OAAO,MAAA,KAAW,UAAA,GAAa,MAAA,CAAO,KAAK,CAAA,GAAI,MAAA;AAAA,YAC9D,YAAA,EAAc,KAAA;AAAA,YACd,SAAA;AAAA,YAEC;AAAA;AAAA;AACH,OAAA;AAAA,MAvBI;AAAA,OA0BV,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ","file":"dialog.js","sourcesContent":["'use client';\n\nimport './dialog.css';\nimport { Fragment, useId, useRef, type HTMLAttributes, type ReactElement, type ReactNode } from 'react';\nimport { Presence } from '../../../motion/presence';\nimport { resolveMotionTiming } from '../../../motion/motion-timing';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { ovCloneTrigger, OverlayPortal } from '../../internal/overlay/layer';\nimport { ModalShell } from '../../internal/overlay/modal';\nimport { Icon } from '../../internal/icon/Icon';\nimport { IconSlot } from '../../internal/icon/IconSlot';\nimport { useScrollEdges } from '../../internal/hooks/use-scroll-edges';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\nconst DIALOG_TIMING = {\n  open: { duration: 'slow', ease: 'entrance' },\n  close: { duration: 'base', ease: 'standard' },\n} as const;\n\nexport interface DialogProps {\n  /** Controlled open state. Omit for uncontrolled (use defaultOpen + trigger). */\n  open?: boolean;\n  /** Initial open state when uncontrolled. @default false */\n  defaultOpen?: boolean;\n  /** Fires whenever the open state changes. Pair with `open` for controlled use. */\n  onOpenChange?: (open: boolean) => void;\n  /** Optional element cloned to open the dialog on click (uncontrolled ergonomics). */\n  trigger?: ReactElement | null;\n  /** Header title - rendered as the `<h2>` and wired to `aria-labelledby`. */\n  title?: ReactNode;\n  /** Subtext under the title - wired to `aria-describedby`. @default null */\n  description?: ReactNode;\n  /** Panel width. @default 'md' */\n  size?: 'sm' | 'md' | 'lg';\n  /** 'danger' tints the header icon badge + is the convention for destructive confirms. */\n  tone?: 'default' | 'danger';\n  /** Your own icon node for the header badge (alert dialogs). */\n  icon?: ReactNode;\n  /** Close button + backdrop/Esc dismissal. Default true. */\n  dismissible?: boolean;\n  /** Center inside this element instead of the viewport - it must be positioned (`position: relative` or similar).\n   *  Scrim, scroll lock and inert scope to it; the rest of the page stays interactive. */\n  container?: HTMLElement | null;\n  /** Action row - a node, or a render fn `(close) => node` so uncontrolled dialogs can dismiss. */\n  footer?: ReactNode | ((close: () => void) => ReactNode);\n  /** Dialog body - scrolls when tall; its scroll edges flag the header lift + footer divider. */\n  children?: ReactNode;\n  /** Base id for the panel; drives the trigger's `aria-controls` and the title/desc aria ids.\n   *  Auto-generated when omitted. */\n  id?: string;\n  /** Standard attributes (className, style, data-*, ...) forwarded to the dialog `<section>`. */\n  htmlProps?: HTMLAttributes<HTMLElement> & DataAttributes;\n  /** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'standard' */\n  animation?: DisableableAnimation;\n}\n\ninterface DialogSurfaceProps {\n  panelId: string;\n  size: 'sm' | 'md' | 'lg';\n  tone: 'default' | 'danger';\n  icon: ReactNode;\n  title: ReactNode;\n  description: ReactNode;\n  dismissible: boolean;\n  footerContent: ReactNode;\n  requestClose: () => void;\n  htmlProps?: HTMLAttributes<HTMLElement> & DataAttributes;\n  children?: ReactNode;\n}\n\nfunction DialogSurface({\n  panelId,\n  size,\n  tone,\n  icon,\n  title,\n  description,\n  dismissible,\n  footerContent,\n  requestClose,\n  htmlProps,\n  children,\n}: DialogSurfaceProps) {\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const titleId = panelId + '-title';\n  const descId = panelId + '-desc';\n\n  useScrollEdges(bodyRef, (edges, el) => {\n    el.toggleAttribute('data-scroll-top', edges.top);\n    el.toggleAttribute('data-scroll-bottom', edges.bottom);\n  });\n\n  return (\n    <section\n      {...htmlProps}\n      className={cx('dialog', htmlProps?.className)}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      data-size={size === 'md' ? undefined : size}\n      data-tone={tone === 'default' ? undefined : tone}\n      aria-labelledby={title ? titleId : undefined}\n      aria-describedby={description ? descId : undefined}\n    >\n      {(icon || title || description || dismissible) && (\n        <header className=\"dialog__header\">\n          {icon && (\n            <span className=\"dialog__icon\">\n              <IconSlot size=\"md\">{icon}</IconSlot>\n            </span>\n          )}\n          <div className=\"dialog__heading\">\n            {title && (\n              <h2 className=\"dialog__title\" id={titleId}>\n                {title}\n              </h2>\n            )}\n            {description && (\n              <p className=\"dialog__desc\" id={descId}>\n                {description}\n              </p>\n            )}\n          </div>\n          {dismissible && (\n            <button type=\"button\" className=\"dialog__close\" aria-label=\"Close dialog\" onClick={requestClose}>\n              <Icon name=\"x\" size=\"sm\" weight=\"bold\" />\n            </button>\n          )}\n        </header>\n      )}\n\n      <div className=\"dialog__body\" ref={bodyRef}>\n        {children}\n      </div>\n\n      {footerContent && <footer className=\"dialog__footer\">{footerContent}</footer>}\n    </section>\n  );\n}\n\nexport function Dialog({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  trigger = null,\n  title,\n  description = null,\n  size = 'md',\n  tone = 'default',\n  icon = null,\n  dismissible = true,\n  container = null,\n  footer = null,\n  children,\n  id,\n  htmlProps,\n  animation,\n}: DialogProps) {\n  const autoId = useId();\n  const panelId = id || 'dialog-' + autoId;\n  const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);\n  const triggerRef = useRef<HTMLElement>(null);\n  const close = () => setOpen(false);\n\n  const timings = resolveMotionTiming(animation, DIALOG_TIMING);\n\n  return (\n    <Fragment>\n      {ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: 'dialog', triggerRef })}\n      <OverlayPortal container={container}>\n        <Presence>\n          {open && (\n            <ModalShell\n              key=\"dialog\"\n              animate={{ y: [6, 0], scale: [0.98, 1], opacity: [0, 1], timing: timings.open }}\n              exit={{ y: [6], scale: [0.98], opacity: [0], timing: timings.close }}\n              layerClass=\"overlay-layer--dialog\"\n              panelClass=\"overlay-panel--dialog\"\n              panelId={panelId}\n              dismissible={dismissible}\n              container={container}\n              requestClose={close}\n            >\n              <DialogSurface\n                panelId={panelId}\n                size={size}\n                tone={tone}\n                icon={icon}\n                title={title}\n                description={description}\n                dismissible={dismissible}\n                footerContent={typeof footer === 'function' ? footer(close) : footer}\n                requestClose={close}\n                htmlProps={htmlProps}\n              >\n                {children}\n              </DialogSurface>\n            </ModalShell>\n          )}\n        </Presence>\n      </OverlayPortal>\n    </Fragment>\n  );\n}\n"]}

package/dist/mcp.js

@@ -21,9 +21,7 @@ function findRoot() {
 }
 var SECTION_RE = /^=+\s+(.+?)\s*$/;
 var HEADING_RE = /^([A-Za-z][\w /]*?) - @zyncat\/ui\/([a-z][a-z0-9-]*)\b.*$/;
-var cached = null;
 function db() {
-  if (cached) return cached;
   const root = findRoot();
   const pkg = JSON.parse(readFileSync(join(root, "package.json"), "utf8"));
   const subpaths = Object.entries(pkg.exports ?? {}).filter(([, v]) => typeof v === "object" && v !== null && "types" in v).map(([k]) => k.replace(/^\.\//, ""));
@@ -62,8 +60,7 @@ function db() {
     while (s.body.length && !s.body[0].trim()) s.body.shift();
   }
   while (preamble.length && !preamble[preamble.length - 1].trim()) preamble.pop();
-  cached = { root, version: String(pkg.version ?? "0"), subpaths, preamble, sections, entries };
-  return cached;
+  return { root, version: String(pkg.version ?? "0"), subpaths, preamble, sections, entries };
 }
 var norm = (s) => s.toLowerCase().replace(/^@zyncat\/ui\//, "").replace(/[^a-z0-9]/g, "");
 function resolveSubpath(input) {

package/dist/modal.css

@@ -0,0 +1,9 @@
+/* modal.css - the unpainted modal surface: the shell layer centers the panel and
+   constrains it to the layer box. Everything else is the consumer's paint. */
+.overlay-layer--modal {
+  place-items: center;
+}
+.overlay-panel--modal {
+  max-width: 100%;
+  max-height: 100%;
+}

package/dist/modal.d.ts

@@ -0,0 +1,35 @@
+import * as react from 'react';
+import { ReactElement, HTMLAttributes, ReactNode } from 'react';
+import { D as DisableableAnimation } from './timing-7JA_zQHP.js';
+import { D as DataAttributes } from './dom-props-C0jrllBw.js';
+import './motion-scale-Canq4stZ.js';
+
+interface ModalProps {
+    /** Controlled open state. Omit to stay uncontrolled. */
+    open?: boolean;
+    /** Initial state when uncontrolled. Default false. */
+    defaultOpen?: boolean;
+    /** Fires whenever the open state changes. Pair with `open` for controlled use. */
+    onOpenChange?: (open: boolean) => void;
+    /** Cloned to open the modal on click. */
+    trigger?: ReactElement | null;
+    /** Scrim/Esc dismissal. Default true. */
+    dismissible?: boolean;
+    /** Mount inside this element instead of the viewport - it must be positioned (`position: relative` or similar).
+     *  Scrim, scroll lock and inert scope to it; the rest of the page stays interactive. */
+    container?: HTMLElement | null;
+    /** Base id for the panel; drives the trigger's `aria-controls`. Auto-generated when omitted. */
+    id?: string;
+    /** Standard attributes (className, style, data-*, ...) forwarded to the panel - this is where your paint goes.
+     *  Centered by default; `width: 100%; height: 100%` makes it full-bleed. */
+    htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
+    /** Standard attributes forwarded to the layer behind the panel - set `--bg-overlay` here to retint the scrim. */
+    layerProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
+    /** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'standard' */
+    animation?: DisableableAnimation;
+    /** The ENTIRE surface - paint AND semantics (`role="dialog"`, a label). Nothing is painted for you. */
+    children: ReactNode;
+}
+declare function Modal({ open: controlledOpen, defaultOpen, onOpenChange, trigger, dismissible, container, id, htmlProps, layerProps, animation, children, }: ModalProps): react.JSX.Element;
+
+export { Modal, type ModalProps };

package/dist/modal.js

@@ -0,0 +1,63 @@
+'use client';import { ModalShell } from './chunk-WFHRAKN3.js';
+import './chunk-DKVUPFQR.js';
+import { ovCloneTrigger, OverlayPortal } from './chunk-U4MHX3KH.js';
+import { resolveMotionTiming } from './chunk-NEF5XAHG.js';
+import { Presence } from './chunk-NGTA34V2.js';
+import './chunk-XWUWYSCT.js';
+import './chunk-YGCVWGUG.js';
+import { useControllable } from './chunk-MMRIQNEN.js';
+import './chunk-S5ZTZANS.js';
+import './chunk-VTJTGVZZ.js';
+import './chunk-QGNC7LH5.js';
+import './modal.css';
+import { useRef, useId, Fragment } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var MODAL_TIMING = {
+  open: { duration: "slow", ease: "entrance" },
+  close: { duration: "base", ease: "standard" }
+};
+function Modal({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  trigger = null,
+  dismissible = true,
+  container = null,
+  id,
+  htmlProps,
+  layerProps,
+  animation,
+  children
+}) {
+  const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);
+  const triggerRef = useRef(null);
+  const autoId = useId();
+  const panelId = id || "modal-" + autoId;
+  const close = () => setOpen(false);
+  const timings = resolveMotionTiming(animation, MODAL_TIMING);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: "dialog", triggerRef }),
+    /* @__PURE__ */ jsx(OverlayPortal, { container, children: /* @__PURE__ */ jsx(Presence, { children: open && /* @__PURE__ */ jsx(
+      ModalShell,
+      {
+        animate: { opacity: [0, 1], scale: [0.98, 1], timing: timings.open },
+        exit: { opacity: [0], scale: [0.98], timing: timings.close },
+        layerClass: "overlay-layer--modal",
+        panelClass: "overlay-panel--modal",
+        panelId,
+        dismissible,
+        container,
+        requestClose: close,
+        panelProps: htmlProps,
+        layerProps,
+        children
+      },
+      "modal"
+    ) }) })
+  ] });
+}
+
+export { Modal };
+//# sourceMappingURL=modal.js.map
+//# sourceMappingURL=modal.js.map

package/dist/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/modal/Modal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAYA,IAAM,YAAA,GAAe;AAAA,EACnB,IAAA,EAAM,EAAE,QAAA,EAAU,MAAA,EAAQ,MAAM,UAAA,EAAW;AAAA,EAC3C,KAAA,EAAO,EAAE,QAAA,EAAU,MAAA,EAAQ,MAAM,UAAA;AACnC,CAAA;AAiCO,SAAS,KAAA,CAAM;AAAA,EACpB,IAAA,EAAM,cAAA;AAAA,EACN,WAAA,GAAc,KAAA;AAAA,EACd,YAAA;AAAA,EACA,OAAA,GAAU,IAAA;AAAA,EACV,WAAA,GAAc,IAAA;AAAA,EACd,SAAA,GAAY,IAAA;AAAA,EACZ,EAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAe;AACb,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,IAAI,eAAA,CAAgB,cAAA,EAAgB,aAAa,YAAY,CAAA;AACjF,EAAA,MAAM,UAAA,GAAa,OAAoB,IAAI,CAAA;AAC3C,EAAA,MAAM,SAAS,KAAA,EAAM;AACrB,EAAA,MAAM,OAAA,GAAU,MAAM,QAAA,GAAW,MAAA;AACjC,EAAA,MAAM,KAAA,GAAQ,MAAM,OAAA,CAAQ,KAAK,CAAA;AACjC,EAAA,MAAM,OAAA,GAAU,mBAAA,CAAoB,SAAA,EAAW,YAAY,CAAA;AAE3D,EAAA,4BACG,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,IAAA,cAAA,CAAe,OAAA,EAAS,EAAE,IAAA,EAAM,OAAA,EAAS,MAAM,OAAA,CAAQ,IAAI,CAAA,EAAG,OAAA,EAAS,QAAA,EAAU,QAAA,EAAU,UAAA,EAAY,CAAA;AAAA,oBACxG,GAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EACb,QAAA,kBAAA,GAAA,CAAC,YACE,QAAA,EAAA,IAAA,oBACC,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QAEC,OAAA,EAAS,EAAE,OAAA,EAAS,CAAC,GAAG,CAAC,CAAA,EAAG,KAAA,EAAO,CAAC,IAAA,EAAM,CAAC,CAAA,EAAG,MAAA,EAAQ,QAAQ,IAAA,EAAK;AAAA,QACnE,IAAA,EAAM,EAAE,OAAA,EAAS,CAAC,CAAC,CAAA,EAAG,KAAA,EAAO,CAAC,IAAI,CAAA,EAAG,MAAA,EAAQ,OAAA,CAAQ,KAAA,EAAM;AAAA,QAC3D,UAAA,EAAW,sBAAA;AAAA,QACX,UAAA,EAAW,sBAAA;AAAA,QACX,OAAA;AAAA,QACA,WAAA;AAAA,QACA,SAAA;AAAA,QACA,YAAA,EAAc,KAAA;AAAA,QACd,UAAA,EAAY,SAAA;AAAA,QACZ,UAAA;AAAA,QAEC;AAAA,OAAA;AAAA,MAZG;AAAA,OAeV,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ","file":"modal.js","sourcesContent":["'use client';\n\nimport './modal.css';\nimport { Fragment, useId, useRef, type HTMLAttributes, type ReactElement, type ReactNode } from 'react';\nimport { Presence } from '../../../motion/presence';\nimport { resolveMotionTiming } from '../../../motion/motion-timing';\nimport type { DisableableAnimation } from '../../../motion/timing';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { ovCloneTrigger, OverlayPortal } from '../../internal/overlay/layer';\nimport { ModalShell } from '../../internal/overlay/modal';\nimport type { DataAttributes } from '../../../dom-props';\n\nconst MODAL_TIMING = {\n  open: { duration: 'slow', ease: 'entrance' },\n  close: { duration: 'base', ease: 'standard' },\n} as const;\n\nexport interface ModalProps {\n  /** Controlled open state. Omit to stay uncontrolled. */\n  open?: boolean;\n  /** Initial state when uncontrolled. Default false. */\n  defaultOpen?: boolean;\n  /** Fires whenever the open state changes. Pair with `open` for controlled use. */\n  onOpenChange?: (open: boolean) => void;\n\n  /** Cloned to open the modal on click. */\n  trigger?: ReactElement | null;\n\n  /** Scrim/Esc dismissal. Default true. */\n  dismissible?: boolean;\n\n  /** Mount inside this element instead of the viewport - it must be positioned (`position: relative` or similar).\n   *  Scrim, scroll lock and inert scope to it; the rest of the page stays interactive. */\n  container?: HTMLElement | null;\n\n  /** Base id for the panel; drives the trigger's `aria-controls`. Auto-generated when omitted. */\n  id?: string;\n  /** Standard attributes (className, style, data-*, ...) forwarded to the panel - this is where your paint goes.\n   *  Centered by default; `width: 100%; height: 100%` makes it full-bleed. */\n  htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;\n  /** Standard attributes forwarded to the layer behind the panel - set `--bg-overlay` here to retint the scrim. */\n  layerProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;\n  /** Open/close timing - motion tokens only, or `null` to disable. @default open 'slow'/'entrance', close 'base'/'standard' */\n  animation?: DisableableAnimation;\n  /** The ENTIRE surface - paint AND semantics (`role=\"dialog\"`, a label). Nothing is painted for you. */\n  children: ReactNode;\n}\n\nexport function Modal({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  trigger = null,\n  dismissible = true,\n  container = null,\n  id,\n  htmlProps,\n  layerProps,\n  animation,\n  children,\n}: ModalProps) {\n  const [open, setOpen] = useControllable(controlledOpen, defaultOpen, onOpenChange);\n  const triggerRef = useRef<HTMLElement>(null);\n  const autoId = useId();\n  const panelId = id || 'modal-' + autoId;\n  const close = () => setOpen(false);\n  const timings = resolveMotionTiming(animation, MODAL_TIMING);\n\n  return (\n    <Fragment>\n      {ovCloneTrigger(trigger, { open, onPress: () => setOpen(true), panelId, haspopup: 'dialog', triggerRef })}\n      <OverlayPortal container={container}>\n        <Presence>\n          {open && (\n            <ModalShell\n              key=\"modal\"\n              animate={{ opacity: [0, 1], scale: [0.98, 1], timing: timings.open }}\n              exit={{ opacity: [0], scale: [0.98], timing: timings.close }}\n              layerClass=\"overlay-layer--modal\"\n              panelClass=\"overlay-panel--modal\"\n              panelId={panelId}\n              dismissible={dismissible}\n              container={container}\n              requestClose={close}\n              panelProps={htmlProps}\n              layerProps={layerProps}\n            >\n              {children}\n            </ModalShell>\n          )}\n        </Presence>\n      </OverlayPortal>\n    </Fragment>\n  );\n}\n"]}

package/dist/multi-select.js

@@ -1,10 +1,10 @@
-'use client';import { useListbox, SelectTrigger, ListboxPanel } from './chunk-45XJ75GZ.js';
-import './chunk-EQ32F2QJ.js';
-import './chunk-GY7JOPUQ.js';
+'use client';import { useListbox, SelectTrigger, ListboxPanel } from './chunk-AIQXS2XY.js';
+import './chunk-62P3KD57.js';
+import './chunk-U4MHX3KH.js';
 import './chunk-UE63OOVG.js';
 import './chunk-WM5J5TDI.js';
 import './chunk-NEF5XAHG.js';
-import './chunk-356HZMT4.js';
+import './chunk-NGTA34V2.js';
 import './chunk-XWUWYSCT.js';
 import './chunk-YGCVWGUG.js';
 import './chunk-2ERBBFZS.js';

package/dist/overlay.css

@@ -8,6 +8,9 @@
   inset: 0;
   display: grid;
 }
+.overlay-layer--scoped {
+  position: absolute;
+}
 .overlay-scrim {
   position: absolute;
   inset: 0;