@ttoss/components 2.14.30 → 2.14.31

package/README.md

@@ -209,14 +209,24 @@ import { Markdown } from '@ttoss/components';
 
 ### Menu
 
-Dropdown menus with customizable triggers. [Docs](https://storybook.ttoss.dev/?path=/docs/components-menu--docs)
+Floating dropdown panel with a configurable trigger icon. Use `NavList` as children for navigation items. [Docs](https://storybook.ttoss.dev/?path=/docs/components-menu--docs)
 
 ```tsx
-import { Menu } from '@ttoss/components';
+import { Menu, NavList } from '@ttoss/components';
+
+<Menu>
+  <NavList
+    variant="menu"
+    items={[
+      { href: '/dashboard', label: 'Dashboard', icon: 'mdi:home-outline' },
+      { href: '/settings', label: 'Settings', icon: 'mdi:cog-outline' },
+    ]}
+  />
+</Menu>;
 
-<Menu trigger={<Button>Open Menu</Button>}>
-  <Menu.Item onClick={() => {}}>Action 1</Menu.Item>
-  <Menu.Item onClick={() => {}}>Action 2</Menu.Item>
+// Custom trigger icon
+<Menu menuIcon="mdi:dots-vertical">
+  <NavList variant="menu" items={items} />
 </Menu>;
 ```
 

package/dist/index.mjs

@@ -1764,7 +1764,6 @@ var Menu = ({
       ...stylePos
     },
     children: /* @__PURE__ */jsx(Box, {
-      as: "nav",
       children
     })
   }) : null;
@@ -2269,13 +2268,15 @@ var getVariantStyles = variant => {
           width: "full"
         },
         item: {
-          backgroundColor: "transparent",
+          backgroundColor: "navigation.background.muted.default",
+          color: "navigation.text.primary.default",
           padding: "3",
           borderRadius: "none",
           fontSize: "md",
-          transition: "background-color 0.15s ease",
+          transition: "background-color 0.15s ease, color 0.15s ease",
           "&:hover": {
             backgroundColor: "navigation.background.muted.hover",
+            color: "navigation.text.primary.hover",
             textDecoration: "none"
           }
         },
@@ -2305,13 +2306,15 @@ var getVariantStyles = variant => {
           width: "full"
         },
         item: {
-          backgroundColor: "transparent",
+          backgroundColor: "navigation.background.muted.default",
+          color: "navigation.text.primary.default",
           borderRadius: "md",
           padding: "2",
           fontSize: "md",
           transition: "all 0.2s ease",
           "&:hover": {
             backgroundColor: "navigation.background.muted.hover",
+            color: "navigation.text.primary.hover",
             transform: "translateX(4px)",
             textDecoration: "none"
           }
@@ -2339,14 +2342,16 @@ var getVariantStyles = variant => {
           width: "full"
         },
         item: {
-          backgroundColor: "transparent",
+          backgroundColor: "navigation.background.muted.default",
+          color: "navigation.text.primary.default",
           padding: "2",
           fontSize: "sm",
           borderBottom: "sm",
           borderColor: "display.border.muted.default",
-          transition: "background-color 0.1s ease",
+          transition: "background-color 0.1s ease, color 0.1s ease",
           "&:hover": {
             backgroundColor: "navigation.background.muted.hover",
+            color: "navigation.text.primary.hover",
             textDecoration: "none"
           }
         },
@@ -2370,6 +2375,17 @@ var getVariantStyles = variant => {
       return getVariantStyles("menu");
   }
 };
+var resolveItemStyles = (item, variantStyles) => {
+  return {
+    ...variantStyles.item,
+    ...(item.active ? variantStyles.activeItem : {}),
+    ...(item.disabled ? {
+      opacity: .5,
+      cursor: "not-allowed",
+      pointerEvents: "none"
+    } : {})
+  };
+};
 var NavListItemComponent = ({
   item,
   onItemClick,
@@ -2386,21 +2402,13 @@ var NavListItemComponent = ({
     item.onClick?.(event);
     onItemClick?.(item);
   };
-  const itemStyles = {
-    ...variantStyles.item,
-    ...(item.active ? variantStyles.activeItem : {}),
-    ...(item.disabled ? {
-      opacity: .5,
-      cursor: "not-allowed",
-      pointerEvents: "none"
-    } : {})
-  };
+  const itemStyles = resolveItemStyles(item, variantStyles);
+  const ariaCurrent = item.active ? "page" : void 0;
   const isDefaultLink = LinkComponent === Link;
   const linkContent = /* @__PURE__ */jsxs(Flex, {
     sx: {
       alignItems: "center",
-      gap: "2",
-      color: "navigation.text.primary.default"
+      gap: "2"
     },
     children: [item.icon && /* @__PURE__ */jsx(Icon, {
       icon: item.icon,
@@ -2416,7 +2424,7 @@ var NavListItemComponent = ({
       onClick: handleClick,
       sx: itemStyles,
       "aria-disabled": item.disabled,
-      "aria-current": item.active ? "page" : void 0,
+      "aria-current": ariaCurrent,
       quiet: true,
       children: linkContent
     }) : /* @__PURE__ */jsx(Link, {
@@ -2425,7 +2433,7 @@ var NavListItemComponent = ({
       onClick: handleClick,
       sx: itemStyles,
       "aria-disabled": item.disabled,
-      "aria-current": item.active ? "page" : void 0,
+      "aria-current": ariaCurrent,
       quiet: true,
       children: linkContent
     }), showDivider && /* @__PURE__ */jsx(Divider, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "2.14.30",
+  "version": "2.14.31",
   "description": "React components for ttoss ecosystem.",
   "keywords": [
     "React",
@@ -54,18 +54,18 @@
     "tsdown": "^0.22.2",
     "tsx": "^4.21.0",
     "@ttoss/config": "^1.37.17",
-    "@ttoss/react-hooks": "^2.3.20",
-    "@ttoss/react-icons": "^0.7.21",
     "@ttoss/i18n-cli": "^0.8.17",
     "@ttoss/react-i18n": "^2.2.21",
-    "@ttoss/test-utils": "^4.2.18",
-    "@ttoss/ui": "^6.9.27"
+    "@ttoss/react-hooks": "^2.3.20",
+    "@ttoss/react-icons": "^0.7.21",
+    "@ttoss/ui": "^6.9.27",
+    "@ttoss/test-utils": "^4.2.18"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "@ttoss/react-hooks": "^2.3.20",
-    "@ttoss/react-i18n": "^2.2.21",
     "@ttoss/react-icons": "^0.7.21",
+    "@ttoss/react-i18n": "^2.2.21",
     "@ttoss/ui": "^6.9.27"
   },
   "publishConfig": {