@rayvelez/findash-ui 1.1.1 → 2.0.0

package/README.md

@@ -1,74 +1,47 @@
 # @rayvelez/findash-ui
 
-A modern financial dashboard design system built with React and Tailwind CSS. Features a vibrant green and purple color palette with dark mode support, liquid glass effects, and beautifully crafted dashboard components.
+A modern financial dashboard design system built with React. Features a vibrant green and purple color palette with dark mode support, liquid glass effects, and beautifully crafted dashboard components.
+
+**Zero-config** - Just install, import, and use. No Tailwind setup required.
 
 ## Installation
 
 ```bash
 npm install @rayvelez/findash-ui
-# or
-yarn add @rayvelez/findash-ui
-# or
-pnpm add @rayvelez/findash-ui
 ```
 
-## Setup
-
-### 1. Import the CSS
-
-Add the theme CSS to your application's entry point:
+## Quick Start
 
 ```tsx
-// In your main.tsx or App.tsx
+import { DashboardTemplate } from "@rayvelez/findash-ui";
 import "@rayvelez/findash-ui/styles";
+
+function App() {
+  return <DashboardTemplate />;
+}
 ```
 
-### 2. Configure Tailwind
+That's it! The styles are pre-compiled and bundled.
 
-Add the preset to your `tailwind.config.ts`:
+## Dark Mode
 
-```ts
-import type { Config } from "tailwindcss";
-import findashPreset from "@rayvelez/findash-ui/tailwind.preset";
+Toggle dark mode by adding the `dark` class to your root element:
 
-export default {
-  presets: [findashPreset],
-  content: [
-    "./src/**/*.{ts,tsx}",
-    "./node_modules/@rayvelez/findash-ui/dist/**/*.{js,mjs}",
-  ],
-  // ... rest of your config
-} satisfies Config;
-```
+```tsx
+// Enable dark mode
+document.documentElement.classList.add("dark");
 
-### 3. Add Google Fonts (Required)
-
-Add to your `index.html`:
-
-```html
-<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link
-  href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap"
-  rel="stylesheet"
-/>
-<link
-  href="https://fonts.googleapis.com/icon?family=Material+Icons+Round|Material+Icons+Outlined"
-  rel="stylesheet"
-/>
+// Toggle
+document.documentElement.classList.toggle("dark");
 ```
 
-## Usage
-
-### Complete Dashboard Template
+## Complete Example
 
 ```tsx
-import {
-  DashboardTemplate,
-  type DashboardData,
-} from "@rayvelez/findash-ui";
+import { DashboardTemplate, type DashboardData } from "@rayvelez/findash-ui";
+import "@rayvelez/findash-ui/styles";
 
-const dashboardData: DashboardData = {
+const data: DashboardData = {
   user: {
     name: "Alex Morgan",
     role: "Premium User",
@@ -106,8 +79,8 @@ const dashboardData: DashboardData = {
     { name: "Polkadot", symbol: "DOT", price: "7.23", change: "-2.1%", positive: false },
   ],
   forecasts: [
-    { year: "2023", description: "Explosive growth of DeFi", completed: false },
-    { year: "2024", description: "Mainstream adoption of CBDCs", completed: false },
+    { year: "2024", description: "Mainstream adoption", completed: false },
+    { year: "2025", description: "1 BTC reaches $500K", completed: false },
   ],
   transactions: {
     summary: "12,53 ETH/1 BTC",
@@ -117,16 +90,16 @@ const dashboardData: DashboardData = {
 function App() {
   return (
     <DashboardTemplate
-      data={dashboardData}
-      onThemeToggle={() => console.log("Toggle theme")}
-      onNavItemClick={(item) => console.log("Clicked:", item)}
+      data={data}
+      onThemeToggle={() => document.documentElement.classList.toggle("dark")}
+      onNavItemClick={(item) => console.log("Nav:", item)}
       onActionClick={(action) => console.log("Action:", action)}
     />
   );
 }
 ```
 
-### Individual Components
+## Individual Components
 
 ```tsx
 import {
@@ -139,135 +112,48 @@ import {
   Sidebar,
   MobileNav,
 } from "@rayvelez/findash-ui";
+import "@rayvelez/findash-ui/styles";
 
-// Sales Statistics Card
-<SalesStatisticsCard
-  visitors={2025}
-  updatedDaysAgo={1}
-  onPeriodChange={(period) => console.log(period)}
-/>
-
-// Current Balance Card
-<CurrentBalanceCard
-  balance={15368}
-  percentageChange={14}
-  averageScore={18324}
-  onPrevious={() => {}}
-  onNext={() => {}}
-/>
-
-// BTC Price Card
-<BtcPriceCard
-  price={21105}
-  changePercentage={28.21}
-/>
-
-// Portfolio Allocation Card
-<PortfolioAllocationCard
-  allocations={[
-    { asset: "Bitcoin", symbol: "BTC", percentage: 45, color: "bg-primary" },
-    { asset: "Ethereum", symbol: "ETH", percentage: 30, color: "bg-secondary" },
-  ]}
-  onOptionsClick={() => {}}
-/>
-
-// Watchlist Card
-<WatchlistCard
-  items={[
-    { name: "Cardano", symbol: "ADA", price: "0.58", change: "+5.2%", positive: true },
-  ]}
-  onViewAll={() => {}}
-/>
-
-// Floating Nav Bar
-<FloatingNavBar
-  actions={[
-    { icon: "add_circle", label: "Buy" },
-    { icon: "remove_circle", label: "Sell" },
-  ]}
-  onActionClick={(action) => console.log(action)}
-/>
-
-// Sidebar (Desktop)
-<Sidebar
-  navItems={[
-    { icon: "dashboard", label: "Dashboard", active: true },
-    { icon: "analytics", label: "Analytics", active: false },
-  ]}
-  user={{ name: "Alex", role: "Premium", avatarUrl: "..." }}
-  onToggleTheme={() => {}}
-  isCollapsed={false}
-  onToggleCollapse={() => {}}
-/>
-
-// Mobile Nav
-<MobileNav
-  navItems={[...]}
-  user={{ name: "Alex", role: "Premium", avatarUrl: "..." }}
-  onToggleTheme={() => {}}
-/>
+// Use any component individually
+<SalesStatisticsCard visitors={2025} updatedDaysAgo={1} />
+<CurrentBalanceCard balance={15368} percentageChange={14} />
+<BtcPriceCard price={21105} changePercentage={28.21} />
 ```
 
-## Components Reference
+## Components
 
 ### Dashboard Cards
 
-| Component | Description | Props |
-|-----------|-------------|-------|
-| `SalesStatisticsCard` | Displays visitor stats with decorative bar chart | `visitors`, `updatedDaysAgo`, `onPeriodChange` |
-| `CurrentBalanceCard` | Shows balance with gauge visualization | `balance`, `percentageChange`, `averageScore` |
-| `InvestmentGrowthCard` | Investment metrics with gauge | `percentage`, `monthlyAverage`, `totalValue` |
-| `BtcPriceCard` | Bitcoin price display with progress bar | `price`, `changePercentage` |
-| `MarketCapCard` | Market cap with line chart | `value` |
-| `MarketForecastCard` | Timeline of market predictions | `forecasts` |
-| `PortfolioAllocationCard` | Portfolio breakdown with progress bar | `allocations` |
-| `WatchlistCard` | Cryptocurrency watchlist | `items`, `onViewAll` |
-| `RecentTransactionsCard` | Transaction summary | `summary`, `users` |
-| `QuickActionsCard` | Quick action buttons | `actions`, `scheduledTransfer` |
+| Component | Description |
+|-----------|-------------|
+| `SalesStatisticsCard` | Visitor stats with bar chart |
+| `CurrentBalanceCard` | Balance with gauge visualization |
+| `InvestmentGrowthCard` | Investment metrics with gauge |
+| `BtcPriceCard` | Bitcoin price with progress bar |
+| `MarketCapCard` | Market cap with line chart |
+| `MarketForecastCard` | Timeline of predictions |
+| `PortfolioAllocationCard` | Portfolio breakdown |
+| `WatchlistCard` | Cryptocurrency watchlist |
+| `RecentTransactionsCard` | Transaction summary |
+| `QuickActionsCard` | Quick action buttons |
 
 ### Navigation
 
-| Component | Description | Props |
-|-----------|-------------|-------|
-| `Sidebar` | Desktop sidebar navigation | `navItems`, `user`, `isCollapsed`, `onToggleTheme`, `onToggleCollapse` |
-| `MobileNav` | Mobile/tablet top navigation with slide-out menu | `navItems`, `user`, `onToggleTheme` |
-| `FloatingNavBar` | Floating action bar with liquid glass effect | `actions`, `onActionClick` |
+| Component | Description |
+|-----------|-------------|
+| `Sidebar` | Desktop sidebar navigation |
+| `MobileNav` | Mobile top navigation with slide-out menu |
+| `FloatingNavBar` | Floating action bar with glass effect |
 
 ### Template
 
-| Component | Description | Props |
-|-----------|-------------|-------|
-| `DashboardTemplate` | Complete dashboard layout | `data`, `isLoading`, `onThemeToggle`, `onNavItemClick`, `onActionClick` |
+| Component | Description |
+|-----------|-------------|
+| `DashboardTemplate` | Complete dashboard layout |
 
-## Theme Customization
+## TypeScript
 
-The design system uses CSS custom properties. Override them in your CSS:
-
-```css
-:root {
-  /* Primary - Vibrant Green */
-  --primary: 120 100% 81%;
-  --primary-foreground: 220 13% 13%;
-
-  /* Secondary - Light Purple */
-  --secondary: 243 100% 85%;
-  --secondary-foreground: 220 13% 13%;
-
-  /* ... see theme.css for all variables */
-}
-```
-
-## Dark Mode
-
-Toggle dark mode by adding the `dark` class to your root element:
-
-```tsx
-document.documentElement.classList.toggle("dark");
-```
-
-## TypeScript Support
-
-All components are fully typed. Import types as needed:
+All components are fully typed:
 
 ```tsx
 import type {
@@ -281,6 +167,23 @@ import type {
 } from "@rayvelez/findash-ui";
 ```
 
+## Advanced: Custom Tailwind Setup
+
+If you want to customize the theme via Tailwind, you can use the preset:
+
+```ts
+// tailwind.config.ts
+import type { Config } from "tailwindcss";
+
+export default {
+  presets: [require("@rayvelez/findash-ui/tailwind.preset")],
+  content: [
+    "./src/**/*.{ts,tsx}",
+    "./node_modules/@rayvelez/findash-ui/dist/**/*.{js,mjs}",
+  ],
+} satisfies Config;
+```
+
 ## License
 
 MIT

package/dist/index.d.mts

@@ -524,4 +524,15 @@ declare function MobileNav({ navItems, user, onToggleTheme, onNavItemClick, }: M
  */
 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 };
+type IconName = "add_circle" | "remove_circle" | "swap_horiz" | "send" | "account_balance_wallet" | "bar_chart" | "arrow_back" | "arrow_forward" | "show_chart" | "trending_up" | "dark_mode" | "menu" | "grid_view" | "close" | "more_horiz" | "more_vert" | "bolt" | "schedule" | "bubble_chart" | "expand_more" | "dashboard" | "analytics" | "chevron_right" | "arrow_outward" | "north_east" | "arrow_upward" | "timeline" | "pie_chart" | "visibility" | "chevron_left";
+interface IconProps {
+    name: IconName;
+    className?: string;
+    size?: number;
+}
+/**
+ * Icon component - Inline SVG icons (no external dependencies)
+ */
+declare function Icon({ name, className, size }: IconProps): react_jsx_runtime.JSX.Element;
+
+export { type ActionItem, BtcPriceCard, type BtcPriceCardProps, CurrentBalanceCard, type CurrentBalanceCardProps, type DashboardData, DashboardTemplate, type DashboardTemplateProps, FloatingNavBar, type FloatingNavBarProps, type ForecastItem, Icon, type IconName, 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 };

package/dist/index.d.ts

@@ -524,4 +524,15 @@ declare function MobileNav({ navItems, user, onToggleTheme, onNavItemClick, }: M
  */
 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 };
+type IconName = "add_circle" | "remove_circle" | "swap_horiz" | "send" | "account_balance_wallet" | "bar_chart" | "arrow_back" | "arrow_forward" | "show_chart" | "trending_up" | "dark_mode" | "menu" | "grid_view" | "close" | "more_horiz" | "more_vert" | "bolt" | "schedule" | "bubble_chart" | "expand_more" | "dashboard" | "analytics" | "chevron_right" | "arrow_outward" | "north_east" | "arrow_upward" | "timeline" | "pie_chart" | "visibility" | "chevron_left";
+interface IconProps {
+    name: IconName;
+    className?: string;
+    size?: number;
+}
+/**
+ * Icon component - Inline SVG icons (no external dependencies)
+ */
+declare function Icon({ name, className, size }: IconProps): react_jsx_runtime.JSX.Element;
+
+export { type ActionItem, BtcPriceCard, type BtcPriceCardProps, CurrentBalanceCard, type CurrentBalanceCardProps, type DashboardData, DashboardTemplate, type DashboardTemplateProps, FloatingNavBar, type FloatingNavBarProps, type ForecastItem, Icon, type IconName, 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 };