@youngonesworks/ui 0.1.23 → 0.1.24
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 -13
- package/dist/index.cjs +154 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +148 -1
- package/dist/index.js.map +1 -1
- package/dist/styles/index.d.ts +9 -0
- package/dist/styles/utilities.css +200 -0
- package/dist/styles/variables.css +228 -0
- package/dist/theme/fonts.d.ts +29 -0
- package/dist/theme/index.d.ts +5 -0
- package/dist/theme/variables.d.ts +62 -0
- package/package.json +15 -5
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Custom Utilities
|
|
3
|
+
* Additional utility classes for the YoungOnes B2B Dashboard
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
/* Custom utilities */
|
|
7
|
+
@utility transition-max-height {
|
|
8
|
+
transition: max-height 0.3s ease-in-out;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@layer utilities {
|
|
12
|
+
/* Animation utility classes */
|
|
13
|
+
.animate-spin-slow {
|
|
14
|
+
animation: spin 2s linear infinite;
|
|
15
|
+
}
|
|
16
|
+
.animate-spin-once {
|
|
17
|
+
animation: spin 2s linear forwards;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/* Duration utility classes */
|
|
21
|
+
.duration-sidebar {
|
|
22
|
+
transition-duration: var(--transition-duration-sidebar);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.duration-1000 {
|
|
26
|
+
transition-duration: 1000ms;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.duration-700 {
|
|
30
|
+
transition-duration: 700ms;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* Gradient background utility classes */
|
|
34
|
+
.bg-linear-gradient-y {
|
|
35
|
+
background-image: var(--color-linear-gradient-y);
|
|
36
|
+
}
|
|
37
|
+
.bg-linear-gradient-x {
|
|
38
|
+
background-image: var(--color-linear-gradient-x);
|
|
39
|
+
}
|
|
40
|
+
.bg-gradient-blue-green-y {
|
|
41
|
+
background-image: var(--color-gradient-blue-green-y);
|
|
42
|
+
}
|
|
43
|
+
.bg-gradient-blue-green-x {
|
|
44
|
+
background-image: var(--color-gradient-blue-green-x);
|
|
45
|
+
}
|
|
46
|
+
.bg-gradient-calendar {
|
|
47
|
+
background-image: var(--color-gradient-calendar);
|
|
48
|
+
}
|
|
49
|
+
.hover\:bg-gradient-calendar:hover {
|
|
50
|
+
background-image: var(--color-gradient-calendar);
|
|
51
|
+
}
|
|
52
|
+
@media (min-width: 768px) {
|
|
53
|
+
.md\:hover\:bg-gradient-calendar:hover {
|
|
54
|
+
background-image: var(--color-gradient-calendar);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
.bg-nav-gradient {
|
|
58
|
+
background-image: var(--color-nav-gradient);
|
|
59
|
+
}
|
|
60
|
+
.bg-nav-gradient-mobile {
|
|
61
|
+
background-image: var(--color-nav-gradient-mobile);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* Toast notification colors */
|
|
65
|
+
:root {
|
|
66
|
+
--toastify-color-info: #2a67f6;
|
|
67
|
+
--toastify-color-success: #10d1bb;
|
|
68
|
+
--toastify-color-warning: #f8ec5b;
|
|
69
|
+
--toastify-color-error: #ed3f55;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* Base element styles */
|
|
73
|
+
* {
|
|
74
|
+
box-sizing: inherit;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
html {
|
|
78
|
+
box-sizing: border-box;
|
|
79
|
+
-ms-overflow-style: scrollbar;
|
|
80
|
+
-webkit-tap-highlight-color: rgba(#000, 0);
|
|
81
|
+
font-family: "Gotham", sans-serif;
|
|
82
|
+
@reference min-h-screen;
|
|
83
|
+
@reference overflow-y-scroll;
|
|
84
|
+
@reference text-base;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
body {
|
|
88
|
+
@reference m-0;
|
|
89
|
+
@reference bg-ultra-light-blue;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/* Focus styles */
|
|
93
|
+
button:focus-visible {
|
|
94
|
+
@reference focus:outline-hidden;
|
|
95
|
+
@reference focus:ring-2;
|
|
96
|
+
@reference focus:ring-offset-2;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
/* Link styles */
|
|
100
|
+
a {
|
|
101
|
+
font-size: 0.75rem;
|
|
102
|
+
font-weight: 500;
|
|
103
|
+
color: var(--color-accent-blue);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
a:hover {
|
|
107
|
+
text-decoration: underline;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
/* Base layer styles */
|
|
111
|
+
@layer base {
|
|
112
|
+
button:not(:disabled),
|
|
113
|
+
[role="button"]:not(:disabled) {
|
|
114
|
+
cursor: pointer;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/* Heading styles */
|
|
119
|
+
h1,
|
|
120
|
+
h2,
|
|
121
|
+
h3,
|
|
122
|
+
h4,
|
|
123
|
+
h5,
|
|
124
|
+
h6 {
|
|
125
|
+
@reference m-0;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
/* Editor styles */
|
|
129
|
+
.is-editor-empty:first-of-type::before {
|
|
130
|
+
@reference text-gray-800;
|
|
131
|
+
color: #333333 !important;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
/* List styles */
|
|
135
|
+
ul {
|
|
136
|
+
@reference list-disc;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
ol {
|
|
140
|
+
@reference list-decimal;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* Table animations */
|
|
145
|
+
.table-animation-exit {
|
|
146
|
+
opacity: 1;
|
|
147
|
+
transition: opacity 300ms ease-out;
|
|
148
|
+
}
|
|
149
|
+
.table-animation-exit-active {
|
|
150
|
+
opacity: 0;
|
|
151
|
+
transition: opacity 300ms ease-out;
|
|
152
|
+
}
|
|
153
|
+
.table-animation-enter {
|
|
154
|
+
opacity: 0;
|
|
155
|
+
transition: opacity 300ms ease-in;
|
|
156
|
+
}
|
|
157
|
+
.table-animation-enter-active {
|
|
158
|
+
opacity: 1;
|
|
159
|
+
transition: opacity 300ms ease-in;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/* Spin animation keyframes */
|
|
163
|
+
@keyframes spin {
|
|
164
|
+
from {
|
|
165
|
+
transform: rotate(0deg);
|
|
166
|
+
}
|
|
167
|
+
to {
|
|
168
|
+
transform: rotate(360deg);
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/* Loader component */
|
|
173
|
+
.loader {
|
|
174
|
+
border: 4px solid rgba(0, 0, 0, 0.1);
|
|
175
|
+
border-left-color: #00c6b9;
|
|
176
|
+
border-radius: 50%;
|
|
177
|
+
width: 40px;
|
|
178
|
+
height: 40px;
|
|
179
|
+
animation: spin 1.5s linear infinite;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
/* Gig description component */
|
|
183
|
+
.gig-description {
|
|
184
|
+
ul {
|
|
185
|
+
margin-left: 40px;
|
|
186
|
+
margin-bottom: 20px;
|
|
187
|
+
margin-top: 10px;
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
/* Telephone input component */
|
|
192
|
+
.react-tel-input,
|
|
193
|
+
.react-tel-input input {
|
|
194
|
+
width: 100% !important;
|
|
195
|
+
height: 40px !important;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.react-tel-input input {
|
|
199
|
+
background-color: #f8f8f8 !important;
|
|
200
|
+
}
|
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Theme Variables
|
|
3
|
+
* Design tokens for the YoungOnes B2B Dashboard
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
@theme {
|
|
7
|
+
/* Base colors */
|
|
8
|
+
--color-primary: #10d1bb;
|
|
9
|
+
--color-black: #1b1c1e;
|
|
10
|
+
--color-navy-blue: #000440;
|
|
11
|
+
--color-light-blue: #26295c;
|
|
12
|
+
--color-white: #ffffff;
|
|
13
|
+
--color-ultra-light-blue: #fafcff;
|
|
14
|
+
--color-ultra-light-gray: #fbfbfb;
|
|
15
|
+
|
|
16
|
+
/* Functional colors */
|
|
17
|
+
--color-light-blue-disabled: #bdbeca;
|
|
18
|
+
--color-green: #1d9856;
|
|
19
|
+
--color-green-light: #ecfdf3;
|
|
20
|
+
--color-pink: #e2237a;
|
|
21
|
+
--color-pink-light: #fce9f2;
|
|
22
|
+
--color-purple: #420089;
|
|
23
|
+
--color-purple-light: #f2e6ff;
|
|
24
|
+
--color-accent-blue: #0066cc;
|
|
25
|
+
--color-accent-blue-light: #e7f0f9;
|
|
26
|
+
--color-orange: #e86427;
|
|
27
|
+
--color-orange-light: #fff3eb;
|
|
28
|
+
--color-yellow: #ffc048;
|
|
29
|
+
--color-check: #2dc071;
|
|
30
|
+
--color-warning: #ee9603;
|
|
31
|
+
--color-warning-light: #fff4e2;
|
|
32
|
+
|
|
33
|
+
/* Typography system */
|
|
34
|
+
/* Extra small fields */
|
|
35
|
+
--font-xs-fields-size: 0.625rem;
|
|
36
|
+
--font-xs-fields-line-height: 1rem;
|
|
37
|
+
--font-xs-fields-weight: 400;
|
|
38
|
+
|
|
39
|
+
/* Extra small field titles */
|
|
40
|
+
--font-xs-field-titles-size: 0.75rem;
|
|
41
|
+
--font-xs-field-titles-line-height: 1rem;
|
|
42
|
+
--font-xs-field-titles-weight: 700;
|
|
43
|
+
|
|
44
|
+
/* Extra small */
|
|
45
|
+
--font-xs-size: 0.75rem;
|
|
46
|
+
--font-xs-line-height: 1rem;
|
|
47
|
+
--font-xs-weight: 400;
|
|
48
|
+
|
|
49
|
+
/* Small */
|
|
50
|
+
--font-sm-size: 0.875rem;
|
|
51
|
+
--font-sm-line-height: 1.25rem;
|
|
52
|
+
--font-sm-weight: 400;
|
|
53
|
+
|
|
54
|
+
/* Base */
|
|
55
|
+
--font-base-size: 1rem;
|
|
56
|
+
--font-base-line-height: 1.5rem;
|
|
57
|
+
--font-base-weight: 400;
|
|
58
|
+
|
|
59
|
+
/* Large */
|
|
60
|
+
--font-lg-size: 1.125rem;
|
|
61
|
+
--font-lg-line-height: 1.75rem;
|
|
62
|
+
--font-lg-weight: 400;
|
|
63
|
+
|
|
64
|
+
/* Extra large */
|
|
65
|
+
--font-xl-size: 1.25rem;
|
|
66
|
+
--font-xl-line-height: 1.75rem;
|
|
67
|
+
--font-xl-weight: 400;
|
|
68
|
+
|
|
69
|
+
/* 2x large */
|
|
70
|
+
--font-2xl-size: 1.5rem;
|
|
71
|
+
--font-2xl-line-height: 2rem;
|
|
72
|
+
--font-2xl-weight: 400;
|
|
73
|
+
|
|
74
|
+
/* 3x large */
|
|
75
|
+
--font-3xl-size: 1.875rem;
|
|
76
|
+
--font-3xl-line-height: 2.25rem;
|
|
77
|
+
--font-3xl-weight: 400;
|
|
78
|
+
|
|
79
|
+
/* 4x large */
|
|
80
|
+
--font-4xl-size: 2.25rem;
|
|
81
|
+
--font-4xl-line-height: 2.5rem;
|
|
82
|
+
--font-4xl-weight: 400;
|
|
83
|
+
|
|
84
|
+
/* 5x large */
|
|
85
|
+
--font-5xl-size: 3rem;
|
|
86
|
+
--font-5xl-line-height: 1;
|
|
87
|
+
--font-5xl-weight: 400;
|
|
88
|
+
|
|
89
|
+
/* 6x large */
|
|
90
|
+
--font-6xl-size: 3.75rem;
|
|
91
|
+
--font-6xl-line-height: 1;
|
|
92
|
+
--font-6xl-weight: 400;
|
|
93
|
+
|
|
94
|
+
/* 7x large */
|
|
95
|
+
--font-7xl-size: 4.5rem;
|
|
96
|
+
--font-7xl-line-height: 1;
|
|
97
|
+
--font-7xl-weight: 400;
|
|
98
|
+
|
|
99
|
+
/* 8x large */
|
|
100
|
+
--font-8xl-size: 6rem;
|
|
101
|
+
--font-8xl-line-height: 1;
|
|
102
|
+
--font-8xl-weight: 400;
|
|
103
|
+
|
|
104
|
+
/* 9x large */
|
|
105
|
+
--font-9xl-size: 8rem;
|
|
106
|
+
--font-9xl-line-height: 1;
|
|
107
|
+
--font-9xl-weight: 400;
|
|
108
|
+
|
|
109
|
+
/* Large */
|
|
110
|
+
--font-lg-weight: 700;
|
|
111
|
+
|
|
112
|
+
/* Extra large */
|
|
113
|
+
--font-xl-size: 1.5rem;
|
|
114
|
+
--font-xl-line-height: 2rem;
|
|
115
|
+
--font-xl-weight: 500;
|
|
116
|
+
|
|
117
|
+
/* 2XL */
|
|
118
|
+
--font-2xl-size: 1.5rem;
|
|
119
|
+
--font-2xl-line-height: 2rem;
|
|
120
|
+
--font-2xl-weight: 700;
|
|
121
|
+
|
|
122
|
+
/* 3XL */
|
|
123
|
+
--font-3xl-size: 1.875rem;
|
|
124
|
+
--font-3xl-line-height: 2.25rem;
|
|
125
|
+
--font-3xl-weight: 700;
|
|
126
|
+
|
|
127
|
+
/* Color scales */
|
|
128
|
+
/* Turquoise palette */
|
|
129
|
+
--color-turquoise-50: #e7faf8;
|
|
130
|
+
--color-turquoise-100: #cff6f1;
|
|
131
|
+
--color-turquoise-200: #b7f1eb;
|
|
132
|
+
--color-turquoise-300: #9fede4;
|
|
133
|
+
--color-turquoise-400: #88e8dd;
|
|
134
|
+
--color-turquoise-500: #10d1bb;
|
|
135
|
+
--color-turquoise-600: #0cc2ad;
|
|
136
|
+
--color-turquoise-700: #08b39f;
|
|
137
|
+
--color-turquoise-800: #04a693;
|
|
138
|
+
--color-turquoise-900: #037a6d;
|
|
139
|
+
|
|
140
|
+
/* Red palette */
|
|
141
|
+
--color-red-50: #fbe8e9;
|
|
142
|
+
--color-red-100: #f7d2d3;
|
|
143
|
+
--color-red-200: #e6777a;
|
|
144
|
+
--color-red-300: #e26064;
|
|
145
|
+
--color-red-400: #dd494d;
|
|
146
|
+
--color-red-500: #d51c21;
|
|
147
|
+
--color-red-600: #c0191e;
|
|
148
|
+
--color-red-700: #aa161a;
|
|
149
|
+
--color-red-800: #951417;
|
|
150
|
+
--color-red-900: #801114;
|
|
151
|
+
|
|
152
|
+
/* Gray palette */
|
|
153
|
+
--color-gray-50: #f8f8f8;
|
|
154
|
+
--color-gray-100: #e0e0e0;
|
|
155
|
+
--color-gray-200: #cccccc;
|
|
156
|
+
--color-gray-300: #b8b8b8;
|
|
157
|
+
--color-gray-400: #a8a8a8;
|
|
158
|
+
--color-gray-500: #999999;
|
|
159
|
+
--color-gray-600: #919191;
|
|
160
|
+
--color-gray-700: #868686;
|
|
161
|
+
--color-gray-800: #7c7c7c;
|
|
162
|
+
--color-gray-900: #1b1c1e;
|
|
163
|
+
|
|
164
|
+
/* Navy blue palette */
|
|
165
|
+
--color-navy-blue-shades-50: #232544;
|
|
166
|
+
--color-navy-blue-shades-100: #1c1e42;
|
|
167
|
+
--color-navy-blue-shades-200: #151840;
|
|
168
|
+
--color-navy-blue-shades-300: #0e1140;
|
|
169
|
+
--color-navy-blue-shades-400: #070b3f;
|
|
170
|
+
--color-navy-blue-shades-500: #000440;
|
|
171
|
+
--color-navy-blue-shades-600: #060934;
|
|
172
|
+
--color-navy-blue-shades-700: #090b2b;
|
|
173
|
+
--color-navy-blue-shades-800: #0b0d23;
|
|
174
|
+
--color-navy-blue-shades-900: #0c0d1e;
|
|
175
|
+
|
|
176
|
+
/* Shadows and effects */
|
|
177
|
+
--drop-shadow-3xl: drop-shadow(0px 4px 27px rgba(4, 1, 50, 0.2));
|
|
178
|
+
--shadow-calendar-mobile-header: 0px 4px 32px 0px rgba(4, 1, 50, 0.05);
|
|
179
|
+
--shadow-dropdown: 0px 4px 19px 0px rgba(124, 124, 124, 0.18);
|
|
180
|
+
--shadow-dropdown-xl: 0px 29px 30px 0px #0004401a;
|
|
181
|
+
--shadow-topbar: 0px 4px 20px 0px #00000014;
|
|
182
|
+
|
|
183
|
+
/* Animations */
|
|
184
|
+
--animation-spin-slow: spin 2s linear infinite;
|
|
185
|
+
--animation-spin-once: spin 2s linear;
|
|
186
|
+
|
|
187
|
+
/* Transitions */
|
|
188
|
+
--transition-property-max-height: max-height;
|
|
189
|
+
--transition-timing-function-custom-cubic: cubic-bezier(0, 1, 0, 1);
|
|
190
|
+
--transition-duration-700: 700ms;
|
|
191
|
+
--transition-duration-1000: 1000ms;
|
|
192
|
+
--transition-duration-sidebar: 200ms;
|
|
193
|
+
|
|
194
|
+
/* Sizing */
|
|
195
|
+
--max-h-0: 0;
|
|
196
|
+
--max-h-1000: 1000px;
|
|
197
|
+
--spacing-sidebar-collapsed: 94px;
|
|
198
|
+
--spacing-sidebar-expanded: 221px;
|
|
199
|
+
|
|
200
|
+
/* Gradients */
|
|
201
|
+
/* Light blue → Primary → Pink gradients */
|
|
202
|
+
--color-linear-gradient-y: linear-gradient(
|
|
203
|
+
180deg,
|
|
204
|
+
var(--color-light-blue) 0%,
|
|
205
|
+
var(--color-primary) 50.52%,
|
|
206
|
+
var(--color-pink) 100%
|
|
207
|
+
);
|
|
208
|
+
--color-linear-gradient-x: linear-gradient(
|
|
209
|
+
90deg,
|
|
210
|
+
var(--color-light-blue) 0%,
|
|
211
|
+
var(--color-primary) 50.52%,
|
|
212
|
+
var(--color-pink) 100%
|
|
213
|
+
);
|
|
214
|
+
|
|
215
|
+
/* Navy blue → Primary gradients */
|
|
216
|
+
--color-gradient-blue-green-y: linear-gradient(180deg, var(--color-navy-blue) 1.57%, var(--color-primary) 98.28%);
|
|
217
|
+
--color-gradient-blue-green-x: linear-gradient(88.05deg, var(--color-navy-blue) 1.57%, var(--color-primary) 98.28%);
|
|
218
|
+
--color-gradient-calendar: linear-gradient(51.61deg, #000440 14.79%, #10d1bb 167.63%);
|
|
219
|
+
--color-nav-gradient: linear-gradient(179.94deg, var(--color-navy-blue) 65.65%, var(--color-primary) 128%);
|
|
220
|
+
--color-nav-gradient-mobile: linear-gradient(88.05deg, var(--color-navy-blue) 54.46%, var(--color-primary) 149.24%);
|
|
221
|
+
|
|
222
|
+
/* Font families */
|
|
223
|
+
--font-family-sans: 'Gotham', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
224
|
+
--font-family-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
|
225
|
+
--font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
|
|
226
|
+
--font-sans: "var(--font-gotham)", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
227
|
+
--font-gotham: 'Gotham', sans-serif;
|
|
228
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Next.js Font Configuration for YoungOnes UI Package
|
|
3
|
+
* Optimized for Next.js projects only
|
|
4
|
+
*/
|
|
5
|
+
export declare const gothamFont: import("next/dist/compiled/@next/font").NextFontWithVariable;
|
|
6
|
+
export declare const FONT_FAMILIES: {
|
|
7
|
+
readonly gotham: "var(--font-gotham), Gotham, ui-sans-serif, system-ui, sans-serif";
|
|
8
|
+
readonly sans: "ui-sans-serif, system-ui, sans-serif";
|
|
9
|
+
readonly serif: "ui-serif, Georgia, serif";
|
|
10
|
+
readonly mono: "ui-monospace, SFMono-Regular, Consolas, monospace";
|
|
11
|
+
};
|
|
12
|
+
export declare const FONT_WEIGHTS: {
|
|
13
|
+
readonly thin: "100";
|
|
14
|
+
readonly extraLight: "200";
|
|
15
|
+
readonly light: "300";
|
|
16
|
+
readonly normal: "400";
|
|
17
|
+
readonly medium: "500";
|
|
18
|
+
readonly semiBold: "600";
|
|
19
|
+
readonly bold: "700";
|
|
20
|
+
readonly extraBold: "800";
|
|
21
|
+
readonly black: "900";
|
|
22
|
+
};
|
|
23
|
+
export declare const FONT_CLASS_NAMES: {
|
|
24
|
+
readonly gotham: string;
|
|
25
|
+
readonly sans: "font-sans";
|
|
26
|
+
readonly serif: "font-serif";
|
|
27
|
+
readonly mono: "font-mono";
|
|
28
|
+
};
|
|
29
|
+
export default gothamFont;
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* CSS Variables Type Definitions
|
|
3
|
+
* TypeScript interfaces for YoungOnes UI CSS custom properties
|
|
4
|
+
*/
|
|
5
|
+
export interface BaseColors {
|
|
6
|
+
'--color-primary': string;
|
|
7
|
+
'--color-primary-light': string;
|
|
8
|
+
'--color-primary-dark': string;
|
|
9
|
+
'--color-black': string;
|
|
10
|
+
'--color-navy-blue': string;
|
|
11
|
+
'--color-white': string;
|
|
12
|
+
'--color-accent-blue': string;
|
|
13
|
+
'--color-ultra-light-blue': string;
|
|
14
|
+
}
|
|
15
|
+
export interface FunctionalColors {
|
|
16
|
+
'--color-green': string;
|
|
17
|
+
'--color-green-light': string;
|
|
18
|
+
'--color-pink': string;
|
|
19
|
+
'--color-purple': string;
|
|
20
|
+
'--color-orange': string;
|
|
21
|
+
'--color-warning': string;
|
|
22
|
+
'--color-warning-light': string;
|
|
23
|
+
'--color-warning-dark': string;
|
|
24
|
+
}
|
|
25
|
+
export interface TypographySystem {
|
|
26
|
+
'--font-xs-size': string;
|
|
27
|
+
'--font-sm-size': string;
|
|
28
|
+
'--font-base-size': string;
|
|
29
|
+
'--font-lg-size': string;
|
|
30
|
+
'--font-xl-size': string;
|
|
31
|
+
'--font-2xl-size': string;
|
|
32
|
+
'--font-3xl-size': string;
|
|
33
|
+
'--font-4xl-size': string;
|
|
34
|
+
'--font-5xl-size': string;
|
|
35
|
+
'--font-6xl-size': string;
|
|
36
|
+
'--font-7xl-size': string;
|
|
37
|
+
'--font-8xl-size': string;
|
|
38
|
+
'--font-9xl-size': string;
|
|
39
|
+
}
|
|
40
|
+
export interface CSSVariables extends BaseColors, FunctionalColors, TypographySystem {
|
|
41
|
+
'--color-linear-gradient-y': string;
|
|
42
|
+
'--color-linear-gradient-x': string;
|
|
43
|
+
'--color-gradient-blue-green-y': string;
|
|
44
|
+
'--color-gradient-blue-green-x': string;
|
|
45
|
+
'--color-gradient-calendar': string;
|
|
46
|
+
'--color-nav-gradient': string;
|
|
47
|
+
'--color-nav-gradient-mobile': string;
|
|
48
|
+
'--shadow-dropdown': string;
|
|
49
|
+
'--shadow-calendar': string;
|
|
50
|
+
'--shadow-topbar': string;
|
|
51
|
+
'--animation-spin': string;
|
|
52
|
+
'--animation-spin-slow': string;
|
|
53
|
+
'--transition-duration-sidebar': string;
|
|
54
|
+
'--transition-default': string;
|
|
55
|
+
'--transition-fast': string;
|
|
56
|
+
'--transition-slow': string;
|
|
57
|
+
'--max-height-sidebar': string;
|
|
58
|
+
'--spacing-sidebar': string;
|
|
59
|
+
}
|
|
60
|
+
export declare const CSS_VARIABLE_KEYS: (keyof CSSVariables)[];
|
|
61
|
+
export declare const getCSSVariable: (variable: keyof CSSVariables) => string;
|
|
62
|
+
export declare const setCSSVariable: (variable: keyof CSSVariables, value: string) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@youngonesworks/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.24",
|
|
4
4
|
"description": "A Youngones UI component library",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
@@ -11,14 +11,22 @@
|
|
|
11
11
|
"import": "./dist/index.js",
|
|
12
12
|
"require": "./dist/index.cjs",
|
|
13
13
|
"default": "./dist/index.js"
|
|
14
|
-
}
|
|
14
|
+
},
|
|
15
|
+
"./styles": {
|
|
16
|
+
"import": "./dist/styles/index.js",
|
|
17
|
+
"require": "./dist/styles/index.cjs",
|
|
18
|
+
"default": "./dist/styles/index.js"
|
|
19
|
+
},
|
|
20
|
+
"./styles/variables.css": "./dist/styles/variables.css",
|
|
21
|
+
"./styles/utilities.css": "./dist/styles/utilities.css"
|
|
15
22
|
},
|
|
16
23
|
"files": [
|
|
17
|
-
"dist"
|
|
24
|
+
"dist",
|
|
25
|
+
"dist/**/*.css"
|
|
18
26
|
],
|
|
19
27
|
"sideEffects": false,
|
|
20
28
|
"scripts": {
|
|
21
|
-
"build": "rolldown -c rolldown.config.mjs && tsc --emitDeclarationOnly",
|
|
29
|
+
"build": "rolldown -c rolldown.config.mjs && tsc --emitDeclarationOnly && node scripts/copy-css.mjs",
|
|
22
30
|
"watch": "concurrently \"rolldown -c rolldown.config.mjs -w\" \"tsc --emitDeclarationOnly --watch\"",
|
|
23
31
|
"dev": "storybook dev -p 6006",
|
|
24
32
|
"build-storybook": "yarn run storybook build",
|
|
@@ -39,9 +47,10 @@
|
|
|
39
47
|
"ui",
|
|
40
48
|
"tailwind"
|
|
41
49
|
],
|
|
42
|
-
"author": "
|
|
50
|
+
"author": "YoungOnes",
|
|
43
51
|
"license": "ISC",
|
|
44
52
|
"peerDependencies": {
|
|
53
|
+
"next": "^14.0.0 || ^15.0.0",
|
|
45
54
|
"react": "^18.0.0 || ^19.0.0",
|
|
46
55
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
47
56
|
},
|
|
@@ -107,6 +116,7 @@
|
|
|
107
116
|
"jest": "^30.0.0",
|
|
108
117
|
"jest-environment-jsdom": "^29.7.0",
|
|
109
118
|
"lint-staged": "^15.2.10",
|
|
119
|
+
"next": "^15.3.4",
|
|
110
120
|
"postcss": "^8.5.5",
|
|
111
121
|
"prettier": "^3.3.2",
|
|
112
122
|
"react": "^19.1.0",
|