@ttoss/components 2.10.1 → 2.10.2

package/dist/esm/Menu/index.js

@@ -1,131 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Icon } from "../chunk-2R7AUPJL.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

@@ -1,65 +0,0 @@
-/** 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

@@ -1,246 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Icon } from "../chunk-2R7AUPJL.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

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

package/dist/esm/NotificationsMenu/index.js

@@ -1,205 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { NotificationCard } from "../chunk-4GBVRL7E.js";
-import { Icon } from "../chunk-2R7AUPJL.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

@@ -1,29 +0,0 @@
-/** 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 };