omverse-ui 0.1.2 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +205 -46
- package/dist/styles/index.css +372 -0
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -1,73 +1,232 @@
|
|
|
1
1
|
# omverse-ui
|
|
2
2
|
|
|
3
|
-
A modern React component library built with
|
|
3
|
+
> A modern, fully-typed React component library — 27 components built with Tailwind v4, TypeScript & CVA.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[](https://www.npmjs.com/package/omverse-ui)
|
|
6
|
+
[](https://www.npmjs.com/package/omverse-ui)
|
|
7
|
+
[](./LICENSE)
|
|
6
8
|
|
|
7
|
-
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## ✨ Features
|
|
12
|
+
|
|
13
|
+
- 🎨 **27 components** — buttons, inputs, modals, toasts, date pickers, and more
|
|
14
|
+
- 🌈 **Material Design 3** foundation with modern web-first variants
|
|
15
|
+
- 💅 **Tailwind v4** — design tokens, semantic colors, consistent spacing
|
|
16
|
+
- 🔷 **Fully typed** — TypeScript with complete prop intellisense
|
|
17
|
+
- 🌙 **Dark mode** ready
|
|
18
|
+
- ⚡ **Tree-shakeable** — only ship what you use
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## 📦 Installation
|
|
8
23
|
|
|
9
24
|
```bash
|
|
10
25
|
npm install omverse-ui
|
|
11
26
|
```
|
|
12
27
|
|
|
13
|
-
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
## 🚀 Quick Setup
|
|
31
|
+
|
|
32
|
+
### Step 1 — Install Tailwind v4
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
npm install tailwindcss @tailwindcss/vite
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### Step 2 — Add Tailwind plugin to vite.config.ts
|
|
39
|
+
|
|
40
|
+
```ts
|
|
41
|
+
import { defineConfig } from 'vite'
|
|
42
|
+
import react from '@vitejs/plugin-react'
|
|
43
|
+
import tailwindcss from '@tailwindcss/vite'
|
|
44
|
+
|
|
45
|
+
export default defineConfig({
|
|
46
|
+
plugins: [
|
|
47
|
+
react(),
|
|
48
|
+
tailwindcss(),
|
|
49
|
+
],
|
|
50
|
+
})
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Step 3 — Update your index.css
|
|
54
|
+
|
|
55
|
+
```css
|
|
56
|
+
@import "tailwindcss";
|
|
14
57
|
|
|
15
|
-
|
|
58
|
+
/* omverse-ui design tokens (colors, spacing, typography) */
|
|
59
|
+
@import "omverse-ui/styles";
|
|
60
|
+
|
|
61
|
+
/* Tell Tailwind to scan omverse-ui components for classes */
|
|
62
|
+
@source "../node_modules/omverse-ui/dist/index.js";
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### Step 4 — Import CSS in main.tsx
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
import React from 'react'
|
|
69
|
+
import ReactDOM from 'react-dom/client'
|
|
70
|
+
import './index.css' // ← must be here
|
|
71
|
+
import App from './App'
|
|
72
|
+
|
|
73
|
+
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
74
|
+
<React.StrictMode>
|
|
75
|
+
<App />
|
|
76
|
+
</React.StrictMode>
|
|
77
|
+
)
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### Step 5 — Add Toaster to your app root
|
|
81
|
+
|
|
82
|
+
> Required only if you use the `toast()` API.
|
|
16
83
|
|
|
17
84
|
```tsx
|
|
18
|
-
|
|
19
|
-
|
|
85
|
+
import { Toaster } from 'omverse-ui'
|
|
86
|
+
|
|
87
|
+
function App() {
|
|
88
|
+
return (
|
|
89
|
+
<>
|
|
90
|
+
<Toaster position="top-right" />
|
|
91
|
+
{/* rest of your app */}
|
|
92
|
+
</>
|
|
93
|
+
)
|
|
94
|
+
}
|
|
20
95
|
```
|
|
21
96
|
|
|
22
|
-
|
|
97
|
+
---
|
|
23
98
|
|
|
24
|
-
## Usage
|
|
99
|
+
## 🧩 Usage
|
|
25
100
|
|
|
26
101
|
```tsx
|
|
27
|
-
import { Button, Input, Card } from 'omverse-ui'
|
|
102
|
+
import { Button, Input, Badge, Avatar, Card, CardBody } from 'omverse-ui'
|
|
28
103
|
|
|
29
104
|
export default function App() {
|
|
30
105
|
return (
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
106
|
+
<div className="p-8 flex flex-col gap-4">
|
|
107
|
+
|
|
108
|
+
{/* Button variants */}
|
|
109
|
+
<div className="flex gap-2">
|
|
110
|
+
<Button variant="filled">Save</Button>
|
|
111
|
+
<Button variant="outlined">Cancel</Button>
|
|
112
|
+
<Button variant="tonal">Draft</Button>
|
|
113
|
+
</div>
|
|
114
|
+
|
|
115
|
+
{/* Badges */}
|
|
116
|
+
<div className="flex gap-2">
|
|
117
|
+
<Badge color="success">Live</Badge>
|
|
118
|
+
<Badge color="warning">Beta</Badge>
|
|
119
|
+
<Badge color="error">Deprecated</Badge>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
{/* Input */}
|
|
123
|
+
<Input label="Email" placeholder="you@example.com" clearable />
|
|
124
|
+
|
|
125
|
+
{/* Avatar */}
|
|
126
|
+
<Avatar name="John Doe" size="md" />
|
|
127
|
+
|
|
128
|
+
{/* Card */}
|
|
129
|
+
<Card variant="elevated">
|
|
130
|
+
<CardBody>Hello from omverse-ui!</CardBody>
|
|
131
|
+
</Card>
|
|
132
|
+
|
|
133
|
+
</div>
|
|
134
|
+
)
|
|
36
135
|
}
|
|
37
136
|
```
|
|
38
137
|
|
|
39
|
-
|
|
138
|
+
---
|
|
139
|
+
|
|
140
|
+
## 🔔 Toast
|
|
141
|
+
|
|
142
|
+
```tsx
|
|
143
|
+
import { toast } from 'omverse-ui'
|
|
144
|
+
|
|
145
|
+
// Basic
|
|
146
|
+
toast('Hello world!')
|
|
147
|
+
|
|
148
|
+
// Types
|
|
149
|
+
toast.success('Profile saved!')
|
|
150
|
+
toast.error('Something went wrong')
|
|
151
|
+
toast.warning('This cannot be undone')
|
|
152
|
+
toast.info('A new version is available')
|
|
153
|
+
|
|
154
|
+
// Promise (shows loading → success/error automatically)
|
|
155
|
+
toast.promise(saveData(), {
|
|
156
|
+
loading: 'Saving...',
|
|
157
|
+
success: 'Saved successfully!',
|
|
158
|
+
error: 'Failed to save',
|
|
159
|
+
})
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
---
|
|
163
|
+
|
|
164
|
+
## 📚 Components
|
|
165
|
+
|
|
166
|
+
### Form
|
|
167
|
+
| Component | What it does |
|
|
168
|
+
|---|---|
|
|
169
|
+
| `Button` | 6 variants · 5 sizes · loading · icon support |
|
|
170
|
+
| `IconButton` | Icon-only button · fab · toggle · badge |
|
|
171
|
+
| `Input` | Text · textarea · password · clearable · copyable |
|
|
172
|
+
| `Select` | Single/multi · searchable · grouped options |
|
|
173
|
+
| `Checkbox` | 6 colors · indeterminate · card style · group |
|
|
174
|
+
| `Radio` | Default · card · button · segmented · group |
|
|
175
|
+
| `Switch` | 6 colors · icon labels · card style |
|
|
176
|
+
| `Slider` | 4 thumb styles · range · vertical · marks |
|
|
177
|
+
| `DatePicker` | 4 variants · range · dual month · time picker |
|
|
40
178
|
|
|
41
|
-
|
|
179
|
+
### Display
|
|
180
|
+
| Component | What it does |
|
|
42
181
|
|---|---|
|
|
43
|
-
|
|
|
44
|
-
|
|
|
45
|
-
|
|
|
46
|
-
|
|
|
47
|
-
|
|
|
48
|
-
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
|
52
|
-
|
|
53
|
-
|
|
|
54
|
-
|
|
|
55
|
-
|
|
|
56
|
-
|
|
|
57
|
-
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
|
61
|
-
|
|
62
|
-
|
|
|
63
|
-
|
|
|
64
|
-
|
|
|
65
|
-
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
182
|
+
| `Badge` | 4 variants · 6 colors · dot · pulse |
|
|
183
|
+
| `Avatar` | 6 sizes · circle/square · group · status |
|
|
184
|
+
| `Chip` | 4 variants · 6 colors · selectable · group |
|
|
185
|
+
| `Spinner` | 9 variants · skeleton · overlay |
|
|
186
|
+
| `Progress` | Linear · circular · segmented · multi |
|
|
187
|
+
| `Divider` | 7 styles · label · icon · inset · chat date |
|
|
188
|
+
|
|
189
|
+
### Layout & Navigation
|
|
190
|
+
| Component | What it does |
|
|
191
|
+
|---|---|
|
|
192
|
+
| `Navbar` | 16 variants · sidebar · collapsible |
|
|
193
|
+
| `Breadcrumb` | 11 variants · collapsible · numbered steps |
|
|
194
|
+
| `Pagination` | 17 variants · dots · table · load more |
|
|
195
|
+
| `Tabs` | 9 variants · horizontal + vertical · step tabs |
|
|
196
|
+
| `Stepper` | 10 variants · horizontal + vertical · timeline |
|
|
197
|
+
|
|
198
|
+
### Feedback & Overlay
|
|
199
|
+
| Component | What it does |
|
|
200
|
+
|---|---|
|
|
201
|
+
| `Toast` | 8 types · 6 positions · promise · progress |
|
|
202
|
+
| `Dialog` | 5 types · sizes · command palette |
|
|
203
|
+
| `Tooltip` | 3 variants · 4 positions · rich content |
|
|
204
|
+
| `Popover` | 4 sides · 3 alignments · arrow |
|
|
205
|
+
|
|
206
|
+
### Content
|
|
207
|
+
| Component | What it does |
|
|
208
|
+
|---|---|
|
|
209
|
+
| `Card` | 6 variants · interactive · flip · media |
|
|
210
|
+
| `Accordion` | 10 variants · single/multiple · animated |
|
|
211
|
+
| `DropdownMenu` | Checkbox · radio · search · color picker · emoji |
|
|
212
|
+
|
|
213
|
+
---
|
|
214
|
+
|
|
215
|
+
## ⚙️ Requirements
|
|
216
|
+
|
|
217
|
+
| Requirement | Version |
|
|
218
|
+
|---|---|
|
|
219
|
+
| React | 18+ |
|
|
220
|
+
| Tailwind CSS | v4 |
|
|
221
|
+
| TypeScript | Recommended |
|
|
222
|
+
| Vite | Recommended |
|
|
223
|
+
|
|
224
|
+
---
|
|
225
|
+
|
|
226
|
+
## 📄 License
|
|
72
227
|
|
|
73
228
|
MIT © Om
|
|
229
|
+
|
|
230
|
+
---
|
|
231
|
+
|
|
232
|
+
> Built with ❤️ using React, Tailwind v4, TypeScript and CVA.
|
|
@@ -0,0 +1,372 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
|
|
3
|
+
/*
|
|
4
|
+
* ============================================================
|
|
5
|
+
* DESIGN TOKENS — src/styles/index.css
|
|
6
|
+
* ============================================================
|
|
7
|
+
*
|
|
8
|
+
* Three-tier token system:
|
|
9
|
+
*
|
|
10
|
+
* Tier 1 — Primitives → raw palette values (defined as CSS vars below)
|
|
11
|
+
* Tier 2 — Semantic → intent-based tokens (what components use)
|
|
12
|
+
* Tier 3 — Component → added per-component when needed
|
|
13
|
+
*
|
|
14
|
+
* All tokens inside @theme become Tailwind utility classes automatically.
|
|
15
|
+
* e.g. --color-primary → bg-primary, text-primary, border-primary
|
|
16
|
+
*
|
|
17
|
+
* Light theme = :root
|
|
18
|
+
* Dark theme = .dark class on <html>
|
|
19
|
+
* ============================================================
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
/* ============================================================
|
|
23
|
+
TIER 1 — PRIMITIVE PALETTE
|
|
24
|
+
Never used directly in components. Referenced by Tier 2 only.
|
|
25
|
+
============================================================ */
|
|
26
|
+
|
|
27
|
+
:root {
|
|
28
|
+
/* Primary */
|
|
29
|
+
--primitive-primary-50: #EFF6FF;
|
|
30
|
+
--primitive-primary-100: #DBEAFE;
|
|
31
|
+
--primitive-primary-200: #BFDBFE;
|
|
32
|
+
--primitive-primary-300: #93C5FD;
|
|
33
|
+
--primitive-primary-400: #60A5FA;
|
|
34
|
+
--primitive-primary-500: #3B82F6;
|
|
35
|
+
--primitive-primary-600: #2563EB;
|
|
36
|
+
--primitive-primary-700: #1D4ED8;
|
|
37
|
+
--primitive-primary-800: #1E40AF;
|
|
38
|
+
--primitive-primary-900: #1E3A8A;
|
|
39
|
+
|
|
40
|
+
/* Secondary */
|
|
41
|
+
--primitive-secondary-50: #F5F3FF;
|
|
42
|
+
--primitive-secondary-100: #EDE9FE;
|
|
43
|
+
--primitive-secondary-200: #DDD6FE;
|
|
44
|
+
--primitive-secondary-300: #C4B5FD;
|
|
45
|
+
--primitive-secondary-400: #A78BFA;
|
|
46
|
+
--primitive-secondary-500: #8B5CF6;
|
|
47
|
+
--primitive-secondary-600: #7C3AED;
|
|
48
|
+
--primitive-secondary-700: #6D28D9;
|
|
49
|
+
--primitive-secondary-800: #5B21B6;
|
|
50
|
+
--primitive-secondary-900: #4C1D95;
|
|
51
|
+
|
|
52
|
+
/* Neutral */
|
|
53
|
+
--primitive-neutral-0: #FFFFFF;
|
|
54
|
+
--primitive-neutral-50: #F9FAFB;
|
|
55
|
+
--primitive-neutral-100: #F3F4F6;
|
|
56
|
+
--primitive-neutral-200: #E5E7EB;
|
|
57
|
+
--primitive-neutral-300: #D1D5DB;
|
|
58
|
+
--primitive-neutral-400: #9CA3AF;
|
|
59
|
+
--primitive-neutral-500: #6B7280;
|
|
60
|
+
--primitive-neutral-600: #4B5563;
|
|
61
|
+
--primitive-neutral-700: #374151;
|
|
62
|
+
--primitive-neutral-800: #1F2937;
|
|
63
|
+
--primitive-neutral-900: #111827;
|
|
64
|
+
--primitive-neutral-1000: #000000;
|
|
65
|
+
|
|
66
|
+
/* Success */
|
|
67
|
+
--primitive-success-50: #ECFDF5;
|
|
68
|
+
--primitive-success-100: #D1FAE5;
|
|
69
|
+
--primitive-success-200: #A7F3D0;
|
|
70
|
+
--primitive-success-300: #6EE7B7;
|
|
71
|
+
--primitive-success-400: #34D399;
|
|
72
|
+
--primitive-success-500: #10B981;
|
|
73
|
+
--primitive-success-600: #059669;
|
|
74
|
+
--primitive-success-700: #047857;
|
|
75
|
+
--primitive-success-800: #065F46;
|
|
76
|
+
--primitive-success-900: #064E3B;
|
|
77
|
+
|
|
78
|
+
/* Warning */
|
|
79
|
+
--primitive-warning-50: #FFFBEB;
|
|
80
|
+
--primitive-warning-100: #FEF3C7;
|
|
81
|
+
--primitive-warning-200: #FDE68A;
|
|
82
|
+
--primitive-warning-300: #FCD34D;
|
|
83
|
+
--primitive-warning-400: #FBBF24;
|
|
84
|
+
--primitive-warning-500: #F59E0B;
|
|
85
|
+
--primitive-warning-600: #D97706;
|
|
86
|
+
--primitive-warning-700: #B45309;
|
|
87
|
+
--primitive-warning-800: #92400E;
|
|
88
|
+
--primitive-warning-900: #78350F;
|
|
89
|
+
|
|
90
|
+
/* Error */
|
|
91
|
+
--primitive-error-50: #FEF2F2;
|
|
92
|
+
--primitive-error-100: #FEE2E2;
|
|
93
|
+
--primitive-error-200: #FECACA;
|
|
94
|
+
--primitive-error-300: #FCA5A5;
|
|
95
|
+
--primitive-error-400: #F87171;
|
|
96
|
+
--primitive-error-500: #EF4444;
|
|
97
|
+
--primitive-error-600: #DC2626;
|
|
98
|
+
--primitive-error-700: #B91C1C;
|
|
99
|
+
--primitive-error-800: #991B1B;
|
|
100
|
+
--primitive-error-900: #7F1D1D;
|
|
101
|
+
|
|
102
|
+
/* Info */
|
|
103
|
+
--primitive-info-50: #EFF6FF;
|
|
104
|
+
--primitive-info-100: #DBEAFE;
|
|
105
|
+
--primitive-info-500: #3B82F6;
|
|
106
|
+
--primitive-info-700: #1D4ED8;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* ============================================================
|
|
110
|
+
TIER 2 — SEMANTIC TOKENS + TAILWIND CLASSES
|
|
111
|
+
Mapped exactly from your Figma semantic token tables.
|
|
112
|
+
============================================================ */
|
|
113
|
+
|
|
114
|
+
@theme {
|
|
115
|
+
|
|
116
|
+
/* ---------- Primary (Brand) ---------- */
|
|
117
|
+
--color-primary: #2563EB; /* Primary/600 light */
|
|
118
|
+
--color-on-primary: #FFFFFF; /* Neutral/0 light */
|
|
119
|
+
--color-primary-container: #DBEAFE; /* Primary/100 light */
|
|
120
|
+
--color-on-primary-container: #1E3A8A; /* Primary/900 light */
|
|
121
|
+
|
|
122
|
+
/* ---------- Secondary ---------- */
|
|
123
|
+
--color-secondary: #7C3AED; /* Secondary/600 light */
|
|
124
|
+
--color-on-secondary: #FFFFFF; /* Neutral/0 light */
|
|
125
|
+
--color-secondary-container: #EDE9FE; /* Secondary/100 light */
|
|
126
|
+
--color-on-secondary-container: #4C1D95;/* Secondary/900 light */
|
|
127
|
+
/* M3 state layers: on-secondary-container blended into secondary-container at 8% / 12% */
|
|
128
|
+
--color-secondary-container-hover: #E0D9F6;
|
|
129
|
+
--color-secondary-container-active: #DAD1F1;
|
|
130
|
+
|
|
131
|
+
/* ---------- Surfaces ---------- */
|
|
132
|
+
--color-background: #FFFFFF; /* Neutral/0 light */
|
|
133
|
+
--color-surface: #F9FAFB; /* Neutral/50 light */
|
|
134
|
+
--color-surface-variant: #F3F4F6; /* Neutral/100 light */
|
|
135
|
+
--color-surface-container-low: #F3F4F6; /* Neutral/100 light */
|
|
136
|
+
--color-surface-container: #E5E7EB; /* Neutral/200 light */
|
|
137
|
+
--color-surface-container-high: #D1D5DB;/* Neutral/300 light */
|
|
138
|
+
|
|
139
|
+
/* ---------- Text ---------- */
|
|
140
|
+
--color-text-primary: #111827; /* Neutral/900 light */
|
|
141
|
+
--color-text-secondary: #4B5563; /* Neutral/600 light */
|
|
142
|
+
--color-text-disabled: #9CA3AF; /* Neutral/400 light */
|
|
143
|
+
--color-on-surface: #111827; /* alias → text-primary */
|
|
144
|
+
--color-on-surface-variant: #4B5563; /* alias → text-secondary */
|
|
145
|
+
|
|
146
|
+
/* ---------- Borders ---------- */
|
|
147
|
+
--color-border: #E5E7EB; /* Neutral/200 light */
|
|
148
|
+
--color-outline: #D1D5DB; /* Neutral/300 light */
|
|
149
|
+
--color-outline-variant: #E5E7EB; /* Neutral/200 light */
|
|
150
|
+
|
|
151
|
+
/* ---------- Feedback ---------- */
|
|
152
|
+
--color-success: #10B981; /* Success/500 light */
|
|
153
|
+
--color-on-success: #FFFFFF;
|
|
154
|
+
--color-success-container: #ECFDF5; /* Success/50 light */
|
|
155
|
+
--color-on-success-container: #064E3B; /* Success/900 light */
|
|
156
|
+
|
|
157
|
+
--color-warning: #F59E0B; /* Warning/500 light */
|
|
158
|
+
--color-on-warning: #FFFFFF;
|
|
159
|
+
--color-warning-container: #FFFBEB; /* Warning/50 light */
|
|
160
|
+
--color-on-warning-container: #78350F; /* Warning/900 light */
|
|
161
|
+
|
|
162
|
+
--color-error: #EF4444; /* Error/500 light */
|
|
163
|
+
--color-on-error: #FFFFFF;
|
|
164
|
+
--color-error-container: #FEF2F2; /* Error/50 light */
|
|
165
|
+
--color-on-error-container: #7F1D1D; /* Error/900 light */
|
|
166
|
+
|
|
167
|
+
--color-info: #3B82F6; /* Info/500 light */
|
|
168
|
+
--color-on-info: #FFFFFF;
|
|
169
|
+
--color-info-container: #EFF6FF; /* Info/50 light */
|
|
170
|
+
--color-on-info-container: #1E3A8A; /* Info/900 light */
|
|
171
|
+
|
|
172
|
+
/* ---------- Focus ring ---------- */
|
|
173
|
+
--color-ring: #2563EB; /* Primary/600 */
|
|
174
|
+
|
|
175
|
+
/* ---------- Radii ---------- */
|
|
176
|
+
--radius-none: 0px;
|
|
177
|
+
--radius-xs: 0.25rem; /* 4px */
|
|
178
|
+
--radius-sm: 0.5rem; /* 8px */
|
|
179
|
+
--radius-md: 0.75rem; /* 12px */
|
|
180
|
+
--radius-lg: 1rem; /* 16px */
|
|
181
|
+
--radius-xl: 1.5rem; /* 24px */
|
|
182
|
+
--radius-2xl: 2rem; /* 32px */
|
|
183
|
+
--radius-full: 9999px;
|
|
184
|
+
|
|
185
|
+
/* ---------- Typography ---------- */
|
|
186
|
+
--text-display-lg: 3.5625rem;
|
|
187
|
+
--text-display-lg--line-height: 4rem;
|
|
188
|
+
--text-display-lg--font-weight: 400;
|
|
189
|
+
|
|
190
|
+
--text-display-md: 2.8125rem;
|
|
191
|
+
--text-display-md--line-height: 3.25rem;
|
|
192
|
+
--text-display-md--font-weight: 400;
|
|
193
|
+
|
|
194
|
+
--text-display-sm: 2.25rem;
|
|
195
|
+
--text-display-sm--line-height: 2.75rem;
|
|
196
|
+
--text-display-sm--font-weight: 400;
|
|
197
|
+
|
|
198
|
+
--text-headline-lg: 2rem;
|
|
199
|
+
--text-headline-lg--line-height: 2.5rem;
|
|
200
|
+
--text-headline-lg--font-weight: 500;
|
|
201
|
+
|
|
202
|
+
--text-headline-md: 1.75rem;
|
|
203
|
+
--text-headline-md--line-height: 2.25rem;
|
|
204
|
+
--text-headline-md--font-weight: 500;
|
|
205
|
+
|
|
206
|
+
--text-headline-sm: 1.5rem;
|
|
207
|
+
--text-headline-sm--line-height: 2rem;
|
|
208
|
+
--text-headline-sm--font-weight: 500;
|
|
209
|
+
|
|
210
|
+
--text-title-lg: 1.375rem;
|
|
211
|
+
--text-title-lg--line-height: 1.75rem;
|
|
212
|
+
--text-title-lg--font-weight: 500;
|
|
213
|
+
|
|
214
|
+
--text-title-md: 1rem;
|
|
215
|
+
--text-title-md--line-height: 1.5rem;
|
|
216
|
+
--text-title-md--font-weight: 500;
|
|
217
|
+
|
|
218
|
+
--text-title-sm: 0.875rem;
|
|
219
|
+
--text-title-sm--line-height: 1.25rem;
|
|
220
|
+
--text-title-sm--font-weight: 500;
|
|
221
|
+
|
|
222
|
+
--text-body-lg: 1rem;
|
|
223
|
+
--text-body-lg--line-height: 1.5rem;
|
|
224
|
+
--text-body-lg--font-weight: 400;
|
|
225
|
+
|
|
226
|
+
--text-body-md: 0.875rem;
|
|
227
|
+
--text-body-md--line-height: 1.25rem;
|
|
228
|
+
--text-body-md--font-weight: 400;
|
|
229
|
+
|
|
230
|
+
--text-body-sm: 0.75rem;
|
|
231
|
+
--text-body-sm--line-height: 1rem;
|
|
232
|
+
--text-body-sm--font-weight: 400;
|
|
233
|
+
|
|
234
|
+
--text-label-lg: 0.875rem;
|
|
235
|
+
--text-label-lg--line-height: 1.25rem;
|
|
236
|
+
--text-label-lg--font-weight: 500;
|
|
237
|
+
|
|
238
|
+
--text-label-md: 0.75rem;
|
|
239
|
+
--text-label-md--line-height: 1rem;
|
|
240
|
+
--text-label-md--font-weight: 500;
|
|
241
|
+
|
|
242
|
+
--text-label-sm: 0.6875rem;
|
|
243
|
+
--text-label-sm--line-height: 1rem;
|
|
244
|
+
--text-label-sm--font-weight: 500;
|
|
245
|
+
|
|
246
|
+
/* ---------- Motion ---------- */
|
|
247
|
+
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
248
|
+
--ease-decelerate: cubic-bezier(0, 0, 0, 1);
|
|
249
|
+
--ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
|
|
250
|
+
|
|
251
|
+
--duration-instant: 50ms;
|
|
252
|
+
--duration-short: 150ms;
|
|
253
|
+
--duration-medium: 250ms;
|
|
254
|
+
--duration-long: 400ms;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
/* ============================================================
|
|
258
|
+
DARK THEME
|
|
259
|
+
Overrides semantic tokens when .dark is on <html>.
|
|
260
|
+
Mapped exactly from your Figma dark column.
|
|
261
|
+
============================================================ */
|
|
262
|
+
|
|
263
|
+
@custom-variant dark (&:where(.dark, .dark *));
|
|
264
|
+
|
|
265
|
+
.dark {
|
|
266
|
+
/* Primary */
|
|
267
|
+
--color-primary: #60A5FA; /* Primary/400 dark */
|
|
268
|
+
--color-on-primary: #DBEAFE; /* Neutral/100 dark */
|
|
269
|
+
--color-primary-container: #1E40AF; /* Primary/800 dark */
|
|
270
|
+
--color-on-primary-container: #DBEAFE; /* Primary/100 dark */
|
|
271
|
+
|
|
272
|
+
/* Secondary */
|
|
273
|
+
--color-secondary: #A78BFA; /* Secondary/400 dark */
|
|
274
|
+
--color-on-secondary: #000000; /* Neutral/1000 dark */
|
|
275
|
+
--color-secondary-container: #5B21B6; /* Secondary/800 dark */
|
|
276
|
+
--color-on-secondary-container: #C4F5BD;
|
|
277
|
+
/* M3 state layers: #C4F5BD overlay blended into secondary-container (#5B21B6) at 8% / 12% */
|
|
278
|
+
--color-secondary-container-hover: #6332B7;
|
|
279
|
+
--color-secondary-container-active: #683AB7;
|
|
280
|
+
|
|
281
|
+
/* Surfaces */
|
|
282
|
+
--color-background: #111827; /* Neutral/900 dark */
|
|
283
|
+
--color-surface: #1F2937; /* Neutral/800 dark */
|
|
284
|
+
--color-surface-variant: #374151; /* Neutral/700 dark */
|
|
285
|
+
--color-surface-container-low: #374151;/* Neutral/700 dark */
|
|
286
|
+
--color-surface-container: #4B5563; /* Neutral/600 dark */
|
|
287
|
+
--color-surface-container-high: #6B7280;/* Neutral/500 dark */
|
|
288
|
+
|
|
289
|
+
/* Text */
|
|
290
|
+
--color-text-primary: #FFFFFF; /* Neutral/0 dark */
|
|
291
|
+
--color-text-secondary: #D1D5DB; /* Neutral/300 dark */
|
|
292
|
+
--color-text-disabled: #6B7280; /* Neutral/500 dark */
|
|
293
|
+
--color-on-surface: #FFFFFF;
|
|
294
|
+
--color-on-surface-variant: #D1D5DB;
|
|
295
|
+
|
|
296
|
+
/* Borders */
|
|
297
|
+
--color-border: #374151; /* Neutral/700 dark */
|
|
298
|
+
--color-outline: #4B5563; /* Neutral/600 dark */
|
|
299
|
+
--color-outline-variant: #374151; /* Neutral/700 dark */
|
|
300
|
+
|
|
301
|
+
/* Feedback */
|
|
302
|
+
--color-success: #34D399; /* Success/400 dark */
|
|
303
|
+
--color-success-container: #065F46; /* Success/800 dark */
|
|
304
|
+
--color-on-success-container: #D1FAE5;/* Success/100 dark */
|
|
305
|
+
|
|
306
|
+
--color-warning: #FBBF24; /* Warning/400 dark */
|
|
307
|
+
--color-warning-container: #92400E; /* Warning/800 dark */
|
|
308
|
+
--color-on-warning-container: #FEF3C7;/* Warning/100 dark */
|
|
309
|
+
|
|
310
|
+
--color-error: #F87171; /* Error/400 dark */
|
|
311
|
+
--color-error-container: #991B1B; /* Error/800 dark */
|
|
312
|
+
--color-on-error-container: #FEE2E2; /* Error/100 dark */
|
|
313
|
+
|
|
314
|
+
--color-info: #3B82F6; /* Info/500 dark - using 500 as base */
|
|
315
|
+
--color-info-container: #1E40AF; /* Info/800 approx dark */
|
|
316
|
+
--color-on-info-container: #DBEAFE; /* Info/100 dark */
|
|
317
|
+
|
|
318
|
+
/* Focus ring */
|
|
319
|
+
--color-ring: #60A5FA; /* Primary/400 dark */
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
/* ============================================================
|
|
323
|
+
BASE STYLES
|
|
324
|
+
============================================================ */
|
|
325
|
+
|
|
326
|
+
@keyframes toastProgress {
|
|
327
|
+
from { transform: scaleX(1); }
|
|
328
|
+
to { transform: scaleX(0); }
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
@keyframes circularSpin {
|
|
332
|
+
0% { transform: rotate(-90deg); }
|
|
333
|
+
100% { transform: rotate(270deg); }
|
|
334
|
+
}
|
|
335
|
+
@keyframes indeterminate {
|
|
336
|
+
0% { transform: translateX(-150%); }
|
|
337
|
+
100% { transform: translateX(400%); }
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
@keyframes stripes {
|
|
341
|
+
to { background-position: 28px 0; }
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
@layer base {
|
|
345
|
+
.tabs-scroll-hidden::-webkit-scrollbar {
|
|
346
|
+
display: none;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
html {
|
|
350
|
+
background-color: var(--color-background);
|
|
351
|
+
color: var(--color-text-primary);
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
body {
|
|
355
|
+
background-color: var(--color-background);
|
|
356
|
+
color: var(--color-text-primary);
|
|
357
|
+
-webkit-font-smoothing: antialiased;
|
|
358
|
+
-moz-osx-font-smoothing: grayscale;
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
/* Respect reduced motion globally */
|
|
362
|
+
@media (prefers-reduced-motion: reduce) {
|
|
363
|
+
*,
|
|
364
|
+
*::before,
|
|
365
|
+
*::after {
|
|
366
|
+
animation-duration: 0.01ms !important;
|
|
367
|
+
animation-iteration-count: 1 !important;
|
|
368
|
+
transition-duration: 0.01ms !important;
|
|
369
|
+
scroll-behavior: auto !important;
|
|
370
|
+
}
|
|
371
|
+
}
|
|
372
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "omverse-ui",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.4",
|
|
5
5
|
"description": "A modern React component library built with Tailwind v4, TypeScript and CVA",
|
|
6
6
|
"author": "Om",
|
|
7
7
|
"license": "MIT",
|
|
@@ -49,7 +49,8 @@
|
|
|
49
49
|
"import": "./dist/index.js",
|
|
50
50
|
"require": "./dist/index.cjs",
|
|
51
51
|
"default": "./dist/index.js"
|
|
52
|
-
}
|
|
52
|
+
},
|
|
53
|
+
"./styles": "./dist/styles/index.css"
|
|
53
54
|
},
|
|
54
55
|
"files": ["dist", "README.md"],
|
|
55
56
|
"sideEffects": false,
|