{"_id":"@darshan-shet/react-finkit","_rev":"2-11763742718f6804139539bbd3646fd5","name":"@darshan-shet/react-finkit","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.2":{"name":"@darshan-shet/react-finkit","version":"0.1.2","_id":"@darshan-shet/react-finkit@0.1.2","maintainers":[{"name":"darshan-shet","email":"darshanshet06@gmail.com"}],"dist":{"shasum":"143286f31bd68309dcaaad3dcb59413cce74f7ff","tarball":"https://registry.npmjs.org/@darshan-shet/react-finkit/-/react-finkit-0.1.2.tgz","fileCount":6,"integrity":"sha512-Ap1tg99NR0x/lFHVzCzj7h5np50Zikx4bcvvMUEow0yTh898Q/uA9mzwFvQYPyliuQ50HOs2k/95f254XmEZGA==","signatures":[{"sig":"MEUCIFmCx2KeTVIclnI2ud8bWowVi1ek3wGGIubYwaYZUxiAAiEAoShf5bwPTzKsFoEfsYZkSYElfZr/0gM7olCkFNEnLl0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":38520},"main":"dist/react-finkit.umd.cjs","types":"dist/index.d.ts","module":"dist/react-finkit.js","scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b && vite build","preview":"vite preview"},"_npmUser":{"name":"darshan-shet","email":"darshanshet06@gmail.com"},"_npmVersion":"11.13.0","description":"A lightweight React component library for building **personal finance UIs** — budgets, savings goals, and net worth dashboards.","directories":{},"_nodeVersion":"25.8.0","dependencies":{"clsx":"^2.1.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.10","eslint":"^10.2.1","globals":"^17.5.0","@eslint/js":"^10.0.1","typescript":"~6.0.2","@types/node":"^24.12.2","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","typescript-eslint":"^8.58.2","@vitejs/plugin-react":"^6.0.1","eslint-plugin-react-hooks":"^7.1.1","eslint-plugin-react-refresh":"^0.5.2"},"peerDependencies":{"react":">=18","react-dom":">=18"},"_npmOperationalInternal":{"tmp":"tmp/react-finkit_0.1.2_1777563528424_0.8702408147902834","host":"s3://npm-registry-packages-npm-production"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info."}},"time":{"created":"2026-04-30T15:38:48.327Z","modified":"2026-05-04T10:27:39.855Z","0.1.2":"2026-04-30T15:38:48.575Z"},"description":"A lightweight React component library for building **personal finance UIs** — budgets, savings goals, and net worth dashboards.","maintainers":[{"name":"darshan-shet","email":"darshanshet06@gmail.com"}],"readme":"# 💰 react-finkit\n\nA lightweight React component library for building **personal finance UIs** — budgets, savings goals, and net worth dashboards.\n\n---\n\n## ✨ Why react-finkit?\n\nBuilding financial dashboards from scratch is repetitive.\n\n`react-finkit` gives you:\n\n* 📊 Ready-to-use finance components\n* 🌍 International currency formatting\n* ⚡ Clean, reusable APIs\n* 🎯 Focus on real-world financial use cases\n\n---\n\n## 🚀 Installation\n\n```bash\nnpm install react-finkit\n```\n\n---\n\n## ⚛️ Usage\n\n```tsx\nimport {\n  ExpenseBar,\n  SavingsGoal,\n  NetWorthCard\n} from \"react-finkit\"\n```\n\n---\n\n## 📦 Components\n\n---\n\n### 📊 ExpenseBar\n\nShows how much budget is used with visual feedback.\n\n```tsx\n<ExpenseBar\n  spent={12000}\n  budget={10000}\n/>\n```\n\n✅ Automatically:\n\n* Calculates percentage\n* Highlights over-budget (red)\n\n---\n\n### 🎯 SavingsGoal\n\nTrack progress toward a financial goal.\n\n```tsx\n<SavingsGoal\n  current={20000}\n  target={100000}\n  monthly={5000}\n/>\n```\n\n✅ Displays:\n\n* Progress %\n* Remaining time (months)\n* Goal completion state\n\n---\n\n### 💼 NetWorthCard\n\nSimple net worth breakdown.\n\n```tsx\n<NetWorthCard\n  assets={500000}\n  liabilities={200000}\n/>\n```\n\n✅ Shows:\n\n* Net worth (color-coded)\n* Assets vs liabilities\n\n---\n\n## 🌍 Currency & Locale Support\n\nAll components support international formatting:\n\n```tsx\n<NetWorthCard\n  assets={500000}\n  liabilities={200000}\n  currency=\"USD\"\n  locale=\"en-US\"\n/>\n```\n\n---\n\n## 🧠 Utilities\n\n---\n\n### formatCurrency\n\n```ts\nimport { formatCurrency } from \"react-finkit\"\n\nformatCurrency(100000)\n// ₹1,00,000 (default)\n```\n\n```ts\nformatCurrency(100000, {\n  currency: \"USD\",\n  locale: \"en-US\"\n})\n// $100,000\n```\n\n---\n\n## 🎨 Styling\n\n* Minimal default styles\n* Fully customizable via `className`\n\n```tsx\n<ExpenseBar className=\"my-custom-style\" />\n```\n\n---\n\n## 🛠 Tech Stack\n\n* React 18\n* TypeScript\n* Vite (Library Mode)\n* clsx\n\n---\n\n## 📁 Project Structure\n\n```\nsrc/\n ├── components/\n │    ├── ExpenseBar/\n │    ├── SavingsGoal/\n │    └── NetWorthCard/\n ├── hooks/\n ├── utils/\n └── index.ts\n```\n\n---\n\n## 🚧 Roadmap\n\n* [ ] Chart components (CashFlow, BudgetRing)\n* [ ] Storybook docs\n* [ ] More financial utilities\n* [ ] Dark mode support\n\n---\n\n## 👨‍💻 Author\n\n**Darshan Shet**\n\n* GitHub: https://github.com/Darshan-Shet\n\n---","readmeFilename":"README.md"}