@ttoss/components 2.14.19 → 2.14.21

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

@@ -1,11 +1,11 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { __name } from "../chunk-V4MHYKRI.js";
-
-// src/components/Menu/Menu.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Icon } from "@ttoss/react-icons";
 import { Box, Flex } from "@ttoss/ui";
-import * as React from "react";
-var Menu = /* @__PURE__ */__name(({
+
+//#region src/components/Menu/Menu.tsx
+const Menu = ({
   children,
   sx,
   menuIcon = "menu-open"
@@ -14,19 +14,17 @@ var Menu = /* @__PURE__ */__name(({
   const [stylePos, setStylePos] = React.useState({});
   const triggerRef = React.useRef(null);
   const panelRef = React.useRef(null);
-  const toggle = /* @__PURE__ */__name(() => {
+  const toggle = () => {
     return setIsOpen(v => {
       return !v;
     });
-  }, "toggle");
+  };
   React.useEffect(() => {
     if (!isOpen) return;
-    const onDocClick = /* @__PURE__ */__name(e => {
+    const onDocClick = e => {
       const t = e.target;
-      if (panelRef.current && !panelRef.current.contains(t) && triggerRef.current && !triggerRef.current.contains(t)) {
-        setIsOpen(false);
-      }
-    }, "onDocClick");
+      if (panelRef.current && !panelRef.current.contains(t) && triggerRef.current && !triggerRef.current.contains(t)) setIsOpen(false);
+    };
     document.addEventListener("mousedown", onDocClick);
     return () => {
       return document.removeEventListener("mousedown", onDocClick);
@@ -35,18 +33,18 @@ var Menu = /* @__PURE__ */__name(({
   React.useLayoutEffect(() => {
     if (!isOpen) return;
     let rafId = 0;
-    const getWidth = /* @__PURE__ */__name(() => {
+    const getWidth = () => {
       const w = sx?.width ?? sx?.maxWidth ?? sx?.minWidth;
       return Array.isArray(w) ? w[w.length - 1] : w;
-    }, "getWidth");
-    const compute = /* @__PURE__ */__name(() => {
+    };
+    const compute = () => {
       const trigger = triggerRef.current;
-      const panel2 = panelRef.current;
-      if (!trigger || !panel2) return;
+      const panel = panelRef.current;
+      if (!trigger || !panel) return;
       const width = getWidth();
-      if (width) panel2.style.width = typeof width === "number" ? `${width}px` : String(width);
+      if (width) panel.style.width = typeof width === "number" ? `${width}px` : String(width);
       const tr = trigger.getBoundingClientRect();
-      const pr = panel2.getBoundingClientRect();
+      const pr = panel.getBoundingClientRect();
       const vw = window.innerWidth,
         vh = window.innerHeight,
         m = 8;
@@ -65,11 +63,11 @@ var Menu = /* @__PURE__ */__name(({
           width: typeof width === "number" ? `${width}px` : String(width)
         })
       });
-    }, "compute");
+    };
     rafId = requestAnimationFrame(compute);
-    const onResizeScroll = /* @__PURE__ */__name(() => {
+    const onResizeScroll = () => {
       return rafId = requestAnimationFrame(compute);
-    }, "onResizeScroll");
+    };
     window.addEventListener("resize", onResizeScroll);
     window.addEventListener("scroll", onResizeScroll, true);
     return () => {
@@ -78,7 +76,7 @@ var Menu = /* @__PURE__ */__name(({
       window.removeEventListener("scroll", onResizeScroll, true);
     };
   }, [isOpen, sx]);
-  const panel = isOpen ? /* @__PURE__ */React.createElement(Flex, {
+  const panel = isOpen ? /* @__PURE__ */jsx(Flex, {
     ref: panelRef,
     sx: {
       width: ["280px", "320px"],
@@ -97,35 +95,42 @@ var Menu = /* @__PURE__ */__name(({
     style: {
       pointerEvents: "auto",
       ...stylePos
-    }
-  }, /* @__PURE__ */React.createElement(Box, {
-    as: "nav"
-  }, children)) : null;
-  return /* @__PURE__ */React.createElement(Flex, {
+    },
+    children: /* @__PURE__ */jsx(Box, {
+      as: "nav",
+      children
+    })
+  }) : null;
+  return /* @__PURE__ */jsx(Flex, {
     sx: {
       position: "relative",
       display: "inline-block"
-    }
-  }, /* @__PURE__ */React.createElement(Box, {
-    sx: {
-      position: "relative"
-    }
-  }, /* @__PURE__ */React.createElement("button", {
-    ref: triggerRef,
-    onClick: toggle,
-    "aria-haspopup": "true",
-    "aria-expanded": isOpen,
-    style: {
-      background: "transparent",
-      border: 0,
-      padding: 4,
-      cursor: "pointer",
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center"
-    }
-  }, /* @__PURE__ */React.createElement(Icon, {
-    icon: menuIcon
-  })), isOpen && panel));
-}, "Menu");
+    },
+    children: /* @__PURE__ */jsxs(Box, {
+      sx: {
+        position: "relative"
+      },
+      children: [/* @__PURE__ */jsx("button", {
+        ref: triggerRef,
+        onClick: toggle,
+        "aria-haspopup": "true",
+        "aria-expanded": isOpen,
+        style: {
+          background: "transparent",
+          border: 0,
+          padding: 4,
+          cursor: "pointer",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */jsx(Icon, {
+          icon: menuIcon
+        })
+      }), isOpen && panel]
+    })
+  });
+};
+
+//#endregion
 export { Menu };

package/dist/MetricCard/index.d.mts

@@ -0,0 +1,153 @@
+
+import { IconType } from "@ttoss/react-icons";
+
+//#region src/components/MetricCard/MetricCard.types.d.ts
+/**
+ * Base metric properties shared by all metric types.
+ */
+interface BaseMetric {
+  /**
+   * Label displayed above the metric value.
+   */
+  label: string;
+  /**
+   * Optional tooltip text or action handler for additional context.
+   * When a string is provided, it displays a simple tooltip.
+   * When a function is provided, it's called when the tooltip icon is clicked.
+   */
+  tooltip?: string | (() => void);
+  /**
+   * Icon to display alongside the metric.
+   */
+  icon?: IconType;
+  /**
+   * Optional click handler to make the metric card interactive.
+   */
+  onClick?: () => void;
+  /**
+   * Optional help article action handler.
+   */
+  helpArticleAction?: () => void;
+}
+/**
+ * Date-based metric for displaying dates like expiration or renewal.
+ */
+interface DateMetric extends BaseMetric {
+  type: 'date';
+  /**
+   * The date value to display.
+   */
+  date: string;
+  /**
+   * Optional message showing remaining days.
+   */
+  remainingDaysMessage?: string;
+  /**
+   * Whether to show a warning indicator.
+   */
+  isWarning?: boolean;
+}
+/**
+ * Percentage-based metric with progress bar.
+ */
+interface PercentageMetric extends BaseMetric {
+  type: 'percentage';
+  /**
+   * Current value.
+   */
+  current: number;
+  /**
+   * Maximum value. Use null for unlimited.
+   */
+  max: number | null;
+  /**
+   * Custom formatter for displaying values.
+   */
+  formatValue?: (value: number) => string;
+  /**
+   * Percentage threshold at which to show an alert.
+   */
+  showAlertThreshold?: number;
+}
+/**
+ * Number-based metric for displaying counts.
+ */
+interface NumberMetric extends BaseMetric {
+  type: 'number';
+  /**
+   * Current value.
+   */
+  current: number;
+  /**
+   * Maximum value. Use null for unlimited.
+   */
+  max: number | null;
+  /**
+   * Custom formatter for displaying values.
+   */
+  formatValue?: (value: number) => string;
+  /**
+   * Optional footer text below the metric.
+   */
+  footerText?: string;
+}
+/**
+ * Union type for all supported metric types.
+ */
+type Metric = DateMetric | PercentageMetric | NumberMetric;
+/**
+ * Props for the MetricCard component.
+ */
+interface MetricCardProps {
+  /**
+   * The metric configuration to display.
+   */
+  metric: Metric;
+  /**
+   * Whether the card is in loading state.
+   */
+  isLoading?: boolean;
+}
+//#endregion
+//#region src/components/MetricCard/MetricCard.d.ts
+/**
+ * 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,
+ *   }}
+ * />
+ * ```
+ */
+declare const MetricCard: ({
+  metric,
+  isLoading
+}: MetricCardProps) => import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+export { BaseMetric, DateMetric, Metric, MetricCard, MetricCardProps, NumberMetric, PercentageMetric };