eidos-ui 0.1.0

package/dist/chunk-BFYSYUA6.cjs

@@ -0,0 +1,125 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkKV2FG7ANcjs = require('./chunk-KV2FG7AN.cjs');
+
+
+var _chunk5TGBNYZKcjs = require('./chunk-5TGBNYZK.cjs');
+
+
+var _chunkTBMVUI7Scjs = require('./chunk-TBMVUI7S.cjs');
+
+
+var _chunkR5QPUQSIcjs = require('./chunk-R5QPUQSI.cjs');
+
+// src/components/Menu/Menu.component.tsx
+var _react = require('react');
+var _lucidereact = require('lucide-react');
+var _jsxruntime = require('react/jsx-runtime');
+var MenuPanel = ({ items, className = "", onItemClick }) => {
+  const handleItemClick = _react.useCallback.call(void 0, 
+    (item) => {
+      if (item.disabled) return;
+      if (item.onClick) {
+        item.onClick();
+      }
+      if (onItemClick) {
+        onItemClick(item);
+      }
+    },
+    [onItemClick]
+  );
+  const renderMenuItem = (item) => {
+    switch (item.type) {
+      case "item":
+        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          "li",
+          {
+            className: [
+              "eidos-menu-item",
+              item.disabled ? "eidos-menu-item--disabled" : "",
+              item.color ? `eidos-menu-item--${item.color}` : ""
+            ].filter(Boolean).join(" "),
+            onClick: () => handleItemClick(item),
+            children: [
+              item.icon && _chunkTBMVUI7Scjs.renderIcon.call(void 0, item.icon, "eidos-menu-icon"),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: `eidos-menu-label`, children: item.label }),
+              item.shortcut && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5TGBNYZKcjs.Kbd, { size: "sm", className: "eidos-menu-shortcut", children: item.shortcut })
+            ]
+          },
+          item.id
+        );
+      case "component":
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { className: `eidos-menu-component-item`, children: item.component }, item.id);
+      case "separator":
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { className: `eidos-menu-separator` }, item.id);
+      case "nested": {
+        const triggerElement = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `eidos-menu-nested-trigger`, children: [
+          item.icon && _chunkTBMVUI7Scjs.renderIcon.call(void 0, item.icon, "eidos-menu-icon"),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: `eidos-menu-label`, children: item.label }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.ChevronRight, { className: `eidos-menu-nested-arrow` })
+        ] });
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "li", { className: `eidos-menu-nested-item`, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunkKV2FG7ANcjs.Dropdown,
+          {
+            trigger: triggerElement,
+            content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuPanel, { items: item.items, onItemClick }),
+            placement: "right",
+            isNested: true,
+            fullWidth: true
+          }
+        ) }, item.id);
+      }
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { className: `eidos-menu ${className}`, children: items.map(renderMenuItem) });
+};
+var Menu = ({
+  trigger,
+  items,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight,
+  autoWidth = true,
+  triggerRef,
+  closeOnItemClick = true,
+  tooltip
+}) => {
+  const handleItemClick = _react.useCallback.call(void 0, 
+    (_item) => {
+      if (closeOnItemClick) {
+        setTimeout(() => {
+          const event = new MouseEvent("mousedown", {
+            bubbles: true,
+            cancelable: true,
+            view: window
+          });
+          document.dispatchEvent(event);
+        }, 10);
+      }
+    },
+    [closeOnItemClick]
+  );
+  const dropdown = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkKV2FG7ANcjs.Dropdown,
+    {
+      trigger,
+      content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuPanel, { items, onItemClick: handleItemClick }),
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight,
+      autoWidth,
+      triggerRef
+    }
+  );
+  return tooltip ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR5QPUQSIcjs.Tooltip, { message: tooltip, children: dropdown }) : dropdown;
+};
+
+
+
+
+exports.MenuPanel = MenuPanel; exports.Menu = Menu;
+//# sourceMappingURL=chunk-BFYSYUA6.cjs.map

package/dist/chunk-BFYSYUA6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-BFYSYUA6.cjs","../src/components/Menu/Menu.component.tsx"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACbA,8BAAmC;AACnC,2CAA6B;AAoCnB,+CAAA;AAxBH,IAAM,UAAA,EAAiC,CAAC,EAAE,KAAA,EAAO,UAAA,EAAY,EAAA,EAAI,YAAY,CAAA,EAAA,GAAM;AAExF,EAAA,MAAM,gBAAA,EAAkB,gCAAA;AAAA,IACtB,CAAC,IAAA,EAAA,GAAmB;AAClB,MAAA,GAAA,CAAI,IAAA,CAAK,QAAA,EAAU,MAAA;AAGnB,MAAA,GAAA,CAAI,IAAA,CAAK,OAAA,EAAS;AAChB,QAAA,IAAA,CAAK,OAAA,CAAQ,CAAA;AAAA,MACf;AAGA,MAAA,GAAA,CAAI,WAAA,EAAa;AACf,QAAA,WAAA,CAAY,IAAI,CAAA;AAAA,MAClB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,WAAW;AAAA,EACd,CAAA;AAGA,EAAA,MAAM,eAAA,EAAiB,CAAC,IAAA,EAAA,GAAwC;AAC9D,IAAA,OAAA,CAAQ,IAAA,CAAK,IAAA,EAAM;AAAA,MACjB,KAAK,MAAA;AACH,QAAA,uBACE,8BAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YAEC,SAAA,EAAW;AAAA,cACT,iBAAA;AAAA,cACA,IAAA,CAAK,SAAA,EAAW,4BAAA,EAA8B,EAAA;AAAA,cAC9C,IAAA,CAAK,MAAA,EAAQ,CAAA,iBAAA,EAAoB,IAAA,CAAK,KAAK,CAAA,EAAA;AAGlC,YAAA;AACwB,YAAA;AAElC,YAAA;AAAmC,cAAA;AACnB,8BAAA;AAEV,cAAA;AAEL,YAAA;AAAA,UAAA;AAfQ,UAAA;AAiBZ,QAAA;AAGC,MAAA;AAE4B,QAAA;AAK5B,MAAA;AACiC,QAAA;AAEvB,MAAA;AAEV,QAAA;AACqC,UAAA;AACnB,0BAAA;AACQ,0BAAA;AAC3B,QAAA;AAI6B,QAAA;AAC1B,UAAA;AAAA,UAAA;AACU,YAAA;AACW,YAAA;AACV,YAAA;AACA,YAAA;AACD,YAAA;AAAA,UAAA;AAEb,QAAA;AAEJ,MAAA;AAEA,MAAA;AACS,QAAA;AACX,IAAA;AACF,EAAA;AAEsB,EAAA;AACxB;AAEiD;AAC/C,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACA,EAAA;AACY,EAAA;AACZ,EAAA;AACmB,EAAA;AACnB,EAAA;AACI;AACoB,EAAA;AACD,IAAA;AAIG,MAAA;AAEH,QAAA;AAE2B,UAAA;AAC/B,YAAA;AACG,YAAA;AACN,YAAA;AACP,UAAA;AAC2B,UAAA;AACzB,QAAA;AACP,MAAA;AACF,IAAA;AACiB,IAAA;AACnB,EAAA;AAGE,EAAA;AAAC,IAAA;AAAA,IAAA;AACC,MAAA;AACkC,MAAA;AAClC,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AACA,MAAA;AAAA,IAAA;AACF,EAAA;AAGwB,EAAA;AAC5B;AD1B0D;AACA;AACA;AACA;AACA","file":"/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-BFYSYUA6.cjs","sourcesContent":[null,"import React, { useCallback } from 'react';\r\nimport { ChevronRight } from 'lucide-react';\r\nimport type { MenuProps, MenuItemType, MenuItem, MenuWrapperProps } from './Menu.types';\r\nimport { Dropdown } from '../Dropdown/Dropdown.component';\r\nimport { Tooltip } from '../Tooltip/Tooltip.component';\r\nimport { Kbd } from '../Kbd/Kbd.component';\r\nimport { renderIcon } from '../../utils';\r\n\r\n/**\r\n * MenuPanel - the bare menu list, without any trigger or dropdown wrapper.\r\n * Exported for use in SplitButton, ContextMenu, and other consumers that need\r\n * to render the menu content inside their own Dropdown / portal.\r\n */\r\nexport const MenuPanel: React.FC<MenuProps> = ({ items, className = '', onItemClick }) => {\r\n  // Handle menu item click\r\n  const handleItemClick = useCallback(\r\n    (item: MenuItem) => {\r\n      if (item.disabled) return;\r\n\r\n      // Execute the item's onClick handler first\r\n      if (item.onClick) {\r\n        item.onClick();\r\n      }\r\n\r\n      // Then call the onItemClick callback (which will close the dropdown)\r\n      if (onItemClick) {\r\n        onItemClick(item);\r\n      }\r\n    },\r\n    [onItemClick],\r\n  );\r\n\r\n  // Render individual menu item\r\n  const renderMenuItem = (item: MenuItemType): React.ReactNode => {\r\n    switch (item.type) {\r\n      case 'item':\r\n        return (\r\n          <li\r\n            key={item.id}\r\n            className={[\r\n              'eidos-menu-item',\r\n              item.disabled ? 'eidos-menu-item--disabled' : '',\r\n              item.color ? `eidos-menu-item--${item.color}` : '',\r\n            ]\r\n              .filter(Boolean)\r\n              .join(' ')}\r\n            onClick={() => handleItemClick(item)}\r\n          >\r\n            {item.icon && renderIcon(item.icon, 'eidos-menu-icon')}\r\n            <span className={`eidos-menu-label`}>{item.label}</span>\r\n            {item.shortcut && (\r\n              <Kbd size=\"sm\" className=\"eidos-menu-shortcut\">\r\n                {item.shortcut}\r\n              </Kbd>\r\n            )}\r\n          </li>\r\n        );\r\n\r\n      case 'component':\r\n        return (\r\n          <li key={item.id} className={`eidos-menu-component-item`}>\r\n            {item.component}\r\n          </li>\r\n        );\r\n\r\n      case 'separator':\r\n        return <li key={item.id} className={`eidos-menu-separator`} />;\r\n\r\n      case 'nested': {\r\n        const triggerElement = (\r\n          <div className={`eidos-menu-nested-trigger`}>\r\n            {item.icon && renderIcon(item.icon, 'eidos-menu-icon')}\r\n            <span className={`eidos-menu-label`}>{item.label}</span>\r\n            <ChevronRight className={`eidos-menu-nested-arrow`} />\r\n          </div>\r\n        );\r\n\r\n        return (\r\n          <li key={item.id} className={`eidos-menu-nested-item`}>\r\n            <Dropdown\r\n              trigger={triggerElement}\r\n              content={<MenuPanel items={item.items} onItemClick={onItemClick} />}\r\n              placement=\"right\"\r\n              isNested={true}\r\n              fullWidth\r\n            />\r\n          </li>\r\n        );\r\n      }\r\n\r\n      default:\r\n        return null;\r\n    }\r\n  };\r\n\r\n  return <ul className={`eidos-menu ${className}`}>{items.map(renderMenuItem)}</ul>;\r\n};\r\n\r\nexport const Menu: React.FC<MenuWrapperProps> = ({\r\n  trigger,\r\n  items,\r\n  minWidth,\r\n  maxWidth,\r\n  minHeight,\r\n  maxHeight,\r\n  autoWidth = true,\r\n  triggerRef,\r\n  closeOnItemClick = true,\r\n  tooltip,\r\n}) => {\r\n  const handleItemClick = useCallback(\r\n    (_item: MenuItem) => {\r\n      // Note: item.onClick is already called in MenuPanel's handleItemClick\r\n      // Here we only handle closing the dropdown if needed\r\n\r\n      if (closeOnItemClick) {\r\n        // Use a small delay to ensure the onClick handler completes\r\n        setTimeout(() => {\r\n          // Create a synthetic click event outside the dropdown to close it\r\n          const event = new MouseEvent('mousedown', {\r\n            bubbles: true,\r\n            cancelable: true,\r\n            view: window,\r\n          });\r\n          document.dispatchEvent(event);\r\n        }, 10);\r\n      }\r\n    },\r\n    [closeOnItemClick],\r\n  );\r\n\r\n  const dropdown = (\r\n    <Dropdown\r\n      trigger={trigger}\r\n      content={<MenuPanel items={items} onItemClick={handleItemClick} />}\r\n      minWidth={minWidth}\r\n      maxWidth={maxWidth}\r\n      minHeight={minHeight}\r\n      maxHeight={maxHeight}\r\n      autoWidth={autoWidth}\r\n      triggerRef={triggerRef}\r\n    />\r\n  );\r\n\r\n  return tooltip ? <Tooltip message={tooltip}>{dropdown}</Tooltip> : dropdown;\r\n};\r\n"]}