@ttoss/components 2.10.2 → 2.11.0

package/dist/esm/SpotlightCard/index.js

@@ -0,0 +1,212 @@
+/** 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/SpotlightCard/SpotlightCard.tsx
+import { Box, Button, Card, Flex, keyframes, Text } from "@ttoss/ui";
+import * as React from "react";
+var SpotlightCard = /* @__PURE__ */__name(({
+  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 = /* @__PURE__ */__name((prop, config) => {
+    if (!prop) return null;
+    if (/* @__PURE__ */React.isValidElement(prop)) return prop;
+    if (typeof prop !== "object") return prop;
+    const {
+      sx,
+      ...rest
+    } = prop;
+    const {
+      variant: defaultVariant,
+      textColor,
+      styles = {}
+    } = config;
+    return /* @__PURE__ */React.createElement(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
+    });
+  }, "renderButton");
+  return /* @__PURE__ */React.createElement(Card, {
+    sx: {
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "nowrap",
+      alignItems: "center",
+      justifyContent: "space-between",
+      background: /* @__PURE__ */__name(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})`;
+      }, "background"),
+      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"
+  }, /* @__PURE__ */React.createElement(Flex, {
+    sx: {
+      alignItems: "center",
+      gap: "5",
+      flex: 1,
+      minWidth: 0
+    }
+  }, /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      width: 64,
+      height: 64,
+      borderRadius: "2xl",
+      backgroundColor: iconBgToken,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      color: iconColorToken
+    }
+  }, /* @__PURE__ */React.createElement(Icon, {
+    icon,
+    width: 32
+  })), /* @__PURE__ */React.createElement(Box, {
+    sx: {
+      minWidth: 0
+    }
+  }, /* @__PURE__ */React.createElement(Text, {
+    as: "div",
+    sx: {
+      fontFamily: "mono",
+      // Tamanho da fonte aumentado para dar mais presença ao OneClick
+      fontSize: "32px",
+      lineHeight: 1.1,
+      color: "inherit",
+      whiteSpace: "nowrap",
+      display: "flex",
+      alignItems: "center",
+      gap: "3"
+    }
+  }, title, badge && /* @__PURE__ */React.createElement(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)"
+    }
+  }, badge)), /* @__PURE__ */React.createElement(Text, {
+    as: "div",
+    sx: {
+      fontFamily: "body",
+      fontWeight: 400,
+      fontSize: "16px",
+      color: "inherit",
+      opacity: 0.9,
+      mt: "1",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      display: "-webkit-box",
+      WebkitLineClamp: 2,
+      WebkitBoxOrient: "vertical"
+    }
+  }, description))), hasButtons && /* @__PURE__ */React.createElement(Flex, {
+    sx: {
+      gap: "4",
+      alignItems: "center",
+      flexShrink: 0,
+      ml: "auto"
+    }
+  }, 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 ? 0.6 : 1,
+      cursor: "pointer",
+      ":hover": {
+        backgroundColor: "rgba(255,255,255,0.2)",
+        opacity: 1,
+        borderColor: btnSecondaryBorderColorToken
+      }
+    }
+  })));
+}, "SpotlightCard");
+SpotlightCard.displayName = "SpotlightCard";
+export { SpotlightCard };

package/dist/esm/Table/index.js

@@ -0,0 +1,63 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import * as React from 'react';
+import { __name } from "../chunk-V4MHYKRI.js";
+
+// src/components/Table/Table.tsx
+import { Box } from "@ttoss/ui";
+import { createCell, createColumnHelper, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+var Table = /* @__PURE__ */__name(props => {
+  return /* @__PURE__ */React.createElement(Box, {
+    as: "table",
+    ...props
+  });
+}, "Table");
+var TableHead = /* @__PURE__ */__name(props => {
+  return /* @__PURE__ */React.createElement(Box, {
+    as: "thead",
+    ...props
+  });
+}, "TableHead");
+var TableBody = /* @__PURE__ */__name(props => {
+  return /* @__PURE__ */React.createElement(Box, {
+    as: "tbody",
+    ...props
+  });
+}, "TableBody");
+var TableRow = /* @__PURE__ */__name(props => {
+  return /* @__PURE__ */React.createElement(Box, {
+    as: "tr",
+    ...props
+  });
+}, "TableRow");
+var TableCell = /* @__PURE__ */__name(props => {
+  return /* @__PURE__ */React.createElement(Box, {
+    as: "td",
+    ...props
+  });
+}, "TableCell");
+var TableHeader = /* @__PURE__ */__name(props => {
+  return /* @__PURE__ */React.createElement(Box, {
+    as: "th",
+    ...props
+  });
+}, "TableHeader");
+var TableCaption = /* @__PURE__ */__name(props => {
+  return /* @__PURE__ */React.createElement(Box, {
+    as: "caption",
+    ...props
+  });
+}, "TableCaption");
+var TableFooter = /* @__PURE__ */__name(props => {
+  return /* @__PURE__ */React.createElement(Box, {
+    as: "tfoot",
+    ...props
+  });
+}, "TableFooter");
+Table.Head = TableHead;
+Table.Body = TableBody;
+Table.Row = TableRow;
+Table.Cell = TableCell;
+Table.Header = TableHeader;
+Table.Caption = TableCaption;
+Table.Footer = TableFooter;
+export { Table, createCell, createColumnHelper, flexRender, getCoreRowModel, useReactTable };

package/dist/esm/Tabs/index.js

@@ -0,0 +1,75 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import * as React from 'react';
+import { __name } from "../chunk-V4MHYKRI.js";
+
+// src/components/Tabs/Tabs.tsx
+import { Box } from "@ttoss/ui";
+import { Tab, TabList, TabPanel, Tabs as ReactTabs } from "react-tabs";
+var Tabs = /* @__PURE__ */__name(props => {
+  const {
+    sx: customSx,
+    ...restProps
+  } = props;
+  return /* @__PURE__ */React.createElement(Box, {
+    sx: /* @__PURE__ */__name(({
+      colors
+    }) => {
+      const themeColors = colors;
+      return {
+        /**
+        * Tabs
+        */
+        ".react-tabs": {
+          WebkitTapHighlightColor: "transparent"
+        },
+        ".react-tabs__tab-list": {
+          borderBottom: "md",
+          borderColor: themeColors?.input?.border?.muted?.default,
+          paddingLeft: 0
+        },
+        ".react-tabs__tab--selected": {
+          backgroundColor: "transparent",
+          border: "none",
+          borderBottom: "lg",
+          borderColor: themeColors?.input?.border?.accent?.default
+        },
+        ".react-tabs__tab": {
+          color: themeColors?.input?.text?.secondary?.default,
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "2",
+          padding: "3",
+          cursor: "pointer",
+          position: "relative",
+          listStyle: "none"
+        },
+        ".react-tabs__tab--disabled": {
+          cursor: "not-allowed",
+          color: themeColors?.input?.text?.muted?.default
+        },
+        ".react-tabs__tab:focus": {
+          outline: "none"
+        },
+        ".react-tabs__tab:focus:after": {
+          position: "absolute",
+          height: "min",
+          left: "-2",
+          right: "-2",
+          bottom: "-3"
+        },
+        ".react-tabs__tab-panel": {
+          display: "none"
+        },
+        ".react-tabs__tab-panel--selected": {
+          display: "block"
+        },
+        ...customSx
+      };
+    }, "sx"),
+    ...restProps
+  }, /* @__PURE__ */React.createElement(ReactTabs, restProps, props.children));
+}, "Tabs");
+Tabs.TabList = TabList;
+Tabs.Tab = Tab;
+Tabs.TabPanel = TabPanel;
+export { Tabs };

package/dist/esm/Toast/index.js

@@ -0,0 +1,38 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { __name } from "../chunk-V4MHYKRI.js";
+
+// src/components/Toast/Toast.tsx
+import { css as createClassName } from "@emotion/css";
+import { css as transformStyleObject } from "@theme-ui/css";
+import { Box, useTheme } from "@ttoss/ui";
+import * as React from "react";
+import { toast as toastReactToastify, ToastContainer as ReactToastifyToastContainer } from "react-toastify";
+var ToastContainer = /* @__PURE__ */__name(props => {
+  const {
+    theme
+  } = useTheme();
+  const className = React.useMemo(() => {
+    const styles = transformStyleObject({
+      ".Toastify__toast-container": {}
+    })(theme);
+    return createClassName(styles);
+  }, [theme]);
+  return /* @__PURE__ */React.createElement(Box, {
+    className,
+    sx: /* @__PURE__ */__name(({
+      colors,
+      fonts
+    }) => {
+      const themeColors = colors;
+      return {
+        "--toastify-font-family": fonts?.body,
+        "--toastify-color-light": themeColors?.feedback?.background?.primary?.default
+      };
+    }, "sx")
+  }, /* @__PURE__ */React.createElement(ReactToastifyToastContainer, {
+    className,
+    ...props
+  }));
+}, "ToastContainer");
+var toast = toastReactToastify;
+export { ToastContainer, toast };

package/dist/esm/chunk-6LHIQ5YP.js

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

package/dist/esm/chunk-V4MHYKRI.js

@@ -0,0 +1,7 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", {
+  value,
+  configurable: true
+});
+export { __name };