@varity-labs/ui-kit 2.0.0-alpha.1 → 2.0.0-beta.2

package/LICENSE

@@ -22,9 +22,9 @@ SOFTWARE.
 
 ---
 
-Varity SDK - Web3 Operating System
+Varity SDK - Open-Source App Platform
 
-Build and deploy apps on Varity L3 with 70-85% cost savings vs traditional cloud.
+Build, deploy, and monetize production apps — 70% cheaper than AWS.
 
 For more information, visit https://varity.so
 

package/README.md

@@ -1,248 +1,241 @@
-# @varity/ui-kit v2.0.0
+# @varity-labs/ui-kit
 
-**Public Frontend SDK for Varity - Industry-Specific AI Dashboard Deployment**
+[![npm](https://img.shields.io/npm/v/@varity-labs/ui-kit)](https://www.npmjs.com/package/@varity-labs/ui-kit)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/varity-labs/varity-sdk/blob/main/LICENSE)
 
-Complete toolkit for deploying industry-specific AI dashboards to Varity L3 blockchain with template deployment, storage layers, and compliance features.
+Production-ready React component library for building applications on Varity. 19 components, dashboard layouts, analytics widgets, authentication, and payments — everything you need to build a full SaaS app.
 
-**Status:** ✅ **ALL BLOCKERS RESOLVED** - Ready for End-to-End Testing (Jan 24, 2026)
+## Install
 
-## What's Working (Varity L3 - Chain ID 33529)
-
-- ✅ **PrivyStack** - Zero-config auth with email/social/wallet login
-- ✅ **SmartWalletProvider** - Gasless transactions (ERC-4337) - FULLY IMPLEMENTED
-- ✅ **WalletSyncProvider** - Seamless Privy ↔ thirdweb wallet sync
-- ✅ **OnrampWidget** - Credit card to USDC conversion
-- ✅ **All smart contracts deployed** - Revenue split, App Store, Paymaster, Wallet Factory
+```bash
+npm install @varity-labs/ui-kit @varity-labs/sdk @varity-labs/types
+```
 
-## Installation
+## Quick Start
 
-```bash
-npm install @varity/ui-kit
-# or
-pnpm add @varity/ui-kit
-# or
-yarn add @varity/ui-kit
+```tsx
+import { PrivyStack } from '@varity-labs/ui-kit'
+
+function App() {
+  return (
+    <PrivyStack>
+      <YourApp />
+    </PrivyStack>
+  )
+}
 ```
 
-## 🎯 Which Provider Should I Use?
+That's it — authentication, theming, and providers are all configured automatically with zero setup.
 
-**90% of apps**: Use `PrivyStack` (zero-config auth + wallet + blockchain)
+## Components
 
-```tsx
-import { PrivyStack } from '@varity/ui-kit';
+### Form (7)
 
-<PrivyStack>
-  <YourApp />
-</PrivyStack>
-```
+| Component | Description |
+|-----------|-------------|
+| `Button` | Primary, secondary, outline, ghost, danger variants |
+| `Input` | Text input with labels and validation |
+| `Textarea` | Multi-line text input |
+| `Select` | Dropdown selector |
+| `Toggle` | On/off switch |
+| `Checkbox` | Multi-select checkbox |
+| `RadioGroup` | Single-select radio buttons |
 
-**Need gasless transactions?** Add `SmartWalletProvider`
+### Overlay (3)
 
-```tsx
-import { PrivyStack, SmartWalletProvider } from '@varity/ui-kit';
-import { createThirdwebClient } from 'thirdweb';
-import { varityL3Testnet } from '@varity/sdk';
-
-const client = createThirdwebClient({
-  clientId: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID!
-});
-
-<PrivyStack>
-  <SmartWalletProvider
-    config={{
-      client,
-      chain: varityL3Testnet,
-      gasless: { enabled: true }
-    }}
-  >
-    <YourApp />
-  </SmartWalletProvider>
-</PrivyStack>
-```
+| Component | Description |
+|-----------|-------------|
+| `Dialog` | Modal dialog with focus trap |
+| `ConfirmDialog` | Confirmation modal with confirm/cancel |
+| `DropdownMenu` | Context menu with keyboard navigation |
 
-**Building dashboards?** Use `VarityDashboardProvider` (includes Wagmi + React Query)
+### Feedback (3)
 
-```tsx
-import { VarityDashboardProvider } from '@varity/ui-kit';
-
-<VarityDashboardProvider
-  privyAppId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
-  thirdwebClientId={process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID}
->
-  <Dashboard />
-</VarityDashboardProvider>
-```
+| Component | Description |
+|-----------|-------------|
+| `ToastProvider` + `useToast` | Notification toasts (success, error, info) |
+| `Skeleton` | Loading skeleton placeholder |
+| `ProgressBar` | Progress indicator |
 
-📚 See [Provider Guide](./docs/PROVIDERS.md) for complete decision tree and migration paths.
+### Display (3)
 
-## Quick Start
+| Component | Description |
+|-----------|-------------|
+| `Badge` | Status badges (+ PriorityBadge, ProjectStatusBadge, TaskStatusBadge, RoleBadge) |
+| `Avatar` + `AvatarGroup` | User avatars |
+| `EmptyState` | Empty state placeholder with presets |
 
-```typescript
-import { VarityClient } from '@varity/ui-kit'
-
-// Initialize client
-const client = new VarityClient({
-  apiEndpoint: 'https://api.varity.io',  // or staging/development
-  apiKey: 'your-api-key'
-})
-
-// Deploy industry-specific dashboard
-const deployment = await client.templates.deployTemplate({
-  industry: 'finance',
-  templateId: 'finance-basic',
-  customization: {
-    branding: {
-      companyName: 'Acme Finance',
-      primaryColor: '#1E40AF',
-      darkMode: true
-    }
-  },
-  storageLayer: 'layer3',
-  deploymentType: 'production'
-})
-
-// Use any module
-const kpis = await client.analytics.getKPIs({ period: 'current_month' })
-const aiResponse = await client.compute.query('Analyze my financial data')
-```
+### Navigation (2)
 
-## Features
-
-### 🔌 Web3 Provider Stack (NEW in v2.0)
-Zero-config React providers for Web3 apps:
-
-- **PrivyStack** - Auth (email/social/wallet) + thirdweb integration
-- **SmartWalletProvider** - Gasless transactions (ERC-4337)
-- **VarityDashboardProvider** - Full-featured dashboards (Wagmi + React Query)
-- **WalletSyncProvider** - Seamless Privy ↔ thirdweb wallet sync
-
-### 🎯 Template Deployment System
-Deploy pre-configured industry-specific dashboards to Varity L3:
-
-- **Finance** - Banking, compliance, transactions, risk management
-- **Healthcare** - HIPAA compliance, patient data, medical operations
-- **Retail** - E-commerce, inventory, supply chain
-- **ISO Merchant** - Payment processing, PCI compliance
-
-### 🔐 3-Layer Encrypted Storage Architecture
-- **Layer 1** - Varity internal documentation (Varity admins only)
-- **Layer 2** - Industry RAG knowledge base (shared across industry)
-- **Layer 3** - Customer-specific data (private, customer-only access)
-- **ALL layers encrypted with Lit Protocol**
-
-### 🔌 13 Module Clients
-All operations via secure REST API:
-
-- **auth** - SIWE authentication
-- **storage** - Filecoin/IPFS file storage
-- **compute** - AI/LLM on Akash Network
-- **zk** - Zero-knowledge ML proofs
-- **analytics** - Business analytics
-- **notifications** - Email/SMS/push notifications
-- **export** - CSV/JSON/PDF data export
-- **cache** - Redis caching
-- **monitoring** - System health & metrics
-- **forecasting** - Predictive analytics
-- **webhooks** - Webhook management
-- **oracle** - Oracle data feeds
-- **templates** - Industry dashboard deployment (NEW)
-
-### 🎨 React Industry Templates
-- `<FinanceDashboard />` - Financial services dashboard
-- `<HealthcareDashboard />` - Healthcare operations dashboard
-- `<RetailDashboard />` - Retail & e-commerce dashboard
-- `<ISODashboard />` - ISO merchant services dashboard
-
-## API Reference
-
-### Authentication
-
-```typescript
-// Login with SIWE
-const { token } = await client.auth.login(message, signature)
-
-// Get user profile
-const user = await client.auth.me()
-```
+| Component | Description |
+|-----------|-------------|
+| `CommandPalette` | Cmd+K command search and navigation |
+| `Breadcrumb` | Navigation breadcrumbs |
 
-### Storage
+### Dashboard Layout (4)
 
-```typescript
-// Upload file
-const { cid } = await client.storage.uploadFile(file)
+| Component | Description |
+|-----------|-------------|
+| `DashboardLayout` | Full dashboard wrapper |
+| `DashboardHeader` | Top navigation bar |
+| `DashboardSidebar` | Side navigation |
+| `DashboardFooter` | Footer |
 
-// Pin content
-await client.storage.pinCID(cid)
-```
+### Analytics (6)
 
-### AI Compute
+| Component | Description |
+|-----------|-------------|
+| `DataTable` | Sortable, filterable data table |
+| `KPICard` / `EnhancedKPICard` | Key performance indicator cards |
+| `AnalyticsCard` | Analytics data card |
+| `ChartContainer` | Chart wrapper with actions |
+| `MetricDisplay` | Metric value display |
+| `Sparkline` | Mini inline chart |
 
-```typescript
-// Simple query
-const response = await client.compute.query('What are the trends?')
+### Branding (3)
 
-// RAG query
-const response = await client.compute.queryRAG({
-  query: 'Analyze customer behavior',
-  knowledgeBase: 'my-knowledge-base'
-})
-```
+| Component | Description |
+|-----------|-------------|
+| `ThemeProvider` + `useTheme` | Theme management with presets |
+| `Logo` | Varity logo |
+| `Attribution` | "Powered by Varity" attribution |
 
-### Analytics
+## Authentication
 
-```typescript
-// Get KPIs
-const kpis = await client.analytics.getKPIs({
-  period: 'current_month'
-})
+Built-in authentication via Privy — email, Google, and wallet login with zero configuration:
 
-// Get trends
-const trends = await client.analytics.getTrends({
-  startDate: '2025-01-01',
-  endDate: '2025-01-31'
-})
+```tsx
+import { PrivyStack } from '@varity-labs/ui-kit'
+import { usePrivy } from '@privy-io/react-auth'
+
+function App() {
+  return (
+    <PrivyStack>
+      <Dashboard />
+    </PrivyStack>
+  )
+}
+
+function Dashboard() {
+  const { login, logout, authenticated, user } = usePrivy()
+
+  if (!authenticated) {
+    return <button onClick={login}>Sign In</button>
+  }
+
+  return (
+    <div>
+      <p>Welcome, {user?.email?.address}</p>
+      <button onClick={logout}>Sign Out</button>
+    </div>
+  )
+}
 ```
 
-## Documentation
+### Auth Components
 
-### Provider Guides
-- **[Provider Decision Tree](./docs/PROVIDERS.md)** - Which provider should you use? (COMPREHENSIVE)
-- **[Provider Hierarchy](./docs/PROVIDER_HIERARCHY.md)** - Visual architecture diagrams
-- **[Credentials Guide](./docs/CREDENTIALS_GUIDE.md)** - Get Privy App ID & thirdweb Client ID
+- `PrivyLoginButton` — Drop-in login button
+- `PrivyUserProfile` — User profile display
+- `PrivyProtectedRoute` — Route protection wrapper
+- `PrivyReadyGate` — Loading gate during initialization
+- Re-exports: `usePrivy`, `useWallets`, `useLogin`, `useLogout`
 
-### Integration Guides
-- **[Privy Integration](./docs/PRIVY_INTEGRATION.md)** - Email/social/wallet authentication
-- **[thirdweb Quickstart](./docs/THIRDWEB_QUICKSTART.md)** - Blockchain operations
-- **[Installation Guide](./docs/INSTALLATION_GUIDE.md)** - Setup and configuration
+## Payments
 
-### Component Reference
-- **[API Reference](./docs/API_REFERENCE.md)** - Complete API documentation
-- **[Web3 Components](./docs/WEB3_COMPONENTS_REPORT.md)** - Wallet, balance, address components
+Built-in payment components for app monetization (90% to developer, 10% platform fee):
 
-## Security
+```tsx
+import { PaymentWidget, PaymentGate } from '@varity-labs/ui-kit'
 
-This SDK is PUBLIC and safe to distribute. It contains:
+// One-time payment button
+<PaymentWidget appId="your-app" price={4.99} />
 
-- ✅ React components
-- ✅ API client (HTTP only)
-- ✅ TypeScript types
-- ❌ NO smart contract logic
-- ❌ NO DePIN orchestration
-- ❌ NO encryption keys
-- ❌ NO business logic
+// Paywall — hides content until payment
+<PaymentGate appId="your-app" price={9.99}>
+  <PremiumContent />
+</PaymentGate>
+```
 
-All sensitive operations are handled by the Varity API Server.
+## Theming
 
-## License
+```tsx
+import { ThemeProvider, useTheme } from '@varity-labs/ui-kit'
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="dark">
+      <YourApp />
+    </ThemeProvider>
+  )
+}
+
+function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  return (
+    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
+      Toggle Theme
+    </button>
+  )
+}
+```
+
+## Full Dashboard Example
 
-MIT License - Safe for commercial use and redistribution
+```tsx
+import {
+  PrivyStack,
+  DashboardLayout,
+  DashboardHeader,
+  DashboardSidebar,
+  KPICard,
+  DataTable,
+  CommandPalette,
+  ToastProvider,
+  useToast,
+} from '@varity-labs/ui-kit'
+
+function App() {
+  return (
+    <PrivyStack>
+      <ToastProvider>
+        <DashboardLayout>
+          <DashboardSidebar items={sidebarItems} />
+          <DashboardHeader title="My Dashboard" />
+          <CommandPalette commands={commands} onNavigate={(path) => router.push(path)} />
+          <main>
+            <KPICard title="Revenue" value="$12,345" trend={8.2} />
+            <DataTable columns={columns} data={data} />
+          </main>
+        </DashboardLayout>
+      </ToastProvider>
+    </PrivyStack>
+  )
+}
+```
 
-## Support
+## Compatibility
 
-- Documentation: https://docs.varity.com
-- Discord: https://discord.gg/varity
-- Email: support@varity.com
+- **React** 18+
+- **Next.js** 13+ (App Router compatible)
+- **Static export** safe (`output: 'export'`)
+- All components have `'use client'` directives
+- WCAG 2.1 Level A accessibility
 
 ---
 
-**Powered by Varity** 🚀
+## Related Packages
+
+- **[@varity-labs/sdk](../../core/varity-sdk/)** — Core SDK (database, credentials)
+- **[@varity-labs/types](../../core/varity-types/)** — Shared TypeScript types
+- **[@varity-labs/mcp](../../cli/varity-mcp/)** — MCP server for AI editors (Cursor, Claude Code, VS Code)
+- **[create-varity-app](../../cli/create-varity-app/)** — Project scaffolding
+
+---
+
+**Part of the [Varity SDK](https://github.com/varity-labs/varity-sdk)** — Build, deploy, and monetize apps 70% cheaper than AWS.
+
+[Documentation](https://docs.varity.so) · [GitHub](https://github.com/varity-labs/varity-sdk) · [Discord](https://discord.gg/varity)
+
+## License
+
+MIT

package/dist/components/Analytics/DataTable.js

@@ -99,7 +99,7 @@ export const DataTable = ({ columns, data, loading = false, pagination = false,
                             padding: '40px',
                             textAlign: 'center',
                             color: 'var(--varity-text-secondary, #757575)'
-                        } }, emptyMessage))) : (paginatedData.map((row, rowIndex) => (React.createElement("tr", { key: rowIndex, style: {
+                        } }, emptyMessage))) : (paginatedData.map((row, rowIndex) => (React.createElement("tr", { key: row.id || `row-${rowIndex}`, style: {
                         borderBottom: '1px solid var(--varity-border-color, #e0e0e0)',
                         backgroundColor: striped && rowIndex % 2 === 1 ? 'var(--varity-bg-secondary, #f9f9f9)' : 'transparent',
                         cursor: onRowClick ? 'pointer' : 'default',

package/dist/components/Analytics/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../src/components/Analytics/DataTable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../src/components/Analytics/DataTable.tsx"],"names":[],"mappings":"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"}

package/dist/components/Analytics/EnhancedKPICard.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+interface EnhancedKPICardProps {
+    title: string;
+    value: string | number;
+    change?: {
+        value: number;
+        period: string;
+    };
+    icon: string;
+    source?: string;
+    trend?: 'up' | 'down' | 'neutral';
+    color?: 'blue' | 'green' | 'orange' | 'purple' | 'red';
+    sparklineData?: number[];
+    showSparkline?: boolean;
+    lastSynced?: string;
+    helpText?: string;
+    onClick?: () => void;
+}
+export declare function EnhancedKPICard({ title, value, change, icon, source, trend, color, sparklineData, showSparkline, lastSynced, helpText, onClick, }: EnhancedKPICardProps): React.JSX.Element;
+export default EnhancedKPICard;
+//# sourceMappingURL=EnhancedKPICard.d.ts.map

package/dist/components/Analytics/EnhancedKPICard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnhancedKPICard.d.ts","sourceRoot":"","sources":["../../../src/components/Analytics/EnhancedKPICard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,UAAU,oBAAoB;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvD,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,MAAM,EACN,IAAI,EACJ,MAAM,EACN,KAAiB,EACjB,KAAc,EACd,aAAa,EACb,aAAqB,EACrB,UAAU,EACV,QAAQ,EACR,OAAO,GACR,EAAE,oBAAoB,qBAqLtB;AAED,eAAe,eAAe,CAAC"}

package/dist/components/Analytics/EnhancedKPICard.js

@@ -0,0 +1,135 @@
+'use client';
+import React, { useMemo } from 'react';
+import { HelpCircle, Clock, TrendingUp, TrendingDown, Minus } from 'lucide-react';
+import { Sparkline, getSparklineColors } from './Sparkline';
+export function EnhancedKPICard({ title, value, change, icon, source, trend = 'neutral', color = 'blue', sparklineData, showSparkline = false, lastSynced, helpText, onClick, }) {
+    const colorClasses = {
+        blue: {
+            bg: 'bg-blue-50 dark:bg-blue-950',
+            icon: 'text-blue-600 dark:text-blue-400',
+            border: 'border-blue-100 dark:border-blue-800',
+            accent: 'text-blue-600 dark:text-blue-400',
+        },
+        green: {
+            bg: 'bg-green-50 dark:bg-green-950',
+            icon: 'text-green-600 dark:text-green-400',
+            border: 'border-green-100 dark:border-green-800',
+            accent: 'text-green-600 dark:text-green-400',
+        },
+        orange: {
+            bg: 'bg-orange-50 dark:bg-orange-950',
+            icon: 'text-orange-600 dark:text-orange-400',
+            border: 'border-orange-100 dark:border-orange-800',
+            accent: 'text-orange-600 dark:text-orange-400',
+        },
+        purple: {
+            bg: 'bg-purple-50 dark:bg-purple-950',
+            icon: 'text-purple-600 dark:text-purple-400',
+            border: 'border-purple-100 dark:border-purple-800',
+            accent: 'text-purple-600 dark:text-purple-400',
+        },
+        red: {
+            bg: 'bg-red-50 dark:bg-red-950',
+            icon: 'text-red-600 dark:text-red-400',
+            border: 'border-red-100 dark:border-red-800',
+            accent: 'text-red-600 dark:text-red-400',
+        },
+    };
+    const trendConfig = {
+        up: {
+            color: 'text-emerald-600 dark:text-emerald-400',
+            bgColor: 'bg-emerald-50 dark:bg-emerald-950',
+            icon: TrendingUp,
+            label: 'Up',
+        },
+        down: {
+            color: 'text-red-600 dark:text-red-400',
+            bgColor: 'bg-red-50 dark:bg-red-950',
+            icon: TrendingDown,
+            label: 'Down',
+        },
+        neutral: {
+            color: 'text-gray-600 dark:text-gray-400',
+            bgColor: 'bg-gray-50 dark:bg-gray-800',
+            icon: Minus,
+            label: 'No change',
+        },
+    };
+    const TrendIcon = trendConfig[trend].icon;
+    const sparklineColors = getSparklineColors(trend, color);
+    // Format last synced time
+    const formattedLastSynced = useMemo(() => {
+        if (!lastSynced)
+            return null;
+        // If it's already a relative string (e.g., "2 min ago"), return as-is
+        if (lastSynced.includes('ago') || lastSynced.includes('Just now')) {
+            return lastSynced;
+        }
+        // Otherwise, try to parse as ISO date
+        try {
+            const syncDate = new Date(lastSynced);
+            const now = new Date();
+            const diffMs = now.getTime() - syncDate.getTime();
+            const diffMins = Math.floor(diffMs / 60000);
+            const diffHours = Math.floor(diffMs / 3600000);
+            if (diffMins < 1)
+                return 'Just now';
+            if (diffMins < 60)
+                return `${diffMins}m ago`;
+            if (diffHours < 24)
+                return `${diffHours}h ago`;
+            return `${Math.floor(diffHours / 24)}d ago`;
+        }
+        catch {
+            return lastSynced;
+        }
+    }, [lastSynced]);
+    // Generate mock sparkline data if none provided
+    const displaySparklineData = useMemo(() => {
+        if (sparklineData && sparklineData.length >= 2)
+            return sparklineData;
+        // Generate plausible trend data based on current value and change
+        const baseValue = typeof value === 'number' ? value : parseFloat(value.replace(/[^0-9.-]/g, '')) || 100;
+        const changePercent = change?.value || 0;
+        const points = 7;
+        const data = [];
+        for (let i = 0; i < points; i++) {
+            const progress = i / (points - 1);
+            const trendValue = baseValue * (1 - changePercent / 100 * (1 - progress));
+            const noise = trendValue * 0.02 * (Math.random() - 0.5);
+            data.push(Math.max(0, trendValue + noise));
+        }
+        return data;
+    }, [sparklineData, value, change]);
+    return (React.createElement("div", { onClick: onClick, className: `bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-5 hover:shadow-lg hover:border-blue-300 dark:hover:border-blue-600 hover:-translate-y-0.5 transition-all duration-200 ${onClick ? 'cursor-pointer' : ''}`, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, onKeyDown: onClick ? (e) => e.key === 'Enter' && onClick() : undefined },
+        React.createElement("div", { className: "flex items-start justify-between mb-3" },
+            React.createElement("div", { className: "flex items-center gap-2" },
+                React.createElement("div", { className: `w-10 h-10 ${colorClasses[color].bg} rounded-lg flex items-center justify-center text-xl` }, icon),
+                React.createElement("div", null,
+                    React.createElement("div", { className: "flex items-center gap-1" },
+                        React.createElement("h3", { className: "text-sm font-medium text-gray-700 dark:text-gray-300" }, title),
+                        helpText && (React.createElement("div", { className: "relative group" },
+                            React.createElement(HelpCircle, { className: "w-3.5 h-3.5 text-gray-400 dark:text-gray-500 cursor-help" }),
+                            React.createElement("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-xs rounded whitespace-nowrap opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-10" },
+                                helpText,
+                                React.createElement("div", { className: "absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900 dark:border-t-gray-100" }))))),
+                    source && (React.createElement("span", { className: "text-[10px] text-gray-400 dark:text-gray-500 uppercase tracking-wide" }, source))))),
+        React.createElement("div", { className: "mb-3" },
+            React.createElement("p", { className: "text-3xl font-bold text-gray-900 dark:text-white tracking-tight" }, value)),
+        change && (React.createElement("div", { className: "flex items-center gap-2 mb-3" },
+            React.createElement("span", { className: `inline-flex items-center gap-1 text-xs font-semibold px-2 py-1 rounded ${trendConfig[trend].bgColor} ${trendConfig[trend].color}` },
+                React.createElement(TrendIcon, { className: "w-3.5 h-3.5" }),
+                React.createElement("span", null,
+                    Math.abs(change.value).toFixed(1),
+                    "%")),
+            React.createElement("span", { className: "text-xs text-gray-500 dark:text-gray-400" }, change.period))),
+        showSparkline && (React.createElement("div", { className: "mb-3" },
+            React.createElement(Sparkline, { data: displaySparklineData, width: 180, height: 36, strokeColor: sparklineColors.stroke, fillColor: sparklineColors.fill, strokeWidth: 2, showGradient: true, className: "w-full" }))),
+        formattedLastSynced && (React.createElement("div", { className: "flex items-center gap-1 text-[10px] text-gray-400 dark:text-gray-500 pt-2 border-t border-gray-100 dark:border-gray-700" },
+            React.createElement(Clock, { className: "w-3 h-3" }),
+            React.createElement("span", null,
+                "Synced ",
+                formattedLastSynced)))));
+}
+export default EnhancedKPICard;
+//# sourceMappingURL=EnhancedKPICard.js.map