@varity-labs/ui-kit 2.0.0-alpha.1

package/dist/components/Dashboard/DashboardLayout.d.ts

@@ -0,0 +1,71 @@
+/**
+ * DashboardLayout - Main layout wrapper for Varity dashboards
+ *
+ * Provides the primary layout structure with sidebar, header, and content area.
+ * Fully customizable through theming system.
+ */
+import React, { ReactNode } from 'react';
+export interface DashboardLayoutProps {
+    /** Content to render in the main area */
+    children: ReactNode;
+    /** Whether to show the sidebar (default: true) */
+    showSidebar?: boolean;
+    /** Whether to show the header (default: true) */
+    showHeader?: boolean;
+    /** Whether to show the footer (default: true) */
+    showFooter?: boolean;
+    /** Custom sidebar width in pixels (default: 240) */
+    sidebarWidth?: number;
+    /** Custom header height in pixels (default: 64) */
+    headerHeight?: number;
+    /** Company logo URL */
+    logoUrl?: string;
+    /** Company name */
+    companyName?: string;
+    /** Navigation items for sidebar */
+    navigationItems?: NavigationItem[];
+    /** User information for header */
+    user?: UserInfo;
+    /** Callback when user clicks logout */
+    onLogout?: () => void;
+}
+export interface NavigationItem {
+    /** Navigation item label */
+    label: string;
+    /** Navigation item icon (Material Icon name) */
+    icon?: string;
+    /** Navigation path */
+    path: string;
+    /** Whether item is active */
+    active?: boolean;
+    /** Sub-navigation items */
+    children?: NavigationItem[];
+}
+export interface UserInfo {
+    /** User's display name */
+    name: string;
+    /** User's wallet address */
+    address: string;
+    /** User's avatar URL */
+    avatarUrl?: string;
+}
+/**
+ * DashboardLayout Component
+ *
+ * @example
+ * ```tsx
+ * <DashboardLayout
+ *   companyName="Acme Corp"
+ *   logoUrl="/logo.png"
+ *   user={{ name: "John Doe", address: "0x..." }}
+ *   navigationItems={[
+ *     { label: "Dashboard", icon: "dashboard", path: "/" },
+ *     { label: "Analytics", icon: "analytics", path: "/analytics" }
+ *   ]}
+ * >
+ *   <YourDashboardContent />
+ * </DashboardLayout>
+ * ```
+ */
+export declare const DashboardLayout: React.FC<DashboardLayoutProps>;
+//# sourceMappingURL=DashboardLayout.d.ts.map

package/dist/components/Dashboard/DashboardLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardLayout.d.ts","sourceRoot":"","sources":["../../../src/components/Dashboard/DashboardLayout.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKxC,MAAM,WAAW,oBAAoB;IACnC,yCAAyC;IACzC,QAAQ,EAAE,SAAS,CAAA;IACnB,kDAAkD;IAClD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,iDAAiD;IACjD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,iDAAiD;IACjD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uBAAuB;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mCAAmC;IACnC,eAAe,CAAC,EAAE,cAAc,EAAE,CAAA;IAClC,kCAAkC;IAClC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sBAAsB;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,6BAA6B;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAA;CAC5B;AAED,MAAM,WAAW,QAAQ;IACvB,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAA;IACf,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA+D1D,CAAA"}

package/dist/components/Dashboard/DashboardLayout.js

@@ -0,0 +1,52 @@
+/**
+ * DashboardLayout - Main layout wrapper for Varity dashboards
+ *
+ * Provides the primary layout structure with sidebar, header, and content area.
+ * Fully customizable through theming system.
+ */
+import React from 'react';
+import { DashboardHeader } from './DashboardHeader';
+import { DashboardSidebar } from './DashboardSidebar';
+import { DashboardFooter } from './DashboardFooter';
+/**
+ * DashboardLayout Component
+ *
+ * @example
+ * ```tsx
+ * <DashboardLayout
+ *   companyName="Acme Corp"
+ *   logoUrl="/logo.png"
+ *   user={{ name: "John Doe", address: "0x..." }}
+ *   navigationItems={[
+ *     { label: "Dashboard", icon: "dashboard", path: "/" },
+ *     { label: "Analytics", icon: "analytics", path: "/analytics" }
+ *   ]}
+ * >
+ *   <YourDashboardContent />
+ * </DashboardLayout>
+ * ```
+ */
+export const DashboardLayout = ({ children, showSidebar = true, showHeader = true, showFooter = true, sidebarWidth = 240, headerHeight = 64, logoUrl, companyName, navigationItems = [], user, onLogout }) => {
+    return (React.createElement("div", { className: "varity-dashboard-layout", style: {
+            display: 'flex',
+            minHeight: '100vh',
+            backgroundColor: 'var(--varity-bg-primary, #f5f5f5)'
+        } },
+        showSidebar && (React.createElement(DashboardSidebar, { width: sidebarWidth, logoUrl: logoUrl, companyName: companyName, navigationItems: navigationItems })),
+        React.createElement("div", { style: {
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                marginLeft: showSidebar ? sidebarWidth : 0,
+                transition: 'margin-left 0.3s ease'
+            } },
+            showHeader && (React.createElement(DashboardHeader, { height: headerHeight, user: user, onLogout: onLogout })),
+            React.createElement("main", { style: {
+                    flex: 1,
+                    padding: '24px',
+                    marginTop: showHeader ? headerHeight : 0,
+                    overflow: 'auto'
+                } }, children),
+            showFooter && (React.createElement(DashboardFooter, { companyName: companyName })))));
+};
+//# sourceMappingURL=DashboardLayout.js.map

package/dist/components/Dashboard/DashboardLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardLayout.js","sourceRoot":"","sources":["../../../src/components/Dashboard/DashboardLayout.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAiDnD;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,eAAe,GAAmC,CAAC,EAC9D,QAAQ,EACR,WAAW,GAAG,IAAI,EAClB,UAAU,GAAG,IAAI,EACjB,UAAU,GAAG,IAAI,EACjB,YAAY,GAAG,GAAG,EAClB,YAAY,GAAG,EAAE,EACjB,OAAO,EACP,WAAW,EACX,eAAe,GAAG,EAAE,EACpB,IAAI,EACJ,QAAQ,EACT,EAAE,EAAE;IACH,OAAO,CACL,6BAAK,SAAS,EAAC,yBAAyB,EAAC,KAAK,EAAE;YAC9C,OAAO,EAAE,MAAM;YACf,SAAS,EAAE,OAAO;YAClB,eAAe,EAAE,mCAAmC;SACrD;QAEE,WAAW,IAAI,CACd,oBAAC,gBAAgB,IACf,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,eAAe,GAChC,CACH;QAGD,6BAAK,KAAK,EAAE;gBACV,IAAI,EAAE,CAAC;gBACP,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;gBAC1C,UAAU,EAAE,uBAAuB;aACpC;YAEE,UAAU,IAAI,CACb,oBAAC,eAAe,IACd,MAAM,EAAE,YAAY,EACpB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,GAClB,CACH;YAGD,8BAAM,KAAK,EAAE;oBACX,IAAI,EAAE,CAAC;oBACP,OAAO,EAAE,MAAM;oBACf,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;oBACxC,QAAQ,EAAE,MAAM;iBACjB,IACE,QAAQ,CACJ;YAGN,UAAU,IAAI,CACb,oBAAC,eAAe,IAAC,WAAW,EAAE,WAAW,GAAI,CAC9C,CACG,CACF,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/components/Dashboard/DashboardSidebar.d.ts

@@ -0,0 +1,26 @@
+/**
+ * DashboardSidebar - Navigation sidebar for Varity dashboards
+ *
+ * Provides main navigation with collapsible menu items.
+ */
+import React from 'react';
+import { NavigationItem } from './DashboardLayout';
+export interface DashboardSidebarProps {
+    /** Sidebar width in pixels */
+    width?: number;
+    /** Company logo URL */
+    logoUrl?: string;
+    /** Company name */
+    companyName?: string;
+    /** Navigation items */
+    navigationItems?: NavigationItem[];
+    /** Callback when navigation item is clicked */
+    onNavigate?: (path: string) => void;
+    /** Whether sidebar is collapsed */
+    collapsed?: boolean;
+}
+/**
+ * DashboardSidebar Component
+ */
+export declare const DashboardSidebar: React.FC<DashboardSidebarProps>;
+//# sourceMappingURL=DashboardSidebar.d.ts.map

package/dist/components/Dashboard/DashboardSidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardSidebar.d.ts","sourceRoot":"","sources":["../../../src/components/Dashboard/DashboardSidebar.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAElD,MAAM,WAAW,qBAAqB;IACpC,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uBAAuB;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,uBAAuB;IACvB,eAAe,CAAC,EAAE,cAAc,EAAE,CAAA;IAClC,+CAA+C;IAC/C,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAwL5D,CAAA"}

package/dist/components/Dashboard/DashboardSidebar.js

@@ -0,0 +1,146 @@
+/**
+ * DashboardSidebar - Navigation sidebar for Varity dashboards
+ *
+ * Provides main navigation with collapsible menu items.
+ */
+import React, { useState } from 'react';
+/**
+ * DashboardSidebar Component
+ */
+export const DashboardSidebar = ({ width = 240, logoUrl, companyName = 'Dashboard', navigationItems = [], onNavigate, collapsed = false }) => {
+    const [expandedItems, setExpandedItems] = useState(new Set());
+    const toggleExpand = (label) => {
+        const newExpanded = new Set(expandedItems);
+        if (newExpanded.has(label)) {
+            newExpanded.delete(label);
+        }
+        else {
+            newExpanded.add(label);
+        }
+        setExpandedItems(newExpanded);
+    };
+    const handleNavigate = (path) => {
+        if (onNavigate) {
+            onNavigate(path);
+        }
+    };
+    const renderNavigationItem = (item, depth = 0) => {
+        const hasChildren = item.children && item.children.length > 0;
+        const isExpanded = expandedItems.has(item.label);
+        return (React.createElement("div", { key: item.path, style: { marginLeft: `${depth * 16}px` } },
+            React.createElement("div", { className: `varity-nav-item ${item.active ? 'active' : ''}`, style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: '12px 16px',
+                    cursor: 'pointer',
+                    backgroundColor: item.active ? 'var(--varity-primary-color, #1976d2)' : 'transparent',
+                    color: item.active ? 'white' : 'var(--varity-text-primary, #212121)',
+                    borderRadius: '8px',
+                    margin: '4px 8px',
+                    transition: 'all 0.2s ease',
+                    fontWeight: item.active ? 600 : 400
+                }, onClick: () => {
+                    if (hasChildren) {
+                        toggleExpand(item.label);
+                    }
+                    else {
+                        handleNavigate(item.path);
+                    }
+                }, onMouseEnter: (e) => {
+                    if (!item.active) {
+                        e.currentTarget.style.backgroundColor = 'var(--varity-bg-hover, #f0f0f0)';
+                    }
+                }, onMouseLeave: (e) => {
+                    if (!item.active) {
+                        e.currentTarget.style.backgroundColor = 'transparent';
+                    }
+                } },
+                item.icon && (React.createElement("span", { style: { marginRight: '12px', fontSize: '20px' } }, getIconForName(item.icon))),
+                React.createElement("span", { style: { flex: 1, fontSize: '14px' } }, item.label),
+                hasChildren && (React.createElement("span", { style: { fontSize: '12px' } }, isExpanded ? '▼' : '▶'))),
+            hasChildren && isExpanded && (React.createElement("div", null, item.children.map((child) => renderNavigationItem(child, depth + 1))))));
+    };
+    return (React.createElement("aside", { className: "varity-dashboard-sidebar", style: {
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            width: collapsed ? '64px' : `${width}px`,
+            height: '100vh',
+            backgroundColor: 'var(--varity-bg-sidebar, #ffffff)',
+            borderRight: '1px solid var(--varity-border-color, #e0e0e0)',
+            display: 'flex',
+            flexDirection: 'column',
+            transition: 'width 0.3s ease',
+            zIndex: 1001,
+            overflowY: 'auto',
+            overflowX: 'hidden'
+        } },
+        React.createElement("div", { style: {
+                padding: '20px 16px',
+                borderBottom: '1px solid var(--varity-border-color, #e0e0e0)',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '12px'
+            } },
+            logoUrl && (React.createElement("img", { src: logoUrl, alt: `${companyName} logo`, style: {
+                    height: '32px',
+                    width: 'auto',
+                    maxWidth: collapsed ? '32px' : '100%'
+                } })),
+            !collapsed && !logoUrl && (React.createElement("h1", { style: {
+                    margin: 0,
+                    fontSize: '18px',
+                    fontWeight: 600,
+                    color: 'var(--varity-primary-color, #1976d2)'
+                } }, companyName))),
+        React.createElement("nav", { style: { flex: 1, padding: '16px 0' } }, navigationItems.map((item) => renderNavigationItem(item))),
+        !collapsed && (React.createElement("div", { style: {
+                padding: '16px',
+                borderTop: '1px solid var(--varity-border-color, #e0e0e0)',
+                textAlign: 'center'
+            } },
+            React.createElement("span", { style: {
+                    fontSize: '12px',
+                    color: 'var(--varity-text-secondary, #757575)'
+                } },
+                "Powered by",
+                ' ',
+                React.createElement("a", { href: "https://varity.com", target: "_blank", rel: "noopener noreferrer", style: {
+                        color: 'var(--varity-primary-color, #1976d2)',
+                        textDecoration: 'none',
+                        fontWeight: 600
+                    } }, "Varity"))))));
+};
+/**
+ * Helper function to get emoji icon for common icon names
+ */
+function getIconForName(iconName) {
+    const iconMap = {
+        dashboard: '📊',
+        analytics: '📈',
+        chart: '📉',
+        users: '👥',
+        settings: '⚙️',
+        profile: '👤',
+        storage: '💾',
+        compute: '🖥️',
+        ai: '🤖',
+        chat: '💬',
+        export: '📤',
+        import: '📥',
+        notification: '🔔',
+        webhook: '🔗',
+        oracle: '🔮',
+        zk: '🔐',
+        cache: '⚡',
+        monitoring: '📡',
+        forecasting: '🔭',
+        home: '🏠',
+        folder: '📁',
+        file: '📄',
+        help: '❓',
+        search: '🔍'
+    };
+    return iconMap[iconName.toLowerCase()] || '•';
+}
+//# sourceMappingURL=DashboardSidebar.js.map

package/dist/components/Dashboard/DashboardSidebar.js.map

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

package/dist/components/Dashboard/EmptyState.d.ts

@@ -0,0 +1,84 @@
+import React, { ReactNode } from 'react';
+export interface EmptyStateProps {
+    /** Title text */
+    title: string;
+    /** Description text */
+    description?: string;
+    /** Icon to display */
+    icon?: ReactNode;
+    /** Primary action button */
+    action?: {
+        label: string;
+        onClick: () => void;
+        variant?: 'primary' | 'secondary';
+    };
+    /** Secondary action button */
+    secondaryAction?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional CSS class names */
+    className?: string;
+}
+/**
+ * EmptyState - Display when no data is available
+ *
+ * A component for displaying empty states with optional icons,
+ * descriptions, and action buttons. Useful for tables, lists,
+ * and other data displays when no data is available.
+ *
+ * @example
+ * ```tsx
+ * import { EmptyState } from '@varity-labs/ui-kit';
+ *
+ * function DataList() {
+ *   const { data, loading } = useData();
+ *
+ *   if (!loading && data.length === 0) {
+ *     return (
+ *       <EmptyState
+ *         title="No data found"
+ *         description="Get started by adding your first item."
+ *         icon={<FolderIcon />}
+ *         action={{
+ *           label: "Add Item",
+ *           onClick: () => setShowAddModal(true),
+ *         }}
+ *       />
+ *     );
+ *   }
+ *
+ *   return <List data={data} />;
+ * }
+ * ```
+ */
+export declare function EmptyState({ title, description, icon, action, secondaryAction, size, className, }: EmptyStateProps): React.JSX.Element;
+/**
+ * EmptyStatePresets - Common empty state configurations
+ */
+export declare const EmptyStatePresets: {
+    /**
+     * No search results
+     */
+    NoResults: (props: Partial<EmptyStateProps>) => React.JSX.Element;
+    /**
+     * No data yet
+     */
+    NoData: (props: Partial<EmptyStateProps>) => React.JSX.Element;
+    /**
+     * No integrations connected
+     */
+    NoIntegrations: (props: Partial<EmptyStateProps>) => React.JSX.Element;
+    /**
+     * Connection required
+     */
+    ConnectionRequired: (props: Partial<EmptyStateProps>) => React.JSX.Element;
+    /**
+     * Coming soon
+     */
+    ComingSoon: (props: Partial<EmptyStateProps>) => React.JSX.Element;
+};
+export default EmptyState;
+//# sourceMappingURL=EmptyState.d.ts.map

package/dist/components/Dashboard/EmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/Dashboard/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,WAAW,eAAe;IAC9B,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,4BAA4B;IAC5B,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;KACnC,CAAC;IACF,8BAA8B;IAC9B,eAAe,CAAC,EAAE;QAChB,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;IACF,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,IAAI,EACJ,MAAM,EACN,eAAe,EACf,IAAW,EACX,SAAc,GACf,EAAE,eAAe,qBA8EjB;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB;IAC5B;;OAEG;uBACgB,OAAO,CAAC,eAAe,CAAC;IAQ3C;;OAEG;oBACa,OAAO,CAAC,eAAe,CAAC;IAQxC;;OAEG;4BACqB,OAAO,CAAC,eAAe,CAAC;IAQhD;;OAEG;gCACyB,OAAO,CAAC,eAAe,CAAC;IAQpD;;OAEG;wBACiB,OAAO,CAAC,eAAe,CAAC;CAO7C,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/Dashboard/EmptyState.js

@@ -0,0 +1,99 @@
+import React from 'react';
+/**
+ * EmptyState - Display when no data is available
+ *
+ * A component for displaying empty states with optional icons,
+ * descriptions, and action buttons. Useful for tables, lists,
+ * and other data displays when no data is available.
+ *
+ * @example
+ * ```tsx
+ * import { EmptyState } from '@varity-labs/ui-kit';
+ *
+ * function DataList() {
+ *   const { data, loading } = useData();
+ *
+ *   if (!loading && data.length === 0) {
+ *     return (
+ *       <EmptyState
+ *         title="No data found"
+ *         description="Get started by adding your first item."
+ *         icon={<FolderIcon />}
+ *         action={{
+ *           label: "Add Item",
+ *           onClick: () => setShowAddModal(true),
+ *         }}
+ *       />
+ *     );
+ *   }
+ *
+ *   return <List data={data} />;
+ * }
+ * ```
+ */
+export function EmptyState({ title, description, icon, action, secondaryAction, size = 'md', className = '', }) {
+    const sizeStyles = {
+        sm: {
+            container: 'py-6 px-4',
+            icon: 'w-10 h-10',
+            iconWrapper: 'w-16 h-16',
+            title: 'text-base',
+            description: 'text-sm',
+            button: 'px-3 py-1.5 text-sm',
+        },
+        md: {
+            container: 'py-10 px-6',
+            icon: 'w-12 h-12',
+            iconWrapper: 'w-20 h-20',
+            title: 'text-lg',
+            description: 'text-sm',
+            button: 'px-4 py-2 text-sm',
+        },
+        lg: {
+            container: 'py-16 px-8',
+            icon: 'w-16 h-16',
+            iconWrapper: 'w-28 h-28',
+            title: 'text-xl',
+            description: 'text-base',
+            button: 'px-6 py-3 text-base',
+        },
+    };
+    const styles = sizeStyles[size];
+    return (React.createElement("div", { className: `flex flex-col items-center justify-center text-center ${styles.container} ${className}` },
+        icon && (React.createElement("div", { className: `flex items-center justify-center ${styles.iconWrapper} bg-gray-100 rounded-full mb-4` },
+            React.createElement("div", { className: `text-gray-400 ${styles.icon}` }, icon))),
+        React.createElement("h3", { className: `font-semibold text-gray-900 ${styles.title}` }, title),
+        description && (React.createElement("p", { className: `mt-2 text-gray-500 max-w-sm ${styles.description}` }, description)),
+        (action || secondaryAction) && (React.createElement("div", { className: "mt-6 flex items-center gap-3" },
+            action && (React.createElement("button", { onClick: action.onClick, className: `${styles.button} font-medium rounded-lg transition-colors ${action.variant === 'secondary'
+                    ? 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                    : 'bg-blue-600 text-white hover:bg-blue-700'}` }, action.label)),
+            secondaryAction && (React.createElement("button", { onClick: secondaryAction.onClick, className: `${styles.button} font-medium rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors` }, secondaryAction.label))))));
+}
+/**
+ * EmptyStatePresets - Common empty state configurations
+ */
+export const EmptyStatePresets = {
+    /**
+     * No search results
+     */
+    NoResults: (props) => (React.createElement(EmptyState, { title: "No results found", description: "Try adjusting your search or filter to find what you're looking for.", ...props })),
+    /**
+     * No data yet
+     */
+    NoData: (props) => (React.createElement(EmptyState, { title: "No data yet", description: "Data will appear here once available.", ...props })),
+    /**
+     * No integrations connected
+     */
+    NoIntegrations: (props) => (React.createElement(EmptyState, { title: "No integrations connected", description: "Connect your first integration to get started.", ...props })),
+    /**
+     * Connection required
+     */
+    ConnectionRequired: (props) => (React.createElement(EmptyState, { title: "Connection required", description: "Please connect your account to access this data.", ...props })),
+    /**
+     * Coming soon
+     */
+    ComingSoon: (props) => (React.createElement(EmptyState, { title: "Coming Soon", description: "This feature is currently under development.", ...props })),
+};
+export default EmptyState;
+//# sourceMappingURL=EmptyState.js.map

package/dist/components/Dashboard/EmptyState.js.map

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

package/dist/components/Dashboard/KPICard.d.ts

@@ -0,0 +1,58 @@
+import React, { ReactNode } from 'react';
+export interface KPICardProps {
+    /** Title of the KPI */
+    title: string;
+    /** Main value to display */
+    value: string | number;
+    /** Optional subtitle or description */
+    subtitle?: string;
+    /** Optional icon to display */
+    icon?: ReactNode;
+    /** Trend indicator (positive, negative, or neutral) */
+    trend?: 'up' | 'down' | 'neutral';
+    /** Trend value (e.g., "+12%") */
+    trendValue?: string;
+    /** Whether the card is loading */
+    loading?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Additional CSS class names */
+    className?: string;
+    /** Card variant */
+    variant?: 'default' | 'outlined' | 'filled';
+    /** Card size */
+    size?: 'sm' | 'md' | 'lg';
+}
+/**
+ * KPICard - Display Key Performance Indicator metrics
+ *
+ * A card component for displaying business metrics and KPIs with
+ * optional trend indicators and icons.
+ *
+ * @example
+ * ```tsx
+ * import { KPICard } from '@varity-labs/ui-kit';
+ *
+ * function Dashboard() {
+ *   return (
+ *     <div className="grid grid-cols-4 gap-4">
+ *       <KPICard
+ *         title="Revenue"
+ *         value="$12,345"
+ *         trend="up"
+ *         trendValue="+12%"
+ *         icon={<DollarIcon />}
+ *       />
+ *       <KPICard
+ *         title="Customers"
+ *         value={1234}
+ *         subtitle="Active users"
+ *       />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function KPICard({ title, value, subtitle, icon, trend, trendValue, loading, onClick, className, variant, size, }: KPICardProps): React.JSX.Element;
+export default KPICard;
+//# sourceMappingURL=KPICard.d.ts.map

package/dist/components/Dashboard/KPICard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KPICard.d.ts","sourceRoot":"","sources":["../../../src/components/Dashboard/KPICard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,WAAW,YAAY;IAC3B,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,uDAAuD;IACvD,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;IAClC,iCAAiC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC5C,gBAAgB;IAChB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,UAAU,EACV,OAAe,EACf,OAAO,EACP,SAAc,EACd,OAAmB,EACnB,IAAW,GACZ,EAAE,YAAY,qBAmFd;AAED,eAAe,OAAO,CAAC"}

package/dist/components/Dashboard/KPICard.js

@@ -0,0 +1,82 @@
+import React from 'react';
+/**
+ * KPICard - Display Key Performance Indicator metrics
+ *
+ * A card component for displaying business metrics and KPIs with
+ * optional trend indicators and icons.
+ *
+ * @example
+ * ```tsx
+ * import { KPICard } from '@varity-labs/ui-kit';
+ *
+ * function Dashboard() {
+ *   return (
+ *     <div className="grid grid-cols-4 gap-4">
+ *       <KPICard
+ *         title="Revenue"
+ *         value="$12,345"
+ *         trend="up"
+ *         trendValue="+12%"
+ *         icon={<DollarIcon />}
+ *       />
+ *       <KPICard
+ *         title="Customers"
+ *         value={1234}
+ *         subtitle="Active users"
+ *       />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function KPICard({ title, value, subtitle, icon, trend, trendValue, loading = false, onClick, className = '', variant = 'default', size = 'md', }) {
+    const baseStyles = 'rounded-lg transition-all duration-200';
+    const variantStyles = {
+        default: 'bg-white border border-gray-200 shadow-sm',
+        outlined: 'bg-transparent border-2 border-gray-300',
+        filled: 'bg-gray-50 border border-gray-100',
+    };
+    const sizeStyles = {
+        sm: 'p-3',
+        md: 'p-4',
+        lg: 'p-6',
+    };
+    const valueSizeStyles = {
+        sm: 'text-xl',
+        md: 'text-2xl',
+        lg: 'text-3xl',
+    };
+    const trendColors = {
+        up: 'text-green-600 bg-green-50',
+        down: 'text-red-600 bg-red-50',
+        neutral: 'text-gray-600 bg-gray-100',
+    };
+    const trendIcons = {
+        up: '↑',
+        down: '↓',
+        neutral: '→',
+    };
+    const interactiveStyles = onClick
+        ? 'cursor-pointer hover:shadow-md hover:border-blue-300 active:scale-[0.98]'
+        : '';
+    if (loading) {
+        return (React.createElement("div", { className: `${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${className} animate-pulse` },
+            React.createElement("div", { className: "flex items-center justify-between mb-2" },
+                React.createElement("div", { className: "h-4 bg-gray-200 rounded w-24" }),
+                icon && React.createElement("div", { className: "h-8 w-8 bg-gray-200 rounded" })),
+            React.createElement("div", { className: "h-8 bg-gray-200 rounded w-32 mb-2" }),
+            subtitle && React.createElement("div", { className: "h-3 bg-gray-200 rounded w-20" })));
+    }
+    return (React.createElement("div", { className: `${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${interactiveStyles} ${className}`, onClick: onClick, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined },
+        React.createElement("div", { className: "flex items-center justify-between mb-2" },
+            React.createElement("h3", { className: "text-sm font-medium text-gray-600" }, title),
+            icon && React.createElement("div", { className: "text-gray-400" }, icon)),
+        React.createElement("div", { className: "flex items-baseline gap-2" },
+            React.createElement("span", { className: `font-bold text-gray-900 ${valueSizeStyles[size]}` }, value),
+            trend && trendValue && (React.createElement("span", { className: `inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-xs font-medium ${trendColors[trend]}` },
+                React.createElement("span", null, trendIcons[trend]),
+                React.createElement("span", null, trendValue)))),
+        subtitle && (React.createElement("p", { className: "mt-1 text-xs text-gray-500" }, subtitle))));
+}
+export default KPICard;
+//# sourceMappingURL=KPICard.js.map