@ttoss/components 2.11.6 → 2.12.0

package/dist/esm/LockedOverlay/index.js

@@ -0,0 +1,316 @@
+/** 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/MetricCard/index.js

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