@axzydev/axzy_ui_system 1.7.1 → 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

@@ -1527,6 +1527,14 @@ function ITCard({
       onClick,
       onMouseEnter: () => onClick && setIsHovered(true),
       onMouseLeave: () => onClick && setIsHovered(false),
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      onKeyDown: onClick ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      } : void 0,
       className: clsx2("overflow-hidden flex flex-col", className),
       style: containerStyle,
       children: [
@@ -8251,6 +8259,7 @@ function ITSegmentedControl({
   return /* @__PURE__ */ jsx59(
     "div",
     {
+      role: "group",
       className: clsx40(
         "inline-flex rounded-xl bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700",
         container,
@@ -8262,6 +8271,8 @@ function ITSegmentedControl({
         return /* @__PURE__ */ jsxs41(
           "button",
           {
+            type: "button",
+            "aria-pressed": isActive,
             onClick: () => !disabled && onChange(opt.value),
             disabled,
             className: clsx40(
@@ -8924,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,
@@ -8938,6 +8952,12 @@ function ITStatCard({
       onClick,
       role: onClick ? "button" : void 0,
       tabIndex: onClick ? 0 : void 0,
+      onKeyDown: onClick ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      } : void 0,
       children: [
         /* @__PURE__ */ jsxs44("div", { className: "flex items-start justify-between mb-1", children: [
           /* @__PURE__ */ jsx63(ITText, { as: "span", className: "text-xs font-medium text-slate-400 dark:text-slate-500", children: label }),
@@ -8946,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"
+          }
+        )
       ]
     }
   );