@ttoss/components 2.14.24 → 2.14.26

package/dist/NavList/index.mjs

@@ -1,252 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Icon } from "@ttoss/react-icons";
-import { Divider, Flex, Link, Text } from "@ttoss/ui";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
-
-//#region src/components/NavList/NavList.tsx
-var getVariantStyles = 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");
-  }
-};
-var NavListItemComponent = ({
-  item,
-  onItemClick,
-  variantStyles,
-  iconSize,
-  LinkComponent = Link,
-  showDivider = false
-}) => {
-  const handleClick = event => {
-    if (item.disabled) {
-      event.preventDefault();
-      return;
-    }
-    item.onClick?.(event);
-    onItemClick?.(item);
-  };
-  const itemStyles = {
-    ...variantStyles.item,
-    ...(item.active ? variantStyles.activeItem : {}),
-    ...(item.disabled ? {
-      opacity: .5,
-      cursor: "not-allowed",
-      pointerEvents: "none"
-    } : {})
-  };
-  const isDefaultLink = LinkComponent === Link;
-  const linkContent = /* @__PURE__ */jsxs(Flex, {
-    sx: {
-      alignItems: "center",
-      gap: "2",
-      color: "navigation.text.primary.default"
-    },
-    children: [item.icon && /* @__PURE__ */jsx(Icon, {
-      icon: item.icon,
-      width: iconSize ?? variantStyles.icon.size,
-      height: iconSize ?? variantStyles.icon.size
-    }), /* @__PURE__ */jsx(Text, {
-      children: item.label
-    })]
-  });
-  return /* @__PURE__ */jsxs(Fragment, {
-    children: [isDefaultLink ? /* @__PURE__ */jsx(LinkComponent, {
-      href: item.href,
-      onClick: handleClick,
-      sx: itemStyles,
-      "aria-disabled": item.disabled,
-      "aria-current": item.active ? "page" : void 0,
-      quiet: true,
-      children: linkContent
-    }) : /* @__PURE__ */jsx(Link, {
-      as: LinkComponent,
-      href: item.href,
-      onClick: handleClick,
-      sx: itemStyles,
-      "aria-disabled": item.disabled,
-      "aria-current": item.active ? "page" : void 0,
-      quiet: true,
-      children: linkContent
-    }), showDivider && /* @__PURE__ */jsx(Divider, {
-      sx: {
-        marginY: "2"
-      }
-    })]
-  });
-};
-var NavList = ({
-  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__ */jsx(Flex, {
-    as: "nav",
-    sx: {
-      ...variantStyles.container,
-      ...sx
-    },
-    role: "navigation",
-    children: processedGroups.map((group, groupIndex) => {
-      return /* @__PURE__ */jsxs(React.Fragment, {
-        children: [group.label && /* @__PURE__ */jsx(Text, {
-          sx: variantStyles.groupLabel,
-          as: "div",
-          role: "heading",
-          children: group.label
-        }), /* @__PURE__ */jsx(Flex, {
-          sx: {
-            flexDirection: "column",
-            gap: variantStyles.container.gap
-          },
-          children: group.items.map((item, itemIndex) => {
-            const isLastItem = itemIndex === group.items.length - 1;
-            return /* @__PURE__ */jsx(NavListItemComponent, {
-              item,
-              onItemClick,
-              variantStyles,
-              iconSize,
-              LinkComponent,
-              showDivider: item.divider || isLastItem && group.divider
-            }, item.id || `${group.id}-item-${itemIndex}`);
-          })
-        })]
-      }, group.id || `group-${groupIndex}`);
-    })
-  });
-};
-NavList.displayName = "NavList";
-
-//#endregion
-export { NavList };

package/dist/NotificationCard/index.d.mts

@@ -1,22 +0,0 @@
-
-import * as React from "react";
-
-//#region src/components/NotificationCard/NotificationCard.d.ts
-type NotificationType = 'success' | 'error' | 'warning' | 'info' | 'neutral';
-type NotificationAction = {
-  action?: 'open_url';
-  url?: string;
-  label?: string;
-};
-type NotificationCardProps = {
-  type: NotificationType;
-  title?: string | React.ReactNode;
-  message: string | React.ReactNode;
-  actions?: NotificationAction[];
-  caption?: string | React.ReactNode;
-  tags?: string[] | React.ReactNode;
-  onClose?: () => void;
-};
-declare const NotificationCard: (props: NotificationCardProps) => import("react/jsx-runtime").JSX.Element;
-//#endregion
-export { NotificationAction, NotificationCard, NotificationCardProps };

package/dist/NotificationCard/index.mjs

@@ -1,173 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Icon } from "@ttoss/react-icons";
-import { Box, Card, CloseButton, Link, Tag, Text } from "@ttoss/ui";
-import { jsx, jsxs } from "react/jsx-runtime";
-import "react";
-
-//#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
-export { NotificationCard };

package/dist/NotificationsMenu/index.d.mts

@@ -1,47 +0,0 @@
-
-import * as React from "react";
-
-//#region src/components/NotificationCard/NotificationCard.d.ts
-type NotificationType = 'success' | 'error' | 'warning' | 'info' | 'neutral';
-type NotificationAction = {
-  action?: 'open_url';
-  url?: string;
-  label?: string;
-};
-type NotificationCardProps = {
-  type: NotificationType;
-  title?: string | React.ReactNode;
-  message: string | React.ReactNode;
-  actions?: NotificationAction[];
-  caption?: string | React.ReactNode;
-  tags?: string[] | React.ReactNode;
-  onClose?: () => void;
-};
-//#endregion
-//#region src/components/NotificationsMenu/NotificationsMenu.d.ts
-type Notification = NotificationCardProps & {
-  id: string;
-  group?: string;
-};
-type Props = {
-  notifications: Notification[];
-  defaultOpen?: boolean;
-  hasMore?: boolean;
-  count: number;
-  onLoadMore?: () => void;
-  onOpenChange?: (isOpen: boolean) => void;
-  onClose?: () => void;
-  onClearAll?: () => void;
-};
-declare const NotificationsMenu: ({
-  notifications,
-  defaultOpen,
-  hasMore,
-  onLoadMore,
-  onOpenChange,
-  count,
-  onClose,
-  onClearAll
-}: Props) => import("react/jsx-runtime").JSX.Element;
-//#endregion
-export { Notification, NotificationsMenu };