@dreamtree-org/twreact-ui 1.1.58 → 1.1.59

package/README.md

@@ -26,7 +26,7 @@ If this library has saved you time, sparked an idea, or made your app a little m
 **📷 Scan the QR with any UPI app** (Google Pay, PhonePe, Paytm, BHIM, …) to pay instantly:
 
 <p>
-  <img src="doc/assets/upi-qr.png" alt="Scan to pay Dreamtree Global via UPI" width="220" height="220" />
+  <img src="https://unpkg.com/@dreamtree-org/twreact-ui@latest/doc/assets/upi-qr.png" alt="Scan to pay Dreamtree Global via UPI" width="220" height="220" />
 </p>
 
 > **UPI ID:** `dhrugantha.llp@kotak` &nbsp;•&nbsp; **Payee:** Dreamtree Global

package/doc/README.md

@@ -0,0 +1,128 @@
+# @dreamtree-org/twreact-ui — Documentation
+
+A React + Tailwind component library for building modern web apps.
+
+---
+
+## Quick start
+
+### Install
+
+```bash
+npm install @dreamtree-org/twreact-ui
+# or
+yarn add @dreamtree-org/twreact-ui
+# or
+pnpm add @dreamtree-org/twreact-ui
+```
+
+### Peer dependencies
+
+Ensure **React 18+** and **react-dom** are installed:
+
+```bash
+npm install react react-dom
+```
+
+### Basic usage
+
+Wrap your app with the store provider (if using store/Toast), then import components and styles:
+
+```jsx
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { Button, Input, Alert } from '@dreamtree-org/twreact-ui';
+// Styles are included when you import the package
+import '@dreamtree-org/twreact-ui/dist/index.css';
+
+function App() {
+  return (
+    <div className="p-4">
+      <Button variant="primary">Click me</Button>
+      <Input label="Email" placeholder="you@example.com" />
+      <Alert variant="info" title="Note">Welcome to the app.</Alert>
+    </div>
+  );
+}
+
+createRoot(document.getElementById('root')).render(<App />);
+```
+
+### With Store & Toast (optional)
+
+```jsx
+import { StoreProvider, ToastContainer, useToast } from '@dreamtree-org/twreact-ui';
+
+function App() {
+  return (
+    <StoreProvider>
+      <ToastContainer toasts={toasts} onRemove={removeToast} />
+      <YourRoutes />
+    </StoreProvider>
+  );
+}
+```
+
+---
+
+## Component overview
+
+| Component | Category | Description | Doc |
+|-----------|----------|-------------|-----|
+| [Input](Input.md) | Core | Text input with label, error, clear, password toggle | [Input.md](Input.md) |
+| [Button](Button.md) | Core | Button with variants, sizes, loading, icons | [Button.md](Button.md) |
+| [Select](Select.md) | Core | Single/multi select, searchable, grouped, creatable | [Select.md](Select.md) |
+| [Table](Table.md) | Core | Data table with sort, filter, pagination, selection | [Table.md](Table.md) |
+| [Form](Form.md) | Core | Form wrapper with react-hook-form integration | [Form.md](Form.md) |
+| [Accordion](Accordion.md) | Core | Expandable/collapsible content panels | [Accordion.md](Accordion.md) |
+| [Checkbox](Checkbox.md) | Core | Checkbox with label, sizes, indeterminate | [Checkbox.md](Checkbox.md) |
+| [ColorPicker](ColorPicker.md) | Core | Color selection input | [ColorPicker.md](ColorPicker.md) |
+| [DatePicker](DatePicker.md) | Core | Single date picker | [DatePicker.md](DatePicker.md) |
+| [DateRangePicker](DateRangePicker.md) | Core | Start/end date range picker | [DateRangePicker.md](DateRangePicker.md) |
+| [Loader](Loader.md) | Core | Loading spinner | [Loader.md](Loader.md) |
+| [PriceRangePicker](PriceRangePicker.md) | Core | Min/max price or number range | [PriceRangePicker.md](PriceRangePicker.md) |
+| [ProgressBar](ProgressBar.md) | Core | Progress bar (percentage) | [ProgressBar.md](ProgressBar.md) |
+| [Radio](Radio.md) | Core | Radio button group | [Radio.md](Radio.md) |
+| [Rate](Rate.md) | Core | Star rating input | [Rate.md](Rate.md) |
+| [RoundedTag](RoundedTag.md) | Core | Tag/chip display | [RoundedTag.md](RoundedTag.md) |
+| [Skeleton](Skeleton.md) | Core | Skeleton placeholder | [Skeleton.md](Skeleton.md) |
+| [Switch](Switch.md) | Core | Toggle switch | [Switch.md](Switch.md) |
+| [Tabs](Tabs.md) | Core | Tabbed content | [Tabs.md](Tabs.md) |
+| [ThreeDotPopover](ThreeDotPopover.md) | Core | Actions menu (e.g. Edit, Delete) | [ThreeDotPopover.md](ThreeDotPopover.md) |
+| [Tooltip](Tooltip.md) | Core | Tooltip on hover/focus | [Tooltip.md](Tooltip.md) |
+| [LocationPicker](LocationPicker.md) | Core | Location/address picker | [LocationPicker.md](LocationPicker.md) |
+| [SpeechToText](SpeechToText.md) | Core | Voice-to-text (Web Speech API) | [SpeechToText.md](SpeechToText.md) |
+| [TextToSpeech](TextToSpeech.md) | Core | Text-to-speech playback | [TextToSpeech.md](TextToSpeech.md) |
+| [Navbar](Navbar.md) | Navigation | Top navigation bar | [Navbar.md](Navbar.md) |
+| [Sidebar](Sidebar.md) | Navigation | Side navigation / menu | [Sidebar.md](Sidebar.md) |
+| [FootNav](FootNav.md) | Navigation | Bottom navigation (mobile) | [FootNav.md](FootNav.md) |
+| [Breadcrumbs](Breadcrumbs.md) | Navigation | Breadcrumb trail | [Breadcrumbs.md](Breadcrumbs.md) |
+| [Dialog](Dialog.md) | Feedback | Modal dialog | [Dialog.md](Dialog.md) |
+| [Toast](Toast.md) | Feedback | Toast notifications + useToast | [Toast.md](Toast.md) |
+| [Alert](Alert.md) | Feedback | Inline alert (info/success/warning/error) | [Alert.md](Alert.md) |
+| [Badge](Badge.md) | Utility | Badge / count pill | [Badge.md](Badge.md) |
+| [Avatar](Avatar.md) | Utility | User avatar (image or initials) | [Avatar.md](Avatar.md) |
+| [Card](Card.md) | Utility | Card container | [Card.md](Card.md) |
+| [Pagination](Pagination.md) | Utility | Page navigation controls | [Pagination.md](Pagination.md) |
+| [Stepper](Stepper.md) | Utility | Step indicator | [Stepper.md](Stepper.md) |
+| [FileUpload](FileUpload.md) | Utility | File upload input/zone | [FileUpload.md](FileUpload.md) |
+| [Condition](Condition.md) | Utility | Conditional render wrapper | [Condition.md](Condition.md) |
+| [Carousel](Carousel.md) | Utility | Image/content carousel | [Carousel.md](Carousel.md) |
+
+---
+
+## Hooks & utilities
+
+- **useTheme** / **ThemeProvider** — Theme context
+- **useMixins** — Store/get helpers, emitter, in-memory state
+- **useApi** — Axios-based API hook
+- **cn** — `cn(...classes)` for merging Tailwind classes
+- **StoreProvider** — Redux store + persist wrapper
+
+---
+
+## Tailwind
+
+The library uses Tailwind CSS classes (e.g. `primary-500`, `success-600`). Ensure your project uses Tailwind and that the same palette/theme is available, or include the library’s CSS so design tokens apply.
+
+[← Back to repository](https://github.com/preethamkrishnadev/dreamtree-ui)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dreamtree-org/twreact-ui",
-  "version": "1.1.58",
+  "version": "1.1.59",
   "description": "A comprehensive React + Tailwind components library for building modern web apps",
   "author": {
     "name": "Partha Preetham Krishna",
@@ -22,6 +22,7 @@
     "mcp/catalog-snapshot.mjs",
     "mcp/catalog.snapshot.json",
     "ai-skills",
+    "doc/assets/upi-qr.png",
     "package.json",
     "README.md"
   ],