@flanksource/clicky-ui 0.2.1 → 0.2.3

package/dist/index.js.map

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

package/dist/layout/Section.cjs

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../lib/utils.cjs");
+const Icon = require("../data/Icon.cjs");
+const UiChevronDown = require("../icons/components/UiChevronDown.cjs");
+const UiChevronRight = require("../icons/components/UiChevronRight.cjs");
+const toneRing = {
+  default: "",
+  danger: "border-l-2 border-red-500",
+  warning: "border-l-2 border-yellow-500",
+  success: "border-l-2 border-green-500",
+  info: "border-l-2 border-blue-500"
+};
+function Section({
+  title,
+  summary,
+  defaultOpen = false,
+  open: openProp,
+  onToggle,
+  icon,
+  tone = "default",
+  className,
+  headerClassName,
+  bodyClassName,
+  children
+}) {
+  const isControlled = openProp !== void 0;
+  const [innerOpen, setInnerOpen] = react.useState(defaultOpen);
+  const open = isControlled ? openProp : innerOpen;
+  function toggle() {
+    const next = !open;
+    if (!isControlled) setInnerOpen(next);
+    onToggle == null ? void 0 : onToggle(next);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("rounded-md border border-border bg-background", toneRing[tone], className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: toggle,
+        "aria-expanded": open,
+        className: utils.cn(
+          "w-full flex items-center gap-2 px-density-3 py-density-2 text-left",
+          "hover:bg-accent/50 transition-colors",
+          headerClassName
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Icon.Icon,
+            {
+              icon: open ? UiChevronDown.UiChevronDown : UiChevronRight.UiChevronRight,
+              className: "text-muted-foreground text-xs"
+            }
+          ),
+          icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { ...typeof icon === "string" ? { name: icon } : { icon }, className: "text-base" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-sm flex-1 truncate", children: title }),
+          summary && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: summary })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("px-density-3 py-density-2 border-t border-border", bodyClassName), children })
+  ] });
+}
+function DetailEmptyState({ icon, label, description, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("p-density-6 text-center text-muted-foreground", className), children: [
+    icon && /* @__PURE__ */ jsxRuntime.jsx(
+      Icon.Icon,
+      {
+        ...typeof icon === "string" ? { name: icon } : { icon },
+        className: "text-3xl mb-density-2"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: label }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs mt-density-1 opacity-70", children: description })
+  ] });
+}
+exports.DetailEmptyState = DetailEmptyState;
+exports.Section = Section;
+//# sourceMappingURL=Section.cjs.map

package/dist/layout/Section.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.cjs","sources":["../../src/layout/Section.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronRight } from \"../icons\";\n\nexport type SectionProps = {\n  /** Header title. */\n  title: ReactNode;\n  /** Optional right-aligned header summary. */\n  summary?: ReactNode;\n  /** Initial open state for uncontrolled usage. */\n  defaultOpen?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Called when the section is toggled. */\n  onToggle?: (open: boolean) => void;\n  /** Optional leading icon. */\n  icon?: string | StaticIconComponent;\n  /** Semantic border accent. */\n  tone?: \"default\" | \"danger\" | \"warning\" | \"success\" | \"info\";\n  /** Classes applied to the section root. */\n  className?: string;\n  /** Classes applied to the clickable header. */\n  headerClassName?: string;\n  /** Classes applied to the content body. */\n  bodyClassName?: string;\n  /** Collapsible content. */\n  children: ReactNode;\n};\n\nconst toneRing: Record<NonNullable<SectionProps[\"tone\"]>, string> = {\n  default: \"\",\n  danger: \"border-l-2 border-red-500\",\n  warning: \"border-l-2 border-yellow-500\",\n  success: \"border-l-2 border-green-500\",\n  info: \"border-l-2 border-blue-500\",\n};\n\nexport function Section({\n  title,\n  summary,\n  defaultOpen = false,\n  open: openProp,\n  onToggle,\n  icon,\n  tone = \"default\",\n  className,\n  headerClassName,\n  bodyClassName,\n  children,\n}: SectionProps) {\n  const isControlled = openProp !== undefined;\n  const [innerOpen, setInnerOpen] = useState(defaultOpen);\n  const open = isControlled ? openProp : innerOpen;\n\n  function toggle() {\n    const next = !open;\n    if (!isControlled) setInnerOpen(next);\n    onToggle?.(next);\n  }\n\n  return (\n    <div className={cn(\"rounded-md border border-border bg-background\", toneRing[tone], className)}>\n      <button\n        type=\"button\"\n        onClick={toggle}\n        aria-expanded={open}\n        className={cn(\n          \"w-full flex items-center gap-2 px-density-3 py-density-2 text-left\",\n          \"hover:bg-accent/50 transition-colors\",\n          headerClassName,\n        )}\n      >\n        <Icon\n          icon={open ? UiChevronDown : UiChevronRight}\n          className=\"text-muted-foreground text-xs\"\n        />\n        {icon && (\n          <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} className=\"text-base\" />\n        )}\n        <span className=\"font-medium text-sm flex-1 truncate\">{title}</span>\n        {summary && <span className=\"text-xs text-muted-foreground\">{summary}</span>}\n      </button>\n      {open && (\n        <div className={cn(\"px-density-3 py-density-2 border-t border-border\", bodyClassName)}>\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport type DetailEmptyStateProps = {\n  /** Optional icon shown above the label. */\n  icon?: string | StaticIconComponent;\n  /** Primary empty-state text. */\n  label: ReactNode;\n  /** Secondary empty-state text. */\n  description?: ReactNode;\n  /** Classes applied to the empty-state root. */\n  className?: string;\n};\n\nexport function DetailEmptyState({ icon, label, description, className }: DetailEmptyStateProps) {\n  return (\n    <div className={cn(\"p-density-6 text-center text-muted-foreground\", className)}>\n      {icon && (\n        <Icon\n          {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n          className=\"text-3xl mb-density-2\"\n        />\n      )}\n      <p className=\"text-sm\">{label}</p>\n      {description && <p className=\"text-xs mt-density-1 opacity-70\">{description}</p>}\n    </div>\n  );\n}\n"],"names":["useState","jsxs","cn","jsx","Icon","UiChevronDown","UiChevronRight"],"mappings":";;;;;;;;AA8BA,MAAM,WAA8D;AAAA,EAClE,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR;AAEO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiB;AACf,QAAM,eAAe,aAAa;AAClC,QAAM,CAAC,WAAW,YAAY,IAAIA,MAAAA,SAAS,WAAW;AACtD,QAAM,OAAO,eAAe,WAAW;AAEvC,WAAS,SAAS;AAChB,UAAM,OAAO,CAAC;AACd,QAAI,CAAC,aAAc,cAAa,IAAI;AACpC,yCAAW;AAAA,EACb;AAEA,SACEC,gCAAC,SAAI,WAAWC,MAAAA,GAAG,iDAAiD,SAAS,IAAI,GAAG,SAAS,GAC3F,UAAA;AAAA,IAAAD,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,iBAAe;AAAA,QACf,WAAWC,MAAAA;AAAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAAC,2BAAAA;AAAAA,YAACC,KAAAA;AAAAA,YAAA;AAAA,cACC,MAAM,OAAOC,cAAAA,gBAAgBC,eAAAA;AAAAA,cAC7B,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAEX,QACCH,2BAAAA,IAACC,KAAAA,MAAA,EAAM,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,SAAS,EAAE,KAAA,GAAS,WAAU,YAAA,CAAY;AAAA,UAE1FD,2BAAAA,IAAC,QAAA,EAAK,WAAU,uCAAuC,UAAA,OAAM;AAAA,UAC5D,WAAWA,2BAAAA,IAAC,QAAA,EAAK,WAAU,iCAAiC,UAAA,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEtE,uCACE,OAAA,EAAI,WAAWD,MAAAA,GAAG,oDAAoD,aAAa,GACjF,SAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AAaO,SAAS,iBAAiB,EAAE,MAAM,OAAO,aAAa,aAAoC;AAC/F,yCACG,OAAA,EAAI,WAAWA,MAAAA,GAAG,iDAAiD,SAAS,GAC1E,UAAA;AAAA,IAAA,QACCC,2BAAAA;AAAAA,MAACC,KAAAA;AAAAA,MAAA;AAAA,QACE,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA;AAAA,QACnD,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAGdD,2BAAAA,IAAC,KAAA,EAAE,WAAU,WAAW,UAAA,OAAM;AAAA,IAC7B,eAAeA,2BAAAA,IAAC,KAAA,EAAE,WAAU,mCAAmC,UAAA,YAAA,CAAY;AAAA,EAAA,GAC9E;AAEJ;;;"}

package/dist/layout/Section.d.ts

@@ -1,22 +1,38 @@
 import { ReactNode } from 'react';
+import { StaticIconComponent } from '../data/Icon';
 export type SectionProps = {
+    /** Header title. */
     title: ReactNode;
+    /** Optional right-aligned header summary. */
     summary?: ReactNode;
+    /** Initial open state for uncontrolled usage. */
     defaultOpen?: boolean;
+    /** Controlled open state. */
     open?: boolean;
+    /** Called when the section is toggled. */
     onToggle?: (open: boolean) => void;
-    icon?: string;
+    /** Optional leading icon. */
+    icon?: string | StaticIconComponent;
+    /** Semantic border accent. */
     tone?: "default" | "danger" | "warning" | "success" | "info";
+    /** Classes applied to the section root. */
     className?: string;
+    /** Classes applied to the clickable header. */
     headerClassName?: string;
+    /** Classes applied to the content body. */
     bodyClassName?: string;
+    /** Collapsible content. */
     children: ReactNode;
 };
 export declare function Section({ title, summary, defaultOpen, open: openProp, onToggle, icon, tone, className, headerClassName, bodyClassName, children, }: SectionProps): import("react/jsx-runtime").JSX.Element;
 export type DetailEmptyStateProps = {
-    icon?: string;
+    /** Optional icon shown above the label. */
+    icon?: string | StaticIconComponent;
+    /** Primary empty-state text. */
     label: ReactNode;
+    /** Secondary empty-state text. */
     description?: ReactNode;
+    /** Classes applied to the empty-state root. */
     className?: string;
 };
 export declare function DetailEmptyState({ icon, label, description, className }: DetailEmptyStateProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../src/layout/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAIjD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAUF,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,OAAO,EACP,WAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,QAAQ,EACR,IAAI,EACJ,IAAgB,EAChB,SAAS,EACT,eAAe,EACf,aAAa,EACb,QAAQ,GACT,EAAE,YAAY,2CAsCd;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,qBAAqB,2CAQ9F"}
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../src/layout/Section.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAG9D,MAAM,MAAM,YAAY,GAAG;IACzB,oBAAoB;IACpB,KAAK,EAAE,SAAS,CAAC;IACjB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,8BAA8B;IAC9B,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;IAC7D,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+CAA+C;IAC/C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2CAA2C;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,2BAA2B;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAUF,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,OAAO,EACP,WAAmB,EACnB,IAAI,EAAE,QAAQ,EACd,QAAQ,EACR,IAAI,EACJ,IAAgB,EAChB,SAAS,EACT,eAAe,EACf,aAAa,EACb,QAAQ,GACT,EAAE,YAAY,2CAwCd;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,gCAAgC;IAChC,KAAK,EAAE,SAAS,CAAC;IACjB,kCAAkC;IAClC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,qBAAqB,2CAa9F"}

package/dist/layout/Section.js

@@ -2,6 +2,8 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { cn } from "../lib/utils.js";
 import { Icon } from "../data/Icon.js";
+import { UiChevronDown } from "../icons/components/UiChevronDown.js";
+import { UiChevronRight } from "../icons/components/UiChevronRight.js";
 const toneRing = {
   default: "",
   danger: "border-l-2 border-red-500",
@@ -46,11 +48,11 @@ function Section({
           /* @__PURE__ */ jsx(
             Icon,
             {
-              name: open ? "codicon:chevron-down" : "codicon:chevron-right",
+              icon: open ? UiChevronDown : UiChevronRight,
               className: "text-muted-foreground text-xs"
             }
           ),
-          icon && /* @__PURE__ */ jsx(Icon, { name: icon, className: "text-base" }),
+          icon && /* @__PURE__ */ jsx(Icon, { ...typeof icon === "string" ? { name: icon } : { icon }, className: "text-base" }),
           /* @__PURE__ */ jsx("span", { className: "font-medium text-sm flex-1 truncate", children: title }),
           summary && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: summary })
         ]
@@ -61,7 +63,13 @@ function Section({
 }
 function DetailEmptyState({ icon, label, description, className }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("p-density-6 text-center text-muted-foreground", className), children: [
-    icon && /* @__PURE__ */ jsx(Icon, { name: icon, className: "text-3xl mb-density-2" }),
+    icon && /* @__PURE__ */ jsx(
+      Icon,
+      {
+        ...typeof icon === "string" ? { name: icon } : { icon },
+        className: "text-3xl mb-density-2"
+      }
+    ),
     /* @__PURE__ */ jsx("p", { className: "text-sm", children: label }),
     description && /* @__PURE__ */ jsx("p", { className: "text-xs mt-density-1 opacity-70", children: description })
   ] });

package/dist/layout/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","sources":["../../src/layout/Section.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../data/Icon\";\n\nexport type SectionProps = {\n  title: ReactNode;\n  summary?: ReactNode;\n  defaultOpen?: boolean;\n  open?: boolean;\n  onToggle?: (open: boolean) => void;\n  icon?: string;\n  tone?: \"default\" | \"danger\" | \"warning\" | \"success\" | \"info\";\n  className?: string;\n  headerClassName?: string;\n  bodyClassName?: string;\n  children: ReactNode;\n};\n\nconst toneRing: Record<NonNullable<SectionProps[\"tone\"]>, string> = {\n  default: \"\",\n  danger: \"border-l-2 border-red-500\",\n  warning: \"border-l-2 border-yellow-500\",\n  success: \"border-l-2 border-green-500\",\n  info: \"border-l-2 border-blue-500\",\n};\n\nexport function Section({\n  title,\n  summary,\n  defaultOpen = false,\n  open: openProp,\n  onToggle,\n  icon,\n  tone = \"default\",\n  className,\n  headerClassName,\n  bodyClassName,\n  children,\n}: SectionProps) {\n  const isControlled = openProp !== undefined;\n  const [innerOpen, setInnerOpen] = useState(defaultOpen);\n  const open = isControlled ? openProp : innerOpen;\n\n  function toggle() {\n    const next = !open;\n    if (!isControlled) setInnerOpen(next);\n    onToggle?.(next);\n  }\n\n  return (\n    <div className={cn(\"rounded-md border border-border bg-background\", toneRing[tone], className)}>\n      <button\n        type=\"button\"\n        onClick={toggle}\n        aria-expanded={open}\n        className={cn(\n          \"w-full flex items-center gap-2 px-density-3 py-density-2 text-left\",\n          \"hover:bg-accent/50 transition-colors\",\n          headerClassName,\n        )}\n      >\n        <Icon\n          name={open ? \"codicon:chevron-down\" : \"codicon:chevron-right\"}\n          className=\"text-muted-foreground text-xs\"\n        />\n        {icon && <Icon name={icon} className=\"text-base\" />}\n        <span className=\"font-medium text-sm flex-1 truncate\">{title}</span>\n        {summary && <span className=\"text-xs text-muted-foreground\">{summary}</span>}\n      </button>\n      {open && (\n        <div className={cn(\"px-density-3 py-density-2 border-t border-border\", bodyClassName)}>\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport type DetailEmptyStateProps = {\n  icon?: string;\n  label: ReactNode;\n  description?: ReactNode;\n  className?: string;\n};\n\nexport function DetailEmptyState({ icon, label, description, className }: DetailEmptyStateProps) {\n  return (\n    <div className={cn(\"p-density-6 text-center text-muted-foreground\", className)}>\n      {icon && <Icon name={icon} className=\"text-3xl mb-density-2\" />}\n      <p className=\"text-sm\">{label}</p>\n      {description && <p className=\"text-xs mt-density-1 opacity-70\">{description}</p>}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAkBA,MAAM,WAA8D;AAAA,EAClE,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR;AAEO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiB;AACf,QAAM,eAAe,aAAa;AAClC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,WAAW;AACtD,QAAM,OAAO,eAAe,WAAW;AAEvC,WAAS,SAAS;AAChB,UAAM,OAAO,CAAC;AACd,QAAI,CAAC,aAAc,cAAa,IAAI;AACpC,yCAAW;AAAA,EACb;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,iDAAiD,SAAS,IAAI,GAAG,SAAS,GAC3F,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,iBAAe;AAAA,QACf,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,OAAO,yBAAyB;AAAA,cACtC,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAEX,QAAQ,oBAAC,MAAA,EAAK,MAAM,MAAM,WAAU,aAAY;AAAA,UACjD,oBAAC,QAAA,EAAK,WAAU,uCAAuC,UAAA,OAAM;AAAA,UAC5D,WAAW,oBAAC,QAAA,EAAK,WAAU,iCAAiC,UAAA,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEtE,4BACE,OAAA,EAAI,WAAW,GAAG,oDAAoD,aAAa,GACjF,SAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AASO,SAAS,iBAAiB,EAAE,MAAM,OAAO,aAAa,aAAoC;AAC/F,8BACG,OAAA,EAAI,WAAW,GAAG,iDAAiD,SAAS,GAC1E,UAAA;AAAA,IAAA,QAAQ,oBAAC,MAAA,EAAK,MAAM,MAAM,WAAU,yBAAwB;AAAA,IAC7D,oBAAC,KAAA,EAAE,WAAU,WAAW,UAAA,OAAM;AAAA,IAC7B,eAAe,oBAAC,KAAA,EAAE,WAAU,mCAAmC,UAAA,YAAA,CAAY;AAAA,EAAA,GAC9E;AAEJ;"}
+{"version":3,"file":"Section.js","sources":["../../src/layout/Section.tsx"],"sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown, UiChevronRight } from \"../icons\";\n\nexport type SectionProps = {\n  /** Header title. */\n  title: ReactNode;\n  /** Optional right-aligned header summary. */\n  summary?: ReactNode;\n  /** Initial open state for uncontrolled usage. */\n  defaultOpen?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Called when the section is toggled. */\n  onToggle?: (open: boolean) => void;\n  /** Optional leading icon. */\n  icon?: string | StaticIconComponent;\n  /** Semantic border accent. */\n  tone?: \"default\" | \"danger\" | \"warning\" | \"success\" | \"info\";\n  /** Classes applied to the section root. */\n  className?: string;\n  /** Classes applied to the clickable header. */\n  headerClassName?: string;\n  /** Classes applied to the content body. */\n  bodyClassName?: string;\n  /** Collapsible content. */\n  children: ReactNode;\n};\n\nconst toneRing: Record<NonNullable<SectionProps[\"tone\"]>, string> = {\n  default: \"\",\n  danger: \"border-l-2 border-red-500\",\n  warning: \"border-l-2 border-yellow-500\",\n  success: \"border-l-2 border-green-500\",\n  info: \"border-l-2 border-blue-500\",\n};\n\nexport function Section({\n  title,\n  summary,\n  defaultOpen = false,\n  open: openProp,\n  onToggle,\n  icon,\n  tone = \"default\",\n  className,\n  headerClassName,\n  bodyClassName,\n  children,\n}: SectionProps) {\n  const isControlled = openProp !== undefined;\n  const [innerOpen, setInnerOpen] = useState(defaultOpen);\n  const open = isControlled ? openProp : innerOpen;\n\n  function toggle() {\n    const next = !open;\n    if (!isControlled) setInnerOpen(next);\n    onToggle?.(next);\n  }\n\n  return (\n    <div className={cn(\"rounded-md border border-border bg-background\", toneRing[tone], className)}>\n      <button\n        type=\"button\"\n        onClick={toggle}\n        aria-expanded={open}\n        className={cn(\n          \"w-full flex items-center gap-2 px-density-3 py-density-2 text-left\",\n          \"hover:bg-accent/50 transition-colors\",\n          headerClassName,\n        )}\n      >\n        <Icon\n          icon={open ? UiChevronDown : UiChevronRight}\n          className=\"text-muted-foreground text-xs\"\n        />\n        {icon && (\n          <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} className=\"text-base\" />\n        )}\n        <span className=\"font-medium text-sm flex-1 truncate\">{title}</span>\n        {summary && <span className=\"text-xs text-muted-foreground\">{summary}</span>}\n      </button>\n      {open && (\n        <div className={cn(\"px-density-3 py-density-2 border-t border-border\", bodyClassName)}>\n          {children}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport type DetailEmptyStateProps = {\n  /** Optional icon shown above the label. */\n  icon?: string | StaticIconComponent;\n  /** Primary empty-state text. */\n  label: ReactNode;\n  /** Secondary empty-state text. */\n  description?: ReactNode;\n  /** Classes applied to the empty-state root. */\n  className?: string;\n};\n\nexport function DetailEmptyState({ icon, label, description, className }: DetailEmptyStateProps) {\n  return (\n    <div className={cn(\"p-density-6 text-center text-muted-foreground\", className)}>\n      {icon && (\n        <Icon\n          {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n          className=\"text-3xl mb-density-2\"\n        />\n      )}\n      <p className=\"text-sm\">{label}</p>\n      {description && <p className=\"text-xs mt-density-1 opacity-70\">{description}</p>}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;AA8BA,MAAM,WAA8D;AAAA,EAClE,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR;AAEO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAiB;AACf,QAAM,eAAe,aAAa;AAClC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,WAAW;AACtD,QAAM,OAAO,eAAe,WAAW;AAEvC,WAAS,SAAS;AAChB,UAAM,OAAO,CAAC;AACd,QAAI,CAAC,aAAc,cAAa,IAAI;AACpC,yCAAW;AAAA,EACb;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,iDAAiD,SAAS,IAAI,GAAG,SAAS,GAC3F,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,iBAAe;AAAA,QACf,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAGF,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAM,OAAO,gBAAgB;AAAA,cAC7B,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAEX,QACC,oBAAC,MAAA,EAAM,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,SAAS,EAAE,KAAA,GAAS,WAAU,YAAA,CAAY;AAAA,UAE1F,oBAAC,QAAA,EAAK,WAAU,uCAAuC,UAAA,OAAM;AAAA,UAC5D,WAAW,oBAAC,QAAA,EAAK,WAAU,iCAAiC,UAAA,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEtE,4BACE,OAAA,EAAI,WAAW,GAAG,oDAAoD,aAAa,GACjF,SAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;AAaO,SAAS,iBAAiB,EAAE,MAAM,OAAO,aAAa,aAAoC;AAC/F,8BACG,OAAA,EAAI,WAAW,GAAG,iDAAiD,SAAS,GAC1E,UAAA;AAAA,IAAA,QACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA;AAAA,QACnD,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAGd,oBAAC,KAAA,EAAE,WAAU,WAAW,UAAA,OAAM;AAAA,IAC7B,eAAe,oBAAC,KAAA,EAAE,WAAU,mCAAmC,UAAA,YAAA,CAAY;AAAA,EAAA,GAC9E;AAEJ;"}

package/dist/layout/SplitPane.cjs

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../lib/utils.cjs");
+function SplitPane({
+  left,
+  right,
+  defaultSplit = 50,
+  minLeft = 20,
+  minRight = 20,
+  leftClass,
+  rightClass,
+  className
+}) {
+  const [split, setSplit] = react.useState(defaultSplit);
+  const dragging = react.useRef(false);
+  const container = react.useRef(null);
+  const onMouseDown = react.useCallback(
+    (e) => {
+      e.preventDefault();
+      dragging.current = true;
+      const onMove = (ev) => {
+        if (!dragging.current || !container.current) return;
+        const rect = container.current.getBoundingClientRect();
+        const pct = (ev.clientX - rect.left) / rect.width * 100;
+        setSplit(Math.max(minLeft, Math.min(100 - minRight, pct)));
+      };
+      const onUp = () => {
+        dragging.current = false;
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      };
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+    },
+    [minLeft, minRight]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: container, className: utils.cn("flex flex-1 overflow-hidden min-h-0", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: { width: `${split}%` },
+        className: utils.cn("overflow-y-auto bg-background min-h-0", leftClass),
+        children: left
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "separator",
+        "aria-orientation": "vertical",
+        className: "w-1 bg-border hover:bg-primary cursor-col-resize shrink-0 transition-colors",
+        onMouseDown
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: { width: `${100 - split}%` },
+        className: utils.cn("overflow-hidden bg-background min-h-0", rightClass),
+        children: right
+      }
+    )
+  ] });
+}
+exports.SplitPane = SplitPane;
+//# sourceMappingURL=SplitPane.cjs.map

package/dist/layout/SplitPane.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitPane.cjs","sources":["../../src/layout/SplitPane.tsx"],"sourcesContent":["import { useCallback, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type SplitPaneProps = {\n  /** Content rendered in the left pane. */\n  left: ReactNode;\n  /** Content rendered in the right pane. */\n  right: ReactNode;\n  /** Initial left-pane width as a percentage. */\n  defaultSplit?: number;\n  /** Minimum left-pane width as a percentage. */\n  minLeft?: number;\n  /** Minimum right-pane width as a percentage. */\n  minRight?: number;\n  /** Classes applied to the left pane. */\n  leftClass?: string;\n  /** Classes applied to the right pane. */\n  rightClass?: string;\n  /** Classes applied to the root split container. */\n  className?: string;\n};\n\nexport function SplitPane({\n  left,\n  right,\n  defaultSplit = 50,\n  minLeft = 20,\n  minRight = 20,\n  leftClass,\n  rightClass,\n  className,\n}: SplitPaneProps) {\n  const [split, setSplit] = useState(defaultSplit);\n  const dragging = useRef(false);\n  const container = useRef<HTMLDivElement>(null);\n\n  const onMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      dragging.current = true;\n\n      const onMove = (ev: MouseEvent) => {\n        if (!dragging.current || !container.current) return;\n        const rect = container.current.getBoundingClientRect();\n        const pct = ((ev.clientX - rect.left) / rect.width) * 100;\n        setSplit(Math.max(minLeft, Math.min(100 - minRight, pct)));\n      };\n\n      const onUp = () => {\n        dragging.current = false;\n        document.removeEventListener(\"mousemove\", onMove);\n        document.removeEventListener(\"mouseup\", onUp);\n        document.body.style.cursor = \"\";\n        document.body.style.userSelect = \"\";\n      };\n\n      document.addEventListener(\"mousemove\", onMove);\n      document.addEventListener(\"mouseup\", onUp);\n      document.body.style.cursor = \"col-resize\";\n      document.body.style.userSelect = \"none\";\n    },\n    [minLeft, minRight],\n  );\n\n  return (\n    <div ref={container} className={cn(\"flex flex-1 overflow-hidden min-h-0\", className)}>\n      <div\n        style={{ width: `${split}%` }}\n        className={cn(\"overflow-y-auto bg-background min-h-0\", leftClass)}\n      >\n        {left}\n      </div>\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className=\"w-1 bg-border hover:bg-primary cursor-col-resize shrink-0 transition-colors\"\n        onMouseDown={onMouseDown}\n      />\n      <div\n        style={{ width: `${100 - split}%` }}\n        className={cn(\"overflow-hidden bg-background min-h-0\", rightClass)}\n      >\n        {right}\n      </div>\n    </div>\n  );\n}\n"],"names":["useState","useRef","useCallback","jsxs","cn","jsx"],"mappings":";;;;;AAsBO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,CAAC,OAAO,QAAQ,IAAIA,MAAAA,SAAS,YAAY;AAC/C,QAAM,WAAWC,MAAAA,OAAO,KAAK;AAC7B,QAAM,YAAYA,MAAAA,OAAuB,IAAI;AAE7C,QAAM,cAAcC,MAAAA;AAAAA,IAClB,CAAC,MAAwB;AACvB,QAAE,eAAA;AACF,eAAS,UAAU;AAEnB,YAAM,SAAS,CAAC,OAAmB;AACjC,YAAI,CAAC,SAAS,WAAW,CAAC,UAAU,QAAS;AAC7C,cAAM,OAAO,UAAU,QAAQ,sBAAA;AAC/B,cAAM,OAAQ,GAAG,UAAU,KAAK,QAAQ,KAAK,QAAS;AACtD,iBAAS,KAAK,IAAI,SAAS,KAAK,IAAI,MAAM,UAAU,GAAG,CAAC,CAAC;AAAA,MAC3D;AAEA,YAAM,OAAO,MAAM;AACjB,iBAAS,UAAU;AACnB,iBAAS,oBAAoB,aAAa,MAAM;AAChD,iBAAS,oBAAoB,WAAW,IAAI;AAC5C,iBAAS,KAAK,MAAM,SAAS;AAC7B,iBAAS,KAAK,MAAM,aAAa;AAAA,MACnC;AAEA,eAAS,iBAAiB,aAAa,MAAM;AAC7C,eAAS,iBAAiB,WAAW,IAAI;AACzC,eAAS,KAAK,MAAM,SAAS;AAC7B,eAAS,KAAK,MAAM,aAAa;AAAA,IACnC;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EAAA;AAGpB,SACEC,gCAAC,SAAI,KAAK,WAAW,WAAWC,MAAAA,GAAG,uCAAuC,SAAS,GACjF,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,EAAE,OAAO,GAAG,KAAK,IAAA;AAAA,QACxB,WAAWD,MAAAA,GAAG,yCAAyC,SAAS;AAAA,QAE/D,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEHC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,oBAAiB;AAAA,QACjB,WAAU;AAAA,QACV;AAAA,MAAA;AAAA,IAAA;AAAA,IAEFA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,EAAE,OAAO,GAAG,MAAM,KAAK,IAAA;AAAA,QAC9B,WAAWD,MAAAA,GAAG,yCAAyC,UAAU;AAAA,QAEhE,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;;"}

package/dist/layout/SplitPane.d.ts

@@ -1,12 +1,20 @@
 import { ReactNode } from 'react';
 export type SplitPaneProps = {
+    /** Content rendered in the left pane. */
     left: ReactNode;
+    /** Content rendered in the right pane. */
     right: ReactNode;
+    /** Initial left-pane width as a percentage. */
     defaultSplit?: number;
+    /** Minimum left-pane width as a percentage. */
     minLeft?: number;
+    /** Minimum right-pane width as a percentage. */
     minRight?: number;
+    /** Classes applied to the left pane. */
     leftClass?: string;
+    /** Classes applied to the right pane. */
     rightClass?: string;
+    /** Classes applied to the root split container. */
     className?: string;
 };
 export declare function SplitPane({ left, right, defaultSplit, minLeft, minRight, leftClass, rightClass, className, }: SplitPaneProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"SplitPane.d.ts","sourceRoot":"","sources":["../../src/layout/SplitPane.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtE,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,SAAS,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,YAAiB,EACjB,OAAY,EACZ,QAAa,EACb,SAAS,EACT,UAAU,EACV,SAAS,GACV,EAAE,cAAc,2CAuDhB"}
+{"version":3,"file":"SplitPane.d.ts","sourceRoot":"","sources":["../../src/layout/SplitPane.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGtE,MAAM,MAAM,cAAc,GAAG;IAC3B,yCAAyC;IACzC,IAAI,EAAE,SAAS,CAAC;IAChB,0CAA0C;IAC1C,KAAK,EAAE,SAAS,CAAC;IACjB,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mDAAmD;IACnD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,YAAiB,EACjB,OAAY,EACZ,QAAa,EACb,SAAS,EACT,UAAU,EACV,SAAS,GACV,EAAE,cAAc,2CAuDhB"}

package/dist/layout/SplitPane.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitPane.js","sources":["../../src/layout/SplitPane.tsx"],"sourcesContent":["import { useCallback, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type SplitPaneProps = {\n  left: ReactNode;\n  right: ReactNode;\n  defaultSplit?: number;\n  minLeft?: number;\n  minRight?: number;\n  leftClass?: string;\n  rightClass?: string;\n  className?: string;\n};\n\nexport function SplitPane({\n  left,\n  right,\n  defaultSplit = 50,\n  minLeft = 20,\n  minRight = 20,\n  leftClass,\n  rightClass,\n  className,\n}: SplitPaneProps) {\n  const [split, setSplit] = useState(defaultSplit);\n  const dragging = useRef(false);\n  const container = useRef<HTMLDivElement>(null);\n\n  const onMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      dragging.current = true;\n\n      const onMove = (ev: MouseEvent) => {\n        if (!dragging.current || !container.current) return;\n        const rect = container.current.getBoundingClientRect();\n        const pct = ((ev.clientX - rect.left) / rect.width) * 100;\n        setSplit(Math.max(minLeft, Math.min(100 - minRight, pct)));\n      };\n\n      const onUp = () => {\n        dragging.current = false;\n        document.removeEventListener(\"mousemove\", onMove);\n        document.removeEventListener(\"mouseup\", onUp);\n        document.body.style.cursor = \"\";\n        document.body.style.userSelect = \"\";\n      };\n\n      document.addEventListener(\"mousemove\", onMove);\n      document.addEventListener(\"mouseup\", onUp);\n      document.body.style.cursor = \"col-resize\";\n      document.body.style.userSelect = \"none\";\n    },\n    [minLeft, minRight],\n  );\n\n  return (\n    <div ref={container} className={cn(\"flex flex-1 overflow-hidden min-h-0\", className)}>\n      <div\n        style={{ width: `${split}%` }}\n        className={cn(\"overflow-y-auto bg-background min-h-0\", leftClass)}\n      >\n        {left}\n      </div>\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className=\"w-1 bg-border hover:bg-primary cursor-col-resize shrink-0 transition-colors\"\n        onMouseDown={onMouseDown}\n      />\n      <div\n        style={{ width: `${100 - split}%` }}\n        className={cn(\"overflow-hidden bg-background min-h-0\", rightClass)}\n      >\n        {right}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAcO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,WAAW,OAAO,KAAK;AAC7B,QAAM,YAAY,OAAuB,IAAI;AAE7C,QAAM,cAAc;AAAA,IAClB,CAAC,MAAwB;AACvB,QAAE,eAAA;AACF,eAAS,UAAU;AAEnB,YAAM,SAAS,CAAC,OAAmB;AACjC,YAAI,CAAC,SAAS,WAAW,CAAC,UAAU,QAAS;AAC7C,cAAM,OAAO,UAAU,QAAQ,sBAAA;AAC/B,cAAM,OAAQ,GAAG,UAAU,KAAK,QAAQ,KAAK,QAAS;AACtD,iBAAS,KAAK,IAAI,SAAS,KAAK,IAAI,MAAM,UAAU,GAAG,CAAC,CAAC;AAAA,MAC3D;AAEA,YAAM,OAAO,MAAM;AACjB,iBAAS,UAAU;AACnB,iBAAS,oBAAoB,aAAa,MAAM;AAChD,iBAAS,oBAAoB,WAAW,IAAI;AAC5C,iBAAS,KAAK,MAAM,SAAS;AAC7B,iBAAS,KAAK,MAAM,aAAa;AAAA,MACnC;AAEA,eAAS,iBAAiB,aAAa,MAAM;AAC7C,eAAS,iBAAiB,WAAW,IAAI;AACzC,eAAS,KAAK,MAAM,SAAS;AAC7B,eAAS,KAAK,MAAM,aAAa;AAAA,IACnC;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EAAA;AAGpB,SACE,qBAAC,SAAI,KAAK,WAAW,WAAW,GAAG,uCAAuC,SAAS,GACjF,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,EAAE,OAAO,GAAG,KAAK,IAAA;AAAA,QACxB,WAAW,GAAG,yCAAyC,SAAS;AAAA,QAE/D,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,oBAAiB;AAAA,QACjB,WAAU;AAAA,QACV;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,EAAE,OAAO,GAAG,MAAM,KAAK,IAAA;AAAA,QAC9B,WAAW,GAAG,yCAAyC,UAAU;AAAA,QAEhE,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}
+{"version":3,"file":"SplitPane.js","sources":["../../src/layout/SplitPane.tsx"],"sourcesContent":["import { useCallback, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../lib/utils\";\n\nexport type SplitPaneProps = {\n  /** Content rendered in the left pane. */\n  left: ReactNode;\n  /** Content rendered in the right pane. */\n  right: ReactNode;\n  /** Initial left-pane width as a percentage. */\n  defaultSplit?: number;\n  /** Minimum left-pane width as a percentage. */\n  minLeft?: number;\n  /** Minimum right-pane width as a percentage. */\n  minRight?: number;\n  /** Classes applied to the left pane. */\n  leftClass?: string;\n  /** Classes applied to the right pane. */\n  rightClass?: string;\n  /** Classes applied to the root split container. */\n  className?: string;\n};\n\nexport function SplitPane({\n  left,\n  right,\n  defaultSplit = 50,\n  minLeft = 20,\n  minRight = 20,\n  leftClass,\n  rightClass,\n  className,\n}: SplitPaneProps) {\n  const [split, setSplit] = useState(defaultSplit);\n  const dragging = useRef(false);\n  const container = useRef<HTMLDivElement>(null);\n\n  const onMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      dragging.current = true;\n\n      const onMove = (ev: MouseEvent) => {\n        if (!dragging.current || !container.current) return;\n        const rect = container.current.getBoundingClientRect();\n        const pct = ((ev.clientX - rect.left) / rect.width) * 100;\n        setSplit(Math.max(minLeft, Math.min(100 - minRight, pct)));\n      };\n\n      const onUp = () => {\n        dragging.current = false;\n        document.removeEventListener(\"mousemove\", onMove);\n        document.removeEventListener(\"mouseup\", onUp);\n        document.body.style.cursor = \"\";\n        document.body.style.userSelect = \"\";\n      };\n\n      document.addEventListener(\"mousemove\", onMove);\n      document.addEventListener(\"mouseup\", onUp);\n      document.body.style.cursor = \"col-resize\";\n      document.body.style.userSelect = \"none\";\n    },\n    [minLeft, minRight],\n  );\n\n  return (\n    <div ref={container} className={cn(\"flex flex-1 overflow-hidden min-h-0\", className)}>\n      <div\n        style={{ width: `${split}%` }}\n        className={cn(\"overflow-y-auto bg-background min-h-0\", leftClass)}\n      >\n        {left}\n      </div>\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className=\"w-1 bg-border hover:bg-primary cursor-col-resize shrink-0 transition-colors\"\n        onMouseDown={onMouseDown}\n      />\n      <div\n        style={{ width: `${100 - split}%` }}\n        className={cn(\"overflow-hidden bg-background min-h-0\", rightClass)}\n      >\n        {right}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAsBO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,YAAY;AAC/C,QAAM,WAAW,OAAO,KAAK;AAC7B,QAAM,YAAY,OAAuB,IAAI;AAE7C,QAAM,cAAc;AAAA,IAClB,CAAC,MAAwB;AACvB,QAAE,eAAA;AACF,eAAS,UAAU;AAEnB,YAAM,SAAS,CAAC,OAAmB;AACjC,YAAI,CAAC,SAAS,WAAW,CAAC,UAAU,QAAS;AAC7C,cAAM,OAAO,UAAU,QAAQ,sBAAA;AAC/B,cAAM,OAAQ,GAAG,UAAU,KAAK,QAAQ,KAAK,QAAS;AACtD,iBAAS,KAAK,IAAI,SAAS,KAAK,IAAI,MAAM,UAAU,GAAG,CAAC,CAAC;AAAA,MAC3D;AAEA,YAAM,OAAO,MAAM;AACjB,iBAAS,UAAU;AACnB,iBAAS,oBAAoB,aAAa,MAAM;AAChD,iBAAS,oBAAoB,WAAW,IAAI;AAC5C,iBAAS,KAAK,MAAM,SAAS;AAC7B,iBAAS,KAAK,MAAM,aAAa;AAAA,MACnC;AAEA,eAAS,iBAAiB,aAAa,MAAM;AAC7C,eAAS,iBAAiB,WAAW,IAAI;AACzC,eAAS,KAAK,MAAM,SAAS;AAC7B,eAAS,KAAK,MAAM,aAAa;AAAA,IACnC;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EAAA;AAGpB,SACE,qBAAC,SAAI,KAAK,WAAW,WAAW,GAAG,uCAAuC,SAAS,GACjF,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,EAAE,OAAO,GAAG,KAAK,IAAA;AAAA,QACxB,WAAW,GAAG,yCAAyC,SAAS;AAAA,QAE/D,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,oBAAiB;AAAA,QACjB,WAAU;AAAA,QACV;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,EAAE,OAAO,GAAG,MAAM,KAAK,IAAA;AAAA,QAC9B,WAAW,GAAG,yCAAyC,UAAU;AAAA,QAEhE,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}

package/dist/lib/palette.cjs

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const AVATAR_PALETTE = [
+  "bg-rose-100 text-rose-700",
+  "bg-pink-100 text-pink-700",
+  "bg-fuchsia-100 text-fuchsia-700",
+  "bg-purple-100 text-purple-700",
+  "bg-violet-100 text-violet-700",
+  "bg-indigo-100 text-indigo-700",
+  "bg-blue-100 text-blue-700",
+  "bg-sky-100 text-sky-700",
+  "bg-cyan-100 text-cyan-700",
+  "bg-teal-100 text-teal-700",
+  "bg-emerald-100 text-emerald-700",
+  "bg-green-100 text-green-700",
+  "bg-lime-100 text-lime-800",
+  "bg-amber-100 text-amber-800",
+  "bg-orange-100 text-orange-700",
+  "bg-red-100 text-red-700"
+];
+function fnv1a32(s) {
+  let h = 2166136261;
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return h >>> 0;
+}
+function paletteClass(key) {
+  return AVATAR_PALETTE[fnv1a32(key) % AVATAR_PALETTE.length];
+}
+exports.AVATAR_PALETTE = AVATAR_PALETTE;
+exports.fnv1a32 = fnv1a32;
+exports.paletteClass = paletteClass;
+//# sourceMappingURL=palette.cjs.map

package/dist/lib/palette.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"palette.cjs","sources":["../../src/lib/palette.ts"],"sourcesContent":["// 16 Tailwind bg/text pairs chosen for WCAG AA contrast at small avatar sizes.\n// Add/remove entries carefully — the index is hash-derived and must stay stable.\nexport const AVATAR_PALETTE: readonly string[] = [\n  \"bg-rose-100 text-rose-700\",\n  \"bg-pink-100 text-pink-700\",\n  \"bg-fuchsia-100 text-fuchsia-700\",\n  \"bg-purple-100 text-purple-700\",\n  \"bg-violet-100 text-violet-700\",\n  \"bg-indigo-100 text-indigo-700\",\n  \"bg-blue-100 text-blue-700\",\n  \"bg-sky-100 text-sky-700\",\n  \"bg-cyan-100 text-cyan-700\",\n  \"bg-teal-100 text-teal-700\",\n  \"bg-emerald-100 text-emerald-700\",\n  \"bg-green-100 text-green-700\",\n  \"bg-lime-100 text-lime-800\",\n  \"bg-amber-100 text-amber-800\",\n  \"bg-orange-100 text-orange-700\",\n  \"bg-red-100 text-red-700\",\n];\n\n// Deterministic 32-bit FNV-1a hash. Same input → same output across sessions.\nexport function fnv1a32(s: string): number {\n  let h = 0x811c9dc5;\n  for (let i = 0; i < s.length; i++) {\n    h ^= s.charCodeAt(i);\n    h = Math.imul(h, 0x01000193);\n  }\n  return h >>> 0;\n}\n\nexport function paletteClass(key: string): string {\n  return AVATAR_PALETTE[fnv1a32(key) % AVATAR_PALETTE.length]!;\n}\n"],"names":[],"mappings":";;AAEO,MAAM,iBAAoC;AAAA,EAC/C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAGO,SAAS,QAAQ,GAAmB;AACzC,MAAI,IAAI;AACR,WAAS,IAAI,GAAG,IAAI,EAAE,QAAQ,KAAK;AACjC,SAAK,EAAE,WAAW,CAAC;AACnB,QAAI,KAAK,KAAK,GAAG,QAAU;AAAA,EAC7B;AACA,SAAO,MAAM;AACf;AAEO,SAAS,aAAa,KAAqB;AAChD,SAAO,eAAe,QAAQ,GAAG,IAAI,eAAe,MAAM;AAC5D;;;;"}

package/dist/lib/size.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const SIZE_TOKENS = ["xs", "sm", "md", "lg", "xl"];
+const SIZE_SCALE = {
+  compact: { xs: 14, sm: 18, md: 24, lg: 36, xl: 48 },
+  comfortable: { xs: 16, sm: 20, md: 28, lg: 40, xl: 56 },
+  spacious: { xs: 20, sm: 24, md: 32, lg: 48, xl: 64 }
+};
+function resolveSize(size, density = "comfortable") {
+  return SIZE_SCALE[density][size];
+}
+exports.SIZE_TOKENS = SIZE_TOKENS;
+exports.resolveSize = resolveSize;
+//# sourceMappingURL=size.cjs.map

package/dist/lib/size.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.cjs","sources":["../../src/lib/size.ts"],"sourcesContent":["import type { Density } from \"../hooks/use-density\";\n\nexport type SizeToken = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport const SIZE_TOKENS: SizeToken[] = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"];\n\nconst SIZE_SCALE: Record<Density, Record<SizeToken, number>> = {\n  compact: { xs: 14, sm: 18, md: 24, lg: 36, xl: 48 },\n  comfortable: { xs: 16, sm: 20, md: 28, lg: 40, xl: 56 },\n  spacious: { xs: 20, sm: 24, md: 32, lg: 48, xl: 64 },\n};\n\nexport function resolveSize(size: SizeToken, density: Density = \"comfortable\"): number {\n  return SIZE_SCALE[density][size];\n}\n\nexport function readDensityFromDom(): Density {\n  if (typeof document === \"undefined\") return \"comfortable\";\n  const raw = document.documentElement.getAttribute(\"data-density\");\n  return raw === \"compact\" || raw === \"spacious\" ? raw : \"comfortable\";\n}\n"],"names":[],"mappings":";;AAIO,MAAM,cAA2B,CAAC,MAAM,MAAM,MAAM,MAAM,IAAI;AAErE,MAAM,aAAyD;AAAA,EAC7D,SAAS,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,GAAA;AAAA,EAC/C,aAAa,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,GAAA;AAAA,EACnD,UAAU,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,IAAI,GAAA;AAClD;AAEO,SAAS,YAAY,MAAiB,UAAmB,eAAuB;AACrF,SAAO,WAAW,OAAO,EAAE,IAAI;AACjC;;;"}

package/dist/lib/utils.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const clsx = require("clsx");
+const tailwindMerge = require("tailwind-merge");
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+exports.cn = cn;
+//# sourceMappingURL=utils.cjs.map

package/dist/lib/utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.cjs","sources":["../../src/lib/utils.ts"],"sourcesContent":["import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n"],"names":["twMerge","clsx"],"mappings":";;;;AAGO,SAAS,MAAM,QAA8B;AAClD,SAAOA,cAAAA,QAAQC,UAAK,MAAM,CAAC;AAC7B;;"}

package/dist/overlay/DropdownMenu.cjs

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const utils = require("../lib/utils.cjs");
+const button = require("../components/button.cjs");
+const Icon = require("../data/Icon.cjs");
+const UiChevronDown = require("../icons/components/UiChevronDown.cjs");
+function DropdownMenu({
+  label,
+  icon,
+  hideChevron = false,
+  variant = "outline",
+  size = "sm",
+  trigger,
+  items,
+  children,
+  align = "right",
+  title,
+  className,
+  menuClassName
+}) {
+  const [open, setOpen] = react.useState(false);
+  const wrapperRef = react.useRef(null);
+  react.useEffect(() => {
+    if (!open) return;
+    const onMouseDown = (e) => {
+      var _a;
+      if (!((_a = wrapperRef.current) == null ? void 0 : _a.contains(e.target))) setOpen(false);
+    };
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onMouseDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onMouseDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+  const closeMenu = () => setOpen(false);
+  const toggle = () => setOpen((v) => !v);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("relative inline-block", className), ref: wrapperRef, children: [
+    trigger ? /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: toggle, "aria-haspopup": "menu", "aria-expanded": open, children: trigger }) : /* @__PURE__ */ jsxRuntime.jsxs(
+      button.Button,
+      {
+        variant,
+        size,
+        onClick: toggle,
+        title,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { ...typeof icon === "string" ? { name: icon } : { icon } }),
+          label,
+          !hideChevron && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { icon: UiChevronDown.UiChevronDown })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "menu",
+        className: utils.cn(
+          "absolute z-20 mt-1 min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md",
+          align === "right" ? "right-0" : "left-0",
+          menuClassName
+        ),
+        children: children ? children(closeMenu) : items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            disabled: item.disabled,
+            title: item.title,
+            onClick: () => {
+              item.onSelect();
+              closeMenu();
+            },
+            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",
+            children: [
+              item.icon && /* @__PURE__ */ jsxRuntime.jsx(
+                Icon.Icon,
+                {
+                  ...typeof item.icon === "string" ? { name: item.icon } : { icon: item.icon }
+                }
+              ),
+              item.label
+            ]
+          },
+          i
+        ))
+      }
+    )
+  ] });
+}
+exports.DropdownMenu = DropdownMenu;
+//# sourceMappingURL=DropdownMenu.cjs.map

package/dist/overlay/DropdownMenu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.cjs","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"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  /** Browser tooltip / accessible label for the default trigger. */\n  title?: 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  title,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (!open) return;\n    const onMouseDown = (e: MouseEvent) => {\n      if (!wrapperRef.current?.contains(e.target as Node)) setOpen(false);\n    };\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n    document.addEventListener(\"mousedown\", onMouseDown);\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      document.removeEventListener(\"mousedown\", onMouseDown);\n      document.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [open]);\n\n  const closeMenu = () => setOpen(false);\n  const toggle = () => setOpen((v) => !v);\n\n  return (\n    <div className={cn(\"relative inline-block\", className)} ref={wrapperRef}>\n      {trigger ? (\n        <span onClick={toggle} aria-haspopup=\"menu\" aria-expanded={open}>\n          {trigger}\n        </span>\n      ) : (\n        <Button\n          variant={variant}\n          size={size}\n          onClick={toggle}\n          title={title}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n        >\n          {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n          {label}\n          {!hideChevron && <Icon icon={UiChevronDown} />}\n        </Button>\n      )}\n      {open && (\n        <div\n          role=\"menu\"\n          className={cn(\n            \"absolute z-20 mt-1 min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md\",\n            align === \"right\" ? \"right-0\" : \"left-0\",\n            menuClassName,\n          )}\n        >\n          {children\n            ? children(closeMenu)\n            : items?.map((item, i) => (\n                <button\n                  key={i}\n                  type=\"button\"\n                  role=\"menuitem\"\n                  disabled={item.disabled}\n                  title={item.title}\n                  onClick={() => {\n                    item.onSelect();\n                    closeMenu();\n                  }}\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                >\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      )}\n    </div>\n  );\n}\n"],"names":["useState","useRef","useEffect","jsxs","cn","jsx","Button","Icon","UiChevronDown"],"mappings":";;;;;;;;AA8CO,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;AACF,GAAsB;AACpB,QAAM,CAAC,MAAM,OAAO,IAAIA,MAAAA,SAAS,KAAK;AACtC,QAAM,aAAaC,MAAAA,OAAuB,IAAI;AAE9CC,QAAAA,UAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,cAAc,CAAC,MAAkB;;AACrC,UAAI,GAAC,gBAAW,YAAX,mBAAoB,SAAS,EAAE,kBAAyB,KAAK;AAAA,IACpE;AACA,UAAM,YAAY,CAAC,MAAqB;AACtC,UAAI,EAAE,QAAQ,SAAU,SAAQ,KAAK;AAAA,IACvC;AACA,aAAS,iBAAiB,aAAa,WAAW;AAClD,aAAS,iBAAiB,WAAW,SAAS;AAC9C,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,WAAW;AACrD,eAAS,oBAAoB,WAAW,SAAS;AAAA,IACnD;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,YAAY,MAAM,QAAQ,KAAK;AACrC,QAAM,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAEtC,SACEC,gCAAC,SAAI,WAAWC,MAAAA,GAAG,yBAAyB,SAAS,GAAG,KAAK,YAC1D,UAAA;AAAA,IAAA,UACCC,2BAAAA,IAAC,UAAK,SAAS,QAAQ,iBAAc,QAAO,iBAAe,MACxD,UAAA,QAAA,CACH,IAEAF,2BAAAA;AAAAA,MAACG,OAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,iBAAc;AAAA,QACd,iBAAe;AAAA,QAEd,UAAA;AAAA,UAAA,QAAQD,2BAAAA,IAACE,WAAA,EAAM,GAAI,OAAO,SAAS,WAAW,EAAE,MAAM,KAAA,IAAS,EAAE,KAAA,EAAK,CAAI;AAAA,UAC1E;AAAA,UACA,CAAC,eAAeF,2BAAAA,IAACE,KAAAA,MAAA,EAAK,MAAMC,cAAAA,cAAA,CAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAG/C,QACCH,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAWD,MAAAA;AAAAA,UACT;AAAA,UACA,UAAU,UAAU,YAAY;AAAA,UAChC;AAAA,QAAA;AAAA,QAGD,UAAA,WACG,SAAS,SAAS,IAClB,+BAAO,IAAI,CAAC,MAAM,MAChBD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,UAAU,KAAK;AAAA,YACf,OAAO,KAAK;AAAA,YACZ,SAAS,MAAM;AACb,mBAAK,SAAA;AACL,wBAAA;AAAA,YACF;AAAA,YACA,WAAU;AAAA,YAET,UAAA;AAAA,cAAA,KAAK,QACJE,2BAAAA;AAAAA,gBAACE,KAAAA;AAAAA,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,UAlBD;AAAA,QAAA;AAAA,MAoBR;AAAA,IAAA;AAAA,EACP,GAEJ;AAEJ;;"}

package/dist/overlay/DropdownMenu.d.ts

@@ -0,0 +1,43 @@
+import { ReactNode } from 'react';
+import { ButtonProps } from '../components/button';
+import { StaticIconComponent } from '../data/Icon';
+export type DropdownMenuItem = {
+    /** Visible label. */
+    label: ReactNode;
+    /** Called when the item is chosen. */
+    onSelect: () => void;
+    /** Iconify name or imported icon component rendered before the label. */
+    icon?: string | StaticIconComponent;
+    /** Browser tooltip for the item. */
+    title?: string;
+    /** Disable selection. */
+    disabled?: boolean;
+};
+export type DropdownMenuProps = {
+    /** Trigger label. Ignored when `trigger` is provided. */
+    label?: ReactNode;
+    /** Icon shown before the trigger label. Ignored when `trigger` is provided. */
+    icon?: string | StaticIconComponent;
+    /** Hide the trailing chevron on the default trigger. */
+    hideChevron?: boolean;
+    /** Variant forwarded to the default Button trigger. */
+    variant?: ButtonProps["variant"];
+    /** Size forwarded to the default Button trigger. */
+    size?: ButtonProps["size"];
+    /** Fully custom trigger. Receives no props; the menu wraps it with open state. */
+    trigger?: ReactNode;
+    /** Declarative menu items. Provide this or `children`, not both. */
+    items?: DropdownMenuItem[];
+    /** Custom menu content. Use `closeMenu` to dismiss after a selection. */
+    children?: (closeMenu: () => void) => ReactNode;
+    /** Horizontal alignment of the menu relative to the trigger. */
+    align?: "left" | "right";
+    /** Browser tooltip / accessible label for the default trigger. */
+    title?: string;
+    /** Classes applied to the wrapper. */
+    className?: string;
+    /** Classes applied to the floating menu. */
+    menuClassName?: string;
+};
+export declare function DropdownMenu({ label, icon, hideChevron, variant, size, trigger, items, children, align, title, className, menuClassName, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DropdownMenu.d.ts.map

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

@@ -0,0 +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;AAEpE,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,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,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,KAAK,EACL,SAAS,EACT,aAAa,GACd,EAAE,iBAAiB,2CAiFnB"}