@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/UI/Colors.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import ColorSwatch from "./ColorSwatch.js";
+import ControlledTooltip from "./ControlledTooltip.js";
+const Colors = ({ colors = [], isSquare = true, className = "", label }) => {
+  if (!colors || colors.length === 0) {
+    return /* @__PURE__ */ jsx(ColorSwatch, { name: label, className: classNames(isSquare && "rounded-md", className) });
+  }
+  const getColorLayout = () => {
+    const count = colors.length;
+    const widthPercentage = 100 / count;
+    return colors.map((colorItem, index) => /* @__PURE__ */ jsx(ControlledTooltip, { content: label ?? colorItem, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          backgroundColor: colorItem,
+          width: `${widthPercentage}%`,
+          height: "100%"
+        }
+      }
+    ) }, colorItem + index));
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames(
+        "flex overflow-hidden border border-border",
+        {
+          "rounded-md": isSquare,
+          "rounded-full": !isSquare
+        },
+        className
+      ),
+      children: getColorLayout()
+    }
+  );
+};
+export {
+  Colors as default
+};
+//# sourceMappingURL=Colors.js.map

package/dist/components/UI/Colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Colors.js","sources":["../../../src/components/UI/Colors.tsx"],"sourcesContent":["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport ColorSwatch from '@/components/UI/ColorSwatch';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\n\ninterface IColorsProps {\n  colors: Array<string> | undefined;\n  isSquare?: boolean;\n  className?: string;\n  label?: string;\n}\n\n/** Amostra de uma cor da biblioteca, com bandas quando a cor tem mais de um valor. */\nconst Colors: React.FC<IColorsProps> = ({ colors = [], isSquare = true, className = '', label }) => {\n  // Cor sem valor não some da tela: cai no cinza padrão da plataforma, com o nome no tooltip.\n  if (!colors || colors.length === 0) {\n    return <ColorSwatch name={label} className={classNames(isSquare && 'rounded-md', className)} />;\n  }\n\n  const getColorLayout = () => {\n    const count = colors.length;\n    const widthPercentage = 100 / count;\n\n    return colors.map((colorItem, index) => (\n      <ControlledTooltip key={colorItem + index} content={label ?? colorItem}>\n        <div\n          style={{\n            backgroundColor: colorItem,\n            width: `${widthPercentage}%`,\n            height: '100%',\n          }}\n        />\n      </ControlledTooltip>\n    ));\n  };\n\n  return (\n    <div\n      className={classNames(\n        'flex overflow-hidden border border-border',\n        {\n          'rounded-md': isSquare,\n          'rounded-full': !isSquare,\n        },\n        className,\n      )}\n    >\n      {getColorLayout()}\n    </div>\n  );\n};\n\nexport default Colors;\n"],"names":[],"mappings":";;;;AAcA,MAAM,SAAiC,CAAC,EAAE,SAAS,IAAI,WAAW,MAAM,YAAY,IAAI,YAAY;AAElG,MAAI,CAAC,UAAU,OAAO,WAAW,GAAG;AAClC,WAAO,oBAAC,eAAY,MAAM,OAAO,WAAW,WAAW,YAAY,cAAc,SAAS,EAAA,CAAG;AAAA,EAC/F;AAEA,QAAM,iBAAiB,MAAM;AAC3B,UAAM,QAAQ,OAAO;AACrB,UAAM,kBAAkB,MAAM;AAE9B,WAAO,OAAO,IAAI,CAAC,WAAW,UAC5B,oBAAC,mBAAA,EAA0C,SAAS,SAAS,WAC3D,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,iBAAiB;AAAA,UACjB,OAAO,GAAG,eAAe;AAAA,UACzB,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,IAAA,KANoB,YAAY,KAQpC,CACD;AAAA,EACH;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,UACE,cAAc;AAAA,UACd,gBAAgB,CAAC;AAAA,QAAA;AAAA,QAEnB;AAAA,MAAA;AAAA,MAGD,UAAA,eAAA;AAAA,IAAe;AAAA,EAAA;AAGtB;"}

package/dist/components/UI/ControlledAccordion.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+interface IControlledAccordionRootProps {
+    open: boolean;
+    children: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+export declare const ControlledAccordionRoot: React.FC<IControlledAccordionRootProps>;
+interface IControlledAccordionHeaderProps {
+    onClick?: () => void;
+    children: React.ReactNode;
+    className?: string;
+    tabIndex?: number;
+}
+/**
+ * Rendered as a div with role="button", not a native button: several headers in this repo
+ * carry their own buttons (rename, visibility, drag handle), and a button inside a button
+ * is invalid HTML that silently breaks the inner controls.
+ */
+export declare const ControlledAccordionHeader: React.FC<IControlledAccordionHeaderProps>;
+interface IControlledAccordionBodyProps {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const ControlledAccordionBody: React.FC<IControlledAccordionBodyProps>;
+interface IControlledAccordionProps {
+    open: boolean;
+    onToggle: () => void;
+    header: React.ReactNode;
+    children: React.ReactNode;
+    icon?: React.ReactNode;
+    className?: string;
+    headerClassName?: string;
+    bodyClassName?: string;
+}
+declare const ControlledAccordion: React.FC<IControlledAccordionProps>;
+export default ControlledAccordion;

package/dist/components/UI/ControlledAccordion.js

@@ -0,0 +1,95 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import classNames from "classnames";
+import { mergeClasses } from "../../helpers/mergeClasses.js";
+import ControlledCollapse from "./ControlledCollapse.js";
+import { MaterialSymbol } from "./MaterialSymbol/index.js";
+const AccordionContext = createContext({ open: false });
+const ControlledAccordionRoot = ({
+  open,
+  children,
+  icon,
+  disabled = false,
+  className
+}) => /* @__PURE__ */ jsx(AccordionContext.Provider, { value: { open, icon, disabled }, children: /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: mergeClasses(
+      classNames("relative block w-full", { "pointer-events-none opacity-50": disabled }),
+      className
+    ),
+    children
+  }
+) });
+const ControlledAccordionHeader = ({
+  onClick,
+  children,
+  className,
+  tabIndex
+}) => {
+  const { open, icon } = useContext(AccordionContext);
+  const isInteractive = Boolean(onClick);
+  const handleKeyDown = (event) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    if (event.target !== event.currentTarget) return;
+    event.preventDefault();
+    onClick?.();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: isInteractive ? "button" : void 0,
+      tabIndex: tabIndex ?? (isInteractive ? 0 : void 0),
+      "aria-expanded": isInteractive ? open : void 0,
+      onClick,
+      onKeyDown: handleKeyDown,
+      className: mergeClasses(
+        "flex w-full select-none items-center justify-between border-b border-border-subtle py-4 text-left",
+        "text-xl font-semibold leading-snug text-foreground-muted transition-colors hover:text-foreground",
+        classNames({ "text-foreground": open }),
+        className
+      ),
+      children: [
+        children,
+        icon ?? /* @__PURE__ */ jsx(
+          MaterialSymbol,
+          {
+            icon: "expand_more",
+            size: 20,
+            className: classNames("ml-4 shrink-0 transition-transform duration-base", { "rotate-180": open })
+          }
+        )
+      ]
+    }
+  );
+};
+const ControlledAccordionBody = ({ children, className }) => {
+  const { open } = useContext(AccordionContext);
+  return /* @__PURE__ */ jsx(ControlledCollapse, { open, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: mergeClasses("block w-full py-4 text-sm font-light leading-normal text-foreground-muted", className),
+      children
+    }
+  ) });
+};
+const ControlledAccordion = ({
+  open,
+  onToggle,
+  header,
+  children,
+  icon,
+  className,
+  headerClassName,
+  bodyClassName
+}) => /* @__PURE__ */ jsxs(ControlledAccordionRoot, { open, icon, className, children: [
+  /* @__PURE__ */ jsx(ControlledAccordionHeader, { onClick: onToggle, className: headerClassName, children: header }),
+  /* @__PURE__ */ jsx(ControlledAccordionBody, { className: bodyClassName, children })
+] });
+export {
+  ControlledAccordionBody,
+  ControlledAccordionHeader,
+  ControlledAccordionRoot,
+  ControlledAccordion as default
+};
+//# sourceMappingURL=ControlledAccordion.js.map

package/dist/components/UI/ControlledAccordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledAccordion.js","sources":["../../../src/components/UI/ControlledAccordion.tsx"],"sourcesContent":["import React, { createContext, useContext } from 'react';\nimport classNames from 'classnames';\n\nimport { mergeClasses } from '@/helpers/mergeClasses';\n\nimport ControlledCollapse from './ControlledCollapse';\nimport { MaterialSymbol } from './MaterialSymbol';\n\ninterface IAccordionContext {\n  open: boolean;\n  icon?: React.ReactNode;\n  disabled?: boolean;\n}\n\nconst AccordionContext = createContext<IAccordionContext>({ open: false });\n\ninterface IControlledAccordionRootProps {\n  open: boolean;\n  children: React.ReactNode;\n  icon?: React.ReactNode;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport const ControlledAccordionRoot: React.FC<IControlledAccordionRootProps> = ({\n  open,\n  children,\n  icon,\n  disabled = false,\n  className,\n}) => (\n  <AccordionContext.Provider value={{ open, icon, disabled }}>\n    <div\n      className={mergeClasses(\n        classNames('relative block w-full', { 'pointer-events-none opacity-50': disabled }),\n        className,\n      )}\n    >\n      {children}\n    </div>\n  </AccordionContext.Provider>\n);\n\ninterface IControlledAccordionHeaderProps {\n  onClick?: () => void;\n  children: React.ReactNode;\n  className?: string;\n  tabIndex?: number;\n}\n\n/**\n * Rendered as a div with role=\"button\", not a native button: several headers in this repo\n * carry their own buttons (rename, visibility, drag handle), and a button inside a button\n * is invalid HTML that silently breaks the inner controls.\n */\nexport const ControlledAccordionHeader: React.FC<IControlledAccordionHeaderProps> = ({\n  onClick,\n  children,\n  className,\n  tabIndex,\n}) => {\n  const { open, icon } = useContext(AccordionContext);\n  const isInteractive = Boolean(onClick);\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== 'Enter' && event.key !== ' ') return;\n    if (event.target !== event.currentTarget) return;\n    event.preventDefault();\n    onClick?.();\n  };\n\n  return (\n    <div\n      role={isInteractive ? 'button' : undefined}\n      tabIndex={tabIndex ?? (isInteractive ? 0 : undefined)}\n      aria-expanded={isInteractive ? open : undefined}\n      onClick={onClick}\n      onKeyDown={handleKeyDown}\n      className={mergeClasses(\n        'flex w-full select-none items-center justify-between border-b border-border-subtle py-4 text-left',\n        'text-xl font-semibold leading-snug text-foreground-muted transition-colors hover:text-foreground',\n        classNames({ 'text-foreground': open }),\n        className,\n      )}\n    >\n      {children}\n\n      {icon ?? (\n        <MaterialSymbol\n          icon=\"expand_more\"\n          size={20}\n          className={classNames('ml-4 shrink-0 transition-transform duration-base', { 'rotate-180': open })}\n        />\n      )}\n    </div>\n  );\n};\n\ninterface IControlledAccordionBodyProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const ControlledAccordionBody: React.FC<IControlledAccordionBodyProps> = ({ children, className }) => {\n  const { open } = useContext(AccordionContext);\n\n  return (\n    <ControlledCollapse open={open}>\n      <div\n        className={mergeClasses('block w-full py-4 text-sm font-light leading-normal text-foreground-muted', className)}\n      >\n        {children}\n      </div>\n    </ControlledCollapse>\n  );\n};\n\ninterface IControlledAccordionProps {\n  open: boolean;\n  onToggle: () => void;\n  header: React.ReactNode;\n  children: React.ReactNode;\n  icon?: React.ReactNode;\n  className?: string;\n  headerClassName?: string;\n  bodyClassName?: string;\n}\n\nconst ControlledAccordion: React.FC<IControlledAccordionProps> = ({\n  open,\n  onToggle,\n  header,\n  children,\n  icon,\n  className,\n  headerClassName,\n  bodyClassName,\n}) => (\n  <ControlledAccordionRoot open={open} icon={icon} className={className}>\n    <ControlledAccordionHeader onClick={onToggle} className={headerClassName}>\n      {header}\n    </ControlledAccordionHeader>\n    <ControlledAccordionBody className={bodyClassName}>{children}</ControlledAccordionBody>\n  </ControlledAccordionRoot>\n);\n\nexport default ControlledAccordion;\n"],"names":[],"mappings":";;;;;;AAcA,MAAM,mBAAmB,cAAiC,EAAE,MAAM,OAAO;AAUlE,MAAM,0BAAmE,CAAC;AAAA,EAC/E;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,MACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,EAAE,MAAM,MAAM,YAC9C,UAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT,WAAW,yBAAyB,EAAE,kCAAkC,UAAU;AAAA,MAClF;AAAA,IAAA;AAAA,IAGD;AAAA,EAAA;AACH,EAAA,CACF;AAeK,MAAM,4BAAuE,CAAC;AAAA,EACnF;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,SAAS,WAAW,gBAAgB;AAClD,QAAM,gBAAgB,QAAQ,OAAO;AAErC,QAAM,gBAAgB,CAAC,UAA+C;AACpE,QAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IAAK;AAChD,QAAI,MAAM,WAAW,MAAM,cAAe;AAC1C,UAAM,eAAA;AACN,cAAA;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM,gBAAgB,WAAW;AAAA,MACjC,UAAU,aAAa,gBAAgB,IAAI;AAAA,MAC3C,iBAAe,gBAAgB,OAAO;AAAA,MACtC;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,WAAW,EAAE,mBAAmB,MAAM;AAAA,QACtC;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAA;AAAA,QAEA,QACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAM;AAAA,YACN,WAAW,WAAW,oDAAoD,EAAE,cAAc,MAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MAClG;AAAA,IAAA;AAAA,EAAA;AAIR;AAOO,MAAM,0BAAmE,CAAC,EAAE,UAAU,gBAAgB;AAC3G,QAAM,EAAE,KAAA,IAAS,WAAW,gBAAgB;AAE5C,SACE,oBAAC,sBAAmB,MAClB,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,aAAa,6EAA6E,SAAS;AAAA,MAE7G;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;AAaA,MAAM,sBAA2D,CAAC;AAAA,EAChE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE,qBAAC,yBAAA,EAAwB,MAAY,MAAY,WAC/C,UAAA;AAAA,EAAA,oBAAC,2BAAA,EAA0B,SAAS,UAAU,WAAW,iBACtD,UAAA,QACH;AAAA,EACA,oBAAC,yBAAA,EAAwB,WAAW,eAAgB,SAAA,CAAS;AAAA,EAAA,CAC/D;"}

package/dist/components/UI/ControlledCollapse.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+interface IControlledCollapseProps {
+    open: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Height is measured from the content node and written to the wrapper, so the transition
+ * always has a numeric start and end. The observer watches the CONTENT, whose height is
+ * unconstrained, so updating the wrapper cannot feed back into it.
+ *
+ * A closed collapse is `inert`: `height: 0` with `overflow: hidden` still leaves whatever is
+ * inside reachable by Tab, so without it a keyboard lands on controls nobody can see, and
+ * `aria-hidden` around focusable content is itself an ARIA violation. Set through the DOM
+ * because React 18 does not type the attribute.
+ */
+declare const ControlledCollapse: React.FC<IControlledCollapseProps>;
+export default ControlledCollapse;

package/dist/components/UI/ControlledCollapse.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { mergeClasses } from "../../helpers/mergeClasses.js";
+const ControlledCollapse = ({ open, children, className }) => {
+  const wrapperRef = useRef(null);
+  const contentRef = useRef(null);
+  const [height, setHeight] = useState(0);
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return;
+    if (open) wrapper.removeAttribute("inert");
+    else wrapper.setAttribute("inert", "");
+  }, [open]);
+  useEffect(() => {
+    const content = contentRef.current;
+    if (!content) return void 0;
+    if (!open) {
+      setHeight(0);
+      return void 0;
+    }
+    setHeight(content.scrollHeight);
+    const observer = new ResizeObserver(() => setHeight(content.scrollHeight));
+    observer.observe(content);
+    return () => observer.disconnect();
+  }, [open]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: wrapperRef,
+      style: { height },
+      "aria-hidden": !open,
+      className: mergeClasses("overflow-hidden transition-[height] duration-slow ease-enter", className),
+      children: /* @__PURE__ */ jsx("div", { ref: contentRef, children })
+    }
+  );
+};
+export {
+  ControlledCollapse as default
+};
+//# sourceMappingURL=ControlledCollapse.js.map

package/dist/components/UI/ControlledCollapse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledCollapse.js","sources":["../../../src/components/UI/ControlledCollapse.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport { mergeClasses } from '@/helpers/mergeClasses';\n\ninterface IControlledCollapseProps {\n  open: boolean;\n  children: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Height is measured from the content node and written to the wrapper, so the transition\n * always has a numeric start and end. The observer watches the CONTENT, whose height is\n * unconstrained, so updating the wrapper cannot feed back into it.\n *\n * A closed collapse is `inert`: `height: 0` with `overflow: hidden` still leaves whatever is\n * inside reachable by Tab, so without it a keyboard lands on controls nobody can see, and\n * `aria-hidden` around focusable content is itself an ARIA violation. Set through the DOM\n * because React 18 does not type the attribute.\n */\nconst ControlledCollapse: React.FC<IControlledCollapseProps> = ({ open, children, className }) => {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [height, setHeight] = useState(0);\n\n  useEffect(() => {\n    const wrapper = wrapperRef.current;\n    if (!wrapper) return;\n    if (open) wrapper.removeAttribute('inert');\n    else wrapper.setAttribute('inert', '');\n  }, [open]);\n\n  useEffect(() => {\n    const content = contentRef.current;\n    if (!content) return undefined;\n\n    if (!open) {\n      setHeight(0);\n      return undefined;\n    }\n\n    setHeight(content.scrollHeight);\n\n    const observer = new ResizeObserver(() => setHeight(content.scrollHeight));\n    observer.observe(content);\n\n    return () => observer.disconnect();\n  }, [open]);\n\n  return (\n    <div\n      ref={wrapperRef}\n      style={{ height }}\n      aria-hidden={!open}\n      className={mergeClasses('overflow-hidden transition-[height] duration-slow ease-enter', className)}\n    >\n      <div ref={contentRef}>{children}</div>\n    </div>\n  );\n};\n\nexport default ControlledCollapse;\n"],"names":[],"mappings":";;;AAoBA,MAAM,qBAAyD,CAAC,EAAE,MAAM,UAAU,gBAAgB;AAChG,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,CAAC;AAEtC,YAAU,MAAM;AACd,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC,QAAS;AACd,QAAI,KAAM,SAAQ,gBAAgB,OAAO;AAAA,QACpC,SAAQ,aAAa,SAAS,EAAE;AAAA,EACvC,GAAG,CAAC,IAAI,CAAC;AAET,YAAU,MAAM;AACd,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC,QAAS,QAAO;AAErB,QAAI,CAAC,MAAM;AACT,gBAAU,CAAC;AACX,aAAO;AAAA,IACT;AAEA,cAAU,QAAQ,YAAY;AAE9B,UAAM,WAAW,IAAI,eAAe,MAAM,UAAU,QAAQ,YAAY,CAAC;AACzE,aAAS,QAAQ,OAAO;AAExB,WAAO,MAAM,SAAS,WAAA;AAAA,EACxB,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,OAAO,EAAE,OAAA;AAAA,MACT,eAAa,CAAC;AAAA,MACd,WAAW,aAAa,gEAAgE,SAAS;AAAA,MAEjG,UAAA,oBAAC,OAAA,EAAI,KAAK,YAAa,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGtC;"}

package/dist/components/UI/ControlledMenu.d.ts

@@ -0,0 +1,79 @@
+import { default as React } from 'react';
+import { SymbolCodepoints } from './MaterialSymbol';
+import { TFloatingPlacement } from '../../hooks/useAnchoredFloating';
+export type TMenuPlacement = TFloatingPlacement;
+export type TMenuItemTone = 'default' | 'danger';
+export interface IMenuDismissConfig {
+    /** Closes the menu when an item is pressed. Multi-select surfaces pass false. */
+    itemPress?: boolean;
+    escapeKey?: boolean;
+    outsidePress?: boolean;
+}
+export interface IControlledMenuItem {
+    key: string;
+    label: string;
+    icon?: SymbolCodepoints;
+    hint?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    tone?: TMenuItemTone;
+}
+interface IControlledMenuRootProps {
+    children: React.ReactNode;
+    open?: boolean;
+    handler?: (open: boolean) => void;
+    placement?: TMenuPlacement;
+    offsetPx?: number;
+    dismiss?: IMenuDismissConfig;
+    matchTriggerWidth?: boolean;
+}
+export declare const ControlledMenuRoot: React.FC<IControlledMenuRootProps>;
+/**
+ * Repassa ao filho o que ele recebe de fora, além do que injeta.
+ *
+ * O gatilho é o alvo natural de um `ControlledTooltip`, e o tooltip se prende clonando o filho e
+ * injetando `onPointerEnter`. Aceitando só `children`, este componente engolia essa injeção e o
+ * tooltip simplesmente nunca abria, mesmo com a ordem que a documentação manda usar
+ * (tooltip POR FORA do handler). Os `onClick` são encadeados: o de fora roda antes de abrir.
+ */
+export declare const ControlledMenuHandler: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    /**
+     * Leaves the popup ARIA to the child: set it when the real trigger is an element INSIDE the
+     * child that owns its own role (the select's combobox input), so the wrapper does not
+     * claim `aria-haspopup="menu"` for a listbox.
+     */
+    skipTriggerAria?: boolean;
+} & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+interface IControlledMenuListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'onAnimationEnd' | 'onAnimationIteration'> {
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const ControlledMenuList: React.ForwardRefExoticComponent<IControlledMenuListProps & React.RefAttributes<HTMLDivElement>>;
+interface IControlledMenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {
+    children: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+}
+export declare const ControlledMenuItem: React.FC<IControlledMenuItemProps>;
+interface IControlledMenuProps {
+    trigger: React.ReactNode;
+    items?: Array<IControlledMenuItem>;
+    children?: React.ReactNode;
+    triggerTooltip?: string;
+    placement?: TMenuPlacement;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    dismissOnItemClick?: boolean;
+    listClassName?: string;
+    tooltipClassName?: string;
+    listRef?: React.Ref<HTMLDivElement>;
+}
+/**
+ * A tooltip on the trigger must sit OUTSIDE the handler: the handler clones its child to
+ * inject the click handler and the reference ref, and a tooltip in that position swallows
+ * both, so the menu stops opening.
+ */
+declare const ControlledMenu: React.FC<IControlledMenuProps>;
+export default ControlledMenu;

package/dist/components/UI/ControlledMenu.js

@@ -0,0 +1,234 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import React, { createContext, isValidElement, cloneElement, useEffect, useContext, useId, useState, useCallback, useMemo } from "react";
+import classNames from "classnames";
+import { AnimatePresence, motion } from "motion/react";
+import { createPortal } from "react-dom";
+import ControlledTooltip from "./ControlledTooltip.js";
+import { MaterialSymbol } from "./MaterialSymbol/index.js";
+import { composeRefs } from "../../helpers/composeRefs.js";
+import { LAYERED_SURFACE_ATTRIBUTE, isPressOnLayeredSurface } from "../../helpers/layeredSurfaces.js";
+import { mergeClasses } from "../../helpers/mergeClasses.js";
+import { getPortalHost } from "../../helpers/portalHost.js";
+import { useAnchoredFloating } from "../../hooks/useAnchoredFloating.js";
+import { floatingVariants } from "../../motion/motionPresets.js";
+import "../../motion/motionTokens.js";
+const MenuContext = createContext(null);
+const useMenuContext = () => {
+  const context = useContext(MenuContext);
+  if (!context) throw new Error("Menu parts must be rendered inside ControlledMenuRoot");
+  return context;
+};
+const ControlledMenuRoot = ({
+  children,
+  open,
+  handler,
+  placement = "bottom-start",
+  offsetPx = 6,
+  dismiss,
+  matchTriggerWidth = false
+}) => {
+  const listId = useId();
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const isControlled = open !== void 0;
+  const isOpen = isControlled ? Boolean(open) : uncontrolledOpen;
+  const setOpen = useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledOpen(next);
+      handler?.(next);
+    },
+    [isControlled, handler]
+  );
+  const { setReference, setFloating, floatingRef, referenceRef } = useAnchoredFloating({
+    open: isOpen,
+    placement,
+    offsetPx,
+    matchReferenceWidth: matchTriggerWidth
+  });
+  const value = useMemo(
+    () => ({ open: isOpen, setOpen, dismiss, listId, setReference, setFloating, floatingRef, referenceRef }),
+    [isOpen, setOpen, dismiss, listId, setReference, setFloating, floatingRef, referenceRef]
+  );
+  return /* @__PURE__ */ jsx(MenuContext.Provider, { value, children });
+};
+const ControlledMenuHandler = React.forwardRef(({ children, onClick: onOuterClick, skipTriggerAria = false, ...rest }, forwardedRef) => {
+  const { open, setOpen, setReference, listId } = useMenuContext();
+  if (!isValidElement(children)) return /* @__PURE__ */ jsx(Fragment, { children });
+  const child = children;
+  const triggerAria = skipTriggerAria ? {} : { "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": open ? listId : void 0 };
+  return cloneElement(child, {
+    ...rest,
+    ref: composeRefs(setReference, forwardedRef, child.ref),
+    ...triggerAria,
+    onClick: (event) => {
+      onOuterClick?.(event);
+      child.props.onClick?.(event);
+      setOpen(!open);
+    }
+  });
+});
+ControlledMenuHandler.displayName = "ControlledMenuHandler";
+const FOCUSABLE_ITEM_SELECTOR = '[role="menuitem"]:not([aria-disabled="true"])';
+const ControlledMenuList = React.forwardRef(
+  ({ children, className, onClick, onKeyDown, ...rest }, forwardedRef) => {
+    const { open, setOpen, dismiss, listId, setFloating, floatingRef, referenceRef } = useMenuContext();
+    useEffect(() => {
+      if (!open) return void 0;
+      const handleKeyDown = (event) => {
+        if (event.key !== "Escape" || dismiss?.escapeKey === false) return;
+        setOpen(false);
+      };
+      const handlePointerDown = (event) => {
+        if (dismiss?.outsidePress === false) return;
+        const target = event.target;
+        if (!target) return;
+        if (floatingRef.current?.contains(target) || referenceRef.current?.contains(target)) return;
+        if (isPressOnLayeredSurface(target, floatingRef.current)) return;
+        setOpen(false);
+      };
+      document.addEventListener("keydown", handleKeyDown);
+      document.addEventListener("pointerdown", handlePointerDown, true);
+      return () => {
+        document.removeEventListener("keydown", handleKeyDown);
+        document.removeEventListener("pointerdown", handlePointerDown, true);
+      };
+    }, [open, setOpen, dismiss, floatingRef, referenceRef]);
+    const handleListKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+      const list = floatingRef.current;
+      if (!list) return;
+      const items = Array.from(list.querySelectorAll(FOCUSABLE_ITEM_SELECTOR));
+      if (items.length === 0) return;
+      event.preventDefault();
+      const currentIndex = items.indexOf(document.activeElement);
+      const step = event.key === "ArrowDown" ? 1 : -1;
+      const nextIndex = currentIndex < 0 ? 0 : (currentIndex + step + items.length) % items.length;
+      items[nextIndex]?.focus();
+    };
+    const portalHost = getPortalHost();
+    if (portalHost === null) return null;
+    return createPortal(
+      /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          id: listId,
+          variants: floatingVariants,
+          initial: "hidden",
+          animate: "visible",
+          exit: "exit",
+          role: "menu",
+          ...LAYERED_SURFACE_ATTRIBUTE,
+          ref: (node) => {
+            setFloating(node);
+            if (typeof forwardedRef === "function") forwardedRef(node);
+            else if (forwardedRef) forwardedRef.current = node;
+          },
+          onKeyDown: handleListKeyDown,
+          onClick: (event) => {
+            onClick?.(event);
+            if (dismiss?.itemPress === false) return;
+            const target = event.target;
+            if (target?.closest('[role="menuitem"]')) setOpen(false);
+          },
+          ...rest,
+          className: mergeClasses(
+            "fixed left-0 top-0 z-[9999] min-w-44 overflow-auto rounded-lg border border-border p-1 text-sm text-foreground glass",
+            className
+          ),
+          children
+        },
+        "menu-list"
+      ) }),
+      portalHost
+    );
+  }
+);
+ControlledMenuList.displayName = "ControlledMenuList";
+const ControlledMenuItem = ({
+  children,
+  className,
+  disabled = false,
+  onClick,
+  ...rest
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    role: "menuitem",
+    tabIndex: disabled ? -1 : 0,
+    "aria-disabled": disabled || void 0,
+    onClick: disabled ? void 0 : onClick,
+    onKeyDown: (event) => {
+      if (disabled) return;
+      if (event.key !== "Enter" && event.key !== " ") return;
+      event.preventDefault();
+      event.currentTarget.click();
+    },
+    ...rest,
+    className: mergeClasses(
+      classNames(
+        "flex w-full cursor-pointer select-none items-center rounded-md px-3 py-2 text-sm outline-none",
+        "transition-colors hover:bg-muted-hover focus:bg-muted-hover",
+        { "pointer-events-none opacity-50": disabled }
+      ),
+      className
+    ),
+    children
+  }
+);
+const ITEM_TONE_CLASS = {
+  default: "text-foreground-muted",
+  danger: "text-danger-emphasis"
+};
+const ICON_TONE_CLASS = {
+  default: "text-foreground-subtle",
+  danger: "text-danger-emphasis"
+};
+const ControlledMenu = ({
+  trigger,
+  items,
+  children,
+  triggerTooltip,
+  placement = "bottom-start",
+  open,
+  onOpenChange,
+  disabled = false,
+  dismissOnItemClick = true,
+  listClassName,
+  tooltipClassName,
+  listRef
+}) => {
+  const menuItems = useMemo(() => Array.isArray(items) ? items : [], [items]);
+  const dismiss = useMemo(() => ({ itemPress: dismissOnItemClick }), [dismissOnItemClick]);
+  const handle = /* @__PURE__ */ jsx(ControlledMenuHandler, { children: trigger });
+  if (disabled) return /* @__PURE__ */ jsx(Fragment, { children: trigger });
+  return /* @__PURE__ */ jsxs(ControlledMenuRoot, { open, handler: onOpenChange, placement, dismiss, children: [
+    triggerTooltip ? /* @__PURE__ */ jsx(ControlledTooltip, { content: triggerTooltip, className: tooltipClassName, children: handle }) : handle,
+    /* @__PURE__ */ jsx(ControlledMenuList, { ref: listRef, className: listClassName, children: children ?? menuItems.map((item) => {
+      const tone = item.tone ?? "default";
+      return /* @__PURE__ */ jsxs(
+        ControlledMenuItem,
+        {
+          disabled: item.disabled,
+          onClick: item.onClick,
+          className: classNames("items-start gap-x-2", ITEM_TONE_CLASS[tone]),
+          children: [
+            item.icon && /* @__PURE__ */ jsx(MaterialSymbol, { icon: item.icon, size: 16, className: ICON_TONE_CLASS[tone] }),
+            /* @__PURE__ */ jsxs("span", { className: "flex flex-col items-start gap-y-0.5", children: [
+              /* @__PURE__ */ jsx("span", { children: item.label }),
+              item.hint && /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground-subtle", children: item.hint })
+            ] })
+          ]
+        },
+        item.key
+      );
+    }) })
+  ] });
+};
+export {
+  ControlledMenuHandler,
+  ControlledMenuItem,
+  ControlledMenuList,
+  ControlledMenuRoot,
+  ControlledMenu as default
+};
+//# sourceMappingURL=ControlledMenu.js.map

package/dist/components/UI/ControlledMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledMenu.js","sources":["../../../src/components/UI/ControlledMenu.tsx"],"sourcesContent":["import React, {\n  cloneElement,\n  createContext,\n  isValidElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { AnimatePresence, motion } from 'motion/react';\nimport { createPortal } from 'react-dom';\n\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\nimport { composeRefs } from '@/helpers/composeRefs';\nimport { isPressOnLayeredSurface, LAYERED_SURFACE_ATTRIBUTE } from '@/helpers/layeredSurfaces';\nimport { mergeClasses } from '@/helpers/mergeClasses';\nimport { getPortalHost } from '@/helpers/portalHost';\nimport { TFloatingPlacement, useAnchoredFloating } from '@/hooks/useAnchoredFloating';\nimport { floatingVariants } from '@/motion';\n\nexport type TMenuPlacement = TFloatingPlacement;\nexport type TMenuItemTone = 'default' | 'danger';\n\nexport interface IMenuDismissConfig {\n  /** Closes the menu when an item is pressed. Multi-select surfaces pass false. */\n  itemPress?: boolean;\n  escapeKey?: boolean;\n  outsidePress?: boolean;\n}\n\nexport interface IControlledMenuItem {\n  key: string;\n  label: string;\n  icon?: SymbolCodepoints;\n  hint?: string;\n  onClick?: () => void;\n  disabled?: boolean;\n  tone?: TMenuItemTone;\n}\n\ninterface IMenuContext {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  dismiss?: IMenuDismissConfig;\n  listId: string;\n  setReference: (node: HTMLElement | null) => void;\n  setFloating: (node: HTMLElement | null) => void;\n  floatingRef: React.MutableRefObject<HTMLElement | null>;\n  referenceRef: React.MutableRefObject<HTMLElement | null>;\n}\n\nconst MenuContext = createContext<IMenuContext | null>(null);\n\nconst useMenuContext = (): IMenuContext => {\n  const context = useContext(MenuContext);\n  if (!context) throw new Error('Menu parts must be rendered inside ControlledMenuRoot');\n  return context;\n};\n\ninterface IControlledMenuRootProps {\n  children: React.ReactNode;\n  open?: boolean;\n  handler?: (open: boolean) => void;\n  placement?: TMenuPlacement;\n  offsetPx?: number;\n  dismiss?: IMenuDismissConfig;\n  matchTriggerWidth?: boolean;\n}\n\nexport const ControlledMenuRoot: React.FC<IControlledMenuRootProps> = ({\n  children,\n  open,\n  handler,\n  placement = 'bottom-start',\n  offsetPx = 6,\n  dismiss,\n  matchTriggerWidth = false,\n}) => {\n  const listId = useId();\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n\n  const isControlled = open !== undefined;\n  const isOpen = isControlled ? Boolean(open) : uncontrolledOpen;\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (!isControlled) setUncontrolledOpen(next);\n      handler?.(next);\n    },\n    [isControlled, handler],\n  );\n\n  const { setReference, setFloating, floatingRef, referenceRef } = useAnchoredFloating({\n    open: isOpen,\n    placement,\n    offsetPx,\n    matchReferenceWidth: matchTriggerWidth,\n  });\n\n  const value = useMemo(\n    () => ({ open: isOpen, setOpen, dismiss, listId, setReference, setFloating, floatingRef, referenceRef }),\n    [isOpen, setOpen, dismiss, listId, setReference, setFloating, floatingRef, referenceRef],\n  );\n\n  return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>;\n};\n\ninterface IHandlerChildProps {\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  ref?: React.Ref<HTMLElement>;\n}\n\n/**\n * Repassa ao filho o que ele recebe de fora, além do que injeta.\n *\n * O gatilho é o alvo natural de um `ControlledTooltip`, e o tooltip se prende clonando o filho e\n * injetando `onPointerEnter`. Aceitando só `children`, este componente engolia essa injeção e o\n * tooltip simplesmente nunca abria, mesmo com a ordem que a documentação manda usar\n * (tooltip POR FORA do handler). Os `onClick` são encadeados: o de fora roda antes de abrir.\n */\nexport const ControlledMenuHandler = React.forwardRef<\n  HTMLElement,\n  {\n    children: React.ReactNode;\n    /**\n     * Leaves the popup ARIA to the child: set it when the real trigger is an element INSIDE the\n     * child that owns its own role (the select's combobox input), so the wrapper does not\n     * claim `aria-haspopup=\"menu\"` for a listbox.\n     */\n    skipTriggerAria?: boolean;\n  } & React.HTMLAttributes<HTMLElement>\n>(({ children, onClick: onOuterClick, skipTriggerAria = false, ...rest }, forwardedRef) => {\n  const { open, setOpen, setReference, listId } = useMenuContext();\n\n  if (!isValidElement(children)) return <>{children}</>;\n\n  const child = children as React.ReactElement<IHandlerChildProps>;\n  const triggerAria = skipTriggerAria\n    ? {}\n    : { 'aria-haspopup': 'menu', 'aria-expanded': open, 'aria-controls': open ? listId : undefined };\n\n  return cloneElement(child, {\n    ...rest,\n    ref: composeRefs<HTMLElement>(setReference, forwardedRef, (child as { ref?: React.Ref<HTMLElement> }).ref),\n    ...triggerAria,\n    onClick: (event: React.MouseEvent<HTMLElement>) => {\n      onOuterClick?.(event);\n      child.props.onClick?.(event);\n      setOpen(!open);\n    },\n  } as IHandlerChildProps);\n});\n\nControlledMenuHandler.displayName = 'ControlledMenuHandler';\n\ninterface IControlledMenuListProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'className' | 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'onAnimationEnd' | 'onAnimationIteration'\n> {\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst FOCUSABLE_ITEM_SELECTOR = '[role=\"menuitem\"]:not([aria-disabled=\"true\"])';\n\nexport const ControlledMenuList = React.forwardRef<HTMLDivElement, IControlledMenuListProps>(\n  ({ children, className, onClick, onKeyDown, ...rest }, forwardedRef) => {\n    const { open, setOpen, dismiss, listId, setFloating, floatingRef, referenceRef } = useMenuContext();\n\n    useEffect(() => {\n      if (!open) return undefined;\n\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key !== 'Escape' || dismiss?.escapeKey === false) return;\n        setOpen(false);\n      };\n\n      const handlePointerDown = (event: PointerEvent) => {\n        if (dismiss?.outsidePress === false) return;\n        const target = event.target as Node | null;\n        if (!target) return;\n        if (floatingRef.current?.contains(target) || referenceRef.current?.contains(target)) return;\n        if (isPressOnLayeredSurface(target, floatingRef.current)) return;\n        setOpen(false);\n      };\n\n      document.addEventListener('keydown', handleKeyDown);\n      document.addEventListener('pointerdown', handlePointerDown, true);\n\n      return () => {\n        document.removeEventListener('keydown', handleKeyDown);\n        document.removeEventListener('pointerdown', handlePointerDown, true);\n      };\n    }, [open, setOpen, dismiss, floatingRef, referenceRef]);\n\n    const handleListKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n      if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;\n\n      const list = floatingRef.current;\n      if (!list) return;\n\n      const items = Array.from(list.querySelectorAll<HTMLElement>(FOCUSABLE_ITEM_SELECTOR));\n      if (items.length === 0) return;\n\n      event.preventDefault();\n      const currentIndex = items.indexOf(document.activeElement as HTMLElement);\n      const step = event.key === 'ArrowDown' ? 1 : -1;\n      const nextIndex = currentIndex < 0 ? 0 : (currentIndex + step + items.length) % items.length;\n      items[nextIndex]?.focus();\n    };\n\n    const portalHost = getPortalHost();\n    if (portalHost === null) return null;\n\n    return createPortal(\n      <AnimatePresence>\n        {open && (\n          <motion.div\n            key=\"menu-list\"\n            id={listId}\n            variants={floatingVariants}\n            initial=\"hidden\"\n            animate=\"visible\"\n            exit=\"exit\"\n            role=\"menu\"\n            {...LAYERED_SURFACE_ATTRIBUTE}\n            ref={(node) => {\n              setFloating(node);\n              if (typeof forwardedRef === 'function') forwardedRef(node);\n              else if (forwardedRef) forwardedRef.current = node;\n            }}\n            onKeyDown={handleListKeyDown}\n            onClick={(event) => {\n              onClick?.(event);\n              if (dismiss?.itemPress === false) return;\n              const target = event.target as HTMLElement | null;\n              if (target?.closest('[role=\"menuitem\"]')) setOpen(false);\n            }}\n            {...rest}\n            className={mergeClasses(\n              'fixed left-0 top-0 z-[9999] min-w-44 overflow-auto rounded-lg border border-border p-1 text-sm text-foreground glass',\n              className,\n            )}\n          >\n            {children}\n          </motion.div>\n        )}\n      </AnimatePresence>,\n      portalHost,\n    );\n  },\n);\n\nControlledMenuList.displayName = 'ControlledMenuList';\n\ninterface IControlledMenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {\n  children: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n}\n\nexport const ControlledMenuItem: React.FC<IControlledMenuItemProps> = ({\n  children,\n  className,\n  disabled = false,\n  onClick,\n  ...rest\n}) => (\n  <div\n    role=\"menuitem\"\n    tabIndex={disabled ? -1 : 0}\n    aria-disabled={disabled || undefined}\n    onClick={disabled ? undefined : onClick}\n    onKeyDown={(event) => {\n      if (disabled) return;\n      if (event.key !== 'Enter' && event.key !== ' ') return;\n      event.preventDefault();\n      (event.currentTarget as HTMLElement).click();\n    }}\n    {...rest}\n    className={mergeClasses(\n      classNames(\n        'flex w-full cursor-pointer select-none items-center rounded-md px-3 py-2 text-sm outline-none',\n        'transition-colors hover:bg-muted-hover focus:bg-muted-hover',\n        { 'pointer-events-none opacity-50': disabled },\n      ),\n      className,\n    )}\n  >\n    {children}\n  </div>\n);\n\ninterface IControlledMenuProps {\n  trigger: React.ReactNode;\n  items?: Array<IControlledMenuItem>;\n  children?: React.ReactNode;\n  triggerTooltip?: string;\n  placement?: TMenuPlacement;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  disabled?: boolean;\n  dismissOnItemClick?: boolean;\n  listClassName?: string;\n  tooltipClassName?: string;\n  listRef?: React.Ref<HTMLDivElement>;\n}\n\nconst ITEM_TONE_CLASS: Record<TMenuItemTone, string> = {\n  default: 'text-foreground-muted',\n  danger: 'text-danger-emphasis',\n};\n\nconst ICON_TONE_CLASS: Record<TMenuItemTone, string> = {\n  default: 'text-foreground-subtle',\n  danger: 'text-danger-emphasis',\n};\n\n/**\n * A tooltip on the trigger must sit OUTSIDE the handler: the handler clones its child to\n * inject the click handler and the reference ref, and a tooltip in that position swallows\n * both, so the menu stops opening.\n */\nconst ControlledMenu: React.FC<IControlledMenuProps> = ({\n  trigger,\n  items,\n  children,\n  triggerTooltip,\n  placement = 'bottom-start',\n  open,\n  onOpenChange,\n  disabled = false,\n  dismissOnItemClick = true,\n  listClassName,\n  tooltipClassName,\n  listRef,\n}) => {\n  const menuItems = useMemo(() => (Array.isArray(items) ? items : []), [items]);\n  const dismiss = useMemo(() => ({ itemPress: dismissOnItemClick }), [dismissOnItemClick]);\n  const handle = <ControlledMenuHandler>{trigger}</ControlledMenuHandler>;\n\n  if (disabled) return <>{trigger}</>;\n\n  return (\n    <ControlledMenuRoot open={open} handler={onOpenChange} placement={placement} dismiss={dismiss}>\n      {triggerTooltip ? (\n        <ControlledTooltip content={triggerTooltip} className={tooltipClassName}>\n          {handle}\n        </ControlledTooltip>\n      ) : (\n        handle\n      )}\n\n      <ControlledMenuList ref={listRef} className={listClassName}>\n        {children ??\n          menuItems.map((item) => {\n            const tone = item.tone ?? 'default';\n\n            return (\n              <ControlledMenuItem\n                key={item.key}\n                disabled={item.disabled}\n                onClick={item.onClick}\n                className={classNames('items-start gap-x-2', ITEM_TONE_CLASS[tone])}\n              >\n                {item.icon && <MaterialSymbol icon={item.icon} size={16} className={ICON_TONE_CLASS[tone]} />}\n\n                <span className=\"flex flex-col items-start gap-y-0.5\">\n                  <span>{item.label}</span>\n                  {item.hint && <span className=\"text-xs text-foreground-subtle\">{item.hint}</span>}\n                </span>\n              </ControlledMenuItem>\n            );\n          })}\n      </ControlledMenuList>\n    </ControlledMenuRoot>\n  );\n};\n\nexport default ControlledMenu;\n"],"names":[],"mappings":"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"}