@ttoss/components 2.10.2 → 2.11.0

package/dist/esm/Menu/index.js

@@ -0,0 +1,131 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { Icon } from "../chunk-WT55GXBD.js";
+import { __name } from "../chunk-V4MHYKRI.js";
+
+// src/components/Menu/Menu.tsx
+import { Box, Flex } from "@ttoss/ui";
+import * as React from "react";
+var Menu = /* @__PURE__ */__name(({
+  children,
+  sx,
+  menuIcon = "menu-open"
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [stylePos, setStylePos] = React.useState({});
+  const triggerRef = React.useRef(null);
+  const panelRef = React.useRef(null);
+  const toggle = /* @__PURE__ */__name(() => {
+    return setIsOpen(v => {
+      return !v;
+    });
+  }, "toggle");
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const onDocClick = /* @__PURE__ */__name(e => {
+      const t = e.target;
+      if (panelRef.current && !panelRef.current.contains(t) && triggerRef.current && !triggerRef.current.contains(t)) {
+        setIsOpen(false);
+      }
+    }, "onDocClick");
+    document.addEventListener("mousedown", onDocClick);
+    return () => {
+      return document.removeEventListener("mousedown", onDocClick);
+    };
+  }, [isOpen]);
+  React.useLayoutEffect(() => {
+    if (!isOpen) return;
+    let rafId = 0;
+    const getWidth = /* @__PURE__ */__name(() => {
+      const w = sx?.width ?? sx?.maxWidth ?? sx?.minWidth;
+      return Array.isArray(w) ? w[w.length - 1] : w;
+    }, "getWidth");
+    const compute = /* @__PURE__ */__name(() => {
+      const trigger = triggerRef.current;
+      const panel2 = panelRef.current;
+      if (!trigger || !panel2) return;
+      const width = getWidth();
+      if (width) panel2.style.width = typeof width === "number" ? `${width}px` : String(width);
+      const tr = trigger.getBoundingClientRect();
+      const pr = panel2.getBoundingClientRect();
+      const vw = window.innerWidth,
+        vh = window.innerHeight,
+        m = 8;
+      if (pr.width === 0) {
+        rafId = requestAnimationFrame(compute);
+        return;
+      }
+      const left = Math.max(m, Math.min(tr.left + tr.width / 2 - pr.width / 2, vw - pr.width - m));
+      const top = vh - tr.bottom < pr.height + m ? Math.max(m, tr.top - pr.height - m) : tr.bottom + m;
+      setStylePos({
+        position: "fixed",
+        left: `${left}px`,
+        top: `${top}px`,
+        zIndex: 9999,
+        ...(width && {
+          width: typeof width === "number" ? `${width}px` : String(width)
+        })
+      });
+    }, "compute");
+    rafId = requestAnimationFrame(compute);
+    const onResizeScroll = /* @__PURE__ */__name(() => {
+      return rafId = requestAnimationFrame(compute);
+    }, "onResizeScroll");
+    window.addEventListener("resize", onResizeScroll);
+    window.addEventListener("scroll", onResizeScroll, true);
+    return () => {
+      cancelAnimationFrame(rafId);
+      window.removeEventListener("resize", onResizeScroll);
+      window.removeEventListener("scroll", onResizeScroll, true);
+    };
+  }, [isOpen, sx]);
+  const panel = isOpen ? /* @__PURE__ */React.createElement(Flex, {
+    ref: panelRef,
+    sx: {
+      width: ["280px", "320px"],
+      maxHeight: "400px",
+      flexDirection: "column",
+      gap: "3",
+      padding: "3",
+      backgroundColor: "input.background.muted.default",
+      borderRadius: "xl",
+      boxShadow: "xl",
+      overflowY: "auto",
+      border: "md",
+      borderColor: "display.border.muted.default",
+      ...sx
+    },
+    style: {
+      pointerEvents: "auto",
+      ...stylePos
+    }
+  }, /* @__PURE__ */React.createElement(Box, {
+    as: "nav"
+  }, children)) : null;
+  return /* @__PURE__ */React.createElement(Flex, {
+    sx: {
+      position: "relative",
+      display: "inline-block"
+    }
+  }, /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      position: "relative"
+    }
+  }, /* @__PURE__ */React.createElement("button", {
+    ref: triggerRef,
+    onClick: toggle,
+    "aria-haspopup": "true",
+    "aria-expanded": isOpen,
+    style: {
+      background: "transparent",
+      border: 0,
+      padding: 4,
+      cursor: "pointer",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }, /* @__PURE__ */React.createElement(Icon, {
+    icon: menuIcon
+  })), isOpen && panel));
+}, "Menu");
+export { Menu };

package/dist/esm/Modal/index.js

@@ -0,0 +1,65 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import * as React from 'react';
+import { __name } from "../chunk-V4MHYKRI.js";
+
+// src/components/Modal/Modal.tsx
+import { css as transformStyleObject } from "@theme-ui/css";
+import { useResponsiveValue, useTheme } from "@ttoss/ui";
+import ReactModal from "react-modal";
+ReactModal.defaultStyles = {
+  overlay: {},
+  content: {}
+};
+var Modal = /* @__PURE__ */__name(props => {
+  const {
+    theme
+  } = useTheme();
+  const space = theme.space;
+  const padding = useResponsiveValue([space?.["4"], space?.["5"], space?.["5"]]) || 0;
+  const style = {
+    overlay: transformStyleObject({
+      position: "fixed",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      zIndex: "modal",
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ...props.style?.overlay
+    })(theme),
+    content: transformStyleObject({
+      /**
+      * Theme
+      */
+      backgroundColor: "surface",
+      padding,
+      border: "default",
+      borderColor: "surface",
+      borderRadius: "default",
+      /**
+      * General
+      */
+      WebkitOverflowScrolling: "touch",
+      overflow: "auto",
+      position: "relative",
+      top: "0px",
+      left: "0px",
+      right: "0px",
+      bottom: "0px",
+      maxHeight: "90%",
+      maxWidth: "90%",
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ...props.style?.content
+    })(theme)
+  };
+  return /* @__PURE__ */React.createElement(ReactModal, {
+    ...props,
+    style
+  });
+}, "Modal");
+Modal.setAppElement = ReactModal.setAppElement;
+export { Modal };

package/dist/esm/NavList/index.js

@@ -0,0 +1,246 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { Icon } from "../chunk-WT55GXBD.js";
+import { __name } from "../chunk-V4MHYKRI.js";
+
+// src/components/NavList/NavList.tsx
+import { Divider, Flex, Link, Text } from "@ttoss/ui";
+import * as React from "react";
+var getVariantStyles = /* @__PURE__ */__name(variant => {
+  switch (variant) {
+    case "sidebar":
+      return {
+        container: {
+          flexDirection: "column",
+          gap: "1",
+          width: "full"
+        },
+        item: {
+          backgroundColor: "transparent",
+          padding: "3",
+          borderRadius: "none",
+          fontSize: "md",
+          transition: "background-color 0.15s ease",
+          "&:hover": {
+            backgroundColor: "navigation.background.muted.hover",
+            textDecoration: "none"
+          }
+        },
+        activeItem: {
+          backgroundColor: "navigation.background.muted.default",
+          borderLeft: "4px solid",
+          borderColor: "navigation.border.primary.default",
+          paddingLeft: "calc(0.75rem - 4px)"
+        },
+        icon: {
+          size: 20
+        },
+        groupLabel: {
+          fontSize: "xs",
+          fontWeight: "bold",
+          color: "navigation.text.muted.default",
+          textTransform: "uppercase",
+          marginBottom: "2",
+          marginTop: "4"
+        }
+      };
+    case "menu":
+      return {
+        container: {
+          flexDirection: "column",
+          gap: "1",
+          width: "full"
+        },
+        item: {
+          backgroundColor: "transparent",
+          borderRadius: "md",
+          padding: "2",
+          fontSize: "md",
+          transition: "all 0.2s ease",
+          "&:hover": {
+            backgroundColor: "navigation.background.muted.hover",
+            transform: "translateX(4px)",
+            textDecoration: "none"
+          }
+        },
+        activeItem: {
+          backgroundColor: "navigation.background.muted.default",
+          fontWeight: "bold"
+        },
+        icon: {
+          size: 18
+        },
+        groupLabel: {
+          fontSize: "sm",
+          fontWeight: "semibold",
+          color: "display.text.secondary.default",
+          marginBottom: "2",
+          marginTop: "3"
+        }
+      };
+    case "dropdown":
+      return {
+        container: {
+          flexDirection: "column",
+          gap: "1",
+          width: "full"
+        },
+        item: {
+          backgroundColor: "transparent",
+          padding: "2",
+          fontSize: "sm",
+          borderBottom: "sm",
+          borderColor: "display.border.muted.default",
+          transition: "background-color 0.1s ease",
+          "&:hover": {
+            backgroundColor: "navigation.background.muted.hover",
+            textDecoration: "none"
+          }
+        },
+        activeItem: {
+          backgroundColor: "navigation.background.muted.default",
+          fontWeight: "semibold"
+        },
+        icon: {
+          size: 16
+        },
+        groupLabel: {
+          fontSize: "xs",
+          fontWeight: "medium",
+          color: "display.text.secondary.default",
+          marginBottom: "1",
+          marginTop: "2",
+          paddingX: "2"
+        }
+      };
+    default:
+      return getVariantStyles("menu");
+  }
+}, "getVariantStyles");
+var NavListItemComponent = /* @__PURE__ */__name(({
+  item,
+  onItemClick,
+  variantStyles,
+  iconSize,
+  LinkComponent = Link,
+  showDivider = false
+}) => {
+  const handleClick = /* @__PURE__ */__name(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,
+      cursor: "not-allowed",
+      pointerEvents: "none"
+    } : {})
+  };
+  const isDefaultLink = LinkComponent === Link;
+  const linkContent = /* @__PURE__ */React.createElement(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(({
+  items = [],
+  groups = [],
+  variant = "menu",
+  onItemClick,
+  sx,
+  iconSize,
+  LinkComponent
+}) => {
+  const variantStyles = getVariantStyles(variant);
+  const processedGroups = React.useMemo(() => {
+    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] = [];
+        }
+        acc[groupKey].push(item);
+        return acc;
+      }, {});
+      return Object.entries(groupedItems).map(([key, groupItems]) => {
+        return {
+          id: key,
+          label: key === "__ungrouped__" ? void 0 : key,
+          items: groupItems,
+          divider: false
+        };
+      });
+    }
+    return [];
+  }, [items, groups]);
+  return /* @__PURE__ */React.createElement(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");
+NavList.displayName = "NavList";
+export { NavList };

package/dist/esm/NotificationCard/index.js

@@ -0,0 +1,5 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { NotificationCard } from "../chunk-6LHIQ5YP.js";
+import "../chunk-WT55GXBD.js";
+import "../chunk-V4MHYKRI.js";
+export { NotificationCard };

package/dist/esm/NotificationsMenu/index.js

@@ -0,0 +1,205 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { NotificationCard } from "../chunk-6LHIQ5YP.js";
+import { Icon } from "../chunk-WT55GXBD.js";
+import { __name } from "../chunk-V4MHYKRI.js";
+
+// src/components/NotificationsMenu/NotificationsMenu.tsx
+import { Box, Button, Card, Flex, IconButton, Text } from "@ttoss/ui";
+import * as React from "react";
+var NotificationsMenu = /* @__PURE__ */__name(({
+  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 = /* @__PURE__ */__name(() => {
+    setIsOpen(prev => {
+      const next = !prev;
+      onOpenChange?.(next);
+      return next;
+    });
+  }, "togglePanel");
+  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 = /* @__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__ */React.createElement(Flex, {
+    sx: {
+      position: "relative",
+      justifyContent: "flex-start"
+    }
+  }, /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      position: "relative"
+    }
+  }, /* @__PURE__ */React.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__ */React.createElement(Box, {
+    sx: {
+      color: "display.text.muted.default"
+    }
+  }, /* @__PURE__ */React.createElement(Icon, {
+    icon: "mdi:bell-outline",
+    width: 22,
+    height: 22
+  })), count > 0 && showCount && /* @__PURE__ */React.createElement(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
+    }
+  }, count > 99 ? "99+" : count)), isOpen && /* @__PURE__ */React.createElement("div", {
+    ref: containerRef
+  }, /* @__PURE__ */React.createElement(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"
+    }
+  }, /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      width: "100%"
+    }
+  }, /* @__PURE__ */React.createElement(Flex, {
+    sx: {
+      flexDirection: "column",
+      gap: 4
+    }
+  }, notifications.length > 0 && onClearAll && /* @__PURE__ */React.createElement(Flex, {
+    sx: {
+      justifyContent: "flex-end",
+      p: 2,
+      marginBottom: -2
+    }
+  }, /* @__PURE__ */React.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__ */React.createElement(Icon, {
+    icon: "delete",
+    width: 16,
+    height: 16
+  }), /* @__PURE__ */React.createElement(Text, {
+    sx: {
+      ml: -1,
+      marginTop: -0.4,
+      fontSize: "sm"
+    }
+  }, "Limpar Tudo"))), notifications.length === 0 ? /* @__PURE__ */React.createElement(Text, {
+    sx: {
+      color: "display.text.muted.default",
+      textAlign: "center",
+      p: 4
+    }
+  }, "Nenhuma notifica\xE7\xE3o") : notifications.map(notification => {
+    return /* @__PURE__ */React.createElement(NotificationCard, {
+      key: notification.id,
+      ...notification,
+      onClose: /* @__PURE__ */__name(() => {
+        notification.onClose?.();
+        onClose?.();
+      }, "onClose")
+    });
+  }), hasMore && /* @__PURE__ */React.createElement("div", {
+    ref: loadMoreRef,
+    style: {
+      height: 1
+    }
+  })))))));
+}, "NotificationsMenu");
+export { NotificationsMenu };

package/dist/esm/Search/index.js

@@ -0,0 +1,29 @@
+/** 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 { useDebounce } from "@ttoss/react-hooks";
+var Search = /* @__PURE__ */__name(({
+  value,
+  defaultValue,
+  loading,
+  onChange,
+  ...props
+}) => {
+  const [text, setText] = React.useState(value ?? defaultValue);
+  const debouncedValue = useDebounce(text, 500);
+  React.useEffect(() => {
+    onChange(debouncedValue);
+  }, [debouncedValue, onChange]);
+  return /* @__PURE__ */React.createElement(Input, {
+    leadingIcon: loading ? "loading" : "search",
+    defaultValue: text,
+    onChange: /* @__PURE__ */__name(e => {
+      return setText(e.target.value);
+    }, "onChange"),
+    ...props
+  });
+}, "Search");
+export { Search };