@ttoss/components 2.14.30 → 2.15.0

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.d.mts

@@ -791,11 +791,30 @@ declare const NavList: {
   displayName: string;
 };
 //#endregion
+//#region src/components/NotificationCard/NotificationButton.d.ts
+type NotificationType$1 = 'success' | 'error' | 'warning' | 'info' | 'neutral';
+/** Props for NotificationButton */
+type NotificationButtonProps = Omit<ButtonProps, 'type'> & {
+  /** Notification type — controls background and border colors to match the card. */type: NotificationType$1;
+};
+/**
+ * A button styled to match the NotificationCard of a given type.
+ * Use this for action buttons rendered inside or alongside notification cards.
+ */
+declare const NotificationButton: ({
+  type,
+  ...props
+}: NotificationButtonProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
 //#region src/components/NotificationCard/NotificationCard.d.ts
 type NotificationType = 'success' | 'error' | 'warning' | 'info' | 'neutral';
 type NotificationAction = {
-  action?: 'open_url';
-  url?: string;
+  action: 'open_url';
+  url: string;
+  label?: string;
+} | {
+  action: 'callback';
+  onClick: () => void;
   label?: string;
 };
 type NotificationCardProps = {
@@ -907,4 +926,4 @@ declare const Tabs: {
 declare const ToastContainer: (props: ToastContainerProps) => import("react/jsx-runtime").JSX.Element;
 declare const toast: typeof toast$1;
 //#endregion
-export { Accordion, AccordionItem, AccordionProps, AccordionRenderItemProps, BaseMetric, DateMetric, DatePicker, DateRange, Drawer, DrawerProps, EnhancedTitle, EnhancedTitleBadge, EnhancedTitleProps, EnhancedTitleVariant, FileUploadState, FileUploader, FileUploaderProps, InstallPwa, InstallPwaUi, InstallPwaUiProps, JsonEditor, JsonView, type LinkComponentProps, List, ListItem, ListItemProps, ListProps, LockedOverlay, Markdown, MarkdownProps, Menu, MenuProps, Metric, MetricCard, MetricCardProps, Modal, ModalProps, NavList, type NavListGroup, type NavListItem, type NavListProps, Notification, NotificationAction, NotificationCard, NotificationCardProps, NotificationsMenu, NumberMetric, OnFilesChange, OnRemove, OnUpload, OnUploadComplete, OnUploadError, OnUploadProgress, OnUploadStart, PercentageMetric, Search, SearchProps, SpotlightCard, SpotlightCardProps, type TabListProps, type TabPanelProps, type TabProps, Table, Tabs, type TabsProps, ToastContainer, type ToastContainerProps, type ToastOptions, UploadResult, UploadedFile, createCell, createColumnHelper, flexRender, getCoreRowModel, toast, useReactTable };
+export { Accordion, AccordionItem, AccordionProps, AccordionRenderItemProps, BaseMetric, DateMetric, DatePicker, DateRange, Drawer, DrawerProps, EnhancedTitle, EnhancedTitleBadge, EnhancedTitleProps, EnhancedTitleVariant, FileUploadState, FileUploader, FileUploaderProps, InstallPwa, InstallPwaUi, InstallPwaUiProps, JsonEditor, JsonView, type LinkComponentProps, List, ListItem, ListItemProps, ListProps, LockedOverlay, Markdown, MarkdownProps, Menu, MenuProps, Metric, MetricCard, MetricCardProps, Modal, ModalProps, NavList, type NavListGroup, type NavListItem, type NavListProps, Notification, NotificationAction, NotificationButton, NotificationButtonProps, NotificationCard, NotificationCardProps, NotificationsMenu, NumberMetric, OnFilesChange, OnRemove, OnUpload, OnUploadComplete, OnUploadError, OnUploadProgress, OnUploadStart, PercentageMetric, Search, SearchProps, SpotlightCard, SpotlightCardProps, type TabListProps, type TabPanelProps, type TabProps, Table, Tabs, type TabsProps, ToastContainer, type ToastContainerProps, type ToastOptions, UploadResult, UploadedFile, createCell, createColumnHelper, flexRender, getCoreRowModel, toast, useReactTable };

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, {
@@ -2502,168 +2510,265 @@ var NavList = ({
 };
 NavList.displayName = "NavList";
 
+//#endregion
+//#region src/components/NotificationCard/NotificationButton.tsx
+var sxMap$1 = {
+  success: {
+    backgroundColor: "feedback.background.positive.active",
+    borderColor: "feedback.border.positive.active"
+  },
+  error: {
+    backgroundColor: "feedback.background.negative.active",
+    borderColor: "feedback.border.negative.active"
+  },
+  warning: {
+    backgroundColor: "feedback.background.caution.active",
+    borderColor: "feedback.border.caution.active"
+  },
+  info: {
+    backgroundColor: "feedback.background.primary.active",
+    borderColor: "feedback.border.primary.active"
+  },
+  neutral: {
+    backgroundColor: "feedback.background.primary.active",
+    borderColor: "feedback.border.primary.active"
+  }
+};
+/**
+* A button styled to match the NotificationCard of a given type.
+* Use this for action buttons rendered inside or alongside notification cards.
+*/
+var NotificationButton = ({
+  type,
+  ...props
+}) => {
+  return /* @__PURE__ */jsx(Button, {
+    type: "button",
+    ...props,
+    sx: {
+      ...sxMap$1[type],
+      color: "display.text.primary.default",
+      borderRadius: "lg",
+      borderWidth: "sm",
+      borderStyle: "solid"
+    }
+  });
+};
+
 //#endregion
 //#region src/components/NotificationCard/NotificationCard.tsx
-var NotificationCard = props => {
-  const sxMap = {
-    success: {
-      card: {
-        backgroundColor: "feedback.background.positive.default",
-        borderColor: "feedback.border.positive.default"
-      }
-    },
-    error: {
-      card: {
-        backgroundColor: "feedback.background.negative.default",
-        borderColor: "feedback.border.negative.default"
-      }
-    },
-    warning: {
-      card: {
-        backgroundColor: "feedback.background.caution.default",
-        borderColor: "feedback.border.caution.default"
-      }
-    },
-    info: {
-      card: {
-        backgroundColor: "feedback.background.primary.default",
-        borderColor: "feedback.border.primary.default"
-      }
-    },
-    neutral: {
-      card: {
-        backgroundColor: "feedback.background.primary.default",
-        borderColor: "feedback.border.primary.default"
-      }
+var sxMap = {
+  success: {
+    card: {
+      backgroundColor: "feedback.background.positive.default",
+      borderColor: "feedback.border.positive.default"
     }
-  };
-  const icon = {
-    success: "success-circle",
-    error: "error",
-    warning: "warning-alt",
-    info: "info",
-    neutral: "info"
-  };
-  const hasCaption = Boolean(props.caption);
-  const hasActions = Boolean(props.actions && props.actions.length > 0);
-  const hasTitle = Boolean(props.title);
-  const shouldCenterVerticallyWithoutTitle = !hasCaption && !hasActions && !hasTitle;
-  const shouldCenterVerticallyWithTitle = !hasCaption && !hasActions && hasTitle;
-  const shouldAddMinHeight = !hasCaption && !hasActions;
-  return /* @__PURE__ */jsxs(Card, {
+  },
+  error: {
+    card: {
+      backgroundColor: "feedback.background.negative.default",
+      borderColor: "feedback.border.negative.default"
+    }
+  },
+  warning: {
+    card: {
+      backgroundColor: "feedback.background.caution.default",
+      borderColor: "feedback.border.caution.default"
+    }
+  },
+  info: {
+    card: {
+      backgroundColor: "feedback.background.primary.default",
+      borderColor: "feedback.border.primary.default"
+    }
+  },
+  neutral: {
+    card: {
+      backgroundColor: "feedback.background.primary.default",
+      borderColor: "feedback.border.primary.default"
+    }
+  }
+};
+var iconMap = {
+  success: "success-circle",
+  error: "error",
+  warning: "warning-alt",
+  info: "info",
+  neutral: "info"
+};
+var NotificationCardTags = ({
+  tags
+}) => {
+  if (!tags) return null;
+  if (Array.isArray(tags)) {
+    if (tags.length === 0) return null;
+    return /* @__PURE__ */jsx(Fragment, {
+      children: tags.map((tag, index) => {
+        return /* @__PURE__ */jsx(Tag, {
+          children: tag
+        }, index);
+      })
+    });
+  }
+  return /* @__PURE__ */jsx(Tag, {
+    children: tags
+  });
+};
+var NotificationCardTitle = ({
+  type,
+  title,
+  tags,
+  onClose
+}) => {
+  return /* @__PURE__ */jsxs(Card.Title, {
     sx: {
-      ...sxMap[props.type].card,
-      width: "full"
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      fontSize: ["md", "xl"],
+      paddingY: ["1", "2", "4"],
+      paddingX: ["2", "4", "8"]
     },
-    children: [props.title && /* @__PURE__ */jsxs(Card.Title, {
+    children: [/* @__PURE__ */jsxs(Text, {
       sx: {
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        fontSize: ["md", "xl"],
-        paddingY: ["1", "2", "4"],
-        paddingX: ["2", "4", "8"]
+        display: "inline-flex",
+        alignItems: "flex-start",
+        gap: "2",
+        flexDirection: "row",
+        flexWrap: "wrap"
       },
-      children: [/* @__PURE__ */jsxs(Text, {
-        sx: {
-          display: "inline-flex",
-          alignItems: "flex-start",
-          gap: "2",
-          flexDirection: "row",
-          flexWrap: "wrap"
-        },
-        children: [/* @__PURE__ */jsxs(Box, {
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            gap: "2"
-          },
-          children: [/* @__PURE__ */jsx(Icon, {
-            icon: icon[props.type]
-          }), props.title]
-        }), props.tags && (Array.isArray(props.tags) ? props.tags.length > 0 : true) && (Array.isArray(props.tags) ? props.tags.map((tag, index) => {
-          return /* @__PURE__ */jsx(Tag, {
-            children: tag
-          }, index);
-        }) : /* @__PURE__ */jsx(Tag, {
-          children: props.tags
-        }))]
-      }), props.onClose && /* @__PURE__ */jsx(Box, {
+      children: [/* @__PURE__ */jsxs(Box, {
         sx: {
-          marginLeft: "auto"
+          display: "flex",
+          alignItems: "center",
+          gap: "2"
         },
-        children: /* @__PURE__ */jsx(CloseButton, {
-          onClick: props.onClose
-        })
+        children: [/* @__PURE__ */jsx(Icon, {
+          icon: iconMap[type]
+        }), title]
+      }), /* @__PURE__ */jsx(NotificationCardTags, {
+        tags
       })]
-    }), /* @__PURE__ */jsxs(Card.Body, {
+    }), onClose && /* @__PURE__ */jsx(Box, {
+      sx: {
+        marginLeft: "auto"
+      },
+      children: /* @__PURE__ */jsx(CloseButton, {
+        onClick: onClose
+      })
+    })]
+  });
+};
+var NotificationCardActions = ({
+  type,
+  actions
+}) => {
+  if (actions.length === 0) return null;
+  return /* @__PURE__ */jsx(Box, {
+    sx: {
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      gap: 2,
+      mt: 2
+    },
+    children: actions.map((action, index) => {
+      return /* @__PURE__ */jsx(NotificationButton, {
+        type,
+        onClick: action.action === "open_url" ? () => {
+          return window.open(action.url, "_blank");
+        } : action.onClick,
+        children: action.label || "Acessar"
+      }, index);
+    })
+  });
+};
+var NotificationCardBody = ({
+  type,
+  message,
+  actions,
+  caption,
+  onClose,
+  hasTitle
+}) => {
+  const hasCaption = Boolean(caption);
+  const hasActions = Boolean(actions?.length);
+  const shouldCenter = !hasCaption && !hasActions;
+  const bodyAlign = shouldCenter ? "center" : "flex-start";
+  const bodyMinHeight = shouldCenter && !hasTitle ? "40px" : "auto";
+  return /* @__PURE__ */jsxs(Card.Body, {
+    sx: {
+      ...sxMap[type].card,
+      display: "flex",
+      flexDirection: "column",
+      gap: "2",
+      paddingY: ["1", "2", "4"],
+      paddingX: ["2", "4", "8"]
+    },
+    children: [/* @__PURE__ */jsx(Box, {
       sx: {
-        ...sxMap[props.type].card,
         display: "flex",
-        flexDirection: "column",
-        gap: "2",
-        paddingY: ["1", "2", "4"],
-        paddingX: ["2", "4", "8"]
+        justifyContent: "space-between",
+        minHeight: bodyMinHeight,
+        alignItems: bodyAlign,
+        width: "100%",
+        gap: "4"
       },
-      children: [/* @__PURE__ */jsx(Box, {
-        sx: {
-          display: "flex",
-          justifyContent: "space-between",
-          minHeight: shouldAddMinHeight ? "40px" : "auto",
-          alignItems: shouldCenterVerticallyWithoutTitle ? "center" : shouldCenterVerticallyWithTitle ? "center" : "flex-start",
-          width: "100%",
-          gap: "4"
-        },
-        children: /* @__PURE__ */jsx(Box, {
-          sx: {
-            flex: 1
-          },
-          children: /* @__PURE__ */jsx(Text, {
-            sx: {
-              fontSize: ["sm", "md"]
-            },
-            children: props.message
-          })
-        })
-      }), props.actions && props.actions.length > 0 && /* @__PURE__ */jsx(Box, {
-        sx: {
-          display: "flex",
-          flexDirection: "column",
-          gap: 2,
-          mt: 2
-        },
-        children: props.actions.map((action, index) => {
-          return action.action === "open_url" ? /* @__PURE__ */jsx(Link, {
-            href: action.url,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            sx: {
-              color: "action.text.accent.default",
-              cursor: "pointer"
-            },
-            children: action.label || "Acessar"
-          }, index) : null;
-        })
-      }), props.caption && /* @__PURE__ */jsx(Box, {
+      children: /* @__PURE__ */jsx(Box, {
         sx: {
-          whiteSpace: "nowrap",
-          mt: 6
+          flex: 1
         },
         children: /* @__PURE__ */jsx(Text, {
           sx: {
-            fontSize: "xs",
-            color: "text.secondary"
+            fontSize: ["sm", "md"]
           },
-          children: props.caption
+          children: message
         })
-      }), !props.title && props.onClose && /* @__PURE__ */jsx(Box, {
+      })
+    }), actions && /* @__PURE__ */jsx(NotificationCardActions, {
+      type,
+      actions
+    }), caption && /* @__PURE__ */jsx(Box, {
+      sx: {
+        whiteSpace: "nowrap",
+        mt: 6
+      },
+      children: /* @__PURE__ */jsx(Text, {
         sx: {
-          alignSelf: "flex-end"
+          fontSize: "xs",
+          color: "text.secondary"
         },
-        children: /* @__PURE__ */jsx(CloseButton, {
-          onClick: props.onClose
-        })
-      })]
+        children: caption
+      })
+    }), !hasTitle && onClose && /* @__PURE__ */jsx(Box, {
+      sx: {
+        alignSelf: "flex-end"
+      },
+      children: /* @__PURE__ */jsx(CloseButton, {
+        onClick: onClose
+      })
+    })]
+  });
+};
+var NotificationCard = props => {
+  const hasTitle = Boolean(props.title);
+  return /* @__PURE__ */jsxs(Card, {
+    sx: {
+      ...sxMap[props.type].card,
+      width: "full"
+    },
+    children: [props.title && /* @__PURE__ */jsx(NotificationCardTitle, {
+      type: props.type,
+      title: props.title,
+      tags: props.tags,
+      onClose: props.onClose
+    }), /* @__PURE__ */jsx(NotificationCardBody, {
+      type: props.type,
+      message: props.message,
+      actions: props.actions,
+      caption: props.caption,
+      onClose: props.onClose,
+      hasTitle
     })]
   });
 };
@@ -3073,4 +3178,4 @@ var ToastContainer = props => {
 var toast = toast$1;
 
 //#endregion
-export { Accordion, DatePicker, Drawer, EnhancedTitle, FileUploader, InstallPwa, InstallPwaUi, JsonEditor, JsonView, List, ListItem, LockedOverlay, Markdown, Menu, MetricCard, Modal, NavList, NotificationCard, NotificationsMenu, Search, SpotlightCard, Table, Tabs, ToastContainer, createCell, createColumnHelper, flexRender, getCoreRowModel, toast, useReactTable };
+export { Accordion, DatePicker, Drawer, EnhancedTitle, FileUploader, InstallPwa, InstallPwaUi, JsonEditor, JsonView, List, ListItem, LockedOverlay, Markdown, Menu, MetricCard, Modal, NavList, NotificationButton, NotificationCard, NotificationsMenu, Search, SpotlightCard, Table, Tabs, ToastContainer, createCell, createColumnHelper, flexRender, getCoreRowModel, toast, useReactTable };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "2.14.30",
+  "version": "2.15.0",
   "description": "React components for ttoss ecosystem.",
   "keywords": [
     "React",
@@ -54,19 +54,19 @@
     "tsdown": "^0.22.2",
     "tsx": "^4.21.0",
     "@ttoss/config": "^1.37.17",
+    "@ttoss/i18n-cli": "^0.8.17",
     "@ttoss/react-hooks": "^2.3.20",
+    "@ttoss/react-i18n": "^2.3.0",
     "@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/ui": "^6.9.28",
+    "@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-i18n": "^2.3.0",
     "@ttoss/react-icons": "^0.7.21",
-    "@ttoss/ui": "^6.9.27"
+    "@ttoss/ui": "^6.9.28"
   },
   "publishConfig": {
     "access": "public",