@ttoss/components 2.14.19 → 2.14.21

package/dist/NotificationsMenu/index.mjs

@@ -0,0 +1,380 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { Icon } from "@ttoss/react-icons";
+import { Box, Button, Card, CloseButton, Flex, IconButton, Link, Tag, Text } from "@ttoss/ui";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#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
+//#region src/components/NotificationsMenu/NotificationsMenu.tsx
+const NotificationsMenu = ({
+  notifications,
+  defaultOpen = false,
+  hasMore = false,
+  onLoadMore,
+  onOpenChange,
+  count,
+  onClose,
+  onClearAll
+}) => {
+  const [isOpen, setIsOpen] = React.useState(defaultOpen);
+  const [openToLeft, setOpenToLeft] = React.useState(false);
+  const buttonRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const loadMoreRef = React.useRef(null);
+  const [showCount, setShowCount] = React.useState(true);
+  const togglePanel = () => {
+    setIsOpen(prev => {
+      const next = !prev;
+      onOpenChange?.(next);
+      return next;
+    });
+  };
+  React.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]);
+  React.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]);
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = event => {
+      if (containerRef.current && !containerRef.current.contains(event.target) && buttonRef.current && !buttonRef.current.contains(event.target)) {
+        setIsOpen(false);
+        onOpenChange?.(false);
+        onClose?.();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen, onOpenChange, onClose]);
+  return /* @__PURE__ */jsx(Flex, {
+    sx: {
+      position: "relative",
+      justifyContent: "flex-start"
+    },
+    children: /* @__PURE__ */jsxs(Box, {
+      sx: {
+        position: "relative"
+      },
+      children: [/* @__PURE__ */jsxs(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,
+        children: [/* @__PURE__ */jsx(Box, {
+          sx: {
+            color: "display.text.muted.default"
+          },
+          children: /* @__PURE__ */jsx(Icon, {
+            icon: "mdi:bell-outline",
+            width: 22,
+            height: 22
+          })
+        }), count > 0 && showCount && /* @__PURE__ */jsx(Box, {
+          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
+          },
+          children: count > 99 ? "99+" : count
+        })]
+      }), isOpen && /* @__PURE__ */jsx("div", {
+        ref: containerRef,
+        children: /* @__PURE__ */jsx(Card, {
+          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"
+          },
+          children: /* @__PURE__ */jsx(Box, {
+            sx: {
+              width: "100%"
+            },
+            children: /* @__PURE__ */jsxs(Flex, {
+              sx: {
+                flexDirection: "column",
+                gap: 4
+              },
+              children: [notifications.length > 0 && onClearAll && /* @__PURE__ */jsx(Flex, {
+                sx: {
+                  justifyContent: "flex-end",
+                  p: 2,
+                  marginBottom: -2
+                },
+                children: /* @__PURE__ */jsxs(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,
+                  children: [/* @__PURE__ */jsx(Icon, {
+                    icon: "delete",
+                    width: 16,
+                    height: 16
+                  }), /* @__PURE__ */jsx(Text, {
+                    sx: {
+                      ml: -1,
+                      marginTop: -.4,
+                      fontSize: "sm"
+                    },
+                    children: "Limpar Tudo"
+                  })]
+                })
+              }), notifications.length === 0 ? /* @__PURE__ */jsx(Text, {
+                sx: {
+                  color: "display.text.muted.default",
+                  textAlign: "center",
+                  p: 4
+                },
+                children: "Nenhuma notificação"
+              }) : notifications.map(notification => {
+                return /* @__PURE__ */jsx(NotificationCard, {
+                  ...notification,
+                  onClose: () => {
+                    notification.onClose?.();
+                    onClose?.();
+                  }
+                }, notification.id);
+              }), hasMore && /* @__PURE__ */jsx("div", {
+                ref: loadMoreRef,
+                style: {
+                  height: 1
+                }
+              })]
+            })
+          })
+        })
+      })]
+    })
+  });
+};
+
+//#endregion
+export { NotificationsMenu };

package/dist/Search/index.d.mts

@@ -0,0 +1,18 @@
+
+import { InputProps } from "@ttoss/ui";
+
+//#region src/components/Search/Search.d.ts
+type SearchProps = Omit<InputProps, 'onChange'> & {
+  loading?: boolean;
+  debounce?: number;
+  onChange: (value?: InputProps['value']) => void;
+};
+declare const Search: ({
+  value,
+  defaultValue,
+  loading,
+  onChange,
+  ...props
+}: SearchProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Search, SearchProps };

package/dist/{esm/Search/index.js → Search/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/Search/Search.tsx
-import * as React from "react";
 import { Input } from "@ttoss/ui";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import { useDebounce } from "@ttoss/react-hooks";
-var Search = /* @__PURE__ */__name(({
+
+//#region src/components/Search/Search.tsx
+const Search = ({
   value,
   defaultValue,
   loading,
@@ -17,13 +17,15 @@ var Search = /* @__PURE__ */__name(({
   React.useEffect(() => {
     onChange(debouncedValue);
   }, [debouncedValue, onChange]);
-  return /* @__PURE__ */React.createElement(Input, {
+  return /* @__PURE__ */jsx(Input, {
     leadingIcon: loading ? "loading" : "search",
     defaultValue: text,
-    onChange: /* @__PURE__ */__name(e => {
+    onChange: e => {
       return setText(e.target.value);
-    }, "onChange"),
+    },
     ...props
   });
-}, "Search");
+};
+
+//#endregion
 export { Search };

package/dist/SpotlightCard/index.d.mts

@@ -0,0 +1,36 @@
+
+import { IconType } from "@ttoss/react-icons";
+import { ButtonProps } from "@ttoss/ui";
+import * as React from "react";
+
+//#region src/components/SpotlightCard/SpotlightCard.d.ts
+type ButtonPropType = ButtonProps | React.ReactNode;
+type SpotlightCardProps = {
+  icon: IconType;
+  /**
+   * Title of the card. Pass a ReactNode for styling.
+   */
+  title: string | React.ReactNode;
+  /**
+   * Badge text. Renders as a badge/tag next to the title.
+   */
+  badge?: string | React.ReactNode;
+  description: string;
+  firstButton?: ButtonPropType;
+  secondButton?: ButtonPropType;
+  variant?: 'accent' | 'primary';
+};
+declare const SpotlightCard: {
+  ({
+    icon,
+    title,
+    badge,
+    description,
+    firstButton,
+    secondButton,
+    variant
+  }: SpotlightCardProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { SpotlightCard, SpotlightCardProps };

package/dist/SpotlightCard/index.mjs

@@ -0,0 +1,219 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { Icon } from "@ttoss/react-icons";
+import { Box, Button, Card, Flex, Text, keyframes } from "@ttoss/ui";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/SpotlightCard/SpotlightCard.tsx
+const SpotlightCard = ({
+  icon,
+  title,
+  badge,
+  description,
+  firstButton,
+  secondButton,
+  variant = "accent"
+}) => {
+  const gradientFlow = keyframes({
+    "0%": {
+      backgroundPosition: "0% 50%"
+    },
+    "50%": {
+      backgroundPosition: "100% 50%"
+    },
+    "100%": {
+      backgroundPosition: "0% 50%"
+    }
+  });
+  const hasButtons = !!firstButton || !!secondButton;
+  const isAccent = variant === "accent";
+  const textColorToken = isAccent ? "action.text.accent.default" : "action.text.primary.default";
+  const iconColorToken = isAccent ? "action.text.accent.default" : "display.text.accent.default";
+  const iconBgToken = isAccent ? "rgba(255,255,255,0.3)" : "action.background.secondary.default";
+  const badgeBgToken = isAccent ? "action.background.primary.default" : "action.background.accent.default";
+  const badgeTextToken = isAccent ? "action.text.primary.default" : "action.text.accent.default";
+  const btnPrimaryVariant = isAccent ? "primary" : "accent";
+  const btnPrimaryColorToken = isAccent ? "action.text.primary.default" : "action.text.accent.default";
+  const btnSecondaryColorToken = textColorToken;
+  const btnSecondaryBorderColorToken = isAccent ? "currentColor" : "display.border.muted.default";
+  const renderButton = (prop, config) => {
+    if (!prop) return null;
+    if (React.isValidElement(prop)) return prop;
+    if (typeof prop !== "object") return prop;
+    const {
+      sx,
+      ...rest
+    } = prop;
+    const {
+      variant: defaultVariant,
+      textColor,
+      styles = {}
+    } = config;
+    return /* @__PURE__ */jsx(Button, {
+      variant: defaultVariant,
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "2",
+        px: "6",
+        py: "3",
+        fontSize: "15px",
+        fontWeight: "bold",
+        whiteSpace: "nowrap",
+        transition: "all 0.2s",
+        color: textColor,
+        ...styles,
+        ...sx
+      },
+      ...rest
+    });
+  };
+  return /* @__PURE__ */jsxs(Card, {
+    sx: {
+      display: "flex",
+      flexDirection: ["row"],
+      flexWrap: "nowrap",
+      alignItems: "center",
+      justifyContent: "space-between",
+      background: t => {
+        const theme = t;
+        const bgStart = isAccent ? theme.colors?.action?.background?.accent?.default : theme.colors?.action?.background?.primary?.default;
+        const bgMiddle = isAccent ? theme.colors?.action?.background?.accent?.active : theme.colors?.action?.background?.secondary?.default;
+        if (isAccent) return `linear-gradient(270deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%), 
+                    linear-gradient(0deg, ${bgStart}, ${bgStart})`;
+        return `linear-gradient(270deg, ${bgStart}, ${bgMiddle}, ${bgStart})`;
+      },
+      backgroundSize: isAccent ? "200% 100%, auto" : "400% 400%",
+      animation: `${gradientFlow} 6s ease infinite`,
+      width: "100%",
+      minHeight: "104px",
+      borderRadius: "xl",
+      boxShadow: "0 4px 20px rgba(0,0,0,0.1)",
+      py: "7",
+      px: "8",
+      gap: "5",
+      color: textColorToken,
+      overflow: "hidden",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: isAccent ? "transparent" : "display.border.muted.default"
+    },
+    "data-testid": "spotlight-card",
+    children: [/* @__PURE__ */jsxs(Flex, {
+      sx: {
+        alignItems: "center",
+        gap: "5",
+        flex: 1,
+        minWidth: 0
+      },
+      children: [/* @__PURE__ */jsx(Box, {
+        sx: {
+          width: 64,
+          height: 64,
+          borderRadius: "2xl",
+          backgroundColor: iconBgToken,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+          color: iconColorToken
+        },
+        children: /* @__PURE__ */jsx(Icon, {
+          icon,
+          width: 32
+        })
+      }), /* @__PURE__ */jsxs(Box, {
+        sx: {
+          minWidth: 0
+        },
+        children: [/* @__PURE__ */jsxs(Text, {
+          as: "div",
+          sx: {
+            fontFamily: "mono",
+            fontSize: "32px",
+            lineHeight: 1.1,
+            color: "inherit",
+            whiteSpace: "nowrap",
+            display: "flex",
+            alignItems: "center",
+            gap: "3"
+          },
+          children: [title, badge && /* @__PURE__ */jsx(Box, {
+            as: "span",
+            sx: {
+              backgroundColor: badgeBgToken,
+              color: badgeTextToken,
+              fontFamily: "mono",
+              fontWeight: "bold",
+              fontSize: "11px",
+              lineHeight: 1,
+              paddingX: "6px",
+              paddingY: "3px",
+              borderRadius: "md",
+              textTransform: "uppercase",
+              letterSpacing: "0.05em",
+              display: "inline-flex",
+              alignItems: "center",
+              boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+              transform: "translateY(3px)"
+            },
+            children: badge
+          })]
+        }), /* @__PURE__ */jsx(Text, {
+          as: "div",
+          sx: {
+            fontFamily: "body",
+            fontWeight: 400,
+            fontSize: "16px",
+            color: "inherit",
+            opacity: .9,
+            mt: "1",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            display: "-webkit-box",
+            WebkitLineClamp: 2,
+            WebkitBoxOrient: "vertical"
+          },
+          children: description
+        })]
+      })]
+    }), hasButtons && /* @__PURE__ */jsxs(Flex, {
+      sx: {
+        gap: "4",
+        alignItems: "center",
+        flexShrink: 0,
+        ml: "auto"
+      },
+      children: [renderButton(firstButton, {
+        variant: btnPrimaryVariant,
+        textColor: btnPrimaryColorToken,
+        styles: {
+          ":hover": {
+            transform: "translateY(-1px)"
+          }
+        }
+      }), renderButton(secondButton, {
+        variant: "secondary",
+        textColor: btnSecondaryColorToken,
+        styles: {
+          backgroundColor: "transparent",
+          borderWidth: "1px",
+          borderStyle: "solid",
+          borderColor: btnSecondaryBorderColorToken,
+          opacity: isAccent ? .6 : 1,
+          cursor: "pointer",
+          ":hover": {
+            backgroundColor: "rgba(255,255,255,0.2)",
+            opacity: 1,
+            borderColor: btnSecondaryBorderColorToken
+          }
+        }
+      })]
+    })]
+  });
+};
+SpotlightCard.displayName = "SpotlightCard";
+
+//#endregion
+export { SpotlightCard };