@ttoss/components 2.14.20 → 2.14.21

package/dist/MetricCard/index.mjs

@@ -0,0 +1,408 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { defineMessages, useI18n } from "@ttoss/react-i18n";
+import { Icon } from "@ttoss/react-icons";
+import { Box, Card, Flex, Text, TooltipIcon } from "@ttoss/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/MetricCard/MetricCard.tsx
+const 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"
+    }]
+  }
+});
+/**
+* Icon wrapper for metric cards.
+*/
+const MetricIconWrapper = ({
+  icon
+}) => {
+  return /* @__PURE__ */jsx(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
+    },
+    children: icon && /* @__PURE__ */jsx(Icon, {
+      icon
+    })
+  });
+};
+/**
+* Card header with label, tooltip, and optional clickable icon.
+*/
+const MetricCardHeader = ({
+  label,
+  tooltip,
+  isClickable
+}) => {
+  const isTooltipAction = typeof tooltip === "function";
+  const tooltipText = typeof tooltip === "string" ? tooltip : void 0;
+  return /* @__PURE__ */jsxs(Flex, {
+    sx: {
+      alignItems: "center",
+      gap: "2"
+    },
+    children: [/* @__PURE__ */jsx(Text, {
+      sx: {
+        fontSize: "sm",
+        fontWeight: "medium",
+        color: "display.text.secondary.default"
+      },
+      children: label
+    }), tooltipText && /* @__PURE__ */jsx(TooltipIcon, {
+      icon: "fluent:info-24-regular",
+      tooltip: {
+        children: tooltipText
+      },
+      variant: "info"
+    }), isTooltipAction && /* @__PURE__ */jsx(Text, {
+      onClick: e => {
+        e.stopPropagation();
+        tooltip();
+      },
+      sx: {
+        fontSize: "sm",
+        color: "display.text.secondary.default",
+        cursor: "pointer",
+        ":hover": {
+          color: "action.text.primary.default"
+        }
+      },
+      children: /* @__PURE__ */jsx(Icon, {
+        icon: "fluent:info-24-regular",
+        inline: true
+      })
+    }), isClickable && /* @__PURE__ */jsx(Text, {
+      sx: {
+        fontSize: "sm",
+        color: "display.text.secondary.default"
+      },
+      children: /* @__PURE__ */jsx(Icon, {
+        icon: "fluent:open-24-regular",
+        inline: true
+      })
+    })]
+  });
+};
+/**
+* Renders the content for a date metric.
+*/
+const DateMetricContent = ({
+  metric
+}) => {
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [/* @__PURE__ */jsx(Text, {
+      sx: {
+        fontSize: "2xl",
+        fontWeight: "bold",
+        color: "display.text.primary.default"
+      },
+      children: metric.date
+    }), metric.remainingDaysMessage && /* @__PURE__ */jsxs(Flex, {
+      sx: {
+        alignItems: "center",
+        gap: "2"
+      },
+      children: [/* @__PURE__ */jsx(Text, {
+        sx: {
+          fontSize: "sm",
+          color: metric.isWarning ? "feedback.text.caution.default" : "display.text.secondary.default"
+        },
+        children: /* @__PURE__ */jsx(Icon, {
+          icon: metric.isWarning ? "fluent:warning-24-regular" : "fluent:clock-24-regular",
+          inline: true
+        })
+      }), /* @__PURE__ */jsx(Text, {
+        sx: {
+          fontSize: "sm",
+          color: metric.isWarning ? "feedback.text.caution.default" : "display.text.secondary.default"
+        },
+        children: metric.remainingDaysMessage
+      })]
+    })]
+  });
+};
+/**
+* Renders the content for a percentage metric.
+*/
+const PercentageMetricContent = ({
+  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__ */jsxs(Fragment, {
+    children: [/* @__PURE__ */jsxs(Flex, {
+      sx: {
+        alignItems: "baseline",
+        justifyContent: "space-between",
+        gap: "2"
+      },
+      children: [/* @__PURE__ */jsx(Text, {
+        sx: {
+          fontSize: "2xl",
+          fontWeight: "bold",
+          color: "display.text.primary.default"
+        },
+        children: formatValue(metric.current)
+      }), /* @__PURE__ */jsx(Text, {
+        sx: {
+          fontSize: "sm",
+          color: "display.text.secondary.default"
+        },
+        children: intl.formatMessage(messages.ofMax, {
+          max: maxText
+        })
+      })]
+    }), /* @__PURE__ */jsx(Box, {
+      sx: {
+        width: "full",
+        height: "8px",
+        backgroundColor: "display.background.secondary.default",
+        borderRadius: "full",
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */jsx(Box, {
+        sx: {
+          height: "full",
+          width: percentage !== null ? `${percentage}%` : "100%",
+          backgroundColor: "action.background.primary.default",
+          borderRadius: "full",
+          transition: "width 0.5s ease-out"
+        }
+      })
+    }), /* @__PURE__ */jsxs(Flex, {
+      sx: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        fontSize: "xs"
+      },
+      children: [/* @__PURE__ */jsx(Text, {
+        sx: {
+          color: "display.text.secondary.default"
+        },
+        children: percentage !== null ? intl.formatMessage(messages.percentageUsed, {
+          percentage
+        }) : intl.formatMessage(messages.unlimited)
+      }), showAlert && !isOverLimit && /* @__PURE__ */jsxs(Flex, {
+        sx: {
+          alignItems: "center",
+          gap: "1",
+          color: "feedback.text.caution.default"
+        },
+        children: [/* @__PURE__ */jsx(Icon, {
+          icon: "fluent:warning-24-regular"
+        }), /* @__PURE__ */jsx(Text, {
+          sx: {
+            fontWeight: "medium"
+          },
+          children: intl.formatMessage(messages.nearLimit)
+        })]
+      }), showAlert && isOverLimit && /* @__PURE__ */jsxs(Flex, {
+        sx: {
+          alignItems: "center",
+          gap: "1",
+          color: "feedback.text.negative.default"
+        },
+        children: [/* @__PURE__ */jsx(Icon, {
+          icon: "fluent:warning-24-regular"
+        }), /* @__PURE__ */jsx(Text, {
+          sx: {
+            fontWeight: "medium",
+            color: "feedback.text.negative.default"
+          },
+          children: intl.formatMessage(messages.reachedLimit)
+        })]
+      })]
+    })]
+  });
+};
+/**
+* Renders the content for a number metric.
+*/
+const NumberMetricContent = ({
+  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__ */jsxs(Fragment, {
+    children: [/* @__PURE__ */jsxs(Flex, {
+      sx: {
+        alignItems: "baseline",
+        gap: "3"
+      },
+      children: [/* @__PURE__ */jsx(Text, {
+        sx: {
+          fontSize: "2xl",
+          fontWeight: "bold",
+          color: "display.text.primary.default"
+        },
+        children: formatValue(metric.current)
+      }), /* @__PURE__ */jsx(Text, {
+        sx: {
+          fontSize: "sm",
+          color: "display.text.secondary.default"
+        },
+        children: intl.formatMessage(messages.ofMax, {
+          max: maxText
+        })
+      })]
+    }), metric.footerText && /* @__PURE__ */jsx(Text, {
+      sx: {
+        fontSize: "xs",
+        color: "display.text.secondary.default",
+        lineHeight: "relaxed",
+        maxWidth: "300px"
+      },
+      children: metric.footerText
+    })]
+  });
+};
+/**
+* MetricCard component displays a metric in a consistent card layout.
+*
+* It supports three metric types:
+* - **date**: displays a date and optional remaining-days message
+* - **percentage**: displays current/max values and a progress bar
+* - **number**: displays current/max values and an optional footer text
+*
+* @example
+* ```tsx
+* <MetricCard
+*   metric={{
+*     type: 'date',
+*     label: 'Renewal date',
+*     date: '31/12/2025',
+*     icon: 'fluent:calendar-24-regular',
+*     remainingDaysMessage: '10 days remaining',
+*   }}
+* />
+* ```
+*
+* @example
+* ```tsx
+* <MetricCard
+*   metric={{
+*     type: 'percentage',
+*     label: 'Plan usage',
+*     current: 350,
+*     max: 1000,
+*     icon: 'fluent:gauge-24-regular',
+*     showAlertThreshold: 80,
+*   }}
+* />
+* ```
+*/
+const MetricCard = ({
+  metric,
+  isLoading = false
+}) => {
+  if (isLoading) return null;
+  const isClickable = Boolean(metric.onClick || metric.helpArticleAction);
+  return /* @__PURE__ */jsx(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)"
+      }
+    },
+    children: /* @__PURE__ */jsxs(Flex, {
+      sx: {
+        gap: "4",
+        width: "full"
+      },
+      children: [/* @__PURE__ */jsx(MetricIconWrapper, {
+        icon: metric.icon
+      }), /* @__PURE__ */jsxs(Flex, {
+        sx: {
+          flex: 1,
+          flexDirection: "column",
+          gap: "2"
+        },
+        children: [/* @__PURE__ */jsx(MetricCardHeader, {
+          label: metric.label,
+          tooltip: metric.tooltip,
+          isClickable
+        }), metric.type === "date" && /* @__PURE__ */jsx(DateMetricContent, {
+          metric
+        }), metric.type === "percentage" && /* @__PURE__ */jsx(PercentageMetricContent, {
+          metric
+        }), metric.type === "number" && /* @__PURE__ */jsx(NumberMetricContent, {
+          metric
+        })]
+      })]
+    })
+  });
+};
+
+//#endregion
+export { MetricCard };

package/dist/Modal/index.d.mts

@@ -0,0 +1,11 @@
+
+import ReactModal from "react-modal";
+
+//#region src/components/Modal/Modal.d.ts
+type ModalProps = ReactModal.Props;
+declare const Modal: {
+  (props: ModalProps): import("react/jsx-runtime").JSX.Element;
+  setAppElement: typeof ReactModal.setAppElement;
+};
+//#endregion
+export { Modal, ModalProps };

package/dist/{esm/Modal/index.js → Modal/index.mjs}

@@ -1,23 +1,22 @@
 /** 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 { jsx } from "react/jsx-runtime";
+import { css } from "@theme-ui/css";
 import ReactModal from "react-modal";
+
+//#region src/components/Modal/Modal.tsx
 ReactModal.defaultStyles = {
   overlay: {},
   content: {}
 };
-var Modal = /* @__PURE__ */__name(props => {
+const Modal = props => {
   const {
     theme
   } = useTheme();
   const space = theme.space;
   const padding = useResponsiveValue([space?.["4"], space?.["5"], space?.["5"]]) || 0;
   const style = {
-    overlay: transformStyleObject({
+    overlay: css({
       position: "fixed",
       top: 0,
       left: 0,
@@ -28,10 +27,9 @@ var Modal = /* @__PURE__ */__name(props => {
       justifyContent: "center",
       alignItems: "center",
       zIndex: "modal",
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ...props.style?.overlay
     })(theme),
-    content: transformStyleObject({
+    content: css({
       /**
       * Theme
       */
@@ -52,14 +50,15 @@ var Modal = /* @__PURE__ */__name(props => {
       bottom: "0px",
       maxHeight: "90%",
       maxWidth: "90%",
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ...props.style?.content
     })(theme)
   };
-  return /* @__PURE__ */React.createElement(ReactModal, {
+  return /* @__PURE__ */jsx(ReactModal, {
     ...props,
     style
   });
-}, "Modal");
+};
 Modal.setAppElement = ReactModal.setAppElement;
+
+//#endregion
 export { Modal };

package/dist/NavList/index.d.mts

@@ -0,0 +1,64 @@
+
+import * as React from "react";
+
+//#region src/components/NavList/NavList.d.ts
+type NavListItem = {
+  id?: string;
+  label: string;
+  href: string;
+  icon?: string;
+  disabled?: boolean;
+  active?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+  group?: string;
+  divider?: boolean;
+};
+type NavListGroup = {
+  id?: string;
+  label?: string;
+  items: NavListItem[];
+  divider?: boolean;
+};
+type LinkComponentProps = {
+  href: string;
+  onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+  children: React.ReactNode;
+  [key: string]: unknown;
+};
+type NavListProps = {
+  items?: NavListItem[];
+  groups?: NavListGroup[];
+  variant?: 'sidebar' | 'menu' | 'dropdown';
+  onItemClick?: (item: NavListItem) => void;
+  sx?: Record<string, unknown>;
+  iconSize?: number;
+  /**
+   * Custom Link component to use for rendering links.
+   * Useful for integrating with Next.js Link, React Router Link, etc.
+   *
+   * @example
+   * // Next.js
+   * import NextLink from 'next/link';
+   * <NavList LinkComponent={NextLink} ... />
+   *
+   * @example
+   * // React Router
+   * import { Link as RouterLink } from 'react-router-dom';
+   * <NavList LinkComponent={RouterLink} ... />
+   */
+  LinkComponent?: React.ComponentType<LinkComponentProps>;
+};
+declare const NavList: {
+  ({
+    items,
+    groups,
+    variant,
+    onItemClick,
+    sx,
+    iconSize,
+    LinkComponent
+  }: NavListProps): import("react/jsx-runtime").JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { type LinkComponentProps, NavList, type NavListGroup, type NavListItem, type NavListProps };