@ttoss/components 2.14.24 → 2.14.26

package/dist/NotificationsMenu/index.mjs

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

@@ -1,18 +0,0 @@
-
-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/Search/index.mjs

@@ -1,31 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Input } from "@ttoss/ui";
-import * as React from "react";
-import { jsx } from "react/jsx-runtime";
-import { useDebounce } from "@ttoss/react-hooks";
-
-//#region src/components/Search/Search.tsx
-var Search = ({
-  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__ */jsx(Input, {
-    leadingIcon: loading ? "loading" : "search",
-    defaultValue: text,
-    onChange: e => {
-      return setText(e.target.value);
-    },
-    ...props
-  });
-};
-
-//#endregion
-export { Search };

package/dist/SpotlightCard/index.d.mts

@@ -1,36 +0,0 @@
-
-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

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

package/dist/Table/index.d.mts

@@ -1,17 +0,0 @@
-
-import { BoxProps } from "@ttoss/ui";
-import { createCell, createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
-
-//#region src/components/Table/Table.d.ts
-declare const Table: {
-  (props: BoxProps): import("react/jsx-runtime").JSX.Element;
-  Head: (props: BoxProps) => import("react/jsx-runtime").JSX.Element;
-  Body: (props: BoxProps) => import("react/jsx-runtime").JSX.Element;
-  Row: (props: BoxProps) => import("react/jsx-runtime").JSX.Element;
-  Cell: (props: BoxProps) => import("react/jsx-runtime").JSX.Element;
-  Header: (props: BoxProps) => import("react/jsx-runtime").JSX.Element;
-  Caption: (props: BoxProps) => import("react/jsx-runtime").JSX.Element;
-  Footer: (props: BoxProps) => import("react/jsx-runtime").JSX.Element;
-};
-//#endregion
-export { Table, createCell, createColumnHelper, flexRender, getCoreRowModel, useReactTable };