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

package/dist/components/AI/MessageBubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../../src/components/AI/MessageBubble.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,OAAO;IACtB,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,sBAAsB;IACtB,OAAO,EAAE,MAAM,CAAA;IACf,qBAAqB;IACrB,MAAM,EAAE,MAAM,GAAG,KAAK,CAAA;IACtB,wBAAwB;IACxB,SAAS,EAAE,IAAI,CAAA;IACf,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,MAAM,WAAW,kBAAkB;IACjC,mBAAmB;IACnB,OAAO,EAAE,OAAO,CAAA;IAChB,qBAAqB;IACrB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gCAAgC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sBAAsB;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiJtD,CAAA"}

package/dist/components/AI/MessageBubble.js

@@ -0,0 +1,124 @@
+/**
+ * MessageBubble - Chat message bubble component
+ *
+ * Displays a single chat message with avatar, timestamp, and formatting.
+ */
+import React from 'react';
+/**
+ * MessageBubble Component
+ */
+export const MessageBubble = ({ message, showTimestamp = true, enableMarkdown = false, botAvatar, userAvatar }) => {
+    const isBot = message.sender === 'bot';
+    const formatTimestamp = (date) => {
+        return date.toLocaleTimeString('en-US', {
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    };
+    const renderContent = () => {
+        if (message.loading) {
+            return (React.createElement("div", { style: { display: 'flex', gap: '6px', alignItems: 'center' } },
+                React.createElement("div", { className: "typing-dot", style: {
+                        width: '8px',
+                        height: '8px',
+                        borderRadius: '50%',
+                        backgroundColor: 'var(--varity-text-secondary, #757575)',
+                        animation: 'typing 1.4s infinite'
+                    } }),
+                React.createElement("div", { className: "typing-dot", style: {
+                        width: '8px',
+                        height: '8px',
+                        borderRadius: '50%',
+                        backgroundColor: 'var(--varity-text-secondary, #757575)',
+                        animation: 'typing 1.4s infinite 0.2s'
+                    } }),
+                React.createElement("div", { className: "typing-dot", style: {
+                        width: '8px',
+                        height: '8px',
+                        borderRadius: '50%',
+                        backgroundColor: 'var(--varity-text-secondary, #757575)',
+                        animation: 'typing 1.4s infinite 0.4s'
+                    } })));
+        }
+        // Simple markdown-like rendering (basic support)
+        if (enableMarkdown) {
+            let formattedContent = message.content;
+            // Bold: **text**
+            formattedContent = formattedContent.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+            // Italic: *text*
+            formattedContent = formattedContent.replace(/\*(.*?)\*/g, '<em>$1</em>');
+            // Code: `code`
+            formattedContent = formattedContent.replace(/`(.*?)`/g, '<code style="background-color: rgba(0,0,0,0.05); padding: 2px 6px; border-radius: 4px; font-family: monospace;">$1</code>');
+            return React.createElement("span", { dangerouslySetInnerHTML: { __html: formattedContent } });
+        }
+        return React.createElement("span", null, message.content);
+    };
+    return (React.createElement("div", { className: `varity-message-bubble ${isBot ? 'bot' : 'user'}`, style: {
+            display: 'flex',
+            flexDirection: isBot ? 'row' : 'row-reverse',
+            gap: '12px',
+            alignItems: 'flex-start'
+        } },
+        React.createElement("div", { style: {
+                width: '32px',
+                height: '32px',
+                borderRadius: '50%',
+                backgroundColor: isBot
+                    ? 'var(--varity-primary-color, #1976d2)'
+                    : 'var(--varity-accent-color, #ff5722)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: 'white',
+                fontSize: '14px',
+                fontWeight: 600,
+                flexShrink: 0,
+                backgroundImage: (isBot ? botAvatar : userAvatar) ? `url(${isBot ? botAvatar : userAvatar})` : undefined,
+                backgroundSize: 'cover'
+            } },
+            !isBot && !userAvatar && 'U',
+            isBot && !botAvatar && '🤖'),
+        React.createElement("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '4px',
+                maxWidth: '70%'
+            } },
+            React.createElement("div", { style: {
+                    padding: '12px 16px',
+                    borderRadius: isBot ? '12px 12px 12px 4px' : '12px 12px 4px 12px',
+                    backgroundColor: isBot
+                        ? message.error
+                            ? 'var(--varity-error-light, #ffebee)'
+                            : 'var(--varity-bg-card, #ffffff)'
+                        : 'var(--varity-primary-color, #1976d2)',
+                    color: isBot
+                        ? message.error
+                            ? 'var(--varity-error-color, #f44336)'
+                            : 'var(--varity-text-primary, #212121)'
+                        : 'white',
+                    fontSize: '14px',
+                    lineHeight: 1.5,
+                    boxShadow: '0 1px 2px rgba(0,0,0,0.1)',
+                    wordBreak: 'break-word'
+                } }, renderContent()),
+            showTimestamp && !message.loading && (React.createElement("span", { style: {
+                    fontSize: '11px',
+                    color: 'var(--varity-text-secondary, #757575)',
+                    paddingLeft: isBot ? '4px' : '0',
+                    paddingRight: isBot ? '0' : '4px',
+                    alignSelf: isBot ? 'flex-start' : 'flex-end'
+                } }, formatTimestamp(message.timestamp))))));
+};
+// Add typing animation
+if (typeof document !== 'undefined') {
+    const style = document.createElement('style');
+    style.innerHTML = `
+    @keyframes typing {
+      0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
+      30% { transform: translateY(-10px); opacity: 1; }
+    }
+  `;
+    document.head.appendChild(style);
+}
+//# sourceMappingURL=MessageBubble.js.map

package/dist/components/AI/MessageBubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBubble.js","sourceRoot":"","sources":["../../../src/components/AI/MessageBubble.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AA8BzB;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,OAAO,EACP,aAAa,GAAG,IAAI,EACpB,cAAc,GAAG,KAAK,EACtB,SAAS,EACT,UAAU,EACX,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,KAAK,KAAK,CAAA;IAEtC,MAAM,eAAe,GAAG,CAAC,IAAU,EAAU,EAAE;QAC7C,OAAO,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE;YACtC,IAAI,EAAE,SAAS;YACf,MAAM,EAAE,SAAS;SAClB,CAAC,CAAA;IACJ,CAAC,CAAA;IAED,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;YACpB,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE;gBAC/D,6BAAK,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE;wBACjC,KAAK,EAAE,KAAK;wBACZ,MAAM,EAAE,KAAK;wBACb,YAAY,EAAE,KAAK;wBACnB,eAAe,EAAE,uCAAuC;wBACxD,SAAS,EAAE,sBAAsB;qBAClC,GAAI;gBACL,6BAAK,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE;wBACjC,KAAK,EAAE,KAAK;wBACZ,MAAM,EAAE,KAAK;wBACb,YAAY,EAAE,KAAK;wBACnB,eAAe,EAAE,uCAAuC;wBACxD,SAAS,EAAE,2BAA2B;qBACvC,GAAI;gBACL,6BAAK,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE;wBACjC,KAAK,EAAE,KAAK;wBACZ,MAAM,EAAE,KAAK;wBACb,YAAY,EAAE,KAAK;wBACnB,eAAe,EAAE,uCAAuC;wBACxD,SAAS,EAAE,2BAA2B;qBACvC,GAAI,CACD,CACP,CAAA;QACH,CAAC;QAED,iDAAiD;QACjD,IAAI,cAAc,EAAE,CAAC;YACnB,IAAI,gBAAgB,GAAG,OAAO,CAAC,OAAO,CAAA;YACtC,iBAAiB;YACjB,gBAAgB,GAAG,gBAAgB,CAAC,OAAO,CAAC,gBAAgB,EAAE,qBAAqB,CAAC,CAAA;YACpF,iBAAiB;YACjB,gBAAgB,GAAG,gBAAgB,CAAC,OAAO,CAAC,YAAY,EAAE,aAAa,CAAC,CAAA;YACxE,eAAe;YACf,gBAAgB,GAAG,gBAAgB,CAAC,OAAO,CAAC,UAAU,EAAE,2HAA2H,CAAC,CAAA;YAEpL,OAAO,8BAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,gBAAgB,EAAE,GAAI,CAAA;QACxE,CAAC;QAED,OAAO,kCAAO,OAAO,CAAC,OAAO,CAAQ,CAAA;IACvC,CAAC,CAAA;IAED,OAAO,CACL,6BACE,SAAS,EAAE,yBAAyB,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE,EAC5D,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa;YAC5C,GAAG,EAAE,MAAM;YACX,UAAU,EAAE,YAAY;SACzB;QAGD,6BACE,KAAK,EAAE;gBACL,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,YAAY,EAAE,KAAK;gBACnB,eAAe,EAAE,KAAK;oBACpB,CAAC,CAAC,sCAAsC;oBACxC,CAAC,CAAC,qCAAqC;gBACzC,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,cAAc,EAAE,QAAQ;gBACxB,KAAK,EAAE,OAAO;gBACd,QAAQ,EAAE,MAAM;gBAChB,UAAU,EAAE,GAAG;gBACf,UAAU,EAAE,CAAC;gBACb,eAAe,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,SAAS;gBACxG,cAAc,EAAE,OAAO;aACxB;YAEA,CAAC,KAAK,IAAI,CAAC,UAAU,IAAI,GAAG;YAC5B,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CACxB;QAGN,6BACE,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,GAAG,EAAE,KAAK;gBACV,QAAQ,EAAE,KAAK;aAChB;YAGD,6BACE,KAAK,EAAE;oBACL,OAAO,EAAE,WAAW;oBACpB,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAoB;oBACjE,eAAe,EAAE,KAAK;wBACpB,CAAC,CAAC,OAAO,CAAC,KAAK;4BACb,CAAC,CAAC,oCAAoC;4BACtC,CAAC,CAAC,gCAAgC;wBACpC,CAAC,CAAC,sCAAsC;oBAC1C,KAAK,EAAE,KAAK;wBACV,CAAC,CAAC,OAAO,CAAC,KAAK;4BACb,CAAC,CAAC,oCAAoC;4BACtC,CAAC,CAAC,qCAAqC;wBACzC,CAAC,CAAC,OAAO;oBACX,QAAQ,EAAE,MAAM;oBAChB,UAAU,EAAE,GAAG;oBACf,SAAS,EAAE,2BAA2B;oBACtC,SAAS,EAAE,YAAY;iBACxB,IAEA,aAAa,EAAE,CACZ;YAGL,aAAa,IAAI,CAAC,OAAO,CAAC,OAAO,IAAI,CACpC,8BACE,KAAK,EAAE;oBACL,QAAQ,EAAE,MAAM;oBAChB,KAAK,EAAE,uCAAuC;oBAC9C,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG;oBAChC,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK;oBACjC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU;iBAC7C,IAEA,eAAe,CAAC,OAAO,CAAC,SAAS,CAAC,CAC9B,CACR,CACG,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAED,uBAAuB;AACvB,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;IACpC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;IAC7C,KAAK,CAAC,SAAS,GAAG;;;;;GAKjB,CAAA;IACD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;AAClC,CAAC"}

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

@@ -0,0 +1,12 @@
+/**
+ * AI Components
+ *
+ * AI-powered chatbot and conversational interface components.
+ */
+export { ChatbotWidget } from './ChatbotWidget';
+export { MessageBubble } from './MessageBubble';
+export { InputBar } from './InputBar';
+export type { ChatbotWidgetProps } from './ChatbotWidget';
+export type { MessageBubbleProps, Message } from './MessageBubble';
+export type { InputBarProps } from './InputBar';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/AI/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AI/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AACzD,YAAY,EAAE,kBAAkB,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAA;AAClE,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA"}

package/dist/components/AI/index.js

@@ -0,0 +1,9 @@
+/**
+ * AI Components
+ *
+ * AI-powered chatbot and conversational interface components.
+ */
+export { ChatbotWidget } from './ChatbotWidget';
+export { MessageBubble } from './MessageBubble';
+export { InputBar } from './InputBar';
+//# sourceMappingURL=index.js.map

package/dist/components/AI/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AI/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA"}

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

@@ -0,0 +1,48 @@
+/**
+ * AnalyticsCard - Metric card component for displaying KPIs
+ *
+ * Displays a single metric with optional trend indicator and chart.
+ */
+import React from 'react';
+export interface AnalyticsCardProps {
+    /** Card title */
+    title: string;
+    /** Main metric value */
+    value: string | number;
+    /** Unit for the value (e.g., "$", "%", "users") */
+    unit?: string;
+    /** Trend direction */
+    trend?: 'up' | 'down' | 'neutral';
+    /** Trend percentage */
+    trendValue?: number;
+    /** Comparison period (e.g., "vs last month") */
+    comparisonPeriod?: string;
+    /** Icon to display */
+    icon?: string;
+    /** Card background color */
+    backgroundColor?: string;
+    /** Card action callback */
+    onClick?: () => void;
+    /** Loading state */
+    loading?: boolean;
+    /** Mini chart data (optional) */
+    chartData?: number[];
+}
+/**
+ * AnalyticsCard Component
+ *
+ * @example
+ * ```tsx
+ * <AnalyticsCard
+ *   title="Total Revenue"
+ *   value={125000}
+ *   unit="$"
+ *   trend="up"
+ *   trendValue={12.5}
+ *   comparisonPeriod="vs last month"
+ *   icon="💰"
+ * />
+ * ```
+ */
+export declare const AnalyticsCard: React.FC<AnalyticsCardProps>;
+//# sourceMappingURL=AnalyticsCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnalyticsCard.d.ts","sourceRoot":"","sources":["../../../src/components/Analytics/AnalyticsCard.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,WAAW,kBAAkB;IACjC,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,wBAAwB;IACxB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,mDAAmD;IACnD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sBAAsB;IACtB,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;IACjC,uBAAuB;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4BAA4B;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAA;CACrB;AAED;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqKtD,CAAA"}

package/dist/components/Analytics/AnalyticsCard.js

@@ -0,0 +1,156 @@
+/**
+ * AnalyticsCard - Metric card component for displaying KPIs
+ *
+ * Displays a single metric with optional trend indicator and chart.
+ */
+import React from 'react';
+/**
+ * AnalyticsCard Component
+ *
+ * @example
+ * ```tsx
+ * <AnalyticsCard
+ *   title="Total Revenue"
+ *   value={125000}
+ *   unit="$"
+ *   trend="up"
+ *   trendValue={12.5}
+ *   comparisonPeriod="vs last month"
+ *   icon="💰"
+ * />
+ * ```
+ */
+export const AnalyticsCard = ({ title, value, unit = '', trend = 'neutral', trendValue, comparisonPeriod, icon, backgroundColor, onClick, loading = false, chartData }) => {
+    const getTrendColor = () => {
+        switch (trend) {
+            case 'up':
+                return 'var(--varity-success-color, #4caf50)';
+            case 'down':
+                return 'var(--varity-error-color, #f44336)';
+            default:
+                return 'var(--varity-text-secondary, #757575)';
+        }
+    };
+    const getTrendIcon = () => {
+        switch (trend) {
+            case 'up':
+                return '▲';
+            case 'down':
+                return '▼';
+            default:
+                return '─';
+        }
+    };
+    const formatValue = (val) => {
+        if (typeof val === 'number') {
+            // Format large numbers
+            if (val >= 1000000) {
+                return `${(val / 1000000).toFixed(1)}M`;
+            }
+            else if (val >= 1000) {
+                return `${(val / 1000).toFixed(1)}K`;
+            }
+            return val.toLocaleString();
+        }
+        return val;
+    };
+    return (React.createElement("div", { className: "varity-analytics-card", style: {
+            backgroundColor: backgroundColor || 'var(--varity-bg-card, #ffffff)',
+            border: '1px solid var(--varity-border-color, #e0e0e0)',
+            borderRadius: '12px',
+            padding: '20px',
+            cursor: onClick ? 'pointer' : 'default',
+            transition: 'all 0.2s ease',
+            boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
+            position: 'relative',
+            overflow: 'hidden'
+        }, onClick: onClick, onMouseEnter: (e) => {
+            if (onClick) {
+                e.currentTarget.style.transform = 'translateY(-2px)';
+                e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)';
+            }
+        }, onMouseLeave: (e) => {
+            if (onClick) {
+                e.currentTarget.style.transform = 'translateY(0)';
+                e.currentTarget.style.boxShadow = '0 2px 4px rgba(0,0,0,0.05)';
+            }
+        } }, loading ? (React.createElement("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '120px' } },
+        React.createElement("div", { style: {
+                width: '32px',
+                height: '32px',
+                border: '3px solid var(--varity-border-color, #e0e0e0)',
+                borderTop: '3px solid var(--varity-primary-color, #1976d2)',
+                borderRadius: '50%',
+                animation: 'spin 1s linear infinite'
+            } }))) : (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '12px' } },
+            React.createElement("span", { style: {
+                    fontSize: '14px',
+                    color: 'var(--varity-text-secondary, #757575)',
+                    fontWeight: 500
+                } }, title),
+            icon && (React.createElement("span", { style: { fontSize: '24px', opacity: 0.8 } }, icon))),
+        React.createElement("div", { style: { marginBottom: '8px' } },
+            React.createElement("span", { style: {
+                    fontSize: '32px',
+                    fontWeight: 700,
+                    color: 'var(--varity-text-primary, #212121)'
+                } },
+                unit && unit !== '%' && React.createElement("span", { style: { fontSize: '24px', marginRight: '4px' } }, unit),
+                formatValue(value),
+                unit === '%' && React.createElement("span", { style: { fontSize: '24px', marginLeft: '2px' } }, unit))),
+        trendValue !== undefined && (React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+            React.createElement("span", { style: {
+                    color: getTrendColor(),
+                    fontSize: '14px',
+                    fontWeight: 600,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '4px'
+                } },
+                React.createElement("span", null, getTrendIcon()),
+                React.createElement("span", null,
+                    Math.abs(trendValue).toFixed(1),
+                    "%")),
+            comparisonPeriod && (React.createElement("span", { style: { fontSize: '12px', color: 'var(--varity-text-secondary, #757575)' } }, comparisonPeriod)))),
+        chartData && chartData.length > 0 && (React.createElement("div", { style: {
+                marginTop: '16px',
+                height: '40px',
+                display: 'flex',
+                alignItems: 'flex-end',
+                gap: '2px',
+                opacity: 0.6
+            } }, renderMiniChart(chartData)))))));
+};
+/**
+ * Render a simple mini chart from data points
+ */
+function renderMiniChart(data) {
+    const max = Math.max(...data);
+    const min = Math.min(...data);
+    const range = max - min || 1;
+    return data.map((value, index) => {
+        const height = ((value - min) / range) * 100;
+        return (React.createElement("div", { key: index, style: {
+                flex: 1,
+                height: `${height}%`,
+                backgroundColor: 'var(--varity-primary-color, #1976d2)',
+                borderRadius: '2px',
+                minHeight: '4px'
+            } }));
+    });
+}
+/**
+ * Add keyframe animation for loading spinner
+ */
+if (typeof document !== 'undefined') {
+    const style = document.createElement('style');
+    style.innerHTML = `
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+  `;
+    document.head.appendChild(style);
+}
+//# sourceMappingURL=AnalyticsCard.js.map

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

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

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

@@ -0,0 +1,53 @@
+/**
+ * ChartContainer - Wrapper component for charts with title and actions
+ *
+ * Provides consistent styling and functionality for chart visualizations.
+ */
+import React, { ReactNode } from 'react';
+export interface ChartContainerProps {
+    /** Chart title */
+    title: string;
+    /** Chart subtitle or description */
+    subtitle?: string;
+    /** Chart content (render your chart library here) */
+    children: ReactNode;
+    /** Action buttons */
+    actions?: ChartAction[];
+    /** Container height */
+    height?: number | string;
+    /** Loading state */
+    loading?: boolean;
+    /** Error message */
+    error?: string;
+    /** Empty state message */
+    emptyMessage?: string;
+    /** Show empty state */
+    isEmpty?: boolean;
+}
+export interface ChartAction {
+    /** Action label */
+    label: string;
+    /** Action icon */
+    icon?: string;
+    /** Action callback */
+    onClick: () => void;
+}
+/**
+ * ChartContainer Component
+ *
+ * @example
+ * ```tsx
+ * <ChartContainer
+ *   title="Revenue Trend"
+ *   subtitle="Last 30 days"
+ *   height={300}
+ *   actions={[
+ *     { label: "Export", icon: "📥", onClick: () => handleExport() }
+ *   ]}
+ * >
+ *   <YourChartComponent />
+ * </ChartContainer>
+ * ```
+ */
+export declare const ChartContainer: React.FC<ChartContainerProps>;
+//# sourceMappingURL=ChartContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChartContainer.d.ts","sourceRoot":"","sources":["../../../src/components/Analytics/ChartContainer.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAExC,MAAM,WAAW,mBAAmB;IAClC,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,qDAAqD;IACrD,QAAQ,EAAE,SAAS,CAAA;IACnB,qBAAqB;IACrB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAA;IACvB,uBAAuB;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uBAAuB;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,WAAW,WAAW;IAC1B,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,kBAAkB;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sBAAsB;IACtB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqKxD,CAAA"}

package/dist/components/Analytics/ChartContainer.js

@@ -0,0 +1,128 @@
+/**
+ * ChartContainer - Wrapper component for charts with title and actions
+ *
+ * Provides consistent styling and functionality for chart visualizations.
+ */
+import React from 'react';
+/**
+ * ChartContainer Component
+ *
+ * @example
+ * ```tsx
+ * <ChartContainer
+ *   title="Revenue Trend"
+ *   subtitle="Last 30 days"
+ *   height={300}
+ *   actions={[
+ *     { label: "Export", icon: "📥", onClick: () => handleExport() }
+ *   ]}
+ * >
+ *   <YourChartComponent />
+ * </ChartContainer>
+ * ```
+ */
+export const ChartContainer = ({ title, subtitle, children, actions = [], height = 400, loading = false, error, emptyMessage = 'No data available', isEmpty = false }) => {
+    return (React.createElement("div", { className: "varity-chart-container", style: {
+            backgroundColor: 'var(--varity-bg-card, #ffffff)',
+            border: '1px solid var(--varity-border-color, #e0e0e0)',
+            borderRadius: '12px',
+            padding: '20px',
+            boxShadow: '0 2px 4px rgba(0,0,0,0.05)'
+        } },
+        React.createElement("div", { style: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'flex-start',
+                marginBottom: '16px'
+            } },
+            React.createElement("div", null,
+                React.createElement("h3", { style: {
+                        margin: 0,
+                        fontSize: '18px',
+                        fontWeight: 600,
+                        color: 'var(--varity-text-primary, #212121)',
+                        marginBottom: subtitle ? '4px' : 0
+                    } }, title),
+                subtitle && (React.createElement("p", { style: {
+                        margin: 0,
+                        fontSize: '13px',
+                        color: 'var(--varity-text-secondary, #757575)'
+                    } }, subtitle))),
+            actions.length > 0 && (React.createElement("div", { style: { display: 'flex', gap: '8px' } }, actions.map((action, index) => (React.createElement("button", { key: index, onClick: action.onClick, style: {
+                    backgroundColor: 'transparent',
+                    border: '1px solid var(--varity-border-color, #e0e0e0)',
+                    borderRadius: '6px',
+                    padding: '6px 12px',
+                    cursor: 'pointer',
+                    fontSize: '13px',
+                    color: 'var(--varity-text-primary, #212121)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '6px',
+                    transition: 'all 0.2s ease'
+                }, onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = 'var(--varity-bg-hover, #f0f0f0)';
+                    e.currentTarget.style.borderColor = 'var(--varity-primary-color, #1976d2)';
+                }, onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = 'transparent';
+                    e.currentTarget.style.borderColor = 'var(--varity-border-color, #e0e0e0)';
+                } },
+                action.icon && React.createElement("span", null, action.icon),
+                React.createElement("span", null, action.label))))))),
+        React.createElement("div", { style: {
+                height: typeof height === 'number' ? `${height}px` : height,
+                position: 'relative'
+            } },
+            loading && (React.createElement("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    backgroundColor: 'rgba(255,255,255,0.9)',
+                    zIndex: 10
+                } },
+                React.createElement("div", { style: {
+                        width: '40px',
+                        height: '40px',
+                        border: '4px solid var(--varity-border-color, #e0e0e0)',
+                        borderTop: '4px solid var(--varity-primary-color, #1976d2)',
+                        borderRadius: '50%',
+                        animation: 'spin 1s linear infinite'
+                    } }))),
+            error && !loading && (React.createElement("div", { style: {
+                    height: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    gap: '12px'
+                } },
+                React.createElement("span", { style: { fontSize: '48px' } }, "\u26A0\uFE0F"),
+                React.createElement("p", { style: {
+                        margin: 0,
+                        fontSize: '14px',
+                        color: 'var(--varity-error-color, #f44336)',
+                        textAlign: 'center'
+                    } }, error))),
+            isEmpty && !loading && !error && (React.createElement("div", { style: {
+                    height: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    gap: '12px'
+                } },
+                React.createElement("span", { style: { fontSize: '48px' } }, "\uD83D\uDCCA"),
+                React.createElement("p", { style: {
+                        margin: 0,
+                        fontSize: '14px',
+                        color: 'var(--varity-text-secondary, #757575)',
+                        textAlign: 'center'
+                    } }, emptyMessage))),
+            !loading && !error && !isEmpty && children)));
+};
+//# sourceMappingURL=ChartContainer.js.map

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

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

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

@@ -0,0 +1,62 @@
+/**
+ * DataTable - Sortable, filterable data table component
+ *
+ * Displays tabular data with sorting, filtering, and pagination support.
+ */
+import React from 'react';
+export interface DataTableColumn<T = any> {
+    /** Column key (must match data object key) */
+    key: string;
+    /** Column display header */
+    header: string;
+    /** Column width */
+    width?: string | number;
+    /** Whether column is sortable */
+    sortable?: boolean;
+    /** Custom cell renderer */
+    render?: (value: any, row: T) => React.ReactNode;
+    /** Alignment */
+    align?: 'left' | 'center' | 'right';
+}
+export interface DataTableProps<T = any> {
+    /** Table columns configuration */
+    columns: DataTableColumn<T>[];
+    /** Table data */
+    data: T[];
+    /** Loading state */
+    loading?: boolean;
+    /** Show pagination */
+    pagination?: boolean;
+    /** Items per page */
+    pageSize?: number;
+    /** Row click handler */
+    onRowClick?: (row: T) => void;
+    /** Empty state message */
+    emptyMessage?: string;
+    /** Enable row hover */
+    hoverable?: boolean;
+    /** Enable row striping */
+    striped?: boolean;
+}
+/**
+ * DataTable Component
+ *
+ * @example
+ * ```tsx
+ * <DataTable
+ *   columns={[
+ *     { key: 'name', header: 'Name', sortable: true },
+ *     { key: 'value', header: 'Value', align: 'right',
+ *       render: (val) => `$${val}` }
+ *   ]}
+ *   data={[
+ *     { name: 'Product A', value: 1000 },
+ *     { name: 'Product B', value: 2000 }
+ *   ]}
+ *   pagination
+ *   pageSize={10}
+ * />
+ * ```
+ */
+export declare const DataTable: <T extends Record<string, any>>({ columns, data, loading, pagination, pageSize, onRowClick, emptyMessage, hoverable, striped }: DataTableProps<T>) => React.JSX.Element;
+//# sourceMappingURL=DataTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/Analytics/DataTable.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAA4B,MAAM,OAAO,CAAA;AAEhD,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,GAAG;IACtC,8CAA8C;IAC9C,GAAG,EAAE,MAAM,CAAA;IACX,4BAA4B;IAC5B,MAAM,EAAE,MAAM,CAAA;IACd,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IAChD,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC;AAED,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,GAAG;IACrC,kCAAkC;IAClC,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAA;IAC7B,iBAAiB;IACjB,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sBAAsB;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,wBAAwB;IACxB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAA;IAC7B,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,uBAAuB;IACvB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,gGAUtD,cAAc,CAAC,CAAC,CAAC,sBAiOnB,CAAA"}