@veevarts/design-system 0.1.15 → 0.1.16
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/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.js +10 -9
- package/dist/tokens/spacing.d.ts +4 -1
- package/dist/tokens/typography.d.ts +11 -7
- package/package.json +3 -2
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"),r=require("@heroui/react");require("react");const n={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"}}},a={xs:"0.25rem",sm:"0.5rem",md:"1rem",lg:"1.5rem",xl:"2rem","2xl":"3rem","3xl":"4rem","4xl":"6rem","5xl":"8rem"},i={fontFamily:{primary:'"NeueMontreal", sans-serif',secondary:'"Scholar", serif',sans:'"NeueMontreal", sans-serif',serif:'"Scholar", serif',mono:"JetBrains Mono, Consolas, monospace
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("@heroui/react");require("react");const n={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"}}},a={xs:"0.25rem",sm:"0.5rem",md:"1rem",lg:"1.5rem",xl:"2rem","2xl":"3rem","3xl":"4rem","4xl":"6rem","5xl":"8rem"},i={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"}},o={colors:{primary:{50:"#fef5f1",100:"#fde8e0",200:"#fbd5c7",300:"#f7b79f",400:"#f18d68",500:n.brand.primary,600:"#a83b11",700:"#8b2f0e",800:"#73260d",900:"#5f210c",DEFAULT:n.brand.primary},secondary:{50:"#f9fafb",100:"#f3f4f6",200:"#e5e7eb",300:"#d1d5db",400:"#9ca3af",500:n.brand.secondary,600:"#000000",700:"#000000",800:"#000000",900:"#000000",DEFAULT:n.brand.secondary}}};function s({children:t}){return e.jsx(r.HeroUIProvider,{children:t})}function l(t){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(r.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"})})})}function c(t){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(r.Alert,{description:"This component needs to be implemented with visual step indicators, connecting lines, and support for both horizontal and vertical orientations. Include completed (green), current (blue), and upcoming (gray) states.",title:"TODO: Implement Stepper Pattern",variant:"faded"})})})}function m(t){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(r.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 d(t){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(r.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(t){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(r.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.ConfirmationPageTemplate=d;exports.EventDetailsTemplate=p;exports.Footer=m;exports.HeroUIProvider=s;exports.Navbar=l;exports.Stepper=c;exports.colors=n;exports.spacing=a;exports.theme=o;exports.typography=i;Object.keys(r).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:()=>r[t]})});
|
package/dist/index.js
CHANGED
|
@@ -32,9 +32,9 @@ const r = {
|
|
|
32
32
|
}
|
|
33
33
|
}, l = {
|
|
34
34
|
xs: "0.25rem",
|
|
35
|
-
// 4px
|
|
35
|
+
// 4px - Fine control (½ of base unit)
|
|
36
36
|
sm: "0.5rem",
|
|
37
|
-
// 8px
|
|
37
|
+
// 8px - Base unit
|
|
38
38
|
md: "1rem",
|
|
39
39
|
// 16px
|
|
40
40
|
lg: "1.5rem",
|
|
@@ -51,11 +51,11 @@ const r = {
|
|
|
51
51
|
// 128px
|
|
52
52
|
}, c = {
|
|
53
53
|
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
|
|
54
|
+
primary: '"NeueMontreal", system-ui, sans-serif',
|
|
55
|
+
secondary: '"Scholar", Georgia, serif',
|
|
56
|
+
sans: '"NeueMontreal", system-ui, sans-serif',
|
|
57
|
+
serif: '"Scholar", Georgia, serif',
|
|
58
|
+
mono: '"JetBrains Mono", Consolas, monospace'
|
|
59
59
|
},
|
|
60
60
|
fontSize: {
|
|
61
61
|
xs: "0.75rem",
|
|
@@ -78,11 +78,12 @@ const r = {
|
|
|
78
78
|
// 48px
|
|
79
79
|
},
|
|
80
80
|
fontWeight: {
|
|
81
|
-
light: "300",
|
|
82
81
|
normal: "400",
|
|
83
|
-
|
|
82
|
+
// Available for both NeueMontreal and Scholar
|
|
84
83
|
semibold: "600",
|
|
84
|
+
// Available for NeueMontreal only
|
|
85
85
|
bold: "700"
|
|
86
|
+
// Available for NeueMontreal only
|
|
86
87
|
},
|
|
87
88
|
lineHeight: {
|
|
88
89
|
tight: "1.25",
|
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.16",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -15,7 +15,8 @@
|
|
|
15
15
|
"lint": "eslint .",
|
|
16
16
|
"preview": "vite preview",
|
|
17
17
|
"storybook": "storybook dev -p 6006",
|
|
18
|
-
"build-storybook": "storybook build"
|
|
18
|
+
"build-storybook": "storybook build",
|
|
19
|
+
"deploy-storybook": "npm run build-storybook && npx vercel storybook-static --prod"
|
|
19
20
|
},
|
|
20
21
|
"peerDependencies": {
|
|
21
22
|
"@heroui/react": ">=2.7.0",
|