bmj-ui 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,53 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface SidebarItem {
+    title: string;
+    icon: React.ElementType;
+    url: string;
+}
+declare function AppSidebar({ items, onItemClick, activeItem, }: {
+    items?: SidebarItem[];
+    onItemClick?: (title: string) => void;
+    activeItem?: string;
+}): react_jsx_runtime.JSX.Element;
+
+interface DashboardLayoutProps {
+    children: React.ReactNode;
+    sidebarItems?: SidebarItem[];
+    onSidebarItemClick?: (title: string) => void;
+    activeSidebarItem?: string;
+}
+declare function DashboardLayout({ children, sidebarItems, onSidebarItemClick, activeSidebarItem, }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface StatCardProps {
+    title: string;
+    value: string | number;
+    description?: string;
+    trend?: {
+        value: number;
+        isPositive: boolean;
+    };
+    icon?: LucideIcon;
+    className?: string;
+    loading?: boolean;
+}
+declare function StatCard({ title, value, description, trend, icon: Icon, className, loading, }: StatCardProps): react_jsx_runtime.JSX.Element;
+
+interface ChartCardProps {
+    title: string;
+    description?: string;
+    data: any[];
+    dataKey: string;
+    categoryKey: string;
+    color?: string;
+    className?: string;
+    loading?: boolean;
+    type?: "area" | "bar" | "line" | "scatter";
+}
+declare function ChartCard({ title, description, data, dataKey, categoryKey, color, className, loading, type, }: ChartCardProps): react_jsx_runtime.JSX.Element;
+
+declare function Topbar(): react_jsx_runtime.JSX.Element;
+
+export { AppSidebar, ChartCard, DashboardLayout, StatCard, Topbar };

package/dist/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Topbar=exports.StatCard=exports.DashboardLayout=exports.ChartCard=exports.AppSidebar=void 0;const e=require("./components/bmj-ui");Object.defineProperty(exports,"AppSidebar",{enumerable:!0,get:function(){return e.AppSidebar}});const r=require("./components/bmj-ui");Object.defineProperty(exports,"ChartCard",{enumerable:!0,get:function(){return r.ChartCard}});const t=require("./components/bmj-ui");Object.defineProperty(exports,"DashboardLayout",{enumerable:!0,get:function(){return t.DashboardLayout}});const o=require("./components/bmj-ui");Object.defineProperty(exports,"StatCard",{enumerable:!0,get:function(){return o.StatCard}});const n=require("./components/bmj-ui");Object.defineProperty(exports,"Topbar",{enumerable:!0,get:function(){return n.Topbar}});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import { AppSidebar } from \"./components/bmj-ui\";\nimport { ChartCard } from \"./components/bmj-ui\";\nimport { DashboardLayout } from \"./components/bmj-ui\";\nimport { StatCard } from \"./components/bmj-ui\";\nimport { Topbar } from \"./components/bmj-ui\";\n\nexport { AppSidebar, ChartCard, DashboardLayout, StatCard, Topbar };\n"],"names":["bmj_ui_1","require","Object","defineProperty","exports","enumerable","get","bmj_ui_2","bmj_ui_3","bmj_ui_4","bmj_ui_5"],"mappings":"wKAAA,MAAAA,EAAAC,QAAA,uBAMSC,OAAAC,eAAAC,QAAA,aAAA,CAAAC,YAAA,EAAAC,IAAA,WAAA,OANAN,YAAU,IACnB,MAAAO,EAAAN,QAAA,uBAKqBC,OAAAC,eAAAC,QAAA,YAAA,CAAAC,YAAA,EAAAC,IAAA,WAAA,OALZC,WAAS,IAClB,MAAAC,EAAAP,QAAA,uBAIgCC,OAAAC,eAAAC,QAAA,kBAAA,CAAAC,YAAA,EAAAC,IAAA,WAAA,OAJvBE,iBAAe,IACxB,MAAAC,EAAAR,QAAA,uBAGiDC,OAAAC,eAAAC,QAAA,WAAA,CAAAC,YAAA,EAAAC,IAAA,WAAA,OAHxCG,UAAQ,IACjB,MAAAC,EAAAT,QAAA,uBAE2DC,OAAAC,eAAAC,QAAA,SAAA,CAAAC,YAAA,EAAAC,IAAA,WAAA,OAFlDI,QAAM"}

package/dist/index.mjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.Topbar=exports.StatCard=exports.DashboardLayout=exports.ChartCard=exports.AppSidebar=void 0;const e=require("./components/bmj-ui");Object.defineProperty(exports,"AppSidebar",{enumerable:!0,get:function(){return e.AppSidebar}});const r=require("./components/bmj-ui");Object.defineProperty(exports,"ChartCard",{enumerable:!0,get:function(){return r.ChartCard}});const t=require("./components/bmj-ui");Object.defineProperty(exports,"DashboardLayout",{enumerable:!0,get:function(){return t.DashboardLayout}});const o=require("./components/bmj-ui");Object.defineProperty(exports,"StatCard",{enumerable:!0,get:function(){return o.StatCard}});const n=require("./components/bmj-ui");Object.defineProperty(exports,"Topbar",{enumerable:!0,get:function(){return n.Topbar}});
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["import { AppSidebar } from \"./components/bmj-ui\";\nimport { ChartCard } from \"./components/bmj-ui\";\nimport { DashboardLayout } from \"./components/bmj-ui\";\nimport { StatCard } from \"./components/bmj-ui\";\nimport { Topbar } from \"./components/bmj-ui\";\n\nexport { AppSidebar, ChartCard, DashboardLayout, StatCard, Topbar };\n"],"names":["bmj_ui_1","require","Object","defineProperty","exports","enumerable","get","bmj_ui_2","bmj_ui_3","bmj_ui_4","bmj_ui_5"],"mappings":"2JAAA,MAAAA,EAAAC,QAAA,uBAMSC,OAAAC,eAAAC,QAAA,aAAA,CAAAC,YAAA,EAAAC,IAAA,WAAA,OANAN,YAAU,IACnB,MAAAO,EAAAN,QAAA,uBAKqBC,OAAAC,eAAAC,QAAA,YAAA,CAAAC,YAAA,EAAAC,IAAA,WAAA,OALZC,WAAS,IAClB,MAAAC,EAAAP,QAAA,uBAIgCC,OAAAC,eAAAC,QAAA,kBAAA,CAAAC,YAAA,EAAAC,IAAA,WAAA,OAJvBE,iBAAe,IACxB,MAAAC,EAAAR,QAAA,uBAGiDC,OAAAC,eAAAC,QAAA,WAAA,CAAAC,YAAA,EAAAC,IAAA,WAAA,OAHxCG,UAAQ,IACjB,MAAAC,EAAAT,QAAA,uBAE2DC,OAAAC,eAAAC,QAAA,SAAA,CAAAC,YAAA,EAAAC,IAAA,WAAA,OAFlDI,QAAM"}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "bmj-ui",
+  "version": "1.0.0",
+  "description": "Headless component library meticulously crafted for rapid dashboard development. Professional, polished, and ready for production.",
+  "license": "ISC",
+  "author": "",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "rollup": "rollup -c --bundleConfigAsCjs"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^1.0.0",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "autoprefixer": "^10.4.27",
+    "postcss": "^8.5.9",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "rollup": "^4.60.1",
+    "rollup-plugin-dts": "^6.4.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "tailwindcss": "^4.2.2",
+    "tslib": "^2.8.1",
+    "typescript": "^6.0.2"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.3.0",
+    "@fontsource-variable/geist": "^5.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.8.0",
+    "motion": "^12.38.0",
+    "recharts": "^3.8.1",
+    "sonner": "^2.0.7"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,39 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
+import dts from "rollup-plugin-dts";
+import terser from "@rollup/plugin-terser";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+
+const packageJson = require("./package.json");
+
+export default [
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: packageJson.main,
+        format: "cjs",
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module,
+        format: "esm",
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: "./tsconfig.json" }),
+      terser(),
+    ],
+    external: ["react", "react-dom"],
+  },
+  {
+    input: "src/index.ts",
+    output: [{ file: packageJson.types }],
+    plugins: [dts.default()],
+  },
+];

package/src/components/ThemeToggle.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { Moon, Sun } from "lucide-react";
+import { Button } from "./ui/button";
+
+export function ThemeToggle({ className }: { className?: string }) {
+  const [theme, setTheme] = React.useState<"light" | "dark">(() => {
+    if (typeof window !== "undefined") {
+      const saved = localStorage.getItem("bmj-ui-theme");
+      if (saved === "light" || saved === "dark") return saved;
+      return window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light";
+    }
+    return "light";
+  });
+
+  React.useEffect(() => {
+    const root = window.document.documentElement;
+    root.classList.remove("light", "dark");
+    root.classList.add(theme);
+    localStorage.setItem("bmj-ui-theme", theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prev) => (prev === "light" ? "dark" : "light"));
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={toggleTheme}
+      className={className}
+      aria-label="Toggle theme"
+    >
+      {theme === "light" ? (
+        <Moon className="w-5 h-5 transition-all" />
+      ) : (
+        <Sun className="w-5 h-5 transition-all" />
+      )}
+    </Button>
+  );
+}

package/src/components/bmj-ui/AppSidebar.tsx

@@ -0,0 +1,154 @@
+import * as React from "react";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarGroupContent,
+  useSidebar,
+} from "../ui/sidebar";
+import {
+  LayoutDashboard,
+  Settings,
+  Users,
+  BarChart3,
+  Package,
+  HelpCircle,
+  ListTodo,
+} from "lucide-react";
+import { motion, AnimatePresence } from "motion/react";
+
+const defaultItems = [
+  { title: "Dashboard", icon: LayoutDashboard, url: "#" },
+  { title: "Analytics", icon: BarChart3, url: "#" },
+  { title: "Products", icon: Package, url: "#" },
+  { title: "Customers", icon: Users, url: "#" },
+  { title: "Tasks", icon: ListTodo, url: "#" },
+  { title: "Settings", icon: Settings, url: "#" },
+  { title: "Help", icon: HelpCircle, url: "#" },
+];
+
+export interface SidebarItem {
+  title: string;
+  icon: React.ElementType;
+  url: string;
+}
+
+export function AppSidebar({
+  items = defaultItems,
+  onItemClick,
+  activeItem,
+}: {
+  items?: SidebarItem[];
+  onItemClick?: (title: string) => void;
+  activeItem?: string;
+}) {
+  const { state } = useSidebar();
+  const isCollapsed = state === "collapsed";
+
+  return (
+    <Sidebar variant="inset" collapsible="icon">
+      <SidebarHeader className="h-16 flex items-center px-6 border-b border-border/50">
+        <div className="flex items-center gap-2 font-bold text-xl tracking-tight">
+          <div className="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-primary-foreground shrink-0">
+            B
+          </div>
+          <AnimatePresence mode="wait">
+            {!isCollapsed && (
+              <motion.span
+                initial={{ opacity: 0, x: -10 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -10 }}
+                transition={{ duration: 0.2 }}
+                className="whitespace-nowrap"
+              >
+                BMJ UI
+              </motion.span>
+            )}
+          </AnimatePresence>
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>
+            <AnimatePresence mode="wait">
+              {!isCollapsed && (
+                <motion.span
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  Main Menu
+                </motion.span>
+              )}
+            </AnimatePresence>
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {items.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton
+                    tooltip={item.title}
+                    isActive={activeItem === item.title}
+                    onClick={() => onItemClick?.(item.title)}
+                    className="transition-all duration-200 hover:bg-primary/5 hover:text-primary"
+                    render={
+                      <button
+                        type="button"
+                        className="flex items-center w-full"
+                      >
+                        <item.icon className="shrink-0" />
+                        <AnimatePresence mode="wait">
+                          {!isCollapsed && (
+                            <motion.span
+                              initial={{ opacity: 0, width: 0, marginLeft: 0 }}
+                              animate={{
+                                opacity: 1,
+                                width: "auto",
+                                marginLeft: 8,
+                              }}
+                              exit={{ opacity: 0, width: 0, marginLeft: 0 }}
+                              transition={{ duration: 0.2 }}
+                              className="overflow-hidden whitespace-nowrap"
+                            >
+                              {item.title}
+                            </motion.span>
+                          )}
+                        </AnimatePresence>
+                      </button>
+                    }
+                  />
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter className="p-4 border-t border-border/50">
+        <div className="flex items-center gap-3 min-h-10">
+          <div className="w-8 h-8 rounded-full bg-muted shrink-0" />
+          <AnimatePresence mode="wait">
+            {!isCollapsed && (
+              <motion.div
+                initial={{ opacity: 0, x: -10 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -10 }}
+                transition={{ duration: 0.2 }}
+                className="flex flex-col overflow-hidden whitespace-nowrap"
+              >
+                <span className="text-sm font-medium">Bahry Jarbou</span>
+                <span className="text-xs text-muted-foreground">Admin</span>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+      </SidebarFooter>
+    </Sidebar>
+  );
+}

package/src/components/bmj-ui/ChartCard.tsx

@@ -0,0 +1,205 @@
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+} from "../ui/card";
+import { Skeleton } from "../ui/skeleton";
+import {
+  ResponsiveContainer,
+  AreaChart,
+  Area,
+  BarChart,
+  Bar,
+  LineChart,
+  Line,
+  ScatterChart,
+  Scatter,
+  XAxis,
+  YAxis,
+  Tooltip,
+  CartesianGrid,
+} from "recharts";
+import { cn } from "../../lib/utils";
+
+interface ChartCardProps {
+  title: string;
+  description?: string;
+  data: any[];
+  dataKey: string;
+  categoryKey: string;
+  color?: string;
+  className?: string;
+  loading?: boolean;
+  type?: "area" | "bar" | "line" | "scatter";
+}
+
+export function ChartCard({
+  title,
+  description,
+  data,
+  dataKey,
+  categoryKey,
+  color = "var(--primary)",
+  className,
+  loading,
+  type = "area",
+}: ChartCardProps) {
+  if (loading) {
+    return (
+      <Card className={cn("col-span-full lg:col-span-2", className)}>
+        <CardHeader>
+          <Skeleton className="h-6 w-40 mb-2" />
+          <Skeleton className="h-4 w-64" />
+        </CardHeader>
+        <CardContent className="h-75 w-full pt-4">
+          <Skeleton className="h-full w-full rounded-lg" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const renderChart = () => {
+    const commonProps = {
+      data,
+      margin: { top: 10, right: 10, left: -20, bottom: 0 },
+    };
+
+    const axisProps = {
+      xAxis: (
+        <XAxis
+          dataKey={categoryKey}
+          axisLine={false}
+          tickLine={false}
+          tick={{ fontSize: 12, fill: "var(--muted-foreground)" }}
+          dy={10}
+          type={type === "scatter" ? "number" : "category"}
+        />
+      ),
+      yAxis: (
+        <YAxis
+          dataKey={type === "scatter" ? dataKey : undefined}
+          axisLine={false}
+          tickLine={false}
+          tick={{ fontSize: 12, fill: "var(--muted-foreground)" }}
+          type="number"
+        />
+      ),
+      grid: (
+        <CartesianGrid
+          strokeDasharray="3 3"
+          vertical={false}
+          stroke="var(--border)"
+          opacity={0.5}
+        />
+      ),
+      tooltip: (
+        <Tooltip
+          cursor={type === "scatter" ? { strokeDasharray: "3 3" } : undefined}
+          contentStyle={{
+            backgroundColor: "var(--card)",
+            borderRadius: "8px",
+            border: "1px solid var(--border)",
+            boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
+            color: "var(--card-foreground)",
+          }}
+          itemStyle={{
+            color: "var(--card-foreground)",
+          }}
+        />
+      ),
+    };
+
+    switch (type) {
+      case "bar":
+        return (
+          <BarChart {...commonProps}>
+            {axisProps.grid}
+            {axisProps.xAxis}
+            {axisProps.yAxis}
+            {axisProps.tooltip}
+            <Bar
+              dataKey={dataKey}
+              fill={color}
+              radius={[4, 4, 0, 0]}
+              barSize={32}
+            />
+          </BarChart>
+        );
+      case "line":
+        return (
+          <LineChart {...commonProps}>
+            {axisProps.grid}
+            {axisProps.xAxis}
+            {axisProps.yAxis}
+            {axisProps.tooltip}
+            <Line
+              type="monotone"
+              dataKey={dataKey}
+              stroke={color}
+              strokeWidth={2}
+              dot={{ r: 4, fill: color, strokeWidth: 2, stroke: "var(--card)" }}
+              activeDot={{ r: 6, strokeWidth: 0 }}
+            />
+          </LineChart>
+        );
+      case "scatter":
+        return (
+          <ScatterChart {...commonProps}>
+            {axisProps.grid}
+            {axisProps.xAxis}
+            {axisProps.yAxis}
+            {axisProps.tooltip}
+            <Scatter name={title} data={data} fill={color} shape="circle" />
+          </ScatterChart>
+        );
+      case "area":
+      default:
+        return (
+          <AreaChart {...commonProps}>
+            <defs>
+              <linearGradient
+                id={`colorValue-${title.replace(/\s+/g, "-")}`}
+                x1="0"
+                y1="0"
+                x2="0"
+                y2="1"
+              >
+                <stop offset="5%" stopColor={color} stopOpacity={0.1} />
+                <stop offset="95%" stopColor={color} stopOpacity={0} />
+              </linearGradient>
+            </defs>
+            {axisProps.grid}
+            {axisProps.xAxis}
+            {axisProps.yAxis}
+            {axisProps.tooltip}
+            <Area
+              type="monotone"
+              dataKey={dataKey}
+              stroke={color}
+              strokeWidth={2}
+              fillOpacity={1}
+              fill={`url(#colorValue-${title.replace(/\s+/g, "-")})`}
+            />
+          </AreaChart>
+        );
+    }
+  };
+
+  return (
+    <Card
+      className={cn("bmj-card-hover col-span-full lg:col-span-2", className)}
+    >
+      <CardHeader>
+        <CardTitle className="text-lg font-semibold">{title}</CardTitle>
+        {description && <CardDescription>{description}</CardDescription>}
+      </CardHeader>
+      <CardContent className="h-75 w-full pt-4">
+        <ResponsiveContainer width="100%" height="100%">
+          {renderChart()}
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/bmj-ui/DashboardLayout.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { SidebarProvider, SidebarInset } from "../ui/sidebar";
+import { AppSidebar, SidebarItem } from "./AppSidebar";
+import { Topbar } from "./Topbar";
+
+interface DashboardLayoutProps {
+  children: React.ReactNode;
+  sidebarItems?: SidebarItem[];
+  onSidebarItemClick?: (title: string) => void;
+  activeSidebarItem?: string;
+}
+
+export function DashboardLayout({
+  children,
+  sidebarItems,
+  onSidebarItemClick,
+  activeSidebarItem,
+}: DashboardLayoutProps) {
+  return (
+    <SidebarProvider>
+      <AppSidebar
+        items={sidebarItems}
+        onItemClick={onSidebarItemClick}
+        activeItem={activeSidebarItem}
+      />
+      <SidebarInset className="flex flex-col">
+        <Topbar />
+        <main className="flex-1 p-6 overflow-y-auto">{children}</main>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

package/src/components/bmj-ui/StatCard.tsx

@@ -0,0 +1,85 @@
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+import { Skeleton } from "../ui/skeleton";
+import { TrendingUp, TrendingDown, LucideIcon } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { motion } from "motion/react";
+
+interface StatCardProps {
+  title: string;
+  value: string | number;
+  description?: string;
+  trend?: {
+    value: number;
+    isPositive: boolean;
+  };
+  icon?: LucideIcon;
+  className?: string;
+  loading?: boolean;
+}
+
+export function StatCard({
+  title,
+  value,
+  description,
+  trend,
+  icon: Icon,
+  className,
+  loading,
+}: StatCardProps) {
+  if (loading) {
+    return (
+      <Card className={cn("overflow-hidden", className)}>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-4 w-4 rounded-full" />
+        </CardHeader>
+        <CardContent className="space-y-2">
+          <Skeleton className="h-8 w-32" />
+          <Skeleton className="h-3 w-40" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4 }}
+    >
+      <Card className={cn("bmj-card-hover overflow-hidden", className)}>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium text-muted-foreground uppercase tracking-wider">
+            {title}
+          </CardTitle>
+          {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold tracking-tight">{value}</div>
+          {(description || trend) && (
+            <div className="flex items-center gap-2 mt-1">
+              {trend && (
+                <span
+                  className={cn(
+                    "flex items-center text-xs font-medium",
+                    trend.isPositive ? "text-emerald-500" : "text-rose-500",
+                  )}
+                >
+                  {trend.isPositive ? (
+                    <TrendingUp className="w-3 h-3 mr-1" />
+                  ) : (
+                    <TrendingDown className="w-3 h-3 mr-1" />
+                  )}
+                  {trend.value}%
+                </span>
+              )}
+              {description && (
+                <p className="text-xs text-muted-foreground">{description}</p>
+              )}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </motion.div>
+  );
+}