# @jsburbano-dev/payflux

A modern and customizable component library built with Vue 3 and Tailwind CSS, designed for building financial dashboards and modern web apps with ease.

## 📦 Features

- ⚡️ Vue 3 Composition API support
- 🎨 Tailwind CSS 4.x ready
- 🌗 Dark mode support
- 📱 Fully responsive components
- 🧪 Storybook integration with Vitest
- 📊 Finance-focused UI elements
- 🚀 Easy to integrate and extend

## 🧩 Available Components

- `GridIconCard`
- `IconCard`
- `Card`
- `HeaderTop`
- `KpiCard`
- `BalanceStats`
- `StatusPill`
- `CreditScoreIndicator`
- `MoneyInput`
- `InfoItemsList`
- `DonutChart`

## 🚀 Installation

```bash
npm install @jsburbano-dev/payflux
# or
yarn add @jsburbano-dev/payflux
```

## 🔧 Usage

```ts
// main.ts
import { createApp } from "vue";
import App from "./App.vue";

import "@jsburbano-dev/payflux/dist/style.css";
import {
  GridIconCard,
  IconCard,
  Card,
  HeaderTop,
  KpiCard,
  BalanceStats,
  StatusPill,
  CreditScoreIndicator,
  MoneyInput,
  InfoItemsList,
  DonutChart,
} from "@jsburbano-dev/payflux";

const app = createApp(App);

app.component("GridIconCard", GridIconCard);
app.component("IconCard", IconCard);
app.component("Card", Card);
app.component("HeaderTop", HeaderTop);
app.component("KpiCard", KpiCard);
app.component("BalanceStats", BalanceStats);
app.component("StatusPill", StatusPill);
app.component("CreditScoreIndicator", CreditScoreIndicator);
app.component("MoneyInput", MoneyInput);
app.component("InfoItemsList", InfoItemsList);
app.component("DonutChart", DonutChart);

app.mount("#app");
```

## 📚 Storybook

```bash
yarn storybook
```

## 🧪 Test

```bash
yarn test
```

## 📦 Build for Production

```bash
yarn build
```

## 📝 License

MIT — Built with ❤️ by [@jsburbano-dev](https://www.npmjs.com/~jsburbano-dev)