@expcat/tigercat-react 1.0.7 → 1.1.0

package/dist/{chunk-C6WJ4GQW.js → chunk-NHBNPK5J.js}

@@ -1,6 +1,7 @@
 'use strict';
 
-var chunkAJQPGAYL_js = require('./chunk-AJQPGAYL.js');
+var chunkJFOSDCCG_js = require('./chunk-JFOSDCCG.js');
+var chunkPGBKMW4Q_js = require('./chunk-PGBKMW4Q.js');
 var React = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -65,7 +66,7 @@ var Popconfirm = ({
     floatingRef,
     actualPlacement,
     floatingStyles: baseFloatingStyles
-  } = chunkAJQPGAYL_js.usePopup({
+  } = chunkJFOSDCCG_js.usePopup({
     open,
     defaultOpen,
     disabled,
@@ -155,42 +156,44 @@ var Popconfirm = ({
   })();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: containerClasses, style: mergedStyle, ...divProps, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { ref: triggerRef, children: triggerNode }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref: floatingRef,
-        className: contentWrapperClasses,
-        style: contentWrapperStyles,
-        hidden: !currentVisible,
-        "aria-hidden": !currentVisible,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: arrowClasses, "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              id: popconfirmId,
-              role: "dialog",
-              "aria-modal": "false",
-              "aria-labelledby": titleId,
-              "aria-describedby": describedBy,
-              className: contentClasses,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start", children: [
-                  showIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: iconClasses, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(PopconfirmIcon, { type: icon }) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { id: titleId, className: titleClasses, children: titleContent || title }),
-                    (description || descriptionContent) && /* @__PURE__ */ jsxRuntime.jsx("div", { id: descriptionId, className: descriptionClasses, children: descriptionContent || description })
+    chunkPGBKMW4Q_js.renderBodyPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: floatingRef,
+          className: contentWrapperClasses,
+          style: contentWrapperStyles,
+          hidden: !currentVisible,
+          "aria-hidden": !currentVisible,
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: arrowClasses, "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                id: popconfirmId,
+                role: "dialog",
+                "aria-modal": "false",
+                "aria-labelledby": titleId,
+                "aria-describedby": describedBy,
+                className: contentClasses,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start", children: [
+                    showIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: iconClasses, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(PopconfirmIcon, { type: icon }) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { id: titleId, className: titleClasses, children: titleContent || title }),
+                      (description || descriptionContent) && /* @__PURE__ */ jsxRuntime.jsx("div", { id: descriptionId, className: descriptionClasses, children: descriptionContent || description })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: buttonsClasses, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: cancelButtonClasses, onClick: handleCancel, children: cancelText }),
+                    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: okButtonClasses, onClick: handleConfirm, children: okText })
                   ] })
-                ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: buttonsClasses, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: cancelButtonClasses, onClick: handleCancel, children: cancelText }),
-                  /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: okButtonClasses, onClick: handleConfirm, children: okText })
-                ] })
-              ]
-            }
-          )
-        ] })
-      }
+                ]
+              }
+            )
+          ] })
+        }
+      )
     )
   ] });
 };

package/dist/{chunk-JUWFVIDP.mjs → chunk-NQV2H4SC.mjs}

@@ -1,6 +1,6 @@
 import { useCollapseContext } from './chunk-Y6557RWE.mjs';
-import { useMemo, useCallback } from 'react';
-import { isPanelActive, classNames, getCollapsePanelClasses, getCollapsePanelHeaderClasses, getCollapseIconClasses, collapseHeaderTextClasses, collapsePanelContentWrapperClasses, collapsePanelContentBaseClasses } from '@expcat/tigercat-core';
+import { useRef, useMemo, useCallback, useLayoutEffect } from 'react';
+import { getInitialCollapseContentStyle, isPanelActive, classNames, getCollapsePanelClasses, getCollapsePanelHeaderClasses, getCollapseIconClasses, createCollapseTransitionController, collapseHeaderTextClasses, collapsePanelContentWrapperClasses, collapsePanelContentBaseClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var CollapsePanel = ({
@@ -14,12 +14,18 @@ var CollapsePanel = ({
   children
 }) => {
   const collapseContext = useCollapseContext();
+  const contentRef = useRef(null);
+  const transitionControllerRef = useRef(null);
+  const initialContentStyleRef = useRef(getInitialCollapseContentStyle(false));
   if (!collapseContext) {
     throw new Error("CollapsePanel must be used within a Collapse component");
   }
   const isActive = useMemo(() => {
     return isPanelActive(panelKey, collapseContext.activeKeys);
   }, [panelKey, collapseContext.activeKeys]);
+  if (!transitionControllerRef.current) {
+    initialContentStyleRef.current = getInitialCollapseContentStyle(isActive);
+  }
   const panelClasses = useMemo(() => {
     return classNames(getCollapsePanelClasses(collapseContext.ghost, className));
   }, [collapseContext.ghost, className]);
@@ -46,6 +52,20 @@ var CollapsePanel = ({
     },
     [disabled, collapseContext.handlePanelClick, panelKey]
   );
+  useLayoutEffect(() => {
+    if (!contentRef.current) return void 0;
+    const controller = createCollapseTransitionController(contentRef.current, {
+      expanded: isActive
+    });
+    transitionControllerRef.current = controller;
+    return () => {
+      transitionControllerRef.current = null;
+      controller.dispose();
+    };
+  }, []);
+  useLayoutEffect(() => {
+    transitionControllerRef.current?.update(isActive);
+  }, [isActive]);
   const arrowIcon = /* @__PURE__ */ jsx(
     "svg",
     {
@@ -89,11 +109,10 @@ var CollapsePanel = ({
     /* @__PURE__ */ jsx(
       "div",
       {
+        ref: contentRef,
+        "data-tiger-collapse-content": "",
         className: collapsePanelContentWrapperClasses,
-        style: {
-          maxHeight: isActive ? "none" : "0",
-          opacity: isActive ? "1" : "0"
-        },
+        style: initialContentStyleRef.current,
         children: /* @__PURE__ */ jsx("div", { className: collapsePanelContentBaseClasses, children })
       }
     )

package/dist/{chunk-WAIXKROS.mjs → chunk-NSEO2B74.mjs}

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback, useMemo } from 'react';
-import { scrollToTop, classNames, backTopButtonClasses, backTopContainerClasses, backTopVisibleClasses, backTopHiddenClasses, getScrollTop, backTopIconPath } from '@expcat/tigercat-core';
+import { createBackTopVisibilityController, scrollToTop, classNames, backTopButtonClasses, backTopContainerClasses, backTopVisibleClasses, backTopHiddenClasses, backTopIconPath } from '@expcat/tigercat-core';
 import { jsx } from 'react/jsx-runtime';
 
 // src/components/BackTop.tsx
@@ -16,9 +16,10 @@ var DefaultIcon = () => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: backTopIconPath })
   }
 );
+var getDefaultTarget = () => window;
 var BackTop = ({
   visibilityHeight = 400,
-  target = () => window,
+  target = getDefaultTarget,
   duration = 450,
   onClick,
   children,
@@ -30,13 +31,16 @@ var BackTop = ({
   useEffect(() => {
     const el = target();
     if (!el) return;
-    const onScroll = () => {
-      setVisible(getScrollTop(el) >= visibilityHeight);
-    };
-    el.addEventListener("scroll", onScroll, { passive: true });
-    onScroll();
+    const visibilityController = createBackTopVisibilityController({
+      target: el,
+      getVisibilityHeight: () => visibilityHeight,
+      onChange: setVisible
+    });
+    el.addEventListener("scroll", visibilityController.schedule, { passive: true });
+    visibilityController.update();
     return () => {
-      el.removeEventListener("scroll", onScroll);
+      el.removeEventListener("scroll", visibilityController.schedule);
+      visibilityController.cancel();
     };
   }, [target, visibilityHeight]);
   const handleClick = useCallback(

package/dist/{chunk-2WBPUW75.mjs → chunk-O4JI4FC6.mjs}

@@ -1,4 +1,5 @@
-import { usePopup } from './chunk-AMOH5AMN.mjs';
+import { usePopup } from './chunk-WFIQIBLC.mjs';
+import { renderBodyPortal } from './chunk-XTSG362L.mjs';
 import React, { useRef, useMemo } from 'react';
 import { createFloatingIdFactory, classNames, getPopconfirmContainerClasses, getPopconfirmTriggerClasses, getPopconfirmArrowClasses, getPopconfirmContentClasses, getPopconfirmTitleClasses, getPopconfirmDescriptionClasses, getPopconfirmIconClasses, getPopconfirmButtonsClasses, getPopconfirmCancelButtonClasses, getPopconfirmOkButtonClasses, mergeStyleValues, popconfirmIconStrokeWidth, popconfirmIconViewBox, getPopconfirmIconPath, popconfirmIconPathStrokeLinejoin, popconfirmIconPathStrokeLinecap } from '@expcat/tigercat-core';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -149,42 +150,44 @@ var Popconfirm = ({
   })();
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: containerClasses, style: mergedStyle, ...divProps, children: [
     /* @__PURE__ */ jsx("div", { ref: triggerRef, children: triggerNode }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: floatingRef,
-        className: contentWrapperClasses,
-        style: contentWrapperStyles,
-        hidden: !currentVisible,
-        "aria-hidden": !currentVisible,
-        children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsx("div", { className: arrowClasses, "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              id: popconfirmId,
-              role: "dialog",
-              "aria-modal": "false",
-              "aria-labelledby": titleId,
-              "aria-describedby": describedBy,
-              className: contentClasses,
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
-                  showIcon && /* @__PURE__ */ jsx("div", { className: iconClasses, "aria-hidden": "true", children: /* @__PURE__ */ jsx(PopconfirmIcon, { type: icon }) }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-                    /* @__PURE__ */ jsx("div", { id: titleId, className: titleClasses, children: titleContent || title }),
-                    (description || descriptionContent) && /* @__PURE__ */ jsx("div", { id: descriptionId, className: descriptionClasses, children: descriptionContent || description })
+    renderBodyPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: floatingRef,
+          className: contentWrapperClasses,
+          style: contentWrapperStyles,
+          hidden: !currentVisible,
+          "aria-hidden": !currentVisible,
+          children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx("div", { className: arrowClasses, "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                id: popconfirmId,
+                role: "dialog",
+                "aria-modal": "false",
+                "aria-labelledby": titleId,
+                "aria-describedby": describedBy,
+                className: contentClasses,
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
+                    showIcon && /* @__PURE__ */ jsx("div", { className: iconClasses, "aria-hidden": "true", children: /* @__PURE__ */ jsx(PopconfirmIcon, { type: icon }) }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                      /* @__PURE__ */ jsx("div", { id: titleId, className: titleClasses, children: titleContent || title }),
+                      (description || descriptionContent) && /* @__PURE__ */ jsx("div", { id: descriptionId, className: descriptionClasses, children: descriptionContent || description })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: buttonsClasses, children: [
+                    /* @__PURE__ */ jsx("button", { type: "button", className: cancelButtonClasses, onClick: handleCancel, children: cancelText }),
+                    /* @__PURE__ */ jsx("button", { type: "button", className: okButtonClasses, onClick: handleConfirm, children: okText })
                   ] })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: buttonsClasses, children: [
-                  /* @__PURE__ */ jsx("button", { type: "button", className: cancelButtonClasses, onClick: handleCancel, children: cancelText }),
-                  /* @__PURE__ */ jsx("button", { type: "button", className: okButtonClasses, onClick: handleConfirm, children: okText })
-                ] })
-              ]
-            }
-          )
-        ] })
-      }
+                ]
+              }
+            )
+          ] })
+        }
+      )
     )
   ] });
 };

package/dist/{chunk-SQ7OL2X5.mjs → chunk-OFTLPYYC.mjs}

@@ -1,8 +1,12 @@
-import { useBreadcrumbContext } from './chunk-H36CWHUP.mjs';
-import { useMemo, useCallback } from 'react';
-import { getBreadcrumbItemClasses, getBreadcrumbLinkClasses, getBreadcrumbSeparatorClasses, getSeparatorContent } from '@expcat/tigercat-core';
+import React, { createContext, useContext, useMemo, useCallback } from 'react';
+import { getBreadcrumbItemClasses, getBreadcrumbLinkClasses, getBreadcrumbSeparatorClasses, getSeparatorContent, classNames, breadcrumbContainerClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
+// src/components/Breadcrumb.tsx
+var BreadcrumbContext = createContext(null);
+function useBreadcrumbContext() {
+  return useContext(BreadcrumbContext);
+}
 var BreadcrumbItem = ({
   href,
   target,
@@ -16,15 +20,12 @@ var BreadcrumbItem = ({
   ...props
 }) => {
   const breadcrumbContext = useBreadcrumbContext();
-  const itemClasses = useMemo(
-    () => getBreadcrumbItemClasses(className),
-    [className]
-  );
+  const itemClasses = useMemo(() => getBreadcrumbItemClasses(className), [className]);
   const linkClasses = useMemo(() => getBreadcrumbLinkClasses(current), [current]);
   const separatorClasses = useMemo(() => getBreadcrumbSeparatorClasses(), []);
   const separatorContent = useMemo(() => {
-    const sep = customSeparator !== void 0 ? customSeparator : breadcrumbContext?.separator || "/";
-    return getSeparatorContent(sep);
+    const separator = customSeparator !== void 0 ? customSeparator : breadcrumbContext?.separator || "/";
+    return getSeparatorContent(separator);
   }, [customSeparator, breadcrumbContext]);
   const handleClick = useCallback(
     (event) => {
@@ -61,5 +62,24 @@ var BreadcrumbItem = ({
     separatorElement
   ] });
 };
+var Breadcrumb = ({
+  separator = "/",
+  className,
+  style,
+  extra,
+  children,
+  ...props
+}) => {
+  const hasExtra = Boolean(extra);
+  const containerClasses = React.useMemo(
+    () => classNames(breadcrumbContainerClasses, hasExtra && "w-full", className),
+    [className, hasExtra]
+  );
+  const contextValue = React.useMemo(() => ({ separator }), [separator]);
+  return /* @__PURE__ */ jsx(BreadcrumbContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("nav", { className: containerClasses, "aria-label": "Breadcrumb", style, ...props, children: [
+    /* @__PURE__ */ jsx("ol", { className: "flex items-center flex-wrap gap-2", children }),
+    hasExtra && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: extra })
+  ] }) });
+};
 
-export { BreadcrumbItem };
+export { Breadcrumb, BreadcrumbItem, useBreadcrumbContext };

package/dist/{chunk-JQK354YN.js → chunk-OFWK2B23.js}

@@ -1,8 +1,5 @@
 'use strict';
 
-var chunkGJEWBALW_js = require('./chunk-GJEWBALW.js');
-var chunkA3PYG3D6_js = require('./chunk-A3PYG3D6.js');
-var chunkIBYIPXIO_js = require('./chunk-IBYIPXIO.js');
 var React = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -11,6 +8,208 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
+// src/components/Menu.tsx
+var MenuContext = React.createContext(null);
+function useMenuContext() {
+  return React.useContext(MenuContext);
+}
+var Menu = ({
+  mode = "vertical",
+  theme = "light",
+  selectedKeys: controlledSelectedKeys,
+  defaultSelectedKeys = [],
+  openKeys: controlledOpenKeys,
+  defaultOpenKeys = [],
+  collapsed = false,
+  multiple = true,
+  inlineIndent = 24,
+  className,
+  style,
+  onSelect,
+  onOpenChange,
+  children
+}) => {
+  const menuRef = React.useRef(null);
+  const [internalSelectedKeys, setInternalSelectedKeys] = React.useState(defaultSelectedKeys);
+  const [internalOpenKeys, setInternalOpenKeys] = React.useState(defaultOpenKeys);
+  const selectedKeys = controlledSelectedKeys !== void 0 ? controlledSelectedKeys : internalSelectedKeys;
+  const openKeys = controlledOpenKeys !== void 0 ? controlledOpenKeys : internalOpenKeys;
+  const handleSelect = React.useCallback(
+    (key) => {
+      const newSelectedKeys = tigercatCore.replaceKeys(key, selectedKeys);
+      if (controlledSelectedKeys === void 0) {
+        setInternalSelectedKeys(newSelectedKeys);
+      }
+      onSelect?.(key, { selectedKeys: newSelectedKeys });
+    },
+    [controlledSelectedKeys, selectedKeys, onSelect]
+  );
+  const handleOpenChange = React.useCallback(
+    (key) => {
+      const toggled = tigercatCore.toggleKey(key, openKeys);
+      const newOpenKeys = multiple ? toggled : toggled.includes(key) ? [key] : [];
+      if (controlledOpenKeys === void 0) {
+        setInternalOpenKeys(newOpenKeys);
+      }
+      onOpenChange?.(key, { openKeys: newOpenKeys });
+    },
+    [openKeys, multiple, controlledOpenKeys, onOpenChange]
+  );
+  const menuClasses = React.useMemo(() => {
+    return tigercatCore.classNames(tigercatCore.getMenuClasses(mode, theme, collapsed), className);
+  }, [mode, theme, collapsed, className]);
+  const contextValue = React.useMemo(
+    () => ({
+      mode,
+      theme,
+      collapsed,
+      inlineIndent,
+      selectedKeys,
+      openKeys,
+      handleSelect,
+      handleOpenChange
+    }),
+    [mode, theme, collapsed, inlineIndent, selectedKeys, openKeys, handleSelect, handleOpenChange]
+  );
+  React.useEffect(() => {
+    if (menuRef.current) tigercatCore.initRovingTabIndex(menuRef.current);
+  }, [mode, collapsed, selectedKeys, openKeys]);
+  return /* @__PURE__ */ jsxRuntime.jsx(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "ul",
+    {
+      ref: menuRef,
+      className: menuClasses,
+      style,
+      role: "menu",
+      "data-tiger-menu-root": "true",
+      "data-tiger-menu-mode": mode,
+      children
+    }
+  ) });
+};
+var MenuItem = ({
+  itemKey,
+  disabled = false,
+  icon,
+  className,
+  children,
+  level = 0,
+  collapsed: collapsedOverride
+}) => {
+  const menuContext = useMenuContext();
+  if (!menuContext) {
+    console.warn("MenuItem must be used within Menu component");
+  }
+  const isSelected = !!menuContext && tigercatCore.isKeySelected(itemKey, menuContext.selectedKeys);
+  const effectiveCollapsed = collapsedOverride ?? (menuContext ? menuContext.collapsed : false);
+  const itemClasses = tigercatCore.classNames(
+    menuContext ? tigercatCore.getMenuItemClasses(isSelected, disabled, menuContext.theme, effectiveCollapsed) : "flex items-center px-4 py-2 cursor-pointer transition-colors duration-200",
+    className
+  );
+  const indentStyle = menuContext && menuContext.mode === "inline" && level > 0 ? tigercatCore.getMenuItemIndent(level, menuContext.inlineIndent) : {};
+  const handleClick = React.useCallback(() => {
+    if (!disabled && menuContext) {
+      menuContext.handleSelect(itemKey);
+    }
+  }, [disabled, menuContext, itemKey]);
+  const handleKeyDown = React.useCallback(
+    (event) => {
+      if (!menuContext) return;
+      const current = event.currentTarget;
+      const rootMenu = current.closest('ul[role="menu"]');
+      const isRoot = rootMenu?.dataset.tigerMenuRoot === "true";
+      const isHorizontalRoot = isRoot && menuContext.mode === "horizontal";
+      const nextKey = isHorizontalRoot ? "ArrowRight" : "ArrowDown";
+      const prevKey = isHorizontalRoot ? "ArrowLeft" : "ArrowUp";
+      if (event.key === nextKey) {
+        event.preventDefault();
+        tigercatCore.moveFocusInMenu(current, 1);
+        return;
+      }
+      if (event.key === prevKey) {
+        event.preventDefault();
+        tigercatCore.moveFocusInMenu(current, -1);
+        return;
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        tigercatCore.focusMenuEdge(current, "start");
+        return;
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        tigercatCore.focusMenuEdge(current, "end");
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleClick();
+      }
+    },
+    [menuContext, handleClick]
+  );
+  const renderIcon = () => {
+    if (!icon) return null;
+    if (typeof icon === "string") {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.menuItemIconClasses, dangerouslySetInnerHTML: { __html: icon } });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.menuItemIconClasses, children: icon });
+  };
+  const renderLabel = () => {
+    if (!effectiveCollapsed) return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children });
+    if (!icon) {
+      const text = String(children || "");
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-center", children: text.charAt(0).toUpperCase() });
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("li", { role: "none", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      className: itemClasses,
+      style: indentStyle,
+      role: "menuitem",
+      "data-tiger-menuitem": "true",
+      "data-tiger-selected": isSelected ? "true" : "false",
+      "aria-current": isSelected ? "page" : void 0,
+      "aria-disabled": disabled ? "true" : void 0,
+      disabled,
+      tabIndex: -1,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      children: [
+        renderIcon(),
+        renderLabel()
+      ]
+    }
+  ) });
+};
+function isComponentNamed(elementType, name) {
+  if (typeof elementType !== "function" && typeof elementType !== "object") return false;
+  const maybeFn = elementType;
+  return maybeFn.displayName === name || maybeFn.name === name;
+}
+var MenuItemGroup = ({
+  title,
+  className,
+  children,
+  level = 0
+}) => {
+  const enhancedChildren = React__default.default.Children.map(children, (child) => {
+    if (!React__default.default.isValidElement(child)) return child;
+    if (child.type === MenuItem || isComponentNamed(child.type, "SubMenu")) {
+      return React__default.default.cloneElement(child, {
+        level
+      });
+    }
+    return child;
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "list-none", children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.menuItemGroupTitleClasses, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { role: "group", className, children: enhancedChildren })
+  ] });
+};
 var ExpandIcon = ({ expanded }) => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -32,12 +231,14 @@ var SubMenu = ({
   children,
   collapsed: collapsedOverride
 }) => {
-  const menuContext = chunkIBYIPXIO_js.useMenuContext();
+  const menuContext = useMenuContext();
   if (!menuContext) {
     console.warn("SubMenu must be used within Menu component");
   }
   const [isHovered, setIsHovered] = React.useState(false);
   const [isOpenByKeyboard, setIsOpenByKeyboard] = React.useState(false);
+  const submenuContentRef = React.useRef(null);
+  const heightTransitionRef = React.useRef(null);
   const effectiveCollapsed = collapsedOverride ?? (menuContext ? menuContext.collapsed : false);
   const isPopup = !!menuContext && (menuContext.mode === "horizontal" || menuContext.mode === "vertical" && effectiveCollapsed);
   const isOpen = !!menuContext && tigercatCore.isKeyOpen(itemKey, menuContext.openKeys);
@@ -50,6 +251,25 @@ var SubMenu = ({
     if (!isInlineOrVertical || !isExpanded || hasRenderedInline) return;
     setHasRenderedInline(true);
   }, [hasRenderedInline, isExpanded, isInlineOrVertical]);
+  const disposeHeightTransition = React.useCallback(() => {
+    heightTransitionRef.current?.dispose();
+    heightTransitionRef.current = null;
+  }, []);
+  React.useEffect(() => disposeHeightTransition, [disposeHeightTransition]);
+  React.useLayoutEffect(() => {
+    if (!isInlineOrVertical || !hasRenderedInline || !submenuContentRef.current) {
+      disposeHeightTransition();
+      return;
+    }
+    if (!heightTransitionRef.current) {
+      heightTransitionRef.current = tigercatCore.createSubmenuHeightTransitionController(
+        submenuContentRef.current,
+        { expanded: isExpanded }
+      );
+      return;
+    }
+    heightTransitionRef.current.update(isExpanded);
+  }, [disposeHeightTransition, hasRenderedInline, isExpanded, isInlineOrVertical]);
   const titleClasses = React.useMemo(() => {
     if (!menuContext) return "";
     return tigercatCore.classNames(tigercatCore.getSubMenuTitleClasses(menuContext.theme, disabled), className);
@@ -183,7 +403,7 @@ var SubMenu = ({
     const nextLevel = level + 1;
     const enhancedChildren = React__default.default.Children.map(children, (child) => {
       if (!React__default.default.isValidElement(child)) return child;
-      if (child.type === chunkA3PYG3D6_js.MenuItem || child.type === SubMenu || child.type === chunkGJEWBALW_js.MenuItemGroup) {
+      if (child.type === MenuItem || child.type === SubMenu || child.type === MenuItemGroup) {
         return React__default.default.cloneElement(
           child,
           {
@@ -211,13 +431,13 @@ var SubMenu = ({
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: tigercatCore.classNames(
-          "grid overflow-hidden transition-[grid-template-rows,opacity] duration-200 ease-in-out",
-          isHidden ? "grid-rows-[0fr] opacity-0" : "grid-rows-[1fr] opacity-100"
-        ),
+        ref: submenuContentRef,
+        className: tigercatCore.submenuHeightTransitionClasses,
+        style: heightTransitionRef.current ? void 0 : tigercatCore.getInitialSubmenuHeightTransitionStyle(isExpanded),
         "aria-hidden": isHidden ? "true" : void 0,
         "data-tiger-menu-hidden": isHidden ? "true" : void 0,
-        children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: tigercatCore.classNames(contentClasses, "min-h-0"), role: "menu", children: enhancedChildren })
+        "data-tiger-submenu-motion": "height",
+        children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: contentClasses, role: "menu", children: enhancedChildren })
       }
     );
   };
@@ -253,4 +473,8 @@ var SubMenu = ({
   );
 };
 
+exports.Menu = Menu;
+exports.MenuItem = MenuItem;
+exports.MenuItemGroup = MenuItemGroup;
 exports.SubMenu = SubMenu;
+exports.useMenuContext = useMenuContext;