@tuwaio/nova-core 1.0.0-fix-ui-alpha.2.736b1a3 → 1.0.0-fix-docs-alpha.1.dfcdaa7c
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 +71 -157
- package/dist/index.css +9 -9
- package/dist/index.d.cts +12 -13
- package/dist/index.d.ts +12 -13
- package/package.json +14 -14
package/README.md
CHANGED
|
@@ -1,227 +1,141 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @tuwaio/nova-core
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/@tuwaio/nova-core)
|
|
4
4
|
[](./LICENSE)
|
|
5
|
-
[](https://github.com/TuwaIO/nova-uikit/actions)
|
|
6
5
|
|
|
7
|
-
|
|
6
|
+
`@tuwaio/nova-core` is the **UI Core (L6)** package of the TUWA Ecosystem design system. It acts as the shared foundation for styling primitives, CSS variable definitions, base React elements, and helper utilities. Fully independent of Web3 logic, it provides the common design boundaries consumed by visual modules like `@tuwaio/nova-connect` and `@tuwaio/nova-transactions` to maintain visual consistency across all TUWA interfaces.
|
|
8
7
|
|
|
9
8
|
---
|
|
10
9
|
|
|
11
|
-
##
|
|
10
|
+
## 🏛️ Core Capabilities
|
|
12
11
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
2. **Supplying Common Hooks:** A collection of reusable React hooks for common UI patterns.
|
|
19
|
-
3. **Ensuring Tailwind CSS v4 Integration:** Seamless compatibility with modern Tailwind CSS workflows.
|
|
20
|
-
|
|
21
|
-
---
|
|
22
|
-
|
|
23
|
-
## ✨ Key Features
|
|
24
|
-
|
|
25
|
-
- **🎨 Complete Design Token System:** Comprehensive CSS variables for colors, spacing, typography, shadows, and animations
|
|
26
|
-
- **🛠️ Smart Utility Functions:** Advanced `cn` utility that merges Tailwind classes intelligently, preventing style conflicts
|
|
27
|
-
- **⚡ Tailwind CSS v4 Ready:** Full compatibility with modern Tailwind CSS workflows and arbitrary value usage
|
|
28
|
-
- **🌓 Dark Mode Support:** Built-in dark mode theming with CSS variable-based switching
|
|
29
|
-
- **♿ Accessibility First:** ARIA-compliant design tokens and utilities for building accessible interfaces
|
|
30
|
-
- **📱 Responsive Design:** Mobile-first breakpoints and responsive utility functions
|
|
12
|
+
- **🎨 Design Token System:** Declares variables for colors, typography, borders, animations, and spacing, with built-in switching for light and dark modes.
|
|
13
|
+
- **🛠️ Style Merger (`cn`):** An optimized composition utility blending `clsx` and `tailwind-merge` to resolve style overrides dynamically without class conflicts.
|
|
14
|
+
- **⚡ Tailwind CSS v4 Native:** Configured to map variables into Tailwind's modern engine, allowing arbitrary class declarations.
|
|
15
|
+
- **♿ Base Components & Primitives:** Shared layout modules, dialog nodes, overlays, and common utility indicators.
|
|
16
|
+
- **📱 Shared React Hooks:** Reusable, performance-optimized hooks for clipboards (`useCopyToClipboard`) and responsive layouts (`useMediaQuery`).
|
|
31
17
|
|
|
32
18
|
---
|
|
33
19
|
|
|
34
20
|
## 💾 Installation
|
|
35
21
|
|
|
36
|
-
### Requirements
|
|
37
|
-
|
|
38
|
-
- **React:** 19+
|
|
39
|
-
- **Node.js:** 20-24
|
|
40
|
-
- **TypeScript:** 5.9+ (recommended)
|
|
41
|
-
|
|
42
|
-
### Package Installation
|
|
43
|
-
|
|
44
|
-
Install the package using your preferred package manager:
|
|
45
|
-
|
|
46
22
|
```bash
|
|
47
|
-
# Using pnpm (recommended), but you can use npm, yarn or bun as well
|
|
48
23
|
pnpm add @tuwaio/nova-core
|
|
49
24
|
```
|
|
50
25
|
|
|
51
26
|
### CSS Setup
|
|
52
27
|
|
|
53
|
-
|
|
28
|
+
Import the core CSS styles into the entrypoint of your application (e.g., `main.css` or `globals.css`):
|
|
54
29
|
|
|
55
30
|
```css
|
|
56
|
-
/* src/styles/globals.css or src/styles/app.css */
|
|
57
31
|
@import '@tuwaio/nova-core/dist/index.css';
|
|
58
32
|
```
|
|
59
33
|
|
|
60
34
|
---
|
|
61
35
|
|
|
62
|
-
## 🚀 Usage
|
|
36
|
+
## 🚀 Usage Guide
|
|
63
37
|
|
|
64
|
-
###
|
|
38
|
+
### 1. Tailwind Arbitrary Tokens
|
|
65
39
|
|
|
66
|
-
Nova
|
|
40
|
+
Use Nova custom variables directly in components for consistent styling:
|
|
67
41
|
|
|
68
42
|
```tsx
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
</
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
hover:bg-[var(--tuwa-bg-muted)]
|
|
79
|
-
transition-colors
|
|
80
|
-
">
|
|
81
|
-
Card Content
|
|
82
|
-
</div>
|
|
43
|
+
export function AccentCard() {
|
|
44
|
+
return (
|
|
45
|
+
<div className="p-6 bg-[var(--tuwa-bg-secondary)] border border-[var(--tuwa-border-primary)] rounded-[var(--tuwa-rounded-corners)]">
|
|
46
|
+
<h3 className="text-[var(--tuwa-text-primary)] font-medium">Core Primitive Card</h3>
|
|
47
|
+
<p className="mt-2 text-[var(--tuwa-text-secondary)] text-sm">Styled using central ecosystem design tokens.</p>
|
|
48
|
+
<button className="mt-4 px-4 py-2 bg-[var(--tuwa-text-accent)] text-[var(--tuwa-text-on-accent)]">Action</button>
|
|
49
|
+
</div>
|
|
50
|
+
);
|
|
51
|
+
}
|
|
83
52
|
```
|
|
84
53
|
|
|
85
|
-
###
|
|
54
|
+
### 2. Styling Composition (`cn`)
|
|
86
55
|
|
|
87
|
-
|
|
56
|
+
Blend default styles with external prop overrides cleanly:
|
|
88
57
|
|
|
89
58
|
```tsx
|
|
90
59
|
import { cn } from '@tuwaio/nova-core';
|
|
91
60
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
61
|
+
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
62
|
+
variant?: 'primary' | 'secondary';
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
export function Button({ variant = 'primary', className, ...props }: ButtonProps) {
|
|
66
|
+
return (
|
|
67
|
+
<button
|
|
68
|
+
className={cn(
|
|
69
|
+
'px-4 py-2 font-medium rounded transition-colors',
|
|
70
|
+
variant === 'primary'
|
|
71
|
+
? 'bg-[var(--tuwa-text-accent)] text-[var(--tuwa-text-on-accent)]'
|
|
72
|
+
: 'bg-[var(--tuwa-standart-button-bg)] text-[var(--tuwa-text-primary)] hover:bg-[var(--tuwa-standart-button-hover)]',
|
|
73
|
+
className,
|
|
74
|
+
)}
|
|
75
|
+
{...props}
|
|
76
|
+
/>
|
|
77
|
+
);
|
|
78
|
+
}
|
|
106
79
|
```
|
|
107
80
|
|
|
108
|
-
###
|
|
81
|
+
### 3. Clipboard copy with `useCopyToClipboard`
|
|
109
82
|
|
|
110
|
-
|
|
83
|
+
Easily build wallet address display nodes with copying feedback:
|
|
111
84
|
|
|
112
85
|
```tsx
|
|
113
|
-
import {
|
|
86
|
+
import { useCopyToClipboard } from '@tuwaio/nova-core';
|
|
114
87
|
|
|
115
|
-
function
|
|
88
|
+
export function AddressDisplay({ address }: { address: string }) {
|
|
116
89
|
const [copied, copy] = useCopyToClipboard();
|
|
117
90
|
|
|
118
91
|
return (
|
|
119
|
-
<
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
92
|
+
<button
|
|
93
|
+
onClick={() => copy(address)}
|
|
94
|
+
className="font-mono text-xs text-[var(--tuwa-text-secondary)] hover:text-[var(--tuwa-text-accent)]"
|
|
95
|
+
>
|
|
96
|
+
{address.slice(0, 6)}...{address.slice(-4)}
|
|
97
|
+
{copied ? ' (Copied ✓)' : ' (Copy)'}
|
|
98
|
+
</button>
|
|
125
99
|
);
|
|
126
100
|
}
|
|
127
101
|
```
|
|
128
102
|
|
|
129
103
|
---
|
|
130
104
|
|
|
131
|
-
##
|
|
132
|
-
|
|
133
|
-
### Basic Customization
|
|
105
|
+
## 🎨 Theme Customization
|
|
134
106
|
|
|
135
|
-
Override
|
|
107
|
+
Override default tokens in your global CSS stylesheet to match your brand:
|
|
136
108
|
|
|
137
109
|
```css
|
|
138
|
-
/* src/styles/globals.css */
|
|
139
|
-
@import '@tuwaio/nova-core/dist/index.css';
|
|
140
|
-
|
|
141
|
-
/* Your custom theme overrides */
|
|
142
110
|
:root {
|
|
143
|
-
/*
|
|
144
|
-
--tuwa-text-
|
|
145
|
-
--tuwa-text-secondary: #64748b;
|
|
146
|
-
--tuwa-text-tertiary: #94a3b8;
|
|
147
|
-
--tuwa-text-accent: #3b82f6;
|
|
111
|
+
/* Customize Brand Accent Colors */
|
|
112
|
+
--tuwa-text-accent: #10b981; /* Emerald-500 */
|
|
148
113
|
--tuwa-text-on-accent: #ffffff;
|
|
149
|
-
|
|
150
|
-
/* Background System */
|
|
151
|
-
--tuwa-bg-primary: #ffffff;
|
|
152
|
-
--tuwa-bg-secondary: #f8fafc;
|
|
153
|
-
--tuwa-bg-muted: #f1f5f9;
|
|
154
|
-
|
|
155
|
-
/* Border System */
|
|
156
|
-
--tuwa-border-primary: #e2e8f0;
|
|
157
|
-
--tuwa-border-secondary: #cbd5e1;
|
|
114
|
+
--tuwa-rounded-corners: 8px;
|
|
158
115
|
}
|
|
159
|
-
```
|
|
160
|
-
|
|
161
|
-
### Dark Mode Support
|
|
162
116
|
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
```css
|
|
166
|
-
/* Dark mode overrides */
|
|
117
|
+
/* Customize Dark Mode styling */
|
|
167
118
|
.dark {
|
|
168
|
-
--tuwa-
|
|
169
|
-
--tuwa-
|
|
170
|
-
--tuwa-
|
|
171
|
-
--tuwa-bg-primary: #0f172a;
|
|
172
|
-
--tuwa-bg-secondary: #1e293b;
|
|
173
|
-
--tuwa-bg-muted: #334155;
|
|
174
|
-
--tuwa-border-primary: #374151;
|
|
119
|
+
--tuwa-bg-primary: #050505;
|
|
120
|
+
--tuwa-bg-secondary: #121212;
|
|
121
|
+
--tuwa-border-primary: #222222;
|
|
175
122
|
}
|
|
176
123
|
```
|
|
177
124
|
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
#### Component Integration
|
|
181
|
-
|
|
182
|
-
Nova Core works seamlessly with other Nova packages:
|
|
183
|
-
|
|
184
|
-
```tsx
|
|
185
|
-
import { cn } from '@tuwaio/nova-core';
|
|
186
|
-
import { ConnectButton } from '@tuwaio/nova-connect/components';
|
|
187
|
-
import { NovaTransactionsProvider } from '@tuwaio/nova-transactions';
|
|
188
|
-
|
|
189
|
-
function App() {
|
|
190
|
-
return (
|
|
191
|
-
<div className={cn('min-h-screen', 'bg-[var(--tuwa-bg-primary)]', 'text-[var(--tuwa-text-primary)]')}>
|
|
192
|
-
<NovaTransactionsProvider {...params} />
|
|
193
|
-
<header className="border-b border-[var(--tuwa-border-primary)]">
|
|
194
|
-
<ConnectButton />
|
|
195
|
-
</header>
|
|
196
|
-
<main>{/* Your app content */}</main>
|
|
197
|
-
</div>
|
|
198
|
-
);
|
|
199
|
-
}
|
|
200
|
-
```
|
|
201
|
-
|
|
202
|
-
### API Reference
|
|
203
|
-
|
|
204
|
-
#### Utilities
|
|
205
|
-
|
|
206
|
-
| Function | Description | Usage |
|
|
207
|
-
| :------------------- | :------------------------------------------------------------- | :--------------------------------------------------- |
|
|
208
|
-
| **`cn(...classes)`** | Merges class names intelligently, resolving Tailwind conflicts | `cn('p-4 text-sm', 'p-6', {'hidden': conditional})` |
|
|
209
|
-
|
|
210
|
-
#### Hooks
|
|
211
|
-
|
|
212
|
-
| Hook | Description | Return Type |
|
|
213
|
-
| :------------------------- | :----------------------------------- | :---------------------------------- |
|
|
214
|
-
| **`useCopyToClipboard()`** | Copy text to clipboard with feedback | `[boolean, (text: string) => void]` |
|
|
215
|
-
| **`useMediaQuery(query)`** | Responsive media query hook | `boolean` |
|
|
125
|
+
---
|
|
216
126
|
|
|
217
|
-
##
|
|
127
|
+
## 🔧 API & Module Architecture
|
|
218
128
|
|
|
219
|
-
|
|
129
|
+
`@tuwaio/nova-core` exports the following modules and functions:
|
|
220
130
|
|
|
221
|
-
|
|
131
|
+
- **Style Composition:** `cn`.
|
|
132
|
+
- **React Hooks:** `useCopyToClipboard`, `useMediaQuery`.
|
|
133
|
+
- **UI Dialog Primitives:** `Dialog`, `DialogOverlay`, `DialogContent`, `DialogHeader`, `DialogTitle`, `DialogDescription`, `DialogFooter`.
|
|
134
|
+
- **Utility Indicators:** `StarsBackground`, `FallbackIcon`, `GithubFallbackIcon`, `ChevronArrowWithAnim`, `ToastCloseButton`, `ToastValidationError`, `NetworkIcon`, `WalletIcon`.
|
|
135
|
+
- **Formatters:** `deepMerge`, `svgToBase64`, `isTouchDevice`, `textCenterEllipsis`, `resolveCssVariable`.
|
|
222
136
|
|
|
223
|
-
|
|
137
|
+
---
|
|
224
138
|
|
|
225
139
|
## 📄 License
|
|
226
140
|
|
|
227
|
-
|
|
141
|
+
Licensed under the **Apache-2.0 License**. See the [LICENSE](./LICENSE) file for details.
|
package/dist/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tailwindcss v4.2
|
|
1
|
+
/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
|
|
2
2
|
@layer properties;
|
|
3
3
|
@layer theme, base, components, utilities;
|
|
4
4
|
@layer theme {
|
|
@@ -32,10 +32,10 @@
|
|
|
32
32
|
position: sticky;
|
|
33
33
|
}
|
|
34
34
|
.novacore\:inset-0 {
|
|
35
|
-
inset:
|
|
35
|
+
inset: 0;
|
|
36
36
|
}
|
|
37
37
|
.novacore\:top-0 {
|
|
38
|
-
top:
|
|
38
|
+
top: 0;
|
|
39
39
|
}
|
|
40
40
|
.novacore\:top-2 {
|
|
41
41
|
top: calc(var(--novacore-spacing) * 2);
|
|
@@ -44,10 +44,10 @@
|
|
|
44
44
|
right: calc(var(--novacore-spacing) * 2);
|
|
45
45
|
}
|
|
46
46
|
.novacore\:bottom-0 {
|
|
47
|
-
bottom:
|
|
47
|
+
bottom: 0;
|
|
48
48
|
}
|
|
49
49
|
.novacore\:left-0 {
|
|
50
|
-
left:
|
|
50
|
+
left: 0;
|
|
51
51
|
}
|
|
52
52
|
.novacore\:z-1 {
|
|
53
53
|
z-index: 1;
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
z-index: 50;
|
|
60
60
|
}
|
|
61
61
|
.novacore\:m-0 {
|
|
62
|
-
margin:
|
|
62
|
+
margin: 0;
|
|
63
63
|
}
|
|
64
64
|
.novacore\:flex {
|
|
65
65
|
display: flex;
|
|
@@ -110,7 +110,7 @@
|
|
|
110
110
|
justify-content: center;
|
|
111
111
|
}
|
|
112
112
|
.novacore\:gap-1 {
|
|
113
|
-
gap:
|
|
113
|
+
gap: var(--novacore-spacing);
|
|
114
114
|
}
|
|
115
115
|
.novacore\:gap-3 {
|
|
116
116
|
gap: calc(var(--novacore-spacing) * 3);
|
|
@@ -158,10 +158,10 @@
|
|
|
158
158
|
}
|
|
159
159
|
}
|
|
160
160
|
.novacore\:p-0 {
|
|
161
|
-
padding:
|
|
161
|
+
padding: 0;
|
|
162
162
|
}
|
|
163
163
|
.novacore\:p-1 {
|
|
164
|
-
padding:
|
|
164
|
+
padding: var(--novacore-spacing);
|
|
165
165
|
}
|
|
166
166
|
.novacore\:p-4 {
|
|
167
167
|
padding: calc(var(--novacore-spacing) * 4);
|
package/dist/index.d.cts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
1
|
import * as React$1 from 'react';
|
|
3
2
|
import { ComponentProps, ReactNode } from 'react';
|
|
4
3
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
@@ -9,7 +8,7 @@ declare function ChevronArrowWithAnim({ className, strokeWidth, isOpen, }: {
|
|
|
9
8
|
className?: string;
|
|
10
9
|
strokeWidth?: number;
|
|
11
10
|
isOpen?: boolean;
|
|
12
|
-
}):
|
|
11
|
+
}): React$1.JSX.Element;
|
|
13
12
|
|
|
14
13
|
/**
|
|
15
14
|
* A reusable close button icon (X mark) styled with TUWA color scheme.
|
|
@@ -42,7 +41,7 @@ interface FallbackIconProps {
|
|
|
42
41
|
* @param props - {@link FallbackIconProps}
|
|
43
42
|
* @returns The rendered fallback element.
|
|
44
43
|
*/
|
|
45
|
-
declare const FallbackIcon: ({ animate, content, className }: FallbackIconProps) =>
|
|
44
|
+
declare const FallbackIcon: ({ animate, content, className }: FallbackIconProps) => React$1.JSX.Element;
|
|
46
45
|
|
|
47
46
|
/**
|
|
48
47
|
* Props for the GithubFallbackIcon component.
|
|
@@ -68,7 +67,7 @@ interface GithubFallbackIconProps extends Omit<ComponentProps<'img'>, 'src'> {
|
|
|
68
67
|
* @param props - {@link GithubFallbackIconProps}
|
|
69
68
|
* @returns Loading indicator, the fetched icon, or an error fallback
|
|
70
69
|
*/
|
|
71
|
-
declare function GithubFallbackIcon({ githubSrc, className, alt, firstPathFill, ...props }: GithubFallbackIconProps):
|
|
70
|
+
declare function GithubFallbackIcon({ githubSrc, className, alt, firstPathFill, ...props }: GithubFallbackIconProps): React$1.JSX.Element;
|
|
72
71
|
|
|
73
72
|
declare const Dialog: React$1.FC<DialogPrimitive.DialogProps>;
|
|
74
73
|
declare const DialogTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
@@ -78,7 +77,7 @@ declare const DialogOverlay: {
|
|
|
78
77
|
({ className, backdropAnimation }: {
|
|
79
78
|
backdropAnimation?: Variants;
|
|
80
79
|
className?: string;
|
|
81
|
-
}):
|
|
80
|
+
}): React$1.JSX.Element;
|
|
82
81
|
displayName: string | undefined;
|
|
83
82
|
};
|
|
84
83
|
declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
@@ -86,11 +85,11 @@ declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<DialogPrimit
|
|
|
86
85
|
backdropAnimation?: Variants;
|
|
87
86
|
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
88
87
|
declare const DialogHeader: {
|
|
89
|
-
({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>):
|
|
88
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
|
|
90
89
|
displayName: string;
|
|
91
90
|
};
|
|
92
91
|
declare const DialogFooter: {
|
|
93
|
-
({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>):
|
|
92
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
|
|
94
93
|
displayName: string;
|
|
95
94
|
};
|
|
96
95
|
declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
|
|
@@ -101,11 +100,11 @@ interface NetworkIconProps {
|
|
|
101
100
|
variant?: 'background' | 'branded' | 'mono';
|
|
102
101
|
className?: string;
|
|
103
102
|
}
|
|
104
|
-
declare function NetworkIcon({ chainId, variant, className }: NetworkIconProps):
|
|
103
|
+
declare function NetworkIcon({ chainId, variant, className }: NetworkIconProps): React$1.JSX.Element;
|
|
105
104
|
|
|
106
105
|
declare function StarsBackground({ starsCount }: {
|
|
107
106
|
starsCount?: number;
|
|
108
|
-
}):
|
|
107
|
+
}): React$1.JSX.Element;
|
|
109
108
|
|
|
110
109
|
/**
|
|
111
110
|
* Props for the SvgImg component.
|
|
@@ -121,7 +120,7 @@ interface SvgImgProps extends Omit<ComponentProps<'img'>, 'src' | 'draggable'> {
|
|
|
121
120
|
*
|
|
122
121
|
* @param props - {@link SvgImgProps}
|
|
123
122
|
*/
|
|
124
|
-
declare function SvgImg({ src, alt, ...props }: SvgImgProps):
|
|
123
|
+
declare function SvgImg({ src, alt, ...props }: SvgImgProps): React$1.JSX.Element;
|
|
125
124
|
|
|
126
125
|
/**
|
|
127
126
|
* Props for the SvgToImg component.
|
|
@@ -160,7 +159,7 @@ interface SvgToImgProps extends Omit<ComponentProps<'img'>, 'ref' | 'src' | 'chi
|
|
|
160
159
|
* </SvgToImg>
|
|
161
160
|
* ```
|
|
162
161
|
*/
|
|
163
|
-
declare function SvgToImg({ children, iconId, alt, firstPathFill, ...props }: SvgToImgProps):
|
|
162
|
+
declare function SvgToImg({ children, iconId, alt, firstPathFill, ...props }: SvgToImgProps): React$1.JSX.Element;
|
|
164
163
|
|
|
165
164
|
/**
|
|
166
165
|
* @file This file contains a reusable close button component, designed primarily for toast notifications.
|
|
@@ -195,7 +194,7 @@ type ToastCloseButtonProps = {
|
|
|
195
194
|
* A simple, styled close button component ('X' icon) intended for use within toast notifications.
|
|
196
195
|
* It uses theme-aware CSS variables for styling and i18n labels for accessibility.
|
|
197
196
|
*/
|
|
198
|
-
declare function ToastCloseButton({ closeToast, ariaLabel, title, className, iconClassName, }: ToastCloseButtonProps):
|
|
197
|
+
declare function ToastCloseButton({ closeToast, ariaLabel, title, className, iconClassName, }: ToastCloseButtonProps): React$1.JSX.Element;
|
|
199
198
|
|
|
200
199
|
/**
|
|
201
200
|
* Props for the WalletIcon component.
|
|
@@ -225,7 +224,7 @@ interface WalletIconProps {
|
|
|
225
224
|
* @param props - {@link WalletIconProps}
|
|
226
225
|
* @returns The wallet icon or a fallback UI.
|
|
227
226
|
*/
|
|
228
|
-
declare function WalletIcon({ walletName, variant, className }: WalletIconProps):
|
|
227
|
+
declare function WalletIcon({ walletName, variant, className }: WalletIconProps): React$1.JSX.Element;
|
|
229
228
|
|
|
230
229
|
/**
|
|
231
230
|
* @file This file contains a custom React hook for copying text to the clipboard.
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
1
|
import * as React$1 from 'react';
|
|
3
2
|
import { ComponentProps, ReactNode } from 'react';
|
|
4
3
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
@@ -9,7 +8,7 @@ declare function ChevronArrowWithAnim({ className, strokeWidth, isOpen, }: {
|
|
|
9
8
|
className?: string;
|
|
10
9
|
strokeWidth?: number;
|
|
11
10
|
isOpen?: boolean;
|
|
12
|
-
}):
|
|
11
|
+
}): React$1.JSX.Element;
|
|
13
12
|
|
|
14
13
|
/**
|
|
15
14
|
* A reusable close button icon (X mark) styled with TUWA color scheme.
|
|
@@ -42,7 +41,7 @@ interface FallbackIconProps {
|
|
|
42
41
|
* @param props - {@link FallbackIconProps}
|
|
43
42
|
* @returns The rendered fallback element.
|
|
44
43
|
*/
|
|
45
|
-
declare const FallbackIcon: ({ animate, content, className }: FallbackIconProps) =>
|
|
44
|
+
declare const FallbackIcon: ({ animate, content, className }: FallbackIconProps) => React$1.JSX.Element;
|
|
46
45
|
|
|
47
46
|
/**
|
|
48
47
|
* Props for the GithubFallbackIcon component.
|
|
@@ -68,7 +67,7 @@ interface GithubFallbackIconProps extends Omit<ComponentProps<'img'>, 'src'> {
|
|
|
68
67
|
* @param props - {@link GithubFallbackIconProps}
|
|
69
68
|
* @returns Loading indicator, the fetched icon, or an error fallback
|
|
70
69
|
*/
|
|
71
|
-
declare function GithubFallbackIcon({ githubSrc, className, alt, firstPathFill, ...props }: GithubFallbackIconProps):
|
|
70
|
+
declare function GithubFallbackIcon({ githubSrc, className, alt, firstPathFill, ...props }: GithubFallbackIconProps): React$1.JSX.Element;
|
|
72
71
|
|
|
73
72
|
declare const Dialog: React$1.FC<DialogPrimitive.DialogProps>;
|
|
74
73
|
declare const DialogTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
@@ -78,7 +77,7 @@ declare const DialogOverlay: {
|
|
|
78
77
|
({ className, backdropAnimation }: {
|
|
79
78
|
backdropAnimation?: Variants;
|
|
80
79
|
className?: string;
|
|
81
|
-
}):
|
|
80
|
+
}): React$1.JSX.Element;
|
|
82
81
|
displayName: string | undefined;
|
|
83
82
|
};
|
|
84
83
|
declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
@@ -86,11 +85,11 @@ declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<DialogPrimit
|
|
|
86
85
|
backdropAnimation?: Variants;
|
|
87
86
|
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
88
87
|
declare const DialogHeader: {
|
|
89
|
-
({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>):
|
|
88
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
|
|
90
89
|
displayName: string;
|
|
91
90
|
};
|
|
92
91
|
declare const DialogFooter: {
|
|
93
|
-
({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>):
|
|
92
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
|
|
94
93
|
displayName: string;
|
|
95
94
|
};
|
|
96
95
|
declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
|
|
@@ -101,11 +100,11 @@ interface NetworkIconProps {
|
|
|
101
100
|
variant?: 'background' | 'branded' | 'mono';
|
|
102
101
|
className?: string;
|
|
103
102
|
}
|
|
104
|
-
declare function NetworkIcon({ chainId, variant, className }: NetworkIconProps):
|
|
103
|
+
declare function NetworkIcon({ chainId, variant, className }: NetworkIconProps): React$1.JSX.Element;
|
|
105
104
|
|
|
106
105
|
declare function StarsBackground({ starsCount }: {
|
|
107
106
|
starsCount?: number;
|
|
108
|
-
}):
|
|
107
|
+
}): React$1.JSX.Element;
|
|
109
108
|
|
|
110
109
|
/**
|
|
111
110
|
* Props for the SvgImg component.
|
|
@@ -121,7 +120,7 @@ interface SvgImgProps extends Omit<ComponentProps<'img'>, 'src' | 'draggable'> {
|
|
|
121
120
|
*
|
|
122
121
|
* @param props - {@link SvgImgProps}
|
|
123
122
|
*/
|
|
124
|
-
declare function SvgImg({ src, alt, ...props }: SvgImgProps):
|
|
123
|
+
declare function SvgImg({ src, alt, ...props }: SvgImgProps): React$1.JSX.Element;
|
|
125
124
|
|
|
126
125
|
/**
|
|
127
126
|
* Props for the SvgToImg component.
|
|
@@ -160,7 +159,7 @@ interface SvgToImgProps extends Omit<ComponentProps<'img'>, 'ref' | 'src' | 'chi
|
|
|
160
159
|
* </SvgToImg>
|
|
161
160
|
* ```
|
|
162
161
|
*/
|
|
163
|
-
declare function SvgToImg({ children, iconId, alt, firstPathFill, ...props }: SvgToImgProps):
|
|
162
|
+
declare function SvgToImg({ children, iconId, alt, firstPathFill, ...props }: SvgToImgProps): React$1.JSX.Element;
|
|
164
163
|
|
|
165
164
|
/**
|
|
166
165
|
* @file This file contains a reusable close button component, designed primarily for toast notifications.
|
|
@@ -195,7 +194,7 @@ type ToastCloseButtonProps = {
|
|
|
195
194
|
* A simple, styled close button component ('X' icon) intended for use within toast notifications.
|
|
196
195
|
* It uses theme-aware CSS variables for styling and i18n labels for accessibility.
|
|
197
196
|
*/
|
|
198
|
-
declare function ToastCloseButton({ closeToast, ariaLabel, title, className, iconClassName, }: ToastCloseButtonProps):
|
|
197
|
+
declare function ToastCloseButton({ closeToast, ariaLabel, title, className, iconClassName, }: ToastCloseButtonProps): React$1.JSX.Element;
|
|
199
198
|
|
|
200
199
|
/**
|
|
201
200
|
* Props for the WalletIcon component.
|
|
@@ -225,7 +224,7 @@ interface WalletIconProps {
|
|
|
225
224
|
* @param props - {@link WalletIconProps}
|
|
226
225
|
* @returns The wallet icon or a fallback UI.
|
|
227
226
|
*/
|
|
228
|
-
declare function WalletIcon({ walletName, variant, className }: WalletIconProps):
|
|
227
|
+
declare function WalletIcon({ walletName, variant, className }: WalletIconProps): React$1.JSX.Element;
|
|
229
228
|
|
|
230
229
|
/**
|
|
231
230
|
* @file This file contains a custom React hook for copying text to the clipboard.
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tuwaio/nova-core",
|
|
3
|
-
"version": "1.0.0-fix-
|
|
3
|
+
"version": "1.0.0-fix-docs-alpha.1.dfcdaa7c",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Oleksandr Tkach",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
|
-
"description": "
|
|
7
|
+
"description": "UI Core (L6) of the TUWA Ecosystem. Foundational package with styling primitives, CSS variables, base React components, and helper utilities.",
|
|
8
8
|
"main": "./dist/index.cjs",
|
|
9
9
|
"module": "./dist/index.js",
|
|
10
10
|
"types": "./dist/index.d.ts",
|
|
@@ -57,20 +57,20 @@
|
|
|
57
57
|
"tailwind-merge": "3.x.x"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
|
-
"@tailwindcss/postcss": "^4.2
|
|
61
|
-
"@tailwindcss/vite": "^4.2
|
|
62
|
-
"@types/react": "^19.2.
|
|
63
|
-
"@radix-ui/react-dialog": "^1.1.
|
|
64
|
-
"@web3icons/react": "^4.1.
|
|
65
|
-
"@web3icons/common": "^0.11.
|
|
66
|
-
"autoprefixer": "^10.5.
|
|
60
|
+
"@tailwindcss/postcss": "^4.3.2",
|
|
61
|
+
"@tailwindcss/vite": "^4.3.2",
|
|
62
|
+
"@types/react": "^19.2.17",
|
|
63
|
+
"@radix-ui/react-dialog": "^1.1.19",
|
|
64
|
+
"@web3icons/react": "^4.1.19",
|
|
65
|
+
"@web3icons/common": "^0.11.48",
|
|
66
|
+
"autoprefixer": "^10.5.2",
|
|
67
67
|
"clsx": "^2.1.1",
|
|
68
|
-
"framer-motion": "^12.
|
|
69
|
-
"postcss": "^8.5.
|
|
68
|
+
"framer-motion": "^12.42.2",
|
|
69
|
+
"postcss": "^8.5.19",
|
|
70
70
|
"postcss-cli": "^11.0.1",
|
|
71
|
-
"react": "^19.2.
|
|
72
|
-
"tailwindcss": "^4.2
|
|
73
|
-
"tailwind-merge": "^3.
|
|
71
|
+
"react": "^19.2.7",
|
|
72
|
+
"tailwindcss": "^4.3.2",
|
|
73
|
+
"tailwind-merge": "^3.6.0",
|
|
74
74
|
"tsup": "^8.5.1",
|
|
75
75
|
"typescript": "^6.0.3"
|
|
76
76
|
},
|