@ttoss/components 2.14.24 → 2.14.26

package/dist/MetricCard/index.mjs

@@ -1,408 +0,0 @@
-/** 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
-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"
-    }]
-  }
-});
-/**
-* Icon wrapper for metric cards.
-*/
-var 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.
-*/
-var 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.
-*/
-var 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.
-*/
-var 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.
-*/
-var 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,
-*   }}
-* />
-* ```
-*/
-var 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

@@ -1,11 +0,0 @@
-
-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/Modal/index.mjs

@@ -1,64 +0,0 @@
-/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-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 = props => {
-  const {
-    theme
-  } = useTheme();
-  const space = theme.space;
-  const padding = useResponsiveValue([space?.["4"], space?.["5"], space?.["5"]]) || 0;
-  const style = {
-    overlay: css({
-      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",
-      ...props.style?.overlay
-    })(theme),
-    content: css({
-      /**
-      * 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%",
-      ...props.style?.content
-    })(theme)
-  };
-  return /* @__PURE__ */jsx(ReactModal, {
-    ...props,
-    style
-  });
-};
-Modal.setAppElement = ReactModal.setAppElement;
-
-//#endregion
-export { Modal };

package/dist/NavList/index.d.mts

@@ -1,64 +0,0 @@
-
-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 };