@tuwaio/nova-core 1.0.0-fix-nova-connect-provider-alpha.1.c8f2f55 → 1.0.0-fix-styles-alpha.2.17cfa9b
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 +215 -24
- package/dist/index.css +2 -4
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -4,48 +4,239 @@
|
|
|
4
4
|
[](./LICENSE)
|
|
5
5
|
[](https://github.com/TuwaIO/nova-uikit/actions)
|
|
6
6
|
|
|
7
|
-
The foundational package for the
|
|
7
|
+
The foundational package for the Nova UI Kit design system. Provides core styling primitives, theme variables, utility functions, and common React hooks for building consistent Web3 applications.
|
|
8
|
+
|
|
9
|
+
-----
|
|
8
10
|
|
|
9
11
|
## What is `@tuwaio/nova-core`?
|
|
10
12
|
|
|
11
|
-
`@tuwaio/nova-core` is the engine of the
|
|
13
|
+
`@tuwaio/nova-core` is the **foundational engine** of the Nova UI Kit design system. It is **not** a component library—instead, it provides the low-level tools, design tokens, and utilities necessary to build consistent, high-quality user interfaces across all TUWA products.
|
|
14
|
+
|
|
15
|
+
Built for the **TUWA ecosystem**, Nova Core serves as the shared foundation that powers all other Nova packages (`@tuwaio/nova-connect`, `@tuwaio/nova-transactions`) and ensures design consistency across multi-chain Web3 applications.
|
|
16
|
+
|
|
17
|
+
**Why Nova Core?**
|
|
18
|
+
|
|
19
|
+
Building design systems requires consistent foundations: colors, spacing, typography, and utility functions. Without a shared core, different packages end up with conflicting styles, duplicated code, and inconsistent user experiences.
|
|
20
|
+
|
|
21
|
+
Nova Core solves this by:
|
|
22
|
+
|
|
23
|
+
1. **Offering Smart Utilities:** Battle-tested helper functions like the `cn` utility that combines `clsx` and `tailwind-merge` for conflict-free styling.
|
|
24
|
+
2. **Supplying Common Hooks:** A collection of reusable React hooks for common Web3 UI patterns.
|
|
25
|
+
3. **Ensuring Tailwind CSS v4 Integration:** Seamless compatibility with modern Tailwind CSS workflows.
|
|
26
|
+
|
|
27
|
+
-----
|
|
12
28
|
|
|
13
|
-
|
|
14
|
-
- Ensure brand consistency with a centralized theme and styling.
|
|
15
|
-
- Speed up development with a set of battle-tested helper hooks and utilities.
|
|
16
|
-
- Provide a solid foundation for our component library, `@tuwaio/nova-transactions`.
|
|
29
|
+
## ✨ Key Features
|
|
17
30
|
|
|
18
|
-
|
|
31
|
+
- **🎨 Complete Design Token System:** Comprehensive CSS variables for colors, spacing, typography, shadows, and animations
|
|
32
|
+
- **🛠️ Smart Utility Functions:** Advanced `cn` utility that merges Tailwind classes intelligently, preventing style conflicts
|
|
33
|
+
- **🎣 Common React Hooks:** Collection of reusable hooks for Web3 UI patterns like wallet state, transaction status, and theme management
|
|
34
|
+
- **⚡ Tailwind CSS v4 Ready:** Full compatibility with modern Tailwind CSS workflows and arbitrary value usage
|
|
35
|
+
- **🌓 Dark Mode Support:** Built-in dark mode theming with CSS variable-based switching
|
|
36
|
+
- **♿ Accessibility First:** ARIA-compliant design tokens and utilities for building accessible interfaces
|
|
37
|
+
- **📱 Responsive Design:** Mobile-first breakpoints and responsive utility functions
|
|
19
38
|
|
|
20
|
-
|
|
21
|
-
- **🛠️ Helper Utilities:** A smart `cn` utility that combines `clsx` and `tailwind-merge` for building dynamic and conflict-free class names.
|
|
22
|
-
- **🎣 Common Hooks:** A collection of generic, reusable React hooks for common tasks.
|
|
39
|
+
-----
|
|
23
40
|
|
|
24
|
-
## Installation
|
|
41
|
+
## 💾 Installation
|
|
25
42
|
|
|
26
|
-
|
|
43
|
+
### Requirements
|
|
27
44
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
45
|
+
- **React:** 19+
|
|
46
|
+
- **Node.js:** 20+
|
|
47
|
+
- **TypeScript:** 5.9+ (recommended)
|
|
31
48
|
|
|
32
|
-
|
|
49
|
+
### Package Installation
|
|
33
50
|
|
|
34
|
-
|
|
35
|
-
@import '@tuwaio/nova-core/dist/index.css';
|
|
36
|
-
```
|
|
51
|
+
Install the package using your preferred package manager:
|
|
37
52
|
|
|
38
|
-
|
|
53
|
+
```bash
|
|
54
|
+
# Using pnpm (recommended)
|
|
55
|
+
pnpm add @tuwaio/nova-core
|
|
56
|
+
|
|
57
|
+
# Using npm
|
|
58
|
+
npm install @tuwaio/nova-core
|
|
59
|
+
|
|
60
|
+
# Using yarn
|
|
61
|
+
yarn add @tuwaio/nova-core
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### CSS Setup
|
|
65
|
+
|
|
66
|
+
**⚠️ Critical Step:** Import the core styles into your application's main CSS file. This step is essential for accessing base styles.
|
|
67
|
+
|
|
68
|
+
```css
|
|
69
|
+
/* src/styles/globals.css or src/styles/app.css */
|
|
70
|
+
@import '@tuwaio/nova-core/dist/index.css';
|
|
71
|
+
```
|
|
39
72
|
|
|
40
|
-
|
|
73
|
+
-----
|
|
74
|
+
|
|
75
|
+
## 🚀 Usage
|
|
76
|
+
|
|
77
|
+
### Design Tokens with Tailwind CSS v4
|
|
78
|
+
|
|
79
|
+
Nova Core is designed to work seamlessly with Tailwind CSS v4. You can use the CSS variables directly in your `className` as arbitrary values:
|
|
41
80
|
|
|
42
81
|
```tsx
|
|
43
|
-
//
|
|
44
|
-
<button className="bg-[var(--tuwa-color-primary)] text-[var(--tuwa-
|
|
45
|
-
|
|
82
|
+
// Using Nova design tokens in Tailwind classes
|
|
83
|
+
<button className="bg-[var(--tuwa-color-primary)] text-[var(--tuwa-text-on-primary)]">
|
|
84
|
+
Connect Wallet
|
|
46
85
|
</button>
|
|
86
|
+
|
|
87
|
+
// With hover states and transitions
|
|
88
|
+
<div className="
|
|
89
|
+
p-[var(--tuwa-spacing-md)]
|
|
90
|
+
bg-[var(--tuwa-bg-secondary)]
|
|
91
|
+
hover:bg-[var(--tuwa-bg-hover)]
|
|
92
|
+
transition-colors
|
|
93
|
+
">
|
|
94
|
+
Card Content
|
|
95
|
+
</div>
|
|
47
96
|
```
|
|
48
97
|
|
|
98
|
+
### The `cn` Utility Function
|
|
99
|
+
|
|
100
|
+
The `cn` utility combines `clsx` and `tailwind-merge` to provide intelligent class merging:
|
|
101
|
+
|
|
102
|
+
```tsx
|
|
103
|
+
import { cn } from '@tuwaio/nova-core';
|
|
104
|
+
|
|
105
|
+
// Basic usage
|
|
106
|
+
const buttonClass = cn(
|
|
107
|
+
'px-4 py-2 font-medium rounded-lg', // base styles
|
|
108
|
+
'bg-blue-500 text-white', // default variant
|
|
109
|
+
{'opacity-50 cursor-not-allowed': isLoading}, // conditional styles
|
|
110
|
+
className // additional classes from props
|
|
111
|
+
);
|
|
112
|
+
|
|
113
|
+
// Tailwind class conflict resolution
|
|
114
|
+
const mergedClasses = cn(
|
|
115
|
+
'p-4 text-sm', // base classes
|
|
116
|
+
'p-6 text-lg' // these override the base classes intelligently
|
|
117
|
+
);
|
|
118
|
+
// Result: 'p-6 text-lg' (conflicts resolved)
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
### Common React Hooks
|
|
122
|
+
|
|
123
|
+
Nova Core provides several utility hooks for common Web3 UI patterns:
|
|
124
|
+
|
|
125
|
+
```tsx
|
|
126
|
+
import { useCopyToClipboard } from '@tuwaio/nova-core';
|
|
127
|
+
|
|
128
|
+
function WalletAddress({ address }: { address: string }) {
|
|
129
|
+
const [copied, copy] = useCopyToClipboard();
|
|
130
|
+
|
|
131
|
+
return (
|
|
132
|
+
<div className={cn('transition-all', isCollapsed && 'w-12')}>
|
|
133
|
+
<button
|
|
134
|
+
onClick={() => copy(address)}
|
|
135
|
+
className="font-mono text-sm hover:bg-[var(--tuwa-bg-hover)]"
|
|
136
|
+
>
|
|
137
|
+
{address.slice(0, 6)}
|
|
138
|
+
{copied && ' ✓'}
|
|
139
|
+
</button>
|
|
140
|
+
</div>
|
|
141
|
+
);
|
|
142
|
+
}
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
-----
|
|
146
|
+
|
|
147
|
+
## 🛠️ Theme Customization
|
|
148
|
+
|
|
149
|
+
### Basic Customization
|
|
150
|
+
|
|
151
|
+
Override design tokens in your CSS to match your brand:
|
|
152
|
+
|
|
153
|
+
```css
|
|
154
|
+
/* src/styles/globals.css */
|
|
155
|
+
@import '@tuwaio/nova-core/dist/index.css';
|
|
156
|
+
|
|
157
|
+
/* Your custom theme overrides */
|
|
158
|
+
:root {
|
|
159
|
+
/* Brand Colors */
|
|
160
|
+
--tuwa-color-primary: #3b82f6; /* Blue-500 */
|
|
161
|
+
--tuwa-color-primary-hover: #2563eb; /* Blue-600 */
|
|
162
|
+
|
|
163
|
+
/* Background System */
|
|
164
|
+
--tuwa-bg-primary: #ffffff;
|
|
165
|
+
--tuwa-bg-secondary: #f8fafc;
|
|
166
|
+
--tuwa-bg-hover: #f1f5f9;
|
|
167
|
+
|
|
168
|
+
/* Text Colors */
|
|
169
|
+
--tuwa-text-primary: #0f172a;
|
|
170
|
+
--tuwa-text-secondary: #64748b;
|
|
171
|
+
--tuwa-text-muted: #94a3b8;
|
|
172
|
+
|
|
173
|
+
/* Border System */
|
|
174
|
+
--tuwa-border-primary: #e2e8f0;
|
|
175
|
+
--tuwa-border-secondary: #cbd5e1;
|
|
176
|
+
}
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
### Dark Mode Support
|
|
180
|
+
|
|
181
|
+
Nova Core includes built-in dark mode support:
|
|
182
|
+
|
|
183
|
+
```css
|
|
184
|
+
/* Dark mode overrides */
|
|
185
|
+
.dark {
|
|
186
|
+
--tuwa-color-primary: #60a5fa; /* Blue-400 */
|
|
187
|
+
--tuwa-bg-primary: #0f172a; /* Slate-900 */
|
|
188
|
+
--tuwa-bg-secondary: #1e293b; /* Slate-800 */
|
|
189
|
+
--tuwa-text-primary: #f1f5f9; /* Slate-100 */
|
|
190
|
+
--tuwa-text-secondary: #cbd5e1; /* Slate-300 */
|
|
191
|
+
--tuwa-border-primary: #374151; /* Gray-700 */
|
|
192
|
+
}
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
### Advanced Usage
|
|
196
|
+
|
|
197
|
+
#### Component Integration
|
|
198
|
+
|
|
199
|
+
Nova Core works seamlessly with other Nova packages:
|
|
200
|
+
|
|
201
|
+
```tsx
|
|
202
|
+
import { cn } from '@tuwaio/nova-core';
|
|
203
|
+
import { ConnectButton } from '@tuwaio/nova-connect/components';
|
|
204
|
+
import { NovaTransactionsProvider } from '@tuwaio/nova-transactions';
|
|
205
|
+
|
|
206
|
+
function App() {
|
|
207
|
+
return (
|
|
208
|
+
<div className={cn(
|
|
209
|
+
'min-h-screen',
|
|
210
|
+
'bg-[var(--tuwa-bg-primary)]',
|
|
211
|
+
'text-[var(--tuwa-text-primary)]'
|
|
212
|
+
)}>
|
|
213
|
+
<NovaTransactionsProvider {...params} />
|
|
214
|
+
<header className="border-b border-[var(--tuwa-border-primary)]">
|
|
215
|
+
<ConnectButton />
|
|
216
|
+
</header>
|
|
217
|
+
<main>
|
|
218
|
+
{/* Your app content */}
|
|
219
|
+
</main>
|
|
220
|
+
</div>
|
|
221
|
+
);
|
|
222
|
+
}
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
### API Reference
|
|
226
|
+
|
|
227
|
+
#### Utilities
|
|
228
|
+
|
|
229
|
+
| Function | Description | Usage |
|
|
230
|
+
| :--- | :--- |:------------------------------------------|
|
|
231
|
+
| **`cn(...classes)`** | Merges class names intelligently, resolving Tailwind conflicts | `cn('p-4 text-sm', 'p-6', {'hidden': conditional})` |
|
|
232
|
+
|
|
233
|
+
#### Hooks
|
|
234
|
+
|
|
235
|
+
| Hook | Description | Return Type |
|
|
236
|
+
| :--- | :--- | :--- |
|
|
237
|
+
| **`useCopyToClipboard()`** | Copy text to clipboard with feedback | `[boolean, (text: string) => void]` |
|
|
238
|
+
| **`useMediaQuery(query)`** | Responsive media query hook | `boolean` |
|
|
239
|
+
|
|
49
240
|
## 🤝 Contributing & Support
|
|
50
241
|
|
|
51
242
|
Contributions are welcome! Please read our main **[Contribution Guidelines](https://github.com/TuwaIO/workflows/blob/main/CONTRIBUTING.md)**.
|
package/dist/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tailwindcss v4.1.
|
|
1
|
+
/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */
|
|
2
2
|
@layer properties;
|
|
3
3
|
@layer theme, base, components, utilities;
|
|
4
4
|
@layer theme {
|
|
@@ -146,9 +146,7 @@
|
|
|
146
146
|
.novacore\:bg-black\/55 {
|
|
147
147
|
background-color: var(--novacore-color-black);
|
|
148
148
|
@supports (color: color-mix(in lab, red, red)) {
|
|
149
|
-
|
|
150
|
-
background-color: color-mix(in oklab, var(--novacore-color-black) 55%, transparent);
|
|
151
|
-
}
|
|
149
|
+
background-color: color-mix(in oklab, var(--novacore-color-black) 55%, transparent);
|
|
152
150
|
}
|
|
153
151
|
}
|
|
154
152
|
.novacore\:p-0 {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tuwaio/nova-core",
|
|
3
|
-
"version": "1.0.0-fix-
|
|
3
|
+
"version": "1.0.0-fix-styles-alpha.2.17cfa9b",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Oleksandr Tkach",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -55,8 +55,8 @@
|
|
|
55
55
|
"tailwind-merge": "3.x.x"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
58
|
-
"@tailwindcss/postcss": "^4.1.
|
|
59
|
-
"@tailwindcss/vite": "^4.1.
|
|
58
|
+
"@tailwindcss/postcss": "^4.1.16",
|
|
59
|
+
"@tailwindcss/vite": "^4.1.16",
|
|
60
60
|
"@types/react": "^19.2.2",
|
|
61
61
|
"@radix-ui/react-dialog": "^1.1.15",
|
|
62
62
|
"autoprefixer": "^10.4.21",
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
"postcss": "^8.5.6",
|
|
66
66
|
"postcss-cli": "^11.0.1",
|
|
67
67
|
"react": "^19.2.0",
|
|
68
|
-
"tailwindcss": "^4.1.
|
|
68
|
+
"tailwindcss": "^4.1.16",
|
|
69
69
|
"tailwind-merge": "^3.3.1",
|
|
70
70
|
"tsup": "^8.5.0",
|
|
71
71
|
"typescript": "^5.9.3"
|