gridsmith-ui 0.2.7 → 0.2.8

package/dist/index.d.ts

@@ -376,10 +376,12 @@ interface StatsCardProps {
     trend?: Trend;
     icon?: IconName;
     layout?: "card" | "inline";
+    interactive?: boolean;
+    onClick?: () => void;
     children?: ReactNode;
     className?: string;
 }
-declare function StatsCard({ value, label, trend, icon, layout, children, className }: StatsCardProps): react_jsx_runtime.JSX.Element;
+declare function StatsCard({ value, label, trend, icon, layout, interactive, onClick, children, className }: StatsCardProps): react_jsx_runtime.JSX.Element;
 
 interface DataListItem {
     label: string;

package/dist/index.js

@@ -1761,8 +1761,9 @@ function Button({ variant = "default", size = "md", iconLeft, iconRight, loading
         "border-[length:var(--ds-border-width)]",
         "rounded-[var(--ds-radius-md)]",
         "shadow-[var(--ds-shadow-button)]",
-        "active:shadow-[var(--ds-shadow-button-pressed)] active:translate-x-px active:translate-y-px",
-        "transition-all duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
+        "hover:scale-[var(--ds-hover-scale)] hover:-translate-y-[var(--ds-hover-lift)]",
+        "active:shadow-[var(--ds-shadow-button-pressed)] active:translate-x-[var(--ds-press-depth)] active:translate-y-[var(--ds-press-depth)]",
+        "transition-all duration-[var(--ds-interactive-hover-speed)] ease-[var(--ds-interactive-hover-ease)]",
         "focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
         "cursor-pointer disabled:cursor-not-allowed disabled:opacity-disabled",
         variantStyles[variant],
@@ -81984,12 +81985,17 @@ function Skeleton({ variant = "text", lines = 3, width, height, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("space-y-3", className), children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx(Bone, { className: cn("h-4", widths[i % widths.length]) }, i)) });
 }
 var variantStyles3 = {
-  default: `bg-[var(--ds-bg-surface)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] ${GLASS_SURFACE}`,
+  default: [
+    `bg-[var(--ds-bg-surface)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)] ${GLASS_SURFACE}`,
+    "transition-all duration-[var(--ds-ambient-hover-speed)] ease-[var(--ds-ambient-hover-ease)]",
+    "hover:scale-[var(--ds-ambient-hover-scale)] hover:-translate-y-[var(--ds-ambient-hover-lift)]"
+  ].join(" "),
   interactive: [
     `bg-[var(--ds-bg-surface)] cursor-pointer ${GLASS_SURFACE}`,
     "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
-    "transition-all duration-[var(--ds-transition-speed)] ease-[var(--ds-transition-ease)]",
-    "hover:border-[var(--ds-accent-primary)] hover:shadow-[var(--ds-shadow-card),var(--ds-glass-inset)] hover:bg-[var(--ds-bg-surface-elevated)]"
+    "transition-all duration-[var(--ds-interactive-hover-speed)] ease-[var(--ds-interactive-hover-ease)]",
+    "hover:border-[var(--ds-accent-primary)] hover:shadow-[var(--ds-shadow-card),var(--ds-glass-inset)] hover:bg-[var(--ds-bg-surface-elevated)]",
+    "hover:scale-[var(--ds-hover-scale)] hover:-translate-y-[var(--ds-hover-lift)]"
   ].join(" "),
   outline: `bg-[var(--ds-bg-surface)] border-[length:var(--ds-border-width)] border-[var(--ds-border-default)] ${GLASS_SURFACE}`,
   ghost: "bg-transparent border-none shadow-none"
@@ -82008,6 +82014,7 @@ function Card({ variant = "default", loading = false, selected, selectable, onSe
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-card": "",
       role: selectable ? "button" : void 0,
       "aria-pressed": selectable ? !!selected : void 0,
       tabIndex: selectable ? 0 : void 0,
@@ -82062,7 +82069,7 @@ function CardContent({ className, children, ...props }) {
 function CardFooter({ className, children, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("flex items-center px-ds-5 pb-ds-4 pt-ds-2 mt-auto min-w-0", className), ...props, children });
 }
-function StatsCard({ value, label, trend, icon, layout = "card", children, className }) {
+function StatsCard({ value, label, trend, icon, layout = "card", interactive, onClick, children, className }) {
   if (layout === "inline") {
     return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-ds-3 min-w-0", className), children: [
       icon && /* @__PURE__ */ jsx(Icon, { name: icon, size: 16, className: "shrink-0 text-[var(--ds-text-muted)]" }),
@@ -82071,16 +82078,36 @@ function StatsCard({ value, label, trend, icon, layout = "card", children, class
       trend && /* @__PURE__ */ jsx(TrendBadge, { trend })
     ] });
   }
+  const isInteractive = interactive || !!onClick;
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      "data-card": "",
       className: cn(
         "flex flex-col p-ds-5",
         "bg-[var(--ds-bg-surface)] rounded-[var(--ds-radius-md)]",
         "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
+        isInteractive ? [
+          "cursor-pointer",
+          "transition-all duration-[var(--ds-interactive-hover-speed)] ease-[var(--ds-interactive-hover-ease)]",
+          "hover:scale-[var(--ds-hover-scale)] hover:-translate-y-[var(--ds-hover-lift)]",
+          "hover:border-[var(--ds-accent-primary)] hover:shadow-[var(--ds-shadow-card),var(--ds-glass-inset)]"
+        ] : [
+          "transition-all duration-[var(--ds-ambient-hover-speed)] ease-[var(--ds-ambient-hover-ease)]",
+          "hover:scale-[var(--ds-ambient-hover-scale)] hover:-translate-y-[var(--ds-ambient-hover-lift)]"
+        ],
         GLASS_SURFACE,
         className
       ),
+      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__ */ jsxs("div", { className: "flex items-start justify-between gap-ds-2", children: [
           /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-[var(--ds-text-muted)] uppercase tracking-wider", children: label }),
@@ -93420,7 +93447,7 @@ var StackedList = forwardRef(function StackedList2({
           className: cn(
             "flex items-center gap-ds-3",
             item.onClick && [
-              "cursor-pointer transition-colors",
+              "cursor-pointer transition-all duration-[var(--ds-interactive-hover-speed)] ease-[var(--ds-interactive-hover-ease)]",
               "hover:bg-[var(--ds-bg-muted)]",
               "rounded-[var(--ds-radius-md)]"
             ]