@ttoss/components 2.14.20 → 2.14.22

package/dist/{esm/NavList/index.js → NavList/index.mjs}

@@ -1,11 +1,11 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { __name } from "../chunk-V4MHYKRI.js";
-
-// src/components/NavList/NavList.tsx
 import { Icon } from "@ttoss/react-icons";
 import { Divider, Flex, Link, Text } from "@ttoss/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-var getVariantStyles = /* @__PURE__ */__name(variant => {
+
+//#region src/components/NavList/NavList.tsx
+const getVariantStyles = variant => {
   switch (variant) {
     case "sidebar":
       return {
@@ -115,8 +115,8 @@ var getVariantStyles = /* @__PURE__ */__name(variant => {
     default:
       return getVariantStyles("menu");
   }
-}, "getVariantStyles");
-var NavListItemComponent = /* @__PURE__ */__name(({
+};
+const NavListItemComponent = ({
   item,
   onItemClick,
   variantStyles,
@@ -124,57 +124,64 @@ var NavListItemComponent = /* @__PURE__ */__name(({
   LinkComponent = Link,
   showDivider = false
 }) => {
-  const handleClick = /* @__PURE__ */__name(event => {
+  const handleClick = event => {
     if (item.disabled) {
       event.preventDefault();
       return;
     }
     item.onClick?.(event);
     onItemClick?.(item);
-  }, "handleClick");
+  };
   const itemStyles = {
     ...variantStyles.item,
     ...(item.active ? variantStyles.activeItem : {}),
     ...(item.disabled ? {
-      opacity: 0.5,
+      opacity: .5,
       cursor: "not-allowed",
       pointerEvents: "none"
     } : {})
   };
   const isDefaultLink = LinkComponent === Link;
-  const linkContent = /* @__PURE__ */React.createElement(Flex, {
+  const linkContent = /* @__PURE__ */jsxs(Flex, {
     sx: {
       alignItems: "center",
       gap: "2",
       color: "navigation.text.primary.default"
-    }
-  }, item.icon && /* @__PURE__ */React.createElement(Icon, {
-    icon: item.icon,
-    width: iconSize ?? variantStyles.icon.size,
-    height: iconSize ?? variantStyles.icon.size
-  }), /* @__PURE__ */React.createElement(Text, null, item.label));
-  return /* @__PURE__ */React.createElement(React.Fragment, null, isDefaultLink ? /* @__PURE__ */React.createElement(LinkComponent, {
-    href: item.href,
-    onClick: handleClick,
-    sx: itemStyles,
-    "aria-disabled": item.disabled,
-    "aria-current": item.active ? "page" : void 0,
-    quiet: true
-  }, linkContent) : /* @__PURE__ */React.createElement(Link, {
-    as: LinkComponent,
-    href: item.href,
-    onClick: handleClick,
-    sx: itemStyles,
-    "aria-disabled": item.disabled,
-    "aria-current": item.active ? "page" : void 0,
-    quiet: true
-  }, linkContent), showDivider && /* @__PURE__ */React.createElement(Divider, {
-    sx: {
-      marginY: "2"
-    }
-  }));
-}, "NavListItemComponent");
-var NavList = /* @__PURE__ */__name(({
+    },
+    children: [item.icon && /* @__PURE__ */jsx(Icon, {
+      icon: item.icon,
+      width: iconSize ?? variantStyles.icon.size,
+      height: iconSize ?? variantStyles.icon.size
+    }), /* @__PURE__ */jsx(Text, {
+      children: item.label
+    })]
+  });
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [isDefaultLink ? /* @__PURE__ */jsx(LinkComponent, {
+      href: item.href,
+      onClick: handleClick,
+      sx: itemStyles,
+      "aria-disabled": item.disabled,
+      "aria-current": item.active ? "page" : void 0,
+      quiet: true,
+      children: linkContent
+    }) : /* @__PURE__ */jsx(Link, {
+      as: LinkComponent,
+      href: item.href,
+      onClick: handleClick,
+      sx: itemStyles,
+      "aria-disabled": item.disabled,
+      "aria-current": item.active ? "page" : void 0,
+      quiet: true,
+      children: linkContent
+    }), showDivider && /* @__PURE__ */jsx(Divider, {
+      sx: {
+        marginY: "2"
+      }
+    })]
+  });
+};
+const NavList = ({
   items = [],
   groups = [],
   variant = "menu",
@@ -185,15 +192,11 @@ var NavList = /* @__PURE__ */__name(({
 }) => {
   const variantStyles = getVariantStyles(variant);
   const processedGroups = React.useMemo(() => {
-    if (groups.length > 0) {
-      return groups;
-    }
+    if (groups.length > 0) return groups;
     if (items.length > 0) {
       const groupedItems = items.reduce((acc, item) => {
         const groupKey = item.group || "__ungrouped__";
-        if (!acc[groupKey]) {
-          acc[groupKey] = [];
-        }
+        if (!acc[groupKey]) acc[groupKey] = [];
         acc[groupKey].push(item);
         return acc;
       }, {});
@@ -208,39 +211,42 @@ var NavList = /* @__PURE__ */__name(({
     }
     return [];
   }, [items, groups]);
-  return /* @__PURE__ */React.createElement(Flex, {
+  return /* @__PURE__ */jsx(Flex, {
     as: "nav",
     sx: {
       ...variantStyles.container,
       ...sx
     },
-    role: "navigation"
-  }, processedGroups.map((group, groupIndex) => {
-    return /* @__PURE__ */React.createElement(React.Fragment, {
-      key: group.id || `group-${groupIndex}`
-    }, group.label && /* @__PURE__ */React.createElement(Text, {
-      sx: variantStyles.groupLabel,
-      as: "div",
-      role: "heading"
-    }, group.label), /* @__PURE__ */React.createElement(Flex, {
-      sx: {
-        flexDirection: "column",
-        gap: variantStyles.container.gap
-      }
-    }, group.items.map((item, itemIndex) => {
-      const isLastItem = itemIndex === group.items.length - 1;
-      const showDivider = item.divider || isLastItem && group.divider;
-      return /* @__PURE__ */React.createElement(NavListItemComponent, {
-        key: item.id || `${group.id}-item-${itemIndex}`,
-        item,
-        onItemClick,
-        variantStyles,
-        iconSize,
-        LinkComponent,
-        showDivider
-      });
-    })));
-  }));
-}, "NavList");
+    role: "navigation",
+    children: processedGroups.map((group, groupIndex) => {
+      return /* @__PURE__ */jsxs(React.Fragment, {
+        children: [group.label && /* @__PURE__ */jsx(Text, {
+          sx: variantStyles.groupLabel,
+          as: "div",
+          role: "heading",
+          children: group.label
+        }), /* @__PURE__ */jsx(Flex, {
+          sx: {
+            flexDirection: "column",
+            gap: variantStyles.container.gap
+          },
+          children: group.items.map((item, itemIndex) => {
+            const isLastItem = itemIndex === group.items.length - 1;
+            return /* @__PURE__ */jsx(NavListItemComponent, {
+              item,
+              onItemClick,
+              variantStyles,
+              iconSize,
+              LinkComponent,
+              showDivider: item.divider || isLastItem && group.divider
+            }, item.id || `${group.id}-item-${itemIndex}`);
+          })
+        })]
+      }, group.id || `group-${groupIndex}`);
+    })
+  });
+};
 NavList.displayName = "NavList";
+
+//#endregion
 export { NavList };

package/dist/NotificationCard/index.d.mts

@@ -0,0 +1,22 @@
+
+import * as React from "react";
+
+//#region src/components/NotificationCard/NotificationCard.d.ts
+type NotificationType = 'success' | 'error' | 'warning' | 'info' | 'neutral';
+type NotificationAction = {
+  action?: 'open_url';
+  url?: string;
+  label?: string;
+};
+type NotificationCardProps = {
+  type: NotificationType;
+  title?: string | React.ReactNode;
+  message: string | React.ReactNode;
+  actions?: NotificationAction[];
+  caption?: string | React.ReactNode;
+  tags?: string[] | React.ReactNode;
+  onClose?: () => void;
+};
+declare const NotificationCard: (props: NotificationCardProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { NotificationAction, NotificationCard, NotificationCardProps };

package/dist/NotificationCard/index.mjs

@@ -0,0 +1,173 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { Icon } from "@ttoss/react-icons";
+import { Box, Card, CloseButton, Link, Tag, Text } from "@ttoss/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+
+//#region src/components/NotificationCard/NotificationCard.tsx
+const 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"
+      }
+    }
+  };
+  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, {
+    sx: {
+      ...sxMap[props.type].card,
+      width: "full"
+    },
+    children: [props.title && /* @__PURE__ */jsxs(Card.Title, {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        fontSize: ["md", "xl"],
+        paddingY: ["1", "2", "4"],
+        paddingX: ["2", "4", "8"]
+      },
+      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, {
+        sx: {
+          marginLeft: "auto"
+        },
+        children: /* @__PURE__ */jsx(CloseButton, {
+          onClick: props.onClose
+        })
+      })]
+    }), /* @__PURE__ */jsxs(Card.Body, {
+      sx: {
+        ...sxMap[props.type].card,
+        display: "flex",
+        flexDirection: "column",
+        gap: "2",
+        paddingY: ["1", "2", "4"],
+        paddingX: ["2", "4", "8"]
+      },
+      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, {
+        sx: {
+          whiteSpace: "nowrap",
+          mt: 6
+        },
+        children: /* @__PURE__ */jsx(Text, {
+          sx: {
+            fontSize: "xs",
+            color: "text.secondary"
+          },
+          children: props.caption
+        })
+      }), !props.title && props.onClose && /* @__PURE__ */jsx(Box, {
+        sx: {
+          alignSelf: "flex-end"
+        },
+        children: /* @__PURE__ */jsx(CloseButton, {
+          onClick: props.onClose
+        })
+      })]
+    })]
+  });
+};
+
+//#endregion
+export { NotificationCard };

package/dist/NotificationsMenu/index.d.mts

@@ -0,0 +1,47 @@
+
+import * as React from "react";
+
+//#region src/components/NotificationCard/NotificationCard.d.ts
+type NotificationType = 'success' | 'error' | 'warning' | 'info' | 'neutral';
+type NotificationAction = {
+  action?: 'open_url';
+  url?: string;
+  label?: string;
+};
+type NotificationCardProps = {
+  type: NotificationType;
+  title?: string | React.ReactNode;
+  message: string | React.ReactNode;
+  actions?: NotificationAction[];
+  caption?: string | React.ReactNode;
+  tags?: string[] | React.ReactNode;
+  onClose?: () => void;
+};
+//#endregion
+//#region src/components/NotificationsMenu/NotificationsMenu.d.ts
+type Notification = NotificationCardProps & {
+  id: string;
+  group?: string;
+};
+type Props = {
+  notifications: Notification[];
+  defaultOpen?: boolean;
+  hasMore?: boolean;
+  count: number;
+  onLoadMore?: () => void;
+  onOpenChange?: (isOpen: boolean) => void;
+  onClose?: () => void;
+  onClearAll?: () => void;
+};
+declare const NotificationsMenu: ({
+  notifications,
+  defaultOpen,
+  hasMore,
+  onLoadMore,
+  onOpenChange,
+  count,
+  onClose,
+  onClearAll
+}: Props) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Notification, NotificationsMenu };