@veevarts/design-system 0.1.15 → 0.1.17
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 +210 -33
- package/dist/Logo_veevart_rebranding.svg +17 -0
- package/dist/components/Button/Button.d.ts +3 -0
- package/dist/components/Button/index.d.ts +2 -0
- package/dist/components/index.d.ts +2 -0
- package/dist/fonts/neue-montreal/Icon/r +0 -0
- package/dist/fonts/neue-montreal/PPNeueMontreal-Bold.woff +0 -0
- package/dist/fonts/neue-montreal/PPNeueMontreal-Bold.woff2 +0 -0
- package/dist/fonts/neue-montreal/PPNeueMontreal-BoldItalic.woff +0 -0
- package/dist/fonts/neue-montreal/PPNeueMontreal-BoldItalic.woff2 +0 -0
- package/dist/fonts/neue-montreal/PPNeueMontreal-Italic.woff +0 -0
- package/dist/fonts/neue-montreal/PPNeueMontreal-Italic.woff2 +0 -0
- package/dist/fonts/neue-montreal/PPNeueMontreal-Regular.woff +0 -0
- package/dist/fonts/neue-montreal/PPNeueMontreal-Regular.woff2 +0 -0
- package/dist/fonts/neue-montreal/PPNeueMontreal-SemiBold.woff +0 -0
- package/dist/fonts/neue-montreal/PPNeueMontreal-SemiBold.woff2 +0 -0
- package/dist/fonts/scholar/Scholar-Italic.woff +0 -0
- package/dist/fonts/scholar/Scholar-Italic.woff2 +0 -0
- package/dist/fonts/scholar/Scholar-Regular.woff +0 -0
- package/dist/fonts/scholar/Scholar-Regular.woff2 +0 -0
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +217 -47
- package/dist/patterns/Stepper/Stepper.d.ts +206 -25
- package/dist/patterns/Stepper/Stepper.test.d.ts +4 -0
- package/dist/patterns/Stepper/examples/FormExampleStepper.d.ts +1 -0
- package/dist/patterns/Stepper/examples/InteractiveStepper.d.ts +2 -0
- package/dist/patterns/Stepper/examples/ValidationStepper.d.ts +1 -0
- package/dist/patterns/Stepper/examples/index.d.ts +3 -0
- package/dist/patterns/Stepper/index.d.ts +1 -1
- package/dist/patterns/index.d.ts +1 -1
- package/dist/tokens/spacing.d.ts +4 -1
- package/dist/tokens/typography.d.ts +11 -7
- package/package.json +19 -8
package/README.md
CHANGED
|
@@ -1,71 +1,248 @@
|
|
|
1
|
-
# Design System
|
|
1
|
+
# Veevart Design System
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A professional design system built on **HeroUI** for creating consistent, accessible, and elegant user interfaces.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
|
|
6
|
+
|
|
6
7
|
|
|
7
|
-
|
|
8
|
-
- **Reusable, well-typed, accessible components**.
|
|
9
|
-
- **Discoverable documentation** via Storybook.
|
|
8
|
+
## 🎯 Overview
|
|
10
9
|
|
|
11
|
-
|
|
10
|
+
The Veevart Design System provides:
|
|
11
|
+
- **Design Tokens**: Colors, typography, and spacing systems
|
|
12
|
+
- **Reusable Patterns**: Navbar, Stepper, Footer components
|
|
13
|
+
- **Page Templates**: Complete layouts for common use cases
|
|
14
|
+
- **50+ HeroUI Components**: All themed with Veevart brand colors
|
|
12
15
|
|
|
13
|
-
|
|
14
|
-
- Vite
|
|
15
|
-
- Storybook
|
|
16
|
-
- ESLint + TypeScript ESLint
|
|
16
|
+
## 📦 Two Types of Builds
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
This project has **two different build outputs** for different purposes:
|
|
19
|
+
|
|
20
|
+
### 1️⃣ NPM Library Build (for developers)
|
|
21
|
+
|
|
22
|
+
**Purpose**: Publish components as an installable package
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm run build
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
**Generates**: `dist/` folder with:
|
|
29
|
+
- Compiled JavaScript (ES + CJS)
|
|
30
|
+
- TypeScript definitions (`.d.ts`)
|
|
31
|
+
- CSS styles
|
|
32
|
+
|
|
33
|
+
**Published to**: NPM registry
|
|
34
|
+
**Used in**: Other React projects that install the library
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
npm install @veevarts/design-system
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### 2️⃣ Storybook Build (for documentation)
|
|
41
|
+
|
|
42
|
+
**Purpose**: Generate a static website to showcase components
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
npm run build-storybook
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
**Generates**: `storybook-static/` folder with:
|
|
49
|
+
- Complete HTML/CSS/JS website
|
|
50
|
+
- Interactive component demos
|
|
51
|
+
- Full documentation
|
|
52
|
+
|
|
53
|
+
**Deployed to**: Vercel, Netlify, GitHub Pages, etc.
|
|
54
|
+
**Used by**: Designers, developers, and stakeholders to browse the design system
|
|
55
|
+
|
|
56
|
+
---
|
|
57
|
+
|
|
58
|
+
## 🚀 Quick Start
|
|
19
59
|
|
|
20
60
|
### Prerequisites
|
|
21
61
|
|
|
22
|
-
- Node.js
|
|
23
|
-
- npm
|
|
62
|
+
- **Node.js**: v20.19.0 (see `.nvmrc`)
|
|
63
|
+
- **npm**: v10+
|
|
24
64
|
|
|
25
|
-
|
|
65
|
+
Use `nvm` to install the correct version:
|
|
66
|
+
```bash
|
|
67
|
+
nvm use
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
### Installation
|
|
26
71
|
|
|
27
72
|
```bash
|
|
28
73
|
npm install
|
|
29
74
|
```
|
|
30
75
|
|
|
31
|
-
###
|
|
76
|
+
### Development
|
|
32
77
|
|
|
78
|
+
**Run Storybook locally:**
|
|
33
79
|
```bash
|
|
34
80
|
npm run storybook
|
|
35
81
|
```
|
|
82
|
+
Opens at `http://localhost:6006`
|
|
36
83
|
|
|
37
|
-
|
|
38
|
-
|
|
84
|
+
**Run dev server:**
|
|
39
85
|
```bash
|
|
40
86
|
npm run dev
|
|
41
87
|
```
|
|
88
|
+
Opens at `http://localhost:5173`
|
|
42
89
|
|
|
43
|
-
|
|
90
|
+
---
|
|
91
|
+
|
|
92
|
+
## 📜 Available Scripts
|
|
93
|
+
|
|
94
|
+
| Command | Description |
|
|
95
|
+
|---------|-------------|
|
|
96
|
+
| `npm run dev` | Start Vite dev server |
|
|
97
|
+
| `npm run build` | Build library for NPM (→ `dist/`) |
|
|
98
|
+
| `npm run storybook` | Run Storybook locally |
|
|
99
|
+
| `npm run build-storybook` | Build Storybook site (→ `storybook-static/`) |
|
|
100
|
+
| `npm run deploy-storybook` | Build + deploy Storybook to Vercel |
|
|
101
|
+
| `npm run lint` | Run ESLint |
|
|
102
|
+
| `npm run preview` | Preview production build |
|
|
103
|
+
|
|
104
|
+
---
|
|
105
|
+
|
|
106
|
+
## 💻 Usage
|
|
107
|
+
|
|
108
|
+
### Install in your project
|
|
44
109
|
|
|
45
110
|
```bash
|
|
46
|
-
npm
|
|
111
|
+
npm install @veevarts/design-system @heroui/react framer-motion
|
|
47
112
|
```
|
|
48
113
|
|
|
49
|
-
###
|
|
114
|
+
### Import components
|
|
115
|
+
|
|
116
|
+
```tsx
|
|
117
|
+
import { HeroUIProvider, Navbar, Footer, Button } from '@veevarts/design-system';
|
|
118
|
+
|
|
119
|
+
function App() {
|
|
120
|
+
return (
|
|
121
|
+
<HeroUIProvider>
|
|
122
|
+
<Navbar />
|
|
123
|
+
<main>
|
|
124
|
+
<Button color="primary">Click me</Button>
|
|
125
|
+
</main>
|
|
126
|
+
<Footer copyrightText="© 2026 My Company" />
|
|
127
|
+
</HeroUIProvider>
|
|
128
|
+
);
|
|
129
|
+
}
|
|
130
|
+
```
|
|
50
131
|
|
|
51
|
-
|
|
52
|
-
|
|
132
|
+
### Import HeroUI components
|
|
133
|
+
|
|
134
|
+
All HeroUI components are re-exported and themed:
|
|
135
|
+
|
|
136
|
+
```tsx
|
|
137
|
+
import { Card, Input, Modal, Dropdown } from '@veevarts/design-system';
|
|
53
138
|
```
|
|
54
139
|
|
|
55
|
-
|
|
140
|
+
For complete HeroUI documentation, visit: [HeroUI Storybook](https://storybook.heroui.com/)
|
|
141
|
+
|
|
142
|
+
---
|
|
143
|
+
|
|
144
|
+
## 🏗️ Project Structure
|
|
56
145
|
|
|
57
146
|
```
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
147
|
+
design-system/
|
|
148
|
+
├── src/
|
|
149
|
+
│ ├── index.ts # Main entry point
|
|
150
|
+
│ ├── foundations/ # Design tokens (colors, typography, spacing)
|
|
151
|
+
│ ├── patterns/ # Composition components
|
|
152
|
+
│ │ ├── Navbar/
|
|
153
|
+
│ │ ├── Stepper/
|
|
154
|
+
│ │ └── Footer/
|
|
155
|
+
│ ├── templates/ # Page layouts
|
|
156
|
+
│ │ ├── ConfirmationPageTemplate/
|
|
157
|
+
│ │ └── EventDetailsTemplate/
|
|
158
|
+
│ ├── providers/ # HeroUIProvider wrapper
|
|
159
|
+
│ ├── theme/ # Theme configuration
|
|
160
|
+
│ └── tokens/ # Design tokens
|
|
161
|
+
├── .storybook/ # Storybook configuration
|
|
162
|
+
├── dist/ # NPM build output (gitignored)
|
|
163
|
+
├── storybook-static/ # Storybook build output (gitignored)
|
|
164
|
+
├── public/ # Static assets (fonts, logos)
|
|
165
|
+
└── package.json
|
|
63
166
|
```
|
|
64
167
|
|
|
65
|
-
|
|
168
|
+
---
|
|
169
|
+
|
|
170
|
+
## 🎨 Design Principles
|
|
171
|
+
|
|
172
|
+
### Pure Design System
|
|
173
|
+
- ✅ No backend logic or API integrations
|
|
174
|
+
- ✅ No business logic embedded
|
|
175
|
+
- ✅ Mock data for demonstrations only
|
|
176
|
+
- ✅ HeroUI as the foundational layer
|
|
177
|
+
|
|
178
|
+
### Best Practices
|
|
179
|
+
- ✅ Composition over component creation
|
|
180
|
+
- ✅ Strict TypeScript for type safety
|
|
181
|
+
- ✅ Accessibility-first approach
|
|
182
|
+
- ✅ Comprehensive documentation
|
|
66
183
|
|
|
67
|
-
|
|
68
|
-
|
|
184
|
+
---
|
|
185
|
+
|
|
186
|
+
## 🌐 Deployment
|
|
187
|
+
|
|
188
|
+
### Deploy Storybook to Vercel
|
|
189
|
+
|
|
190
|
+
```bash
|
|
191
|
+
npm run deploy-storybook
|
|
69
192
|
```
|
|
70
193
|
|
|
71
|
-
|
|
194
|
+
### Deploy Storybook to Netlify
|
|
195
|
+
|
|
196
|
+
1. Build Storybook:
|
|
197
|
+
```bash
|
|
198
|
+
npm run build-storybook
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
2. Drag & drop `storybook-static/` to [Netlify Drop](https://app.netlify.com/drop)
|
|
202
|
+
|
|
203
|
+
### Publish to NPM
|
|
204
|
+
|
|
205
|
+
1. Update version:
|
|
206
|
+
```bash
|
|
207
|
+
npm version patch # or minor, major
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
2. Build library:
|
|
211
|
+
```bash
|
|
212
|
+
npm run build
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
3. Publish:
|
|
216
|
+
```bash
|
|
217
|
+
npm publish
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
---
|
|
221
|
+
|
|
222
|
+
## 🤝 Contributing
|
|
223
|
+
|
|
224
|
+
We welcome contributions! Please follow these guidelines:
|
|
225
|
+
|
|
226
|
+
1. **Create a branch** for your feature/fix
|
|
227
|
+
2. **Follow the existing code style**
|
|
228
|
+
3. **Add/update Storybook stories** for new components
|
|
229
|
+
4. **Test your changes** locally with `npm run storybook`
|
|
230
|
+
5. **Submit a pull request**
|
|
231
|
+
|
|
232
|
+
---
|
|
233
|
+
|
|
234
|
+
## 📄 License
|
|
235
|
+
|
|
236
|
+
© 2026 Veevart. All rights reserved.
|
|
237
|
+
|
|
238
|
+
---
|
|
239
|
+
|
|
240
|
+
## 🔗 Links
|
|
241
|
+
|
|
242
|
+
- **NPM Package**: [@veevarts/design-system](https://www.npmjs.com/package/@veevarts/design-system)
|
|
243
|
+
- **HeroUI Documentation**: [storybook.heroui.com](https://storybook.heroui.com)
|
|
244
|
+
- **Veevart Website**: [veevart.com](https://veevart.com)
|
|
245
|
+
|
|
246
|
+
---
|
|
247
|
+
|
|
248
|
+
**Built with ❤️ by the Veevart team**
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
<svg width="2804" height="530" viewBox="0 0 2804 530" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M215.703 14.8349L247.012 203.393C248.032 209.536 253.328 214.038 259.532 214.038H274.9C281.077 214.038 286.357 209.575 287.407 203.465L319.835 14.9076C321.174 7.12008 315.2 0 307.327 0H228.223C220.38 0 214.414 7.06922 215.703 14.8349Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
|
3
|
+
<path d="M319.935 515.165L288.626 326.607C287.606 320.464 282.311 315.962 276.106 315.962H260.739C254.562 315.962 249.282 320.425 248.231 326.535L215.804 515.092C214.464 522.88 220.438 530 228.311 530H307.415C315.258 530 321.225 522.931 319.935 515.165Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
|
4
|
+
<path d="M14.7795 318.585L202.634 287.159C208.754 286.135 213.24 280.82 213.24 274.592V259.167C213.24 252.967 208.793 247.667 202.706 246.612L14.8519 214.064C7.09352 212.719 -3.44147e-07 218.716 0 226.618L3.45772e-06 306.018C3.80057e-06 313.891 7.04285 319.879 14.7795 318.585Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
|
5
|
+
<path d="M520.859 213.963L333.005 245.389C326.884 246.413 322.398 251.728 322.398 257.956V273.381C322.398 279.581 326.845 284.881 332.932 285.936L520.786 318.484C528.545 319.829 535.638 313.832 535.638 305.93V226.53C535.638 218.657 528.595 212.669 520.859 213.963Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
|
6
|
+
<path d="M417.379 43.5009L291.681 220.119L317.709 246.245L494.566 120.977L417.379 43.5009Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
|
7
|
+
<path d="M43.3677 120.994L219.303 247.139L245.331 221.013L120.554 43.5181L43.3677 120.994Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
|
8
|
+
<path d="M120.591 493.819L246.229 317.261L220.201 291.136L43.404 416.343L120.591 493.819Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
|
9
|
+
<path d="M494.525 416.368L318.606 290.24L292.578 316.366L417.338 493.844L494.525 416.368Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
|
10
|
+
<path d="M677.592 182.717C672.322 168.824 665.376 158.763 656.752 152.535C648.608 145.827 638.307 141.995 625.851 141.037V125.945H765.983V141.037C745.383 141.995 731.489 145.827 724.303 152.535C717.117 159.242 716.159 169.303 721.428 182.717L823.474 445.016L813.413 448.609L916.176 181.998C921.925 168.105 921.686 158.044 915.458 151.816C909.23 145.109 895.815 141.516 875.215 141.037V125.945H983.727V141.037C973.667 141.995 964.804 145.827 957.138 152.535C949.473 159.242 943.005 169.542 937.735 183.436L816.287 488.852H800.477L677.592 182.717Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
|
11
|
+
<path d="M1151.97 494.601C1117.96 494.601 1087.29 486.457 1059.99 470.168C1032.68 453.4 1010.88 430.643 994.591 401.898C978.781 373.153 970.876 340.815 970.876 304.884C970.876 268.952 978.063 236.614 992.435 207.869C1007.29 178.645 1027.65 155.888 1053.52 139.599C1079.87 123.31 1109.33 115.166 1141.91 115.166C1173.53 115.166 1200.12 122.352 1221.68 136.725C1243.24 151.097 1258.57 170.5 1267.67 194.934C1276.77 218.888 1279.17 245.238 1274.86 273.983H1007.53V256.736L1234.61 248.831C1238.45 228.23 1236.77 209.067 1229.58 191.341C1222.87 173.614 1211.62 159.721 1195.81 149.66C1180 139.12 1161.55 133.85 1140.47 133.85C1116.52 133.85 1094.96 140.797 1075.8 154.691C1056.63 168.584 1041.54 187.747 1030.52 212.181C1019.5 236.135 1013.99 263.682 1013.99 294.823C1013.99 326.921 1020.46 355.906 1033.4 381.777C1046.33 407.168 1064.06 427.05 1086.58 441.423C1109.57 455.795 1135.68 462.982 1164.91 462.982C1195.57 462.982 1221.44 455.316 1242.52 439.985C1264.08 424.176 1280.37 403.575 1291.38 378.184L1306.48 383.933C1294.5 417.948 1275.33 445.016 1248.99 465.137C1222.64 484.78 1190.3 494.601 1151.97 494.601Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
|
12
|
+
<path d="M1498.51 494.601C1464.5 494.601 1433.84 486.457 1406.53 470.168C1379.22 453.4 1357.42 430.643 1341.13 401.898C1325.32 373.153 1317.42 340.815 1317.42 304.884C1317.42 268.952 1324.6 236.614 1338.98 207.869C1353.83 178.645 1374.19 155.888 1400.06 139.599C1426.41 123.31 1455.87 115.166 1488.45 115.166C1520.07 115.166 1546.66 122.352 1568.22 136.725C1589.78 151.097 1605.11 170.5 1614.21 194.934C1623.31 218.888 1625.71 245.238 1621.4 273.983H1354.07V256.736L1581.15 248.831C1584.99 228.23 1583.31 209.067 1576.12 191.341C1569.42 173.614 1558.16 159.721 1542.35 149.66C1526.54 139.12 1508.09 133.85 1487.01 133.85C1463.06 133.85 1441.5 140.797 1422.34 154.691C1403.17 168.584 1388.08 187.747 1377.06 212.181C1366.04 236.135 1360.54 263.682 1360.54 294.823C1360.54 326.921 1367 355.906 1379.94 381.777C1392.87 407.168 1410.6 427.05 1433.12 441.423C1456.11 455.795 1482.22 462.982 1511.45 462.982C1542.11 462.982 1567.98 455.316 1589.06 439.985C1610.62 424.176 1626.91 403.575 1637.93 378.184L1653.02 383.933C1641.04 417.948 1621.88 445.016 1595.53 465.137C1569.18 484.78 1536.84 494.601 1498.51 494.601Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
|
13
|
+
<path d="M1675.81 182.717C1670.54 168.824 1663.59 158.763 1654.97 152.535C1646.83 145.827 1636.53 141.995 1624.07 141.037V125.945H1764.2V141.037C1743.6 141.995 1729.71 145.827 1722.52 152.535C1715.33 159.242 1714.38 169.303 1719.65 182.717L1821.69 445.016L1811.63 448.609L1914.39 181.998C1920.14 168.105 1919.9 158.044 1913.68 151.816C1907.45 145.109 1894.03 141.516 1873.43 141.037V125.945H1981.95V141.037C1971.88 141.995 1963.02 145.827 1955.36 152.535C1947.69 159.242 1941.22 169.542 1935.95 183.436L1814.51 488.852H1798.7L1675.81 182.717Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
|
14
|
+
<path d="M2104.71 494.601C2085.07 494.601 2067.58 490.529 2052.25 482.385C2036.92 473.761 2024.71 462.023 2015.6 447.172C2006.5 432.32 2001.95 415.552 2001.95 396.868C2001.95 373.393 2007.94 353.511 2019.91 337.222C2031.89 320.454 2050.34 306.321 2075.25 294.823C2100.64 283.325 2133.7 273.504 2174.42 265.359L2229.04 254.58V271.108L2175.86 284.762C2129.39 296.26 2095.85 310.633 2075.25 327.88C2055.13 344.648 2045.07 366.686 2045.07 393.993C2045.07 413.636 2052.01 430.164 2065.91 443.579C2080.28 456.514 2098.25 462.982 2119.8 462.982C2140.4 462.982 2158.37 457.233 2173.7 445.734C2189.51 434.236 2203.16 418.187 2214.66 397.586V252.424C2214.66 228.949 2209.87 208.348 2200.29 190.622C2190.71 172.417 2177.77 158.523 2161.48 148.942C2145.2 138.881 2126.99 133.85 2106.87 133.85C2086.27 133.85 2068.54 138.641 2053.69 148.223C2038.84 157.325 2027.58 170.5 2019.91 187.747C2012.25 204.515 2009.14 223.679 2010.57 245.238L1995.48 249.549L1971.05 197.808C1983.5 173.375 2001.71 153.493 2025.66 138.162C2049.62 122.831 2077.64 115.166 2109.74 115.166C2138.49 115.166 2163.88 120.676 2185.92 131.694C2207.96 142.713 2224.96 159.002 2236.94 180.561C2248.92 202.12 2254.91 228.23 2254.91 258.891V424.176C2254.91 438.069 2258.98 448.369 2267.12 455.077C2275.27 461.784 2289.4 466.335 2309.52 468.731V483.822H2214.66V419.864C2202.69 444.297 2186.88 462.982 2167.23 475.917C2148.07 488.373 2127.23 494.601 2104.71 494.601Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
|
15
|
+
<path d="M2560.04 219.367C2560.52 194.455 2555.25 176.01 2544.23 164.033C2533.21 151.576 2516.68 145.348 2494.64 145.348C2474.52 145.348 2455.84 152.774 2438.59 167.626C2421.82 182.477 2409.36 200.922 2401.22 222.96V424.894C2401.22 435.913 2403.85 444.297 2409.12 450.046C2414.87 455.316 2422.78 459.388 2432.84 462.263C2443.38 465.137 2457.75 467.293 2475.96 468.731V483.822H2305.64V468.731C2317.14 466.814 2326.48 464.658 2333.67 462.263C2341.33 459.388 2347.56 455.077 2352.35 449.328C2357.62 443.1 2360.26 434.955 2360.26 424.894V208.588C2360.26 188.945 2356.42 176.489 2348.76 171.219C2341.09 165.949 2326.72 165.709 2305.64 170.5V154.691L2385.41 125.945H2401.22V196.371C2410.8 172.417 2425.17 153.014 2444.34 138.162C2463.5 122.831 2484.82 115.166 2508.29 115.166C2523.63 115.166 2538.72 118.28 2553.57 124.508C2568.42 130.257 2579.68 136.725 2587.34 143.911L2575.13 221.523L2560.04 219.367Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
|
16
|
+
<path d="M2803.96 428.487C2795.81 449.088 2783.84 465.377 2768.03 477.354C2752.22 488.852 2734.73 494.601 2715.57 494.601C2688.74 494.601 2667.9 486.936 2653.05 471.605C2638.68 456.274 2631.49 434.476 2631.49 406.21V144.63H2578.31V126.664C2599.87 122.831 2616.88 113.968 2629.33 100.075C2642.27 86.1814 2650.89 64.6226 2655.2 35.3984H2672.45V125.945L2780.96 114.447L2784.56 144.63H2672.45V401.18C2672.45 422.738 2677 439.267 2686.1 450.765C2695.69 461.784 2709.58 467.293 2727.78 467.293C2738.8 467.293 2749.82 463.461 2760.84 455.795C2771.86 447.651 2780.96 436.153 2788.15 421.301L2803.96 428.487Z" fill="black" style="fill:black;fill-opacity:1;"/>
|
|
17
|
+
</svg>
|
|
File without changes
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("@heroui/react"),n=require("react"),p=require("framer-motion"),v={brand:{primary:"#C14615",secondary:"#000000",accent:"#F59E0B"},semantic:{success:"#10B981",warning:"#F59E0B",error:"#EF4444",info:"#3B82F6"},neutral:{white:"#FFFFFF",black:"#000000",gray:{50:"#F9FAFB",100:"#F3F4F6",200:"#E5E7EB",300:"#D1D5DB",400:"#9CA3AF",500:"#6B7280",600:"#4B5563",700:"#374151",800:"#1F2937",900:"#111827"}}},F={xs:"0.25rem",sm:"0.5rem",md:"1rem",lg:"1.5rem",xl:"2rem","2xl":"3rem","3xl":"4rem","4xl":"6rem","5xl":"8rem"},C={fontFamily:{primary:'"NeueMontreal", system-ui, sans-serif',secondary:'"Scholar", Georgia, serif',sans:'"NeueMontreal", system-ui, sans-serif',serif:'"Scholar", Georgia, serif',mono:'"JetBrains Mono", Consolas, monospace'},fontSize:{xs:"0.75rem",sm:"0.875rem",base:"1rem",lg:"1.125rem",xl:"1.25rem","2xl":"1.5rem","3xl":"1.875rem","4xl":"2.25rem","5xl":"3rem"},fontWeight:{normal:"400",semibold:"600",bold:"700"},lineHeight:{tight:"1.25",normal:"1.5",relaxed:"1.75"}},k={colors:{primary:{50:"#fef5f1",100:"#fde8e0",200:"#fbd5c7",300:"#f7b79f",400:"#f18d68",500:v.brand.primary,600:"#a83b11",700:"#8b2f0e",800:"#73260d",900:"#5f210c",DEFAULT:v.brand.primary},secondary:{50:"#f9fafb",100:"#f3f4f6",200:"#e5e7eb",300:"#d1d5db",400:"#9ca3af",500:v.brand.secondary,600:"#000000",700:"#000000",800:"#000000",900:"#000000",DEFAULT:v.brand.secondary}}};function E({children:r}){return e.jsx(o.HeroUIProvider,{children:r})}function T({color:r="primary",radius:d="full",...i}){return e.jsx(o.Button,{color:r,radius:d,...i})}function B(r){return e.jsx("div",{className:"w-full p-8",children:e.jsx("div",{className:"container mx-auto flex items-center justify-center",children:e.jsx(o.Alert,{description:"This component needs to be implemented using HeroUI Navbar, NavbarBrand, NavbarContent, and NavbarItem components. Include logo, navigation links, language selector dropdown, and authentication state.",title:"TODO: Implement Navbar Pattern",variant:"faded"})})})}var N;const O=typeof document<"u"?(N=n.useInsertionEffect)!==null&&N!==void 0?N:n.useLayoutEffect:()=>{};function S(r,d,i){let[m,b]=n.useState(r||d),u=n.useRef(m),h=n.useRef(r!==void 0),c=r!==void 0;n.useEffect(()=>{let a=h.current;a!==c&&process.env.NODE_ENV!=="production"&&console.warn(`WARN: A component changed from ${a?"controlled":"uncontrolled"} to ${c?"controlled":"uncontrolled"}.`),h.current=c},[c]);let x=c?r:m;O(()=>{u.current=x});let[,g]=n.useReducer(()=>({}),{}),y=n.useCallback((a,...j)=>{let f=typeof a=="function"?a(u.current):a;Object.is(u.current,f)||(u.current=f,b(f),g(),i?.(f,...j))},[i]);return[x,y]}function A(r){return e.jsx("svg",{...r,fill:"none",stroke:"currentColor",strokeWidth:2,viewBox:"0 0 24 24",children:e.jsx(p.m.path,{animate:{pathLength:1},d:"M5 13l4 4L19 7",initial:{pathLength:0},strokeLinecap:"round",strokeLinejoin:"round",transition:{delay:.2,type:"tween",ease:"easeOut",duration:.3}})})}const w=n.forwardRef(({color:r="primary",stepsCount:d=3,defaultStep:i=0,label:m,onStepChange:b,currentStep:u,hideProgressBars:h=!1,stepClassName:c,className:x,...g},y)=>{const[a,j]=S(u,i,b),f=n.useMemo(()=>{let l,t;const s=["[--active-fg-color:hsl(var(--step-fg-color))]","[--active-border-color:hsl(var(--step-color))]","[--active-color:hsl(var(--step-color))]","[--complete-background-color:hsl(var(--step-color))]","[--complete-border-color:hsl(var(--step-color))]","[--inactive-border-color:hsl(var(--heroui-default-300))]","[--inactive-color:hsl(var(--heroui-default-300))]"];switch(r){case"primary":l="[--step-color:var(--heroui-primary)]",t="[--step-fg-color:var(--heroui-primary-foreground)]";break;case"secondary":l="[--step-color:var(--heroui-secondary)]",t="[--step-fg-color:var(--heroui-secondary-foreground)]";break;case"success":l="[--step-color:var(--heroui-success)]",t="[--step-fg-color:var(--heroui-success-foreground)]";break;case"warning":l="[--step-color:var(--heroui-warning)]",t="[--step-fg-color:var(--heroui-warning-foreground)]";break;case"danger":l="[--step-color:var(--heroui-danger)]",t="[--step-fg-color:var(--heroui-danger-foreground)]";break;case"default":l="[--step-color:var(--heroui-default)]",t="[--step-fg-color:var(--heroui-default-foreground)]";break;default:l="[--step-color:var(--heroui-primary)]",t="[--step-fg-color:var(--heroui-primary-foreground)]";break}return s.unshift(t),s.unshift(l),s},[r]);return e.jsxs("nav",{"aria-label":"Progress",className:"flex max-w-fit items-center overflow-x-auto",children:[m&&e.jsx("label",{className:"text-small text-default-foreground lg:text-medium font-light w-full me-3",children:m}),e.jsx("ol",{className:o.cn("flex flex-row flex-nowrap gap-x-3",f,x),children:Array.from({length:d})?.map((l,t)=>{const s=a===t?"active":a<t?"inactive":"complete";return e.jsx("li",{className:"relative flex w-full items-center pr-12",children:e.jsxs("button",{ref:y,"aria-current":s==="active"?"step":void 0,className:o.cn("group rounded-large flex w-full cursor-pointer flex-row items-center justify-center gap-x-3 py-2.5",c),onClick:()=>j(t),...g,children:[e.jsx("div",{className:"h-ful relative flex items-center",children:e.jsx(p.LazyMotion,{features:p.domAnimation,children:e.jsx(p.m.div,{animate:s,className:"relative",children:e.jsx(p.m.div,{animate:s,className:o.cn("border-medium text-large text-default-foreground relative flex h-[26px] w-[26px] items-center justify-center rounded-full font-semibold",{"shadow-lg":s==="complete"}),initial:!1,transition:{duration:.25},variants:{inactive:{backgroundColor:"transparent",borderColor:"var(--inactive-border-color)",color:"var(--inactive-color)"},active:{backgroundColor:"transparent",borderColor:"var(--active-border-color)",color:"var(--active-color)"},complete:{backgroundColor:"var(--complete-background-color)",borderColor:"var(--complete-border-color)",color:"var(--active-fg-color)"}},children:e.jsx("div",{className:"flex items-center justify-center",children:s==="complete"?e.jsx(A,{className:"h-5 w-5 text-(--active-fg-color)"}):e.jsx("span",{})})})})})}),t<d-1&&!h&&e.jsx("div",{"aria-hidden":"true",className:"pointer-events-none absolute inset-x-0 left-[26px] w-[calc(100%-13px)] flex-none items-center",style:{"--idx":t},children:e.jsx("div",{className:o.cn("bg-default-200 relative h-0.5 w-full transition-colors duration-300","after:absolute after:block after:h-full after:w-0 after:bg-(--active-border-color) after:transition-[width] after:duration-300 after:content-['']",{"after:w-full":t<a})})})]},t)},t)})})]})});w.displayName="Stepper";function D(r){return e.jsx("footer",{className:"w-full py-12",children:e.jsx("div",{className:"container mx-auto px-6 flex items-center justify-center",children:e.jsx(o.Alert,{description:"This component needs to be implemented using HeroUI Link components. Include grid layout with link sections, logo, social media icons, and copyright text. Should be responsive and adapt to mobile/desktop.",title:"TODO: Implement Footer Pattern",variant:"faded"})})})}function $(r){return e.jsx("div",{className:"min-h-screen flex flex-col",children:e.jsx("div",{className:"flex-1 flex items-center justify-center p-12",children:e.jsx(o.Alert,{description:"This template combines Navbar, Footer, and a confirmation Card. Include title, message, confirmation number, details list, icon, and action buttons. Use Card for the confirmation content.",title:"TODO: Implement ConfirmationPageTemplate",variant:"faded",className:"max-w-2xl"})})})}function P(r){return e.jsx("div",{className:"min-h-screen flex flex-col",children:e.jsx("div",{className:"flex-1 flex items-center justify-center p-12",children:e.jsx(o.Alert,{description:"This template combines Navbar, Stepper, Footer, and an event details Card. Include event image, category/spots chips, tags, details grid, and action buttons. Use Card, CardHeader, CardBody for content structure.",title:"TODO: Implement EventDetailsTemplate",variant:"faded",className:"max-w-2xl"})})})}exports.Button=T;exports.ConfirmationPageTemplate=$;exports.EventDetailsTemplate=P;exports.Footer=D;exports.HeroUIProvider=E;exports.Navbar=B;exports.Stepper=w;exports.colors=v;exports.spacing=F;exports.theme=k;exports.typography=C;Object.keys(o).forEach(r=>{r!=="default"&&!Object.prototype.hasOwnProperty.call(exports,r)&&Object.defineProperty(exports,r,{enumerable:!0,get:()=>o[r]})});
|
package/dist/index.d.ts
CHANGED
|
@@ -7,8 +7,10 @@ export type { ColorToken } from './tokens';
|
|
|
7
7
|
export { theme } from './theme';
|
|
8
8
|
export type { Theme } from './theme';
|
|
9
9
|
export { HeroUIProvider } from './providers';
|
|
10
|
+
export { Button } from './components';
|
|
11
|
+
export type { ButtonProps } from './components';
|
|
10
12
|
export { Navbar, Stepper, Footer } from './patterns';
|
|
11
|
-
export type { NavbarProps, NavbarLink, NavbarLanguage, StepperProps,
|
|
13
|
+
export type { NavbarProps, NavbarLink, NavbarLanguage, StepperProps, FooterProps, FooterSection, FooterLink, SocialLink, } from './patterns';
|
|
12
14
|
export { ConfirmationPageTemplate, EventDetailsTemplate } from './templates';
|
|
13
15
|
export type { ConfirmationPageTemplateProps, ConfirmationDetails, EventDetailsTemplateProps, EventInfo, } from './templates';
|
|
14
16
|
export * from '@heroui/react';
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { HeroUIProvider as
|
|
1
|
+
import { jsx as e, jsxs as F } from "react/jsx-runtime";
|
|
2
|
+
import { HeroUIProvider as E, Button as B, Alert as g, cn as p } from "@heroui/react";
|
|
3
3
|
export * from "@heroui/react";
|
|
4
|
-
import "react";
|
|
5
|
-
|
|
4
|
+
import h, { useState as $, useRef as C, useEffect as T, useReducer as D, useCallback as S } from "react";
|
|
5
|
+
import { LazyMotion as j, domAnimation as O, m as k } from "framer-motion";
|
|
6
|
+
const v = {
|
|
6
7
|
brand: {
|
|
7
8
|
primary: "#C14615",
|
|
8
9
|
secondary: "#000000",
|
|
@@ -30,11 +31,11 @@ const r = {
|
|
|
30
31
|
900: "#111827"
|
|
31
32
|
}
|
|
32
33
|
}
|
|
33
|
-
},
|
|
34
|
+
}, R = {
|
|
34
35
|
xs: "0.25rem",
|
|
35
|
-
// 4px
|
|
36
|
+
// 4px - Fine control (½ of base unit)
|
|
36
37
|
sm: "0.5rem",
|
|
37
|
-
// 8px
|
|
38
|
+
// 8px - Base unit
|
|
38
39
|
md: "1rem",
|
|
39
40
|
// 16px
|
|
40
41
|
lg: "1.5rem",
|
|
@@ -49,13 +50,13 @@ const r = {
|
|
|
49
50
|
// 96px
|
|
50
51
|
"5xl": "8rem"
|
|
51
52
|
// 128px
|
|
52
|
-
},
|
|
53
|
+
}, V = {
|
|
53
54
|
fontFamily: {
|
|
54
|
-
primary: '"NeueMontreal", sans-serif',
|
|
55
|
-
secondary: '"Scholar", serif',
|
|
56
|
-
sans: '"NeueMontreal", sans-serif',
|
|
57
|
-
serif: '"Scholar", serif',
|
|
58
|
-
mono: "JetBrains Mono, Consolas, monospace
|
|
55
|
+
primary: '"NeueMontreal", system-ui, sans-serif',
|
|
56
|
+
secondary: '"Scholar", Georgia, serif',
|
|
57
|
+
sans: '"NeueMontreal", system-ui, sans-serif',
|
|
58
|
+
serif: '"Scholar", Georgia, serif',
|
|
59
|
+
mono: '"JetBrains Mono", Consolas, monospace'
|
|
59
60
|
},
|
|
60
61
|
fontSize: {
|
|
61
62
|
xs: "0.75rem",
|
|
@@ -78,18 +79,19 @@ const r = {
|
|
|
78
79
|
// 48px
|
|
79
80
|
},
|
|
80
81
|
fontWeight: {
|
|
81
|
-
light: "300",
|
|
82
82
|
normal: "400",
|
|
83
|
-
|
|
83
|
+
// Available for both NeueMontreal and Scholar
|
|
84
84
|
semibold: "600",
|
|
85
|
+
// Available for NeueMontreal only
|
|
85
86
|
bold: "700"
|
|
87
|
+
// Available for NeueMontreal only
|
|
86
88
|
},
|
|
87
89
|
lineHeight: {
|
|
88
90
|
tight: "1.25",
|
|
89
91
|
normal: "1.5",
|
|
90
92
|
relaxed: "1.75"
|
|
91
93
|
}
|
|
92
|
-
},
|
|
94
|
+
}, W = {
|
|
93
95
|
colors: {
|
|
94
96
|
primary: {
|
|
95
97
|
50: "#fef5f1",
|
|
@@ -97,13 +99,13 @@ const r = {
|
|
|
97
99
|
200: "#fbd5c7",
|
|
98
100
|
300: "#f7b79f",
|
|
99
101
|
400: "#f18d68",
|
|
100
|
-
500:
|
|
102
|
+
500: v.brand.primary,
|
|
101
103
|
// #C14615
|
|
102
104
|
600: "#a83b11",
|
|
103
105
|
700: "#8b2f0e",
|
|
104
106
|
800: "#73260d",
|
|
105
107
|
900: "#5f210c",
|
|
106
|
-
DEFAULT:
|
|
108
|
+
DEFAULT: v.brand.primary
|
|
107
109
|
},
|
|
108
110
|
secondary: {
|
|
109
111
|
50: "#f9fafb",
|
|
@@ -111,22 +113,25 @@ const r = {
|
|
|
111
113
|
200: "#e5e7eb",
|
|
112
114
|
300: "#d1d5db",
|
|
113
115
|
400: "#9ca3af",
|
|
114
|
-
500:
|
|
116
|
+
500: v.brand.secondary,
|
|
115
117
|
// #000000
|
|
116
118
|
600: "#000000",
|
|
117
119
|
700: "#000000",
|
|
118
120
|
800: "#000000",
|
|
119
121
|
900: "#000000",
|
|
120
|
-
DEFAULT:
|
|
122
|
+
DEFAULT: v.brand.secondary
|
|
121
123
|
}
|
|
122
124
|
}
|
|
123
125
|
};
|
|
124
|
-
function
|
|
125
|
-
return /* @__PURE__ */ e(
|
|
126
|
+
function z({ children: r }) {
|
|
127
|
+
return /* @__PURE__ */ e(E, { children: r });
|
|
126
128
|
}
|
|
127
|
-
function
|
|
129
|
+
function G({ color: r = "primary", radius: c = "full", ...l }) {
|
|
130
|
+
return /* @__PURE__ */ e(B, { color: r, radius: c, ...l });
|
|
131
|
+
}
|
|
132
|
+
function J(r) {
|
|
128
133
|
return /* @__PURE__ */ e("div", { className: "w-full p-8", children: /* @__PURE__ */ e("div", { className: "container mx-auto flex items-center justify-center", children: /* @__PURE__ */ e(
|
|
129
|
-
|
|
134
|
+
g,
|
|
130
135
|
{
|
|
131
136
|
description: "This component needs to be implemented using HeroUI Navbar, NavbarBrand, NavbarContent, and NavbarItem components. Include logo, navigation links, language selector dropdown, and authentication state.",
|
|
132
137
|
title: "TODO: Implement Navbar Pattern",
|
|
@@ -134,19 +139,183 @@ function p(n) {
|
|
|
134
139
|
}
|
|
135
140
|
) }) });
|
|
136
141
|
}
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
142
|
+
var w;
|
|
143
|
+
const A = typeof document < "u" ? (w = h.useInsertionEffect) !== null && w !== void 0 ? w : h.useLayoutEffect : () => {
|
|
144
|
+
};
|
|
145
|
+
function I(r, c, l) {
|
|
146
|
+
let [f, b] = $(r || c), s = C(f), u = C(r !== void 0), i = r !== void 0;
|
|
147
|
+
T(() => {
|
|
148
|
+
let o = u.current;
|
|
149
|
+
o !== i && process.env.NODE_ENV !== "production" && console.warn(`WARN: A component changed from ${o ? "controlled" : "uncontrolled"} to ${i ? "controlled" : "uncontrolled"}.`), u.current = i;
|
|
150
|
+
}, [
|
|
151
|
+
i
|
|
152
|
+
]);
|
|
153
|
+
let m = i ? r : f;
|
|
154
|
+
A(() => {
|
|
155
|
+
s.current = m;
|
|
156
|
+
});
|
|
157
|
+
let [, x] = D(() => ({}), {}), y = S((o, ...N) => {
|
|
158
|
+
let d = typeof o == "function" ? o(s.current) : o;
|
|
159
|
+
Object.is(s.current, d) || (s.current = d, b(d), x(), l?.(d, ...N));
|
|
160
|
+
}, [
|
|
161
|
+
l
|
|
162
|
+
]);
|
|
163
|
+
return [
|
|
164
|
+
m,
|
|
165
|
+
y
|
|
166
|
+
];
|
|
167
|
+
}
|
|
168
|
+
function L(r) {
|
|
169
|
+
return /* @__PURE__ */ e("svg", { ...r, fill: "none", stroke: "currentColor", strokeWidth: 2, viewBox: "0 0 24 24", children: /* @__PURE__ */ e(
|
|
170
|
+
k.path,
|
|
140
171
|
{
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
172
|
+
animate: { pathLength: 1 },
|
|
173
|
+
d: "M5 13l4 4L19 7",
|
|
174
|
+
initial: { pathLength: 0 },
|
|
175
|
+
strokeLinecap: "round",
|
|
176
|
+
strokeLinejoin: "round",
|
|
177
|
+
transition: {
|
|
178
|
+
delay: 0.2,
|
|
179
|
+
type: "tween",
|
|
180
|
+
ease: "easeOut",
|
|
181
|
+
duration: 0.3
|
|
182
|
+
}
|
|
144
183
|
}
|
|
145
|
-
) })
|
|
184
|
+
) });
|
|
146
185
|
}
|
|
147
|
-
|
|
186
|
+
const U = h.forwardRef(
|
|
187
|
+
({
|
|
188
|
+
color: r = "primary",
|
|
189
|
+
stepsCount: c = 3,
|
|
190
|
+
defaultStep: l = 0,
|
|
191
|
+
label: f,
|
|
192
|
+
onStepChange: b,
|
|
193
|
+
currentStep: s,
|
|
194
|
+
hideProgressBars: u = !1,
|
|
195
|
+
stepClassName: i,
|
|
196
|
+
className: m,
|
|
197
|
+
...x
|
|
198
|
+
}, y) => {
|
|
199
|
+
const [o, N] = I(s, l, b), d = h.useMemo(() => {
|
|
200
|
+
let a, t;
|
|
201
|
+
const n = [
|
|
202
|
+
"[--active-fg-color:hsl(var(--step-fg-color))]",
|
|
203
|
+
"[--active-border-color:hsl(var(--step-color))]",
|
|
204
|
+
"[--active-color:hsl(var(--step-color))]",
|
|
205
|
+
"[--complete-background-color:hsl(var(--step-color))]",
|
|
206
|
+
"[--complete-border-color:hsl(var(--step-color))]",
|
|
207
|
+
"[--inactive-border-color:hsl(var(--heroui-default-300))]",
|
|
208
|
+
"[--inactive-color:hsl(var(--heroui-default-300))]"
|
|
209
|
+
];
|
|
210
|
+
switch (r) {
|
|
211
|
+
case "primary":
|
|
212
|
+
a = "[--step-color:var(--heroui-primary)]", t = "[--step-fg-color:var(--heroui-primary-foreground)]";
|
|
213
|
+
break;
|
|
214
|
+
case "secondary":
|
|
215
|
+
a = "[--step-color:var(--heroui-secondary)]", t = "[--step-fg-color:var(--heroui-secondary-foreground)]";
|
|
216
|
+
break;
|
|
217
|
+
case "success":
|
|
218
|
+
a = "[--step-color:var(--heroui-success)]", t = "[--step-fg-color:var(--heroui-success-foreground)]";
|
|
219
|
+
break;
|
|
220
|
+
case "warning":
|
|
221
|
+
a = "[--step-color:var(--heroui-warning)]", t = "[--step-fg-color:var(--heroui-warning-foreground)]";
|
|
222
|
+
break;
|
|
223
|
+
case "danger":
|
|
224
|
+
a = "[--step-color:var(--heroui-danger)]", t = "[--step-fg-color:var(--heroui-danger-foreground)]";
|
|
225
|
+
break;
|
|
226
|
+
case "default":
|
|
227
|
+
a = "[--step-color:var(--heroui-default)]", t = "[--step-fg-color:var(--heroui-default-foreground)]";
|
|
228
|
+
break;
|
|
229
|
+
default:
|
|
230
|
+
a = "[--step-color:var(--heroui-primary)]", t = "[--step-fg-color:var(--heroui-primary-foreground)]";
|
|
231
|
+
break;
|
|
232
|
+
}
|
|
233
|
+
return n.unshift(t), n.unshift(a), n;
|
|
234
|
+
}, [r]);
|
|
235
|
+
return /* @__PURE__ */ F("nav", { "aria-label": "Progress", className: "flex max-w-fit items-center overflow-x-auto", children: [
|
|
236
|
+
f && /* @__PURE__ */ e("label", { className: "text-small text-default-foreground lg:text-medium font-light w-full me-3", children: f }),
|
|
237
|
+
/* @__PURE__ */ e("ol", { className: p("flex flex-row flex-nowrap gap-x-3", d, m), children: Array.from({ length: c })?.map((a, t) => {
|
|
238
|
+
const n = o === t ? "active" : o < t ? "inactive" : "complete";
|
|
239
|
+
return /* @__PURE__ */ e("li", { className: "relative flex w-full items-center pr-12", children: /* @__PURE__ */ F(
|
|
240
|
+
"button",
|
|
241
|
+
{
|
|
242
|
+
ref: y,
|
|
243
|
+
"aria-current": n === "active" ? "step" : void 0,
|
|
244
|
+
className: p(
|
|
245
|
+
"group rounded-large flex w-full cursor-pointer flex-row items-center justify-center gap-x-3 py-2.5",
|
|
246
|
+
i
|
|
247
|
+
),
|
|
248
|
+
onClick: () => N(t),
|
|
249
|
+
...x,
|
|
250
|
+
children: [
|
|
251
|
+
/* @__PURE__ */ e("div", { className: "h-ful relative flex items-center", children: /* @__PURE__ */ e(j, { features: O, children: /* @__PURE__ */ e(k.div, { animate: n, className: "relative", children: /* @__PURE__ */ e(
|
|
252
|
+
k.div,
|
|
253
|
+
{
|
|
254
|
+
animate: n,
|
|
255
|
+
className: p(
|
|
256
|
+
"border-medium text-large text-default-foreground relative flex h-[26px] w-[26px] items-center justify-center rounded-full font-semibold",
|
|
257
|
+
{
|
|
258
|
+
"shadow-lg": n === "complete"
|
|
259
|
+
}
|
|
260
|
+
),
|
|
261
|
+
initial: !1,
|
|
262
|
+
transition: { duration: 0.25 },
|
|
263
|
+
variants: {
|
|
264
|
+
inactive: {
|
|
265
|
+
backgroundColor: "transparent",
|
|
266
|
+
borderColor: "var(--inactive-border-color)",
|
|
267
|
+
color: "var(--inactive-color)"
|
|
268
|
+
},
|
|
269
|
+
active: {
|
|
270
|
+
backgroundColor: "transparent",
|
|
271
|
+
borderColor: "var(--active-border-color)",
|
|
272
|
+
color: "var(--active-color)"
|
|
273
|
+
},
|
|
274
|
+
complete: {
|
|
275
|
+
backgroundColor: "var(--complete-background-color)",
|
|
276
|
+
borderColor: "var(--complete-border-color)",
|
|
277
|
+
color: "var(--active-fg-color)"
|
|
278
|
+
}
|
|
279
|
+
},
|
|
280
|
+
children: /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: n === "complete" ? /* @__PURE__ */ e(L, { className: "h-5 w-5 text-(--active-fg-color)" }) : /* @__PURE__ */ e("span", {}) })
|
|
281
|
+
}
|
|
282
|
+
) }) }) }),
|
|
283
|
+
t < c - 1 && !u && /* @__PURE__ */ e(
|
|
284
|
+
"div",
|
|
285
|
+
{
|
|
286
|
+
"aria-hidden": "true",
|
|
287
|
+
className: "pointer-events-none absolute inset-x-0 left-[26px] w-[calc(100%-13px)] flex-none items-center",
|
|
288
|
+
style: {
|
|
289
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
290
|
+
// @ts-expect-error
|
|
291
|
+
"--idx": t
|
|
292
|
+
},
|
|
293
|
+
children: /* @__PURE__ */ e(
|
|
294
|
+
"div",
|
|
295
|
+
{
|
|
296
|
+
className: p(
|
|
297
|
+
"bg-default-200 relative h-0.5 w-full transition-colors duration-300",
|
|
298
|
+
"after:absolute after:block after:h-full after:w-0 after:bg-(--active-border-color) after:transition-[width] after:duration-300 after:content-['']",
|
|
299
|
+
{
|
|
300
|
+
"after:w-full": t < o
|
|
301
|
+
}
|
|
302
|
+
)
|
|
303
|
+
}
|
|
304
|
+
)
|
|
305
|
+
}
|
|
306
|
+
)
|
|
307
|
+
]
|
|
308
|
+
},
|
|
309
|
+
t
|
|
310
|
+
) }, t);
|
|
311
|
+
}) })
|
|
312
|
+
] });
|
|
313
|
+
}
|
|
314
|
+
);
|
|
315
|
+
U.displayName = "Stepper";
|
|
316
|
+
function q(r) {
|
|
148
317
|
return /* @__PURE__ */ e("footer", { className: "w-full py-12", children: /* @__PURE__ */ e("div", { className: "container mx-auto px-6 flex items-center justify-center", children: /* @__PURE__ */ e(
|
|
149
|
-
|
|
318
|
+
g,
|
|
150
319
|
{
|
|
151
320
|
description: "This component needs to be implemented using HeroUI Link components. Include grid layout with link sections, logo, social media icons, and copyright text. Should be responsive and adapt to mobile/desktop.",
|
|
152
321
|
title: "TODO: Implement Footer Pattern",
|
|
@@ -154,9 +323,9 @@ function u(n) {
|
|
|
154
323
|
}
|
|
155
324
|
) }) });
|
|
156
325
|
}
|
|
157
|
-
function
|
|
326
|
+
function K(r) {
|
|
158
327
|
return /* @__PURE__ */ e("div", { className: "min-h-screen flex flex-col", children: /* @__PURE__ */ e("div", { className: "flex-1 flex items-center justify-center p-12", children: /* @__PURE__ */ e(
|
|
159
|
-
|
|
328
|
+
g,
|
|
160
329
|
{
|
|
161
330
|
description: "This template combines Navbar, Footer, and a confirmation Card. Include title, message, confirmation number, details list, icon, and action buttons. Use Card for the confirmation content.",
|
|
162
331
|
title: "TODO: Implement ConfirmationPageTemplate",
|
|
@@ -165,9 +334,9 @@ function b(n) {
|
|
|
165
334
|
}
|
|
166
335
|
) }) });
|
|
167
336
|
}
|
|
168
|
-
function
|
|
337
|
+
function Q(r) {
|
|
169
338
|
return /* @__PURE__ */ e("div", { className: "min-h-screen flex flex-col", children: /* @__PURE__ */ e("div", { className: "flex-1 flex items-center justify-center p-12", children: /* @__PURE__ */ e(
|
|
170
|
-
|
|
339
|
+
g,
|
|
171
340
|
{
|
|
172
341
|
description: "This template combines Navbar, Stepper, Footer, and an event details Card. Include event image, category/spots chips, tags, details grid, and action buttons. Use Card, CardHeader, CardBody for content structure.",
|
|
173
342
|
title: "TODO: Implement EventDetailsTemplate",
|
|
@@ -177,14 +346,15 @@ function x(n) {
|
|
|
177
346
|
) }) });
|
|
178
347
|
}
|
|
179
348
|
export {
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
349
|
+
G as Button,
|
|
350
|
+
K as ConfirmationPageTemplate,
|
|
351
|
+
Q as EventDetailsTemplate,
|
|
352
|
+
q as Footer,
|
|
353
|
+
z as HeroUIProvider,
|
|
354
|
+
J as Navbar,
|
|
355
|
+
U as Stepper,
|
|
356
|
+
v as colors,
|
|
357
|
+
R as spacing,
|
|
358
|
+
W as theme,
|
|
359
|
+
V as typography
|
|
190
360
|
};
|
|
@@ -1,28 +1,209 @@
|
|
|
1
|
+
import { ButtonProps } from '@heroui/react';
|
|
2
|
+
import { default as React } from 'react';
|
|
1
3
|
/**
|
|
2
|
-
* Stepper
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* - Visual step indicators (completed, current, upcoming)
|
|
7
|
-
* - Horizontal and vertical orientation
|
|
8
|
-
* - Connecting lines between steps
|
|
9
|
-
* - Clickable steps (optional)
|
|
10
|
-
* - States: completed (green), current (blue), upcoming (gray)
|
|
11
|
-
* - Show number or checkmark based on state
|
|
12
|
-
* - Externally controlled state via props
|
|
13
|
-
* - No business logic
|
|
14
|
-
* - Strict TypeScript
|
|
4
|
+
* Props for the Stepper component
|
|
5
|
+
*
|
|
6
|
+
* @interface StepperProps
|
|
7
|
+
* @extends {React.HTMLAttributes<HTMLButtonElement>}
|
|
15
8
|
*/
|
|
16
|
-
export interface
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
9
|
+
export interface StepperProps extends React.HTMLAttributes<HTMLButtonElement> {
|
|
10
|
+
/**
|
|
11
|
+
* Optional label displayed before the stepper to provide context.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* <Stepper label="Step 2 of 4" stepsCount={4} />
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
label?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Total number of steps in the sequence.
|
|
21
|
+
*
|
|
22
|
+
* @default 3
|
|
23
|
+
* @minimum 1
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* ```tsx
|
|
27
|
+
* <Stepper stepsCount={5} /> // Creates 5 steps
|
|
28
|
+
* ```
|
|
29
|
+
*/
|
|
30
|
+
stepsCount?: number;
|
|
31
|
+
/**
|
|
32
|
+
* The color theme for the stepper.
|
|
33
|
+
* Applies to active and completed steps.
|
|
34
|
+
*
|
|
35
|
+
* @default "primary"
|
|
36
|
+
*
|
|
37
|
+
* @example
|
|
38
|
+
* ```tsx
|
|
39
|
+
* <Stepper color="success" stepsCount={3} />
|
|
40
|
+
* ```
|
|
41
|
+
*/
|
|
42
|
+
color?: ButtonProps['color'];
|
|
43
|
+
/**
|
|
44
|
+
* The current active step index (zero-based).
|
|
45
|
+
* Use this prop for controlled mode.
|
|
46
|
+
*
|
|
47
|
+
* @controlled
|
|
48
|
+
*
|
|
49
|
+
* @example
|
|
50
|
+
* ```tsx
|
|
51
|
+
* const [step, setStep] = useState(0);
|
|
52
|
+
* <Stepper currentStep={step} onStepChange={setStep} />
|
|
53
|
+
* ```
|
|
54
|
+
*/
|
|
55
|
+
currentStep?: number;
|
|
56
|
+
/**
|
|
57
|
+
* The initial step index for uncontrolled mode.
|
|
58
|
+
*
|
|
59
|
+
* @default 0
|
|
60
|
+
* @uncontrolled
|
|
61
|
+
*
|
|
62
|
+
* @example
|
|
63
|
+
* ```tsx
|
|
64
|
+
* <Stepper defaultStep={2} stepsCount={5} />
|
|
65
|
+
* ```
|
|
66
|
+
*/
|
|
67
|
+
defaultStep?: number;
|
|
68
|
+
/**
|
|
69
|
+
* Whether to hide the connecting lines between steps.
|
|
70
|
+
*
|
|
71
|
+
* @default false
|
|
72
|
+
*
|
|
73
|
+
* @example
|
|
74
|
+
* ```tsx
|
|
75
|
+
* <Stepper hideProgressBars stepsCount={4} /> // No progress bars
|
|
76
|
+
* ```
|
|
77
|
+
*/
|
|
78
|
+
hideProgressBars?: boolean;
|
|
79
|
+
/**
|
|
80
|
+
* Custom CSS class for the stepper wrapper (ol element).
|
|
81
|
+
*
|
|
82
|
+
* @example
|
|
83
|
+
* ```tsx
|
|
84
|
+
* <Stepper className="gap-x-6" stepsCount={3} />
|
|
85
|
+
* ```
|
|
86
|
+
*/
|
|
87
|
+
className?: string;
|
|
88
|
+
/**
|
|
89
|
+
* Custom CSS class applied to each individual step button.
|
|
90
|
+
*
|
|
91
|
+
* @example
|
|
92
|
+
* ```tsx
|
|
93
|
+
* <Stepper
|
|
94
|
+
* stepClassName="hover:bg-gray-100"
|
|
95
|
+
* stepsCount={3}
|
|
96
|
+
* />
|
|
97
|
+
* ```
|
|
98
|
+
*/
|
|
99
|
+
stepClassName?: string;
|
|
100
|
+
/**
|
|
101
|
+
* Callback fired when the active step changes.
|
|
102
|
+
* Used in controlled mode.
|
|
103
|
+
*
|
|
104
|
+
* @param stepIndex - The new step index (zero-based)
|
|
105
|
+
*
|
|
106
|
+
* @example
|
|
107
|
+
* ```tsx
|
|
108
|
+
* <Stepper
|
|
109
|
+
* onStepChange={(index) => console.log('Step:', index)}
|
|
110
|
+
* stepsCount={4}
|
|
111
|
+
* />
|
|
112
|
+
* ```
|
|
113
|
+
*/
|
|
114
|
+
onStepChange?: (stepIndex: number) => void;
|
|
27
115
|
}
|
|
28
|
-
|
|
116
|
+
/**
|
|
117
|
+
* Stepper - A horizontal progress indicator for multi-step processes.
|
|
118
|
+
*
|
|
119
|
+
* @description
|
|
120
|
+
* The Stepper component displays a sequence of numbered steps that indicate progress
|
|
121
|
+
* through a multi-step workflow. Each step can be clicked to navigate between steps,
|
|
122
|
+
* and completed steps are marked with a checkmark.
|
|
123
|
+
*
|
|
124
|
+
* @component
|
|
125
|
+
*
|
|
126
|
+
* @features
|
|
127
|
+
* - **Three step states**: inactive (upcoming), active (current), complete (finished)
|
|
128
|
+
* - **Interactive navigation**: Click any step to jump to it
|
|
129
|
+
* - **Animated transitions**: Smooth color and checkmark animations
|
|
130
|
+
* - **Progress indicators**: Optional connecting lines show completion progress
|
|
131
|
+
* - **Controlled & uncontrolled**: Works in both modes
|
|
132
|
+
* - **Customizable colors**: Supports all HeroUI color variants
|
|
133
|
+
* - **Accessible**: Full ARIA support and keyboard navigation
|
|
134
|
+
*
|
|
135
|
+
* @accessibility
|
|
136
|
+
* - Uses semantic HTML (`<nav>`, `<ol>`, `<li>`)
|
|
137
|
+
* - Includes `aria-label="Progress"` on navigation
|
|
138
|
+
* - Active step marked with `aria-current="step"`
|
|
139
|
+
* - All steps are keyboard accessible via tab navigation
|
|
140
|
+
*
|
|
141
|
+
* @performance
|
|
142
|
+
* - Lazy loads Framer Motion animations
|
|
143
|
+
* - Memoizes color calculations
|
|
144
|
+
* - Uses CSS variables for theming
|
|
145
|
+
*
|
|
146
|
+
* @example
|
|
147
|
+
* **Basic uncontrolled stepper**
|
|
148
|
+
* ```tsx
|
|
149
|
+
* <Stepper stepsCount={4} defaultStep={0} />
|
|
150
|
+
* ```
|
|
151
|
+
*
|
|
152
|
+
* @example
|
|
153
|
+
* **Controlled stepper with callback**
|
|
154
|
+
* ```tsx
|
|
155
|
+
* function MyForm() {
|
|
156
|
+
* const [currentStep, setCurrentStep] = useState(0);
|
|
157
|
+
*
|
|
158
|
+
* return (
|
|
159
|
+
* <Stepper
|
|
160
|
+
* currentStep={currentStep}
|
|
161
|
+
* onStepChange={setCurrentStep}
|
|
162
|
+
* stepsCount={4}
|
|
163
|
+
* color="primary"
|
|
164
|
+
* label={`Step ${currentStep + 1} of 4`}
|
|
165
|
+
* />
|
|
166
|
+
* );
|
|
167
|
+
* }
|
|
168
|
+
* ```
|
|
169
|
+
*
|
|
170
|
+
* @example
|
|
171
|
+
* **With validation (prevent forward navigation)**
|
|
172
|
+
* ```tsx
|
|
173
|
+
* function ValidatedStepper() {
|
|
174
|
+
* const [step, setStep] = useState(0);
|
|
175
|
+
* const [completed, setCompleted] = useState<number[]>([]);
|
|
176
|
+
*
|
|
177
|
+
* const handleStepChange = (newStep: number) => {
|
|
178
|
+
* // Only allow navigation to completed steps or current step
|
|
179
|
+
* if (newStep <= step || completed.includes(newStep)) {
|
|
180
|
+
* setStep(newStep);
|
|
181
|
+
* }
|
|
182
|
+
* };
|
|
183
|
+
*
|
|
184
|
+
* return (
|
|
185
|
+
* <Stepper
|
|
186
|
+
* currentStep={step}
|
|
187
|
+
* onStepChange={handleStepChange}
|
|
188
|
+
* stepsCount={5}
|
|
189
|
+
* />
|
|
190
|
+
* );
|
|
191
|
+
* }
|
|
192
|
+
* ```
|
|
193
|
+
*
|
|
194
|
+
* @example
|
|
195
|
+
* **Custom styling**
|
|
196
|
+
* ```tsx
|
|
197
|
+
* <Stepper
|
|
198
|
+
* stepsCount={3}
|
|
199
|
+
* color="success"
|
|
200
|
+
* className="gap-x-8"
|
|
201
|
+
* stepClassName="hover:bg-gray-50 rounded-xl"
|
|
202
|
+
* hideProgressBars
|
|
203
|
+
* />
|
|
204
|
+
* ```
|
|
205
|
+
*
|
|
206
|
+
* @see {@link StepperProps} for all available props
|
|
207
|
+
* @see {@link https://storybook.heroui.com Storybook} for interactive examples
|
|
208
|
+
*/
|
|
209
|
+
export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function FormExampleStepper(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function ValidationStepper(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { Stepper } from './Stepper';
|
|
2
|
-
export type { StepperProps
|
|
2
|
+
export type { StepperProps } from './Stepper';
|
package/dist/patterns/index.d.ts
CHANGED
|
@@ -2,5 +2,5 @@ export { Navbar } from './Navbar';
|
|
|
2
2
|
export { Stepper } from './Stepper';
|
|
3
3
|
export { Footer } from './Footer';
|
|
4
4
|
export type { NavbarProps, NavbarLink, NavbarLanguage } from './Navbar';
|
|
5
|
-
export type { StepperProps
|
|
5
|
+
export type { StepperProps } from './Stepper';
|
|
6
6
|
export type { FooterProps, FooterSection, FooterLink, SocialLink } from './Footer';
|
package/dist/tokens/spacing.d.ts
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Spacing tokens for the Design System
|
|
3
|
-
* Based on 8px grid system
|
|
3
|
+
* Based on 8px grid system (with xs at 4px for fine-grained control)
|
|
4
|
+
*
|
|
5
|
+
* The xs token (4px) provides half-step spacing for precise adjustments,
|
|
6
|
+
* while all other tokens follow strict 8px multiples.
|
|
4
7
|
*/
|
|
5
8
|
export declare const spacing: {
|
|
6
9
|
readonly xs: "0.25rem";
|
|
@@ -1,13 +1,19 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Typography tokens for the Design System
|
|
3
|
+
*
|
|
4
|
+
* Custom Fonts (loaded via @font-face in src/index.css):
|
|
5
|
+
* - NeueMontreal: Primary UI font (Regular 400, SemiBold 600, Bold 700, Italic variants)
|
|
6
|
+
* - Scholar: Secondary serif font for headings (Regular 400, Italic)
|
|
7
|
+
*
|
|
8
|
+
* Font files are located in public/fonts/
|
|
3
9
|
*/
|
|
4
10
|
export declare const typography: {
|
|
5
11
|
readonly fontFamily: {
|
|
6
|
-
readonly primary: "\"NeueMontreal\", sans-serif";
|
|
7
|
-
readonly secondary: "\"Scholar\", serif";
|
|
8
|
-
readonly sans: "\"NeueMontreal\", sans-serif";
|
|
9
|
-
readonly serif: "\"Scholar\", serif";
|
|
10
|
-
readonly mono: "JetBrains Mono, Consolas, monospace";
|
|
12
|
+
readonly primary: "\"NeueMontreal\", system-ui, sans-serif";
|
|
13
|
+
readonly secondary: "\"Scholar\", Georgia, serif";
|
|
14
|
+
readonly sans: "\"NeueMontreal\", system-ui, sans-serif";
|
|
15
|
+
readonly serif: "\"Scholar\", Georgia, serif";
|
|
16
|
+
readonly mono: "\"JetBrains Mono\", Consolas, monospace";
|
|
11
17
|
};
|
|
12
18
|
readonly fontSize: {
|
|
13
19
|
readonly xs: "0.75rem";
|
|
@@ -21,9 +27,7 @@ export declare const typography: {
|
|
|
21
27
|
readonly '5xl': "3rem";
|
|
22
28
|
};
|
|
23
29
|
readonly fontWeight: {
|
|
24
|
-
readonly light: "300";
|
|
25
30
|
readonly normal: "400";
|
|
26
|
-
readonly medium: "500";
|
|
27
31
|
readonly semibold: "600";
|
|
28
32
|
readonly bold: "700";
|
|
29
33
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@veevarts/design-system",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.17",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -14,8 +14,15 @@
|
|
|
14
14
|
"build": "vite build",
|
|
15
15
|
"lint": "eslint .",
|
|
16
16
|
"preview": "vite preview",
|
|
17
|
+
"test": "vitest --run",
|
|
18
|
+
"test:watch": "vitest",
|
|
19
|
+
"test:unit": "vitest --project unit --run",
|
|
20
|
+
"test:unit:watch": "vitest --project unit",
|
|
21
|
+
"test:ui": "vitest --ui",
|
|
22
|
+
"test:coverage": "vitest --coverage --run",
|
|
17
23
|
"storybook": "storybook dev -p 6006",
|
|
18
|
-
"build-storybook": "storybook build"
|
|
24
|
+
"build-storybook": "storybook build",
|
|
25
|
+
"deploy-storybook": "npm run build-storybook && npx vercel storybook-static --prod"
|
|
19
26
|
},
|
|
20
27
|
"peerDependencies": {
|
|
21
28
|
"@heroui/react": ">=2.7.0",
|
|
@@ -24,21 +31,21 @@
|
|
|
24
31
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
25
32
|
},
|
|
26
33
|
"dependencies": {
|
|
27
|
-
"vite-plugin-
|
|
28
|
-
"vite-plugin-
|
|
34
|
+
"vite-plugin-css-injected-by-js": "latest",
|
|
35
|
+
"vite-plugin-dts": "latest"
|
|
29
36
|
},
|
|
30
37
|
"devDependencies": {
|
|
31
|
-
"@heroui/react": "^2.8.7",
|
|
32
|
-
"framer-motion": "^11.15.0",
|
|
33
|
-
"react": "19.2.3",
|
|
34
|
-
"react-dom": "19.2.3",
|
|
35
38
|
"@chromatic-com/storybook": "^4.1.3",
|
|
36
39
|
"@eslint/js": "^9.39.1",
|
|
40
|
+
"@heroui/react": "^2.8.7",
|
|
37
41
|
"@storybook/addon-a11y": "^10.0.8",
|
|
38
42
|
"@storybook/addon-docs": "^10.0.8",
|
|
39
43
|
"@storybook/addon-onboarding": "^10.0.8",
|
|
40
44
|
"@storybook/addon-vitest": "^10.0.8",
|
|
41
45
|
"@storybook/react-vite": "^10.0.8",
|
|
46
|
+
"@testing-library/jest-dom": "^6.9.1",
|
|
47
|
+
"@testing-library/react": "^16.3.1",
|
|
48
|
+
"@testing-library/user-event": "^14.6.1",
|
|
42
49
|
"@types/node": "^24.10.1",
|
|
43
50
|
"@types/react": "^19.2.5",
|
|
44
51
|
"@types/react-dom": "^19.2.3",
|
|
@@ -50,9 +57,13 @@
|
|
|
50
57
|
"eslint-plugin-react-hooks": "^7.0.1",
|
|
51
58
|
"eslint-plugin-react-refresh": "^0.4.24",
|
|
52
59
|
"eslint-plugin-storybook": "^10.0.8",
|
|
60
|
+
"framer-motion": "^11.15.0",
|
|
53
61
|
"globals": "^16.5.0",
|
|
62
|
+
"jsdom": "^27.4.0",
|
|
54
63
|
"playwright": "^1.56.1",
|
|
55
64
|
"postcss": "^8.5.6",
|
|
65
|
+
"react": "19.2.3",
|
|
66
|
+
"react-dom": "19.2.3",
|
|
56
67
|
"storybook": "^10.0.8",
|
|
57
68
|
"tailwindcss": "^3.4.19",
|
|
58
69
|
"typescript": "~5.9.3",
|