@ttoss/components 2.10.0 → 2.10.2

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,156 +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/NotificationCard/NotificationCard.tsx
-import { Box, Card, CloseButton, Link, Tag, Text } from "@ttoss/ui";
-import * as React from "react";
-var NotificationCard = /* @__PURE__ */__name(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__ */React.createElement(Card, {
-    sx: {
-      ...sxMap[props.type].card,
-      width: "full"
-    }
-  }, props.title && /* @__PURE__ */React.createElement(Card.Title, {
-    sx: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      fontSize: ["md", "xl"],
-      paddingY: ["1", "2", "4"],
-      paddingX: ["2", "4", "8"]
-    }
-  }, /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      display: "inline-flex",
-      alignItems: "flex-start",
-      gap: "2",
-      flexDirection: "row",
-      flexWrap: "wrap"
-    }
-  }, /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      display: "flex",
-      alignItems: "center",
-      gap: "2"
-    }
-  }, /* @__PURE__ */React.createElement(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__ */React.createElement(Tag, {
-      key: index
-    }, tag);
-  }) : /* @__PURE__ */React.createElement(Tag, null, props.tags))), props.onClose && /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      marginLeft: "auto"
-    }
-  }, /* @__PURE__ */React.createElement(CloseButton, {
-    onClick: props.onClose
-  }))), /* @__PURE__ */React.createElement(Card.Body, {
-    sx: {
-      ...sxMap[props.type].card,
-      display: "flex",
-      flexDirection: "column",
-      gap: "2",
-      paddingY: ["1", "2", "4"],
-      paddingX: ["2", "4", "8"]
-    }
-  }, /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      display: "flex",
-      justifyContent: "space-between",
-      minHeight: shouldAddMinHeight ? "40px" : "auto",
-      alignItems: shouldCenterVerticallyWithoutTitle ? "center" : shouldCenterVerticallyWithTitle ? "center" : "flex-start",
-      width: "100%",
-      gap: "4"
-    }
-  }, /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      flex: 1
-    }
-  }, /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontSize: ["sm", "md"]
-    }
-  }, props.message))), props.actions && props.actions.length > 0 && /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      display: "flex",
-      flexDirection: "column",
-      gap: 2,
-      mt: 2
-    }
-  }, props.actions.map((action, index) => {
-    return action.action === "open_url" ? /* @__PURE__ */React.createElement(Link, {
-      key: index,
-      href: action.url,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      sx: {
-        color: "action.text.accent.default",
-        cursor: "pointer"
-      }
-    }, action.label || "Acessar") : null;
-  })), props.caption && /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      whiteSpace: "nowrap",
-      mt: 6
-    }
-  }, /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontSize: "xs",
-      color: "text.secondary"
-    }
-  }, props.caption)), !props.title && props.onClose && /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      alignSelf: "flex-end"
-    }
-  }, /* @__PURE__ */React.createElement(CloseButton, {
-    onClick: props.onClose
-  }))));
-}, "NotificationCard");
-export { NotificationCard };