@axzydev/axzy_ui_system 1.7.1 → 1.7.3

package/package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.34.0",
   "private": false,
   "license": "MIT",
-  "version": "1.7.1",
+  "version": "1.7.3",
   "type": "module",
   "sideEffects": [
     "*.css"

package/src/components/atoms/segmented-control/segmented-control.tsx

@@ -34,6 +34,7 @@ export default function ITSegmentedControl({
 
   return (
     <div
+      role="group"
       className={clsx(
         "inline-flex rounded-xl bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700",
         container,
@@ -46,6 +47,8 @@ export default function ITSegmentedControl({
         return (
           <button
             key={opt.value}
+            type="button"
+            aria-pressed={isActive}
             onClick={() => !disabled && onChange(opt.value)}
             disabled={disabled}
             className={clsx(

package/src/components/molecules/card/card.tsx

@@ -73,6 +73,18 @@ export default function ITCard({
       onClick={onClick}
       onMouseEnter={() => onClick && setIsHovered(true)}
       onMouseLeave={() => onClick && setIsHovered(false)}
+      role={onClick ? "button" : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      onKeyDown={
+        onClick
+          ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick();
+              }
+            }
+          : undefined
+      }
       className={clsx("overflow-hidden flex flex-col", className)}
       style={containerStyle}
     >

package/src/components/molecules/stat-card/stat-card.props.ts

@@ -1,4 +1,5 @@
 import { ReactNode, CSSProperties } from "react";
+import { ColorsTypes } from "@/types/colors.types";
 
 export interface ITStatCardProps {
   /** The metric label displayed above the value. */
@@ -7,6 +8,12 @@ export 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. */

package/src/components/molecules/stat-card/stat-card.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import { ITStatCardProps } from "./stat-card.props";
 import ITText from "@/components/atoms/text/text";
+import ITProgress from "@/components/atoms/progress/progress";
 
 const trendColors = {
   up: "text-emerald-600 bg-emerald-50 dark:text-emerald-400 dark:bg-emerald-950/30",
@@ -23,6 +24,9 @@ export default 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,
@@ -36,6 +40,16 @@ export default function ITStatCard({
       onClick={onClick}
       role={onClick ? "button" : undefined}
       tabIndex={onClick ? 0 : undefined}
+      onKeyDown={
+        onClick
+          ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick();
+              }
+            }
+          : undefined
+      }
     >
       <div className="flex items-start justify-between mb-1">
         <ITText as="span" className="text-xs font-medium text-slate-400 dark:text-slate-500">{label}</ITText>
@@ -49,6 +63,20 @@ export default function ITStatCard({
           </ITText>
         )}
       </div>
+      {hint && (
+        <ITText as="p" className="mt-1 text-[11px] leading-snug text-slate-500 dark:text-slate-400">
+          {hint}
+        </ITText>
+      )}
+      {progress !== undefined && (
+        <ITProgress
+          value={progress}
+          max={100}
+          color={progressColor}
+          size="sm"
+          className="mt-2"
+        />
+      )}
     </div>
   );
 }