@rayvelez/findash-ui 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,527 @@
+import { ClassValue } from 'clsx';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Utility function to merge Tailwind CSS classes with clsx
+ * @param inputs - Class values to merge
+ * @returns Merged class string
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+/**
+ * FinDash UI - Type Definitions
+ */
+/**
+ * User information for profile displays
+ */
+interface UserInfo {
+    /** User's display name */
+    name: string;
+    /** User's role or subscription tier */
+    role: string;
+    /** URL to user's avatar image */
+    avatarUrl: string;
+}
+/**
+ * Navigation item for sidebar/mobile nav
+ */
+interface NavItem {
+    /** Material icon name */
+    icon: string;
+    /** Display label */
+    label: string;
+    /** Whether this item is currently active */
+    active: boolean;
+    /** Optional URL for navigation */
+    href?: string;
+}
+/**
+ * Action item for floating nav bar and quick actions
+ */
+interface ActionItem {
+    /** Material icon name */
+    icon: string;
+    /** Action label */
+    label: string;
+    /** Optional color class */
+    color?: string;
+}
+/**
+ * Portfolio allocation entry
+ */
+interface PortfolioAllocation {
+    /** Asset name (e.g., "Bitcoin") */
+    asset: string;
+    /** Asset symbol (e.g., "BTC") */
+    symbol: string;
+    /** Percentage of portfolio (0-100) */
+    percentage: number;
+    /** Tailwind color class (e.g., "bg-primary") */
+    color: string;
+}
+/**
+ * Watchlist cryptocurrency item
+ */
+interface WatchlistItem {
+    /** Cryptocurrency name */
+    name: string;
+    /** Cryptocurrency symbol */
+    symbol: string;
+    /** Current price as string */
+    price: string;
+    /** Price change (e.g., "+5.2%") */
+    change: string;
+    /** Whether the change is positive */
+    positive: boolean;
+}
+/**
+ * Market forecast timeline item
+ */
+interface ForecastItem {
+    /** Year of the forecast */
+    year: string;
+    /** Forecast description */
+    description: string;
+    /** Whether this milestone has been completed */
+    completed: boolean;
+}
+/**
+ * Transaction user for avatar display
+ */
+interface TransactionUser {
+    /** Alt text for avatar */
+    alt: string;
+    /** Avatar image URL */
+    avatarUrl: string;
+}
+/**
+ * Scheduled transfer information
+ */
+interface ScheduledTransfer {
+    /** Amount and destination (e.g., "0.5 ETH → Wallet #2") */
+    description: string;
+    /** Time until transfer (e.g., "In 2 days") */
+    timeUntil: string;
+}
+/**
+ * Props for SalesStatisticsCard
+ */
+interface SalesStatisticsCardProps {
+    /** Number of visitors */
+    visitors?: number;
+    /** Days since last update */
+    updatedDaysAgo?: number;
+    /** Callback when period changes */
+    onPeriodChange?: (period: string) => void;
+    /** Loading state */
+    isLoading?: boolean;
+}
+/**
+ * Props for CurrentBalanceCard
+ */
+interface CurrentBalanceCardProps {
+    /** Current balance amount */
+    balance?: number;
+    /** Percentage change */
+    percentageChange?: number;
+    /** Average score/value */
+    averageScore?: number;
+    /** Currency symbol */
+    currency?: string;
+    /** Previous button callback */
+    onPrevious?: () => void;
+    /** Next button callback */
+    onNext?: () => void;
+    /** Loading state */
+    isLoading?: boolean;
+}
+/**
+ * Props for InvestmentGrowthCard
+ */
+interface InvestmentGrowthCardProps {
+    /** Growth percentage */
+    percentage?: number;
+    /** Monthly average value */
+    monthlyAverage?: number;
+    /** Total value */
+    totalValue?: number;
+    /** Currency symbol */
+    currency?: string;
+    /** Previous button callback */
+    onPrevious?: () => void;
+    /** Next button callback */
+    onNext?: () => void;
+    /** Loading state */
+    isLoading?: boolean;
+}
+/**
+ * Props for BtcPriceCard
+ */
+interface BtcPriceCardProps {
+    /** Bitcoin price */
+    price?: number;
+    /** Percentage change */
+    changePercentage?: number;
+    /** Currency symbol */
+    currency?: string;
+    /** Loading state */
+    isLoading?: boolean;
+}
+/**
+ * Props for MarketCapCard
+ */
+interface MarketCapCardProps {
+    /** Market cap value as formatted string */
+    value?: string;
+    /** Loading state */
+    isLoading?: boolean;
+}
+/**
+ * Props for MarketForecastCard
+ */
+interface MarketForecastCardProps {
+    /** Array of forecast items */
+    forecasts?: ForecastItem[];
+    /** Loading state */
+    isLoading?: boolean;
+}
+/**
+ * Props for PortfolioAllocationCard
+ */
+interface PortfolioAllocationCardProps {
+    /** Array of portfolio allocations */
+    allocations?: PortfolioAllocation[];
+    /** Options button callback */
+    onOptionsClick?: () => void;
+    /** Loading state */
+    isLoading?: boolean;
+}
+/**
+ * Props for WatchlistCard
+ */
+interface WatchlistCardProps {
+    /** Array of watchlist items */
+    items?: WatchlistItem[];
+    /** View all button callback */
+    onViewAll?: () => void;
+    /** Loading state */
+    isLoading?: boolean;
+}
+/**
+ * Props for RecentTransactionsCard
+ */
+interface RecentTransactionsCardProps {
+    /** Transaction summary text */
+    summary?: string;
+    /** Array of user avatars to display */
+    users?: TransactionUser[];
+    /** Options button callback */
+    onOptionsClick?: () => void;
+    /** Loading state */
+    isLoading?: boolean;
+}
+/**
+ * Props for QuickActionsCard
+ */
+interface QuickActionsCardProps {
+    /** Array of action items */
+    actions?: ActionItem[];
+    /** Scheduled transfer info */
+    scheduledTransfer?: ScheduledTransfer;
+    /** Action click callback */
+    onActionClick?: (action: ActionItem) => void;
+    /** Loading state */
+    isLoading?: boolean;
+}
+/**
+ * Props for FloatingNavBar
+ */
+interface FloatingNavBarProps {
+    /** Array of action items */
+    actions?: ActionItem[];
+    /** Action click callback */
+    onActionClick?: (action: ActionItem) => void;
+}
+/**
+ * Props for Sidebar
+ */
+interface SidebarProps {
+    /** Navigation items */
+    navItems?: NavItem[];
+    /** User information */
+    user?: UserInfo;
+    /** Theme toggle callback */
+    onToggleTheme: () => void;
+    /** Whether sidebar is collapsed */
+    isCollapsed: boolean;
+    /** Toggle collapse callback */
+    onToggleCollapse: () => void;
+    /** Navigation item click callback */
+    onNavItemClick?: (item: NavItem) => void;
+}
+/**
+ * Props for MobileNav
+ */
+interface MobileNavProps {
+    /** Navigation items */
+    navItems?: NavItem[];
+    /** User information */
+    user?: UserInfo;
+    /** Theme toggle callback */
+    onToggleTheme: () => void;
+    /** Navigation item click callback */
+    onNavItemClick?: (item: NavItem) => void;
+}
+/**
+ * Complete dashboard data structure
+ */
+interface DashboardData {
+    /** User information */
+    user?: UserInfo;
+    /** Balance data */
+    balance?: {
+        currentBalance: number;
+        percentageChange: number;
+        averageScore: number;
+    };
+    /** Investment growth data */
+    investmentGrowth?: {
+        percentage: number;
+        monthlyAverage: number;
+        totalValue: number;
+    };
+    /** BTC price data */
+    btcPrice?: {
+        price: number;
+        changePercentage: number;
+    };
+    /** Market cap data */
+    marketCap?: {
+        value: string;
+    };
+    /** Sales statistics data */
+    salesStatistics?: {
+        visitors: number;
+        updatedDaysAgo: number;
+    };
+    /** Portfolio allocations */
+    portfolio?: PortfolioAllocation[];
+    /** Watchlist items */
+    watchlist?: WatchlistItem[];
+    /** Market forecasts */
+    forecasts?: ForecastItem[];
+    /** Transaction data */
+    transactions?: {
+        summary: string;
+        users?: TransactionUser[];
+    };
+    /** Quick actions */
+    quickActions?: ActionItem[];
+    /** Scheduled transfer */
+    scheduledTransfer?: ScheduledTransfer;
+}
+/**
+ * Props for DashboardTemplate
+ */
+interface DashboardTemplateProps {
+    /** Dashboard data */
+    data?: DashboardData;
+    /** Global loading state */
+    isLoading?: boolean;
+    /** Theme toggle callback */
+    onThemeToggle?: () => void;
+    /** Navigation item click callback */
+    onNavItemClick?: (item: NavItem) => void;
+    /** Floating action click callback */
+    onActionClick?: (action: ActionItem) => void;
+    /** Additional className for wrapper */
+    className?: string;
+}
+
+/**
+ * SalesStatisticsCard - Displays visitor statistics with decorative bar chart
+ *
+ * @example
+ * ```tsx
+ * <SalesStatisticsCard
+ *   visitors={2025}
+ *   updatedDaysAgo={1}
+ *   onPeriodChange={(period) => console.log(period)}
+ * />
+ * ```
+ */
+declare function SalesStatisticsCard({ visitors, updatedDaysAgo, onPeriodChange, isLoading, }: SalesStatisticsCardProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * CurrentBalanceCard - Displays current balance with gauge visualization
+ *
+ * @example
+ * ```tsx
+ * <CurrentBalanceCard
+ *   balance={15368}
+ *   percentageChange={14}
+ *   averageScore={18324}
+ *   onPrevious={() => {}}
+ *   onNext={() => {}}
+ * />
+ * ```
+ */
+declare function CurrentBalanceCard({ balance, percentageChange, averageScore, currency, onPrevious, onNext, isLoading, }: CurrentBalanceCardProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * InvestmentGrowthCard - Displays investment growth metrics with gauge visualization
+ *
+ * @example
+ * ```tsx
+ * <InvestmentGrowthCard
+ *   percentage={8.2}
+ *   monthlyAverage={12450}
+ *   totalValue={24890}
+ * />
+ * ```
+ */
+declare function InvestmentGrowthCard({ percentage, monthlyAverage, totalValue, currency, onPrevious, onNext, isLoading, }: InvestmentGrowthCardProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * BtcPriceCard - Displays Bitcoin price with progress indicator
+ *
+ * @example
+ * ```tsx
+ * <BtcPriceCard price={21105} changePercentage={28.21} />
+ * ```
+ */
+declare function BtcPriceCard({ price, changePercentage, currency, isLoading, }: BtcPriceCardProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * MarketCapCard - Displays market cap forecast with line chart
+ *
+ * @example
+ * ```tsx
+ * <MarketCapCard value="1,3trln$" />
+ * ```
+ */
+declare function MarketCapCard({ value, isLoading, }: MarketCapCardProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * MarketForecastCard - Displays market forecast timeline
+ *
+ * @example
+ * ```tsx
+ * <MarketForecastCard
+ *   forecasts={[
+ *     { year: "2024", description: "Market milestone", completed: false }
+ *   ]}
+ * />
+ * ```
+ */
+declare function MarketForecastCard({ forecasts, isLoading, }: MarketForecastCardProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * PortfolioAllocationCard - Displays portfolio breakdown with progress bar
+ *
+ * @example
+ * ```tsx
+ * <PortfolioAllocationCard
+ *   allocations={[
+ *     { asset: "Bitcoin", symbol: "BTC", percentage: 45, color: "bg-primary" }
+ *   ]}
+ *   onOptionsClick={() => {}}
+ * />
+ * ```
+ */
+declare function PortfolioAllocationCard({ allocations, onOptionsClick, isLoading, }: PortfolioAllocationCardProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * WatchlistCard - Displays cryptocurrency watchlist
+ *
+ * @example
+ * ```tsx
+ * <WatchlistCard
+ *   items={[
+ *     { name: "Cardano", symbol: "ADA", price: "0.58", change: "+5.2%", positive: true }
+ *   ]}
+ *   onViewAll={() => {}}
+ * />
+ * ```
+ */
+declare function WatchlistCard({ items, onViewAll, isLoading, }: WatchlistCardProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * RecentTransactionsCard - Displays recent transaction summary
+ *
+ * @example
+ * ```tsx
+ * <RecentTransactionsCard
+ *   summary="12,53 ETH/1 BTC"
+ *   users={[{ alt: "User", avatarUrl: "..." }]}
+ * />
+ * ```
+ */
+declare function RecentTransactionsCard({ summary, users, onOptionsClick, isLoading, }: RecentTransactionsCardProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * QuickActionsCard - Quick action buttons with scheduled transfer
+ *
+ * @example
+ * ```tsx
+ * <QuickActionsCard
+ *   actions={[{ icon: "add_circle", label: "Buy", color: "bg-primary" }]}
+ *   scheduledTransfer={{ description: "0.5 ETH → Wallet", timeUntil: "In 2 days" }}
+ *   onActionClick={(action) => console.log(action)}
+ * />
+ * ```
+ */
+declare function QuickActionsCard({ actions, scheduledTransfer, onActionClick, isLoading, }: QuickActionsCardProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * FloatingNavBar - Floating action bar with liquid glass effect
+ *
+ * @example
+ * ```tsx
+ * <FloatingNavBar
+ *   actions={[
+ *     { icon: "add_circle", label: "Buy" },
+ *     { icon: "remove_circle", label: "Sell" },
+ *   ]}
+ *   onActionClick={(action) => console.log(action)}
+ * />
+ * ```
+ */
+declare function FloatingNavBar({ actions, onActionClick, }: FloatingNavBarProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Sidebar - Desktop sidebar navigation
+ *
+ * @example
+ * ```tsx
+ * <Sidebar
+ *   navItems={[{ icon: "dashboard", label: "Dashboard", active: true }]}
+ *   user={{ name: "Alex", role: "Premium", avatarUrl: "..." }}
+ *   onToggleTheme={() => {}}
+ *   isCollapsed={false}
+ *   onToggleCollapse={() => {}}
+ * />
+ * ```
+ */
+declare function Sidebar({ navItems, user, onToggleTheme, isCollapsed, onToggleCollapse, onNavItemClick, }: SidebarProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * MobileNav - Mobile/tablet top navigation with slide-out menu
+ *
+ * @example
+ * ```tsx
+ * <MobileNav
+ *   navItems={[{ icon: "dashboard", label: "Dashboard", active: true }]}
+ *   user={{ name: "Alex", role: "Premium", avatarUrl: "..." }}
+ *   onToggleTheme={() => {}}
+ * />
+ * ```
+ */
+declare function MobileNav({ navItems, user, onToggleTheme, onNavItemClick, }: MobileNavProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * DashboardTemplate - Complete financial dashboard layout
+ */
+declare function DashboardTemplate({ data, isLoading, onThemeToggle, onNavItemClick, onActionClick, className, }: DashboardTemplateProps): react_jsx_runtime.JSX.Element;
+
+export { type ActionItem, BtcPriceCard, type BtcPriceCardProps, CurrentBalanceCard, type CurrentBalanceCardProps, type DashboardData, DashboardTemplate, type DashboardTemplateProps, FloatingNavBar, type FloatingNavBarProps, type ForecastItem, InvestmentGrowthCard, type InvestmentGrowthCardProps, MarketCapCard, type MarketCapCardProps, MarketForecastCard, type MarketForecastCardProps, MobileNav, type MobileNavProps, type NavItem, type PortfolioAllocation, PortfolioAllocationCard, type PortfolioAllocationCardProps, QuickActionsCard, type QuickActionsCardProps, RecentTransactionsCard, type RecentTransactionsCardProps, SalesStatisticsCard, type SalesStatisticsCardProps, type ScheduledTransfer, Sidebar, type SidebarProps, type TransactionUser, type UserInfo, WatchlistCard, type WatchlistCardProps, type WatchlistItem, cn };