# @wealthx/shadcn

WealthX component library built on [shadcn/ui](https://ui.shadcn.com), Tailwind CSS v4, and Radix primitives.

## Install

```bash
pnpm add @wealthx/shadcn
```

**Peer dependencies:** `react` and `react-dom` (^18.3.1)

## Setup

Import the global stylesheet in your app entry point:

```tsx
import "@wealthx/shadcn/styles.css";
```

Wrap your app with the `ThemeProvider` for runtime theming:

```tsx
import { ThemeProvider } from "@wealthx/shadcn/theme";

<ThemeProvider primaryColor="#33FF99" secondaryColor="#162029">
  <App />
</ThemeProvider>
```

## Usage

Import components from the package root or individual entry points:

```tsx
// Barrel import
import { Button, Card, Input } from "@wealthx/shadcn";

// Individual entry points (better tree-shaking)
import { Button } from "@wealthx/shadcn/button";
import { Card } from "@wealthx/shadcn/card";
```

## Components

| Component | Import path | Description |
|-----------|------------|-------------|
| Accordion | `./accordion` | Collapsible content sections |
| Alert | `./alert` | Status messages |
| AlertDialog | `./alert-dialog` | Confirmation modals |
| Avatar | `./avatar` | User images with fallback, group, and badge |
| Badge | `./badge` | Labels and tags |
| Button | `./button` | Primary action element |
| Calendar | `./calendar` | Date picker calendar |
| Card | `./card` | Container with header, content, and footer |
| Checkbox | `./checkbox` | Single or multiple selection |
| Chip | `./chip` | Small labeled element |
| DataTable | `./data-table` | Table powered by TanStack Table |
| DatePicker | `./date-picker` | Calendar with popover |
| Dialog | `./dialog` | Modal dialog |
| Drawer | `./drawer` | Slide-out side panel |
| DropdownMenu | `./dropdown-menu` | Contextual menu |
| Empty | `./empty` | Empty state placeholder |
| Field | `./field` | Form field wrapper with label and error |
| Input | `./input` | Text input |
| InputGroup | `./input-group` | Input with addons and buttons |
| InputOTP | `./input-otp` | Multi-slot OTP entry |
| Label | `./label` | Form label |
| Pagination | `./pagination` | Page navigation |
| Popover | `./popover` | Floating content |
| Progress | `./progress` | Progress bar |
| RadioGroup | `./radio-group` | Single selection group |
| Select | `./select` | Dropdown select |
| Separator | `./separator` | Visual divider |
| Sheet | `./sheet` | Off-canvas panel |
| Skeleton | `./skeleton` | Loading placeholder |
| Sonner | `./sonner` | Toast notifications |
| Spinner | `./spinner` | Loading indicator |
| Switch | `./switch` | Toggle switch |
| Table | `./table` | Basic HTML table |
| Tabs | `./tabs` | Tabbed interface |
| Textarea | `./textarea` | Multi-line text input |
| Toggle | `./toggle` | Button toggle |
| ToggleGroup | `./toggle-group` | Grouped toggles |
| Tooltip | `./tooltip` | Hover hint |

## Charts

Chart components built on [Chart.js](https://www.chartjs.org/) and [react-chartjs-2](https://react-chartjs-2.js.org/). All charts read brand colors from `ThemeProvider` and render inside a `Card` wrapper.

| Component | Import path | Description |
|-----------|------------|-------------|
| CashflowBarChart | `./cashflow-bar-chart` | Grouped bars showing income, expenses, and surplus/overspending per month |
| ExpenseBarChart | `./expense-bar-chart` | Stacked bar chart of expenses by category with period toggle |
| IncomeBarChart | `./income-bar-chart` | Stacked bar chart of income by source with period toggle |
| TransactionsIncomeExpenseBarChart | `./transactions-income-expense-bar-chart` | Horizontal bar comparing total income vs total expense |

### TransactionsIncomeExpenseBarChart

Simplest chart — just two numbers:

```tsx
import { TransactionsIncomeExpenseBarChart } from "@wealthx/shadcn";

<TransactionsIncomeExpenseBarChart
  totalIncome={12450.75}
  totalExpense={-8320.50}
  title="Transactions — Income vs Expense"
/>
```

### IncomeBarChart / ExpenseBarChart

Stacked bars broken down by source or category. Supports `"monthly"` and `"daily"` granularity with a period toggle (3M / 6M / 12M).

```tsx
import { IncomeBarChart } from "@wealthx/shadcn";

<IncomeBarChart
  incomeData={{
    months: ["Jul", "Aug", "Sep"],
    dates: ["2024-07-01", "2024-08-01", "2024-09-01"],
    datasets: [
      { label: "Employment", data: [7500, 7500, 7500] },
      { label: "Rental", data: [1200, 1200, 1400] },
    ],
  }}
  defaultPeriod={6}
  granularity="monthly"
/>
```

`ExpenseBarChart` has the same API — swap `incomeData` for `expenseData`. Income bars use the primary color; expense bars use the secondary color.

### CashflowBarChart

Grouped bars showing income, expenses, and surplus/overspending. Period toggle is 3M / 6M / 12M (monthly only).

```tsx
import { CashflowBarChart } from "@wealthx/shadcn";

<CashflowBarChart
  cashflowData={{
    months: ["Jul", "Aug", "Sep"],
    data: [
      { date: "2024-07-01", income: 9200, expenses: 6800, surplus: 2400, overspending: 0 },
      { date: "2024-08-01", income: 7500, expenses: 8100, surplus: 0, overspending: 600 },
      { date: "2024-09-01", income: 8800, expenses: 7200, surplus: 1600, overspending: 0 },
    ],
  }}
  defaultPeriod={6}
/>
```

### Shared chart props

| Prop | Default | Description |
|------|---------|-------------|
| `title` | Varies | Card heading |
| `height` | 280 (120 for Transactions) | Canvas height in px |
| `width` | `"100%"` | Card width |
| `isLoading` | `false` | Shows skeleton placeholder |
| `showLegend` | `true` | Toggle legend visibility |
| `showXAxis` / `showYAxis` | `true` | Toggle axis visibility |
| `legendPosition` | `"top"` | `"top"` or `"bottom"` |
| `className` | — | Class applied to the Card wrapper |

## Utilities

| Export | Import path | Description |
|--------|------------|-------------|
| `cn()` | `@wealthx/shadcn/lib/utils` | Merge class names (clsx + tailwind-merge) |
| Color utils | `@wealthx/shadcn/lib/colors` | `hexToRgb`, `hexToOklch`, `getContrastText`, `getLuminance` |
| Typography | `@wealthx/shadcn/typography` | Rem-based type scale with CSS variable generators |
| ThemeProvider | `@wealthx/shadcn/theme` | Runtime theme provider for tenant colors |

## Design tokens

All tokens are defined as CSS custom properties in `src/styles/globals.css`:

- **Colors** — OKLch format. Core tokens: `--background`, `--foreground`, `--primary`, `--secondary`, `--muted`, `--accent`, `--destructive`. Status tokens: `--warning`, `--success`, `--info`. Chart series: `--chart-1` through `--chart-5`.
- **Typography** — Figtree font family. 13 styles from Display down to Code, each with `--font-size-*`, `--line-height-*`, `--letter-spacing-*`, and `--font-weight-*` variables.
- **Border radius** — All radii set to `0px` (sharp corners by design).

## Development

```bash
# Install dependencies
pnpm install

# Build the package (CSS + JS)
pnpm --filter @wealthx/shadcn build

# Watch mode
pnpm --filter @wealthx/shadcn dev

# Lint
pnpm --filter @wealthx/shadcn lint
```

## Tech stack

- [shadcn/ui](https://ui.shadcn.com) — Component primitives
- [Tailwind CSS v4](https://tailwindcss.com) — Utility-first styles
- [Radix Primitives](https://www.radix-ui.com) via `@base-ui/react` — Accessible headless components
- [Chart.js](https://www.chartjs.org/) + [react-chartjs-2](https://react-chartjs-2.js.org/) — Chart components
- [TanStack Table](https://tanstack.com/table) — DataTable
- [Lucide](https://lucide.dev) — Icons
- [tsup](https://tsup.egoist.dev) — Build tooling (CJS + ESM)
- [class-variance-authority](https://cva.style) — Variant management