@axzydev/axzy_ui_system 1.7.2 → 1.7.3

package/dist/index.d.cts

@@ -3495,6 +3495,12 @@ interface ITStatCardProps {
     value: string | number;
     /** Optional trend indicator text (e.g. "+12%", "-3"). */
     trend?: string;
+    /** Optional secondary line under the value (context, not a trend). */
+    hint?: string;
+    /** Optional progress 0–100 rendered under the hint. */
+    progress?: number;
+    /** Semantic color for the progress bar. @default "primary" */
+    progressColor?: ColorsTypes;
     /** Direction of the trend, used to color the trend badge. */
     trendDirection?: "up" | "down" | "neutral";
     /** Icon element rendered next to the label in the top-right corner. */
@@ -3519,7 +3525,7 @@ interface ITStatCardProps {
  * @example
  * <ITStatCard label="Users" value={1042} trend="-3%" trendDirection="down" onClick={() => navigate("/users")} />
  */
-declare function ITStatCard({ label, value, trend, trendDirection, icon, color, className, style, onClick, }: ITStatCardProps): react_jsx_runtime.JSX.Element;
+declare function ITStatCard({ label, value, trend, trendDirection, hint, progress, progressColor, icon, color, className, style, onClick, }: ITStatCardProps): react_jsx_runtime.JSX.Element;
 
 interface ITLineBarDatum {
     /** Etiqueta del eje (p. ej. «May»). */

package/dist/index.d.ts

@@ -3495,6 +3495,12 @@ interface ITStatCardProps {
     value: string | number;
     /** Optional trend indicator text (e.g. "+12%", "-3"). */
     trend?: string;
+    /** Optional secondary line under the value (context, not a trend). */
+    hint?: string;
+    /** Optional progress 0–100 rendered under the hint. */
+    progress?: number;
+    /** Semantic color for the progress bar. @default "primary" */
+    progressColor?: ColorsTypes;
     /** Direction of the trend, used to color the trend badge. */
     trendDirection?: "up" | "down" | "neutral";
     /** Icon element rendered next to the label in the top-right corner. */
@@ -3519,7 +3525,7 @@ interface ITStatCardProps {
  * @example
  * <ITStatCard label="Users" value={1042} trend="-3%" trendDirection="down" onClick={() => navigate("/users")} />
  */
-declare function ITStatCard({ label, value, trend, trendDirection, icon, color, className, style, onClick, }: ITStatCardProps): react_jsx_runtime.JSX.Element;
+declare function ITStatCard({ label, value, trend, trendDirection, hint, progress, progressColor, icon, color, className, style, onClick, }: ITStatCardProps): react_jsx_runtime.JSX.Element;
 
 interface ITLineBarDatum {
     /** Etiqueta del eje (p. ej. «May»). */

package/dist/index.js

@@ -8935,6 +8935,9 @@ function ITStatCard({
   value,
   trend,
   trendDirection = trend && trend.startsWith("-") ? "down" : "neutral",
+  hint,
+  progress,
+  progressColor = "primary",
   icon,
   color = "bg-primary-50 dark:bg-primary-950/20",
   className,
@@ -8963,7 +8966,18 @@ function ITStatCard({
         /* @__PURE__ */ jsxs44("div", { className: "flex items-baseline gap-2", children: [
           /* @__PURE__ */ jsx63(ITText, { as: "span", className: "text-2xl font-bold text-slate-800 dark:text-white", children: value }),
           trend && /* @__PURE__ */ jsx63(ITText, { as: "span", className: clsx44("text-[11px] font-semibold px-1.5 py-0.5 rounded-md", trendColors[trendDirection]), children: trend })
-        ] })
+        ] }),
+        hint && /* @__PURE__ */ jsx63(ITText, { as: "p", className: "mt-1 text-[11px] leading-snug text-slate-500 dark:text-slate-400", children: hint }),
+        progress !== void 0 && /* @__PURE__ */ jsx63(
+          ITProgress,
+          {
+            value: progress,
+            max: 100,
+            color: progressColor,
+            size: "sm",
+            className: "mt-2"
+          }
+        )
       ]
     }
   );