@ttoss/components 2.14.20 → 2.14.21

package/dist/esm/NotificationCard/index.js

@@ -1,156 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { __name } from "../chunk-V4MHYKRI.js";
-
-// src/components/NotificationCard/NotificationCard.tsx
-import { Icon } from "@ttoss/react-icons";
-import { Box, Card, CloseButton, Link, Tag, Text } from "@ttoss/ui";
-import * as React from "react";
-var NotificationCard = /* @__PURE__ */__name(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__ */React.createElement(Card, {
-    sx: {
-      ...sxMap[props.type].card,
-      width: "full"
-    }
-  }, props.title && /* @__PURE__ */React.createElement(Card.Title, {
-    sx: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      fontSize: ["md", "xl"],
-      paddingY: ["1", "2", "4"],
-      paddingX: ["2", "4", "8"]
-    }
-  }, /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      display: "inline-flex",
-      alignItems: "flex-start",
-      gap: "2",
-      flexDirection: "row",
-      flexWrap: "wrap"
-    }
-  }, /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      display: "flex",
-      alignItems: "center",
-      gap: "2"
-    }
-  }, /* @__PURE__ */React.createElement(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__ */React.createElement(Tag, {
-      key: index
-    }, tag);
-  }) : /* @__PURE__ */React.createElement(Tag, null, props.tags))), props.onClose && /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      marginLeft: "auto"
-    }
-  }, /* @__PURE__ */React.createElement(CloseButton, {
-    onClick: props.onClose
-  }))), /* @__PURE__ */React.createElement(Card.Body, {
-    sx: {
-      ...sxMap[props.type].card,
-      display: "flex",
-      flexDirection: "column",
-      gap: "2",
-      paddingY: ["1", "2", "4"],
-      paddingX: ["2", "4", "8"]
-    }
-  }, /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      display: "flex",
-      justifyContent: "space-between",
-      minHeight: shouldAddMinHeight ? "40px" : "auto",
-      alignItems: shouldCenterVerticallyWithoutTitle ? "center" : shouldCenterVerticallyWithTitle ? "center" : "flex-start",
-      width: "100%",
-      gap: "4"
-    }
-  }, /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      flex: 1
-    }
-  }, /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontSize: ["sm", "md"]
-    }
-  }, props.message))), props.actions && props.actions.length > 0 && /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      display: "flex",
-      flexDirection: "column",
-      gap: 2,
-      mt: 2
-    }
-  }, props.actions.map((action, index) => {
-    return action.action === "open_url" ? /* @__PURE__ */React.createElement(Link, {
-      key: index,
-      href: action.url,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      sx: {
-        color: "action.text.accent.default",
-        cursor: "pointer"
-      }
-    }, action.label || "Acessar") : null;
-  })), props.caption && /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      whiteSpace: "nowrap",
-      mt: 6
-    }
-  }, /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontSize: "xs",
-      color: "text.secondary"
-    }
-  }, props.caption)), !props.title && props.onClose && /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      alignSelf: "flex-end"
-    }
-  }, /* @__PURE__ */React.createElement(CloseButton, {
-    onClick: props.onClose
-  }))));
-}, "NotificationCard");
-export { NotificationCard };

package/dist/esm/NotificationsMenu/index.js

@@ -1,359 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { __name } from "../chunk-V4MHYKRI.js";
-
-// src/components/NotificationsMenu/NotificationsMenu.tsx
-import { Icon as Icon2 } from "@ttoss/react-icons";
-import { Box as Box2, Button, Card as Card2, Flex, IconButton, Text as Text2 } from "@ttoss/ui";
-import * as React2 from "react";
-
-// src/components/NotificationCard/NotificationCard.tsx
-import { Icon } from "@ttoss/react-icons";
-import { Box, Card, CloseButton, Link, Tag, Text } from "@ttoss/ui";
-import * as React from "react";
-var NotificationCard = /* @__PURE__ */__name(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__ */React.createElement(Card, {
-    sx: {
-      ...sxMap[props.type].card,
-      width: "full"
-    }
-  }, props.title && /* @__PURE__ */React.createElement(Card.Title, {
-    sx: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      fontSize: ["md", "xl"],
-      paddingY: ["1", "2", "4"],
-      paddingX: ["2", "4", "8"]
-    }
-  }, /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      display: "inline-flex",
-      alignItems: "flex-start",
-      gap: "2",
-      flexDirection: "row",
-      flexWrap: "wrap"
-    }
-  }, /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      display: "flex",
-      alignItems: "center",
-      gap: "2"
-    }
-  }, /* @__PURE__ */React.createElement(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__ */React.createElement(Tag, {
-      key: index
-    }, tag);
-  }) : /* @__PURE__ */React.createElement(Tag, null, props.tags))), props.onClose && /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      marginLeft: "auto"
-    }
-  }, /* @__PURE__ */React.createElement(CloseButton, {
-    onClick: props.onClose
-  }))), /* @__PURE__ */React.createElement(Card.Body, {
-    sx: {
-      ...sxMap[props.type].card,
-      display: "flex",
-      flexDirection: "column",
-      gap: "2",
-      paddingY: ["1", "2", "4"],
-      paddingX: ["2", "4", "8"]
-    }
-  }, /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      display: "flex",
-      justifyContent: "space-between",
-      minHeight: shouldAddMinHeight ? "40px" : "auto",
-      alignItems: shouldCenterVerticallyWithoutTitle ? "center" : shouldCenterVerticallyWithTitle ? "center" : "flex-start",
-      width: "100%",
-      gap: "4"
-    }
-  }, /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      flex: 1
-    }
-  }, /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontSize: ["sm", "md"]
-    }
-  }, props.message))), props.actions && props.actions.length > 0 && /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      display: "flex",
-      flexDirection: "column",
-      gap: 2,
-      mt: 2
-    }
-  }, props.actions.map((action, index) => {
-    return action.action === "open_url" ? /* @__PURE__ */React.createElement(Link, {
-      key: index,
-      href: action.url,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      sx: {
-        color: "action.text.accent.default",
-        cursor: "pointer"
-      }
-    }, action.label || "Acessar") : null;
-  })), props.caption && /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      whiteSpace: "nowrap",
-      mt: 6
-    }
-  }, /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontSize: "xs",
-      color: "text.secondary"
-    }
-  }, props.caption)), !props.title && props.onClose && /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      alignSelf: "flex-end"
-    }
-  }, /* @__PURE__ */React.createElement(CloseButton, {
-    onClick: props.onClose
-  }))));
-}, "NotificationCard");
-
-// src/components/NotificationsMenu/NotificationsMenu.tsx
-var NotificationsMenu = /* @__PURE__ */__name(({
-  notifications,
-  defaultOpen = false,
-  hasMore = false,
-  onLoadMore,
-  onOpenChange,
-  count,
-  onClose,
-  onClearAll
-}) => {
-  const [isOpen, setIsOpen] = React2.useState(defaultOpen);
-  const [openToLeft, setOpenToLeft] = React2.useState(false);
-  const buttonRef = React2.useRef(null);
-  const containerRef = React2.useRef(null);
-  const loadMoreRef = React2.useRef(null);
-  const [showCount, setShowCount] = React2.useState(true);
-  const togglePanel = /* @__PURE__ */__name(() => {
-    setIsOpen(prev => {
-      const next = !prev;
-      onOpenChange?.(next);
-      return next;
-    });
-  }, "togglePanel");
-  React2.useEffect(() => {
-    if (!isOpen || !buttonRef.current) return;
-    const rect = buttonRef.current.getBoundingClientRect();
-    const spaceRight = window.innerWidth - rect.right;
-    const spaceLeft = rect.left;
-    setShowCount(false);
-    setOpenToLeft(spaceRight < 500 && spaceLeft > spaceRight);
-  }, [isOpen]);
-  React2.useEffect(() => {
-    if (!hasMore || !onLoadMore || !loadMoreRef.current) return;
-    const observer = new IntersectionObserver(entries => {
-      if (entries[0].isIntersecting) {
-        onLoadMore();
-      }
-    }, {
-      root: null,
-      rootMargin: "0px",
-      threshold: 1
-    });
-    observer.observe(loadMoreRef.current);
-    return () => {
-      if (loadMoreRef.current) {
-        observer.unobserve(loadMoreRef.current);
-      }
-    };
-  }, [hasMore, onLoadMore, notifications.length]);
-  React2.useEffect(() => {
-    if (!isOpen) return;
-    const handleClickOutside = /* @__PURE__ */__name(event => {
-      if (containerRef.current && !containerRef.current.contains(event.target) && buttonRef.current && !buttonRef.current.contains(event.target)) {
-        setIsOpen(false);
-        onOpenChange?.(false);
-        onClose?.();
-      }
-    }, "handleClickOutside");
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isOpen, onOpenChange, onClose]);
-  return /* @__PURE__ */React2.createElement(Flex, {
-    sx: {
-      position: "relative",
-      justifyContent: "flex-start"
-    }
-  }, /* @__PURE__ */React2.createElement(Box2, {
-    sx: {
-      position: "relative"
-    }
-  }, /* @__PURE__ */React2.createElement(IconButton, {
-    ref: buttonRef,
-    variant: "ghost",
-    sx: {
-      position: "relative",
-      borderRadius: "full",
-      padding: 1,
-      transition: "background-color 0.3s ease",
-      "&:hover": {
-        backgroundColor: "action.background.muted.default"
-      }
-    },
-    onClick: togglePanel
-  }, /* @__PURE__ */React2.createElement(Box2, {
-    sx: {
-      color: "display.text.muted.default"
-    }
-  }, /* @__PURE__ */React2.createElement(Icon2, {
-    icon: "mdi:bell-outline",
-    width: 22,
-    height: 22
-  })), count > 0 && showCount && /* @__PURE__ */React2.createElement(Box2, {
-    sx: {
-      position: "absolute",
-      top: "-2px",
-      right: "-2px",
-      minWidth: "14px",
-      height: "14px",
-      paddingX: 1,
-      borderRadius: "full",
-      backgroundColor: "action.background.negative.default",
-      color: "feedback.text.primary.default",
-      fontSize: "10px",
-      fontWeight: "bold",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      lineHeight: 1
-    }
-  }, count > 99 ? "99+" : count)), isOpen && /* @__PURE__ */React2.createElement("div", {
-    ref: containerRef
-  }, /* @__PURE__ */React2.createElement(Card2, {
-    sx: {
-      position: "absolute",
-      top: "calc(100% + 8px)",
-      left: openToLeft ? "auto" : 0,
-      right: openToLeft ? 0 : "auto",
-      width: notifications.length === 0 ? ["60vw", "300px"] : ["90vw", "600px"],
-      maxHeight: "550px",
-      overflowY: "auto",
-      zIndex: "modal",
-      padding: 0,
-      boxShadow: "xl",
-      borderRadius: "2xl",
-      backgroundColor: "display.background.secondary.default"
-    }
-  }, /* @__PURE__ */React2.createElement(Box2, {
-    sx: {
-      width: "100%"
-    }
-  }, /* @__PURE__ */React2.createElement(Flex, {
-    sx: {
-      flexDirection: "column",
-      gap: 4
-    }
-  }, notifications.length > 0 && onClearAll && /* @__PURE__ */React2.createElement(Flex, {
-    sx: {
-      justifyContent: "flex-end",
-      p: 2,
-      marginBottom: -2
-    }
-  }, /* @__PURE__ */React2.createElement(Button, {
-    variant: "ghost",
-    sx: {
-      borderRadius: "md",
-      padding: 1,
-      paddingLeft: 10,
-      paddingRight: 10,
-      fontSize: "md",
-      color: "display.text.muted.default",
-      border: "1px solid",
-      borderColor: "display.border.default",
-      transition: "all 0.2s ease",
-      display: "flex",
-      alignItems: "center",
-      "&:hover": {
-        backgroundColor: "action.background.muted.default",
-        color: "display.text.default",
-        borderColor: "action.border.default"
-      }
-    },
-    onClick: onClearAll
-  }, /* @__PURE__ */React2.createElement(Icon2, {
-    icon: "delete",
-    width: 16,
-    height: 16
-  }), /* @__PURE__ */React2.createElement(Text2, {
-    sx: {
-      ml: -1,
-      marginTop: -0.4,
-      fontSize: "sm"
-    }
-  }, "Limpar Tudo"))), notifications.length === 0 ? /* @__PURE__ */React2.createElement(Text2, {
-    sx: {
-      color: "display.text.muted.default",
-      textAlign: "center",
-      p: 4
-    }
-  }, "Nenhuma notifica\xE7\xE3o") : notifications.map(notification => {
-    return /* @__PURE__ */React2.createElement(NotificationCard, {
-      key: notification.id,
-      ...notification,
-      onClose: /* @__PURE__ */__name(() => {
-        notification.onClose?.();
-        onClose?.();
-      }, "onClose")
-    });
-  }), hasMore && /* @__PURE__ */React2.createElement("div", {
-    ref: loadMoreRef,
-    style: {
-      height: 1
-    }
-  })))))));
-}, "NotificationsMenu");
-export { NotificationsMenu };