@grupor5/raya 0.2.1 → 0.2.3
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 +68 -4
- package/dist/atoms/avatar/index.d.mts +12 -0
- package/dist/atoms/avatar/index.d.ts +12 -0
- package/dist/atoms/avatar/index.js +99 -0
- package/dist/atoms/avatar/index.mjs +76 -0
- package/dist/atoms/badge/index.d.mts +16 -0
- package/dist/atoms/badge/index.d.ts +16 -0
- package/dist/atoms/badge/index.js +149 -0
- package/dist/atoms/badge/index.mjs +146 -0
- package/dist/atoms/button/index.d.mts +11 -0
- package/dist/atoms/button/index.d.ts +11 -0
- package/dist/atoms/button/index.js +307 -0
- package/dist/atoms/button/index.mjs +301 -0
- package/dist/atoms/checkbox/index.d.mts +6 -0
- package/dist/atoms/checkbox/index.d.ts +6 -0
- package/dist/atoms/checkbox/index.js +98 -0
- package/dist/atoms/checkbox/index.mjs +75 -0
- package/dist/atoms/input/index.d.mts +12 -0
- package/dist/atoms/input/index.d.ts +12 -0
- package/dist/atoms/input/index.js +104 -0
- package/dist/atoms/input/index.mjs +82 -0
- package/dist/atoms/label/index.d.mts +8 -0
- package/dist/atoms/label/index.d.ts +8 -0
- package/dist/atoms/label/index.js +77 -0
- package/dist/atoms/label/index.mjs +54 -0
- package/dist/atoms/radio/index.d.mts +7 -0
- package/dist/atoms/radio/index.d.ts +7 -0
- package/dist/atoms/radio/index.js +97 -0
- package/dist/atoms/radio/index.mjs +73 -0
- package/dist/atoms/switch/index.d.mts +6 -0
- package/dist/atoms/switch/index.d.ts +6 -0
- package/dist/atoms/switch/index.js +97 -0
- package/dist/atoms/switch/index.mjs +74 -0
- package/dist/atoms/tag/index.d.mts +14 -0
- package/dist/atoms/tag/index.d.ts +14 -0
- package/dist/atoms/tag/index.js +128 -0
- package/dist/atoms/tag/index.mjs +122 -0
- package/dist/atoms/textarea/index.d.mts +11 -0
- package/dist/atoms/textarea/index.d.ts +11 -0
- package/dist/atoms/textarea/index.js +125 -0
- package/dist/atoms/textarea/index.mjs +103 -0
- package/dist/atoms/typography/index.d.mts +20 -0
- package/dist/atoms/typography/index.d.ts +20 -0
- package/dist/atoms/typography/index.js +140 -0
- package/dist/atoms/typography/index.mjs +115 -0
- package/dist/hooks/index.d.mts +1 -0
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.js +17 -0
- package/dist/hooks/index.mjs +15 -0
- package/dist/hooks/use-pagination.d.mts +10 -0
- package/dist/hooks/use-pagination.d.ts +10 -0
- package/dist/hooks/use-pagination.js +54 -0
- package/dist/hooks/use-pagination.mjs +51 -0
- package/dist/hooks/use-toast.d.mts +2 -0
- package/dist/hooks/use-toast.d.ts +2 -0
- package/dist/hooks/use-toast.js +2 -0
- package/dist/hooks/use-toast.mjs +1 -0
- package/dist/hooks/useModal.d.mts +7 -0
- package/dist/hooks/useModal.d.ts +7 -0
- package/dist/hooks/useModal.js +17 -0
- package/dist/hooks/useModal.mjs +15 -0
- package/dist/index.d.mts +50 -1298
- package/dist/index.d.ts +50 -1298
- package/dist/molecules/accordion/index.d.mts +17 -0
- package/dist/molecules/accordion/index.d.ts +17 -0
- package/dist/molecules/accordion/index.js +154 -0
- package/dist/molecules/accordion/index.mjs +128 -0
- package/dist/molecules/alert/index.d.mts +14 -0
- package/dist/molecules/alert/index.d.ts +14 -0
- package/dist/molecules/alert/index.js +425 -0
- package/dist/molecules/alert/index.mjs +402 -0
- package/dist/molecules/card/index.d.mts +10 -0
- package/dist/molecules/card/index.d.ts +10 -0
- package/dist/molecules/card/index.js +128 -0
- package/dist/molecules/card/index.mjs +101 -0
- package/dist/molecules/chart/index.d.mts +80 -0
- package/dist/molecules/chart/index.d.ts +80 -0
- package/dist/molecules/chart/index.js +300 -0
- package/dist/molecules/chart/index.mjs +272 -0
- package/dist/molecules/data-table/index.d.mts +57 -0
- package/dist/molecules/data-table/index.d.ts +57 -0
- package/dist/molecules/data-table/index.js +1456 -0
- package/dist/molecules/data-table/index.mjs +1430 -0
- package/dist/molecules/date-picker/index.d.mts +12 -0
- package/dist/molecules/date-picker/index.d.ts +12 -0
- package/dist/molecules/date-picker/index.js +756 -0
- package/dist/molecules/date-picker/index.mjs +734 -0
- package/dist/molecules/dropdown/index.d.mts +21 -0
- package/dist/molecules/dropdown/index.d.ts +21 -0
- package/dist/molecules/dropdown/index.js +221 -0
- package/dist/molecules/dropdown/index.mjs +198 -0
- package/dist/molecules/form/index.d.mts +19 -0
- package/dist/molecules/form/index.d.ts +19 -0
- package/dist/molecules/form/index.js +139 -0
- package/dist/molecules/form/index.mjs +114 -0
- package/dist/molecules/pagination/index.d.mts +15 -0
- package/dist/molecules/pagination/index.d.ts +15 -0
- package/dist/molecules/pagination/index.js +605 -0
- package/dist/molecules/pagination/index.mjs +583 -0
- package/dist/molecules/progress-bar/index.d.mts +15 -0
- package/dist/molecules/progress-bar/index.d.ts +15 -0
- package/dist/molecules/progress-bar/index.js +166 -0
- package/dist/molecules/progress-bar/index.mjs +144 -0
- package/dist/molecules/select/index.d.mts +15 -0
- package/dist/molecules/select/index.d.ts +15 -0
- package/dist/molecules/select/index.js +201 -0
- package/dist/molecules/select/index.mjs +169 -0
- package/dist/molecules/stepper/index.d.mts +67 -0
- package/dist/molecules/stepper/index.d.ts +67 -0
- package/dist/molecules/stepper/index.js +287 -0
- package/dist/molecules/stepper/index.mjs +260 -0
- package/dist/molecules/tabs/index.d.mts +9 -0
- package/dist/molecules/tabs/index.d.ts +9 -0
- package/dist/molecules/tabs/index.js +112 -0
- package/dist/molecules/tabs/index.mjs +86 -0
- package/dist/tokens/badge.d.mts +39 -0
- package/dist/tokens/badge.d.ts +39 -0
- package/dist/tokens/badge.js +61 -0
- package/dist/tokens/badge.mjs +59 -0
- package/dist/tokens/buttons.d.mts +277 -0
- package/dist/tokens/buttons.d.ts +277 -0
- package/dist/tokens/buttons.js +191 -0
- package/dist/tokens/buttons.mjs +173 -0
- package/dist/tokens/colors.d.mts +65 -0
- package/dist/tokens/colors.d.ts +65 -0
- package/dist/tokens/colors.js +68 -0
- package/dist/tokens/colors.mjs +66 -0
- package/dist/tokens/effects.d.mts +124 -0
- package/dist/tokens/effects.d.ts +124 -0
- package/dist/tokens/effects.js +130 -0
- package/dist/tokens/effects.mjs +115 -0
- package/dist/tokens/grids.d.mts +331 -0
- package/dist/tokens/grids.d.ts +331 -0
- package/dist/tokens/grids.js +305 -0
- package/dist/tokens/grids.mjs +292 -0
- package/dist/tokens/icons.d.mts +134 -0
- package/dist/tokens/icons.d.ts +134 -0
- package/dist/tokens/icons.js +108 -0
- package/dist/tokens/icons.mjs +97 -0
- package/dist/tokens/index.d.mts +6 -0
- package/dist/tokens/index.d.ts +6 -0
- package/dist/tokens/index.js +775 -0
- package/dist/tokens/index.mjs +743 -0
- package/dist/tokens/progress-bar.d.mts +31 -0
- package/dist/tokens/progress-bar.d.ts +31 -0
- package/dist/tokens/progress-bar.js +70 -0
- package/dist/tokens/progress-bar.mjs +68 -0
- package/dist/tokens/spacing.d.mts +90 -0
- package/dist/tokens/spacing.d.ts +90 -0
- package/dist/tokens/spacing.js +120 -0
- package/dist/tokens/spacing.mjs +109 -0
- package/dist/tokens/stroke.d.mts +292 -0
- package/dist/tokens/stroke.d.ts +292 -0
- package/dist/tokens/stroke.js +202 -0
- package/dist/tokens/stroke.mjs +186 -0
- package/dist/tokens/tab.d.mts +31 -0
- package/dist/tokens/tab.d.ts +31 -0
- package/dist/tokens/tab.js +48 -0
- package/dist/tokens/tab.mjs +46 -0
- package/dist/tokens/tag.d.mts +53 -0
- package/dist/tokens/tag.d.ts +53 -0
- package/dist/tokens/tag.js +80 -0
- package/dist/tokens/tag.mjs +78 -0
- package/dist/tokens/typography.d.mts +394 -0
- package/dist/tokens/typography.d.ts +394 -0
- package/dist/tokens/typography.js +302 -0
- package/dist/tokens/typography.mjs +292 -0
- package/dist/utils/classNames.d.mts +3 -0
- package/dist/utils/classNames.d.ts +3 -0
- package/dist/utils/classNames.js +8 -0
- package/dist/utils/classNames.mjs +6 -0
- package/dist/utils/cn.d.mts +5 -0
- package/dist/utils/cn.d.ts +5 -0
- package/dist/utils/cn.js +11 -0
- package/dist/utils/cn.mjs +9 -0
- package/dist/utils/index.d.mts +3 -0
- package/dist/utils/index.d.ts +3 -0
- package/dist/utils/index.js +15 -0
- package/dist/utils/index.mjs +12 -0
- package/package.json +34 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,952 +1,53 @@
|
|
|
1
|
+
export { colors } from './tokens/colors.js';
|
|
2
|
+
export { fontFamily, fontSize, fontWeight, generateTypographyCSS, letterSpacing, lineHeight, presets, typography, typographyVars } from './tokens/typography.js';
|
|
3
|
+
export { SpacingToken, generateSpacingCSS, getSpacing, getSpacingPx, default as spacing, spacingPx, spacingStyles, tailwindSpacing } from './tokens/spacing.js';
|
|
4
|
+
export { StrokeColorToken, StrokeDirection, StrokeToken, componentStrokes, createStroke, generateStrokesCSS, getStroke, getStrokeColor, responsiveStrokes, default as stroke, strokeColors, strokeDirections, strokeStyles, strokeTransitions, tailwindStrokes } from './tokens/stroke.js';
|
|
5
|
+
export { badgeTokens } from './tokens/badge.js';
|
|
6
|
+
export { tagTokens } from './tokens/tag.js';
|
|
1
7
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
600: string;
|
|
46
|
-
700: string;
|
|
47
|
-
800: string;
|
|
48
|
-
900: string;
|
|
49
|
-
1000: string;
|
|
50
|
-
1100: string;
|
|
51
|
-
1200: string;
|
|
52
|
-
};
|
|
53
|
-
neutral: {
|
|
54
|
-
500: string;
|
|
55
|
-
400: string;
|
|
56
|
-
300: string;
|
|
57
|
-
200: string;
|
|
58
|
-
100: string;
|
|
59
|
-
10: string;
|
|
60
|
-
20: string;
|
|
61
|
-
30: string;
|
|
62
|
-
};
|
|
63
|
-
red: {
|
|
64
|
-
600: string;
|
|
65
|
-
500: string;
|
|
66
|
-
400: string;
|
|
67
|
-
300: string;
|
|
68
|
-
200: string;
|
|
69
|
-
100: string;
|
|
70
|
-
};
|
|
71
|
-
yellow: {
|
|
72
|
-
300: string;
|
|
73
|
-
200: string;
|
|
74
|
-
100: string;
|
|
75
|
-
10: string;
|
|
76
|
-
};
|
|
77
|
-
green: {
|
|
78
|
-
600: string;
|
|
79
|
-
500: string;
|
|
80
|
-
400: string;
|
|
81
|
-
300: string;
|
|
82
|
-
200: string;
|
|
83
|
-
100: string;
|
|
84
|
-
10: string;
|
|
85
|
-
};
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
/**
|
|
89
|
-
* Raya Design System - Typography Tokens
|
|
90
|
-
* Font Family: Rubik
|
|
91
|
-
* Based on the official Raya typography system palette from Figma
|
|
92
|
-
*/
|
|
93
|
-
declare const typography: {
|
|
94
|
-
fontFamily: {
|
|
95
|
-
primary: string[];
|
|
96
|
-
};
|
|
97
|
-
fontWeight: {
|
|
98
|
-
light: number;
|
|
99
|
-
regular: number;
|
|
100
|
-
medium: number;
|
|
101
|
-
semibold: number;
|
|
102
|
-
bold: number;
|
|
103
|
-
};
|
|
104
|
-
fontSize: {
|
|
105
|
-
display: {
|
|
106
|
-
l: string;
|
|
107
|
-
};
|
|
108
|
-
heading: {
|
|
109
|
-
xl: string;
|
|
110
|
-
lg: string;
|
|
111
|
-
md: string;
|
|
112
|
-
sm: string;
|
|
113
|
-
};
|
|
114
|
-
subheading: {
|
|
115
|
-
lg: string;
|
|
116
|
-
md: string;
|
|
117
|
-
sm: string;
|
|
118
|
-
};
|
|
119
|
-
body: {
|
|
120
|
-
'bold-lg': string;
|
|
121
|
-
'bold-md': string;
|
|
122
|
-
'bold-sm': string;
|
|
123
|
-
'bold-xs': string;
|
|
124
|
-
lg: string;
|
|
125
|
-
md: string;
|
|
126
|
-
sm: string;
|
|
127
|
-
xs: string;
|
|
128
|
-
};
|
|
129
|
-
caption: {
|
|
130
|
-
c1: string;
|
|
131
|
-
};
|
|
132
|
-
};
|
|
133
|
-
lineHeight: {
|
|
134
|
-
display: {
|
|
135
|
-
l: string;
|
|
136
|
-
};
|
|
137
|
-
heading: {
|
|
138
|
-
xl: string;
|
|
139
|
-
lg: string;
|
|
140
|
-
md: string;
|
|
141
|
-
sm: string;
|
|
142
|
-
};
|
|
143
|
-
subheading: {
|
|
144
|
-
lg: string;
|
|
145
|
-
md: string;
|
|
146
|
-
sm: string;
|
|
147
|
-
};
|
|
148
|
-
body: {
|
|
149
|
-
lg: string;
|
|
150
|
-
md: string;
|
|
151
|
-
sm: string;
|
|
152
|
-
xs: string;
|
|
153
|
-
};
|
|
154
|
-
caption: {
|
|
155
|
-
c1: string;
|
|
156
|
-
};
|
|
157
|
-
};
|
|
158
|
-
letterSpacing: {
|
|
159
|
-
normal: string;
|
|
160
|
-
caption: string;
|
|
161
|
-
};
|
|
162
|
-
presets: {
|
|
163
|
-
'display-l': {
|
|
164
|
-
fontSize: string;
|
|
165
|
-
lineHeight: string;
|
|
166
|
-
fontWeight: number;
|
|
167
|
-
letterSpacing: string;
|
|
168
|
-
};
|
|
169
|
-
'heading-xl': {
|
|
170
|
-
fontSize: string;
|
|
171
|
-
lineHeight: string;
|
|
172
|
-
fontWeight: number;
|
|
173
|
-
letterSpacing: string;
|
|
174
|
-
};
|
|
175
|
-
'heading-lg': {
|
|
176
|
-
fontSize: string;
|
|
177
|
-
lineHeight: string;
|
|
178
|
-
fontWeight: number;
|
|
179
|
-
letterSpacing: string;
|
|
180
|
-
};
|
|
181
|
-
'heading-md': {
|
|
182
|
-
fontSize: string;
|
|
183
|
-
lineHeight: string;
|
|
184
|
-
fontWeight: number;
|
|
185
|
-
letterSpacing: string;
|
|
186
|
-
};
|
|
187
|
-
'heading-sm': {
|
|
188
|
-
fontSize: string;
|
|
189
|
-
lineHeight: string;
|
|
190
|
-
fontWeight: number;
|
|
191
|
-
letterSpacing: string;
|
|
192
|
-
};
|
|
193
|
-
'subheading-lg': {
|
|
194
|
-
fontSize: string;
|
|
195
|
-
lineHeight: string;
|
|
196
|
-
fontWeight: number;
|
|
197
|
-
letterSpacing: string;
|
|
198
|
-
};
|
|
199
|
-
'subheading-md': {
|
|
200
|
-
fontSize: string;
|
|
201
|
-
lineHeight: string;
|
|
202
|
-
fontWeight: number;
|
|
203
|
-
letterSpacing: string;
|
|
204
|
-
};
|
|
205
|
-
'subheading-sm': {
|
|
206
|
-
fontSize: string;
|
|
207
|
-
lineHeight: string;
|
|
208
|
-
fontWeight: number;
|
|
209
|
-
letterSpacing: string;
|
|
210
|
-
};
|
|
211
|
-
'body-bold-lg': {
|
|
212
|
-
fontSize: string;
|
|
213
|
-
lineHeight: string;
|
|
214
|
-
fontWeight: number;
|
|
215
|
-
letterSpacing: string;
|
|
216
|
-
};
|
|
217
|
-
'body-bold-md': {
|
|
218
|
-
fontSize: string;
|
|
219
|
-
lineHeight: string;
|
|
220
|
-
fontWeight: number;
|
|
221
|
-
letterSpacing: string;
|
|
222
|
-
};
|
|
223
|
-
'body-bold-sm': {
|
|
224
|
-
fontSize: string;
|
|
225
|
-
lineHeight: string;
|
|
226
|
-
fontWeight: number;
|
|
227
|
-
letterSpacing: string;
|
|
228
|
-
};
|
|
229
|
-
'body-bold-xs': {
|
|
230
|
-
fontSize: string;
|
|
231
|
-
lineHeight: string;
|
|
232
|
-
fontWeight: number;
|
|
233
|
-
letterSpacing: string;
|
|
234
|
-
};
|
|
235
|
-
'body-lg': {
|
|
236
|
-
fontSize: string;
|
|
237
|
-
lineHeight: string;
|
|
238
|
-
fontWeight: number;
|
|
239
|
-
letterSpacing: string;
|
|
240
|
-
};
|
|
241
|
-
'body-md': {
|
|
242
|
-
fontSize: string;
|
|
243
|
-
lineHeight: string;
|
|
244
|
-
fontWeight: number;
|
|
245
|
-
letterSpacing: string;
|
|
246
|
-
};
|
|
247
|
-
'body-sm': {
|
|
248
|
-
fontSize: string;
|
|
249
|
-
lineHeight: string;
|
|
250
|
-
fontWeight: number;
|
|
251
|
-
letterSpacing: string;
|
|
252
|
-
};
|
|
253
|
-
'body-xs': {
|
|
254
|
-
fontSize: string;
|
|
255
|
-
lineHeight: string;
|
|
256
|
-
fontWeight: number;
|
|
257
|
-
letterSpacing: string;
|
|
258
|
-
};
|
|
259
|
-
'caption-c1': {
|
|
260
|
-
fontSize: string;
|
|
261
|
-
lineHeight: string;
|
|
262
|
-
fontWeight: number;
|
|
263
|
-
letterSpacing: string;
|
|
264
|
-
};
|
|
265
|
-
};
|
|
266
|
-
};
|
|
267
|
-
declare const typographyVars: {
|
|
268
|
-
'--font-primary': string;
|
|
269
|
-
'--font-weight-light': number;
|
|
270
|
-
'--font-weight-regular': number;
|
|
271
|
-
'--font-weight-medium': number;
|
|
272
|
-
'--font-weight-semibold': number;
|
|
273
|
-
'--font-weight-bold': number;
|
|
274
|
-
'--text-display-l': string;
|
|
275
|
-
'--text-heading-xl': string;
|
|
276
|
-
'--text-heading-lg': string;
|
|
277
|
-
'--text-heading-md': string;
|
|
278
|
-
'--text-heading-sm': string;
|
|
279
|
-
'--text-subheading-lg': string;
|
|
280
|
-
'--text-subheading-md': string;
|
|
281
|
-
'--text-subheading-sm': string;
|
|
282
|
-
'--text-body-bold-lg': string;
|
|
283
|
-
'--text-body-bold-md': string;
|
|
284
|
-
'--text-body-bold-sm': string;
|
|
285
|
-
'--text-body-bold-xs': string;
|
|
286
|
-
'--text-body-lg': string;
|
|
287
|
-
'--text-body-md': string;
|
|
288
|
-
'--text-body-sm': string;
|
|
289
|
-
'--text-body-xs': string;
|
|
290
|
-
'--text-caption-c1': string;
|
|
291
|
-
'--leading-display-l': string;
|
|
292
|
-
'--leading-heading-xl': string;
|
|
293
|
-
'--leading-heading-lg': string;
|
|
294
|
-
'--leading-heading-md': string;
|
|
295
|
-
'--leading-heading-sm': string;
|
|
296
|
-
'--leading-subheading-lg': string;
|
|
297
|
-
'--leading-subheading-md': string;
|
|
298
|
-
'--leading-subheading-sm': string;
|
|
299
|
-
'--leading-body-lg': string;
|
|
300
|
-
'--leading-body-md': string;
|
|
301
|
-
'--leading-body-sm': string;
|
|
302
|
-
'--leading-body-xs': string;
|
|
303
|
-
'--leading-caption-c1': string;
|
|
304
|
-
'--tracking-normal': string;
|
|
305
|
-
'--tracking-caption': string;
|
|
306
|
-
};
|
|
307
|
-
declare const generateTypographyCSS: () => string;
|
|
308
|
-
declare const fontFamily: {
|
|
309
|
-
primary: string[];
|
|
310
|
-
};
|
|
311
|
-
declare const fontWeight: {
|
|
312
|
-
light: number;
|
|
313
|
-
regular: number;
|
|
314
|
-
medium: number;
|
|
315
|
-
semibold: number;
|
|
316
|
-
bold: number;
|
|
317
|
-
};
|
|
318
|
-
declare const fontSize: {
|
|
319
|
-
display: {
|
|
320
|
-
l: string;
|
|
321
|
-
};
|
|
322
|
-
heading: {
|
|
323
|
-
xl: string;
|
|
324
|
-
lg: string;
|
|
325
|
-
md: string;
|
|
326
|
-
sm: string;
|
|
327
|
-
};
|
|
328
|
-
subheading: {
|
|
329
|
-
lg: string;
|
|
330
|
-
md: string;
|
|
331
|
-
sm: string;
|
|
332
|
-
};
|
|
333
|
-
body: {
|
|
334
|
-
'bold-lg': string;
|
|
335
|
-
'bold-md': string;
|
|
336
|
-
'bold-sm': string;
|
|
337
|
-
'bold-xs': string;
|
|
338
|
-
lg: string;
|
|
339
|
-
md: string;
|
|
340
|
-
sm: string;
|
|
341
|
-
xs: string;
|
|
342
|
-
};
|
|
343
|
-
caption: {
|
|
344
|
-
c1: string;
|
|
345
|
-
};
|
|
346
|
-
};
|
|
347
|
-
declare const lineHeight: {
|
|
348
|
-
display: {
|
|
349
|
-
l: string;
|
|
350
|
-
};
|
|
351
|
-
heading: {
|
|
352
|
-
xl: string;
|
|
353
|
-
lg: string;
|
|
354
|
-
md: string;
|
|
355
|
-
sm: string;
|
|
356
|
-
};
|
|
357
|
-
subheading: {
|
|
358
|
-
lg: string;
|
|
359
|
-
md: string;
|
|
360
|
-
sm: string;
|
|
361
|
-
};
|
|
362
|
-
body: {
|
|
363
|
-
lg: string;
|
|
364
|
-
md: string;
|
|
365
|
-
sm: string;
|
|
366
|
-
xs: string;
|
|
367
|
-
};
|
|
368
|
-
caption: {
|
|
369
|
-
c1: string;
|
|
370
|
-
};
|
|
371
|
-
};
|
|
372
|
-
declare const letterSpacing: {
|
|
373
|
-
normal: string;
|
|
374
|
-
caption: string;
|
|
375
|
-
};
|
|
376
|
-
declare const presets: {
|
|
377
|
-
'display-l': {
|
|
378
|
-
fontSize: string;
|
|
379
|
-
lineHeight: string;
|
|
380
|
-
fontWeight: number;
|
|
381
|
-
letterSpacing: string;
|
|
382
|
-
};
|
|
383
|
-
'heading-xl': {
|
|
384
|
-
fontSize: string;
|
|
385
|
-
lineHeight: string;
|
|
386
|
-
fontWeight: number;
|
|
387
|
-
letterSpacing: string;
|
|
388
|
-
};
|
|
389
|
-
'heading-lg': {
|
|
390
|
-
fontSize: string;
|
|
391
|
-
lineHeight: string;
|
|
392
|
-
fontWeight: number;
|
|
393
|
-
letterSpacing: string;
|
|
394
|
-
};
|
|
395
|
-
'heading-md': {
|
|
396
|
-
fontSize: string;
|
|
397
|
-
lineHeight: string;
|
|
398
|
-
fontWeight: number;
|
|
399
|
-
letterSpacing: string;
|
|
400
|
-
};
|
|
401
|
-
'heading-sm': {
|
|
402
|
-
fontSize: string;
|
|
403
|
-
lineHeight: string;
|
|
404
|
-
fontWeight: number;
|
|
405
|
-
letterSpacing: string;
|
|
406
|
-
};
|
|
407
|
-
'subheading-lg': {
|
|
408
|
-
fontSize: string;
|
|
409
|
-
lineHeight: string;
|
|
410
|
-
fontWeight: number;
|
|
411
|
-
letterSpacing: string;
|
|
412
|
-
};
|
|
413
|
-
'subheading-md': {
|
|
414
|
-
fontSize: string;
|
|
415
|
-
lineHeight: string;
|
|
416
|
-
fontWeight: number;
|
|
417
|
-
letterSpacing: string;
|
|
418
|
-
};
|
|
419
|
-
'subheading-sm': {
|
|
420
|
-
fontSize: string;
|
|
421
|
-
lineHeight: string;
|
|
422
|
-
fontWeight: number;
|
|
423
|
-
letterSpacing: string;
|
|
424
|
-
};
|
|
425
|
-
'body-bold-lg': {
|
|
426
|
-
fontSize: string;
|
|
427
|
-
lineHeight: string;
|
|
428
|
-
fontWeight: number;
|
|
429
|
-
letterSpacing: string;
|
|
430
|
-
};
|
|
431
|
-
'body-bold-md': {
|
|
432
|
-
fontSize: string;
|
|
433
|
-
lineHeight: string;
|
|
434
|
-
fontWeight: number;
|
|
435
|
-
letterSpacing: string;
|
|
436
|
-
};
|
|
437
|
-
'body-bold-sm': {
|
|
438
|
-
fontSize: string;
|
|
439
|
-
lineHeight: string;
|
|
440
|
-
fontWeight: number;
|
|
441
|
-
letterSpacing: string;
|
|
442
|
-
};
|
|
443
|
-
'body-bold-xs': {
|
|
444
|
-
fontSize: string;
|
|
445
|
-
lineHeight: string;
|
|
446
|
-
fontWeight: number;
|
|
447
|
-
letterSpacing: string;
|
|
448
|
-
};
|
|
449
|
-
'body-lg': {
|
|
450
|
-
fontSize: string;
|
|
451
|
-
lineHeight: string;
|
|
452
|
-
fontWeight: number;
|
|
453
|
-
letterSpacing: string;
|
|
454
|
-
};
|
|
455
|
-
'body-md': {
|
|
456
|
-
fontSize: string;
|
|
457
|
-
lineHeight: string;
|
|
458
|
-
fontWeight: number;
|
|
459
|
-
letterSpacing: string;
|
|
460
|
-
};
|
|
461
|
-
'body-sm': {
|
|
462
|
-
fontSize: string;
|
|
463
|
-
lineHeight: string;
|
|
464
|
-
fontWeight: number;
|
|
465
|
-
letterSpacing: string;
|
|
466
|
-
};
|
|
467
|
-
'body-xs': {
|
|
468
|
-
fontSize: string;
|
|
469
|
-
lineHeight: string;
|
|
470
|
-
fontWeight: number;
|
|
471
|
-
letterSpacing: string;
|
|
472
|
-
};
|
|
473
|
-
'caption-c1': {
|
|
474
|
-
fontSize: string;
|
|
475
|
-
lineHeight: string;
|
|
476
|
-
fontWeight: number;
|
|
477
|
-
letterSpacing: string;
|
|
478
|
-
};
|
|
479
|
-
};
|
|
480
|
-
|
|
481
|
-
/**
|
|
482
|
-
* Raya Design System - Spacing Tokens
|
|
483
|
-
*
|
|
484
|
-
* Spacing system based on 4px base unit with mathematical progression
|
|
485
|
-
* for consistent spatial relationships across all components.
|
|
486
|
-
*/
|
|
487
|
-
declare const spacing: {
|
|
488
|
-
readonly base: "0.25rem";
|
|
489
|
-
readonly xs: "0.25rem";
|
|
490
|
-
readonly s: "0.5rem";
|
|
491
|
-
readonly m: "1rem";
|
|
492
|
-
readonly l: "1.5rem";
|
|
493
|
-
readonly xl: "2rem";
|
|
494
|
-
readonly '2xl': "2.5rem";
|
|
495
|
-
readonly '3xl': "3rem";
|
|
496
|
-
readonly '4xl': "3.5rem";
|
|
497
|
-
};
|
|
498
|
-
type SpacingToken = keyof typeof spacing;
|
|
499
|
-
/**
|
|
500
|
-
* Spacing values in pixels for calculations and documentation
|
|
501
|
-
*/
|
|
502
|
-
declare const spacingPx: {
|
|
503
|
-
readonly base: 4;
|
|
504
|
-
readonly xs: 4;
|
|
505
|
-
readonly s: 8;
|
|
506
|
-
readonly m: 16;
|
|
507
|
-
readonly l: 24;
|
|
508
|
-
readonly xl: 32;
|
|
509
|
-
readonly '2xl': 40;
|
|
510
|
-
readonly '3xl': 48;
|
|
511
|
-
readonly '4xl': 56;
|
|
512
|
-
};
|
|
513
|
-
/**
|
|
514
|
-
* Pre-composed spacing styles for common use cases
|
|
515
|
-
*/
|
|
516
|
-
declare const spacingStyles: {
|
|
517
|
-
readonly buttonPadding: {
|
|
518
|
-
readonly small: "0.25rem 0.5rem";
|
|
519
|
-
readonly medium: "0.5rem 1rem";
|
|
520
|
-
readonly large: "1rem 1.5rem";
|
|
521
|
-
};
|
|
522
|
-
readonly cardPadding: {
|
|
523
|
-
readonly compact: "1rem";
|
|
524
|
-
readonly comfortable: "1.5rem";
|
|
525
|
-
readonly spacious: "2rem";
|
|
526
|
-
};
|
|
527
|
-
readonly formSpacing: {
|
|
528
|
-
readonly fieldGap: "1rem";
|
|
529
|
-
readonly labelGap: "0.25rem";
|
|
530
|
-
readonly helpGap: "0.25rem";
|
|
531
|
-
};
|
|
532
|
-
readonly layoutSpacing: {
|
|
533
|
-
readonly sectionGap: "2.5rem";
|
|
534
|
-
readonly componentGap: "2rem";
|
|
535
|
-
readonly elementGap: "1rem";
|
|
536
|
-
};
|
|
537
|
-
readonly gridGap: {
|
|
538
|
-
readonly tight: "0.5rem";
|
|
539
|
-
readonly normal: "1rem";
|
|
540
|
-
readonly comfortable: "1.5rem";
|
|
541
|
-
readonly loose: "2rem";
|
|
542
|
-
};
|
|
543
|
-
};
|
|
544
|
-
/**
|
|
545
|
-
* Utility function to get spacing value
|
|
546
|
-
*/
|
|
547
|
-
declare const getSpacing: (token: SpacingToken) => string;
|
|
548
|
-
/**
|
|
549
|
-
* Utility function to get spacing value in pixels
|
|
550
|
-
*/
|
|
551
|
-
declare const getSpacingPx: (token: SpacingToken) => number;
|
|
552
|
-
/**
|
|
553
|
-
* Generate CSS custom properties for spacing
|
|
554
|
-
*/
|
|
555
|
-
declare const generateSpacingCSS: () => string;
|
|
556
|
-
/**
|
|
557
|
-
* Spacing tokens for Tailwind CSS configuration
|
|
558
|
-
*/
|
|
559
|
-
declare const tailwindSpacing: {
|
|
560
|
-
readonly xs: "var(--spacing-xs)";
|
|
561
|
-
readonly s: "var(--spacing-s)";
|
|
562
|
-
readonly m: "var(--spacing-m)";
|
|
563
|
-
readonly l: "var(--spacing-l)";
|
|
564
|
-
readonly xl: "var(--spacing-xl)";
|
|
565
|
-
readonly '2xl': "var(--spacing-2xl)";
|
|
566
|
-
readonly '3xl': "var(--spacing-3xl)";
|
|
567
|
-
readonly '4xl': "var(--spacing-4xl)";
|
|
568
|
-
};
|
|
569
|
-
|
|
570
|
-
/**
|
|
571
|
-
* Raya Design System - Stroke Tokens
|
|
572
|
-
*
|
|
573
|
-
* Stroke system for defining element outlines and providing visual hierarchy
|
|
574
|
-
* through consistent border treatments.
|
|
575
|
-
*/
|
|
576
|
-
declare const stroke: {
|
|
577
|
-
readonly 1: "1px";
|
|
578
|
-
readonly 2: "2px";
|
|
579
|
-
};
|
|
580
|
-
type StrokeToken = keyof typeof stroke;
|
|
581
|
-
/**
|
|
582
|
-
* Stroke colors using design system color tokens
|
|
583
|
-
*/
|
|
584
|
-
declare const strokeColors: {
|
|
585
|
-
readonly default: "hsl(var(--border))";
|
|
586
|
-
readonly muted: "hsl(var(--muted))";
|
|
587
|
-
readonly primary: "hsl(var(--primary))";
|
|
588
|
-
readonly secondary: "hsl(var(--secondary))";
|
|
589
|
-
readonly destructive: "hsl(var(--destructive))";
|
|
590
|
-
readonly focus: "hsl(var(--ring))";
|
|
591
|
-
readonly transparent: "transparent";
|
|
592
|
-
};
|
|
593
|
-
type StrokeColorToken = keyof typeof strokeColors;
|
|
594
|
-
/**
|
|
595
|
-
* Pre-composed stroke styles for common use cases
|
|
596
|
-
*/
|
|
597
|
-
declare const strokeStyles: {
|
|
598
|
-
readonly default: {
|
|
599
|
-
readonly width: "1px";
|
|
600
|
-
readonly color: "hsl(var(--border))";
|
|
601
|
-
readonly style: "solid";
|
|
602
|
-
};
|
|
603
|
-
readonly emphasized: {
|
|
604
|
-
readonly width: "2px";
|
|
605
|
-
readonly color: "hsl(var(--border))";
|
|
606
|
-
readonly style: "solid";
|
|
607
|
-
};
|
|
608
|
-
readonly focus: {
|
|
609
|
-
readonly width: "2px";
|
|
610
|
-
readonly color: "hsl(var(--ring))";
|
|
611
|
-
readonly style: "solid";
|
|
612
|
-
};
|
|
613
|
-
readonly hover: {
|
|
614
|
-
readonly width: "2px";
|
|
615
|
-
readonly color: "hsl(var(--primary))";
|
|
616
|
-
readonly style: "solid";
|
|
617
|
-
};
|
|
618
|
-
readonly primary: {
|
|
619
|
-
readonly width: "1px";
|
|
620
|
-
readonly color: "hsl(var(--primary))";
|
|
621
|
-
readonly style: "solid";
|
|
622
|
-
};
|
|
623
|
-
readonly primaryEmphasized: {
|
|
624
|
-
readonly width: "2px";
|
|
625
|
-
readonly color: "hsl(var(--primary))";
|
|
626
|
-
readonly style: "solid";
|
|
627
|
-
};
|
|
628
|
-
readonly destructive: {
|
|
629
|
-
readonly width: "1px";
|
|
630
|
-
readonly color: "hsl(var(--destructive))";
|
|
631
|
-
readonly style: "solid";
|
|
632
|
-
};
|
|
633
|
-
readonly destructiveEmphasized: {
|
|
634
|
-
readonly width: "2px";
|
|
635
|
-
readonly color: "hsl(var(--destructive))";
|
|
636
|
-
readonly style: "solid";
|
|
637
|
-
};
|
|
638
|
-
readonly muted: {
|
|
639
|
-
readonly width: "1px";
|
|
640
|
-
readonly color: "hsl(var(--muted))";
|
|
641
|
-
readonly style: "solid";
|
|
642
|
-
};
|
|
643
|
-
readonly transparent: {
|
|
644
|
-
readonly width: "1px";
|
|
645
|
-
readonly color: "transparent";
|
|
646
|
-
readonly style: "solid";
|
|
647
|
-
};
|
|
648
|
-
};
|
|
649
|
-
/**
|
|
650
|
-
* Component-specific stroke configurations
|
|
651
|
-
*/
|
|
652
|
-
declare const componentStrokes: {
|
|
653
|
-
readonly button: {
|
|
654
|
-
readonly outline: {
|
|
655
|
-
readonly width: "1px";
|
|
656
|
-
readonly color: "hsl(var(--primary))";
|
|
657
|
-
readonly style: "solid";
|
|
658
|
-
};
|
|
659
|
-
readonly outlineHover: {
|
|
660
|
-
readonly width: "2px";
|
|
661
|
-
readonly color: "hsl(var(--primary))";
|
|
662
|
-
readonly style: "solid";
|
|
663
|
-
};
|
|
664
|
-
readonly outlineFocus: {
|
|
665
|
-
readonly width: "2px";
|
|
666
|
-
readonly color: "hsl(var(--ring))";
|
|
667
|
-
readonly style: "solid";
|
|
668
|
-
};
|
|
669
|
-
readonly destructiveOutline: {
|
|
670
|
-
readonly width: "1px";
|
|
671
|
-
readonly color: "hsl(var(--destructive))";
|
|
672
|
-
readonly style: "solid";
|
|
673
|
-
};
|
|
674
|
-
readonly destructiveOutlineHover: {
|
|
675
|
-
readonly width: "2px";
|
|
676
|
-
readonly color: "hsl(var(--destructive))";
|
|
677
|
-
readonly style: "solid";
|
|
678
|
-
};
|
|
679
|
-
};
|
|
680
|
-
readonly card: {
|
|
681
|
-
readonly default: {
|
|
682
|
-
readonly width: "1px";
|
|
683
|
-
readonly color: "hsl(var(--border))";
|
|
684
|
-
readonly style: "solid";
|
|
685
|
-
};
|
|
686
|
-
readonly emphasized: {
|
|
687
|
-
readonly width: "2px";
|
|
688
|
-
readonly color: "hsl(var(--border))";
|
|
689
|
-
readonly style: "solid";
|
|
690
|
-
};
|
|
691
|
-
readonly interactive: {
|
|
692
|
-
readonly width: "1px";
|
|
693
|
-
readonly color: "hsl(var(--border))";
|
|
694
|
-
readonly style: "solid";
|
|
695
|
-
};
|
|
696
|
-
readonly interactiveHover: {
|
|
697
|
-
readonly width: "2px";
|
|
698
|
-
readonly color: "hsl(var(--primary))";
|
|
699
|
-
readonly style: "solid";
|
|
700
|
-
};
|
|
701
|
-
readonly selected: {
|
|
702
|
-
readonly width: "2px";
|
|
703
|
-
readonly color: "hsl(var(--primary))";
|
|
704
|
-
readonly style: "solid";
|
|
705
|
-
};
|
|
706
|
-
};
|
|
707
|
-
readonly form: {
|
|
708
|
-
readonly input: {
|
|
709
|
-
readonly width: "1px";
|
|
710
|
-
readonly color: "hsl(var(--border))";
|
|
711
|
-
readonly style: "solid";
|
|
712
|
-
};
|
|
713
|
-
readonly inputFocus: {
|
|
714
|
-
readonly width: "2px";
|
|
715
|
-
readonly color: "hsl(var(--ring))";
|
|
716
|
-
readonly style: "solid";
|
|
717
|
-
};
|
|
718
|
-
readonly inputError: {
|
|
719
|
-
readonly width: "1px";
|
|
720
|
-
readonly color: "hsl(var(--destructive))";
|
|
721
|
-
readonly style: "solid";
|
|
722
|
-
};
|
|
723
|
-
readonly inputDisabled: {
|
|
724
|
-
readonly width: "1px";
|
|
725
|
-
readonly color: "hsl(var(--muted))";
|
|
726
|
-
readonly style: "solid";
|
|
727
|
-
};
|
|
728
|
-
readonly select: {
|
|
729
|
-
readonly width: "1px";
|
|
730
|
-
readonly color: "hsl(var(--border))";
|
|
731
|
-
readonly style: "solid";
|
|
732
|
-
};
|
|
733
|
-
readonly checkbox: {
|
|
734
|
-
readonly width: "1px";
|
|
735
|
-
readonly color: "hsl(var(--border))";
|
|
736
|
-
readonly style: "solid";
|
|
737
|
-
};
|
|
738
|
-
readonly checkboxChecked: {
|
|
739
|
-
readonly width: "1px";
|
|
740
|
-
readonly color: "hsl(var(--primary))";
|
|
741
|
-
readonly style: "solid";
|
|
742
|
-
};
|
|
743
|
-
};
|
|
744
|
-
readonly navigation: {
|
|
745
|
-
readonly divider: {
|
|
746
|
-
readonly width: "1px";
|
|
747
|
-
readonly color: "hsl(var(--border))";
|
|
748
|
-
readonly style: "solid";
|
|
749
|
-
};
|
|
750
|
-
readonly tabActive: {
|
|
751
|
-
readonly width: "2px";
|
|
752
|
-
readonly color: "hsl(var(--primary))";
|
|
753
|
-
readonly style: "solid";
|
|
754
|
-
};
|
|
755
|
-
readonly tabInactive: {
|
|
756
|
-
readonly width: "1px";
|
|
757
|
-
readonly color: "transparent";
|
|
758
|
-
readonly style: "solid";
|
|
759
|
-
};
|
|
760
|
-
readonly tabHover: {
|
|
761
|
-
readonly width: "1px";
|
|
762
|
-
readonly color: "hsl(var(--border))";
|
|
763
|
-
readonly style: "solid";
|
|
764
|
-
};
|
|
765
|
-
};
|
|
766
|
-
readonly layout: {
|
|
767
|
-
readonly divider: {
|
|
768
|
-
readonly width: "1px";
|
|
769
|
-
readonly color: "hsl(var(--border))";
|
|
770
|
-
readonly style: "solid";
|
|
771
|
-
};
|
|
772
|
-
readonly section: {
|
|
773
|
-
readonly width: "1px";
|
|
774
|
-
readonly color: "hsl(var(--muted))";
|
|
775
|
-
readonly style: "solid";
|
|
776
|
-
};
|
|
777
|
-
readonly container: {
|
|
778
|
-
readonly width: "1px";
|
|
779
|
-
readonly color: "hsl(var(--border))";
|
|
780
|
-
readonly style: "solid";
|
|
781
|
-
};
|
|
782
|
-
};
|
|
783
|
-
};
|
|
784
|
-
/**
|
|
785
|
-
* Directional stroke utilities
|
|
786
|
-
*/
|
|
787
|
-
declare const strokeDirections: {
|
|
788
|
-
readonly all: "border";
|
|
789
|
-
readonly top: "border-top";
|
|
790
|
-
readonly right: "border-right";
|
|
791
|
-
readonly bottom: "border-bottom";
|
|
792
|
-
readonly left: "border-left";
|
|
793
|
-
readonly horizontal: readonly ["border-left", "border-right"];
|
|
794
|
-
readonly vertical: readonly ["border-top", "border-bottom"];
|
|
795
|
-
};
|
|
796
|
-
type StrokeDirection = keyof typeof strokeDirections;
|
|
797
|
-
/**
|
|
798
|
-
* Utility function to get stroke value
|
|
799
|
-
*/
|
|
800
|
-
declare const getStroke: (token: StrokeToken) => string;
|
|
801
|
-
/**
|
|
802
|
-
* Utility function to get stroke color
|
|
803
|
-
*/
|
|
804
|
-
declare const getStrokeColor: (token: StrokeColorToken) => string;
|
|
805
|
-
/**
|
|
806
|
-
* Utility function to create complete stroke style
|
|
807
|
-
*/
|
|
808
|
-
declare const createStroke: (width: StrokeToken, color?: StrokeColorToken, style?: "solid" | "dashed" | "dotted") => string;
|
|
809
|
-
/**
|
|
810
|
-
* Generate CSS custom properties for strokes
|
|
811
|
-
*/
|
|
812
|
-
declare const generateStrokesCSS: () => string;
|
|
813
|
-
/**
|
|
814
|
-
* Stroke tokens for Tailwind CSS configuration
|
|
815
|
-
*/
|
|
816
|
-
declare const tailwindStrokes: {
|
|
817
|
-
readonly borderWidth: {
|
|
818
|
-
readonly 'stroke-1': "var(--stroke-1)";
|
|
819
|
-
readonly 'stroke-2': "var(--stroke-2)";
|
|
820
|
-
};
|
|
821
|
-
readonly outlineWidth: {
|
|
822
|
-
readonly 'stroke-1': "var(--stroke-1)";
|
|
823
|
-
readonly 'stroke-2': "var(--stroke-2)";
|
|
824
|
-
};
|
|
825
|
-
readonly borderColor: {
|
|
826
|
-
readonly 'stroke-default': "var(--stroke-color-default)";
|
|
827
|
-
readonly 'stroke-muted': "var(--stroke-color-muted)";
|
|
828
|
-
readonly 'stroke-primary': "var(--stroke-color-primary)";
|
|
829
|
-
readonly 'stroke-destructive': "var(--stroke-color-destructive)";
|
|
830
|
-
readonly 'stroke-focus': "var(--stroke-color-focus)";
|
|
831
|
-
};
|
|
832
|
-
};
|
|
833
|
-
/**
|
|
834
|
-
* Animation-ready stroke transitions
|
|
835
|
-
*/
|
|
836
|
-
declare const strokeTransitions: {
|
|
837
|
-
readonly fast: "border-width 0.15s ease-in-out, border-color 0.15s ease-in-out";
|
|
838
|
-
readonly medium: "border-width 0.2s ease-in-out, border-color 0.2s ease-in-out";
|
|
839
|
-
readonly slow: "border-width 0.3s ease-in-out, border-color 0.3s ease-in-out";
|
|
840
|
-
readonly colorOnly: "border-color 0.2s ease-in-out";
|
|
841
|
-
readonly widthOnly: "border-width 0.2s ease-in-out";
|
|
842
|
-
};
|
|
843
|
-
/**
|
|
844
|
-
* Responsive stroke utilities
|
|
845
|
-
*/
|
|
846
|
-
declare const responsiveStrokes: {
|
|
847
|
-
readonly mobile: {
|
|
848
|
-
readonly default: "1px";
|
|
849
|
-
readonly emphasized: "1px";
|
|
850
|
-
};
|
|
851
|
-
readonly tablet: {
|
|
852
|
-
readonly default: "1px";
|
|
853
|
-
readonly emphasized: "2px";
|
|
854
|
-
};
|
|
855
|
-
readonly desktop: {
|
|
856
|
-
readonly default: "1px";
|
|
857
|
-
readonly emphasized: "2px";
|
|
858
|
-
};
|
|
859
|
-
};
|
|
860
|
-
|
|
861
|
-
declare const badgeTokens: {
|
|
862
|
-
colors: {
|
|
863
|
-
inProgress: {
|
|
864
|
-
text: string;
|
|
865
|
-
background: string;
|
|
866
|
-
};
|
|
867
|
-
success: {
|
|
868
|
-
text: string;
|
|
869
|
-
background: string;
|
|
870
|
-
};
|
|
871
|
-
pending: {
|
|
872
|
-
text: string;
|
|
873
|
-
background: string;
|
|
874
|
-
};
|
|
875
|
-
danger: {
|
|
876
|
-
text: string;
|
|
877
|
-
background: string;
|
|
878
|
-
};
|
|
879
|
-
default: {
|
|
880
|
-
text: string;
|
|
881
|
-
background: string;
|
|
882
|
-
textOnSolid: string;
|
|
883
|
-
};
|
|
884
|
-
};
|
|
885
|
-
sizes: {
|
|
886
|
-
sm: string;
|
|
887
|
-
md: string;
|
|
888
|
-
lg: string;
|
|
889
|
-
};
|
|
890
|
-
padding: {
|
|
891
|
-
vertical: string;
|
|
892
|
-
horizontal: string;
|
|
893
|
-
};
|
|
894
|
-
icon: {
|
|
895
|
-
size: string;
|
|
896
|
-
};
|
|
897
|
-
};
|
|
898
|
-
|
|
899
|
-
declare const tagTokens: {
|
|
900
|
-
colors: {
|
|
901
|
-
default: {
|
|
902
|
-
background: string;
|
|
903
|
-
text: string;
|
|
904
|
-
bullet: string;
|
|
905
|
-
closeIconBorder: string;
|
|
906
|
-
hover: {
|
|
907
|
-
background: string;
|
|
908
|
-
closeIconBorder: string;
|
|
909
|
-
};
|
|
910
|
-
};
|
|
911
|
-
success: {
|
|
912
|
-
background: string;
|
|
913
|
-
text: string;
|
|
914
|
-
bullet: string;
|
|
915
|
-
closeIconBorder: string;
|
|
916
|
-
hover: {
|
|
917
|
-
background: string;
|
|
918
|
-
closeIconBorder: string;
|
|
919
|
-
};
|
|
920
|
-
};
|
|
921
|
-
warning: {
|
|
922
|
-
background: string;
|
|
923
|
-
text: string;
|
|
924
|
-
bullet: string;
|
|
925
|
-
closeIconBorder: string;
|
|
926
|
-
hover: {
|
|
927
|
-
background: string;
|
|
928
|
-
closeIconBorder: string;
|
|
929
|
-
};
|
|
930
|
-
};
|
|
931
|
-
danger: {
|
|
932
|
-
background: string;
|
|
933
|
-
text: string;
|
|
934
|
-
bullet: string;
|
|
935
|
-
closeIconBorder: string;
|
|
936
|
-
hover: {
|
|
937
|
-
background: string;
|
|
938
|
-
closeIconBorder: string;
|
|
939
|
-
};
|
|
940
|
-
};
|
|
941
|
-
};
|
|
942
|
-
fontSize: string;
|
|
943
|
-
padding: {
|
|
944
|
-
x: string;
|
|
945
|
-
y: string;
|
|
946
|
-
};
|
|
947
|
-
borderRadius: string;
|
|
948
|
-
iconSize: string;
|
|
949
|
-
};
|
|
8
|
+
import { ReactNode } from 'react';
|
|
9
|
+
export { classNames } from './utils/classNames.js';
|
|
10
|
+
export { cn } from './utils/cn.js';
|
|
11
|
+
export { Badge, BadgeProps, badgeVariants } from './atoms/badge/index.js';
|
|
12
|
+
export { Button, ButtonProps } from './atoms/button/index.js';
|
|
13
|
+
export { Checkbox } from './atoms/checkbox/index.js';
|
|
14
|
+
export { Input } from './atoms/input/index.js';
|
|
15
|
+
export { Label } from './atoms/label/index.js';
|
|
16
|
+
export { RadioGroup, RadioGroupItem } from './atoms/radio/index.js';
|
|
17
|
+
export { Switch } from './atoms/switch/index.js';
|
|
18
|
+
export { Tag, TagProps } from './atoms/tag/index.js';
|
|
19
|
+
export { Textarea, TextareaProps } from './atoms/textarea/index.js';
|
|
20
|
+
export { Paragraph, Title, Typography, TypographyProps, typographyVariants } from './atoms/typography/index.js';
|
|
21
|
+
export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './molecules/card/index.js';
|
|
22
|
+
export { Form, FormField, FormFieldProps, FormLabel, FormLabelProps, FormMessage, FormMessageProps, FormProps } from './molecules/form/index.js';
|
|
23
|
+
export { Tabs, TabsContent, TabsList, TabsTrigger } from './molecules/tabs/index.js';
|
|
24
|
+
export { ProgressBar, ProgressBarProps } from './molecules/progress-bar/index.js';
|
|
25
|
+
export { Alert, AlertDescription, AlertTitle } from './molecules/alert/index.js';
|
|
26
|
+
export { Step, StepContent, StepDescription, StepLabel, Stepper, StepperAPI, useStepper } from './molecules/stepper/index.js';
|
|
27
|
+
export { Dropdown, DropdownProps } from './molecules/dropdown/index.js';
|
|
28
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './molecules/accordion/index.js';
|
|
29
|
+
export { ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from './molecules/chart/index.js';
|
|
30
|
+
export { useModal } from './hooks/useModal.js';
|
|
31
|
+
import 'clsx';
|
|
32
|
+
import 'class-variance-authority/dist/types';
|
|
33
|
+
import 'class-variance-authority';
|
|
34
|
+
import './tokens/buttons.js';
|
|
35
|
+
import '@radix-ui/react-checkbox';
|
|
36
|
+
import '@radix-ui/react-label';
|
|
37
|
+
import '@radix-ui/react-radio-group';
|
|
38
|
+
import '@radix-ui/react-switch';
|
|
39
|
+
import '@radix-ui/react-tabs';
|
|
40
|
+
import '@radix-ui/react-accordion';
|
|
41
|
+
import 'recharts/types/util/useElementOffset';
|
|
42
|
+
import 'recharts/types/state/cartesianAxisSlice';
|
|
43
|
+
import 'recharts/types/chart/types';
|
|
44
|
+
import 'recharts/types/util/payload/getUniqPayload';
|
|
45
|
+
import 'recharts/types/state/tooltipSlice';
|
|
46
|
+
import 'recharts/types/component/Cursor';
|
|
47
|
+
import 'recharts/types/component/Tooltip';
|
|
48
|
+
import 'recharts/types/util/types';
|
|
49
|
+
import 'recharts/types/component/DefaultTooltipContent';
|
|
50
|
+
import 'recharts';
|
|
950
51
|
|
|
951
52
|
type Theme = 'light' | 'dark';
|
|
952
53
|
interface ThemeContextType {
|
|
@@ -958,349 +59,6 @@ declare function ThemeProvider({ children }: {
|
|
|
958
59
|
}): react_jsx_runtime.JSX.Element;
|
|
959
60
|
declare function useTheme(): ThemeContextType;
|
|
960
61
|
|
|
961
|
-
declare function classNames(...classes: (string | undefined | null | false)[]): string;
|
|
962
|
-
|
|
963
|
-
declare function cn(...inputs: ClassValue[]): string;
|
|
964
|
-
|
|
965
|
-
declare const badgeVariants: (props?: ({
|
|
966
|
-
variant?: "default" | "success" | "danger" | "pending" | "in-progress" | null | undefined;
|
|
967
|
-
shape?: "rounded" | "circular" | null | undefined;
|
|
968
|
-
size?: "sm" | "md" | "lg" | null | undefined;
|
|
969
|
-
visual?: "solid" | "dot" | null | undefined;
|
|
970
|
-
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
|
|
971
|
-
interface BadgeProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
972
|
-
}
|
|
973
|
-
declare function Badge({ className, variant, size, visual, shape, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
|
|
974
|
-
|
|
975
|
-
/**
|
|
976
|
-
* Button Design Tokens - Raya Design System
|
|
977
|
-
*
|
|
978
|
-
* Defines the button system tokens including sizes, variants, colors, and states
|
|
979
|
-
* for consistent button usage across the design system.
|
|
980
|
-
*/
|
|
981
|
-
declare const buttonSizes: {
|
|
982
|
-
readonly sm: {
|
|
983
|
-
readonly height: "32px";
|
|
984
|
-
readonly paddingX: "8px";
|
|
985
|
-
readonly paddingY: "4px";
|
|
986
|
-
readonly fontSize: "14px";
|
|
987
|
-
readonly iconSize: "16px";
|
|
988
|
-
readonly borderRadius: "10px";
|
|
989
|
-
};
|
|
990
|
-
readonly md: {
|
|
991
|
-
readonly height: "40px";
|
|
992
|
-
readonly paddingX: "16px";
|
|
993
|
-
readonly paddingY: "8px";
|
|
994
|
-
readonly fontSize: "16px";
|
|
995
|
-
readonly iconSize: "20px";
|
|
996
|
-
readonly borderRadius: "12px";
|
|
997
|
-
};
|
|
998
|
-
readonly lg: {
|
|
999
|
-
readonly height: "48px";
|
|
1000
|
-
readonly paddingX: "24px";
|
|
1001
|
-
readonly paddingY: "12px";
|
|
1002
|
-
readonly fontSize: "18px";
|
|
1003
|
-
readonly iconSize: "24px";
|
|
1004
|
-
readonly borderRadius: "16px";
|
|
1005
|
-
};
|
|
1006
|
-
};
|
|
1007
|
-
declare const buttonVariants: {
|
|
1008
|
-
readonly primary: "filled";
|
|
1009
|
-
readonly secondary: "outlined";
|
|
1010
|
-
readonly ghost: "text-only";
|
|
1011
|
-
readonly icon: "icon-only";
|
|
1012
|
-
};
|
|
1013
|
-
declare const buttonColors: {
|
|
1014
|
-
readonly primary: "default";
|
|
1015
|
-
readonly secondary: "purple";
|
|
1016
|
-
readonly success: "green";
|
|
1017
|
-
readonly warning: "orange";
|
|
1018
|
-
readonly destructive: "red";
|
|
1019
|
-
readonly neutral: "gray";
|
|
1020
|
-
};
|
|
1021
|
-
type ButtonSize = keyof typeof buttonSizes;
|
|
1022
|
-
type ButtonVariant = keyof typeof buttonVariants;
|
|
1023
|
-
type ButtonColor = keyof typeof buttonColors;
|
|
1024
|
-
interface ButtonProps$1 {
|
|
1025
|
-
variant?: ButtonVariant;
|
|
1026
|
-
size?: ButtonSize;
|
|
1027
|
-
color?: ButtonColor;
|
|
1028
|
-
disabled?: boolean;
|
|
1029
|
-
loading?: boolean;
|
|
1030
|
-
loadingText?: string;
|
|
1031
|
-
icon?: string;
|
|
1032
|
-
iconLeft?: string;
|
|
1033
|
-
iconRight?: string;
|
|
1034
|
-
className?: string;
|
|
1035
|
-
children?: React.ReactNode;
|
|
1036
|
-
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
1037
|
-
type?: 'button' | 'submit' | 'reset';
|
|
1038
|
-
'aria-label'?: string;
|
|
1039
|
-
'aria-describedby'?: string;
|
|
1040
|
-
asChild?: boolean;
|
|
1041
|
-
}
|
|
1042
|
-
|
|
1043
|
-
interface ButtonProps extends Omit<ButtonProps$1, 'icon' | 'iconLeft' | 'iconRight'> {
|
|
1044
|
-
icon?: React__default.ReactNode;
|
|
1045
|
-
iconLeft?: React__default.ReactNode;
|
|
1046
|
-
iconRight?: React__default.ReactNode;
|
|
1047
|
-
}
|
|
1048
|
-
declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
|
|
1049
|
-
|
|
1050
|
-
declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1051
|
-
|
|
1052
|
-
interface InputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
|
|
1053
|
-
error?: string | boolean;
|
|
1054
|
-
helperText?: string;
|
|
1055
|
-
label?: string;
|
|
1056
|
-
required?: boolean;
|
|
1057
|
-
icon?: React$1.ReactNode;
|
|
1058
|
-
}
|
|
1059
|
-
declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
1060
|
-
|
|
1061
|
-
declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_dist_types.ClassProp | undefined) => string> & React$1.RefAttributes<HTMLLabelElement>>;
|
|
1062
|
-
|
|
1063
|
-
declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1064
|
-
declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1065
|
-
|
|
1066
|
-
declare const Switch: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1067
|
-
|
|
1068
|
-
declare const tagVariants: (props?: ({
|
|
1069
|
-
variant?: "default" | "success" | "danger" | "warning" | null | undefined;
|
|
1070
|
-
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
|
|
1071
|
-
interface TagProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof tagVariants> {
|
|
1072
|
-
showBullet?: boolean;
|
|
1073
|
-
onClose?: () => void;
|
|
1074
|
-
}
|
|
1075
|
-
declare const Tag: React__default.ForwardRefExoticComponent<TagProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1076
|
-
|
|
1077
|
-
interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
1078
|
-
error?: string | boolean;
|
|
1079
|
-
helperText?: string;
|
|
1080
|
-
label?: string;
|
|
1081
|
-
required?: boolean;
|
|
1082
|
-
}
|
|
1083
|
-
declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
|
|
1084
|
-
|
|
1085
|
-
declare const typographyVariants: (props?: ({
|
|
1086
|
-
variant?: "display-l" | "heading-xl" | "heading-lg" | "heading-md" | "heading-sm" | "subheading-lg" | "subheading-md" | "subheading-sm" | "body-bold-lg" | "body-bold-md" | "body-bold-sm" | "body-bold-xs" | "body-lg" | "body-md" | "body-sm" | "body-xs" | "caption-c1" | null | undefined;
|
|
1087
|
-
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
|
|
1088
|
-
interface TypographyProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
|
|
1089
|
-
as?: React$1.ElementType;
|
|
1090
|
-
}
|
|
1091
|
-
declare const Typography: React$1.ForwardRefExoticComponent<TypographyProps & React$1.RefAttributes<HTMLElement>>;
|
|
1092
|
-
|
|
1093
|
-
declare const Title: React$1.ForwardRefExoticComponent<Omit<TypographyProps, "as"> & {
|
|
1094
|
-
level: 1 | 2 | 3 | 4 | 5 | 6;
|
|
1095
|
-
} & React$1.RefAttributes<HTMLHeadingElement>>;
|
|
1096
|
-
|
|
1097
|
-
type ParagraphProps = Omit<TypographyProps, 'as'>;
|
|
1098
|
-
declare const Paragraph: React$1.ForwardRefExoticComponent<ParagraphProps & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
1099
|
-
|
|
1100
|
-
declare const Card: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1101
|
-
declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1102
|
-
declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1103
|
-
declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1104
|
-
declare const CardContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1105
|
-
declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1106
|
-
|
|
1107
|
-
interface FormProps extends React$1.FormHTMLAttributes<HTMLFormElement> {
|
|
1108
|
-
}
|
|
1109
|
-
declare const Form: React$1.ForwardRefExoticComponent<FormProps & React$1.RefAttributes<HTMLFormElement>>;
|
|
1110
|
-
interface FormFieldProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
1111
|
-
error?: boolean;
|
|
1112
|
-
}
|
|
1113
|
-
declare const FormField: React$1.ForwardRefExoticComponent<FormFieldProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1114
|
-
interface FormLabelProps extends React$1.LabelHTMLAttributes<HTMLLabelElement> {
|
|
1115
|
-
required?: boolean;
|
|
1116
|
-
}
|
|
1117
|
-
declare const FormLabel: React$1.ForwardRefExoticComponent<FormLabelProps & React$1.RefAttributes<HTMLLabelElement>>;
|
|
1118
|
-
interface FormMessageProps extends React$1.HTMLAttributes<HTMLParagraphElement> {
|
|
1119
|
-
type?: 'error' | 'helper' | 'success';
|
|
1120
|
-
}
|
|
1121
|
-
declare const FormMessage: React$1.ForwardRefExoticComponent<FormMessageProps & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
1122
|
-
|
|
1123
|
-
declare const Tabs: React$1.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1124
|
-
declare const TabsList: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1125
|
-
declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1126
|
-
declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1127
|
-
|
|
1128
|
-
declare const progressBarContainerVariants: (props?: ({
|
|
1129
|
-
size?: "sm" | "md" | "lg" | null | undefined;
|
|
1130
|
-
} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
|
|
1131
|
-
interface ProgressBarProps extends React__default.HTMLAttributes<HTMLDivElement>, VariantProps<typeof progressBarContainerVariants> {
|
|
1132
|
-
value: number;
|
|
1133
|
-
label?: string;
|
|
1134
|
-
showPercentage?: boolean;
|
|
1135
|
-
}
|
|
1136
|
-
declare const ProgressBar: React__default.ForwardRefExoticComponent<ProgressBarProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
1137
|
-
|
|
1138
|
-
declare const Alert: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
|
|
1139
|
-
variant?: "default" | "success" | "danger" | "warning" | null | undefined;
|
|
1140
|
-
} & class_variance_authority_dist_types.ClassProp) | undefined) => string> & {
|
|
1141
|
-
isClosable?: boolean;
|
|
1142
|
-
actions?: React$1.ReactNode;
|
|
1143
|
-
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
1144
|
-
declare const AlertTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
1145
|
-
declare const AlertDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
1146
|
-
|
|
1147
|
-
type StepStatus = 'completed' | 'current' | 'upcoming';
|
|
1148
|
-
interface StepperContextValue {
|
|
1149
|
-
activeStep: number;
|
|
1150
|
-
orientation: 'horizontal' | 'vertical';
|
|
1151
|
-
steps: {
|
|
1152
|
-
status: StepStatus;
|
|
1153
|
-
}[];
|
|
1154
|
-
stepCount: number;
|
|
1155
|
-
}
|
|
1156
|
-
declare const useStepper: () => StepperContextValue;
|
|
1157
|
-
interface StepperAPI {
|
|
1158
|
-
goToNextStep: () => void;
|
|
1159
|
-
goToPrevStep: () => void;
|
|
1160
|
-
activeStep: number;
|
|
1161
|
-
}
|
|
1162
|
-
/**
|
|
1163
|
-
* A container for all the steps.
|
|
1164
|
-
* @param {number} initialStep - The initial step to be active.
|
|
1165
|
-
* @param {'horizontal' | 'vertical'} orientation - The orientation of the stepper.
|
|
1166
|
-
* @param {function} onStepChange - A callback for when the step changes.
|
|
1167
|
-
* @param {object[]} steps - An array of objects that represent each step.
|
|
1168
|
-
* @param {string} steps[].label - The label of the step.
|
|
1169
|
-
* @param {string} steps[].description - The description of the step.
|
|
1170
|
-
* @param {React.ReactNode} steps[].content - The content of the step.
|
|
1171
|
-
* @example
|
|
1172
|
-
* <Stepper
|
|
1173
|
-
* initialStep={0}
|
|
1174
|
-
* steps={[
|
|
1175
|
-
* {
|
|
1176
|
-
* label: 'Step 1',
|
|
1177
|
-
* description: 'Create an account',
|
|
1178
|
-
* content: <div>Step 1 content</div>,
|
|
1179
|
-
* },
|
|
1180
|
-
* {
|
|
1181
|
-
* label: 'Step 2',
|
|
1182
|
-
* description: 'Personal Information',
|
|
1183
|
-
* content: <div>Step 2 content</div>,
|
|
1184
|
-
* },
|
|
1185
|
-
* ]}
|
|
1186
|
-
* />
|
|
1187
|
-
*/
|
|
1188
|
-
declare const Stepper: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "onChange"> & {
|
|
1189
|
-
initialStep?: number;
|
|
1190
|
-
orientation?: "horizontal" | "vertical";
|
|
1191
|
-
onStepChange?: (step: number) => void;
|
|
1192
|
-
steps: {
|
|
1193
|
-
label: string;
|
|
1194
|
-
description?: string;
|
|
1195
|
-
content: React$1.ReactNode;
|
|
1196
|
-
}[];
|
|
1197
|
-
} & React$1.RefAttributes<StepperAPI>>;
|
|
1198
|
-
declare const Step: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
|
|
1199
|
-
index: number;
|
|
1200
|
-
} & VariantProps<(props?: ({
|
|
1201
|
-
status?: "current" | "completed" | "upcoming" | null | undefined;
|
|
1202
|
-
} & class_variance_authority_dist_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1203
|
-
declare const StepLabel: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
1204
|
-
declare const StepDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
1205
|
-
declare const StepContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
|
|
1206
|
-
index: number;
|
|
1207
|
-
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
1208
|
-
|
|
1209
|
-
interface DropdownOption {
|
|
1210
|
-
value: string;
|
|
1211
|
-
label: string;
|
|
1212
|
-
}
|
|
1213
|
-
interface DropdownProps {
|
|
1214
|
-
name?: string;
|
|
1215
|
-
label?: string;
|
|
1216
|
-
options: DropdownOption[];
|
|
1217
|
-
placeholder?: string;
|
|
1218
|
-
value?: string;
|
|
1219
|
-
onChange?: (value: string) => void;
|
|
1220
|
-
disabled?: boolean;
|
|
1221
|
-
error?: string | boolean;
|
|
1222
|
-
helperText?: string;
|
|
1223
|
-
required?: boolean;
|
|
1224
|
-
}
|
|
1225
|
-
declare const Dropdown: React$1.ForwardRefExoticComponent<DropdownProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
1226
|
-
|
|
1227
|
-
declare const AccordionTrigger: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
|
|
1228
|
-
icon?: React$1.ReactNode;
|
|
1229
|
-
} & React$1.RefAttributes<HTMLButtonElement>>;
|
|
1230
|
-
declare const AccordionContent: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1231
|
-
declare const AccordionItem: React$1.ForwardRefExoticComponent<Omit<Omit<AccordionPrimitive.AccordionItemProps & React$1.RefAttributes<HTMLDivElement>, "ref">, "children"> & VariantProps<(props?: ({
|
|
1232
|
-
variant?: "default" | "button" | null | undefined;
|
|
1233
|
-
} & class_variance_authority_dist_types.ClassProp) | undefined) => string> & {
|
|
1234
|
-
children: React$1.ReactNode;
|
|
1235
|
-
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
1236
|
-
declare const Accordion: React$1.ForwardRefExoticComponent<(Omit<AccordionPrimitive.AccordionSingleProps & React$1.RefAttributes<HTMLDivElement>, "ref"> | Omit<AccordionPrimitive.AccordionMultipleProps & React$1.RefAttributes<HTMLDivElement>, "ref">) & React$1.RefAttributes<HTMLDivElement>>;
|
|
1237
|
-
|
|
1238
|
-
declare const THEMES: {
|
|
1239
|
-
readonly light: "";
|
|
1240
|
-
readonly dark: ".dark";
|
|
1241
|
-
};
|
|
1242
|
-
type ChartConfig = {
|
|
1243
|
-
[k in string]: {
|
|
1244
|
-
label?: React$1.ReactNode;
|
|
1245
|
-
icon?: React$1.ComponentType;
|
|
1246
|
-
} & ({
|
|
1247
|
-
color?: string;
|
|
1248
|
-
theme?: never;
|
|
1249
|
-
} | {
|
|
1250
|
-
color?: never;
|
|
1251
|
-
theme: Record<keyof typeof THEMES, string>;
|
|
1252
|
-
});
|
|
1253
|
-
};
|
|
1254
|
-
declare const ChartContainer: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
|
|
1255
|
-
config: ChartConfig;
|
|
1256
|
-
children: React$1.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
|
|
1257
|
-
}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1258
|
-
declare const ChartStyle: ({ id, config }: {
|
|
1259
|
-
id: string;
|
|
1260
|
-
config: ChartConfig;
|
|
1261
|
-
}) => react_jsx_runtime.JSX.Element | null;
|
|
1262
|
-
declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
|
|
1263
|
-
declare const ChartTooltipContent: React$1.ForwardRefExoticComponent<Omit<Omit<RechartsPrimitive.DefaultTooltipContentProps<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType>, "viewBox" | "active" | "label" | "payload" | "coordinate" | "accessibilityLayer"> & {
|
|
1264
|
-
active?: boolean;
|
|
1265
|
-
includeHidden?: boolean | undefined;
|
|
1266
|
-
allowEscapeViewBox?: recharts_types_util_types.AllowInDimension;
|
|
1267
|
-
animationDuration?: recharts_types_util_types.AnimationDuration;
|
|
1268
|
-
animationEasing?: recharts_types_util_types.AnimationTiming;
|
|
1269
|
-
content?: recharts_types_component_Tooltip.ContentType<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType> | undefined;
|
|
1270
|
-
cursor?: recharts_types_component_Cursor.CursorDefinition;
|
|
1271
|
-
filterNull?: boolean;
|
|
1272
|
-
defaultIndex?: number | recharts_types_state_tooltipSlice.TooltipIndex;
|
|
1273
|
-
isAnimationActive?: boolean;
|
|
1274
|
-
offset?: number;
|
|
1275
|
-
payloadUniqBy?: recharts_types_util_payload_getUniqPayload.UniqueOption<recharts_types_component_DefaultTooltipContent.Payload<recharts_types_component_DefaultTooltipContent.ValueType, recharts_types_component_DefaultTooltipContent.NameType>> | undefined;
|
|
1276
|
-
portal?: HTMLElement | null;
|
|
1277
|
-
position?: Partial<recharts_types_util_types.Coordinate>;
|
|
1278
|
-
reverseDirection?: recharts_types_util_types.AllowInDimension;
|
|
1279
|
-
shared?: boolean;
|
|
1280
|
-
trigger?: recharts_types_chart_types.TooltipTrigger;
|
|
1281
|
-
useTranslate3d?: boolean;
|
|
1282
|
-
wrapperStyle?: React$1.CSSProperties;
|
|
1283
|
-
axisId?: recharts_types_state_cartesianAxisSlice.AxisId;
|
|
1284
|
-
} & React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
|
|
1285
|
-
hideLabel?: boolean;
|
|
1286
|
-
hideIndicator?: boolean;
|
|
1287
|
-
indicator?: "line" | "dot" | "dashed";
|
|
1288
|
-
nameKey?: string;
|
|
1289
|
-
labelKey?: string;
|
|
1290
|
-
}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1291
|
-
declare const ChartLegend: typeof RechartsPrimitive.Legend;
|
|
1292
|
-
declare const ChartLegendContent: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & Omit<RechartsPrimitive.DefaultLegendContentProps, "ref" | "payload"> & {
|
|
1293
|
-
wrapperStyle?: React$1.CSSProperties;
|
|
1294
|
-
width?: number;
|
|
1295
|
-
height?: number;
|
|
1296
|
-
payloadUniqBy?: recharts_types_util_payload_getUniqPayload.UniqueOption<RechartsPrimitive.LegendPayload>;
|
|
1297
|
-
onBBoxUpdate?: (box: recharts_types_util_useElementOffset.ElementOffset | null) => void;
|
|
1298
|
-
portal?: HTMLElement | null;
|
|
1299
|
-
} & {
|
|
1300
|
-
hideIcon?: boolean;
|
|
1301
|
-
nameKey?: string;
|
|
1302
|
-
}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1303
|
-
|
|
1304
62
|
interface ModalProps {
|
|
1305
63
|
open: boolean;
|
|
1306
64
|
onClose: () => void;
|
|
@@ -1313,16 +71,10 @@ interface AuthLayoutProps {
|
|
|
1313
71
|
}
|
|
1314
72
|
declare function AuthLayout({ children }: AuthLayoutProps): react_jsx_runtime.JSX.Element;
|
|
1315
73
|
|
|
1316
|
-
declare function useModal(initialOpen?: boolean): {
|
|
1317
|
-
open: boolean;
|
|
1318
|
-
openModal: () => void;
|
|
1319
|
-
closeModal: () => void;
|
|
1320
|
-
};
|
|
1321
|
-
|
|
1322
74
|
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
1323
75
|
interface IconProps extends React.SVGProps<SVGSVGElement> {
|
|
1324
76
|
size?: number | string;
|
|
1325
77
|
color?: string;
|
|
1326
78
|
}
|
|
1327
79
|
|
|
1328
|
-
export {
|
|
80
|
+
export { AuthLayout, type IconProps, Modal, type Size, ThemeProvider, useTheme };
|