@flanksource/clicky-ui 0.2.18 → 0.2.20

package/dist/layout/Panel.cjs

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const Icon = require("../data/Icon.cjs");
+const toneRing = {
+  default: "",
+  danger: "border-l-2 border-l-red-500",
+  warning: "border-l-2 border-l-yellow-500",
+  success: "border-l-2 border-l-green-500",
+  info: "border-l-2 border-l-blue-500"
+};
+function Panel({
+  title,
+  icon,
+  count,
+  actions,
+  footer,
+  tone = "default",
+  padded = true,
+  className,
+  headerClassName,
+  bodyClassName,
+  children
+}) {
+  const hasHeader = title !== void 0 || icon !== void 0 || actions !== void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn(
+        "rounded-md border border-border bg-card overflow-hidden",
+        toneRing[tone],
+        className
+      ),
+      children: [
+        hasHeader && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: utils.cn(
+              "flex items-center gap-2 px-density-3 py-density-2 border-b border-border",
+              headerClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+                icon && /* @__PURE__ */ jsxRuntime.jsx(
+                  Icon.Icon,
+                  {
+                    ...typeof icon === "string" ? { name: icon } : { icon },
+                    className: "text-base text-muted-foreground"
+                  }
+                ),
+                title !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-sm truncate text-card-foreground", children: title }),
+                count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[11px] font-semibold text-muted-foreground", children: count })
+              ] }),
+              actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn(padded && "px-density-3 py-density-2", bodyClassName), children }),
+        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-density-3 py-density-2 border-t border-border", children: footer })
+      ]
+    }
+  );
+}
+exports.Panel = Panel;
+//# sourceMappingURL=Panel.cjs.map

package/dist/layout/Panel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.cjs","sources":["../../src/layout/Panel.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\n\nexport type PanelTone = \"default\" | \"danger\" | \"warning\" | \"success\" | \"info\";\n\nexport type PanelProps = {\n  /** Header title. Omit (with no icon/count/actions) to render a headerless card. */\n  title?: ReactNode;\n  /** Optional leading icon. */\n  icon?: string | StaticIconComponent;\n  /** Optional count pill shown after the title. */\n  count?: number;\n  /** Right-aligned header content (copy buttons, summaries, links). */\n  actions?: ReactNode;\n  /** Optional footer row below the body. */\n  footer?: ReactNode;\n  /** Semantic left-border accent. */\n  tone?: PanelTone;\n  /** Pad the body. Defaults to true; pass false for flush row lists. */\n  padded?: boolean;\n  /** Classes applied to the panel root. */\n  className?: string;\n  /** Classes applied to the header row. */\n  headerClassName?: string;\n  /** Classes applied to the body. */\n  bodyClassName?: string;\n  /** Panel content. */\n  children: ReactNode;\n};\n\nconst toneRing: Record<PanelTone, string> = {\n  default: \"\",\n  danger: \"border-l-2 border-l-red-500\",\n  warning: \"border-l-2 border-l-yellow-500\",\n  success: \"border-l-2 border-l-green-500\",\n  info: \"border-l-2 border-l-blue-500\",\n};\n\n/**\n * A non-collapsible carded surface with an optional header. Use for content\n * panels (checks, results, comments) where {@link Section}'s disclosure\n * behaviour isn't wanted. Sits on `bg-card` with a border and rounded corners.\n */\nexport function Panel({\n  title,\n  icon,\n  count,\n  actions,\n  footer,\n  tone = \"default\",\n  padded = true,\n  className,\n  headerClassName,\n  bodyClassName,\n  children,\n}: PanelProps) {\n  const hasHeader = title !== undefined || icon !== undefined || actions !== undefined;\n  return (\n    <div\n      className={cn(\n        \"rounded-md border border-border bg-card overflow-hidden\",\n        toneRing[tone],\n        className,\n      )}\n    >\n      {hasHeader && (\n        <div\n          className={cn(\n            \"flex items-center gap-2 px-density-3 py-density-2 border-b border-border\",\n            headerClassName,\n          )}\n        >\n          <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n            {icon && (\n              <Icon\n                {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n                className=\"text-base text-muted-foreground\"\n              />\n            )}\n            {title !== undefined && (\n              <span className=\"font-medium text-sm truncate text-card-foreground\">{title}</span>\n            )}\n            {count !== undefined && (\n              <span className=\"inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[11px] font-semibold text-muted-foreground\">\n                {count}\n              </span>\n            )}\n          </div>\n          {actions && <div className=\"flex shrink-0 items-center gap-1\">{actions}</div>}\n        </div>\n      )}\n      <div className={cn(padded && \"px-density-3 py-density-2\", bodyClassName)}>{children}</div>\n      {footer && <div className=\"px-density-3 py-density-2 border-t border-border\">{footer}</div>}\n    </div>\n  );\n}\n"],"names":["jsxs","cn","jsx","Icon"],"mappings":";;;;;AA+BA,MAAM,WAAsC;AAAA,EAC1C,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR;AAOO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAe;AACb,QAAM,YAAY,UAAU,UAAa,SAAS,UAAa,YAAY;AAC3E,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA,SAAS,IAAI;AAAA,QACb;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,aACCD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,MAAAA;AAAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAGF,UAAA;AAAA,cAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,0CACZ,UAAA;AAAA,gBAAA,QACCE,2BAAAA;AAAAA,kBAACC,KAAAA;AAAAA,kBAAA;AAAA,oBACE,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA;AAAA,oBACnD,WAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGb,UAAU,UACTD,2BAAAA,IAAC,QAAA,EAAK,WAAU,qDAAqD,UAAA,OAAM;AAAA,gBAE5E,UAAU,UACTA,2BAAAA,IAAC,QAAA,EAAK,WAAU,wHACb,UAAA,MAAA,CACH;AAAA,cAAA,GAEJ;AAAA,cACC,WAAWA,2BAAAA,IAAC,OAAA,EAAI,WAAU,oCAAoC,UAAA,QAAA,CAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAG3EA,+BAAC,SAAI,WAAWD,MAAAA,GAAG,UAAU,6BAA6B,aAAa,GAAI,UAAS;AAAA,QACnF,UAAUC,2BAAAA,IAAC,OAAA,EAAI,WAAU,oDAAoD,UAAA,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3F;;"}

package/dist/layout/Panel.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { StaticIconComponent } from '../data/Icon';
+export type PanelTone = "default" | "danger" | "warning" | "success" | "info";
+export type PanelProps = {
+    /** Header title. Omit (with no icon/count/actions) to render a headerless card. */
+    title?: ReactNode;
+    /** Optional leading icon. */
+    icon?: string | StaticIconComponent;
+    /** Optional count pill shown after the title. */
+    count?: number;
+    /** Right-aligned header content (copy buttons, summaries, links). */
+    actions?: ReactNode;
+    /** Optional footer row below the body. */
+    footer?: ReactNode;
+    /** Semantic left-border accent. */
+    tone?: PanelTone;
+    /** Pad the body. Defaults to true; pass false for flush row lists. */
+    padded?: boolean;
+    /** Classes applied to the panel root. */
+    className?: string;
+    /** Classes applied to the header row. */
+    headerClassName?: string;
+    /** Classes applied to the body. */
+    bodyClassName?: string;
+    /** Panel content. */
+    children: ReactNode;
+};
+/**
+ * A non-collapsible carded surface with an optional header. Use for content
+ * panels (checks, results, comments) where {@link Section}'s disclosure
+ * behaviour isn't wanted. Sits on `bg-card` with a border and rounded corners.
+ */
+export declare function Panel({ title, icon, count, actions, footer, tone, padded, className, headerClassName, bodyClassName, children, }: PanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Panel.d.ts.map

package/dist/layout/Panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../src/layout/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAE9D,MAAM,MAAM,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAE9E,MAAM,MAAM,UAAU,GAAG;IACvB,mFAAmF;IACnF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qEAAqE;IACrE,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mCAAmC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sEAAsE;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAUF;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,OAAO,EACP,MAAM,EACN,IAAgB,EAChB,MAAa,EACb,SAAS,EACT,eAAe,EACf,aAAa,EACb,QAAQ,GACT,EAAE,UAAU,2CAwCZ"}

package/dist/layout/Panel.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { Icon } from "../data/Icon.js";
+const toneRing = {
+  default: "",
+  danger: "border-l-2 border-l-red-500",
+  warning: "border-l-2 border-l-yellow-500",
+  success: "border-l-2 border-l-green-500",
+  info: "border-l-2 border-l-blue-500"
+};
+function Panel({
+  title,
+  icon,
+  count,
+  actions,
+  footer,
+  tone = "default",
+  padded = true,
+  className,
+  headerClassName,
+  bodyClassName,
+  children
+}) {
+  const hasHeader = title !== void 0 || icon !== void 0 || actions !== void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-md border border-border bg-card overflow-hidden",
+        toneRing[tone],
+        className
+      ),
+      children: [
+        hasHeader && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-2 px-density-3 py-density-2 border-b border-border",
+              headerClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+                icon && /* @__PURE__ */ jsx(
+                  Icon,
+                  {
+                    ...typeof icon === "string" ? { name: icon } : { icon },
+                    className: "text-base text-muted-foreground"
+                  }
+                ),
+                title !== void 0 && /* @__PURE__ */ jsx("span", { className: "font-medium text-sm truncate text-card-foreground", children: title }),
+                count !== void 0 && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[11px] font-semibold text-muted-foreground", children: count })
+              ] }),
+              actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: cn(padded && "px-density-3 py-density-2", bodyClassName), children }),
+        footer && /* @__PURE__ */ jsx("div", { className: "px-density-3 py-density-2 border-t border-border", children: footer })
+      ]
+    }
+  );
+}
+export {
+  Panel
+};
+//# sourceMappingURL=Panel.js.map

package/dist/layout/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sources":["../../src/layout/Panel.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\n\nexport type PanelTone = \"default\" | \"danger\" | \"warning\" | \"success\" | \"info\";\n\nexport type PanelProps = {\n  /** Header title. Omit (with no icon/count/actions) to render a headerless card. */\n  title?: ReactNode;\n  /** Optional leading icon. */\n  icon?: string | StaticIconComponent;\n  /** Optional count pill shown after the title. */\n  count?: number;\n  /** Right-aligned header content (copy buttons, summaries, links). */\n  actions?: ReactNode;\n  /** Optional footer row below the body. */\n  footer?: ReactNode;\n  /** Semantic left-border accent. */\n  tone?: PanelTone;\n  /** Pad the body. Defaults to true; pass false for flush row lists. */\n  padded?: boolean;\n  /** Classes applied to the panel root. */\n  className?: string;\n  /** Classes applied to the header row. */\n  headerClassName?: string;\n  /** Classes applied to the body. */\n  bodyClassName?: string;\n  /** Panel content. */\n  children: ReactNode;\n};\n\nconst toneRing: Record<PanelTone, string> = {\n  default: \"\",\n  danger: \"border-l-2 border-l-red-500\",\n  warning: \"border-l-2 border-l-yellow-500\",\n  success: \"border-l-2 border-l-green-500\",\n  info: \"border-l-2 border-l-blue-500\",\n};\n\n/**\n * A non-collapsible carded surface with an optional header. Use for content\n * panels (checks, results, comments) where {@link Section}'s disclosure\n * behaviour isn't wanted. Sits on `bg-card` with a border and rounded corners.\n */\nexport function Panel({\n  title,\n  icon,\n  count,\n  actions,\n  footer,\n  tone = \"default\",\n  padded = true,\n  className,\n  headerClassName,\n  bodyClassName,\n  children,\n}: PanelProps) {\n  const hasHeader = title !== undefined || icon !== undefined || actions !== undefined;\n  return (\n    <div\n      className={cn(\n        \"rounded-md border border-border bg-card overflow-hidden\",\n        toneRing[tone],\n        className,\n      )}\n    >\n      {hasHeader && (\n        <div\n          className={cn(\n            \"flex items-center gap-2 px-density-3 py-density-2 border-b border-border\",\n            headerClassName,\n          )}\n        >\n          <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n            {icon && (\n              <Icon\n                {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n                className=\"text-base text-muted-foreground\"\n              />\n            )}\n            {title !== undefined && (\n              <span className=\"font-medium text-sm truncate text-card-foreground\">{title}</span>\n            )}\n            {count !== undefined && (\n              <span className=\"inline-flex items-center justify-center rounded-full bg-muted px-1.5 text-[11px] font-semibold text-muted-foreground\">\n                {count}\n              </span>\n            )}\n          </div>\n          {actions && <div className=\"flex shrink-0 items-center gap-1\">{actions}</div>}\n        </div>\n      )}\n      <div className={cn(padded && \"px-density-3 py-density-2\", bodyClassName)}>{children}</div>\n      {footer && <div className=\"px-density-3 py-density-2 border-t border-border\">{footer}</div>}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AA+BA,MAAM,WAAsC;AAAA,EAC1C,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR;AAOO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAe;AACb,QAAM,YAAY,UAAU,UAAa,SAAS,UAAa,YAAY;AAC3E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,SAAS,IAAI;AAAA,QACb;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA,aACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,YAAA;AAAA,YAGF,UAAA;AAAA,cAAA,qBAAC,OAAA,EAAI,WAAU,0CACZ,UAAA;AAAA,gBAAA,QACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACE,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA;AAAA,oBACnD,WAAU;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGb,UAAU,UACT,oBAAC,QAAA,EAAK,WAAU,qDAAqD,UAAA,OAAM;AAAA,gBAE5E,UAAU,UACT,oBAAC,QAAA,EAAK,WAAU,wHACb,UAAA,MAAA,CACH;AAAA,cAAA,GAEJ;AAAA,cACC,WAAW,oBAAC,OAAA,EAAI,WAAU,oCAAoC,UAAA,QAAA,CAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAG3E,oBAAC,SAAI,WAAW,GAAG,UAAU,6BAA6B,aAAa,GAAI,UAAS;AAAA,QACnF,UAAU,oBAAC,OAAA,EAAI,WAAU,oDAAoD,UAAA,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG3F;"}

package/dist/layout/Tabs.cjs

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const utils = require("../lib/utils.cjs");
+const TabButton = require("../data/TabButton.cjs");
+function Tabs({ tabs, value, onChange, variant = "underline", className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "tablist",
+      className: utils.cn(
+        "flex items-center gap-density-1",
+        variant === "underline" && "border-b border-border",
+        className
+      ),
+      children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+        TabButton.TabButton,
+        {
+          active: tab.id === value,
+          onClick: () => {
+            if (!tab.disabled) onChange(tab.id);
+          },
+          label: tab.label,
+          variant,
+          ...tab.icon !== void 0 ? { icon: tab.icon } : {},
+          ...tab.count !== void 0 ? { count: tab.count } : {},
+          ...tab.countColor !== void 0 ? { countColor: tab.countColor } : {},
+          ...tab.disabled ? { className: "opacity-50 pointer-events-none" } : {}
+        },
+        tab.id
+      ))
+    }
+  );
+}
+exports.Tabs = Tabs;
+//# sourceMappingURL=Tabs.cjs.map

package/dist/layout/Tabs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.cjs","sources":["../../src/layout/Tabs.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { TabButton, type TabButtonVariant } from \"../data/TabButton\";\nimport type { StaticIconComponent } from \"../data/Icon\";\n\nexport type TabItem = {\n  /** Stable id; also the value compared against the selected `value`. */\n  id: string;\n  /** Visible label. */\n  label: ReactNode;\n  /** Optional leading icon (icon name or component). */\n  icon?: string | StaticIconComponent;\n  /** Optional count badge; hidden when zero. */\n  count?: number;\n  /** Classes for the count badge background. */\n  countColor?: string;\n  /** Disables selecting this tab. */\n  disabled?: boolean;\n};\n\nexport type TabsProps = {\n  /** Tabs to render, in order. */\n  tabs: TabItem[];\n  /** Currently selected tab id. */\n  value: string;\n  /** Called with the next tab id when a tab is clicked. */\n  onChange: (id: string) => void;\n  /** Visual style. Defaults to `underline`. */\n  variant?: TabButtonVariant;\n  /** Classes applied to the tablist row. */\n  className?: string;\n};\n\n/**\n * A controlled tab strip built on {@link TabButton}. Defaults to the\n * `underline` variant — the row carries a bottom border and the active tab's\n * underline overlaps it. Render the matching panel yourself based on `value`.\n */\nexport function Tabs({ tabs, value, onChange, variant = \"underline\", className }: TabsProps) {\n  return (\n    <div\n      role=\"tablist\"\n      className={cn(\n        \"flex items-center gap-density-1\",\n        variant === \"underline\" && \"border-b border-border\",\n        className,\n      )}\n    >\n      {tabs.map((tab) => (\n        <TabButton\n          key={tab.id}\n          active={tab.id === value}\n          onClick={() => {\n            if (!tab.disabled) onChange(tab.id);\n          }}\n          label={tab.label}\n          variant={variant}\n          {...(tab.icon !== undefined ? { icon: tab.icon } : {})}\n          {...(tab.count !== undefined ? { count: tab.count } : {})}\n          {...(tab.countColor !== undefined ? { countColor: tab.countColor } : {})}\n          {...(tab.disabled ? { className: \"opacity-50 pointer-events-none\" } : {})}\n        />\n      ))}\n    </div>\n  );\n}\n"],"names":["jsx","cn","TabButton"],"mappings":";;;;;AAsCO,SAAS,KAAK,EAAE,MAAM,OAAO,UAAU,UAAU,aAAa,aAAwB;AAC3F,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA,YAAY,eAAe;AAAA,QAC3B;AAAA,MAAA;AAAA,MAGD,UAAA,KAAK,IAAI,CAAC,QACTD,2BAAAA;AAAAA,QAACE,UAAAA;AAAAA,QAAA;AAAA,UAEC,QAAQ,IAAI,OAAO;AAAA,UACnB,SAAS,MAAM;AACb,gBAAI,CAAC,IAAI,SAAU,UAAS,IAAI,EAAE;AAAA,UACpC;AAAA,UACA,OAAO,IAAI;AAAA,UACX;AAAA,UACC,GAAI,IAAI,SAAS,SAAY,EAAE,MAAM,IAAI,KAAA,IAAS,CAAA;AAAA,UAClD,GAAI,IAAI,UAAU,SAAY,EAAE,OAAO,IAAI,MAAA,IAAU,CAAA;AAAA,UACrD,GAAI,IAAI,eAAe,SAAY,EAAE,YAAY,IAAI,WAAA,IAAe,CAAA;AAAA,UACpE,GAAI,IAAI,WAAW,EAAE,WAAW,iCAAA,IAAqC,CAAA;AAAA,QAAC;AAAA,QAVlE,IAAI;AAAA,MAAA,CAYZ;AAAA,IAAA;AAAA,EAAA;AAGP;;"}

package/dist/layout/Tabs.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { TabButtonVariant } from '../data/TabButton';
+import { StaticIconComponent } from '../data/Icon';
+export type TabItem = {
+    /** Stable id; also the value compared against the selected `value`. */
+    id: string;
+    /** Visible label. */
+    label: ReactNode;
+    /** Optional leading icon (icon name or component). */
+    icon?: string | StaticIconComponent;
+    /** Optional count badge; hidden when zero. */
+    count?: number;
+    /** Classes for the count badge background. */
+    countColor?: string;
+    /** Disables selecting this tab. */
+    disabled?: boolean;
+};
+export type TabsProps = {
+    /** Tabs to render, in order. */
+    tabs: TabItem[];
+    /** Currently selected tab id. */
+    value: string;
+    /** Called with the next tab id when a tab is clicked. */
+    onChange: (id: string) => void;
+    /** Visual style. Defaults to `underline`. */
+    variant?: TabButtonVariant;
+    /** Classes applied to the tablist row. */
+    className?: string;
+};
+/**
+ * A controlled tab strip built on {@link TabButton}. Defaults to the
+ * `underline` variant — the row carries a bottom border and the active tab's
+ * underline overlaps it. Render the matching panel yourself based on `value`.
+ */
+export declare function Tabs({ tabs, value, onChange, variant, className }: TabsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Tabs.d.ts.map

package/dist/layout/Tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/layout/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAa,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACrE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAExD,MAAM,MAAM,OAAO,GAAG;IACpB,uEAAuE;IACvE,EAAE,EAAE,MAAM,CAAC;IACX,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG;IACtB,gCAAgC;IAChC,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,6CAA6C;IAC7C,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAqB,EAAE,SAAS,EAAE,EAAE,SAAS,2CA2B1F"}

package/dist/layout/Tabs.js

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils.js";
+import { TabButton } from "../data/TabButton.js";
+function Tabs({ tabs, value, onChange, variant = "underline", className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      className: cn(
+        "flex items-center gap-density-1",
+        variant === "underline" && "border-b border-border",
+        className
+      ),
+      children: tabs.map((tab) => /* @__PURE__ */ jsx(
+        TabButton,
+        {
+          active: tab.id === value,
+          onClick: () => {
+            if (!tab.disabled) onChange(tab.id);
+          },
+          label: tab.label,
+          variant,
+          ...tab.icon !== void 0 ? { icon: tab.icon } : {},
+          ...tab.count !== void 0 ? { count: tab.count } : {},
+          ...tab.countColor !== void 0 ? { countColor: tab.countColor } : {},
+          ...tab.disabled ? { className: "opacity-50 pointer-events-none" } : {}
+        },
+        tab.id
+      ))
+    }
+  );
+}
+export {
+  Tabs
+};
+//# sourceMappingURL=Tabs.js.map

package/dist/layout/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../src/layout/Tabs.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { TabButton, type TabButtonVariant } from \"../data/TabButton\";\nimport type { StaticIconComponent } from \"../data/Icon\";\n\nexport type TabItem = {\n  /** Stable id; also the value compared against the selected `value`. */\n  id: string;\n  /** Visible label. */\n  label: ReactNode;\n  /** Optional leading icon (icon name or component). */\n  icon?: string | StaticIconComponent;\n  /** Optional count badge; hidden when zero. */\n  count?: number;\n  /** Classes for the count badge background. */\n  countColor?: string;\n  /** Disables selecting this tab. */\n  disabled?: boolean;\n};\n\nexport type TabsProps = {\n  /** Tabs to render, in order. */\n  tabs: TabItem[];\n  /** Currently selected tab id. */\n  value: string;\n  /** Called with the next tab id when a tab is clicked. */\n  onChange: (id: string) => void;\n  /** Visual style. Defaults to `underline`. */\n  variant?: TabButtonVariant;\n  /** Classes applied to the tablist row. */\n  className?: string;\n};\n\n/**\n * A controlled tab strip built on {@link TabButton}. Defaults to the\n * `underline` variant — the row carries a bottom border and the active tab's\n * underline overlaps it. Render the matching panel yourself based on `value`.\n */\nexport function Tabs({ tabs, value, onChange, variant = \"underline\", className }: TabsProps) {\n  return (\n    <div\n      role=\"tablist\"\n      className={cn(\n        \"flex items-center gap-density-1\",\n        variant === \"underline\" && \"border-b border-border\",\n        className,\n      )}\n    >\n      {tabs.map((tab) => (\n        <TabButton\n          key={tab.id}\n          active={tab.id === value}\n          onClick={() => {\n            if (!tab.disabled) onChange(tab.id);\n          }}\n          label={tab.label}\n          variant={variant}\n          {...(tab.icon !== undefined ? { icon: tab.icon } : {})}\n          {...(tab.count !== undefined ? { count: tab.count } : {})}\n          {...(tab.countColor !== undefined ? { countColor: tab.countColor } : {})}\n          {...(tab.disabled ? { className: \"opacity-50 pointer-events-none\" } : {})}\n        />\n      ))}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAsCO,SAAS,KAAK,EAAE,MAAM,OAAO,UAAU,UAAU,aAAa,aAAwB;AAC3F,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA,YAAY,eAAe;AAAA,QAC3B;AAAA,MAAA;AAAA,MAGD,UAAA,KAAK,IAAI,CAAC,QACT;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,QAAQ,IAAI,OAAO;AAAA,UACnB,SAAS,MAAM;AACb,gBAAI,CAAC,IAAI,SAAU,UAAS,IAAI,EAAE;AAAA,UACpC;AAAA,UACA,OAAO,IAAI;AAAA,UACX;AAAA,UACC,GAAI,IAAI,SAAS,SAAY,EAAE,MAAM,IAAI,KAAA,IAAS,CAAA;AAAA,UAClD,GAAI,IAAI,UAAU,SAAY,EAAE,OAAO,IAAI,MAAA,IAAU,CAAA;AAAA,UACrD,GAAI,IAAI,eAAe,SAAY,EAAE,YAAY,IAAI,WAAA,IAAe,CAAA;AAAA,UACpE,GAAI,IAAI,WAAW,EAAE,WAAW,iCAAA,IAAqC,CAAA;AAAA,QAAC;AAAA,QAVlE,IAAI;AAAA,MAAA,CAYZ;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/overlay/DropdownMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.cjs","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Accessible label (`aria-label`) for the floating menu element itself. */\n  menuLabel?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\nexport function DropdownMenu({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  align = \"right\",\n  onOpenChange,\n  title,\n  menuLabel,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const listRef = useRef<(HTMLElement | null)[]>([]);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    open,\n    onOpenChange: setOpen,\n    // bottom-end / bottom-start reproduce the previous right/left alignment.\n    placement: align === \"right\" ? \"bottom-end\" : \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and\n    // shift slides the menu back on-screen at the horizontal edges.\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    click,\n    dismiss,\n    role,\n    listNav,\n  ]);\n\n  const closeMenu = () => setOpen(false);\n\n  return (\n    <div className={cn(\"relative inline-flex\", className)}>\n      {trigger ? (\n        <span\n          ref={refs.setReference}\n          className=\"inline-flex\"\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {trigger}\n        </span>\n      ) : (\n        <Button\n          ref={refs.setReference as React.Ref<HTMLButtonElement>}\n          variant={variant}\n          size={size}\n          title={title}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n          {label}\n          {!hideChevron && <Icon icon={UiChevronDown} />}\n        </Button>\n      )}\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={menuLabel}\n              style={floatingStyles}\n              className={cn(\n                \"z-[9999] min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n              {children\n                ? children(closeMenu)\n                : items?.map((item, i) => (\n                    <button\n                      key={i}\n                      ref={(node) => {\n                        listRef.current[i] = node;\n                      }}\n                      type=\"button\"\n                      role=\"menuitem\"\n                      tabIndex={i === activeIndex ? 0 : -1}\n                      disabled={item.disabled}\n                      title={item.title}\n                      className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n                      {...getItemProps({\n                        onClick: () => {\n                          item.onSelect();\n                          closeMenu();\n                        },\n                        onKeyDown: (event) => {\n                          if (event.key === \"Enter\" || event.key === \" \") {\n                            event.preventDefault();\n                            item.onSelect();\n                            closeMenu();\n                          }\n                        },\n                      })}\n                    >\n                      {item.icon && (\n                        <Icon\n                          {...(typeof item.icon === \"string\"\n                            ? { name: item.icon }\n                            : { icon: item.icon })}\n                        />\n                      )}\n                      {item.label}\n                    </button>\n                  ))}\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n"],"names":["useState","useRef","useEffect","useFloating","autoUpdate","offset","flip","shift","useClick","useDismiss","useRole","useListNavigation","useInteractions","cn","jsx","jsxs","Button","Icon","UiChevronDown","FloatingPortal","FloatingFocusManager"],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.cjs","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Accessible label (`aria-label`) for the floating menu element itself. */\n  menuLabel?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\nexport function DropdownMenu({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  align = \"right\",\n  onOpenChange,\n  title,\n  menuLabel,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const listRef = useRef<(HTMLElement | null)[]>([]);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    open,\n    onOpenChange: setOpen,\n    // bottom-end / bottom-start reproduce the previous right/left alignment.\n    placement: align === \"right\" ? \"bottom-end\" : \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and\n    // shift slides the menu back on-screen at the horizontal edges.\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  // useDismiss is React-tree aware: a press inside anything rendered through the\n  // menu's `children` render-prop — including a Modal that portals to\n  // document.body — propagates via React's synthetic events to the floating\n  // element and counts as \"inside\", so it won't dismiss the menu (which would\n  // unmount that child Modal). A Modal owned by a sibling/parent instead of this\n  // menu correctly does dismiss the menu, which is harmless since closing the\n  // menu does not unmount a Modal it doesn't own.\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    click,\n    dismiss,\n    role,\n    listNav,\n  ]);\n\n  const closeMenu = () => setOpen(false);\n\n  return (\n    <div className={cn(\"relative inline-flex\", className)}>\n      {trigger ? (\n        <span\n          ref={refs.setReference}\n          className=\"inline-flex\"\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {trigger}\n        </span>\n      ) : (\n        <Button\n          ref={refs.setReference as React.Ref<HTMLButtonElement>}\n          variant={variant}\n          size={size}\n          title={title}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n          {label}\n          {!hideChevron && <Icon icon={UiChevronDown} />}\n        </Button>\n      )}\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={menuLabel}\n              style={floatingStyles}\n              className={cn(\n                \"z-[9999] min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n              {children\n                ? children(closeMenu)\n                : items?.map((item, i) => (\n                    <button\n                      key={i}\n                      ref={(node) => {\n                        listRef.current[i] = node;\n                      }}\n                      type=\"button\"\n                      role=\"menuitem\"\n                      tabIndex={i === activeIndex ? 0 : -1}\n                      disabled={item.disabled}\n                      title={item.title}\n                      className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n                      {...getItemProps({\n                        onClick: () => {\n                          item.onSelect();\n                          closeMenu();\n                        },\n                        onKeyDown: (event) => {\n                          if (event.key === \"Enter\" || event.key === \" \") {\n                            event.preventDefault();\n                            item.onSelect();\n                            closeMenu();\n                          }\n                        },\n                      })}\n                    >\n                      {item.icon && (\n                        <Icon\n                          {...(typeof item.icon === \"string\"\n                            ? { name: item.icon }\n                            : { icon: item.icon })}\n                        />\n                      )}\n                      {item.label}\n                    </button>\n                  ))}\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n"],"names":["useState","useRef","useEffect","useFloating","autoUpdate","offset","flip","shift","useClick","useDismiss","useRole","useListNavigation","useInteractions","cn","jsx","jsxs","Button","Icon","UiChevronDown","FloatingPortal","FloatingFocusManager"],"mappings":"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"}

package/dist/overlay/DropdownMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/overlay/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAgBpE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAG9D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,oDAAoD;IACpD,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,kFAAkF;IAClF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IAChD,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,kDAAkD;IAClD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAI,EACJ,WAAmB,EACnB,OAAmB,EACnB,IAAW,EACX,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAe,EACf,YAAY,EACZ,KAAK,EACL,SAAS,EACT,SAAS,EACT,aAAa,GACd,EAAE,iBAAiB,2CA8HnB"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/overlay/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAgBpE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAG9D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,oDAAoD;IACpD,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,kFAAkF;IAClF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IAChD,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,kDAAkD;IAClD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAI,EACJ,WAAmB,EACnB,OAAmB,EACnB,IAAW,EACX,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAe,EACf,YAAY,EACZ,KAAK,EACL,SAAS,EACT,SAAS,EACT,aAAa,GACd,EAAE,iBAAiB,2CAqInB"}

package/dist/overlay/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Accessible label (`aria-label`) for the floating menu element itself. */\n  menuLabel?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\nexport function DropdownMenu({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  align = \"right\",\n  onOpenChange,\n  title,\n  menuLabel,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const listRef = useRef<(HTMLElement | null)[]>([]);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    open,\n    onOpenChange: setOpen,\n    // bottom-end / bottom-start reproduce the previous right/left alignment.\n    placement: align === \"right\" ? \"bottom-end\" : \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and\n    // shift slides the menu back on-screen at the horizontal edges.\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    click,\n    dismiss,\n    role,\n    listNav,\n  ]);\n\n  const closeMenu = () => setOpen(false);\n\n  return (\n    <div className={cn(\"relative inline-flex\", className)}>\n      {trigger ? (\n        <span\n          ref={refs.setReference}\n          className=\"inline-flex\"\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {trigger}\n        </span>\n      ) : (\n        <Button\n          ref={refs.setReference as React.Ref<HTMLButtonElement>}\n          variant={variant}\n          size={size}\n          title={title}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n          {label}\n          {!hideChevron && <Icon icon={UiChevronDown} />}\n        </Button>\n      )}\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={menuLabel}\n              style={floatingStyles}\n              className={cn(\n                \"z-[9999] min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n              {children\n                ? children(closeMenu)\n                : items?.map((item, i) => (\n                    <button\n                      key={i}\n                      ref={(node) => {\n                        listRef.current[i] = node;\n                      }}\n                      type=\"button\"\n                      role=\"menuitem\"\n                      tabIndex={i === activeIndex ? 0 : -1}\n                      disabled={item.disabled}\n                      title={item.title}\n                      className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n                      {...getItemProps({\n                        onClick: () => {\n                          item.onSelect();\n                          closeMenu();\n                        },\n                        onKeyDown: (event) => {\n                          if (event.key === \"Enter\" || event.key === \" \") {\n                            event.preventDefault();\n                            item.onSelect();\n                            closeMenu();\n                          }\n                        },\n                      })}\n                    >\n                      {item.icon && (\n                        <Icon\n                          {...(typeof item.icon === \"string\"\n                            ? { name: item.icon }\n                            : { icon: item.icon })}\n                        />\n                      )}\n                      {item.label}\n                    </button>\n                  ))}\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.js","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Accessible label (`aria-label`) for the floating menu element itself. */\n  menuLabel?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\nexport function DropdownMenu({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  align = \"right\",\n  onOpenChange,\n  title,\n  menuLabel,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const listRef = useRef<(HTMLElement | null)[]>([]);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    open,\n    onOpenChange: setOpen,\n    // bottom-end / bottom-start reproduce the previous right/left alignment.\n    placement: align === \"right\" ? \"bottom-end\" : \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and\n    // shift slides the menu back on-screen at the horizontal edges.\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  // useDismiss is React-tree aware: a press inside anything rendered through the\n  // menu's `children` render-prop — including a Modal that portals to\n  // document.body — propagates via React's synthetic events to the floating\n  // element and counts as \"inside\", so it won't dismiss the menu (which would\n  // unmount that child Modal). A Modal owned by a sibling/parent instead of this\n  // menu correctly does dismiss the menu, which is harmless since closing the\n  // menu does not unmount a Modal it doesn't own.\n  const dismiss = useDismiss(context);\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    click,\n    dismiss,\n    role,\n    listNav,\n  ]);\n\n  const closeMenu = () => setOpen(false);\n\n  return (\n    <div className={cn(\"relative inline-flex\", className)}>\n      {trigger ? (\n        <span\n          ref={refs.setReference}\n          className=\"inline-flex\"\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {trigger}\n        </span>\n      ) : (\n        <Button\n          ref={refs.setReference as React.Ref<HTMLButtonElement>}\n          variant={variant}\n          size={size}\n          title={title}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n          {label}\n          {!hideChevron && <Icon icon={UiChevronDown} />}\n        </Button>\n      )}\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={menuLabel}\n              style={floatingStyles}\n              className={cn(\n                \"z-[9999] min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n              {children\n                ? children(closeMenu)\n                : items?.map((item, i) => (\n                    <button\n                      key={i}\n                      ref={(node) => {\n                        listRef.current[i] = node;\n                      }}\n                      type=\"button\"\n                      role=\"menuitem\"\n                      tabIndex={i === activeIndex ? 0 : -1}\n                      disabled={item.disabled}\n                      title={item.title}\n                      className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n                      {...getItemProps({\n                        onClick: () => {\n                          item.onSelect();\n                          closeMenu();\n                        },\n                        onKeyDown: (event) => {\n                          if (event.key === \"Enter\" || event.key === \" \") {\n                            event.preventDefault();\n                            item.onSelect();\n                            closeMenu();\n                          }\n                        },\n                      })}\n                    >\n                      {item.icon && (\n                        <Icon\n                          {...(typeof item.icon === \"string\"\n                            ? { name: item.icon }\n                            : { icon: item.icon })}\n                        />\n                      )}\n                      {item.label}\n                    </button>\n                  ))}\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAgEO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsB;AACpB,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAwB,IAAI;AAClE,QAAM,UAAU,OAA+B,EAAE;AAEjD,QAAM,kBAAkB,OAAO,YAAY;AAC3C,kBAAgB,UAAU;AAC1B,YAAU,MAAM;;AACd,0BAAgB,YAAhB,yCAA0B;AAAA,EAC5B,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,EAAE,MAAM,gBAAgB,QAAA,IAAY,YAA4B;AAAA,IACpE;AAAA,IACA,cAAc;AAAA;AAAA,IAEd,WAAW,UAAU,UAAU,eAAe;AAAA,IAC9C,sBAAsB;AAAA;AAAA;AAAA,IAGtB,YAAY,CAAC,OAAO,CAAC,GAAG,KAAK,EAAE,SAAS,EAAA,CAAG,GAAG,MAAM,EAAE,SAAS,EAAA,CAAG,CAAC;AAAA,EAAA,CACpE;AAED,QAAM,QAAQ,SAAS,OAAO;AAQ9B,QAAM,UAAU,WAAW,OAAO;AAClC,QAAM,OAAO,QAAQ,SAAS,EAAE,MAAM,QAAQ;AAC9C,QAAM,UAAU,kBAAkB,SAAS;AAAA,IACzC;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,MAAM;AAAA,EAAA,CACP;AAED,QAAM,EAAE,mBAAmB,kBAAkB,aAAA,IAAiB,gBAAgB;AAAA,IAC5E;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,YAAY,MAAM,QAAQ,KAAK;AAErC,8BACG,OAAA,EAAI,WAAW,GAAG,wBAAwB,SAAS,GACjD,UAAA;AAAA,IAAA,UACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK,KAAK;AAAA,QACV,WAAU;AAAA,QACV,iBAAc;AAAA,QACd,iBAAe;AAAA,QACd,GAAG,kBAAA;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA,IAGH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK,KAAK;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA,iBAAc;AAAA,QACd,iBAAe;AAAA,QACd,GAAG,kBAAA;AAAA,QAEH,UAAA;AAAA,UAAA,QAAQ,oBAAC,MAAA,EAAM,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA,EAAK,CAAI;AAAA,UAC1E;AAAA,UACA,CAAC,eAAe,oBAAC,MAAA,EAAK,MAAM,cAAA,CAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAG/C,QACC,oBAAC,gBAAA,EACC,8BAAC,sBAAA,EAAqB,SAAkB,OAAO,OAC7C,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK,KAAK;AAAA,QACV,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,OAAO;AAAA,QACP,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG,iBAAA;AAAA,QAEH,UAAA,WACG,SAAS,SAAS,IAClB,+BAAO,IAAI,CAAC,MAAM,MAChB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,KAAK,CAAC,SAAS;AACb,sBAAQ,QAAQ,CAAC,IAAI;AAAA,YACvB;AAAA,YACA,MAAK;AAAA,YACL,MAAK;AAAA,YACL,UAAU,MAAM,cAAc,IAAI;AAAA,YAClC,UAAU,KAAK;AAAA,YACf,OAAO,KAAK;AAAA,YACZ,WAAU;AAAA,YACT,GAAG,aAAa;AAAA,cACf,SAAS,MAAM;AACb,qBAAK,SAAA;AACL,0BAAA;AAAA,cACF;AAAA,cACA,WAAW,CAAC,UAAU;AACpB,oBAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,wBAAM,eAAA;AACN,uBAAK,SAAA;AACL,4BAAA;AAAA,gBACF;AAAA,cACF;AAAA,YAAA,CACD;AAAA,YAEA,UAAA;AAAA,cAAA,KAAK,QACJ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACE,GAAI,OAAO,KAAK,SAAS,WACtB,EAAE,MAAM,KAAK,KAAA,IACb,EAAE,MAAM,KAAK,KAAA;AAAA,gBAAK;AAAA,cAAA;AAAA,cAGzB,KAAK;AAAA,YAAA;AAAA,UAAA;AAAA,UA/BD;AAAA,QAAA;AAAA,MAiCR;AAAA,IAAA,GAET,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/overlay/Modal.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const reactDom = require("react-dom");
 const utils = require("../lib/utils.cjs");
 const Icon = require("../data/Icon.cjs");
 const button = require("../components/button.cjs");
@@ -75,7 +76,7 @@ function Modal({
     };
   }, [open]);
   if (!open) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const overlay = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: utils.cn(
@@ -83,7 +84,7 @@ function Modal({
         // Nested modals dim less so the dialog they opened over stays visible.
         depth === 0 ? "bg-black/40" : "bg-black/20"
       ),
-      style: { zIndex: 50 + depth * 10 },
+      style: { zIndex: 1e4 + depth * 10 },
       onClick: closeOnBackdrop ? requestClose : void 0,
       role: "presentation",
       children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -146,6 +147,7 @@ function Modal({
       )
     }
   );
+  return typeof document !== "undefined" ? reactDom.createPortal(overlay, document.body) : null;
 }
 function ConfirmClosePrompt({
   options,

package/dist/overlay/Modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.cjs","sources":["../../src/overlay/Modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { Button } from \"../components/button\";\nimport { UiClose, UiFullscreen, UiFullscreenFilled } from \"../icons\";\nimport { useModalStack } from \"./modalStack\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\n/** Copy for the discard-confirmation prompt shown before a guarded close. */\nexport type ConfirmCloseOptions = {\n  /** Heading of the confirmation prompt. */\n  title?: ReactNode;\n  /** Body explaining what is lost on close. */\n  message?: ReactNode;\n  /** Label of the button that proceeds with closing. */\n  confirmLabel?: string;\n  /** Label of the button that dismisses the prompt and keeps the modal open. */\n  cancelLabel?: string;\n};\n\nexport type ModalProps = {\n  /** Controls whether the modal is mounted. */\n  open: boolean;\n  /** Called when the modal requests to close. */\n  onClose: () => void;\n  /**\n   * Guard every close path (close button, Escape, backdrop) behind a discard\n   * confirmation. `true` uses the default copy; pass options to customise it.\n   * `onClose` only fires once the user confirms. Set this while the modal holds\n   * unsaved edits and clear it (or pass `false`) once there is nothing to lose.\n   */\n  confirmClose?: boolean | ConfirmCloseOptions;\n  /** Header title and accessible dialog label when it is a string. */\n  title?: ReactNode;\n  /**\n   * Secondary header content rendered on its own row directly beneath the title.\n   * The title stays a single row alongside the expand/close buttons, so a tall\n   * subtitle (e.g. a tab switcher) never pushes those buttons down.\n   */\n  subtitle?: ReactNode;\n  /** Width/height preset for the dialog. */\n  size?: ModalSize;\n  /** Close when the backdrop is clicked. Off by default; close via Escape or the close button. */\n  closeOnBackdrop?: boolean;\n  /** Close when Escape is pressed. */\n  closeOnEsc?: boolean;\n  /** Hide the close button. */\n  hideClose?: boolean;\n  /** Show an expand/restore button. */\n  expandable?: boolean;\n  /** Classes applied to the dialog panel. */\n  className?: string;\n  /** Extra header content rendered before the expand/close buttons. */\n  headerSlot?: ReactNode;\n  /** Footer content pinned below the scrollable body. */\n  footer?: ReactNode;\n  /** Modal body content. */\n  children: ReactNode;\n};\n\nconst sizeClass: Record<ModalSize, string> = {\n  sm: \"max-w-sm max-h-[90vh]\",\n  md: \"max-w-md max-h-[90vh]\",\n  lg: \"max-w-2xl max-h-[90vh]\",\n  xl: \"max-w-4xl max-h-[90vh]\",\n  full: \"max-w-[95vw] max-h-[95vh]\",\n};\n\nconst DEFAULT_CONFIRM: Required<ConfirmCloseOptions> = {\n  title: \"Discard changes?\",\n  message: \"You have unsaved changes. Closing now will discard them.\",\n  confirmLabel: \"Discard\",\n  cancelLabel: \"Keep editing\",\n};\n\nexport function Modal({\n  open,\n  onClose,\n  confirmClose = false,\n  title,\n  subtitle,\n  size = \"md\",\n  closeOnBackdrop = false,\n  closeOnEsc = true,\n  hideClose = false,\n  expandable = true,\n  className,\n  headerSlot,\n  footer,\n  children,\n}: ModalProps) {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const { isTop, depth } = useModalStack(open);\n  const [expanded, setExpanded] = useState(false);\n  // When confirmClose is active, a close request opens this prompt instead of\n  // closing outright; onClose only fires once the user confirms the discard.\n  const [confirming, setConfirming] = useState(false);\n\n  // requestClose is the single entry point for every close affordance. With the\n  // guard on, it surfaces the confirmation; otherwise it closes immediately.\n  const requestClose = () => {\n    if (confirmClose) setConfirming(true);\n    else onClose();\n  };\n\n  useEffect(() => {\n    if (!open) {\n      setExpanded(false);\n      setConfirming(false);\n    }\n  }, [open]);\n\n  // A close guard that disappears mid-prompt (changes saved/reverted) should\n  // not leave a stale confirmation dialog up.\n  useEffect(() => {\n    if (!confirmClose) setConfirming(false);\n  }, [confirmClose]);\n\n  useEffect(() => {\n    // Only the topmost modal handles Escape so a keypress closes one nested\n    // layer at a time instead of every open modal at once.\n    if (!open || !closeOnEsc || !isTop) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key !== \"Escape\") return;\n      // While the prompt is up, Escape dismisses the prompt rather than the modal.\n      if (confirming) setConfirming(false);\n      else requestClose();\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, closeOnEsc, isTop, confirming, confirmClose, onClose]);\n\n  useEffect(() => {\n    if (!open) return;\n    const prev = document.activeElement as HTMLElement | null;\n    dialogRef.current?.focus();\n    return () => prev?.focus?.();\n  }, [open]);\n\n  if (!open) return null;\n\n  return (\n    <div\n      className={cn(\n        \"fixed inset-0 flex items-center justify-center\",\n        // Nested modals dim less so the dialog they opened over stays visible.\n        depth === 0 ? \"bg-black/40\" : \"bg-black/20\",\n      )}\n      style={{ zIndex: 50 + depth * 10 }}\n      onClick={closeOnBackdrop ? requestClose : undefined}\n      role=\"presentation\"\n    >\n      <div\n        ref={dialogRef}\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={typeof title === \"string\" ? title : undefined}\n        className={cn(\n          \"relative bg-background border border-border rounded-lg shadow-xl w-full flex flex-col\",\n          expanded ? sizeClass.full : sizeClass[size],\n          className,\n        )}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {(title || subtitle || headerSlot || expandable || !hideClose) && (\n          <div className=\"px-density-4 py-density-3 border-b border-border\">\n            <div className=\"flex items-center gap-density-2\">\n              {title ? (\n                <h2 className=\"text-sm font-semibold flex-1\">{title}</h2>\n              ) : (\n                <span className=\"flex-1\" />\n              )}\n              {headerSlot}\n              {expandable && (\n                <button\n                  type=\"button\"\n                  onClick={() => setExpanded((v) => !v)}\n                  aria-label={expanded ? \"Restore size\" : \"Expand to fullscreen\"}\n                  className=\"text-muted-foreground hover:text-foreground\"\n                >\n                  <Icon icon={expanded ? UiFullscreenFilled : UiFullscreen} />\n                </button>\n              )}\n              {!hideClose && (\n                <button\n                  type=\"button\"\n                  onClick={requestClose}\n                  aria-label=\"Close\"\n                  className=\"text-muted-foreground hover:text-foreground\"\n                >\n                  <Icon icon={UiClose} />\n                </button>\n              )}\n            </div>\n            {subtitle ? <div className=\"mt-density-2\">{subtitle}</div> : null}\n          </div>\n        )}\n        <div className=\"flex-1 overflow-auto px-density-4 py-density-3\">{children}</div>\n        {footer && <div className=\"px-density-4 py-density-3 border-t border-border\">{footer}</div>}\n        {confirming && (\n          <ConfirmClosePrompt\n            options={confirmClose === true ? DEFAULT_CONFIRM : { ...DEFAULT_CONFIRM, ...confirmClose }}\n            onConfirm={() => {\n              setConfirming(false);\n              onClose();\n            }}\n            onCancel={() => setConfirming(false)}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction ConfirmClosePrompt({\n  options,\n  onConfirm,\n  onCancel,\n}: {\n  options: Required<ConfirmCloseOptions>;\n  onConfirm: () => void;\n  onCancel: () => void;\n}) {\n  return (\n    <div\n      className=\"absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/80 p-density-4\"\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      aria-label={typeof options.title === \"string\" ? options.title : \"Confirm close\"}\n      onClick={(e) => e.stopPropagation()}\n    >\n      <div className=\"w-full max-w-sm rounded-lg border border-border bg-background p-density-4 shadow-xl\">\n        <h3 className=\"text-sm font-semibold\">{options.title}</h3>\n        <p className=\"mt-density-2 text-sm text-muted-foreground\">{options.message}</p>\n        <div className=\"mt-density-4 flex justify-end gap-density-2\">\n          <Button variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n            {options.cancelLabel}\n          </Button>\n          <Button variant=\"destructive\" size=\"sm\" onClick={onConfirm}>\n            {options.confirmLabel}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["useRef","useModalStack","useState","useEffect","_a","jsx","cn","jsxs","Icon","UiFullscreenFilled","UiFullscreen","UiClose","Button"],"mappings":"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"}
+{"version":3,"file":"Modal.cjs","sources":["../../src/overlay/Modal.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\nimport { Button } from \"../components/button\";\nimport { UiClose, UiFullscreen, UiFullscreenFilled } from \"../icons\";\nimport { useModalStack } from \"./modalStack\";\n\nexport type ModalSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\n/** Copy for the discard-confirmation prompt shown before a guarded close. */\nexport type ConfirmCloseOptions = {\n  /** Heading of the confirmation prompt. */\n  title?: ReactNode;\n  /** Body explaining what is lost on close. */\n  message?: ReactNode;\n  /** Label of the button that proceeds with closing. */\n  confirmLabel?: string;\n  /** Label of the button that dismisses the prompt and keeps the modal open. */\n  cancelLabel?: string;\n};\n\nexport type ModalProps = {\n  /** Controls whether the modal is mounted. */\n  open: boolean;\n  /** Called when the modal requests to close. */\n  onClose: () => void;\n  /**\n   * Guard every close path (close button, Escape, backdrop) behind a discard\n   * confirmation. `true` uses the default copy; pass options to customise it.\n   * `onClose` only fires once the user confirms. Set this while the modal holds\n   * unsaved edits and clear it (or pass `false`) once there is nothing to lose.\n   */\n  confirmClose?: boolean | ConfirmCloseOptions;\n  /** Header title and accessible dialog label when it is a string. */\n  title?: ReactNode;\n  /**\n   * Secondary header content rendered on its own row directly beneath the title.\n   * The title stays a single row alongside the expand/close buttons, so a tall\n   * subtitle (e.g. a tab switcher) never pushes those buttons down.\n   */\n  subtitle?: ReactNode;\n  /** Width/height preset for the dialog. */\n  size?: ModalSize;\n  /** Close when the backdrop is clicked. Off by default; close via Escape or the close button. */\n  closeOnBackdrop?: boolean;\n  /** Close when Escape is pressed. */\n  closeOnEsc?: boolean;\n  /** Hide the close button. */\n  hideClose?: boolean;\n  /** Show an expand/restore button. */\n  expandable?: boolean;\n  /** Classes applied to the dialog panel. */\n  className?: string;\n  /** Extra header content rendered before the expand/close buttons. */\n  headerSlot?: ReactNode;\n  /** Footer content pinned below the scrollable body. */\n  footer?: ReactNode;\n  /** Modal body content. */\n  children: ReactNode;\n};\n\nconst sizeClass: Record<ModalSize, string> = {\n  sm: \"max-w-sm max-h-[90vh]\",\n  md: \"max-w-md max-h-[90vh]\",\n  lg: \"max-w-2xl max-h-[90vh]\",\n  xl: \"max-w-4xl max-h-[90vh]\",\n  full: \"max-w-[95vw] max-h-[95vh]\",\n};\n\nconst DEFAULT_CONFIRM: Required<ConfirmCloseOptions> = {\n  title: \"Discard changes?\",\n  message: \"You have unsaved changes. Closing now will discard them.\",\n  confirmLabel: \"Discard\",\n  cancelLabel: \"Keep editing\",\n};\n\nexport function Modal({\n  open,\n  onClose,\n  confirmClose = false,\n  title,\n  subtitle,\n  size = \"md\",\n  closeOnBackdrop = false,\n  closeOnEsc = true,\n  hideClose = false,\n  expandable = true,\n  className,\n  headerSlot,\n  footer,\n  children,\n}: ModalProps) {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const { isTop, depth } = useModalStack(open);\n  const [expanded, setExpanded] = useState(false);\n  // When confirmClose is active, a close request opens this prompt instead of\n  // closing outright; onClose only fires once the user confirms the discard.\n  const [confirming, setConfirming] = useState(false);\n\n  // requestClose is the single entry point for every close affordance. With the\n  // guard on, it surfaces the confirmation; otherwise it closes immediately.\n  const requestClose = () => {\n    if (confirmClose) setConfirming(true);\n    else onClose();\n  };\n\n  useEffect(() => {\n    if (!open) {\n      setExpanded(false);\n      setConfirming(false);\n    }\n  }, [open]);\n\n  // A close guard that disappears mid-prompt (changes saved/reverted) should\n  // not leave a stale confirmation dialog up.\n  useEffect(() => {\n    if (!confirmClose) setConfirming(false);\n  }, [confirmClose]);\n\n  useEffect(() => {\n    // Only the topmost modal handles Escape so a keypress closes one nested\n    // layer at a time instead of every open modal at once.\n    if (!open || !closeOnEsc || !isTop) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key !== \"Escape\") return;\n      // While the prompt is up, Escape dismisses the prompt rather than the modal.\n      if (confirming) setConfirming(false);\n      else requestClose();\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open, closeOnEsc, isTop, confirming, confirmClose, onClose]);\n\n  useEffect(() => {\n    if (!open) return;\n    const prev = document.activeElement as HTMLElement | null;\n    dialogRef.current?.focus();\n    return () => prev?.focus?.();\n  }, [open]);\n\n  if (!open) return null;\n\n  const overlay = (\n    <div\n      className={cn(\n        \"fixed inset-0 flex items-center justify-center\",\n        // Nested modals dim less so the dialog they opened over stays visible.\n        depth === 0 ? \"bg-black/40\" : \"bg-black/20\",\n      )}\n      // Above the z-[9999] popover/overlay layer (dropdowns, tooltips, toasts) so a\n      // modal opened from one of them stacks on top; +depth keeps nested modals\n      // above their parent.\n      style={{ zIndex: 10000 + depth * 10 }}\n      onClick={closeOnBackdrop ? requestClose : undefined}\n      role=\"presentation\"\n    >\n      <div\n        ref={dialogRef}\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={typeof title === \"string\" ? title : undefined}\n        className={cn(\n          \"relative bg-background border border-border rounded-lg shadow-xl w-full flex flex-col\",\n          expanded ? sizeClass.full : sizeClass[size],\n          className,\n        )}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {(title || subtitle || headerSlot || expandable || !hideClose) && (\n          <div className=\"px-density-4 py-density-3 border-b border-border\">\n            <div className=\"flex items-center gap-density-2\">\n              {title ? (\n                <h2 className=\"text-sm font-semibold flex-1\">{title}</h2>\n              ) : (\n                <span className=\"flex-1\" />\n              )}\n              {headerSlot}\n              {expandable && (\n                <button\n                  type=\"button\"\n                  onClick={() => setExpanded((v) => !v)}\n                  aria-label={expanded ? \"Restore size\" : \"Expand to fullscreen\"}\n                  className=\"text-muted-foreground hover:text-foreground\"\n                >\n                  <Icon icon={expanded ? UiFullscreenFilled : UiFullscreen} />\n                </button>\n              )}\n              {!hideClose && (\n                <button\n                  type=\"button\"\n                  onClick={requestClose}\n                  aria-label=\"Close\"\n                  className=\"text-muted-foreground hover:text-foreground\"\n                >\n                  <Icon icon={UiClose} />\n                </button>\n              )}\n            </div>\n            {subtitle ? <div className=\"mt-density-2\">{subtitle}</div> : null}\n          </div>\n        )}\n        <div className=\"flex-1 overflow-auto px-density-4 py-density-3\">{children}</div>\n        {footer && <div className=\"px-density-4 py-density-3 border-t border-border\">{footer}</div>}\n        {confirming && (\n          <ConfirmClosePrompt\n            options={confirmClose === true ? DEFAULT_CONFIRM : { ...DEFAULT_CONFIRM, ...confirmClose }}\n            onConfirm={() => {\n              setConfirming(false);\n              onClose();\n            }}\n            onCancel={() => setConfirming(false)}\n          />\n        )}\n      </div>\n    </div>\n  );\n\n  // Render into document.body so the fixed-position overlay escapes any ancestor\n  // transform/overflow (e.g. a dropdown menu positioned via a CSS transform),\n  // which would otherwise trap position:fixed inside that ancestor's box and clip\n  // the modal to it.\n  return typeof document !== \"undefined\" ? createPortal(overlay, document.body) : null;\n}\n\nfunction ConfirmClosePrompt({\n  options,\n  onConfirm,\n  onCancel,\n}: {\n  options: Required<ConfirmCloseOptions>;\n  onConfirm: () => void;\n  onCancel: () => void;\n}) {\n  return (\n    <div\n      className=\"absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-background/80 p-density-4\"\n      role=\"alertdialog\"\n      aria-modal=\"true\"\n      aria-label={typeof options.title === \"string\" ? options.title : \"Confirm close\"}\n      onClick={(e) => e.stopPropagation()}\n    >\n      <div className=\"w-full max-w-sm rounded-lg border border-border bg-background p-density-4 shadow-xl\">\n        <h3 className=\"text-sm font-semibold\">{options.title}</h3>\n        <p className=\"mt-density-2 text-sm text-muted-foreground\">{options.message}</p>\n        <div className=\"mt-density-4 flex justify-end gap-density-2\">\n          <Button variant=\"ghost\" size=\"sm\" onClick={onCancel}>\n            {options.cancelLabel}\n          </Button>\n          <Button variant=\"destructive\" size=\"sm\" onClick={onConfirm}>\n            {options.confirmLabel}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":["useRef","useModalStack","useState","useEffect","_a","jsx","cn","jsxs","Icon","UiFullscreenFilled","UiFullscreen","UiClose","createPortal","Button"],"mappings":"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"}

package/dist/overlay/Modal.d.ts

@@ -50,5 +50,5 @@ export type ModalProps = {
     /** Modal body content. */
     children: ReactNode;
 };
-export declare function Modal({ open, onClose, confirmClose, title, subtitle, size, closeOnBackdrop, closeOnEsc, hideClose, expandable, className, headerSlot, footer, children, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Modal({ open, onClose, confirmClose, title, subtitle, size, closeOnBackdrop, closeOnEsc, hideClose, expandable, className, headerSlot, footer, children, }: ModalProps): import('react').ReactPortal | null;
 //# sourceMappingURL=Modal.d.ts.map

package/dist/overlay/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/overlay/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOpE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE3D,6EAA6E;AAC7E,MAAM,MAAM,mBAAmB,GAAG;IAChC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,6CAA6C;IAC7C,IAAI,EAAE,OAAO,CAAC;IACd,+CAA+C;IAC/C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;IAC7C,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gGAAgG;IAChG,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAiBF,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,YAAoB,EACpB,KAAK,EACL,QAAQ,EACR,IAAW,EACX,eAAuB,EACvB,UAAiB,EACjB,SAAiB,EACjB,UAAiB,EACjB,SAAS,EACT,UAAU,EACV,MAAM,EACN,QAAQ,GACT,EAAE,UAAU,kDA2HZ"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/overlay/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQpE,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE3D,6EAA6E;AAC7E,MAAM,MAAM,mBAAmB,GAAG;IAChC,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,sDAAsD;IACtD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,8EAA8E;IAC9E,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,6CAA6C;IAC7C,IAAI,EAAE,OAAO,CAAC;IACd,+CAA+C;IAC/C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,mBAAmB,CAAC;IAC7C,oEAAoE;IACpE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gGAAgG;IAChG,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAiBF,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,YAAoB,EACpB,KAAK,EACL,QAAQ,EACR,IAAW,EACX,eAAuB,EACvB,UAAiB,EACjB,SAAiB,EACjB,UAAiB,EACjB,SAAS,EACT,UAAU,EACV,MAAM,EACN,QAAQ,GACT,EAAE,UAAU,sCAoIZ"}

package/dist/overlay/Modal.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
+import { createPortal } from "react-dom";
 import { cn } from "../lib/utils.js";
 import { Icon } from "../data/Icon.js";
 import { Button } from "../components/button.js";
@@ -73,7 +74,7 @@ function Modal({
     };
   }, [open]);
   if (!open) return null;
-  return /* @__PURE__ */ jsx(
+  const overlay = /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
@@ -81,7 +82,7 @@ function Modal({
         // Nested modals dim less so the dialog they opened over stays visible.
         depth === 0 ? "bg-black/40" : "bg-black/20"
       ),
-      style: { zIndex: 50 + depth * 10 },
+      style: { zIndex: 1e4 + depth * 10 },
       onClick: closeOnBackdrop ? requestClose : void 0,
       role: "presentation",
       children: /* @__PURE__ */ jsxs(
@@ -144,6 +145,7 @@ function Modal({
       )
     }
   );
+  return typeof document !== "undefined" ? createPortal(overlay, document.body) : null;
 }
 function ConfirmClosePrompt({
   options,