@ttoss/components 2.14.20 → 2.14.22

package/dist/esm/LockedOverlay/index.js

@@ -1,316 +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/LockedOverlay/LockedOverlay.tsx
-import { Icon as Icon2 } from "@ttoss/react-icons";
-import { Button as Button2, Card as Card2, Flex as Flex2 } from "@ttoss/ui";
-
-// src/components/SpotlightCard/SpotlightCard.tsx
-import { Icon } from "@ttoss/react-icons";
-import { Box, Button, Card, Flex, keyframes, Text } from "@ttoss/ui";
-import * as React2 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__ */React2.isValidElement(prop)) return prop;
-    if (typeof prop !== "object") return prop;
-    const {
-      sx,
-      ...rest
-    } = prop;
-    const {
-      variant: defaultVariant,
-      textColor,
-      styles = {}
-    } = config;
-    return /* @__PURE__ */React2.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__ */React2.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__ */React2.createElement(Flex, {
-    sx: {
-      alignItems: "center",
-      gap: "5",
-      flex: 1,
-      minWidth: 0
-    }
-  }, /* @__PURE__ */React2.createElement(Box, {
-    sx: {
-      width: 64,
-      height: 64,
-      borderRadius: "2xl",
-      backgroundColor: iconBgToken,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      flexShrink: 0,
-      color: iconColorToken
-    }
-  }, /* @__PURE__ */React2.createElement(Icon, {
-    icon,
-    width: 32
-  })), /* @__PURE__ */React2.createElement(Box, {
-    sx: {
-      minWidth: 0
-    }
-  }, /* @__PURE__ */React2.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__ */React2.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__ */React2.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__ */React2.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";
-
-// src/components/LockedOverlay/LockedOverlay.tsx
-var LockedOverlay = /* @__PURE__ */__name(({
-  isOpen,
-  onRequestClose,
-  header,
-  firstButton,
-  secondButton,
-  children,
-  actions,
-  sx,
-  zIndex = 1
-}) => {
-  const content = /* @__PURE__ */React.createElement(Card2, {
-    className: "lockedoverlay-card",
-    role: "dialog",
-    "aria-modal": true,
-    sx: {
-      width: "full",
-      maxWidth: "620px",
-      borderRadius: "lg",
-      overflow: "auto",
-      border: "none",
-      boxShadow: "none"
-    }
-  }, /* @__PURE__ */React.createElement(Flex2, {
-    sx: {
-      width: "full",
-      paddingX: "6",
-      paddingY: "4"
-    }
-  }, /* @__PURE__ */React.createElement(SpotlightCard, {
-    icon: header.icon,
-    title: header.title,
-    description: header.description,
-    variant: header.variant || "primary",
-    firstButton,
-    secondButton
-  })), /* @__PURE__ */React.createElement(Card2.Body, {
-    sx: {
-      px: ["5", "7"],
-      py: ["6", "7"],
-      gap: "6",
-      width: "full"
-    }
-  }, children, actions && actions.length > 0 && /* @__PURE__ */React.createElement(Card2.Footer, null, /* @__PURE__ */React.createElement(Flex2, {
-    className: "lockedoverlay-footer",
-    sx: {
-      flexDirection: "column",
-      gap: "4",
-      alignItems: "center",
-      width: "full",
-      paddingX: "6",
-      marginTop: "8"
-    }
-  }, actions.map((action, index) => {
-    return /* @__PURE__ */React.createElement(Button2, {
-      key: index,
-      variant: action.variant,
-      onClick: action.onClick,
-      sx: {
-        width: "full",
-        justifyContent: "center"
-      }
-    }, action.icon && /* @__PURE__ */React.createElement(Icon2, {
-      icon: action.icon
-    }), action.label);
-  })))));
-  if (!isOpen) {
-    return null;
-  }
-  return /* @__PURE__ */React.createElement(Flex2, {
-    "data-testid": "lockedoverlay-overlay",
-    onClick: /* @__PURE__ */__name(() => {
-      return onRequestClose?.();
-    }, "onClick"),
-    sx: {
-      position: "absolute",
-      inset: 0,
-      backgroundColor: "rgba(0, 0, 0, 0.5)",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      zIndex,
-      ...sx
-    }
-  }, /* @__PURE__ */React.createElement(Flex2, {
-    onClick: /* @__PURE__ */__name(event => {
-      event.stopPropagation();
-    }, "onClick"),
-    sx: {
-      width: "full",
-      maxWidth: ["95%", "90%", "620px"],
-      maxHeight: "90%",
-      justifyContent: "center",
-      overflow: "auto"
-    }
-  }, content));
-}, "LockedOverlay");
-export { LockedOverlay };

package/dist/esm/Markdown/index.js

@@ -1,23 +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/Markdown/Markdown.tsx
-import { BaseStyles } from "@ttoss/ui";
-import ReactMarkdown from "react-markdown";
-import rehypeRaw from "rehype-raw";
-import remarkGfm from "remark-gfm";
-var Markdown = /* @__PURE__ */__name(({
-  children,
-  sx,
-  ...props
-}) => {
-  return /* @__PURE__ */React.createElement(BaseStyles, {
-    sx
-  }, /* @__PURE__ */React.createElement(ReactMarkdown, {
-    rehypePlugins: [rehypeRaw],
-    remarkPlugins: [remarkGfm],
-    ...props
-  }, children));
-}, "Markdown");
-export { Markdown };

package/dist/esm/MetricCard/index.js

@@ -1,327 +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/MetricCard/MetricCard.tsx
-import { defineMessages, useI18n } from "@ttoss/react-i18n";
-import { Icon } from "@ttoss/react-icons";
-import { Box, Card, Flex, Text, TooltipIcon } from "@ttoss/ui";
-var messages = defineMessages({
-  ofMax: {
-    id: "oYpm71",
-    defaultMessage: [{
-      "type": 0,
-      "value": "of "
-    }, {
-      "type": 1,
-      "value": "max"
-    }]
-  },
-  percentageUsed: {
-    id: "zr0OS6",
-    defaultMessage: [{
-      "type": 1,
-      "value": "percentage"
-    }, {
-      "type": 0,
-      "value": "% used"
-    }]
-  },
-  unlimited: {
-    id: "rskBv4",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Unlimited"
-    }]
-  },
-  infinity: {
-    id: "0EjvY6",
-    defaultMessage: [{
-      "type": 0,
-      "value": "∞"
-    }]
-  },
-  nearLimit: {
-    id: "1DbX9V",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Near limit"
-    }]
-  },
-  reachedLimit: {
-    id: "4NwCn9",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Reached limit"
-    }]
-  }
-});
-var MetricIconWrapper = /* @__PURE__ */__name(({
-  icon
-}) => {
-  return /* @__PURE__ */React.createElement(Flex, {
-    sx: {
-      alignItems: "center",
-      justifyContent: "center",
-      borderRadius: "full",
-      border: "md",
-      borderColor: "display.border.muted.default",
-      backgroundColor: "display.background.muted.default",
-      color: "display.text.secondary.default",
-      width: "48px",
-      height: "48px",
-      flexShrink: 0
-    }
-  }, icon && /* @__PURE__ */React.createElement(Icon, {
-    icon
-  }));
-}, "MetricIconWrapper");
-var MetricCardHeader = /* @__PURE__ */__name(({
-  label,
-  tooltip,
-  isClickable
-}) => {
-  const isTooltipAction = typeof tooltip === "function";
-  const tooltipText = typeof tooltip === "string" ? tooltip : void 0;
-  return /* @__PURE__ */React.createElement(Flex, {
-    sx: {
-      alignItems: "center",
-      gap: "2"
-    }
-  }, /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontSize: "sm",
-      fontWeight: "medium",
-      color: "display.text.secondary.default"
-    }
-  }, label), tooltipText && /* @__PURE__ */React.createElement(TooltipIcon, {
-    icon: "fluent:info-24-regular",
-    tooltip: {
-      children: tooltipText
-    },
-    variant: "info"
-  }), isTooltipAction && /* @__PURE__ */React.createElement(Text, {
-    onClick: /* @__PURE__ */__name(e => {
-      e.stopPropagation();
-      tooltip();
-    }, "onClick"),
-    sx: {
-      fontSize: "sm",
-      color: "display.text.secondary.default",
-      cursor: "pointer",
-      ":hover": {
-        color: "action.text.primary.default"
-      }
-    }
-  }, /* @__PURE__ */React.createElement(Icon, {
-    icon: "fluent:info-24-regular",
-    inline: true
-  })), isClickable && /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontSize: "sm",
-      color: "display.text.secondary.default"
-    }
-  }, /* @__PURE__ */React.createElement(Icon, {
-    icon: "fluent:open-24-regular",
-    inline: true
-  })));
-}, "MetricCardHeader");
-var DateMetricContent = /* @__PURE__ */__name(({
-  metric
-}) => {
-  return /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontSize: "2xl",
-      fontWeight: "bold",
-      color: "display.text.primary.default"
-    }
-  }, metric.date), metric.remainingDaysMessage && /* @__PURE__ */React.createElement(Flex, {
-    sx: {
-      alignItems: "center",
-      gap: "2"
-    }
-  }, /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontSize: "sm",
-      color: metric.isWarning ? "feedback.text.caution.default" : "display.text.secondary.default"
-    }
-  }, /* @__PURE__ */React.createElement(Icon, {
-    icon: metric.isWarning ? "fluent:warning-24-regular" : "fluent:clock-24-regular",
-    inline: true
-  })), /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontSize: "sm",
-      color: metric.isWarning ? "feedback.text.caution.default" : "display.text.secondary.default"
-    }
-  }, metric.remainingDaysMessage)));
-}, "DateMetricContent");
-var PercentageMetricContent = /* @__PURE__ */__name(({
-  metric
-}) => {
-  const {
-    intl
-  } = useI18n();
-  const percentage = metric.max === null || metric.max <= 0 ? null : Math.min(Math.round(metric.current / metric.max * 100), 100);
-  const formatValue = metric.formatValue || (val => {
-    return val.toString();
-  });
-  const showAlert = percentage !== null && metric.showAlertThreshold !== void 0 && percentage >= metric.showAlertThreshold;
-  const isOverLimit = percentage !== null && percentage >= 100;
-  const maxText = metric.max !== null ? formatValue(metric.max) : intl.formatMessage(messages.infinity);
-  return /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(Flex, {
-    sx: {
-      alignItems: "baseline",
-      justifyContent: "space-between",
-      gap: "2"
-    }
-  }, /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontSize: "2xl",
-      fontWeight: "bold",
-      color: "display.text.primary.default"
-    }
-  }, formatValue(metric.current)), /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontSize: "sm",
-      color: "display.text.secondary.default"
-    }
-  }, intl.formatMessage(messages.ofMax, {
-    max: maxText
-  }))), /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      width: "full",
-      height: "8px",
-      backgroundColor: "display.background.secondary.default",
-      borderRadius: "full",
-      overflow: "hidden"
-    }
-  }, /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      height: "full",
-      width: percentage !== null ? `${percentage}%` : "100%",
-      backgroundColor: "action.background.primary.default",
-      borderRadius: "full",
-      transition: "width 0.5s ease-out"
-    }
-  })), /* @__PURE__ */React.createElement(Flex, {
-    sx: {
-      alignItems: "center",
-      justifyContent: "space-between",
-      fontSize: "xs"
-    }
-  }, /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      color: "display.text.secondary.default"
-    }
-  }, percentage !== null ? intl.formatMessage(messages.percentageUsed, {
-    percentage
-  }) : intl.formatMessage(messages.unlimited)), showAlert && !isOverLimit && /* @__PURE__ */React.createElement(Flex, {
-    sx: {
-      alignItems: "center",
-      gap: "1",
-      color: "feedback.text.caution.default"
-    }
-  }, /* @__PURE__ */React.createElement(Icon, {
-    icon: "fluent:warning-24-regular"
-  }), /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontWeight: "medium"
-    }
-  }, intl.formatMessage(messages.nearLimit))), showAlert && isOverLimit && /* @__PURE__ */React.createElement(Flex, {
-    sx: {
-      alignItems: "center",
-      gap: "1",
-      color: "feedback.text.negative.default"
-    }
-  }, /* @__PURE__ */React.createElement(Icon, {
-    icon: "fluent:warning-24-regular"
-  }), /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontWeight: "medium",
-      color: "feedback.text.negative.default"
-    }
-  }, intl.formatMessage(messages.reachedLimit)))));
-}, "PercentageMetricContent");
-var NumberMetricContent = /* @__PURE__ */__name(({
-  metric
-}) => {
-  const {
-    intl
-  } = useI18n();
-  const formatValue = metric.formatValue || (val => {
-    return val.toString();
-  });
-  const maxText = metric.max !== null ? formatValue(metric.max) : intl.formatMessage(messages.infinity);
-  return /* @__PURE__ */React.createElement(React.Fragment, null, /* @__PURE__ */React.createElement(Flex, {
-    sx: {
-      alignItems: "baseline",
-      gap: "3"
-    }
-  }, /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontSize: "2xl",
-      fontWeight: "bold",
-      color: "display.text.primary.default"
-    }
-  }, formatValue(metric.current)), /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontSize: "sm",
-      color: "display.text.secondary.default"
-    }
-  }, intl.formatMessage(messages.ofMax, {
-    max: maxText
-  }))), metric.footerText && /* @__PURE__ */React.createElement(Text, {
-    sx: {
-      fontSize: "xs",
-      color: "display.text.secondary.default",
-      lineHeight: "relaxed",
-      maxWidth: "300px"
-    }
-  }, metric.footerText));
-}, "NumberMetricContent");
-var MetricCard = /* @__PURE__ */__name(({
-  metric,
-  isLoading = false
-}) => {
-  if (isLoading) {
-    return null;
-  }
-  const isClickable = Boolean(metric.onClick || metric.helpArticleAction);
-  return /* @__PURE__ */React.createElement(Card, {
-    onClick: metric.onClick || metric.helpArticleAction,
-    sx: {
-      backgroundColor: "display.background.muted.default",
-      padding: "6",
-      cursor: isClickable ? "pointer" : "default",
-      transition: "all 0.2s ease",
-      minWidth: ["full", "full", "400px"],
-      ":hover": {
-        transform: "scale(1.01)"
-      }
-    }
-  }, /* @__PURE__ */React.createElement(Flex, {
-    sx: {
-      gap: "4",
-      width: "full"
-    }
-  }, /* @__PURE__ */React.createElement(MetricIconWrapper, {
-    icon: metric.icon
-  }), /* @__PURE__ */React.createElement(Flex, {
-    sx: {
-      flex: 1,
-      flexDirection: "column",
-      gap: "2"
-    }
-  }, /* @__PURE__ */React.createElement(MetricCardHeader, {
-    label: metric.label,
-    tooltip: metric.tooltip,
-    isClickable
-  }), metric.type === "date" && /* @__PURE__ */React.createElement(DateMetricContent, {
-    metric
-  }), metric.type === "percentage" && /* @__PURE__ */React.createElement(PercentageMetricContent, {
-    metric
-  }), metric.type === "number" && /* @__PURE__ */React.createElement(NumberMetricContent, {
-    metric
-  }))));
-}, "MetricCard");
-export { MetricCard };