omverse-ui 0.1.3 → 0.1.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Om Khandale
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,73 +1,232 @@
 # omverse-ui
 
-A modern React component library built with **Tailwind v4**, **TypeScript**, and **CVA**.
+> A modern, fully-typed React component library — 27 components built with Tailwind v4, TypeScript & CVA.
 
-27 components · Material Design 3 foundation · Web-first · Fully typed
+[![npm version](https://img.shields.io/npm/v/omverse-ui)](https://www.npmjs.com/package/omverse-ui)
+[![npm downloads](https://img.shields.io/npm/dm/omverse-ui)](https://www.npmjs.com/package/omverse-ui)
+[![license](https://img.shields.io/npm/l/omverse-ui)](./LICENSE)
 
-## Installation
+---
+
+## ✨ Features
+
+- 🎨 **27 components** — buttons, inputs, modals, toasts, date pickers, and more
+- 🌈 **Material Design 3** foundation with modern web-first variants
+- 💅 **Tailwind v4** — design tokens, semantic colors, consistent spacing
+- 🔷 **Fully typed** — TypeScript with complete prop intellisense
+- 🌙 **Dark mode** ready
+- ⚡ **Tree-shakeable** — only ship what you use
+
+---
+
+## 📦 Installation
 
 ```bash
 npm install omverse-ui
 ```
 
-## Setup
+---
+
+## 🚀 Quick Setup
+
+### Step 1 — Install Tailwind v4
+
+```bash
+npm install tailwindcss @tailwindcss/vite
+```
+
+### Step 2 — Add Tailwind plugin to vite.config.ts
+
+```ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss(),
+  ],
+})
+```
+
+### Step 3 — Update your index.css
+
+```css
+@import "tailwindcss";
 
-Add the CSS to your app entry point:
+/* omverse-ui design tokens (colors, spacing, typography) */
+@import "omverse-ui/styles";
+
+/* Tell Tailwind to scan omverse-ui components for classes */
+@source "../node_modules/omverse-ui/dist/index.js";
+```
+
+### Step 4 — Import CSS in main.tsx
+
+```tsx
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import './index.css'   // ← must be here
+import App from './App'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
+```
+
+### Step 5 — Add Toaster to your app root
+
+> Required only if you use the `toast()` API.
 
 ```tsx
-// main.tsx
-import 'omverse-ui/styles';
+import { Toaster } from 'omverse-ui'
+
+function App() {
+  return (
+    <>
+      <Toaster position="top-right" />
+      {/* rest of your app */}
+    </>
+  )
+}
 ```
 
-Make sure your project has Tailwind v4 configured.
+---
 
-## Usage
+## 🧩 Usage
 
 ```tsx
-import { Button, Input, Card } from 'omverse-ui';
+import { Button, Input, Badge, Avatar, Card, CardBody } from 'omverse-ui'
 
 export default function App() {
   return (
-    <Card>
-      <Input label="Email" placeholder="you@example.com" />
-      <Button variant="filled">Get started</Button>
-    </Card>
-  );
+    <div className="p-8 flex flex-col gap-4">
+
+      {/* Button variants */}
+      <div className="flex gap-2">
+        <Button variant="filled">Save</Button>
+        <Button variant="outlined">Cancel</Button>
+        <Button variant="tonal">Draft</Button>
+      </div>
+
+      {/* Badges */}
+      <div className="flex gap-2">
+        <Badge color="success">Live</Badge>
+        <Badge color="warning">Beta</Badge>
+        <Badge color="error">Deprecated</Badge>
+      </div>
+
+      {/* Input */}
+      <Input label="Email" placeholder="you@example.com" clearable />
+
+      {/* Avatar */}
+      <Avatar name="John Doe" size="md" />
+
+      {/* Card */}
+      <Card variant="elevated">
+        <CardBody>Hello from omverse-ui!</CardBody>
+      </Card>
+
+    </div>
+  )
 }
 ```
 
-## Components
+---
+
+## 🔔 Toast
+
+```tsx
+import { toast } from 'omverse-ui'
+
+// Basic
+toast('Hello world!')
+
+// Types
+toast.success('Profile saved!')
+toast.error('Something went wrong')
+toast.warning('This cannot be undone')
+toast.info('A new version is available')
+
+// Promise (shows loading → success/error automatically)
+toast.promise(saveData(), {
+  loading: 'Saving...',
+  success: 'Saved successfully!',
+  error: 'Failed to save',
+})
+```
+
+---
+
+## 📚 Components
+
+### Form
+| Component | What it does |
+|---|---|
+| `Button` | 6 variants · 5 sizes · loading · icon support |
+| `IconButton` | Icon-only button · fab · toggle · badge |
+| `Input` | Text · textarea · password · clearable · copyable |
+| `Select` | Single/multi · searchable · grouped options |
+| `Checkbox` | 6 colors · indeterminate · card style · group |
+| `Radio` | Default · card · button · segmented · group |
+| `Switch` | 6 colors · icon labels · card style |
+| `Slider` | 4 thumb styles · range · vertical · marks |
+| `DatePicker` | 4 variants · range · dual month · time picker |
 
-| Component | Variants |
+### Display
+| Component | What it does |
 |---|---|
-| Button | filled, outlined, tonal, text, elevated, gradient |
-| IconButton | filled, outlined, tonal, ghost, gradient, fab |
-| Input | outlined, filled, underline · textarea · clearable |
-| Badge | filled, outlined, tonal, ghost · 6 colors |
-| Avatar | 6 sizes · circle/square · AvatarGroup |
-| Chip | filled, outlined, tonal, ghost · ChipGroup |
-| Checkbox | 6 colors · indeterminate · card style |
-| Radio | default, card, button, segmented |
-| Switch | 6 colors · icon labels |
-| Select | single/multi · searchable · grouped options |
-| Tooltip | 3 variants · 4 positions · rich tooltip |
-| Spinner | 9 variants · Skeleton component |
-| Card | 6 variants · interactive · flip card |
-| Dialog | 5 types · CommandPalette |
-| Toast | 8 types · 6 positions · promise support |
-| Tabs | 9 variants · horizontal + vertical · StepTabs |
-| Accordion | 10 variants · single/multiple |
-| Progress | Linear · Circular · Segmented · Multi |
-| DropdownMenu | checkbox · radio · search · avatar · color picker |
-| Popover | 4 sides · 3 alignments · arrow |
-| DatePicker | 4 calendar variants · range · dual month · time |
-| Slider | 4 thumb styles · 4 track styles · range |
-| Breadcrumb | 11 variants · collapsible · numbered steps |
-| Pagination | 17 variants · dots · table · load more |
-| Navbar | 16 variants · Sidebar · collapsible |
-| Stepper | 10 variants · horizontal + vertical · timeline |
-| Divider | 7 styles · label · icon · inset · chat date |
-
-## License
+| `Badge` | 4 variants · 6 colors · dot · pulse |
+| `Avatar` | 6 sizes · circle/square · group · status |
+| `Chip` | 4 variants · 6 colors · selectable · group |
+| `Spinner` | 9 variants · skeleton · overlay |
+| `Progress` | Linear · circular · segmented · multi |
+| `Divider` | 7 styles · label · icon · inset · chat date |
+
+### Layout & Navigation
+| Component | What it does |
+|---|---|
+| `Navbar` | 16 variants · sidebar · collapsible |
+| `Breadcrumb` | 11 variants · collapsible · numbered steps |
+| `Pagination` | 17 variants · dots · table · load more |
+| `Tabs` | 9 variants · horizontal + vertical · step tabs |
+| `Stepper` | 10 variants · horizontal + vertical · timeline |
+
+### Feedback & Overlay
+| Component | What it does |
+|---|---|
+| `Toast` | 8 types · 6 positions · promise · progress |
+| `Dialog` | 5 types · sizes · command palette |
+| `Tooltip` | 3 variants · 4 positions · rich content |
+| `Popover` | 4 sides · 3 alignments · arrow |
+
+### Content
+| Component | What it does |
+|---|---|
+| `Card` | 6 variants · interactive · flip · media |
+| `Accordion` | 10 variants · single/multiple · animated |
+| `DropdownMenu` | Checkbox · radio · search · color picker · emoji |
+
+---
+
+## ⚙️ Requirements
+
+| Requirement | Version |
+|---|---|
+| React | 18+ |
+| Tailwind CSS | v4 |
+| TypeScript | Recommended |
+| Vite | Recommended |
+
+---
+
+## 📄 License
 
 MIT © Om
+
+---
+
+> Built with ❤️ using React, Tailwind v4, TypeScript and CVA.

package/dist/index.cjs

@@ -6147,13 +6147,16 @@ function Calendar({
       d.setDate(d.getDate() + 1);
       onChange?.(d);
     } else if (preset === "this-week") {
-      onRangeChange?.([startOfWeek(now), endOfWeek(now)]);
+      if (onRangeChange) onRangeChange([startOfWeek(now), endOfWeek(now)]);
+      else onChange?.(startOfWeek(now));
     } else if (preset === "next-week") {
       const next = new Date(now);
       next.setDate(next.getDate() + 7);
-      onRangeChange?.([startOfWeek(next), endOfWeek(next)]);
+      if (onRangeChange) onRangeChange([startOfWeek(next), endOfWeek(next)]);
+      else onChange?.(startOfWeek(next));
     } else if (preset === "this-month") {
-      onRangeChange?.([startOfMonth(now), endOfMonth(now)]);
+      if (onRangeChange) onRangeChange([startOfMonth(now), endOfMonth(now)]);
+      else onChange?.(startOfMonth(now));
     }
   }
   const rangeStart = rangeValue?.[0] ?? null;