@viax.io/uxm 4.36.0

package/dist/ui/detail-section/detail-section-preview.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { DetailSection } from "../../ui/index.js";
+import { Icon } from "../../ui/index.js";
+function DetailSectionPreview({ styles }) {
+  const cssVars = {
+    "--uxm-detail-section-bg": styles.backgroundColor,
+    "--uxm-detail-section-border-color": styles.borderColor,
+    "--uxm-detail-section-radius": `${styles.borderRadius}px`,
+    "--uxm-detail-section-padding": `${styles.padding}px`,
+    "--uxm-detail-section-icon-bg": styles.iconBg,
+    "--uxm-detail-section-icon-color": styles.iconColor,
+    "--uxm-detail-section-title-size": `${styles.titleSize}px`,
+    "--uxm-detail-section-subtitle-color": styles.subtitleColor,
+    "--uxm-detail-section-accent-width": `${styles.accentWidth}px`,
+    "--uxm-detail-section-accent-color": styles.accentColor,
+    width: 420
+  };
+  return /* @__PURE__ */ jsx(
+    DetailSection,
+    {
+      style: cssVars,
+      icon: /* @__PURE__ */ jsx(Icon, { glyph: "menu", size: 18, strokeWidth: 1.5 }),
+      title: "Revenue Motions",
+      subtitle: "3 active configurations",
+      children: "Defines how revenue is recognised across the customer lifecycle."
+    }
+  );
+}
+export {
+  DetailSectionPreview
+};
+//# sourceMappingURL=detail-section-preview.js.map

package/dist/ui/detail-section/detail-section-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/detail-section/detail-section-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { DetailSection } from '@/ui';\nimport { Icon } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nexport function DetailSectionPreview({ styles }: PreviewProps) {\n  // Each registry knob → matching CSS custom property; the preview consumes\n  // the real component instead of reimplementing it inline.\n  const cssVars = {\n    '--uxm-detail-section-bg': styles.backgroundColor as string,\n    '--uxm-detail-section-border-color': styles.borderColor as string,\n    '--uxm-detail-section-radius': `${styles.borderRadius}px`,\n    '--uxm-detail-section-padding': `${styles.padding}px`,\n    '--uxm-detail-section-icon-bg': styles.iconBg as string,\n    '--uxm-detail-section-icon-color': styles.iconColor as string,\n    '--uxm-detail-section-title-size': `${styles.titleSize}px`,\n    '--uxm-detail-section-subtitle-color': styles.subtitleColor as string,\n    '--uxm-detail-section-accent-width': `${styles.accentWidth}px`,\n    '--uxm-detail-section-accent-color': styles.accentColor as string,\n    width: 420,\n  } as CSSProperties;\n\n  return (\n    <DetailSection\n      style={cssVars}\n      icon={<Icon glyph=\"menu\" size={18} strokeWidth={1.5} />}\n      title=\"Revenue Motions\"\n      subtitle=\"3 active configurations\"\n    >\n      Defines how revenue is recognised across the customer lifecycle.\n    </DetailSection>\n  );\n}\n"],"mappings":"AA0BY;AAzBZ,SAAS,qBAAqB;AAC9B,SAAS,YAAY;AAId,SAAS,qBAAqB,EAAE,OAAO,GAAiB;AAG7D,QAAM,UAAU;AAAA,IACd,2BAA2B,OAAO;AAAA,IAClC,qCAAqC,OAAO;AAAA,IAC5C,+BAA+B,GAAG,OAAO,YAAY;AAAA,IACrD,gCAAgC,GAAG,OAAO,OAAO;AAAA,IACjD,gCAAgC,OAAO;AAAA,IACvC,mCAAmC,OAAO;AAAA,IAC1C,mCAAmC,GAAG,OAAO,SAAS;AAAA,IACtD,uCAAuC,OAAO;AAAA,IAC9C,qCAAqC,GAAG,OAAO,WAAW;AAAA,IAC1D,qCAAqC,OAAO;AAAA,IAC5C,OAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,MAAM,oBAAC,QAAK,OAAM,QAAO,MAAM,IAAI,aAAa,KAAK;AAAA,MACrD,OAAM;AAAA,MACN,UAAS;AAAA,MACV;AAAA;AAAA,EAED;AAEJ;","names":[]}

package/dist/ui/detail-section/detail-section.cjs

@@ -0,0 +1,59 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var detail_section_exports = {};
+__export(detail_section_exports, {
+  DetailSection: () => DetailSection
+});
+module.exports = __toCommonJS(detail_section_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_helpers = require("../../helpers/index.cjs");
+var import_icon_tile = require("../icon-tile/index.cjs");
+const ICON_TILE_STYLE = {
+  ["--uxm-icon-tile-bg"]: "var(--uxm-detail-section-icon-bg, var(--color-surface-alt))",
+  ["--uxm-icon-tile-color"]: "var(--uxm-detail-section-icon-color, var(--color-text-muted))",
+  ["--uxm-icon-tile-size"]: "32px",
+  ["--uxm-icon-tile-radius"]: "6px"
+};
+function DetailSection({
+  icon,
+  title,
+  subtitle,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: (0, import_helpers.cn)("uxm-detail-section", className), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-detail-section__accent", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uxm-detail-section__inner", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: "uxm-detail-section__header", children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon_tile.IconTile, { style: ICON_TILE_STYLE, children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uxm-detail-section__heading", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "uxm-detail-section__title", children: title }),
+          subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "uxm-detail-section__subtitle", children: subtitle })
+        ] })
+      ] }),
+      children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-detail-section__body", children })
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DetailSection
+});
+//# sourceMappingURL=detail-section.cjs.map

package/dist/ui/detail-section/detail-section.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/detail-section/detail-section.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport { IconTile } from '../icon-tile';\n\nimport type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nexport interface DetailSectionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  icon?: ReactNode;\n  title: ReactNode;\n  subtitle?: ReactNode;\n  children?: ReactNode;\n}\n\n// Project DetailSection's icon-tile theming surface onto IconTile.\n// `--uxm-detail-section-icon-{bg,color}` flow through the section's CSS\n// (set by editor saves or consumer inline style) into IconTile's own vars.\nconst ICON_TILE_STYLE: CSSProperties = {\n  ['--uxm-icon-tile-bg' as string]: 'var(--uxm-detail-section-icon-bg, var(--color-surface-alt))',\n  ['--uxm-icon-tile-color' as string]: 'var(--uxm-detail-section-icon-color, var(--color-text-muted))',\n  ['--uxm-icon-tile-size' as string]: '32px',\n  ['--uxm-icon-tile-radius' as string]: '6px',\n};\n\nexport function DetailSection({\n  icon,\n  title,\n  subtitle,\n  children,\n  className,\n  ...rest\n}: DetailSectionProps) {\n  return (\n    <section className={cn('uxm-detail-section', className)} {...rest}>\n      <span className=\"uxm-detail-section__accent\" aria-hidden=\"true\" />\n      <div className=\"uxm-detail-section__inner\">\n        <header className=\"uxm-detail-section__header\">\n          {icon && <IconTile style={ICON_TILE_STYLE}>{icon}</IconTile>}\n          <div className=\"uxm-detail-section__heading\">\n            <h3 className=\"uxm-detail-section__title\">{title}</h3>\n            {subtitle && <p className=\"uxm-detail-section__subtitle\">{subtitle}</p>}\n          </div>\n        </header>\n        {children && <div className=\"uxm-detail-section__body\">{children}</div>}\n      </div>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCM;AAjCN,qBAAmB;AAEnB,uBAAyB;AAczB,MAAM,kBAAiC;AAAA,EACrC,CAAC,oBAA8B,GAAG;AAAA,EAClC,CAAC,uBAAiC,GAAG;AAAA,EACrC,CAAC,sBAAgC,GAAG;AAAA,EACpC,CAAC,wBAAkC,GAAG;AACxC;AAEO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,SACE,6CAAC,aAAQ,eAAW,mBAAG,sBAAsB,SAAS,GAAI,GAAG,MAC3D;AAAA,gDAAC,UAAK,WAAU,8BAA6B,eAAY,QAAO;AAAA,IAChE,6CAAC,SAAI,WAAU,6BACb;AAAA,mDAAC,YAAO,WAAU,8BACf;AAAA,gBAAQ,4CAAC,6BAAS,OAAO,iBAAkB,gBAAK;AAAA,QACjD,6CAAC,SAAI,WAAU,+BACb;AAAA,sDAAC,QAAG,WAAU,6BAA6B,iBAAM;AAAA,UAChD,YAAY,4CAAC,OAAE,WAAU,gCAAgC,oBAAS;AAAA,WACrE;AAAA,SACF;AAAA,MACC,YAAY,4CAAC,SAAI,WAAU,4BAA4B,UAAS;AAAA,OACnE;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/detail-section/detail-section.css

@@ -0,0 +1,54 @@
+@charset "UTF-8";
+/* ── detail-section ── */
+/* DetailSection — defaults match the `detail-section` registry entry.
+   `padding` controls the inner box (rail width is added on the left so
+   accent toggles don't reflow content). Note: registry default radius
+   is 4 (was hardcoded 8 — drift). */
+.uxm-detail-section {
+  background-color: var(--uxm-detail-section-bg, var(--color-card));
+  border: 1px solid var(--uxm-detail-section-border-color, var(--color-border));
+  border-radius: var(--uxm-detail-section-radius, 4px);
+  overflow: hidden;
+  position: relative;
+  /* Icon tile is now <IconTile>; DetailSection's `--uxm-detail-section-icon-{bg,color}`
+     bridge to IconTile's own CSS-variable surface in the .tsx. */
+}
+.uxm-detail-section__accent {
+  background-color: var(--uxm-detail-section-accent-color, var(--color-accent));
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: var(--uxm-detail-section-accent-width, 3px);
+}
+.uxm-detail-section__inner {
+  padding: var(--uxm-detail-section-padding, 20px);
+  /* Reserve space for the rail on the left so the accent doesn't overlap content. */
+  padding-left: calc(var(--uxm-detail-section-padding, 20px) + var(--uxm-detail-section-accent-width, 3px) + 4px);
+}
+.uxm-detail-section__header {
+  align-items: center;
+  display: flex;
+  gap: 12px;
+}
+.uxm-detail-section__heading {
+  min-width: 0;
+}
+.uxm-detail-section__title {
+  color: var(--color-text);
+  font-family: var(--uxm-detail-section-title-font, var(--type-section-title-font, var(--brand-heading-font, inherit)));
+  font-size: calc(var(--uxm-detail-section-title-size, 15px) * var(--type-section-title-scale, 1) * var(--type-scale, 1));
+  font-weight: var(--uxm-detail-section-title-weight, var(--type-section-title-weight, var(--brand-heading-weight, 600)));
+  margin: 0;
+}
+.uxm-detail-section__subtitle {
+  color: var(--uxm-detail-section-subtitle-color, var(--color-text-muted));
+  font-size: calc(12px * var(--type-scale, 1));
+  margin: 2px 0 0;
+}
+.uxm-detail-section__body {
+  color: var(--color-text-muted);
+  font-size: calc(13px * var(--type-scale, 1));
+  line-height: var(--type-body-line-height, 1.5);
+  margin-top: 12px;
+}

package/dist/ui/detail-section/detail-section.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface DetailSectionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    icon?: ReactNode;
+    title: ReactNode;
+    subtitle?: ReactNode;
+    children?: ReactNode;
+}
+export declare function DetailSection({ icon, title, subtitle, children, className, ...rest }: DetailSectionProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=detail-section.d.ts.map

package/dist/ui/detail-section/detail-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"detail-section.d.ts","sourceRoot":"","sources":["../../../src/ui/detail-section/detail-section.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAiB,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtE,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAYD,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,GAAG,IAAI,EACR,EAAE,kBAAkB,2CAgBpB"}

package/dist/ui/detail-section/detail-section.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+import { IconTile } from "../icon-tile/index.js";
+const ICON_TILE_STYLE = {
+  ["--uxm-icon-tile-bg"]: "var(--uxm-detail-section-icon-bg, var(--color-surface-alt))",
+  ["--uxm-icon-tile-color"]: "var(--uxm-detail-section-icon-color, var(--color-text-muted))",
+  ["--uxm-icon-tile-size"]: "32px",
+  ["--uxm-icon-tile-radius"]: "6px"
+};
+function DetailSection({
+  icon,
+  title,
+  subtitle,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: cn("uxm-detail-section", className), ...rest, children: [
+    /* @__PURE__ */ jsx("span", { className: "uxm-detail-section__accent", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs("div", { className: "uxm-detail-section__inner", children: [
+      /* @__PURE__ */ jsxs("header", { className: "uxm-detail-section__header", children: [
+        icon && /* @__PURE__ */ jsx(IconTile, { style: ICON_TILE_STYLE, children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: "uxm-detail-section__heading", children: [
+          /* @__PURE__ */ jsx("h3", { className: "uxm-detail-section__title", children: title }),
+          subtitle && /* @__PURE__ */ jsx("p", { className: "uxm-detail-section__subtitle", children: subtitle })
+        ] })
+      ] }),
+      children && /* @__PURE__ */ jsx("div", { className: "uxm-detail-section__body", children })
+    ] })
+  ] });
+}
+export {
+  DetailSection
+};
+//# sourceMappingURL=detail-section.js.map

package/dist/ui/detail-section/detail-section.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/detail-section/detail-section.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport { IconTile } from '../icon-tile';\n\nimport type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\nexport interface DetailSectionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  icon?: ReactNode;\n  title: ReactNode;\n  subtitle?: ReactNode;\n  children?: ReactNode;\n}\n\n// Project DetailSection's icon-tile theming surface onto IconTile.\n// `--uxm-detail-section-icon-{bg,color}` flow through the section's CSS\n// (set by editor saves or consumer inline style) into IconTile's own vars.\nconst ICON_TILE_STYLE: CSSProperties = {\n  ['--uxm-icon-tile-bg' as string]: 'var(--uxm-detail-section-icon-bg, var(--color-surface-alt))',\n  ['--uxm-icon-tile-color' as string]: 'var(--uxm-detail-section-icon-color, var(--color-text-muted))',\n  ['--uxm-icon-tile-size' as string]: '32px',\n  ['--uxm-icon-tile-radius' as string]: '6px',\n};\n\nexport function DetailSection({\n  icon,\n  title,\n  subtitle,\n  children,\n  className,\n  ...rest\n}: DetailSectionProps) {\n  return (\n    <section className={cn('uxm-detail-section', className)} {...rest}>\n      <span className=\"uxm-detail-section__accent\" aria-hidden=\"true\" />\n      <div className=\"uxm-detail-section__inner\">\n        <header className=\"uxm-detail-section__header\">\n          {icon && <IconTile style={ICON_TILE_STYLE}>{icon}</IconTile>}\n          <div className=\"uxm-detail-section__heading\">\n            <h3 className=\"uxm-detail-section__title\">{title}</h3>\n            {subtitle && <p className=\"uxm-detail-section__subtitle\">{subtitle}</p>}\n          </div>\n        </header>\n        {children && <div className=\"uxm-detail-section__body\">{children}</div>}\n      </div>\n    </section>\n  );\n}\n"],"mappings":"AAiCM,cAII,YAJJ;AAjCN,SAAS,UAAU;AAEnB,SAAS,gBAAgB;AAczB,MAAM,kBAAiC;AAAA,EACrC,CAAC,oBAA8B,GAAG;AAAA,EAClC,CAAC,uBAAiC,GAAG;AAAA,EACrC,CAAC,sBAAgC,GAAG;AAAA,EACpC,CAAC,wBAAkC,GAAG;AACxC;AAEO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,SACE,qBAAC,aAAQ,WAAW,GAAG,sBAAsB,SAAS,GAAI,GAAG,MAC3D;AAAA,wBAAC,UAAK,WAAU,8BAA6B,eAAY,QAAO;AAAA,IAChE,qBAAC,SAAI,WAAU,6BACb;AAAA,2BAAC,YAAO,WAAU,8BACf;AAAA,gBAAQ,oBAAC,YAAS,OAAO,iBAAkB,gBAAK;AAAA,QACjD,qBAAC,SAAI,WAAU,+BACb;AAAA,8BAAC,QAAG,WAAU,6BAA6B,iBAAM;AAAA,UAChD,YAAY,oBAAC,OAAE,WAAU,gCAAgC,oBAAS;AAAA,WACrE;AAAA,SACF;AAAA,MACC,YAAY,oBAAC,SAAI,WAAU,4BAA4B,UAAS;AAAA,OACnE;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/detail-section/index.cjs

@@ -0,0 +1,23 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var detail_section_exports = {};
+module.exports = __toCommonJS(detail_section_exports);
+__reExport(detail_section_exports, require("./detail-section.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./detail-section.cjs")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/detail-section/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/detail-section/index.ts"],"sourcesContent":["export * from './detail-section';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,mCAAc,6BAAd;","names":[]}

package/dist/ui/detail-section/index.d.ts

@@ -0,0 +1,2 @@
+export * from './detail-section.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/detail-section/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/detail-section/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/dist/ui/detail-section/index.js

@@ -0,0 +1,2 @@
+export * from "./detail-section.js";
+//# sourceMappingURL=index.js.map

package/dist/ui/detail-section/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/detail-section/index.ts"],"sourcesContent":["export * from './detail-section';\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/ui/dialog/dialog.cjs

@@ -0,0 +1,104 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var dialog_exports = {};
+__export(dialog_exports, {
+  Dialog: () => Dialog
+});
+module.exports = __toCommonJS(dialog_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react_dom = require("react-dom");
+var import_cn = require("../../helpers/cn.cjs");
+var import_use_dismiss = require("../../hooks/use-dismiss.cjs");
+var import_use_focus_on_mount = require("../../hooks/use-focus-on-mount.cjs");
+var import_use_focus_trap = require("../../hooks/use-focus-trap.cjs");
+var import_use_portal = require("../../hooks/use-portal.cjs");
+var import_use_scroll_lock = require("../../hooks/use-scroll-lock.cjs");
+let __openCount = 0;
+function Dialog({
+  open,
+  onOpenChange,
+  children,
+  closeOnEscape = true,
+  closeOnOutsideClick = true,
+  initialFocus,
+  returnFocus = true,
+  "aria-labelledby": ariaLabelledby,
+  "aria-describedby": ariaDescribedby,
+  className
+}) {
+  const mounted = (0, import_use_portal.usePortal)();
+  const panelRef = (0, import_react.useRef)(null);
+  const dismissRefs = (0, import_react.useMemo)(() => [panelRef], []);
+  (0, import_react.useEffect)(() => {
+    if (!open) return;
+    __openCount += 1;
+    if (__openCount > 1) {
+      console.warn(
+        "[Dialog] More than one Dialog is open simultaneously. v1 supports single-modal only; behavior is undefined."
+      );
+    }
+    return () => {
+      __openCount -= 1;
+    };
+  }, [open]);
+  (0, import_use_scroll_lock.useScrollLock)(open);
+  (0, import_use_dismiss.useDismiss)({
+    enabled: open,
+    onDismiss: () => onOpenChange(false),
+    refs: dismissRefs,
+    // Allow clicks on portaled nested floating layers (Popovers, Listboxes)
+    // opened INSIDE the dialog — those panels are siblings of our panel in
+    // the body, not descendants, so the bare ref check would dismiss us
+    // when the user picks a select option.
+    excludeClosest: [".uxm-popover"],
+    closeOnEscape,
+    closeOnOutsideClick
+  });
+  (0, import_use_focus_on_mount.useFocusOnMount)({
+    active: open,
+    initialFocus,
+    focusFirstIn: panelRef,
+    returnFocus
+  });
+  (0, import_use_focus_trap.useFocusTrap)({ active: open, container: panelRef });
+  if (!open || !mounted) return null;
+  const tree = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "uxm-dialog__root", "data-state": "open", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-dialog__backdrop", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": ariaLabelledby,
+        "aria-describedby": ariaDescribedby,
+        tabIndex: -1,
+        className: (0, import_cn.cn)("uxm-dialog__panel", className),
+        children
+      }
+    )
+  ] });
+  return (0, import_react_dom.createPortal)(tree, document.body);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Dialog
+});
+//# sourceMappingURL=dialog.cjs.map

package/dist/ui/dialog/dialog.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/dialog/dialog.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, type ReactNode, type RefObject } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { cn } from '../../helpers/cn';\nimport { useDismiss } from '../../hooks/use-dismiss';\nimport { useFocusOnMount } from '../../hooks/use-focus-on-mount';\nimport { useFocusTrap } from '../../hooks/use-focus-trap';\nimport { usePortal } from '../../hooks/use-portal';\nimport { useScrollLock } from '../../hooks/use-scroll-lock';\n\nexport interface DialogProps {\n  /** Controlled — pair with `onOpenChange`. */\n  open: boolean;\n  /** Called when the user requests close (Escape, backdrop click). */\n  onOpenChange: (open: boolean) => void;\n  /** Panel content. Most consumers pass a `<Modal>`; bespoke surfaces work too. */\n  children: ReactNode;\n  /** Default true. */\n  closeOnEscape?: boolean;\n  /** Default true — clicks on the backdrop dismiss. */\n  closeOnOutsideClick?: boolean;\n  /**\n   * Element to receive focus when the dialog opens. If omitted, focus\n   * moves to the first focusable element inside the panel. Pass an\n   * explicit ref when the default (often a Cancel/Close button) is the\n   * wrong target — e.g. a search input that should be ready to type into.\n   */\n  initialFocus?: RefObject<HTMLElement | null>;\n  /** Restore focus to the previously-active element on close. Default true. */\n  returnFocus?: boolean;\n  /** ID of the element labelling the dialog (usually the title). */\n  'aria-labelledby'?: string;\n  /** ID of the element describing the dialog. */\n  'aria-describedby'?: string;\n  /** Class applied to the panel wrapper (the centering layer). */\n  className?: string;\n}\n\n// Single-modal assertion for v1. Stacking support is a follow-up; if it\n// ever lands, replace this with a refcount + per-layer z-index increments.\nlet __openCount = 0;\n\n/**\n * Modal dialog — provides the mechanics for a centered, blocking\n * floating layer. Mirrors `Popover` for the non-modal floating case,\n * with extra responsibilities:\n *   1. Backdrop (covers viewport, dimmed via tokens).\n *   2. Body scroll-lock while open.\n *   3. Focus trap within the panel (Tab cycles, can't escape).\n *   4. `role=\"dialog\"` + `aria-modal=\"true\"` on the panel.\n *\n * The panel itself has NO visible styling — background, padding, and\n * shadow come from whatever the consumer renders inside (typically a\n * `<Modal>`). Same shape as Popover/Listbox: this component is invisible\n * behavior; the rendered child owns the look.\n *\n * Backdrop styling is global (token-driven, `--backdrop-color` /\n * `--backdrop-blur`) rather than per-modal — consistent feel across every\n * dialog in the app. Designers tune the tokens once.\n */\nexport function Dialog({\n  open,\n  onOpenChange,\n  children,\n  closeOnEscape = true,\n  closeOnOutsideClick = true,\n  initialFocus,\n  returnFocus = true,\n  'aria-labelledby': ariaLabelledby,\n  'aria-describedby': ariaDescribedby,\n  className,\n}: DialogProps) {\n  const mounted = usePortal();\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  // Refs in `useDismiss` are compared by `.contains(target)`; the array\n  // identity needs to be stable so useEffect inside useDismiss doesn't\n  // re-subscribe on every render. useMemo with `[]` gives a one-time\n  // array that captures the panelRef object (refs themselves are stable\n  // across renders, so the inner reference is fine).\n  const dismissRefs = useMemo(() => [panelRef], []);\n\n  // Single-modal invariant (v1). Counter increments on mount-while-open\n  // and decrements on close. A second simultaneous Dialog logs a warning\n  // so the misuse surfaces. The warn fires in any environment — this\n  // package is client-side and shouldn't reference Node's `process`\n  // global; the situation only arises from a Dialog-stacking bug and\n  // the warn is diagnostic, so leaving it always-on is fine.\n  useEffect(() => {\n    if (!open) return;\n    __openCount += 1;\n    if (__openCount > 1) {\n      console.warn(\n        '[Dialog] More than one Dialog is open simultaneously. v1 supports single-modal only; behavior is undefined.',\n      );\n    }\n    return () => {\n      __openCount -= 1;\n    };\n  }, [open]);\n\n  useScrollLock(open);\n\n  useDismiss({\n    enabled: open,\n    onDismiss: () => onOpenChange(false),\n    refs: dismissRefs,\n    // Allow clicks on portaled nested floating layers (Popovers, Listboxes)\n    // opened INSIDE the dialog — those panels are siblings of our panel in\n    // the body, not descendants, so the bare ref check would dismiss us\n    // when the user picks a select option.\n    excludeClosest: ['.uxm-popover'],\n    closeOnEscape,\n    closeOnOutsideClick,\n  });\n\n  useFocusOnMount({\n    active: open,\n    initialFocus,\n    focusFirstIn: panelRef,\n    returnFocus,\n  });\n\n  useFocusTrap({ active: open, container: panelRef });\n\n  if (!open || !mounted) return null;\n\n  const tree = (\n    <div className=\"uxm-dialog__root\" data-state=\"open\">\n      <div className=\"uxm-dialog__backdrop\" aria-hidden=\"true\" />\n      <div\n        ref={panelRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n        // tabIndex={-1} so `useFocusTrap` can park focus on the panel\n        // itself when there are no focusable children (rare, but the trap\n        // still has to keep focus from escaping).\n        tabIndex={-1}\n        className={cn('uxm-dialog__panel', className)}\n      >\n        {children}\n      </div>\n    </div>\n  );\n\n  return createPortal(tree, document.body);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+HI;AA/HJ,mBAA2E;AAC3E,uBAA6B;AAE7B,gBAAmB;AACnB,yBAA2B;AAC3B,gCAAgC;AAChC,4BAA6B;AAC7B,wBAA0B;AAC1B,6BAA8B;AAgC9B,IAAI,cAAc;AAoBX,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB;AACF,GAAgB;AACd,QAAM,cAAU,6BAAU;AAC1B,QAAM,eAAW,qBAA8B,IAAI;AAMnD,QAAM,kBAAc,sBAAQ,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAC;AAQhD,8BAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,mBAAe;AACf,QAAI,cAAc,GAAG;AACnB,cAAQ;AAAA,QACN;AAAA,MACF;AAAA,IACF;AACA,WAAO,MAAM;AACX,qBAAe;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,4CAAc,IAAI;AAElB,qCAAW;AAAA,IACT,SAAS;AAAA,IACT,WAAW,MAAM,aAAa,KAAK;AAAA,IACnC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKN,gBAAgB,CAAC,cAAc;AAAA,IAC/B;AAAA,IACA;AAAA,EACF,CAAC;AAED,iDAAgB;AAAA,IACd,QAAQ;AAAA,IACR;AAAA,IACA,cAAc;AAAA,IACd;AAAA,EACF,CAAC;AAED,0CAAa,EAAE,QAAQ,MAAM,WAAW,SAAS,CAAC;AAElD,MAAI,CAAC,QAAQ,CAAC,QAAS,QAAO;AAE9B,QAAM,OACJ,6CAAC,SAAI,WAAU,oBAAmB,cAAW,QAC3C;AAAA,gDAAC,SAAI,WAAU,wBAAuB,eAAY,QAAO;AAAA,IACzD;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,cAAW;AAAA,QACX,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAIlB,UAAU;AAAA,QACV,eAAW,cAAG,qBAAqB,SAAS;AAAA,QAE3C;AAAA;AAAA,IACH;AAAA,KACF;AAGF,aAAO,+BAAa,MAAM,SAAS,IAAI;AACzC;","names":[]}

package/dist/ui/dialog/dialog.css

@@ -0,0 +1,38 @@
+@charset "UTF-8";
+/* ── dialog ─────────────────────────────────────────────────────────────────
+   Dialog (shell — provides mechanics, no visible chrome of its own)
+
+   The shell contributes positioning + backdrop + z-index only. The panel
+   itself has no chrome — the consumer renders a `<Modal>` (or bespoke
+   surface) inside it. Mirrors the `.uxm-popover` precedent: shells
+   contribute positioning + z-index only.
+   ──────────────────────────────────────────────────────────────────────── */
+.uxm-dialog__root {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-dialog, 60);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  /* Allow tall panels to scroll inside the viewport without the page
+     behind scrolling (body scroll is locked by useScrollLock). */
+  overflow-y: auto;
+  padding: 24px;
+}
+
+.uxm-dialog__backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: var(--backdrop-color, rgba(0, 0, 0, 0.5));
+  backdrop-filter: blur(var(--backdrop-blur, 4px));
+  -webkit-backdrop-filter: blur(var(--backdrop-blur, 4px));
+}
+
+.uxm-dialog__panel {
+  position: relative;
+  /* The panel itself owns no chrome — consumer (Modal) provides it. */
+  outline: none;
+  /* Maximum reasonable width even at fullscreen; consumer can override. */
+  max-width: calc(100vw - 48px);
+  max-height: calc(100vh - 48px);
+}

package/dist/ui/dialog/dialog.d.ts

@@ -0,0 +1,48 @@
+import { type ReactNode, type RefObject } from 'react';
+export interface DialogProps {
+    /** Controlled — pair with `onOpenChange`. */
+    open: boolean;
+    /** Called when the user requests close (Escape, backdrop click). */
+    onOpenChange: (open: boolean) => void;
+    /** Panel content. Most consumers pass a `<Modal>`; bespoke surfaces work too. */
+    children: ReactNode;
+    /** Default true. */
+    closeOnEscape?: boolean;
+    /** Default true — clicks on the backdrop dismiss. */
+    closeOnOutsideClick?: boolean;
+    /**
+     * Element to receive focus when the dialog opens. If omitted, focus
+     * moves to the first focusable element inside the panel. Pass an
+     * explicit ref when the default (often a Cancel/Close button) is the
+     * wrong target — e.g. a search input that should be ready to type into.
+     */
+    initialFocus?: RefObject<HTMLElement | null>;
+    /** Restore focus to the previously-active element on close. Default true. */
+    returnFocus?: boolean;
+    /** ID of the element labelling the dialog (usually the title). */
+    'aria-labelledby'?: string;
+    /** ID of the element describing the dialog. */
+    'aria-describedby'?: string;
+    /** Class applied to the panel wrapper (the centering layer). */
+    className?: string;
+}
+/**
+ * Modal dialog — provides the mechanics for a centered, blocking
+ * floating layer. Mirrors `Popover` for the non-modal floating case,
+ * with extra responsibilities:
+ *   1. Backdrop (covers viewport, dimmed via tokens).
+ *   2. Body scroll-lock while open.
+ *   3. Focus trap within the panel (Tab cycles, can't escape).
+ *   4. `role="dialog"` + `aria-modal="true"` on the panel.
+ *
+ * The panel itself has NO visible styling — background, padding, and
+ * shadow come from whatever the consumer renders inside (typically a
+ * `<Modal>`). Same shape as Popover/Listbox: this component is invisible
+ * behavior; the rendered child owns the look.
+ *
+ * Backdrop styling is global (token-driven, `--backdrop-color` /
+ * `--backdrop-blur`) rather than per-modal — consistent feel across every
+ * dialog in the app. Designers tune the tokens once.
+ */
+export declare function Dialog({ open, onOpenChange, children, closeOnEscape, closeOnOutsideClick, initialFocus, returnFocus, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, className, }: DialogProps): import("react").ReactPortal | null;
+//# sourceMappingURL=dialog.d.ts.map

package/dist/ui/dialog/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/ui/dialog/dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAUnF,MAAM,WAAW,WAAW;IAC1B,6CAA6C;IAC7C,IAAI,EAAE,OAAO,CAAC;IACd,oEAAoE;IACpE,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,iFAAiF;IACjF,QAAQ,EAAE,SAAS,CAAC;IACpB,oBAAoB;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qDAAqD;IACrD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC7C,6EAA6E;IAC7E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kEAAkE;IAClE,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,aAAoB,EACpB,mBAA0B,EAC1B,YAAY,EACZ,WAAkB,EAClB,iBAAiB,EAAE,cAAc,EACjC,kBAAkB,EAAE,eAAe,EACnC,SAAS,GACV,EAAE,WAAW,sCA4Eb"}

package/dist/ui/dialog/dialog.js

@@ -0,0 +1,80 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { createPortal } from "react-dom";
+import { cn } from "../../helpers/cn.js";
+import { useDismiss } from "../../hooks/use-dismiss.js";
+import { useFocusOnMount } from "../../hooks/use-focus-on-mount.js";
+import { useFocusTrap } from "../../hooks/use-focus-trap.js";
+import { usePortal } from "../../hooks/use-portal.js";
+import { useScrollLock } from "../../hooks/use-scroll-lock.js";
+let __openCount = 0;
+function Dialog({
+  open,
+  onOpenChange,
+  children,
+  closeOnEscape = true,
+  closeOnOutsideClick = true,
+  initialFocus,
+  returnFocus = true,
+  "aria-labelledby": ariaLabelledby,
+  "aria-describedby": ariaDescribedby,
+  className
+}) {
+  const mounted = usePortal();
+  const panelRef = useRef(null);
+  const dismissRefs = useMemo(() => [panelRef], []);
+  useEffect(() => {
+    if (!open) return;
+    __openCount += 1;
+    if (__openCount > 1) {
+      console.warn(
+        "[Dialog] More than one Dialog is open simultaneously. v1 supports single-modal only; behavior is undefined."
+      );
+    }
+    return () => {
+      __openCount -= 1;
+    };
+  }, [open]);
+  useScrollLock(open);
+  useDismiss({
+    enabled: open,
+    onDismiss: () => onOpenChange(false),
+    refs: dismissRefs,
+    // Allow clicks on portaled nested floating layers (Popovers, Listboxes)
+    // opened INSIDE the dialog — those panels are siblings of our panel in
+    // the body, not descendants, so the bare ref check would dismiss us
+    // when the user picks a select option.
+    excludeClosest: [".uxm-popover"],
+    closeOnEscape,
+    closeOnOutsideClick
+  });
+  useFocusOnMount({
+    active: open,
+    initialFocus,
+    focusFirstIn: panelRef,
+    returnFocus
+  });
+  useFocusTrap({ active: open, container: panelRef });
+  if (!open || !mounted) return null;
+  const tree = /* @__PURE__ */ jsxs("div", { className: "uxm-dialog__root", "data-state": "open", children: [
+    /* @__PURE__ */ jsx("div", { className: "uxm-dialog__backdrop", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: panelRef,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": ariaLabelledby,
+        "aria-describedby": ariaDescribedby,
+        tabIndex: -1,
+        className: cn("uxm-dialog__panel", className),
+        children
+      }
+    )
+  ] });
+  return createPortal(tree, document.body);
+}
+export {
+  Dialog
+};
+//# sourceMappingURL=dialog.js.map

package/dist/ui/dialog/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/dialog/dialog.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, type ReactNode, type RefObject } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { cn } from '../../helpers/cn';\nimport { useDismiss } from '../../hooks/use-dismiss';\nimport { useFocusOnMount } from '../../hooks/use-focus-on-mount';\nimport { useFocusTrap } from '../../hooks/use-focus-trap';\nimport { usePortal } from '../../hooks/use-portal';\nimport { useScrollLock } from '../../hooks/use-scroll-lock';\n\nexport interface DialogProps {\n  /** Controlled — pair with `onOpenChange`. */\n  open: boolean;\n  /** Called when the user requests close (Escape, backdrop click). */\n  onOpenChange: (open: boolean) => void;\n  /** Panel content. Most consumers pass a `<Modal>`; bespoke surfaces work too. */\n  children: ReactNode;\n  /** Default true. */\n  closeOnEscape?: boolean;\n  /** Default true — clicks on the backdrop dismiss. */\n  closeOnOutsideClick?: boolean;\n  /**\n   * Element to receive focus when the dialog opens. If omitted, focus\n   * moves to the first focusable element inside the panel. Pass an\n   * explicit ref when the default (often a Cancel/Close button) is the\n   * wrong target — e.g. a search input that should be ready to type into.\n   */\n  initialFocus?: RefObject<HTMLElement | null>;\n  /** Restore focus to the previously-active element on close. Default true. */\n  returnFocus?: boolean;\n  /** ID of the element labelling the dialog (usually the title). */\n  'aria-labelledby'?: string;\n  /** ID of the element describing the dialog. */\n  'aria-describedby'?: string;\n  /** Class applied to the panel wrapper (the centering layer). */\n  className?: string;\n}\n\n// Single-modal assertion for v1. Stacking support is a follow-up; if it\n// ever lands, replace this with a refcount + per-layer z-index increments.\nlet __openCount = 0;\n\n/**\n * Modal dialog — provides the mechanics for a centered, blocking\n * floating layer. Mirrors `Popover` for the non-modal floating case,\n * with extra responsibilities:\n *   1. Backdrop (covers viewport, dimmed via tokens).\n *   2. Body scroll-lock while open.\n *   3. Focus trap within the panel (Tab cycles, can't escape).\n *   4. `role=\"dialog\"` + `aria-modal=\"true\"` on the panel.\n *\n * The panel itself has NO visible styling — background, padding, and\n * shadow come from whatever the consumer renders inside (typically a\n * `<Modal>`). Same shape as Popover/Listbox: this component is invisible\n * behavior; the rendered child owns the look.\n *\n * Backdrop styling is global (token-driven, `--backdrop-color` /\n * `--backdrop-blur`) rather than per-modal — consistent feel across every\n * dialog in the app. Designers tune the tokens once.\n */\nexport function Dialog({\n  open,\n  onOpenChange,\n  children,\n  closeOnEscape = true,\n  closeOnOutsideClick = true,\n  initialFocus,\n  returnFocus = true,\n  'aria-labelledby': ariaLabelledby,\n  'aria-describedby': ariaDescribedby,\n  className,\n}: DialogProps) {\n  const mounted = usePortal();\n  const panelRef = useRef<HTMLDivElement | null>(null);\n  // Refs in `useDismiss` are compared by `.contains(target)`; the array\n  // identity needs to be stable so useEffect inside useDismiss doesn't\n  // re-subscribe on every render. useMemo with `[]` gives a one-time\n  // array that captures the panelRef object (refs themselves are stable\n  // across renders, so the inner reference is fine).\n  const dismissRefs = useMemo(() => [panelRef], []);\n\n  // Single-modal invariant (v1). Counter increments on mount-while-open\n  // and decrements on close. A second simultaneous Dialog logs a warning\n  // so the misuse surfaces. The warn fires in any environment — this\n  // package is client-side and shouldn't reference Node's `process`\n  // global; the situation only arises from a Dialog-stacking bug and\n  // the warn is diagnostic, so leaving it always-on is fine.\n  useEffect(() => {\n    if (!open) return;\n    __openCount += 1;\n    if (__openCount > 1) {\n      console.warn(\n        '[Dialog] More than one Dialog is open simultaneously. v1 supports single-modal only; behavior is undefined.',\n      );\n    }\n    return () => {\n      __openCount -= 1;\n    };\n  }, [open]);\n\n  useScrollLock(open);\n\n  useDismiss({\n    enabled: open,\n    onDismiss: () => onOpenChange(false),\n    refs: dismissRefs,\n    // Allow clicks on portaled nested floating layers (Popovers, Listboxes)\n    // opened INSIDE the dialog — those panels are siblings of our panel in\n    // the body, not descendants, so the bare ref check would dismiss us\n    // when the user picks a select option.\n    excludeClosest: ['.uxm-popover'],\n    closeOnEscape,\n    closeOnOutsideClick,\n  });\n\n  useFocusOnMount({\n    active: open,\n    initialFocus,\n    focusFirstIn: panelRef,\n    returnFocus,\n  });\n\n  useFocusTrap({ active: open, container: panelRef });\n\n  if (!open || !mounted) return null;\n\n  const tree = (\n    <div className=\"uxm-dialog__root\" data-state=\"open\">\n      <div className=\"uxm-dialog__backdrop\" aria-hidden=\"true\" />\n      <div\n        ref={panelRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n        // tabIndex={-1} so `useFocusTrap` can park focus on the panel\n        // itself when there are no focusable children (rare, but the trap\n        // still has to keep focus from escaping).\n        tabIndex={-1}\n        className={cn('uxm-dialog__panel', className)}\n      >\n        {children}\n      </div>\n    </div>\n  );\n\n  return createPortal(tree, document.body);\n}\n"],"mappings":"AA+HI,SACE,KADF;AA/HJ,SAAS,WAAW,SAAS,cAA8C;AAC3E,SAAS,oBAAoB;AAE7B,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,qBAAqB;AAgC9B,IAAI,cAAc;AAoBX,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,sBAAsB;AAAA,EACtB;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB;AACF,GAAgB;AACd,QAAM,UAAU,UAAU;AAC1B,QAAM,WAAW,OAA8B,IAAI;AAMnD,QAAM,cAAc,QAAQ,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAC;AAQhD,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,mBAAe;AACf,QAAI,cAAc,GAAG;AACnB,cAAQ;AAAA,QACN;AAAA,MACF;AAAA,IACF;AACA,WAAO,MAAM;AACX,qBAAe;AAAA,IACjB;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,gBAAc,IAAI;AAElB,aAAW;AAAA,IACT,SAAS;AAAA,IACT,WAAW,MAAM,aAAa,KAAK;AAAA,IACnC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,IAKN,gBAAgB,CAAC,cAAc;AAAA,IAC/B;AAAA,IACA;AAAA,EACF,CAAC;AAED,kBAAgB;AAAA,IACd,QAAQ;AAAA,IACR;AAAA,IACA,cAAc;AAAA,IACd;AAAA,EACF,CAAC;AAED,eAAa,EAAE,QAAQ,MAAM,WAAW,SAAS,CAAC;AAElD,MAAI,CAAC,QAAQ,CAAC,QAAS,QAAO;AAE9B,QAAM,OACJ,qBAAC,SAAI,WAAU,oBAAmB,cAAW,QAC3C;AAAA,wBAAC,SAAI,WAAU,wBAAuB,eAAY,QAAO;AAAA,IACzD;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,cAAW;AAAA,QACX,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAIlB,UAAU;AAAA,QACV,WAAW,GAAG,qBAAqB,SAAS;AAAA,QAE3C;AAAA;AAAA,IACH;AAAA,KACF;AAGF,SAAO,aAAa,MAAM,SAAS,IAAI;AACzC;","names":[]}

package/dist/ui/dialog/index.cjs

@@ -0,0 +1,23 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var dialog_exports = {};
+module.exports = __toCommonJS(dialog_exports);
+__reExport(dialog_exports, require("./dialog.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./dialog.cjs")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/dialog/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/dialog/index.ts"],"sourcesContent":["export * from './dialog';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,2BAAc,qBAAd;","names":[]}

package/dist/ui/dialog/index.d.ts

@@ -0,0 +1,2 @@
+export * from './dialog.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/dialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

package/dist/ui/dialog/index.js

@@ -0,0 +1,2 @@
+export * from "./dialog.js";
+//# sourceMappingURL=index.js.map

package/dist/ui/dialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/dialog/index.ts"],"sourcesContent":["export * from './dialog';\n"],"mappings":"AAAA,cAAc;","names":[]}