@alpic-ai/ui 1.164.0 → 1.165.1

package/dist/components/stat.d.mts

@@ -10,7 +10,7 @@ interface StatDelta {
   label?: React$1.ReactNode;
   indicator?: "arrow" | "sign";
 }
-interface StatProps extends React$1.ComponentProps<"div"> {
+interface StatProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onClick"> {
   value: React$1.ReactNode;
   unit?: string;
   delta?: StatDelta | null;
@@ -19,8 +19,9 @@ interface StatProps extends React$1.ComponentProps<"div"> {
   }>;
   semantic?: "error" | "warning" | "success";
   compact?: boolean;
+  onClick?: () => void;
 }
-declare function Stat({ value, unit, delta, sparkline, semantic, compact, className, ...props }: StatProps): React$1.JSX.Element;
+declare function Stat({ value, unit, delta, sparkline, semantic, compact, className, onClick, ...props }: StatProps): React$1.JSX.Element;
 declare function StatSparkline({ sparkline, semantic, className }: Pick<StatProps, "sparkline" | "semantic"> & {
   className?: string;
 }): React$1.JSX.Element | null;

package/dist/components/stat.mjs

@@ -26,11 +26,14 @@ const SEMANTIC_KEY = {
 	warning: "warning",
 	success: "success"
 };
-function Stat({ value, unit, delta, sparkline, semantic, compact = false, className, ...props }) {
+const STAT_INTERACTIVE_CLASS = "rounded-sm text-left outline-none transition-opacity focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card";
+function Stat({ value, unit, delta, sparkline, semantic, compact = false, className, onClick, ...props }) {
 	const sentiment = delta && (delta.invert ? delta.direction === "down" : delta.direction === "up") ? "positive" : "negative";
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(onClick ? "button" : "div", {
 		"data-slot": "stat",
-		className: cn("flex min-w-0 flex-col gap-2.5", className),
+		type: onClick ? "button" : void 0,
+		onClick,
+		className: cn("flex min-w-0 flex-col gap-2.5", onClick && STAT_INTERACTIVE_CLASS, className),
 		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: cn("flex min-w-0 items-baseline gap-x-2.5", compact && "gap-x-1.5"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "1.164.0",
+  "version": "1.165.1",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {

package/src/components/stat.tsx

@@ -29,13 +29,14 @@ export interface StatDelta {
   indicator?: "arrow" | "sign";
 }
 
-export interface StatProps extends React.ComponentProps<"div"> {
+export interface StatProps extends Omit<React.HTMLAttributes<HTMLElement>, "onClick"> {
   value: React.ReactNode;
   unit?: string;
   delta?: StatDelta | null;
   sparkline?: number[] | Array<{ value: number }>;
   semantic?: "error" | "warning" | "success";
   compact?: boolean;
+  onClick?: () => void;
 }
 
 const toSparkData = (sparkline: StatProps["sparkline"]) =>
@@ -45,12 +46,22 @@ const toSparkData = (sparkline: StatProps["sparkline"]) =>
 
 const SEMANTIC_KEY = { error: "destructive", warning: "warning", success: "success" } as const;
 
-function Stat({ value, unit, delta, sparkline, semantic, compact = false, className, ...props }: StatProps) {
+const STAT_INTERACTIVE_CLASS =
+  "rounded-sm text-left outline-none transition-opacity focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card";
+
+function Stat({ value, unit, delta, sparkline, semantic, compact = false, className, onClick, ...props }: StatProps) {
   const sentiment =
     delta && (delta.invert ? delta.direction === "down" : delta.direction === "up") ? "positive" : "negative";
+  const Root = onClick ? "button" : "div";
 
   return (
-    <div data-slot="stat" className={cn("flex min-w-0 flex-col gap-2.5", className)} {...props}>
+    <Root
+      data-slot="stat"
+      type={onClick ? "button" : undefined}
+      onClick={onClick}
+      className={cn("flex min-w-0 flex-col gap-2.5", onClick && STAT_INTERACTIVE_CLASS, className)}
+      {...props}
+    >
       <div className={cn("flex min-w-0 items-baseline gap-x-2.5", compact && "gap-x-1.5")}>
         <span
           className={cn(
@@ -78,7 +89,7 @@ function Stat({ value, unit, delta, sparkline, semantic, compact = false, classN
         )}
       </div>
       <StatSparkline sparkline={sparkline} semantic={semantic} />
-    </div>
+    </Root>
   );
 }