@forgedevstack/bear 1.0.2 → 1.0.4-alpha

package/dist/components/SpeedDial/SpeedDial.const.d.ts

@@ -0,0 +1,22 @@
+import { SpeedDialDirection, SpeedDialSize } from './SpeedDial.types';
+export declare const SPEED_DIAL_BASE = "Bear-SpeedDial relative inline-flex flex-col items-center";
+export declare const SPEED_DIAL_POSITIONS: {
+    'bottom-right': string;
+    'bottom-left': string;
+    'top-right': string;
+    'top-left': string;
+};
+export declare const SPEED_DIAL_DIRECTIONS: Record<SpeedDialDirection, {
+    container: string;
+    item: string;
+}>;
+export declare const SPEED_DIAL_MAIN_BUTTON = "Bear-SpeedDial__trigger rounded-full shadow-lg transition-all duration-200";
+export declare const SPEED_DIAL_MAIN_SIZES: Record<SpeedDialSize, string>;
+export declare const SPEED_DIAL_MAIN_COLORS = "bg-pink-500 hover:bg-pink-600 text-white";
+export declare const SPEED_DIAL_ACTION = "Bear-SpeedDial__action rounded-full shadow-md transition-all duration-200";
+export declare const SPEED_DIAL_ACTION_SIZES: Record<SpeedDialSize, string>;
+export declare const SPEED_DIAL_ACTION_COLORS = "bg-white dark:bg-zinc-800 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700";
+export declare const SPEED_DIAL_ACTIONS_CONTAINER = "Bear-SpeedDial__actions absolute flex items-center gap-2";
+export declare const SPEED_DIAL_LABEL = "Bear-SpeedDial__label px-2 py-1 text-xs font-medium bg-gray-900 dark:bg-white text-white dark:text-gray-900 rounded shadow-md whitespace-nowrap";
+export declare const SPEED_DIAL_ENTER = "animate-in fade-in zoom-in-95";
+export declare const SPEED_DIAL_EXIT = "animate-out fade-out zoom-out-95";

package/dist/components/SpeedDial/SpeedDial.const.js

@@ -0,0 +1,26 @@
+const t = "Bear-SpeedDial relative inline-flex flex-col items-center", e = {
+  "bottom-right": "fixed bottom-6 right-6",
+  "bottom-left": "fixed bottom-6 left-6",
+  "top-right": "fixed top-6 right-6",
+  "top-left": "fixed top-6 left-6"
+}, o = "Bear-SpeedDial__trigger rounded-full shadow-lg transition-all duration-200", a = {
+  sm: "w-12 h-12",
+  md: "w-14 h-14",
+  lg: "w-16 h-16"
+}, i = "bg-pink-500 hover:bg-pink-600 text-white", r = "Bear-SpeedDial__action rounded-full shadow-md transition-all duration-200", _ = {
+  sm: "w-9 h-9",
+  md: "w-10 h-10",
+  lg: "w-12 h-12"
+}, n = "bg-white dark:bg-zinc-800 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-700", d = "Bear-SpeedDial__actions absolute flex items-center gap-2", l = "Bear-SpeedDial__label px-2 py-1 text-xs font-medium bg-gray-900 dark:bg-white text-white dark:text-gray-900 rounded shadow-md whitespace-nowrap";
+export {
+  r as SPEED_DIAL_ACTION,
+  d as SPEED_DIAL_ACTIONS_CONTAINER,
+  n as SPEED_DIAL_ACTION_COLORS,
+  _ as SPEED_DIAL_ACTION_SIZES,
+  t as SPEED_DIAL_BASE,
+  l as SPEED_DIAL_LABEL,
+  o as SPEED_DIAL_MAIN_BUTTON,
+  i as SPEED_DIAL_MAIN_COLORS,
+  a as SPEED_DIAL_MAIN_SIZES,
+  e as SPEED_DIAL_POSITIONS
+};

package/dist/components/SpeedDial/SpeedDial.d.ts

@@ -1,20 +1,18 @@
-import { FC } from 'react';
 import { SpeedDialProps } from './SpeedDial.types';
 /**
- * SpeedDial - Floating action button that reveals related actions
+ * SpeedDial - Floating action button with expandable actions
  *
  * @example
  * ```tsx
  * <SpeedDial
  *   actions={[
- *     { key: 'copy', icon: <CopyIcon />, label: 'Copy', onClick: handleCopy },
- *     { key: 'print', icon: <PrintIcon />, label: 'Print', onClick: handlePrint },
- *     { key: 'share', icon: <ShareIcon />, label: 'Share', onClick: handleShare },
+ *     { label: 'Copy', icon: <CopyIcon />, onClick: handleCopy },
+ *     { label: 'Print', icon: <PrintIcon />, onClick: handlePrint },
+ *     { label: 'Share', icon: <ShareIcon />, onClick: handleShare },
  *   ]}
  *   position="bottom-right"
- *   direction="up"
  * />
  * ```
  */
-export declare const SpeedDial: FC<SpeedDialProps>;
+export declare const SpeedDial: import('react').ForwardRefExoticComponent<SpeedDialProps & import('react').RefAttributes<HTMLDivElement>>;
 export default SpeedDial;

package/dist/components/SpeedDial/SpeedDial.js

@@ -1,150 +1,160 @@
-import { jsxs as d, jsx as s } from "react/jsx-runtime";
-import { useState as P, useRef as U, useCallback as w, useEffect as v } from "react";
-import { cn as b } from "../../utils/cn.js";
-import { Button as p } from "../Button/Button.js";
-import { Tooltip as V } from "../Tooltip/Tooltip.js";
-const $ = {
-  "bottom-right": "bear-bottom-4 bear-right-4",
-  "bottom-left": "bear-bottom-4 bear-left-4",
-  "top-right": "bear-top-4 bear-right-4",
-  "top-left": "bear-top-4 bear-left-4"
-}, k = {
-  up: "bear-flex-col-reverse bear-pb-2",
-  down: "bear-flex-col bear-pt-2",
-  left: "bear-flex-row-reverse bear-pr-2",
-  right: "bear-flex-row bear-pl-2"
-}, q = /* @__PURE__ */ d("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-  /* @__PURE__ */ s("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-  /* @__PURE__ */ s("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
-] }), G = /* @__PURE__ */ d("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-  /* @__PURE__ */ s("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-  /* @__PURE__ */ s("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-] }), X = ({
-  actions: h,
-  icon: E = q,
-  openIcon: S = G,
-  open: f,
-  defaultOpen: L = !1,
-  direction: i = "up",
-  variant: N = "primary",
-  size: I = "lg",
-  showTooltips: T = !0,
-  tooltipPlacement: u = "auto",
-  closeOnAction: m = !0,
-  position: n = "bottom-right",
-  fixed: x = !0,
-  ariaLabel: D = "SpeedDial",
-  onOpenChange: r,
-  className: j,
-  testId: A,
-  ..._
-}) => {
-  const [z, o] = P(L), c = U(null), l = f !== void 0, t = l ? f : z, B = w(() => {
-    const e = !t;
-    l || o(e), r == null || r(e);
-  }, [t, l, r]), R = w((e) => {
-    var a;
-    (a = e.onClick) == null || a.call(e), m && (l || o(!1), r == null || r(!1));
-  }, [m, l, r]);
-  v(() => {
-    const e = (a) => {
-      c.current && !c.current.contains(a.target) && t && (l || o(!1), r == null || r(!1));
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { forwardRef as T, useState as R, useRef as B, useCallback as E, useEffect as I } from "react";
+import { cn as n } from "../../utils/cn.js";
+import { SPEED_DIAL_LABEL as M, SPEED_DIAL_ACTION_COLORS as j, SPEED_DIAL_ACTION_SIZES as U, SPEED_DIAL_ACTION as W, SPEED_DIAL_ACTIONS_CONTAINER as Y, SPEED_DIAL_MAIN_COLORS as Z, SPEED_DIAL_MAIN_SIZES as z, SPEED_DIAL_MAIN_BUTTON as $, SPEED_DIAL_POSITIONS as q, SPEED_DIAL_BASE as F } from "./SpeedDial.const.js";
+const G = ({ className: o }) => /* @__PURE__ */ i("svg", { className: o, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ t("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+  /* @__PURE__ */ t("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+] }), J = ({ className: o }) => /* @__PURE__ */ i("svg", { className: o, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+  /* @__PURE__ */ t("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+  /* @__PURE__ */ t("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+] }), K = T(
+  ({
+    actions: o,
+    icon: y,
+    openIcon: S,
+    direction: c = "up",
+    size: f = "md",
+    position: u,
+    fixed: _ = !0,
+    openOnHover: m = !1,
+    open: p,
+    onOpenChange: a,
+    showLabels: h = !0,
+    ariaLabel: x = "Speed dial",
+    testId: A,
+    className: D,
+    ...b
+  }, L) => {
+    const [v, w] = R(!1), d = B(null), l = p !== void 0 ? p : v, s = E((e) => {
+      w(e), a == null || a(e);
+    }, [a]), N = E(() => {
+      s(!l);
+    }, [l, s]);
+    I(() => {
+      const e = (r) => {
+        d.current && !d.current.contains(r.target) && s(!1);
+      };
+      if (l)
+        return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+    }, [l, s]), I(() => {
+      const e = (r) => {
+        r.key === "Escape" && s(!1);
+      };
+      if (l)
+        return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+    }, [l, s]);
+    const k = z[f], P = U[f], C = () => {
+      switch (c) {
+        case "up":
+          return "bottom-full left-1/2 -translate-x-1/2 pb-3 flex-col-reverse";
+        case "down":
+          return "top-full left-1/2 -translate-x-1/2 pt-3 flex-col";
+        case "left":
+          return "right-full top-1/2 -translate-y-1/2 pr-3 flex-row-reverse";
+        case "right":
+          return "left-full top-1/2 -translate-y-1/2 pl-3 flex-row";
+        default:
+          return "";
+      }
+    }, g = (e) => {
+      switch (e.tooltipPosition || (c === "up" || c === "down" ? "left" : "top")) {
+        case "left":
+          return "right-full mr-2";
+        case "right":
+          return "left-full ml-2";
+        case "top":
+          return "bottom-full mb-2";
+        case "bottom":
+          return "top-full mt-2";
+        default:
+          return "right-full mr-2";
+      }
+    }, O = (e) => {
+      var r;
+      e.disabled || ((r = e.onClick) == null || r.call(e), s(!1));
     };
-    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, [t, l, r]), v(() => {
-    const e = (a) => {
-      a.key === "Escape" && t && (l || o(!1), r == null || r(!1));
-    };
-    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [t, l, r]);
-  const W = () => {
-    if (u !== "auto") return u;
-    switch (i) {
-      case "up":
-      case "down":
-        return n.includes("right") ? "left" : "right";
-      case "left":
-      case "right":
-        return "top";
-    }
-  }, F = (e, a) => {
-    const y = /* @__PURE__ */ s(
-      p,
+    return /* @__PURE__ */ i(
+      "div",
       {
-        variant: "secondary",
-        size: "md",
-        onClick: () => R(e),
-        disabled: e.disabled,
-        className: b(
-          "bear-rounded-full bear-shadow-lg bear-transition-all bear-duration-200",
-          "bear-w-12 bear-h-12 bear-p-0 bear-flex bear-items-center bear-justify-center",
-          t ? "bear-opacity-100 bear-scale-100" : "bear-opacity-0 bear-scale-75 bear-pointer-events-none"
+        ref: d,
+        className: n(
+          F,
+          _ && u && q[u],
+          D
         ),
-        style: {
-          transitionDelay: t ? `${a * 50}ms` : "0ms"
-        },
-        "aria-label": e.label,
-        children: e.icon
-      },
-      e.key
-    );
-    return T ? /* @__PURE__ */ s(
-      V,
-      {
-        content: e.label,
-        placement: W(),
-        children: y
-      },
-      e.key
-    ) : y;
-  };
-  return /* @__PURE__ */ d(
-    "div",
-    {
-      ref: c,
-      className: b(
-        "bear-inline-flex bear-items-center",
-        k[i],
-        x && "bear-fixed bear-z-50",
-        x && $[n],
-        j
-      ),
-      "data-testid": A,
-      ..._,
-      children: [
-        /* @__PURE__ */ s(
-          "div",
-          {
-            className: b(
-              "bear-flex bear-gap-3",
-              k[i]
-            ),
-            role: "menu",
-            "aria-orientation": i === "up" || i === "down" ? "vertical" : "horizontal",
-            children: h.map((e, a) => F(e, a))
+        "data-testid": A,
+        onMouseEnter: m ? () => s(!0) : void 0,
+        onMouseLeave: m ? () => s(!1) : void 0,
+        ...b,
+        children: [
+          l && /* @__PURE__ */ t("div", { className: n(Y, C()), children: o.map((e, r) => /* @__PURE__ */ i(
+            "div",
+            {
+              className: "relative flex items-center",
+              style: {
+                animation: `fadeInUp 150ms ease-out ${r * 50}ms forwards`,
+                opacity: 0
+              },
+              children: [
+                h && /* @__PURE__ */ t("span", { className: n(M, g(e)), children: e.label }),
+                /* @__PURE__ */ t(
+                  "button",
+                  {
+                    type: "button",
+                    className: n(
+                      W,
+                      P,
+                      e.disabled ? "opacity-50 cursor-not-allowed" : j,
+                      "flex items-center justify-center"
+                    ),
+                    style: e.color ? { backgroundColor: e.color, color: "white" } : void 0,
+                    onClick: () => O(e),
+                    disabled: e.disabled,
+                    "aria-label": e.label,
+                    children: e.icon
+                  }
+                )
+              ]
+            },
+            r
+          )) }),
+          /* @__PURE__ */ t(
+            "button",
+            {
+              ref: L,
+              type: "button",
+              className: n(
+                $,
+                k,
+                Z,
+                "flex items-center justify-center",
+                l && "rotate-45"
+              ),
+              onClick: N,
+              "aria-label": x,
+              "aria-expanded": l,
+              children: l ? S || /* @__PURE__ */ t(J, {}) : y || /* @__PURE__ */ t(G, {})
+            }
+          ),
+          /* @__PURE__ */ t("style", { children: `
+          @keyframes fadeInUp {
+            from {
+              opacity: 0;
+              transform: translateY(8px);
+            }
+            to {
+              opacity: 1;
+              transform: translateY(0);
+            }
           }
-        ),
-        /* @__PURE__ */ s(
-          p,
-          {
-            variant: N,
-            size: I,
-            onClick: B,
-            className: b(
-              "bear-rounded-full bear-shadow-xl bear-transition-transform bear-duration-300",
-              "bear-w-14 bear-h-14 bear-p-0 bear-flex bear-items-center bear-justify-center",
-              t && "bear-rotate-45"
-            ),
-            "aria-label": D,
-            "aria-expanded": t,
-            "aria-haspopup": "menu",
-            children: t ? S : E
-          }
-        )
-      ]
-    }
-  );
-};
+        ` })
+        ]
+      }
+    );
+  }
+);
+K.displayName = "SpeedDial";
 export {
-  X as SpeedDial
+  K as SpeedDial
 };

package/dist/components/SpeedDial/SpeedDial.types.d.ts

@@ -1,48 +1,45 @@
 import { HTMLAttributes, ReactNode } from 'react';
-import { BearSize, BearVariant } from '../../types';
+export type SpeedDialDirection = 'up' | 'down' | 'left' | 'right';
+export type SpeedDialSize = 'sm' | 'md' | 'lg';
 export interface SpeedDialAction {
-    /** Unique key for the action */
-    key: string;
+    /** Action label (shown as tooltip) */
+    label: string;
     /** Action icon */
     icon: ReactNode;
-    /** Action tooltip/label */
-    label: string;
     /** Click handler */
     onClick?: () => void;
-    /** Whether action is disabled */
+    /** Disabled state */
     disabled?: boolean;
+    /** Custom color */
+    color?: string;
+    /** Tooltip position */
+    tooltipPosition?: 'left' | 'right' | 'top' | 'bottom';
 }
 export interface SpeedDialProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
-    /** Array of actions to display */
+    /** Array of actions */
     actions: SpeedDialAction[];
-    /** Main FAB icon (when closed) */
+    /** Main button icon (when closed) */
     icon?: ReactNode;
-    /** Main FAB icon when open */
+    /** Main button icon (when open) */
     openIcon?: ReactNode;
-    /** Whether SpeedDial is open */
-    open?: boolean;
-    /** Default open state */
-    defaultOpen?: boolean;
-    /** Direction to expand actions */
-    direction?: 'up' | 'down' | 'left' | 'right';
-    /** FAB variant */
-    variant?: BearVariant;
-    /** FAB size */
-    size?: BearSize;
-    /** Whether to show tooltips */
-    showTooltips?: boolean;
-    /** Tooltip placement relative to direction */
-    tooltipPlacement?: 'left' | 'right' | 'top' | 'bottom' | 'auto';
-    /** Whether to hide on click action */
-    closeOnAction?: boolean;
+    /** Direction to expand */
+    direction?: SpeedDialDirection;
+    /** Size */
+    size?: SpeedDialSize;
     /** Position on screen */
     position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
-    /** Fixed position */
+    /** Whether to use fixed positioning */
     fixed?: boolean;
-    /** ARIA label */
-    ariaLabel?: string;
-    /** Open/close handler */
+    /** Open on hover */
+    openOnHover?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Called when open state changes */
     onOpenChange?: (open: boolean) => void;
+    /** Show labels next to actions */
+    showLabels?: boolean;
+    /** Hide main button label */
+    ariaLabel?: string;
     /** Test ID */
     testId?: string;
 }

package/dist/components/SpeedDial/index.d.ts

@@ -1,2 +1,2 @@
 export { SpeedDial } from './SpeedDial';
-export type { SpeedDialProps, SpeedDialAction } from './SpeedDial.types';
+export type { SpeedDialProps, SpeedDialAction, SpeedDialDirection, SpeedDialSize } from './SpeedDial.types';

package/dist/components/Spinner/Spinner.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../utils/cn.cjs"),n={xs:"bear-w-3 bear-h-3",sm:"bear-w-4 bear-h-4",md:"bear-w-6 bear-h-6",lg:"bear-w-8 bear-h-8",xl:"bear-w-10 bear-h-10"},c=({size:a="md",className:s,color:r="currentColor",label:t="Loading"})=>e.jsxs("svg",{className:i.cn("bear-animate-spin",n[a],s),viewBox:"0 0 24 24",fill:"none","aria-label":t,role:"status",children:[e.jsx("circle",{className:"bear-opacity-25",cx:"12",cy:"12",r:"10",stroke:r,strokeWidth:"4"}),e.jsx("path",{className:"bear-opacity-75",fill:r,d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]});exports.Spinner=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../utils/cn.cjs"),t={xs:"bear-w-3 bear-h-3",sm:"bear-w-4 bear-h-4",md:"bear-w-6 bear-h-6",lg:"bear-w-8 bear-h-8",xl:"bear-w-10 bear-h-10"},c=({size:r="md",className:n,color:a="currentColor",label:s="Loading"})=>e.jsxs("svg",{className:i.cn("Bear-Spinner",`Bear-Spinner--${r}`,"bear-animate-spin",t[r],n),viewBox:"0 0 24 24",fill:"none","aria-label":s,role:"status",children:[e.jsx("circle",{className:"Bear-Spinner__track bear-opacity-25",cx:"12",cy:"12",r:"10",stroke:a,strokeWidth:"4"}),e.jsx("path",{className:"Bear-Spinner__arc bear-opacity-75",fill:a,d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]});exports.Spinner=c;

package/dist/components/Spinner/Spinner.js

@@ -1,45 +1,47 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { jsxs as i, jsx as a } from "react/jsx-runtime";
 import { cn as t } from "../../utils/cn.js";
-const o = {
+const c = {
   xs: "bear-w-3 bear-h-3",
   sm: "bear-w-4 bear-h-4",
   md: "bear-w-6 bear-h-6",
   lg: "bear-w-8 bear-h-8",
   xl: "bear-w-10 bear-h-10"
-}, n = ({
+}, b = ({
   size: r = "md",
   className: s,
-  color: a = "currentColor",
-  label: i = "Loading"
-}) => /* @__PURE__ */ l(
+  color: e = "currentColor",
+  label: n = "Loading"
+}) => /* @__PURE__ */ i(
   "svg",
   {
     className: t(
+      "Bear-Spinner",
+      `Bear-Spinner--${r}`,
       "bear-animate-spin",
-      o[r],
+      c[r],
       s
     ),
     viewBox: "0 0 24 24",
     fill: "none",
-    "aria-label": i,
+    "aria-label": n,
     role: "status",
     children: [
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ a(
         "circle",
         {
-          className: "bear-opacity-25",
+          className: "Bear-Spinner__track bear-opacity-25",
           cx: "12",
           cy: "12",
           r: "10",
-          stroke: a,
+          stroke: e,
           strokeWidth: "4"
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ a(
         "path",
         {
-          className: "bear-opacity-75",
-          fill: a,
+          className: "Bear-Spinner__arc bear-opacity-75",
+          fill: e,
           d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
         }
       )
@@ -47,5 +49,5 @@ const o = {
   }
 );
 export {
-  n as Spinner
+  b as Spinner
 };

package/dist/components/StatCard/StatCard.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("../../utils/cn.cjs"),o=({title:s,value:i,color:t="#6366f1",icon:n,onClick:r,className:a,...l})=>e.jsxs("div",{className:d.cn("relative overflow-hidden rounded-2xl p-6 transition-transform hover:scale-105 cursor-pointer",a),style:{background:`linear-gradient(135deg, ${t}dd, ${t}99)`},onClick:r,...l,children:[e.jsx("div",{className:"absolute top-0 right-0 w-32 h-32 -mr-8 -mt-8 rounded-full opacity-20 bg-white"}),e.jsxs("div",{className:"relative z-10",children:[e.jsx("p",{className:"text-white/80 text-sm font-medium mb-1",children:s}),e.jsx("p",{className:"text-white text-3xl font-bold mb-4",children:i}),r&&e.jsxs("button",{className:"flex items-center gap-2 px-4 py-1.5 bg-white/20 hover:bg-white/30 rounded-full text-white text-sm font-medium transition-colors",children:[n,"View All"]})]})]});exports.StatCard=o;

package/dist/components/StatCard/StatCard.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { StatCardProps } from './StatCard.types';
+/**
+ * StatCard Component
+ * A colorful statistics card with gradient background
+ */
+export declare const StatCard: FC<StatCardProps>;

package/dist/components/StatCard/StatCard.js

@@ -0,0 +1,36 @@
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { cn as n } from "../../utils/cn.js";
+const h = ({
+  title: l,
+  value: s,
+  color: r = "#6366f1",
+  icon: a,
+  onClick: i,
+  className: o,
+  ...d
+}) => /* @__PURE__ */ e(
+  "div",
+  {
+    className: n(
+      "relative overflow-hidden rounded-2xl p-6 transition-transform hover:scale-105 cursor-pointer",
+      o
+    ),
+    style: { background: `linear-gradient(135deg, ${r}dd, ${r}99)` },
+    onClick: i,
+    ...d,
+    children: [
+      /* @__PURE__ */ t("div", { className: "absolute top-0 right-0 w-32 h-32 -mr-8 -mt-8 rounded-full opacity-20 bg-white" }),
+      /* @__PURE__ */ e("div", { className: "relative z-10", children: [
+        /* @__PURE__ */ t("p", { className: "text-white/80 text-sm font-medium mb-1", children: l }),
+        /* @__PURE__ */ t("p", { className: "text-white text-3xl font-bold mb-4", children: s }),
+        i && /* @__PURE__ */ e("button", { className: "flex items-center gap-2 px-4 py-1.5 bg-white/20 hover:bg-white/30 rounded-full text-white text-sm font-medium transition-colors", children: [
+          a,
+          "View All"
+        ] })
+      ] })
+    ]
+  }
+);
+export {
+  h as StatCard
+};

package/dist/components/StatCard/StatCard.types.d.ts

@@ -0,0 +1,13 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface StatCardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Card title */
+    title: string;
+    /** Main value to display */
+    value: string | number;
+    /** Gradient color (hex) */
+    color?: string;
+    /** Icon to show in the button */
+    icon?: ReactNode;
+    /** Click handler for View All button */
+    onClick?: () => void;
+}

package/dist/components/StatCard/index.d.ts

@@ -0,0 +1,2 @@
+export { StatCard } from './StatCard';
+export type { StatCardProps } from './StatCard.types';